/* v73 — UI/UX Pro Max convergence pass.
   One final contract for the public shell, BGM and editorial grid.
   It intentionally overrides the accumulated v44–v72 shell experiments. */

:root {
  --v73-frame: 1180px;
  --v73-reading: 760px;
  --v73-gutter: clamp(20px, 3.2vw, 32px);
  --v73-night: #0d0b09;
  --v73-night-raised: #15120e;
  --v73-cream: #f1ece1;
  --v73-muted: #aaa093;
  --v73-gold: #ddb04d;
  --v73-gold-soft: #e7c36d;
  --v73-line: rgb(231 205 148 / 18%);
  --v73-red: #c7686e;
  --v73-control: 42px;
}

html {
  scroll-padding-top: calc(var(--sticky-stack-height, 156px) + 16px);
}

body {
  min-width: 320px;
}

.reading-progress,
.hero::after,
.hero-inner::before,
.hero-inner::after,
.hero-copy::before,
.hero-copy::after,
.desktop-nav a::before,
.desktop-nav a::after,
.section-nav a::before,
.section-nav a::after {
  display: none !important;
  content: none !important;
}

/* ── Public shell: one baseline, no wandering rules ───────────────────── */
.site-header {
  border-bottom: 1px solid var(--v73-line) !important;
  background: rgb(13 11 9 / 96%) !important;
  box-shadow: 0 10px 30px rgb(0 0 0 / 16%);
  backdrop-filter: blur(16px);
}

.header-inner {
  width: min(calc(100% - (var(--v73-gutter) * 2)), var(--v73-frame)) !important;
  max-width: var(--v73-frame) !important;
  min-height: 72px !important;
  margin-inline: auto !important;
  padding: 8px 0 !important;
  display: grid !important;
  grid-template-columns: 210px minmax(0, 1fr) 124px !important;
  align-items: center !important;
  gap: 28px !important;
}

.brand {
  min-width: 0;
  gap: 11px !important;
}

.brand-mark {
  width: 26px !important;
  height: 34px !important;
}

.brand strong {
  color: var(--v73-cream) !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.035em !important;
  white-space: nowrap;
}

.brand small {
  margin-top: 3px !important;
  color: var(--v73-muted) !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.075em !important;
  white-space: nowrap;
}

.desktop-nav {
  min-width: 0;
  display: flex !important;
  justify-content: center !important;
  gap: clamp(15px, 1.45vw, 24px) !important;
}

.desktop-nav a {
  min-height: 40px !important;
  padding: 9px 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: rgb(241 236 225 / 70%) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--v73-cream) !important;
}

.desktop-nav a.active {
  color: var(--v73-gold-soft) !important;
}

.language-switch {
  min-width: 0;
  justify-self: end;
  gap: 8px !important;
}

.language-switch-label {
  color: var(--v73-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
}

.language-menu summary {
  min-width: 68px !important;
  min-height: var(--v73-control) !important;
  padding-inline: 11px !important;
  border-color: rgb(231 205 148 / 22%) !important;
  border-radius: 8px !important;
  color: var(--v73-cream) !important;
  background: rgb(255 255 255 / 2%) !important;
  font-size: 13px !important;
}

/* ── BGM: compact memorial-console, readable controls, no full-width bar ─ */
.site-bgm-bar {
  padding: 6px 0 10px !important;
  border-top: 1px solid rgb(255 255 255 / 4%) !important;
  background: transparent !important;
}

.site-bgm-inner {
  width: min(calc(100% - (var(--v73-gutter) * 2)), var(--v73-frame)) !important;
  max-width: var(--v73-frame) !important;
  margin-inline: auto !important;
  display: flex !important;
  justify-content: center !important;
}

.site-bgm-capsule {
  width: min(100%, 690px) !important;
  min-height: 58px !important;
  margin: 0 auto !important;
  padding: 8px 12px 7px !important;
  border: 1px solid rgb(221 176 77 / 28%) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(105deg, rgb(255 255 255 / 3%), transparent 38%),
    var(--v73-night-raised) !important;
  box-shadow: 0 10px 26px rgb(0 0 0 / 17%) !important;
}

.site-bgm-main {
  min-width: 0;
  min-height: var(--v73-control) !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(155px, 1fr) auto 78px !important;
  align-items: center !important;
  gap: 8px !important;
}

.site-bgm-label {
  padding-inline: 3px !important;
  color: var(--v73-gold-soft) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
}

.site-bgm-transport,
.site-bgm-modes {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.site-bgm-transport button,
.site-bgm-modes button {
  min-width: var(--v73-control) !important;
  height: var(--v73-control) !important;
  padding: 0 9px !important;
  border: 1px solid rgb(231 205 148 / 18%) !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: rgb(241 236 225 / 76%) !important;
  background: rgb(255 255 255 / 1.5%) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.site-bgm-transport .sound-toggle {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  border-color: rgb(221 176 77 / 60%) !important;
  color: #171108 !important;
  background: var(--v73-gold) !important;
  box-shadow: inset 0 0 0 3px rgb(13 11 9 / 68%) !important;
}

.site-bgm-picker {
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
}

.site-bgm-picker select {
  width: 100% !important;
  min-width: 0 !important;
  height: var(--v73-control) !important;
  padding: 0 32px 0 12px !important;
  border: 0 !important;
  border-left: 1px solid rgb(231 205 148 / 18%) !important;
  border-right: 1px solid rgb(231 205 148 / 18%) !important;
  border-radius: 0 !important;
  color: var(--v73-cream) !important;
  background-color: transparent !important;
  font-size: 14px !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis;
}

.site-bgm-modes button span:last-child {
  font-size: 11px !important;
}

.site-bgm-modes button.active {
  border-color: rgb(221 176 77 / 58%) !important;
  color: var(--v73-gold-soft) !important;
  background: rgb(221 176 77 / 9%) !important;
}

.site-bgm-volume {
  width: 78px !important;
  min-width: 78px !important;
}

.site-bgm-volume input {
  width: 100% !important;
}

.site-bgm-meta {
  min-height: 13px !important;
  margin: 2px 0 0 !important;
  padding: 0 4px 0 112px !important;
}

.site-bgm-note {
  color: rgb(241 236 225 / 48%) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.015em !important;
}

.site-bgm-picker select:focus-visible,
.site-bgm-transport button:focus-visible,
.site-bgm-modes button:focus-visible,
.language-menu summary:focus-visible {
  outline: 2px solid var(--v73-gold-soft) !important;
  outline-offset: 3px !important;
}

/* ── Chapter rail ─────────────────────────────────────────────────────── */
.section-nav {
  top: var(--site-header-height, 88px) !important;
  min-height: 50px !important;
  padding: 6px max(var(--v73-gutter), calc((100% - var(--v73-frame)) / 2)) !important;
  gap: 6px !important;
  border-top: 1px solid rgb(255 255 255 / 4%) !important;
  border-bottom: 1px solid var(--v73-line) !important;
  background: rgb(13 11 9 / 97%) !important;
  scrollbar-width: none;
}

.section-nav::-webkit-scrollbar {
  display: none;
}

.section-nav a {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: rgb(241 236 225 / 70%) !important;
  background: transparent !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.015em !important;
  white-space: nowrap;
}

.section-nav a:hover,
.section-nav a:focus-visible {
  color: var(--v73-cream) !important;
  background: rgb(255 255 255 / 5%) !important;
}

.section-nav a.active {
  color: #171108 !important;
  background: var(--v73-gold-soft) !important;
  box-shadow: none !important;
}

/* ── Editorial cover: same disciplined frame as the approved site ───── */
.hero-inner {
  width: min(calc(100% - (var(--v73-gutter) * 2)), var(--v73-frame)) !important;
  max-width: var(--v73-frame) !important;
  margin-inline: auto !important;
}

.hero-copy,
.hero-visual,
.section-heading,
.section-heading.split,
.demands-lead,
.petition-purpose,
.petition-grid,
.safety-card {
  min-width: 0;
}

.hero-copy {
  padding: 0 !important;
  border: 0 !important;
}

.hero .eyebrow {
  color: var(--v73-red) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
}

.hero h1 {
  color: var(--v73-cream) !important;
  font-weight: 760 !important;
  letter-spacing: var(--track-h) !important;
}

.hero-deck {
  color: rgb(241 236 225 / 77%) !important;
}

.hero-tags {
  gap: 10px 18px !important;
}

.hero-tags span {
  min-height: 28px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  color: rgb(241 236 225 / 78%) !important;
  background: transparent !important;
  font-size: 13px !important;
}

.hero .primary-link,
.petition-button {
  width: fit-content !important;
  min-width: min(100%, 280px) !important;
  min-height: 54px !important;
  padding: 14px 18px !important;
  border-radius: 7px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.hero-note,
.hero-meta {
  border: 0 !important;
}

.angel-frame {
  overflow: hidden;
  border: 1px solid rgb(231 205 148 / 25%) !important;
  border-radius: 8px !important;
  box-shadow: 0 22px 50px rgb(0 0 0 / 24%) !important;
}

/* One editorial baseline for every major chapter. */
@media (min-width: 981px) {
  .hero-inner {
    min-height: 650px !important;
    padding: 64px 0 72px !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr) !important;
    align-items: center !important;
    gap: clamp(52px, 5.4vw, 76px) !important;
  }

  .hero-copy {
    max-width: 535px !important;
  }

  .hero h1 {
    max-width: 10ch !important;
    margin: 24px 0 0 !important;
    font-size: clamp(50px, 4.25vw, 64px) !important;
    line-height: 1.14 !important;
  }

  html[data-language="en"] .hero h1,
  html[data-language="es"] .hero h1,
  html[data-language="vi"] .hero h1 {
    max-width: 14ch !important;
    font-size: clamp(42px, 3.35vw, 50px) !important;
  }

  html[data-language="ja"] .hero h1,
  html[data-language="ko"] .hero h1 {
    max-width: 12ch !important;
    font-size: clamp(44px, 3.55vw, 53px) !important;
  }

  .hero-deck {
    max-width: 34em !important;
    margin-top: 26px !important;
    font-size: 17px !important;
    line-height: 1.9 !important;
  }

  .hero-tags {
    margin-top: 23px !important;
  }

  .hero .primary-link {
    margin-top: 30px !important;
  }

  .hero-note {
    margin-top: 30px !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
  }

  .hero-visual {
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
  }

  .section,
  .share-section {
    padding-right: max(var(--v73-gutter), calc((100% - var(--v73-frame)) / 2)) !important;
    padding-left: max(var(--v73-gutter), calc((100% - var(--v73-frame)) / 2)) !important;
  }

  .section-heading,
  .section-heading.split {
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr) !important;
    gap: clamp(56px, 6vw, 88px) !important;
  }
}

/* 160 / Creator support: align the mobile payment path to the reading edge.
   Keep the compact card width, but remove the centered offset and the
   additional status/contact inset so the support path follows the copy. */
@media (max-width: 820px) {
  .creator-support-meta {
    justify-self: start !important;
  }

  .creator-support-meta .creator-support-status {
    padding-inline: 0 !important;
    text-align: left !important;
  }

  .creator-support-meta .creator-support-contact {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* ── Tablet / phone: compact but human-readable ─────────────────────── */
@media (max-width: 980px) {
  html {
    scroll-padding-top: calc(var(--sticky-stack-height, 162px) + 16px);
  }

  .header-inner {
    min-height: 62px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
  }

  .desktop-nav {
    display: none !important;
  }

  .brand strong {
    font-size: 15px !important;
  }

  .brand small {
    font-size: 9.5px !important;
  }

  .language-switch-label {
    display: none !important;
  }

  .site-bgm-bar {
    padding: 6px 0 8px !important;
  }

  .site-bgm-capsule {
    width: 100% !important;
  }

  .hero-inner {
    width: min(calc(100% - 40px), 680px) !important;
    padding: 44px 0 56px !important;
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }

  .hero h1 {
    max-width: 10ch !important;
    margin-top: 20px !important;
    font-size: clamp(38px, 10.4vw, 47px) !important;
    line-height: 1.16 !important;
  }

  html[data-language="en"] .hero h1,
  html[data-language="es"] .hero h1,
  html[data-language="vi"] .hero h1 {
    max-width: 15ch !important;
    font-size: clamp(34px, 8.8vw, 42px) !important;
  }

  .hero-deck {
    margin-top: 24px !important;
    font-size: 16px !important;
    line-height: 1.82 !important;
  }

  .hero-visual {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media (max-width: 720px) {
  :root {
    --v73-control: 40px;
  }

  .prototype-notice {
    min-height: 26px !important;
    padding: 5px 20px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  .header-inner {
    width: calc(100% - 40px) !important;
  }

  .brand-mark {
    width: 22px !important;
    height: 29px !important;
  }

  .language-menu summary {
    min-width: 62px !important;
    min-height: 38px !important;
    font-size: 13px !important;
  }

  .site-bgm-inner {
    width: calc(100% - 24px) !important;
  }

  .site-bgm-capsule {
    min-height: 56px !important;
    padding: 7px 8px 6px !important;
    border-radius: 10px !important;
  }

  .site-bgm-main {
    min-height: 40px !important;
    grid-template-columns: auto minmax(0, 1fr) auto 50px !important;
    gap: 5px !important;
  }

  .site-bgm-label {
    display: none !important;
  }

  .site-bgm-transport {
    gap: 2px !important;
  }

  .site-bgm-transport button {
    min-width: 32px !important;
    width: 32px !important;
    height: 40px !important;
    padding: 0 !important;
    border-color: transparent !important;
  }

  .site-bgm-transport .sound-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-color: rgb(221 176 77 / 58%) !important;
  }

  .site-bgm-picker select {
    height: 40px !important;
    padding-right: 26px !important;
    padding-left: 10px !important;
    font-size: 14px !important;
  }

  .site-bgm-modes {
    gap: 2px !important;
  }

  .site-bgm-modes button {
    min-width: 38px !important;
    width: 38px !important;
    height: 40px !important;
    padding: 0 !important;
  }

  .site-bgm-modes button span:last-child {
    display: none !important;
  }

  .site-bgm-volume {
    width: 50px !important;
    min-width: 50px !important;
  }

  .site-bgm-meta {
    min-height: 12px !important;
    margin-top: 2px !important;
    padding: 0 6px 0 76px !important;
  }

  .site-bgm-note {
    display: block !important;
    overflow: hidden;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section-nav {
    min-height: 48px !important;
    padding: 5px 20px !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow-x: auto !important;
  }

  .section-nav a {
    min-height: 38px !important;
    padding: 8px 11px !important;
    font-size: 13px !important;
  }

  .hero-inner {
    padding-top: 40px !important;
    gap: 32px !important;
  }

  .hero .eyebrow {
    font-size: 11px !important;
  }

  .hero h1 {
    font-size: clamp(37px, 10.6vw, 44px) !important;
  }

  .hero .primary-link,
  .petition-button {
    width: fit-content !important;
    min-width: min(100%, 272px) !important;
    min-height: 52px !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 374px) {
  .site-bgm-main {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .site-bgm-volume {
    display: none !important;
  }

  .site-bgm-transport button:not(.sound-toggle) {
    display: none !important;
  }

  .site-bgm-meta {
    padding-left: 52px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-bgm-capsule,
  .section-nav a,
  .desktop-nav a {
    transition: none !important;
  }
}

/* ── Ritual control: compact editorial instrument ────────────────────── */
#ritual {
  scroll-margin-top: 0;
}

.ritual-heading {
  margin-bottom: 22px !important;
}

.ritual-theme-controls {
  display: flex !important;
  width: fit-content !important;
  max-width: calc(100% - 40px) !important;
  min-height: 48px !important;
  margin: 0 auto clamp(24px, 3vw, 34px) !important;
  padding: 4px !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid rgb(221 176 77 / 24%) !important;
  border-radius: 9px !important;
  background: rgb(20 16 12 / 76%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 3%),
    0 10px 26px rgb(0 0 0 / 14%) !important;
  backdrop-filter: blur(8px);
}

.ritual-theme-random {
  width: auto !important;
  min-width: 88px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  gap: 7px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: rgb(244 238 224 / 82%) !important;
  background: transparent !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease !important;
}

.ritual-theme-random > span:first-child {
  color: var(--v73-gold-soft) !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.ritual-theme-random:hover,
.ritual-theme-random.active {
  color: #171108 !important;
  background: var(--v73-gold-soft) !important;
}

.ritual-theme-random.active > span:first-child,
.ritual-theme-random:hover > span:first-child {
  color: #171108 !important;
}

.ritual-theme-random:active {
  transform: translateY(1px);
}

.ritual-theme-random:focus-visible,
.ritual-theme-picker select:focus-visible {
  outline: 2px solid var(--v73-gold-soft) !important;
  outline-offset: 2px !important;
}

.ritual-theme-picker {
  display: inline-grid !important;
  grid-template-columns: auto minmax(128px, 1fr) !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 4px 0 14px !important;
  align-items: center !important;
  gap: 10px !important;
  border-left: 1px solid rgb(221 176 77 / 22%) !important;
  color: rgb(244 238 224 / 55%) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap;
}

.ritual-theme-picker select {
  width: auto !important;
  min-width: 132px !important;
  max-width: 190px !important;
  height: 40px !important;
  padding: 0 32px 0 12px !important;
  border: 0 !important;
  border-radius: 5px !important;
  color: var(--v73-cream) !important;
  background-color: rgb(255 255 255 / 4%) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.ritual-theme-picker select:hover {
  background-color: rgb(255 255 255 / 7%) !important;
}

@media (max-width: 720px) {
  .ritual-heading {
    margin-bottom: 18px !important;
  }

  .ritual-theme-controls {
    display: flex !important;
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;
    min-height: 48px !important;
    margin-bottom: 24px !important;
  }

  .ritual-theme-random {
    min-width: 82px !important;
    min-height: 44px !important;
    padding-inline: 12px !important;
  }

  .ritual-theme-picker {
    grid-template-columns: auto minmax(96px, 1fr) !important;
    min-height: 44px !important;
    padding-left: 10px !important;
    gap: 7px !important;
  }

  .ritual-theme-picker > span {
    font-size: 10px !important;
  }

  .ritual-theme-picker select {
    width: min(31vw, 132px) !important;
    min-width: 96px !important;
    height: 40px !important;
    padding-left: 9px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 359px) {
  .ritual-theme-picker > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .ritual-theme-picker {
    grid-template-columns: minmax(104px, 1fr) !important;
  }
}
/* Prayer composer: keep the memorial field compact, but give its label,
   writing line and action a deliberate editorial hierarchy. */
.prayer-compose {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

.prayer-compose > p {
  display: none;
}

.prayer-compose .prayer-form {
  display: grid;
  overflow: visible;
  min-height: 0;
  padding: 13px 15px 11px;
  border: 1px solid rgb(229 185 95 / 24%);
  border-radius: 14px;
  background: rgb(255 248 235 / 3.5%);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  width: 100%;
  grid-row: 1;
  grid-column: 1;
}

.prayer-compose .prayer-form > label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  color: #eee5d8;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  grid-column: 1 / -1;
}

.prayer-compose .prayer-form input {
  min-height: 40px;
  padding: 7px 4px 7px 0;
  font-size: 14px;
  line-height: 1.5;
}

.prayer-compose .prayer-form button {
  align-self: center;
  min-height: 38px;
  margin: 0;
  padding: 7px 2px 7px 13px;
  border: 0;
  border-left: 1px solid rgb(229 185 95 / 24%);
  border-radius: 0;
  color: var(--amber-soft);
  background: transparent;
  box-shadow: none;
  font-size: 11px;
}

.prayer-compose .prayer-form button:hover,
.prayer-compose .prayer-form button:focus-visible {
  color: #f3d99f;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.prayer-compose > small {
  grid-row: 3;
  grid-column: 1;
  margin-top: 9px;
  padding-inline: 2px;
}

.prayer-compose .prayer-presets {
  grid-row: 2;
  grid-column: 1;
  align-self: auto;
  margin-top: 12px;
}

.prayer-thanks-card {
  display: grid;
  opacity: 0;
  margin-top: 18px;
  padding: 14px 16px 14px 18px;
  border-left: 2px solid var(--amber-soft);
  color: #e9dfd1;
  background: linear-gradient(90deg, rgb(229 185 95 / 9%), transparent 72%);
  grid-row: 4;
  grid-column: 1;
  gap: 3px;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.prayer-thanks-card[hidden] {
  display: none;
}

.prayer-thanks-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.prayer-thanks-card strong {
  color: var(--amber-soft);
  font-family: var(--serif);
  font-size: 14px;
}

.prayer-thanks-card span {
  color: rgb(233 223 209 / 66%);
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .prayer-compose .prayer-form {
    padding: 12px 14px 10px;
    column-gap: 10px;
  }

  .prayer-compose .prayer-form > label {
    font-size: 13px;
  }

  .prayer-compose .prayer-form input {
    font-size: 13px;
  }

  .prayer-compose .prayer-form button {
    padding-left: 11px;
  }

  .prayer-thanks-card {
    margin-top: 14px;
    padding: 12px 13px 12px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prayer-thanks-card {
    transition: none;
    transform: none;
  }
}

/* ========================================================================== */
/* Cinematic continuity pass: home, ritual, prayer wall, documentary imagery */
/* ========================================================================== */

.hero,
.memorial-band,
.memorial-ritual,
.prayer-wall {
  background-image:
    radial-gradient(circle at 11% 18%, rgb(239 208 146 / 24%) 0 1px, transparent 1.6px),
    radial-gradient(circle at 74% 13%, rgb(255 243 214 / 17%) 0 1px, transparent 1.5px),
    radial-gradient(circle at 56% 71%, rgb(217 157 102 / 14%) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at 76% 28%, rgb(87 57 35 / 12%), transparent 38%);
  background-position: 0 0, 90px 40px, 170px 110px, 0 0;
  background-size: 330px 280px, 470px 360px, 390px 420px, 100% 100%;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, #080604 0%, rgb(8 6 4 / 96%) 34%, rgb(8 6 4 / 66%) 52%, rgb(8 6 4 / 8%) 82%),
    linear-gradient(180deg, transparent 68%, #080604 100%);
  content: "";
  pointer-events: none;
}

@media (min-width: 981px) {
  .hero-inner {
    position: relative;
    display: block !important;
    width: min(100%, 1440px) !important;
    max-width: 1440px !important;
    min-height: clamp(650px, 75vh, 820px) !important;
    margin-inline: auto !important;
    padding: 0 max(32px, calc((100% - 1340px) / 2)) !important;
  }

  .hero-copy {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(44%, 550px) !important;
    max-width: 550px !important;
    min-height: clamp(650px, 75vh, 820px);
    padding-block: 76px 92px !important;
  }

  .hero-copy::before {
    position: absolute;
    z-index: -1;
    inset: 5% -28% 5% -12%;
    background: radial-gradient(ellipse at 32% 50%, rgb(8 6 4 / 84%), transparent 70%);
    content: "";
    pointer-events: none;
  }

  .hero-visual {
    position: absolute !important;
    z-index: 1;
    inset: 0 0 0 24% !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: 100% !important;
    margin: 0 !important;
  }

  .angel-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .angel-frame > img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 64% center !important;
    filter: saturate(.88) contrast(1.04) brightness(.84);
    transform: scale(1.018);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
  }

  .angel-overlay {
    display: none !important;
  }

  .visual-plate {
    position: absolute !important;
    z-index: 3;
    right: max(32px, calc((100% - 1340px) / 2));
    bottom: 58px;
    width: min(310px, 28vw);
    padding: 18px 20px !important;
    border-top: 1px solid rgb(229 185 95 / 32%);
    background: linear-gradient(90deg, rgb(8 6 4 / 72%), transparent);
    text-shadow: 0 1px 20px #000;
  }

  .hero-visual figcaption {
    position: absolute !important;
    z-index: 3;
    right: max(32px, calc((100% - 1340px) / 2));
    bottom: 30px;
    color: rgb(244 235 222 / 58%);
  }

  .hero-note,
  .hero-meta {
    position: absolute !important;
    z-index: 4;
  }

  .hero-note {
    left: max(32px, calc((100% - 1340px) / 2));
    bottom: 28px;
    width: min(520px, 42%);
  }

  .hero-meta {
    right: max(32px, calc((100% - 1340px) / 2));
    bottom: 14px;
  }
}

@media (max-width: 980px) {
  .hero-inner {
    position: relative;
    display: flex !important;
    flex-direction: column;
    padding-inline: 20px !important;
  }

  .hero-copy {
    position: relative;
    z-index: 3;
    padding-top: 52px !important;
  }

  .hero-visual {
    position: relative;
    z-index: 2;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    margin: 28px -20px 0 !important;
  }

  .angel-frame {
    aspect-ratio: 4 / 3;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .angel-frame > img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 62% center !important;
    filter: saturate(.9) contrast(1.03) brightness(.86);
    transform: scale(1.012);
  }

  .angel-overlay {
    inset: auto 20px 22px !important;
    max-width: 250px;
    padding: 14px 16px !important;
    background: rgb(8 6 4 / 68%);
    backdrop-filter: blur(6px);
  }
}

/* Every ritual theme owns the entire cinematic canvas. */
.ritual-stage,
.ritual-scene {
  width: 100% !important;
  max-width: none !important;
}

.ritual-stage {
  overflow: hidden !important;
}

.ritual-scene {
  aspect-ratio: 16 / 9 !important;
  background: #0c0907 !important;
  overflow: hidden !important;
}

.ritual-scene-image,
.ritual-heaven-scene,
.ritual-dusk-scene,
.ritual-ambient-scene,
.ritual-puppies-presence,
.ritual-puppies-presence img,
.ritual-paw-reveal {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 720px) {
  .ritual-scene {
    aspect-ratio: 4 / 5 !important;
  }
}

/* The prayer wall is the closing chapter of the ritual, not a narrow card. */
.prayer-wall {
  position: relative;
  left: 50%;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 0 0 -50vw !important;
  padding: clamp(58px, 7vw, 96px) max(20px, calc((100vw - 1180px) / 2)) !important;
  overflow: hidden;
}

.prayer-wall-heading,
.prayer-stream,
.prayer-compose {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
}

.prayer-wall-companion {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-position: right center !important;
  background-size: cover !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 12%) 42%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 12%) 42%, #000 100%);
}

.prayer-identity {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(229 185 95 / 20%);
}

.prayer-identity label:first-child {
  display: grid !important;
  gap: 6px !important;
  color: rgb(233 223 209 / 72%) !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.prayer-identity input[type="text"] {
  width: 100% !important;
  min-height: 38px !important;
  padding: 6px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgb(229 185 95 / 26%) !important;
  border-radius: 0 !important;
  outline-offset: 4px;
  color: #f2eadf !important;
  background: transparent !important;
}

.prayer-identity input[type="text"]:disabled {
  opacity: .38;
}

.prayer-anonymous {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  min-height: 38px;
  color: rgb(233 223 209 / 76%) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.prayer-anonymous input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  padding: 0 !important;
  accent-color: var(--amber-soft);
}

.prayer-author {
  display: block;
  margin-top: 14px;
  color: var(--amber-soft);
  font-size: 12px;
  letter-spacing: .08em;
}

.prayer-author[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .prayer-identity {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .prayer-anonymous {
    justify-self: start;
  }
}

/* Remove the one-pixel crop seam and visually seat documentary stills in-page. */
.story-image,
.memorial-photo,
.memorial-carousel,
.memorial-slides,
.memorial-slide {
  overflow: hidden !important;
  background: #0b0806 !important;
}

.story-image,
.memorial-carousel {
  border-left: 0 !important;
  box-shadow: inset 0 0 36px rgb(8 6 4 / 28%) !important;
}

.story-image img,
.memorial-slide img {
  display: block;
  width: calc(100% + 2px) !important;
  max-width: none !important;
  margin-left: -1px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 77 — one cinematic canvas: no card-like side gutters between story chapters. */
.ritual-stage {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: -50vw !important;
  border-inline: 0 !important;
}

.ritual-scene {
  width: 100vw !important;
  max-width: none !important;
  margin-inline: 0 !important;
  border-inline: 0 !important;
  border-radius: 0 !important;
}

.story-image-real,
.memorial-carousel,
.memorial-slides,
.memorial-slide {
  border: 0 !important;
  background: transparent !important;
}

.story-image-real {
  box-shadow: none !important;
}

.story-image-real::before {
  box-shadow: inset 0 0 52px 10px rgb(15 13 11 / 20%) !important;
}

.story-image-real img,
.memorial-slide img {
  width: 100% !important;
  margin: 0 !important;
}

.memorial-carousel::before,
.memorial-carousel::after {
  border-left: 0 !important;
}

@media (min-width: 981px) {
  .story-image-real {
    width: min(1180px, calc(100vw - 64px)) !important;
  }
}

@media (max-width: 720px) {
  .ritual-stage,
  .ritual-scene {
    width: 100vw !important;
  }

  .story-image-real {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    border-radius: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   78 / focused visual corrections
   Keep desktop's approved cinematic composition. These rules only repair the
   documentary crop seam, mobile hero continuity, creator-support readability,
   and the mobile ritual canvas/controls.
   -------------------------------------------------------------------------- */

/* Documentary stills must meet the paper field without a one-pixel black seam. */
.story-image-real {
  isolation: isolate !important;
  overflow: hidden !important;
  clip-path: inset(0) !important;
}

.story-image-real::before {
  inset: -3px !important;
  border: 0 !important;
  box-shadow: inset 0 0 44px 8px rgb(15 13 11 / 16%) !important;
}

.story-image-real img {
  width: calc(100% + 4px) !important;
  max-width: none !important;
  margin-left: -2px !important;
}

/* The support ledger is quiet, not microscopic, on a desktop reading distance. */
@media (min-width: 981px) {
  .creator-support-details dl > div {
    grid-template-columns: 136px minmax(0, 1fr) !important;
    gap: 28px !important;
    padding-block: 22px !important;
  }

  .creator-support-details dt {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .creator-support-details dd {
    font-size: 16px !important;
    line-height: 1.82 !important;
  }

  .creator-support-status,
  .creator-support-contact {
    font-size: 13.5px !important;
    line-height: 1.8 !important;
  }
}

@media (max-width: 720px) {
  /* One mobile cover: the image is now the lower cinematic layer of the same
     hero rather than a second page stacked below the complete text block. */
  .hero {
    position: relative !important;
    overflow: hidden !important;
    background: #080604 !important;
  }

  .hero-inner {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: clamp(700px, 91svh, 790px) !important;
    padding: 0 20px !important;
    overflow: hidden !important;
  }

  .hero-copy {
    position: relative !important;
    z-index: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    max-width: 430px !important;
    min-height: clamp(700px, 91svh, 790px) !important;
    padding: 38px 0 42px !important;
  }

  .hero-copy::before {
    position: absolute;
    z-index: -1;
    inset: 0 -42vw 0 -20px;
    background:
      linear-gradient(180deg, rgb(8 6 4 / 96%) 0%, rgb(8 6 4 / 84%) 54%, rgb(8 6 4 / 18%) 82%, transparent 100%),
      linear-gradient(90deg, rgb(8 6 4 / 92%) 0%, rgb(8 6 4 / 54%) 62%, transparent 100%);
    content: "";
    pointer-events: none;
  }

  .hero h1 {
    max-width: 9.5ch !important;
    margin-top: 18px !important;
    font-size: clamp(39px, 10.7vw, 46px) !important;
    line-height: 1.13 !important;
  }

  .hero-deck {
    max-width: 34em !important;
    margin-top: 20px !important;
    font-size: 15.5px !important;
    line-height: 1.76 !important;
  }

  .hero-tags {
    margin-top: 18px !important;
  }

  .hero .primary-link {
    align-self: flex-start !important;
    margin-top: 24px !important;
  }

  .hero-visual {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .hero-visual::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
      linear-gradient(180deg, #080604 0%, rgb(8 6 4 / 88%) 46%, rgb(8 6 4 / 18%) 78%, rgb(8 6 4 / 58%) 100%),
      linear-gradient(90deg, rgb(8 6 4 / 70%) 0%, transparent 72%);
    content: "";
    pointer-events: none;
  }

  .hero .angel-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }

  .hero .angel-frame > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 61% center !important;
    filter: saturate(.88) contrast(1.04) brightness(.72) !important;
    transform: scale(1.01) !important;
  }

  .hero .angel-overlay,
  .hero .visual-plate,
  .hero-visual figcaption,
  .hero-note,
  .hero-meta {
    display: none !important;
  }

  /* Mobile ritual imagery is based on the 4:3 visible crop used by the candle
     coordinate transform. Do not let the desktop 16:9/full-bleed rule turn it
     into a portrait canvas. */
  .ritual-stage {
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    overflow: hidden !important;
  }

  .ritual-scene {
    width: 100vw !important;
    max-width: 100vw !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .ritual-scene-image,
  .ritual-heaven-scene,
  .ritual-dusk-scene,
  .ritual-ambient-scene,
  .ritual-puppies-presence,
  .ritual-puppies-presence img,
  .ritual-paw-reveal {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .ritual-return {
    right: 12px !important;
    bottom: 12px !important;
    min-height: 42px !important;
    padding: 9px 13px !important;
    border-color: rgb(229 185 95 / 58%) !important;
    background: rgb(12 9 7 / 84%) !important;
    box-shadow: 0 8px 24px rgb(0 0 0 / 28%) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    backdrop-filter: blur(8px) !important;
  }
}

@media (min-width: 721px) {
  .ritual-return {
    min-height: 42px !important;
    padding: 9px 14px !important;
    border-color: rgb(229 185 95 / 52%) !important;
    background: rgb(12 9 7 / 82%) !important;
    box-shadow: 0 10px 30px rgb(0 0 0 / 26%) !important;
    font-size: 13px !important;
    backdrop-filter: blur(8px) !important;
  }
}

/* --------------------------------------------------------------------------
   79 / layout convergence
   One alignment system for the header, ritual close, prayer wall and support
   ledger. This block intentionally repairs late full-bleed overrides without
   changing content or interaction logic.
   -------------------------------------------------------------------------- */

/* The puppies are a quiet foreground vignette, not a second full-screen image. */
.ritual-puppies-presence {
  inset: auto auto 1.8% 2.2% !important;
  width: 39% !important;
  height: 29% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  object-fit: initial !important;
  object-position: initial !important;
}

.ritual-puppies-presence img {
  inset: -168% auto auto -80% !important;
  width: 200% !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: initial !important;
  object-position: initial !important;
}

/* Close the ritual with a compact, readable status rail. */
.ritual-meta {
  width: min(calc(100% - max(40px, var(--gutter) * 2)), 1080px) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 16px 0 18px !important;
}

.ritual-meta .light-copy {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Prayer and response form are one closing movement, not two tall chapters. */
.prayer-wall {
  min-height: 0 !important;
  padding-top: clamp(36px, 4vw, 54px) !important;
  padding-bottom: clamp(30px, 3.6vw, 46px) !important;
}

.prayer-wall-heading,
.prayer-stream,
.prayer-compose {
  width: min(100%, 1060px) !important;
  max-width: 1060px !important;
}

.prayer-wall-heading {
  gap: clamp(24px, 4vw, 54px) !important;
}

.prayer-stream {
  min-height: clamp(168px, 17vw, 218px) !important;
  margin-top: clamp(26px, 3vw, 38px) !important;
}

.prayer-message {
  padding-block: 24px !important;
}

.prayer-compose {
  margin-top: clamp(20px, 2.4vw, 30px) !important;
  padding-top: clamp(20px, 2.4vw, 28px) !important;
  grid-template-columns: minmax(230px, .58fr) minmax(420px, 1.42fr) !important;
  column-gap: clamp(30px, 5vw, 64px) !important;
}

/* Desktop masthead: balanced edges and legible controls, without inflating it. */
@media (min-width: 981px) {
  .header-inner {
    width: min(calc(100% - 64px), 1180px) !important;
    min-height: 78px !important;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important;
    gap: clamp(24px, 3vw, 48px) !important;
  }

  .brand {
    justify-self: start !important;
    gap: 12px !important;
  }

  .brand-mark {
    width: 34px !important;
    height: 34px !important;
  }

  .brand strong {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .brand small {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  .desktop-nav {
    justify-self: center !important;
    gap: clamp(18px, 1.7vw, 28px) !important;
  }

  .desktop-nav a {
    font-size: 14.5px !important;
    line-height: 1.35 !important;
  }

  .language-switch {
    justify-self: end !important;
    gap: 12px !important;
  }

  .language-switch-label {
    font-size: 12.5px !important;
  }

  .language-menu summary {
    min-width: 86px !important;
    min-height: 42px !important;
    padding-inline: 14px !important;
    font-size: 14px !important;
  }

  /* Bring the support ledger up to normal desktop reading size and center it
     vertically against the intro instead of leaving it stranded at the foot. */
  .creator-support {
    align-items: center !important;
    grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr) !important;
    gap: clamp(72px, 8vw, 116px) !important;
  }

  .creator-support h2 {
    font-size: clamp(36px, 3.35vw, 50px) !important;
    line-height: 1.34 !important;
  }

  .creator-support-intro > p:last-child {
    font-size: 17px !important;
    line-height: 1.88 !important;
  }

  .creator-support-details {
    align-self: center !important;
  }

  .creator-support-details dl > div {
    grid-template-columns: 148px minmax(0, 1fr) !important;
    gap: 30px !important;
    padding-block: 24px !important;
  }

  .creator-support-details dt {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  .creator-support-details dd {
    font-size: 17px !important;
    line-height: 1.82 !important;
  }

  .creator-support-status,
  .creator-support-contact {
    font-size: 14.5px !important;
    line-height: 1.8 !important;
  }
}

@media (max-width: 720px) {
  .ritual-puppies-presence {
    inset: auto auto 1.5% .5% !important;
    width: 47% !important;
    height: 29% !important;
    object-fit: initial !important;
  }

  .ritual-puppies-presence img {
    inset: -170% auto auto -80% !important;
    width: 200% !important;
    height: auto !important;
    object-fit: initial !important;
  }

  .ritual-meta {
    width: calc(100% - 40px) !important;
    padding: 13px 0 15px !important;
  }

  .prayer-wall {
    padding: 40px 20px 34px !important;
  }

  .prayer-wall-heading {
    gap: 12px !important;
  }

  .prayer-stream {
    min-height: 198px !important;
    margin-top: 26px !important;
  }

  .prayer-compose {
    margin-top: 20px !important;
    padding-top: 20px !important;
    grid-template-columns: 1fr !important;
    row-gap: 16px !important;
  }
}

/* 80 / final density pass -------------------------------------------------
   Keep the ritual, status and prayer response as one continuous movement.
   The previous desktop grid left the form trapped in a narrow first column,
   while the full-bleed section still reserved a near-viewport of empty space. */
.ritual-meta {
  padding-block: 11px 12px !important;
}

.ritual-meta .light-copy {
  display: flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 10px 22px !important;
  flex-wrap: wrap !important;
}

.ritual-meta .light-button-label {
  margin: 0 !important;
  grid-column: auto !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
}

.ritual-meta .light-status,
.ritual-meta .light-thanks {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

.prayer-wall {
  padding-top: clamp(30px, 3vw, 42px) !important;
  padding-bottom: clamp(26px, 2.8vw, 38px) !important;
}

.prayer-stream {
  min-height: clamp(150px, 14vw, 188px) !important;
  margin-top: clamp(20px, 2.2vw, 30px) !important;
}

.prayer-message {
  padding-block: 18px !important;
}

.prayer-compose {
  width: min(100%, 1060px) !important;
  margin: clamp(16px, 1.8vw, 24px) auto 0 !important;
  padding-top: clamp(16px, 1.8vw, 22px) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
  row-gap: 12px !important;
}

.prayer-compose .prayer-form {
  width: 100% !important;
  max-width: none !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
}

.prayer-compose .prayer-presets,
.prayer-compose > small {
  grid-column: 1 !important;
}

@media (min-width: 981px) {
  .creator-support-details dt {
    font-size: 15.5px !important;
  }

  .creator-support-details dd {
    font-size: 18px !important;
    line-height: 1.78 !important;
  }

  .creator-support-status,
  .creator-support-contact {
    font-size: 15.5px !important;
  }
}

@media (max-width: 720px) {
  .ritual-meta {
    padding-block: 10px 12px !important;
  }

  .ritual-meta .light-copy {
    width: 100% !important;
    margin-inline: 0 !important;
    justify-content: flex-start !important;
    gap: 6px 14px !important;
  }

  .ritual-meta .light-button-label {
    flex-basis: 100% !important;
  }

  .prayer-wall {
    padding: 30px 20px 28px !important;
  }

  .prayer-stream {
    min-height: 172px !important;
    margin-top: 20px !important;
  }

  .prayer-compose {
    margin-top: 16px !important;
    padding-top: 16px !important;
    row-gap: 12px !important;
  }
}

/* 81 / masthead, hero and BGM optical alignment --------------------------
   Keep the controls compact, but make their symbols and track title readable.
   Desktop masthead edges use equal visual weight; mobile keeps its density. */
.site-bgm-picker {
  display: grid !important;
  align-items: center !important;
}

.site-bgm-picker select {
  padding-inline: 30px !important;
  text-align: center !important;
  text-align-last: center !important;
}

.sound-toggle-glyph {
  display: inline-block !important;
  font-size: 23px !important;
  line-height: 1 !important;
  transform: translateX(1px) !important;
}

.site-bgm-skip > span {
  font-size: 15px !important;
  line-height: 1 !important;
}

.site-bgm-modes button > span:first-child {
  display: inline-block !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

@media (min-width: 981px) {
  .header-inner {
    width: min(calc(100% - 56px), 1240px) !important;
    min-height: 84px !important;
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr) !important;
    gap: clamp(26px, 3vw, 44px) !important;
  }

  .brand,
  .language-switch {
    transform: translateY(3px) !important;
  }

  .brand strong {
    font-size: 19px !important;
  }

  .brand small {
    font-size: 12px !important;
  }

  .desktop-nav {
    gap: clamp(20px, 1.75vw, 30px) !important;
  }

  .desktop-nav a {
    font-size: 15.5px !important;
  }

  .language-switch-label,
  .language-menu summary {
    font-size: 15px !important;
  }

  .language-menu summary {
    min-width: 90px !important;
  }

  .site-bgm-capsule {
    width: min(100%, 740px) !important;
  }

  .site-bgm-main {
    grid-template-columns: auto auto minmax(240px, 1fr) auto 78px !important;
  }

  .hero-inner {
    grid-template-columns: minmax(0, .96fr) minmax(520px, 1.04fr) !important;
    gap: clamp(42px, 4vw, 58px) !important;
  }

  .hero-copy {
    transform: translateX(clamp(12px, 1.3vw, 20px)) !important;
  }
}

@media (max-width: 720px) {
  .site-bgm-main {
    grid-template-columns: auto minmax(0, 1fr) auto 44px !important;
    gap: 3px !important;
  }

  .site-bgm-transport {
    gap: 1px !important;
  }

  .site-bgm-transport button {
    min-width: 26px !important;
    width: 26px !important;
    height: 38px !important;
  }

  .site-bgm-transport .sound-toggle {
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .site-bgm-picker select {
    padding-inline: 18px !important;
  }

  .sound-toggle-glyph {
    font-size: 22px !important;
  }

  .site-bgm-skip > span {
    font-size: 14px !important;
  }

  .site-bgm-modes button > span:first-child {
    font-size: 20px !important;
  }

  .site-bgm-modes {
    gap: 1px !important;
  }

  .site-bgm-modes button {
    min-width: 34px !important;
    width: 34px !important;
    height: 38px !important;
  }

  .site-bgm-volume {
    min-width: 44px !important;
    width: 44px !important;
  }

  .identity-safety.section {
    padding-bottom: 28px !important;
  }

  .sources.section {
    padding-top: 32px !important;
  }
}

/* 83 / Mobile hope-in-darkness rhythm ------------------------------------ */
@keyframes hero-hope-breathe {
  0% {
    opacity: 0.42;
    transform: translate3d(-0.6%, 0.8%, 0) scale(0.99);
  }

  100% {
    opacity: 0.68;
    transform: translate3d(0.8%, -0.6%, 0) scale(1.015);
  }
}

@media (max-width: 720px) {
  .hero-inner,
  .hero-copy {
    min-height: clamp(620px, 82svh, 690px) !important;
  }

  .hero-copy {
    padding: 34px 0 28px !important;
  }

  .hero h1 {
    line-height: 1.18 !important;
  }

  .hero-deck {
    margin-top: 22px !important;
    line-height: 1.86 !important;
  }

  .hero-tags {
    margin-top: 20px !important;
  }

  .hero .primary-link {
    margin-top: 22px !important;
  }

  .hero-copy::before {
    background:
      radial-gradient(ellipse at 76% 49%, rgb(242 201 112 / 16%) 0%, rgb(232 177 75 / 7%) 22%, transparent 42%),
      linear-gradient(180deg, rgb(8 6 4 / 94%) 0%, rgb(8 6 4 / 68%) 42%, rgb(8 6 4 / 18%) 72%, transparent 94%),
      linear-gradient(90deg, rgb(8 6 4 / 91%) 0%, rgb(8 6 4 / 66%) 43%, rgb(8 6 4 / 16%) 76%, transparent 100%) !important;
  }

  .hero-visual::after {
    background:
      linear-gradient(180deg, #080604 0%, rgb(8 6 4 / 66%) 36%, rgb(8 6 4 / 12%) 68%, rgb(8 6 4 / 18%) 100%),
      linear-gradient(90deg, rgb(8 6 4 / 55%) 0%, rgb(8 6 4 / 10%) 57%, transparent 88%) !important;
  }

  .hero .angel-frame > img {
    object-position: 63% 56% !important;
    filter: saturate(0.96) contrast(1.04) brightness(1.04) !important;
    transform: scale(1.025) !important;
  }

  .hero-visual::before {
    position: absolute;
    z-index: 3;
    inset: 30% 2% 5% 28%;
    background:
      radial-gradient(ellipse at 67% 51%, rgb(230 179 78 / 15%), transparent 43%),
      radial-gradient(circle at 14% 25%, rgb(250 211 115 / 92%) 0 1px, transparent 2.7px),
      radial-gradient(circle at 33% 13%, rgb(241 186 71 / 76%) 0 1.3px, transparent 3px),
      radial-gradient(circle at 86% 20%, rgb(255 218 125 / 86%) 0 1.1px, transparent 2.8px),
      radial-gradient(circle at 22% 61%, rgb(238 180 67 / 74%) 0 1px, transparent 2.6px),
      radial-gradient(circle at 75% 72%, rgb(255 220 134 / 82%) 0 1.2px, transparent 3px),
      radial-gradient(circle at 93% 53%, rgb(236 174 61 / 68%) 0 1px, transparent 2.5px),
      radial-gradient(circle at 46% 86%, rgb(252 206 106 / 72%) 0 1.1px, transparent 2.8px);
    content: "";
    filter: drop-shadow(0 0 5px rgb(231 174 65 / 38%));
    pointer-events: none;
    animation: hero-hope-breathe 5.8s ease-in-out infinite alternate;
  }

  .prayer-wall {
    margin-top: 44px !important;
    padding: 26px 20px 12px !important;
  }

  .prayer-stream {
    min-height: 132px !important;
    margin-top: 18px !important;
  }

  .prayer-message {
    padding-block: 14px !important;
  }

  .prayer-compose {
    margin-top: 14px !important;
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    row-gap: 10px !important;
  }

  .prayer-compose > small {
    margin-bottom: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual::before {
    opacity: 0.52;
    animation: none !important;
  }
}

/* 85 / BGM transport optical centering ---------------------------------
   Draw the play/pause mark geometrically so both states share one visual
   centre. Keep utility modes compact, but give loop and shuffle breathing
   room instead of enlarging their circles. */
.site-bgm-transport {
  gap: 3px !important;
}

.site-bgm-transport button {
  width: 32px !important;
  min-width: 32px !important;
  height: 34px !important;
  padding: 0 !important;
}

.site-bgm-transport .sound-toggle {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
}

.sound-toggle-glyph {
  position: relative !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.sound-toggle-glyph::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
  content: "";
  transform: translate(-38%, -50%);
}

.sound-toggle-glyph::after {
  content: none;
}

.sound-toggle.playing .sound-toggle-glyph::before,
.sound-toggle.playing .sound-toggle-glyph::after {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 11px;
  border: 0;
  border-radius: 1px;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
}

.sound-toggle.playing .sound-toggle-glyph::before {
  left: 2px;
}

.sound-toggle.playing .sound-toggle-glyph::after {
  right: 2px;
  left: auto;
}

.site-bgm-skip > span {
  display: grid !important;
  place-items: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.site-bgm-modes {
  gap: 8px !important;
}

.site-bgm-modes button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}

.site-bgm-modes button > span:first-child {
  display: grid !important;
  place-items: center !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

@media (max-width: 720px) {
  .site-bgm-transport {
    gap: 2px !important;
  }

  .site-bgm-transport button {
    width: 29px !important;
    min-width: 29px !important;
    height: 32px !important;
  }

  .site-bgm-transport .sound-toggle {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .site-bgm-modes {
    gap: 7px !important;
  }

  .site-bgm-modes button {
    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
  }

  .site-bgm-modes button > span:first-child {
    font-size: 15px !important;
  }
}

/* 86 / Full-bleed and hidden-state integrity -----------------------------
   The memorial band already spans the document's content box. Let its
   cinematic children inherit that width instead of using 100vw, which
   includes classic desktop scrollbar gutters and creates horizontal scroll.
   Keep the native hidden contract stronger than the status-row layout. */
.memorial-ritual {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.ritual-stage,
.ritual-scene,
.prayer-wall {
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
}

.prayer-wall {
  padding-inline: max(20px, calc((100% - 1180px) / 2)) !important;
}

.ritual-meta .light-thanks[hidden] {
  display: none !important;
}

/* 87 / Multilingual acceptance repairs ----------------------------------
   Long translated ritual labels must share the control width instead of
   forcing the native select past the viewport. Keep the red-team desktop
   heading budget for the two longest title systems. */
@media (min-width: 981px) {
  html[data-language="ko"] .hero h1,
  html[data-language="vi"] .hero h1 {
    font-size: clamp(42px, 3.2vw, 47px) !important;
  }
}

@media (max-width: 720px) {
  .ritual-theme-picker {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 132px) !important;
  }

  .ritual-theme-picker > span {
    min-width: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .ritual-theme-picker select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 359px) {
  .ritual-theme-picker {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ritual-theme-controls,
  .ritual-theme-controls * {
    transition: none !important;
  }
}

/* 88 / Keyboard-first player and final responsive polish -----------------
   Keep the approved v87 composition. These rules enlarge the useful player
   hit areas, expose its keyboard contract, and turn the mobile bar into a
   reversible compact rail after the reader starts scrolling. */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--v73-gold-soft) !important;
  outline-offset: 3px !important;
}

.site-bgm-inner {
  position: relative;
}

.header-inner {
  position: relative;
  z-index: 20;
}

.site-bgm-bar {
  position: relative;
  z-index: 10;
}

.site-bgm-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.site-bgm-shortcuts {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgb(241 236 225 / 58%);
  font-size: 10px;
  line-height: 1;
}

.site-bgm-shortcuts kbd {
  min-width: 20px;
  min-height: 17px;
  padding: 2px 5px;
  border: 1px solid rgb(231 205 148 / 22%);
  border-bottom-color: rgb(231 205 148 / 38%);
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
  color: rgb(244 226 184 / 82%);
  background: rgb(255 255 255 / 3%);
  font: 650 9px/1 system-ui, sans-serif;
  box-shadow: 0 1px 0 rgb(0 0 0 / 45%);
}

.site-bgm-shortcut-divider {
  margin-inline: 2px;
  opacity: 0.45;
}

.site-bgm-collapse {
  display: none;
}

.hero-hope-lights {
  display: none;
}

html[data-language="zh-Hant"] .hero h1 span,
html[data-language="zh-Hans"] .hero h1 span {
  white-space: nowrap;
}

.hero h1 .hero-title-rest {
  color: inherit !important;
}

@media (min-width: 981px) {
  .site-bgm-capsule {
    width: min(100%, 820px) !important;
  }

  .site-bgm-main {
    grid-template-columns: auto auto minmax(270px, 1fr) auto 90px !important;
    gap: 10px !important;
  }

  .site-bgm-transport button {
    width: 36px !important;
    min-width: 36px !important;
    height: 38px !important;
  }

  .site-bgm-transport .sound-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .site-bgm-modes button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .site-bgm-volume {
    width: 90px !important;
    min-width: 90px !important;
  }

  .language-menu summary {
    min-width: 94px !important;
    min-height: 44px !important;
    font-size: 15.5px !important;
  }
}

@keyframes hero-hope-sequence {
  0%,
  54%,
  100% {
    opacity: 0.08;
    transform: scale(0.92);
  }

  16%,
  30% {
    opacity: 0.68;
    transform: scale(1.06);
  }
}

@media (max-width: 720px) {
  .site-bgm-bar {
    transition:
      padding 240ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 180ms ease-out !important;
  }

  .site-bgm-inner {
    flex-direction: column;
    align-items: center;
  }

  .site-bgm-capsule {
    width: 100% !important;
    max-height: 86px;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transform-origin: top center;
    transition:
      max-height 260ms cubic-bezier(0.22, 1, 0.36, 1),
      min-height 260ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 160ms ease-out,
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 180ms ease-out !important;
  }

  .site-bgm-collapse {
    position: relative;
    z-index: 3;
    bottom: auto;
    left: auto;
    width: 48px;
    min-width: 48px;
    height: 24px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid rgb(221 176 77 / 34%);
    border-radius: 0 0 999px 999px;
    display: grid;
    place-items: center;
    color: rgb(239 203 123 / 88%);
    background: #14110d;
    box-shadow: 0 6px 14px rgb(0 0 0 / 24%);
    cursor: pointer;
    touch-action: manipulation;
  }

  .site-bgm-collapse[hidden] {
    display: none !important;
  }

  .site-bgm-collapse > span {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(2px) rotate(225deg);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-bgm-bar.is-collapsed {
    padding-top: 0 !important;
    padding-bottom: 4px !important;
    border-top-color: transparent !important;
  }

  .site-bgm-bar.is-collapsed .site-bgm-capsule {
    min-height: 0 !important;
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-color: transparent !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-7px) scaleY(0.94);
  }

  .site-bgm-bar.is-collapsed .site-bgm-collapse > span {
    transform: translateY(-2px) rotate(45deg);
  }

  .site-bgm-shortcuts {
    display: none;
  }

  .site-bgm-transport button {
    width: 34px !important;
    min-width: 34px !important;
    height: 40px !important;
  }

  .site-bgm-transport .sound-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .site-bgm-modes button {
    width: 36px !important;
    min-width: 36px !important;
    height: 40px !important;
  }

  .site-bgm-meta {
    display: block !important;
  }

  .section-nav {
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
  }

  .section-nav a {
    scroll-snap-align: center;
  }

  .hero-copy {
    padding: 40px 2px 34px !important;
  }

  .hero h1 {
    line-height: 1.22 !important;
    text-wrap: balance;
  }

  .hero-deck {
    margin-top: 24px !important;
  }

  .hero-visual::before {
    display: none !important;
  }

  .hero-hope-lights {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .hero-hope-lights i {
    position: absolute;
    width: clamp(76px, 25vw, 112px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: block;
    background: radial-gradient(circle, rgb(255 222 145 / 34%) 0%, rgb(230 171 66 / 12%) 36%, transparent 70%);
    filter: drop-shadow(0 0 12px rgb(231 174 65 / 28%));
    opacity: 0.08;
    animation: hero-hope-sequence 5.4s ease-in-out infinite;
  }

  .hero-hope-lights i:nth-child(1) {
    top: 31%;
    left: 52%;
  }

  .hero-hope-lights i:nth-child(2) {
    top: 56%;
    left: 43%;
    animation-delay: 1.45s;
  }

  .hero-hope-lights i:nth-child(3) {
    top: 66%;
    left: 68%;
    animation-delay: 2.9s;
  }
}

@media (max-width: 374px) {
  .site-bgm-transport .sound-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-bgm-bar,
  .site-bgm-capsule,
  .site-bgm-collapse > span {
    transition: none !important;
  }

  .hero-hope-lights i {
    opacity: 0.24;
    animation: none !important;
    transform: none !important;
  }
}

/* 89 / Immersive two-tier masthead and multilingual mobile breathing -----
   Desktop navigation owns the upper row. Brand, player and language share
   one optical baseline below it. On scroll the complete header chrome yields
   to a quiet rail, leaving one explicit control to restore it. */
.site-header {
  transition:
    background-color 220ms ease-out,
    box-shadow 220ms ease-out,
    backdrop-filter 220ms ease-out !important;
}

.header-inner {
  display: contents !important;
}

.site-bgm-inner {
  flex-direction: column;
  align-items: center;
}

.site-bgm-capsule {
  max-height: 96px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transform-origin: top center;
  transition:
    max-height 260ms cubic-bezier(0.22, 1, 0.36, 1),
    min-height 260ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease-out,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease-out !important;
}

.site-bgm-collapse {
  position: relative;
  z-index: 4;
  width: 58px;
  min-width: 58px;
  height: 26px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid rgb(221 176 77 / 42%);
  border-radius: 0 0 999px 999px;
  display: grid;
  place-items: center;
  color: rgb(255 218 135 / 94%);
  background: rgb(16 13 10 / 86%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 28%);
  cursor: pointer;
  touch-action: manipulation;
}

.site-bgm-collapse[hidden] {
  display: none !important;
}

.site-bgm-collapse > span {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-bgm-inner::before {
  position: absolute;
  z-index: 0;
  top: 11px;
  right: 0;
  left: 0;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(221 176 77 / 38%) 24%, rgb(239 205 132 / 56%) 50%, rgb(221 176 77 / 38%) 76%, transparent);
  box-shadow: 0 0 16px rgb(221 176 77 / 14%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}

.site-bgm-bar.is-collapsed {
  min-height: 30px !important;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-bgm-bar.is-collapsed .site-bgm-inner::before {
  opacity: 1;
}

.site-bgm-bar.is-collapsed .site-bgm-capsule {
  min-height: 0 !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: transparent !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scaleY(0.92);
}

.site-header.is-reader-compact {
  grid-template-rows: 0 30px !important;
  border-bottom-color: rgb(221 176 77 / 12%) !important;
  background: rgb(13 11 9 / 58%) !important;
  box-shadow: none !important;
  backdrop-filter: blur(9px) saturate(0.82) !important;
}

.site-header.is-reader-compact .brand,
.site-header.is-reader-compact .desktop-nav,
.site-header.is-reader-compact .language-switch {
  min-height: 0 !important;
  height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) !important;
}

.site-header.is-reader-compact .site-bgm-bar {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  opacity: 0.76;
}

.site-header.is-reader-compact + .section-nav {
  min-height: 0 !important;
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  overflow: hidden !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: transparent !important;
  transition:
    height 180ms ease-out,
    opacity 180ms ease-out,
    background-color 180ms ease-out !important;
}

.language-switch {
  display: flex !important;
  align-items: center !important;
}

.language-menu summary {
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.language-menu summary [data-current-language] {
  min-width: 2.8em;
  display: inline-grid;
  place-items: center;
  line-height: 1 !important;
  text-align: center;
}

/* The language grid is absolutely positioned, so explicitly remove it from
   layout while <details> is closed. This prevents its hidden buttons from
   widening the document on languages with longer labels. */
.language-menu:not([open]) > .language-options {
  display: none !important;
}

@media (min-width: 981px) {
  .site-header {
    grid-template-columns: minmax(300px, 335px) minmax(560px, 1fr) minmax(240px, 275px) !important;
    grid-template-rows: 58px auto;
    column-gap: clamp(12px, 1.7vw, 28px);
    display: grid !important;
    align-items: center;
  }

  .desktop-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(calc(100% - 48px), 1240px) !important;
    min-height: 58px !important;
    margin-inline: auto !important;
    padding: 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(10px, 1.3vw, 24px) !important;
    border-bottom: 1px solid rgb(255 255 255 / 3%);
  }

  .desktop-nav a {
    padding: 10px 1px !important;
    font-size: clamp(15.5px, 1.25vw, 17px) !important;
    letter-spacing: 0.025em !important;
  }

  .brand {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    min-height: 74px;
    margin-left: max(28px, calc((100vw - 1240px) / 2)) !important;
    transform: none !important;
  }

  .brand strong {
    font-size: 20px !important;
  }

  .brand small {
    margin-top: 3px;
    font-size: 12.5px !important;
  }

  .site-bgm-bar {
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    padding: 8px 0 12px !important;
    align-self: center;
  }

  .site-bgm-inner {
    width: 100% !important;
  }

  .site-bgm-capsule {
    width: 100% !important;
    min-height: 64px !important;
    padding: 9px 13px 8px !important;
  }

  .site-bgm-main {
    grid-template-columns: auto auto minmax(250px, 1fr) auto 92px !important;
    gap: 11px !important;
  }

  .site-bgm-transport button {
    width: 38px !important;
    min-width: 38px !important;
    height: 40px !important;
  }

  .site-bgm-transport .sound-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .site-bgm-picker select {
    font-size: 15px !important;
  }

  .site-bgm-modes button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  .site-bgm-note,
  .site-bgm-shortcuts {
    font-size: 10.5px !important;
  }

  .language-switch {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    min-height: 74px;
    margin-right: max(28px, calc((100vw - 1240px) / 2)) !important;
    gap: 12px !important;
    transform: none !important;
  }

  .language-switch-label {
    font-size: 15.5px !important;
    line-height: 1.2 !important;
  }

  .language-menu summary {
    min-width: 102px !important;
    min-height: 46px !important;
    padding-inline: 14px !important;
    gap: 8px !important;
    font-size: 16px !important;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  .site-header {
    grid-template-columns: minmax(190px, 1fr) minmax(500px, 620px) minmax(170px, 1fr) !important;
    column-gap: 8px !important;
  }

  .brand {
    margin-left: 18px !important;
    min-width: 0;
  }

  .brand strong {
    font-size: 16px !important;
  }

  .brand small {
    font-size: 10px !important;
  }

  .language-switch {
    margin-right: 18px !important;
  }

  .language-switch-label {
    display: none !important;
  }

  .site-bgm-main {
    grid-template-columns: auto auto minmax(180px, 1fr) auto 76px !important;
    gap: 7px !important;
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto;
    display: grid !important;
    align-items: center;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-height: 64px;
    margin-left: 20px !important;
    transform: none !important;
  }

  .language-switch {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-height: 64px;
    margin-right: 20px !important;
    transform: none !important;
  }

  .language-menu summary {
    min-width: 72px !important;
    min-height: 42px !important;
    padding-inline: 11px !important;
    font-size: 14.5px !important;
  }

  .site-bgm-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@keyframes hero-halo-alpha {
  0%, 12%, 54%, 100% { opacity: 0.12; transform: scale(0.88); }
  22% { opacity: 0.96; transform: scale(1.12); }
  34% { opacity: 0.34; transform: scale(1.01); }
  72% { opacity: 0.62; transform: scale(1.07); }
}

@keyframes hero-halo-beta {
  0%, 29%, 78%, 100% { opacity: 0.1; transform: scale(0.9); }
  41% { opacity: 0.78; transform: scale(1.09); }
  58% { opacity: 0.28; transform: scale(0.98); }
  88% { opacity: 0.9; transform: scale(1.13); }
}

@keyframes hero-firefly-drift-a {
  0%, 18%, 100% { opacity: 0.16; transform: translate3d(0, 4px, 0) scale(0.7); }
  34% { opacity: 1; transform: translate3d(6px, -7px, 0) scale(1.35); }
  58% { opacity: 0.28; transform: translate3d(-3px, -13px, 0) scale(0.82); }
  76% { opacity: 0.84; transform: translate3d(4px, -18px, 0) scale(1.12); }
}

@keyframes hero-firefly-drift-b {
  0%, 36%, 100% { opacity: 0.1; transform: translate3d(2px, 0, 0) scale(0.62); }
  49% { opacity: 0.92; transform: translate3d(-5px, -8px, 0) scale(1.28); }
  68% { opacity: 0.22; transform: translate3d(3px, -14px, 0) scale(0.74); }
  84% { opacity: 1; transform: translate3d(-2px, -19px, 0) scale(1.42); }
}

@keyframes hero-dog-aura-a {
  0%, 100% { opacity: 0.32; transform: scale(0.95); }
  38% { opacity: 0.62; transform: scale(1.08); }
  71% { opacity: 0.41; transform: scale(1.01); }
}

@keyframes hero-dog-aura-b {
  0%, 100% { opacity: 0.2; transform: scale(0.92); }
  24% { opacity: 0.44; transform: scale(1.05); }
  63% { opacity: 0.28; transform: scale(0.98); }
  86% { opacity: 0.58; transform: scale(1.11); }
}

@media (max-width: 720px) {
  .hero-inner,
  .hero-copy {
    min-height: clamp(780px, 100svh, 890px) !important;
  }

  .hero-inner {
    padding-inline: clamp(22px, 6vw, 28px) !important;
  }

  .hero-copy {
    max-width: 410px !important;
    padding: clamp(48px, 7svh, 62px) 2px 48px !important;
  }

  .hero .eyebrow {
    max-width: 34ch;
    line-height: 1.7 !important;
  }

  .hero h1 {
    max-width: 11.5ch !important;
    margin-top: 24px !important;
    font-size: clamp(38px, 10.2vw, 44px) !important;
    line-height: 1.26 !important;
    text-wrap: pretty;
  }

  .hero-deck {
    max-width: 31em !important;
    margin-top: 30px !important;
    font-size: 15.5px !important;
    line-height: 1.96 !important;
  }

  .hero-tags {
    margin-top: 25px !important;
    row-gap: 12px !important;
  }

  .hero .primary-link {
    margin-top: 30px !important;
  }

  html[data-language="en"] .hero h1,
  html[data-language="es"] .hero h1 {
    max-width: 12.2ch !important;
    font-size: clamp(38px, 10vw, 43px) !important;
    line-height: 1.25 !important;
  }

  html[data-language="ja"] .hero h1 {
    max-width: 12.5ch !important;
    font-size: clamp(37px, 9.8vw, 42px) !important;
    line-height: 1.31 !important;
  }

  html[data-language="ko"] .hero h1,
  html[data-language="vi"] .hero h1 {
    max-width: 12.4ch !important;
    font-size: clamp(35px, 9.4vw, 40px) !important;
    line-height: 1.33 !important;
  }

  html[data-language="th"] .hero-inner,
  html[data-language="th"] .hero-copy {
    min-height: clamp(860px, 110svh, 980px) !important;
  }

  html[data-language="th"] .hero h1 {
    max-width: 13ch !important;
    font-size: clamp(33px, 8.9vw, 38px) !important;
    line-height: 1.38 !important;
  }

  html[data-language="th"] .hero-deck {
    font-size: 15px !important;
    line-height: 2.04 !important;
  }

  .hero-copy::before {
    background:
      radial-gradient(ellipse at 72% 47%, rgb(246 194 83 / 22%) 0%, rgb(232 177 75 / 9%) 24%, transparent 48%),
      linear-gradient(180deg, rgb(8 6 4 / 95%) 0%, rgb(8 6 4 / 69%) 42%, rgb(8 6 4 / 16%) 73%, transparent 94%),
      linear-gradient(90deg, rgb(8 6 4 / 91%) 0%, rgb(8 6 4 / 61%) 44%, rgb(8 6 4 / 12%) 78%, transparent 100%) !important;
  }

  .hero-visual::after {
    background:
      linear-gradient(180deg, #080604 0%, rgb(8 6 4 / 62%) 34%, rgb(8 6 4 / 8%) 67%, rgb(8 6 4 / 16%) 100%),
      linear-gradient(90deg, rgb(8 6 4 / 49%) 0%, rgb(8 6 4 / 7%) 56%, transparent 86%) !important;
  }

  .hero .angel-frame > img {
    filter: saturate(1.03) contrast(1.05) brightness(1.08) !important;
  }

  .hero-hope-lights {
    mix-blend-mode: screen;
  }

  .hero-hope-lights::before,
  .hero-hope-lights::after {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 215 103 / 74%) 0%, rgb(246 180 55 / 34%) 34%, rgb(218 137 25 / 10%) 58%, transparent 74%);
    filter: blur(2px) drop-shadow(0 0 22px rgb(255 184 48 / 48%));
    content: "";
    pointer-events: none;
    transform-origin: center;
  }

  .hero-hope-lights::before {
    top: 31%;
    left: 42%;
    width: clamp(210px, 64vw, 280px);
    aspect-ratio: 1;
    animation: hero-dog-aura-a 10.7s ease-in-out -2.1s infinite;
  }

  .hero-hope-lights::after {
    top: 58%;
    left: 28%;
    width: clamp(260px, 76vw, 330px);
    aspect-ratio: 1.15;
    animation: hero-dog-aura-b 13.3s ease-in-out -7.4s infinite;
  }

  .hero-hope-lights i {
    width: clamp(142px, 43vw, 190px) !important;
    background: radial-gradient(circle, rgb(255 218 112 / 76%) 0%, rgb(255 193 63 / 38%) 28%, rgb(226 145 28 / 14%) 52%, transparent 72%) !important;
    filter: blur(0.2px) drop-shadow(0 0 19px rgb(255 190 63 / 58%)) !important;
    opacity: 0.12;
  }

  .hero-hope-lights i:nth-child(1) {
    top: 35% !important;
    left: 49% !important;
    animation: hero-halo-alpha 7.3s ease-in-out infinite !important;
  }

  .hero-hope-lights i:nth-child(2) {
    top: 57% !important;
    left: 36% !important;
    animation: hero-halo-beta 8.9s ease-in-out -3.2s infinite !important;
  }

  .hero-hope-lights i:nth-child(3) {
    top: 66% !important;
    left: 65% !important;
    animation: hero-halo-alpha 6.4s ease-in-out -1.7s infinite reverse !important;
  }

  .hero-hope-lights b {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: block;
    background: rgb(255 232 159);
    box-shadow:
      0 0 5px 2px rgb(255 225 128 / 88%),
      0 0 17px 7px rgb(238 172 52 / 44%);
    opacity: 0.14;
  }

  .hero-hope-lights b:nth-of-type(1) { top: 35%; left: 78%; animation: hero-firefly-drift-a 5.7s ease-in-out -1.1s infinite; }
  .hero-hope-lights b:nth-of-type(2) { top: 44%; left: 60%; animation: hero-firefly-drift-b 7.1s ease-in-out -4.4s infinite; }
  .hero-hope-lights b:nth-of-type(3) { top: 52%; left: 88%; animation: hero-firefly-drift-a 8.3s ease-in-out -2.7s infinite reverse; }
  .hero-hope-lights b:nth-of-type(4) { top: 63%; left: 55%; animation: hero-firefly-drift-b 6.2s ease-in-out -0.8s infinite; }
  .hero-hope-lights b:nth-of-type(5) { top: 71%; left: 83%; animation: hero-firefly-drift-a 9.4s ease-in-out -6.1s infinite; }
  .hero-hope-lights b:nth-of-type(6) { top: 80%; left: 66%; animation: hero-firefly-drift-b 5.2s ease-in-out -3.5s infinite reverse; }
  .hero-hope-lights b:nth-of-type(7) { top: 57%; left: 72%; animation: hero-firefly-drift-a 7.7s ease-in-out -5.3s infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header *,
  .site-header + .section-nav {
    transition: none !important;
  }

  .hero-hope-lights i,
  .hero-hope-lights b,
  .hero-hope-lights::before,
  .hero-hope-lights::after {
    animation: none !important;
    transform: none !important;
  }

  /* Match the specificity of the three staggered halo selectors above. */
  .hero-hope-lights.hero-hope-lights i {
    animation: none !important;
  }

  .hero-hope-lights i:nth-child(1) { opacity: 0.5; }
  .hero-hope-lights i:nth-child(2) { opacity: 0.28; }
  .hero-hope-lights i:nth-child(3) { opacity: 0.42; }
  .hero-hope-lights b { opacity: 0.62; }
  .hero-hope-lights::before { opacity: 0.48; }
  .hero-hope-lights::after { opacity: 0.3; }
}

/* 90 / Final alignment, compact language control and ritual scale ----------
   This pass keeps the approved editorial system while aligning the two-column
   ledgers, making both header-collapse directions explicit, and eliminating
   the remaining documentary crop seam. */
.prototype-notice {
  position: relative;
}

.creator-email-rail {
  position: absolute;
  top: 50%;
  right: max(24px, calc((100vw - 1240px) / 2));
  color: rgb(241 236 225 / 54%);
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0.035em;
  text-decoration: none;
  transform: translateY(-50%);
  transition: color 160ms ease-out;
}

.creator-email-rail:hover,
.creator-email-rail:focus-visible {
  color: rgb(241 236 225 / 86%);
}

.language-switch {
  justify-self: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 9px !important;
}

.language-switch-icon {
  width: 28px;
  height: 28px;
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  color: rgb(238 208 143 / 76%);
}

.language-switch-icon svg {
  width: 23px;
  height: 23px;
  overflow: visible;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-menu summary {
  position: relative;
  width: 86px !important;
  min-width: 86px !important;
  min-height: 42px !important;
  padding-inline: 19px !important;
  display: grid !important;
  place-items: center !important;
  gap: 0 !important;
  font-size: 17px !important;
  font-weight: 720 !important;
}

.language-menu summary [data-current-language] {
  width: 100% !important;
  min-width: 0 !important;
  font-size: inherit !important;
  text-align: center !important;
}

.language-chevron {
  position: absolute;
  top: 50%;
  right: 8px;
  display: block;
  font-size: 12px !important;
  transform: translateY(-52%) rotate(0deg) !important;
  transition: transform 180ms ease-out;
}

.language-menu[open] .language-chevron {
  transform: translateY(-48%) rotate(180deg) !important;
}

.language-options {
  width: 260px !important;
  padding: 8px !important;
  gap: 4px 8px !important;
}

.language-options button {
  min-height: 44px !important;
  padding: 0 10px 0 23px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.site-bgm-inner {
  position: relative;
}

.site-bgm-bar:not(.is-collapsed) .site-bgm-collapse {
  position: absolute;
  right: 50%;
  bottom: -17px;
  width: 46px;
  min-width: 46px;
  height: 21px;
  border-radius: 999px 999px 0 0;
  box-shadow: 0 -5px 16px rgb(0 0 0 / 22%);
  transform: translateX(50%);
}

.site-bgm-bar:not(.is-collapsed) .site-bgm-collapse > span {
  transform: translateY(2px) rotate(225deg);
}

@media (min-width: 981px) {
  .site-bgm-main {
    grid-template-columns: auto auto minmax(190px, 1fr) auto 90px !important;
    gap: 8px !important;
  }

  .petition-purpose,
  .petition-grid {
    width: min(calc(100% - (var(--gutter) * 2)), 1180px) !important;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr) !important;
    gap: clamp(56px, 7vw, 90px) !important;
  }

  .petition-purpose {
    padding: clamp(64px, 5.5vw, 74px) 0 48px !important;
    align-items: end !important;
  }

  .petition-purpose > p {
    padding-left: clamp(28px, 4vw, 52px) !important;
  }

  .petition-grid {
    padding: 60px 0 72px !important;
    align-items: start !important;
  }

  .petition-count {
    padding-top: 4px;
  }

  .story-image-real {
    height: clamp(380px, 43vw, 520px) !important;
    line-height: 0;
  }

  .story-image-real img {
    position: absolute !important;
    inset: -2px !important;
    width: calc(100% + 4px) !important;
    height: calc(100% + 4px) !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center 50% !important;
  }

  .story-image-real figcaption {
    line-height: normal;
  }

  .memorial-inner {
    padding-bottom: clamp(48px, 4.5vw, 62px) !important;
  }

  .ritual-heading {
    width: min(calc(100% - 128px), 1040px) !important;
    margin-bottom: 24px !important;
    gap: 24px !important;
  }

  .ritual-heading h3 {
    font-size: clamp(25px, 2.05vw, 29px) !important;
    line-height: 1.28 !important;
    letter-spacing: 0.12em !important;
  }

  .ritual-theme-controls {
    width: min(calc(100% - 64px), 520px) !important;
    max-width: 520px !important;
    min-height: 64px !important;
    margin-bottom: 36px !important;
    padding: 6px !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }

  .ritual-theme-random {
    flex: 0 0 138px !important;
    min-width: 138px !important;
    min-height: 52px !important;
    padding-inline: 20px !important;
    gap: 9px !important;
    border-radius: 8px !important;
    font-size: 15.5px !important;
  }

  .ritual-theme-random > span:first-child {
    font-size: 18px !important;
  }

  .ritual-theme-picker {
    flex: 1 1 auto !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    min-height: 52px !important;
    padding: 0 5px 0 19px !important;
    gap: 14px !important;
    font-size: 13px !important;
  }

  .ritual-theme-picker > span {
    font-size: 13px !important;
  }

  .ritual-theme-picker select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    padding: 0 38px 0 16px !important;
    border-radius: 7px !important;
    font-size: 15px !important;
  }

  .light-button {
    width: clamp(205px, 16vw, 232px) !important;
    height: clamp(246px, 19.2vw, 278px) !important;
  }

  .creator-support {
    padding-block: 76px !important;
    grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr) !important;
    gap: clamp(68px, 6.5vw, 92px) !important;
    align-items: start !important;
  }

  .creator-support-intro,
  .creator-support-details {
    align-self: start !important;
  }

  .creator-support-eyebrow {
    font-size: 13.5px !important;
  }

  .creator-support h2 {
    font-size: clamp(38px, 3.15vw, 48px) !important;
    line-height: 1.36 !important;
  }

  .creator-support-intro > p:last-child {
    font-size: 17.5px !important;
    line-height: 1.84 !important;
  }

  .creator-support-details dl > div {
    grid-template-columns: 152px minmax(0, 1fr) !important;
    gap: 28px !important;
    padding-block: 21px !important;
  }

  .creator-support-details dt {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .creator-support-details dd {
    font-size: 17.5px !important;
    line-height: 1.76 !important;
  }

  .creator-support-status,
  .creator-support-contact {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }
}

@media (max-width: 1199px) {
  .creator-email-rail {
    display: none;
  }
}

@media (max-width: 980px) {
  .language-switch {
    justify-self: end !important;
    margin-right: 20px !important;
    gap: 7px !important;
  }

  .language-switch-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  .language-switch-icon svg {
    width: 21px;
    height: 21px;
  }

  .language-menu summary {
    width: 76px !important;
    min-width: 76px !important;
    min-height: 42px !important;
    padding-inline: 17px !important;
    font-size: 15.5px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creator-email-rail,
  .language-chevron {
    transition: none !important;
  }
}

/* 91 / Multilingual reading measures ------------------------------------
   `ch` follows the width of the Latin zero, so it compresses CJK, Hangul
   and Thai headlines unpredictably. Give each writing system a real reading
   measure and a line-height suited to its glyphs while preserving the
   approved Traditional/Simplified Chinese cover. */
@media (min-width: 981px) {
  html[data-language="en"] .hero-inner,
  html[data-language="ja"] .hero-inner,
  html[data-language="ko"] .hero-inner,
  html[data-language="th"] .hero-inner,
  html[data-language="es"] .hero-inner,
  html[data-language="vi"] .hero-inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(500px, .98fr) !important;
    gap: 44px !important;
  }

  html[data-language="en"] .hero-copy,
  html[data-language="ja"] .hero-copy,
  html[data-language="ko"] .hero-copy,
  html[data-language="th"] .hero-copy,
  html[data-language="es"] .hero-copy,
  html[data-language="vi"] .hero-copy {
    max-width: 560px !important;
  }

  html[data-language="en"] .hero h1 {
    max-width: clamp(470px, 35vw, 520px) !important;
    font-size: clamp(42px, 3.25vw, 48px) !important;
    line-height: 1.16 !important;
  }

  html[data-language="ja"] .hero h1 {
    max-width: clamp(455px, 34vw, 510px) !important;
    font-size: clamp(43px, 3.45vw, 50px) !important;
    line-height: 1.22 !important;
  }

  html[data-language="ko"] .hero h1 {
    max-width: clamp(465px, 34vw, 510px) !important;
    font-size: clamp(40px, 3.15vw, 46px) !important;
    line-height: 1.23 !important;
  }

  html[data-language="th"] .hero h1 {
    max-width: clamp(500px, 36vw, 540px) !important;
    font-size: clamp(39px, 3.15vw, 46px) !important;
    line-height: 1.3 !important;
  }

  html[data-language="es"] .hero h1 {
    max-width: clamp(500px, 37vw, 550px) !important;
    font-size: clamp(39px, 3.05vw, 46px) !important;
    line-height: 1.18 !important;
  }

  html[data-language="vi"] .hero h1 {
    max-width: clamp(490px, 36vw, 540px) !important;
    font-size: clamp(39px, 3.05vw, 45px) !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 720px) {
  html[data-language="en"] .hero h1,
  html[data-language="ja"] .hero h1,
  html[data-language="ko"] .hero h1,
  html[data-language="th"] .hero h1,
  html[data-language="es"] .hero h1,
  html[data-language="vi"] .hero h1 {
    max-width: min(100%, 335px) !important;
  }

  html[data-language="en"] .hero h1 {
    font-size: clamp(36px, 9.4vw, 40px) !important;
    line-height: 1.28 !important;
  }

  html[data-language="ja"] .hero h1 {
    font-size: clamp(35px, 9.2vw, 39px) !important;
    line-height: 1.34 !important;
  }

  html[data-language="ko"] .hero h1 {
    font-size: clamp(34px, 8.9vw, 38px) !important;
    line-height: 1.36 !important;
  }

  html[data-language="th"] .hero h1 {
    font-size: clamp(32px, 8.6vw, 36px) !important;
    line-height: 1.42 !important;
  }

  html[data-language="es"] .hero h1 {
    font-size: clamp(34px, 8.9vw, 38px) !important;
    line-height: 1.31 !important;
  }

  html[data-language="vi"] .hero h1 {
    font-size: clamp(33px, 8.7vw, 37px) !important;
    line-height: 1.34 !important;
  }
}

/* 93 / Editorial alignment system and cream chapter rail -----------------
   Desktop chapter navigation becomes the light opening band in the
   cream / black / cream page rhythm. Repeated two-column introductions use
   the headline row as their shared optical axis, so translations can wrap
   without accumulating per-language margin fixes. */
@media (min-width: 981px) {
  .site-header {
    background:
      linear-gradient(
        to bottom,
        #eee8dc 0,
        #eee8dc 58px,
        rgb(13 11 9 / 96%) 58px,
        rgb(13 11 9 / 96%) 100%
      ) !important;
  }

  .desktop-nav {
    border-bottom-color: rgb(52 45 35 / 12%) !important;
  }

  .desktop-nav a {
    color: rgb(45 40 33 / 72%) !important;
  }

  .desktop-nav a:hover,
  .desktop-nav a:focus-visible {
    color: #17130e !important;
  }

  .desktop-nav a.active {
    color: #93681b !important;
  }

  .fact-rail article {
    align-items: center !important;
  }

  .petition-purpose,
  .section-heading.split {
    grid-template-rows: auto auto !important;
    align-items: start !important;
  }

  .petition-purpose > div:first-child,
  .section-heading.split > div:first-child {
    display: contents;
  }

  .petition-purpose-eyebrow,
  .section-heading.split > div:first-child > .eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .petition-purpose h2,
  .section-heading.split > div:first-child > h2 {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }

  .petition-purpose > p,
  .section-heading.split > p {
    grid-column: 2;
    grid-row: 2;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* The action rows reserve 64px for their locale seal and 16px for the
     following gap. Begin the chapter title on that same text axis. */
  .global-actions .section-heading.split > div:first-child > .eyebrow,
  .global-actions .section-heading.split > div:first-child > h2 {
    padding-left: 80px;
  }

  .global-actions .section-heading.split > div:first-child > h2 {
    /* Recover most of the heading measure taken by the 80px text-axis
       inset, while retaining a real gap before the summary column. */
    margin-right: -48px;
  }
}

@media (min-width: 981px) and (max-width: 1100px) {
  .desktop-nav {
    width: calc(100% - 28px) !important;
    gap: 6px !important;
  }

  .desktop-nav a {
    padding-inline: 0 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.01em !important;
  }
}

/* 94 / Wang Wang's halo in the dusk memorial scene -----------------------
   The source illustration already includes three puppy halos. Keep the
   mother's ring as a separate responsive layer so its position and glow
   remain legible after desktop and mobile object-fit cropping. */
.ritual-dusk-mother-halo {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.memorial-ritual[data-ritual-theme="dusk"] .ritual-dusk-mother-halo {
  display: block;
}

.ritual-dusk-mother-halo i {
  position: absolute;
  top: 8.5%;
  left: 57.5%;
  width: 18%;
  aspect-ratio: 4 / 1;
  border: clamp(2px, 0.22vw, 3.2px) solid rgb(255 247 205 / 96%);
  border-radius: 50%;
  opacity: 0;
  filter:
    drop-shadow(0 0 5px rgb(255 250 221 / 92%))
    drop-shadow(0 0 13px rgb(246 200 92 / 78%))
    drop-shadow(0 0 25px rgb(230 164 49 / 42%));
  box-shadow:
    inset 0 0 8px rgb(255 255 238 / 72%),
    0 0 12px 3px rgb(255 220 128 / 42%);
  transform: translate(-50%, -50%) scale(0.84);
  transform-origin: center;
}

.memorial-ritual[data-ritual-theme="dusk"].is-lit .ritual-dusk-mother-halo i {
  animation: ritual-mother-halo-arrive-v94 1.25s cubic-bezier(0.22, 1, 0.36, 1) 5.7s both;
}

.memorial-ritual[data-ritual-theme="dusk"].ritual-complete .ritual-dusk-mother-halo i {
  opacity: 0.94;
  animation: ritual-mother-halo-breathe-v94 5.8s ease-in-out infinite alternate;
  transform: translate(-50%, -50%);
}

@keyframes ritual-mother-halo-arrive-v94 {
  0% {
    opacity: 0;
    filter: blur(2px) drop-shadow(0 0 5px rgb(255 239 183 / 24%));
    transform: translate(-50%, -50%) scale(0.78);
  }

  72% {
    opacity: 1;
    filter:
      blur(0)
      drop-shadow(0 0 7px rgb(255 250 221 / 96%))
      drop-shadow(0 0 17px rgb(246 200 92 / 82%));
    transform: translate(-50%, -50%) scale(1.045);
  }

  100% {
    opacity: 0.94;
    filter:
      blur(0)
      drop-shadow(0 0 5px rgb(255 250 221 / 92%))
      drop-shadow(0 0 13px rgb(246 200 92 / 78%))
      drop-shadow(0 0 25px rgb(230 164 49 / 42%));
    transform: translate(-50%, -50%);
  }
}

@keyframes ritual-mother-halo-breathe-v94 {
  0% {
    opacity: 0.8;
    filter:
      drop-shadow(0 0 4px rgb(255 250 221 / 82%))
      drop-shadow(0 0 11px rgb(246 200 92 / 62%));
    transform: translate(-50%, -50%) scale(0.985);
  }

  100% {
    opacity: 1;
    filter:
      drop-shadow(0 0 7px rgb(255 250 221 / 98%))
      drop-shadow(0 0 18px rgb(246 200 92 / 86%))
      drop-shadow(0 0 30px rgb(230 164 49 / 48%));
    transform: translate(-50%, -50%) scale(1.025);
  }
}

@media (max-width: 720px) {
  .ritual-dusk-mother-halo i {
    top: 14%;
    left: 58.5%;
    width: 28%;
    aspect-ratio: 5 / 1;
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-ritual[data-ritual-theme="dusk"].is-lit .ritual-dusk-mother-halo i,
  .memorial-ritual[data-ritual-theme="dusk"].ritual-complete .ritual-dusk-mother-halo i {
    opacity: 0.94;
    animation: none;
    transform: translate(-50%, -50%);
  }
}

/* 95 / Shared text axes, mobile reading rhythm and ritual picker ----------
   Keep the approved colour hierarchy intact. This pass only corrects the
   optical axes that recur between image chapters and numbered ledgers, then
   uses the remaining mobile hero depth as intentional reading space. */
@media (min-width: 981px) {
  /* The interlude already sits on the standard 1180px frame; remove the
     inherited inner caption inset so its title meets the next chapter axis. */
  .editorial-interlude figcaption {
    left: calc(
      max(32px, ((100vw - 1180px) / 2))
      - max(var(--gutter), ((100vw - 1120px) / 2))
    ) !important;
  }

  /* Match the title axis to the text that follows the 56px source number and
     24px gap. Negative end margin preserves the approved headline measure. */
  .sources .section-heading.split > div:first-child > .eyebrow,
  .sources .section-heading.split > div:first-child > h2 {
    padding-left: 72px;
  }

  .sources .section-heading.split > div:first-child > h2 {
    margin-right: -52px;
  }

  /* Different font sizes otherwise share their top edge but not the first
     reading line. Baseline alignment makes every translated ledger scan as
     one row. */
  .creator-support-details dl > div {
    align-items: baseline !important;
  }

  .ritual-theme-picker > span {
    font-size: 15px !important;
  }

  .ritual-theme-picker select {
    padding-inline: 38px !important;
    text-align: center !important;
    text-align-last: center !important;
  }
}

@media (max-width: 720px) {
  html[data-language="zh-Hant"] .hero h1,
  html[data-language="zh-Hans"] .hero h1 {
    line-height: 1.3 !important;
  }

  .hero-deck {
    margin-top: 32px !important;
    letter-spacing: 0.035em !important;
    line-height: 2 !important;
  }

  .hero-tags {
    margin-top: 28px !important;
  }

  .hero .primary-link {
    margin-top: 48px !important;
  }

  html[data-language="zh-Hant"] .hero .primary-link,
  html[data-language="zh-Hans"] .hero .primary-link,
  html[data-language="th"] .hero .primary-link {
    margin-top: 64px !important;
  }

  html[data-language="en"] .hero .primary-link,
  html[data-language="es"] .hero .primary-link,
  html[data-language="vi"] .hero .primary-link {
    margin-top: 40px !important;
  }

  html[data-language="th"] .hero-deck {
    line-height: 2.04 !important;
  }

  .ritual-theme-picker > span,
  .ritual-theme-picker select {
    font-size: 14px !important;
  }

  .ritual-theme-picker select {
    padding-inline: 30px !important;
    text-align: center !important;
    text-align-last: center !important;
  }
}

/* Keep the compact triangle visually quiet while giving touch and trackpad
   users a forgiving hit area around it. */
.site-bgm-collapse::before {
  position: absolute;
  content: "";
  inset: -11px -6px -16px;
}

/* 96 / Founder-marked final axes -----------------------------------------
   Only the six marked relationships are adjusted here. The approved colour,
   copy, imagery and section rhythm remain unchanged. */
@media (min-width: 981px) {
  /* Give the legal interlude the same 1180px editorial frame as the demand
     chapter. Moving the whole frame, rather than pulling only its caption
     outside an overflow-hidden image, keeps the first glyph fully visible. */
  .editorial-interlude {
    width: min(calc(100% - 64px), 1180px) !important;
  }

  .editorial-interlude figcaption {
    left: 0 !important;
  }

  /* Chapter heading begins on the same outer axis as the HK / GLOBAL / US
     seals, rather than the action-card copy inset. */
  .global-actions .section-heading.split > div:first-child > .eyebrow,
  .global-actions .section-heading.split > div:first-child > h2 {
    padding-left: 0 !important;
  }

  .global-actions .section-heading.split > div:first-child > h2 {
    margin-right: 0 !important;
  }

  /* Safety and sources are consecutive accountability chapters. Their
     headings and numbered rows now share the same outer reading axis. */
  .sources .section-heading.split > div:first-child > .eyebrow,
  .sources .section-heading.split > div:first-child > h2 {
    padding-left: 0 !important;
  }

  .sources .section-heading.split > div:first-child > h2 {
    margin-right: 0 !important;
  }

  .ritual-theme-picker > span,
  .ritual-theme-picker select {
    font-size: 16px !important;
  }

  .ritual-theme-picker select {
    text-align: center !important;
    text-align-last: center !important;
  }
}

@media (max-width: 720px) {
  /* Lock the two mobile accountability chapters and the action chapter to
     identical 20px gutters across translated layouts. */
  .global-actions .section-heading,
  .global-actions .global-action-grid,
  .identity-safety .safety-card,
  .sources .section-heading,
  .sources .source-list {
    width: 100% !important;
    margin-inline: 0 !important;
  }

  .ritual-theme-picker > span,
  .ritual-theme-picker select {
    font-size: 16px !important;
  }

  .ritual-theme-picker select {
    text-align: center !important;
    text-align-last: center !important;
  }

  /* The visual tab straddles the divider by 8px in either direction. Its
     pseudo-element keeps the generous invisible touch target from v95. */
  .site-bgm-bar:not(.is-collapsed) .site-bgm-collapse {
    right: auto !important;
    bottom: -17px !important;
    left: 50% !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 16px !important;
    border-radius: 999px 999px 0 0 !important;
    transform: translateX(-50%) !important;
  }

  .site-bgm-bar:not(.is-collapsed) .site-bgm-collapse > span {
    width: 6px !important;
    height: 6px !important;
    transform: translateY(1px) rotate(225deg) !important;
  }
}

@media (min-width: 721px) and (max-width: 980px) {
  .ritual-theme-picker > span,
  .ritual-theme-picker select {
    font-size: 16px !important;
  }

  .ritual-theme-picker select {
    text-align: center !important;
    text-align-last: center !important;
  }

  .site-bgm-bar:not(.is-collapsed) .site-bgm-collapse {
    right: auto !important;
    bottom: -17px !important;
    left: 50% !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 16px !important;
    border-radius: 999px 999px 0 0 !important;
    transform: translateX(-50%) !important;
  }

  .site-bgm-bar:not(.is-collapsed) .site-bgm-collapse > span {
    width: 6px !important;
    height: 6px !important;
    transform: translateY(1px) rotate(225deg) !important;
  }
}

/* 100 / Galaxy-informed contact and sharing polish -----------------------
   Interaction depth is adapted from the MIT-licensed uiverse-io/galaxy
   button patterns by adamgiebl and Balthasar42. The colour, type and quiet
   editorial hierarchy remain specific to this memorial. */
.creator-email-rail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.creator-email-rail-label {
  padding: 2px 7px;
  border: 1px solid rgb(229 185 95 / 28%);
  border-radius: 999px;
  color: rgb(239 199 112 / 76%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.creator-email-rail-address {
  line-height: 1.4;
}

@media (max-width: 1199px) {
  .creator-email-rail {
    display: none;
  }
}

.creator-support-contact {
  align-items: center;
}

.creator-support-email {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 42px;
  padding: 8px 13px 8px 11px;
  border: 1px solid rgb(229 185 95 / 28%);
  border-radius: 999px;
  overflow: hidden;
  align-items: center;
  gap: 8px;
  color: rgb(245 235 220 / 84%) !important;
  background:
    radial-gradient(110% 180% at 100% 0%, rgb(229 185 95 / 13%) 0%, transparent 58%),
    rgb(255 255 255 / 2%);
  box-shadow:
    inset 0 -1px 0 rgb(0 0 0 / 36%),
    0 5px 18px rgb(0 0 0 / 12%);
  text-decoration: none;
  transition:
    border-color 180ms ease-out,
    box-shadow 180ms ease-out,
    color 180ms ease-out,
    transform 180ms ease-out;
}

.creator-support-email::before {
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(110deg, transparent 22%, rgb(238 199 111 / 10%) 48%, transparent 74%);
  content: "";
  inset: 0;
  opacity: 0;
  transform: translateX(-18%);
  transition: opacity 180ms ease-out, transform 240ms ease-out;
}

.creator-support-email svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.creator-support-email-label {
  color: var(--amber-soft);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.creator-support-email-address {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.creator-support-email:hover,
.creator-support-email:focus-visible {
  border-color: rgb(229 185 95 / 58%);
  color: rgb(255 247 231 / 96%) !important;
  box-shadow:
    inset 0 -1px 0 rgb(0 0 0 / 42%),
    0 7px 22px rgb(0 0 0 / 18%),
    0 0 0 3px rgb(229 185 95 / 8%);
  transform: translateY(-1px);
}

.creator-support-email:hover::before,
.creator-support-email:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

.creator-support-email:active {
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 34%);
  transform: translateY(0);
}

.share-actions span {
  position: relative;
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / 10%), transparent 38%),
    var(--ink);
  box-shadow:
    inset 0 -2px 0 rgb(0 0 0 / 24%),
    0 6px 15px rgb(44 34 24 / 12%);
}

.share-actions span::after {
  position: absolute;
  border: 1px solid rgb(145 45 52 / 0%);
  border-radius: inherit;
  content: "";
  inset: -5px;
  opacity: 0;
  transform: rotate(-22deg) scale(0.88);
  transition:
    border-color 180ms ease-out,
    opacity 180ms ease-out,
    transform 220ms ease-out;
}

.share-actions button:hover span,
.share-actions button:focus-visible span {
  box-shadow:
    inset 0 -2px 0 rgb(50 7 12 / 26%),
    0 8px 20px rgb(72 22 22 / 20%);
}

.share-actions button:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

.share-actions button:focus-visible span {
  box-shadow:
    inset 0 -2px 0 rgb(50 7 12 / 26%),
    0 0 0 3px var(--bg),
    0 0 0 5px rgb(145 45 52 / 58%),
    0 8px 20px rgb(72 22 22 / 20%);
}

.share-actions button:hover span::after,
.share-actions button:focus-visible span::after {
  border-color: rgb(145 45 52 / 54%);
  opacity: 1;
  transform: rotate(0) scale(1);
}

.share-actions button:active span {
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 34%);
  transform: translateY(0);
}

@media (max-width: 720px) {
  /* Seven actions use an eight-column optical grid: four on the first row,
     three centred on the second instead of leaving a dead fourth column. */
  .share-actions {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    column-gap: 0 !important;
  }

  .share-actions button {
    grid-column: span 2;
  }

  .share-actions button[data-share="copy"] {
    grid-column: span 2 !important;
  }

  .share-actions button:nth-child(5) {
    grid-column: 2 / span 2;
  }

  .share-actions button:nth-child(6) {
    grid-column: 4 / span 2;
  }

  .share-actions button:nth-child(7) {
    grid-column: 6 / span 2;
  }

  .creator-support-contact {
    align-items: flex-start;
    gap: 10px !important;
  }

  .creator-support-email {
    width: 100%;
    min-height: 48px;
    padding-inline: 13px;
  }

  .creator-support-email-address {
    min-width: 0;
    font-size: 11.5px;
  }

  footer {
    padding: 32px 20px 38px !important;
    text-align: center;
  }

  footer > div {
    width: 100%;
    margin-inline: auto;
  }

  footer strong,
  footer p {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creator-support-email,
  .creator-support-email::before,
  .share-actions span,
  .share-actions span::after {
    transition: none !important;
  }
}

/* ==========================================================================
   101 / Timeline title baseline + content-fit contact
   ========================================================================== */

/* Desktop dates belong to the event title, not the smaller archival label. */
@media (min-width: 721px) {
  .timeline-list time {
    padding-top: 26.5px;
  }
}

/* Keep the contact control comfortably tappable without stretching into dead space. */
@media (max-width: 720px) {
  .creator-support-email {
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
  }
}

/* ==========================================================================
   102 / Localised translation glyph + true selector centring
   ========================================================================== */

.language-switch-icon-source,
.language-switch-icon-target {
  fill: currentcolor;
  stroke: none;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0;
}

.language-switch-icon svg {
  width: 25px;
  height: 25px;
}

.language-switch-icon-flow {
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

@media (min-width: 981px) {
  /* The selector, rather than the icon-plus-selector group, owns the column centre. */
  .language-switch {
    position: relative;
    width: 86px;
    gap: 0 !important;
  }

  .language-switch-icon {
    position: absolute;
    top: 50%;
    right: calc(100% + 9px);
    transform: translateY(-50%);
  }

  .language-menu,
  .language-menu summary {
    width: 100% !important;
  }
}

/* ==========================================================================
   103 / Mobile player handle optical axis
   ========================================================================== */

@media (max-width: 980px) {
  /* The restored handle straddles the navigation divider; centre its glyph
     on that same axis instead of one optical pixel below it. */
  .site-bgm-bar:not(.is-collapsed) .site-bgm-collapse > span {
    transform: translateY(0) rotate(225deg) !important;
  }

  /* In compact mode the handle, glyph and five-pixel rail share one centre. */
  .site-bgm-bar.is-collapsed .site-bgm-collapse {
    transform: translateY(-1.5px);
  }

  .site-bgm-bar.is-collapsed .site-bgm-collapse > span {
    transform: translateY(0) rotate(45deg) !important;
  }
}

/* ==========================================================================
   104 / Ritual labels + equal pause strokes
   ========================================================================== */

/* One rendered bar plus an exact shadow copy keeps both pause strokes
   identical in width, height and antialiasing. */
.sound-toggle.playing .sound-toggle-glyph::before {
  top: 50% !important;
  left: 2px !important;
  width: 3px !important;
  height: 11px !important;
  border: 0 !important;
  border-radius: 1px !important;
  background: currentcolor !important;
  box-shadow: 7px 0 0 currentcolor;
  content: "" !important;
  transform: translateY(-50%) !important;
}

.sound-toggle.playing .sound-toggle-glyph::after {
  content: none !important;
}

/* Match the left inset to the grid gap so the caption is geometrically
   centred between the divider and the native select. */
.ritual-theme-picker {
  padding-left: 10px !important;
}

.ritual-theme-picker > span {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

@media (min-width: 981px) {
  /* The icon remains a useful cue, but no longer pushes the word off-centre. */
  .ritual-theme-random {
    position: relative;
    display: grid !important;
    place-items: center !important;
  }

  .ritual-theme-random > span:first-child {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
  }

  .ritual-theme-random > span:last-child {
    display: block;
    width: 100%;
    text-align: center;
  }

  .ritual-theme-picker {
    padding-left: 14px !important;
  }
}

@media (max-width: 720px) {
  .ritual-theme-picker {
    padding-left: 7px !important;
  }
}

/* ==========================================================================
   105 / Multilingual masthead budget + usable-area language centring
   ========================================================================== */

/* The chevron owns a reserved 28px action lane. */
.language-menu summary {
  grid-template-columns: minmax(0, 1fr) 28px !important;
  padding-inline: 0 !important;
}

.language-menu summary [data-current-language] {
  grid-column: 1;
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch;
  text-align: center !important;
  /* The intended visual range ends at the chevron's centre, not at the
     beginning of its lane. Half of that extra 14px moves the label 7px. */
  transform: translateX(7px);
}

.language-chevron {
  position: static !important;
  grid-column: 2;
  width: 28px;
  height: 100%;
  display: grid !important;
  place-items: center;
  transform: rotate(0deg) !important;
}

.language-menu[open] .language-chevron {
  transform: rotate(180deg) !important;
}

@media (min-width: 981px) {
  /* One optical type scale for every language. Long names wrap inside a
     deliberate brand budget rather than growing underneath the player. */
  .brand > span:last-child {
    min-width: 0;
    max-width: 220px;
  }

  .brand strong,
  .brand small {
    display: block;
    white-space: normal;
    text-wrap: balance;
  }

  .brand strong {
    font-size: 18px !important;
    line-height: 1.18 !important;
    letter-spacing: 0.025em !important;
  }

  .brand small {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.055em !important;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  /* At the compact desktop breakpoint the player starts at 198px. This
     budget leaves a real gutter after the mark for every translation. */
  .brand > span:last-child {
    max-width: 136px;
  }
}

/* ==========================================================================
   107 / Masthead primary-text axis
   ========================================================================== */

@media (min-width: 981px) {
  /* JS derives this small optical offset from the translated brand title.
     Move the icon and selector together so both primary labels share a row. */
  .language-switch {
    transform: translateY(var(--masthead-language-y, 0px)) !important;
  }

  /* Clear the player's translated status rows before the two-column menu
     opens. The value is derived from the rendered BGM height in script.js. */
  .language-options {
    top: calc(100% + var(--masthead-panel-gap, 10px)) !important;
  }
}

/* ==========================================================================
   109 / Ritual memory orbit
   A quiet symbolic threshold behind the ritual controls. These four lights
   are decorative only: they never represent petition, candle, or donation
   totals.
   ========================================================================== */

.memorial-ritual {
  position: relative;
  isolation: isolate;
}

.ritual-heading,
.ritual-theme-controls,
.ritual-stage {
  position: relative;
  z-index: 2;
}

.ritual-memory-orbit {
  position: absolute;
  z-index: 1;
  top: -38px;
  left: 50%;
  width: min(calc(100% - 72px), 960px);
  height: 286px;
  overflow: hidden;
  opacity: 0.92;
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 78%, transparent 100%);
}

.ritual-memory-orbit::before {
  position: absolute;
  top: 18px;
  left: 50%;
  width: min(78%, 720px);
  height: 226px;
  border: 1px solid rgb(225 176 74 / 13%);
  border-right-color: rgb(246 216 150 / 24%);
  border-bottom-color: rgb(225 176 74 / 8%);
  border-left-color: rgb(246 216 150 / 20%);
  border-radius: 50%;
  box-shadow:
    inset 0 0 42px rgb(217 159 61 / 3%),
    0 0 36px rgb(217 159 61 / 3%);
  content: "";
  transform: translateX(-50%);
}

.ritual-memory-orbit::after {
  position: absolute;
  top: 54px;
  left: 50%;
  width: min(44%, 390px);
  height: 158px;
  background: radial-gradient(
    ellipse at center,
    rgb(235 190 93 / 13%) 0,
    rgb(217 159 61 / 5%) 38%,
    transparent 72%
  );
  content: "";
  filter: blur(3px);
  transform: translateX(-50%);
}

.ritual-memory-orbit-line {
  position: absolute;
  top: 30px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgb(245 214 145 / 18%) 20%,
    rgb(225 176 74 / 5%) 70%,
    transparent
  );
  transform: translateX(-50%);
}

.ritual-memory-orbit-line::before {
  position: absolute;
  top: 54px;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgb(246 216 150 / 42%);
  background: rgb(18 14 11 / 88%);
  box-shadow: 0 0 18px rgb(225 176 74 / 24%);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.ritual-memory-orbit i {
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid rgb(255 239 194 / 68%);
  border-radius: 50%;
  background: #e8bb61;
  box-shadow:
    0 0 5px 1px rgb(250 210 121 / 68%),
    0 0 18px 5px rgb(225 157 53 / 25%);
  opacity: 0.42;
  animation: ritual-memory-orbit-glow 6.4s ease-in-out infinite;
}

.ritual-memory-orbit i:nth-of-type(1) {
  top: 112px;
  left: 13%;
  animation-delay: -4.7s;
  animation-duration: 7.1s;
}

.ritual-memory-orbit i:nth-of-type(2) {
  top: 44px;
  left: 33%;
  width: 4px;
  height: 4px;
  animation-delay: -1.3s;
  animation-duration: 5.3s;
}

.ritual-memory-orbit i:nth-of-type(3) {
  top: 46px;
  right: 32%;
  animation-delay: -5.8s;
  animation-duration: 8.2s;
}

.ritual-memory-orbit i:nth-of-type(4) {
  top: 118px;
  right: 12%;
  width: 4px;
  height: 4px;
  animation-delay: -2.4s;
  animation-duration: 6.1s;
}

@keyframes ritual-memory-orbit-glow {
  0%,
  100% {
    opacity: 0.28;
    box-shadow:
      0 0 4px 1px rgb(250 210 121 / 44%),
      0 0 13px 3px rgb(225 157 53 / 14%);
    transform: scale(0.76);
  }

  44% {
    opacity: 0.96;
    box-shadow:
      0 0 8px 2px rgb(255 229 163 / 88%),
      0 0 25px 8px rgb(225 157 53 / 31%);
    transform: scale(1.3);
  }
}

@media (max-width: 720px) {
  .ritual-memory-orbit {
    top: -24px;
    width: calc(100% - 20px);
    height: 226px;
    opacity: 0.76;
  }

  .ritual-memory-orbit::before {
    top: 14px;
    width: 92%;
    height: 184px;
  }

  .ritual-memory-orbit::after {
    top: 42px;
    width: 62%;
    height: 126px;
  }

  .ritual-memory-orbit-line {
    top: 24px;
    bottom: 8px;
  }

  .ritual-memory-orbit-line::before {
    top: 42px;
    width: 6px;
    height: 6px;
  }

  .ritual-memory-orbit i:nth-of-type(1) {
    top: 91px;
    left: 7%;
  }

  .ritual-memory-orbit i:nth-of-type(2) {
    top: 36px;
    left: 30%;
  }

  .ritual-memory-orbit i:nth-of-type(3) {
    top: 37px;
    right: 29%;
  }

  .ritual-memory-orbit i:nth-of-type(4) {
    top: 96px;
    right: 6%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ritual-memory-orbit i {
    animation: none;
  }

  .ritual-memory-orbit i:nth-of-type(1),
  .ritual-memory-orbit i:nth-of-type(3) {
    opacity: 0.78;
    transform: scale(1.08);
  }

  .ritual-memory-orbit i:nth-of-type(2),
  .ritual-memory-orbit i:nth-of-type(4) {
    opacity: 0.44;
  }
}

/* ==========================================================================
   110 / Bell interaction coachmark
   A short, non-blocking cue makes the ritual's first action discoverable.
   It follows the bell across breakpoints and yields as soon as the ritual starts.
   ========================================================================== */

.ritual-bell-coachmark {
  position: absolute;
  z-index: 9;
  top: calc(61% + clamp(140px, 10.5vw, 166px));
  left: 50%;
  display: inline-flex;
  width: max-content;
  max-width: min(calc(100% - 40px), 360px);
  min-height: 42px;
  padding: 10px 17px 10px 15px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgb(232 188 99 / 42%);
  border-radius: 999px;
  color: #f3d99f;
  background:
    linear-gradient(115deg, rgb(29 20 11 / 92%), rgb(14 11 8 / 86%));
  box-shadow:
    0 10px 30px rgb(0 0 0 / 38%),
    inset 0 1px rgb(255 234 182 / 8%),
    0 0 20px rgb(219 159 57 / 7%);
  font-size: clamp(13px, .98vw, 15px);
  font-weight: 650;
  letter-spacing: .06em;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  transition:
    opacity 240ms ease,
    visibility 240ms ease,
    transform 240ms ease;
  backdrop-filter: blur(7px);
}

.ritual-bell-coachmark-arrow {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  color: #eab94f;
  animation: ritual-bell-coachmark-nudge 1.05s ease-in-out .55s 2;
}

.ritual-bell-coachmark-arrow svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.light-button:hover + .ritual-bell-coachmark,
.light-button:focus-visible + .ritual-bell-coachmark {
  border-color: rgb(244 202 116 / 68%);
  color: #ffedc0;
  box-shadow:
    0 12px 34px rgb(0 0 0 / 42%),
    inset 0 1px rgb(255 244 211 / 12%),
    0 0 26px rgb(225 166 62 / 13%);
}

.memorial-ritual.is-lit .ritual-bell-coachmark,
.memorial-ritual.ritual-complete .ritual-bell-coachmark {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -9px);
}

@keyframes ritual-bell-coachmark-nudge {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@media (max-width: 720px) {
  .ritual-bell-coachmark {
    top: calc(63% + clamp(60px, 15.5vw, 72px));
    max-width: min(calc(100% - 32px), 320px);
    min-height: 40px;
    padding: 9px 14px 9px 12px;
    gap: 8px;
    font-size: clamp(12px, 3.45vw, 14px);
    letter-spacing: .035em;
  }

  .ritual-bell-coachmark-arrow {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .ritual-bell-coachmark-arrow svg {
    width: 17px;
    height: 17px;
  }
}

/* 160 / Global response footprint ----------------------------------------
   Country and region are explicitly optional. The public treatment is a
   quiet, static record—never a vertical ticker or simulated live feed. */
.petition-count .response-footprint {
  max-width: 360px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgb(240 216 160 / 18%);
}

.petition-count .response-footprint[hidden] {
  display: none;
}

.petition-count .response-footprint > p {
  margin: 0;
  color: rgb(242 224 187 / 78%);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .055em;
  line-height: 1.65;
}

.petition-count .response-footprint-flags {
  display: flex;
  margin-top: 11px;
  flex-wrap: wrap;
  gap: 7px;
}

.petition-count .response-footprint-flag,
.petition-count .response-footprint-more {
  display: inline-flex;
  min-height: 30px;
  margin: 0;
  padding: 4px 9px 4px 7px;
  border: 1px solid rgb(240 216 160 / 22%);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  color: rgb(249 235 205 / 88%);
  background: rgb(13 10 7 / 28%);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.petition-count .response-footprint-flag img {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.petition-count .response-footprint-flag b {
  font: inherit;
}

.petition-count .response-footprint-more {
  justify-content: center;
  padding-inline: 9px;
  color: rgb(242 224 187 / 70%);
}

.petition-count button.response-footprint-more {
  appearance: none;
  cursor: pointer;
  font: inherit;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.petition-count button.response-footprint-more:hover {
  border-color: rgb(240 216 160 / 48%);
  color: rgb(249 235 205 / 96%);
  background: rgb(240 216 160 / 10%);
}

.petition-count button.response-footprint-more:focus-visible {
  outline: 2px solid rgb(224 172 64 / 86%);
  outline-offset: 2px;
}

.petition-dialog {
  max-height: min(88dvh, 760px);
  overflow: auto;
}

.response-region-card {
  display: grid;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid rgb(231 191 106 / 24%);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgb(231 191 106 / 7%), transparent 62%),
    rgb(255 248 235 / 2%);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 11px 10px;
}

.response-region-card > div {
  grid-column: 1 / -1;
}

.response-region-card h3 {
  margin: 0;
  color: #f1e8da;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .035em;
  line-height: 1.45;
}

.response-region-card > div > p {
  margin: 4px 0 0;
  color: rgb(231 222 208 / 62%);
  font-size: 11px;
  line-height: 1.6;
}

.response-region-field {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.response-region-field > span {
  color: rgb(238 225 203 / 72%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.response-region-field select {
  width: 100%;
  min-height: 44px;
  padding: 7px 34px 7px 11px;
  border: 1px solid rgb(231 191 106 / 28%);
  border-radius: 8px;
  outline-offset: 3px;
  color: #f1e8da;
  background: #17130f;
  font: inherit;
  font-size: 13px;
}

.response-region-save {
  align-self: end;
  min-height: 44px;
  padding: 7px 13px;
  border: 1px solid rgb(231 191 106 / 42%);
  border-radius: 8px;
  color: #17110a;
  background: #dfad50;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.response-region-save:hover,
.response-region-save:focus-visible {
  background: #efc978;
}

.response-region-save:disabled {
  cursor: default;
  opacity: .44;
}

.response-region-status {
  grid-column: 1 / -1;
  margin: 0;
  color: rgb(242 217 158 / 86%);
  font-size: 11px;
  line-height: 1.55;
}

.response-region-status[hidden] {
  display: none;
}

.response-region-card.is-saved .response-region-field,
.response-region-card.is-saved .response-region-save {
  display: none;
}

.prayer-message .prayer-message-meta {
  display: flex;
  min-height: 24px;
  margin: 0 0 15px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.prayer-message .prayer-message-meta span {
  margin-bottom: 0;
}

.prayer-message .prayer-country-flag {
  display: inline-flex;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid rgb(229 185 95 / 28%);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  vertical-align: middle;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1;
}

.prayer-message .prayer-country-flag[hidden] {
  display: none;
}

.prayer-message .prayer-country-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prayer-message [data-prayer-language] {
  display: block;
  line-height: 1;
}

@media (max-width: 720px) {
  .petition-count .response-footprint {
    max-width: min(100%, 340px);
    margin-top: 20px;
    padding-top: 15px;
  }

  .response-region-card {
    padding: 12px;
    grid-template-columns: 1fr;
  }

  .response-region-field,
  .response-region-save,
  .response-region-status {
    grid-column: 1;
  }

  .response-region-save {
    width: 100%;
  }
}

/* 160 / Ritual scene value marquee + quiet galaxy surface ----------------
   The native select remains the real, keyboard-accessible control. Its
   visible value is mirrored above it so longer translations can travel
   right-to-left within the existing field rather than losing their last glyph. */
.ritual-theme-controls {
  overflow: hidden;
}

.ritual-theme-controls::before {
  position: absolute;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 17% 28%, rgb(255 227 158 / 20%) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 72%, rgb(238 195 104 / 16%) 0 1px, transparent 1.7px),
    radial-gradient(88% 140% at 100% 8%, rgb(159 112 255 / 9%), transparent 62%),
    radial-gradient(76% 120% at 0% 100%, rgb(221 176 77 / 8%), transparent 64%);
  content: "";
  inset: 1px;
  pointer-events: none;
}

.ritual-theme-controls > * {
  position: relative;
  z-index: 1;
}

.ritual-theme-select-shell {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  isolation: isolate;
}

.ritual-theme-select-shell select {
  width: 100% !important;
  color: transparent !important;
  text-shadow: none !important;
}

.ritual-theme-select-shell select option {
  color: var(--v73-cream);
  background-color: #18120d;
}

.ritual-theme-marquee {
  position: absolute;
  z-index: 1;
  display: flex;
  overflow: hidden;
  min-width: 0;
  align-items: center;
  color: var(--v73-cream);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
  inset: 0 42px 0 16px;
}

.ritual-theme-marquee > span {
  display: block;
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
  text-align: center;
  will-change: transform;
}

.ritual-theme-select-shell.is-marquee .ritual-theme-marquee > span {
  min-width: max-content;
  text-align: left;
  animation: ritual-theme-value-marquee 3.6s ease-in-out 720ms infinite alternate;
}

@keyframes ritual-theme-value-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--ritual-theme-marquee-distance)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ritual-theme-select-shell.is-marquee .ritual-theme-marquee > span {
    animation: none;
  }
}

/* 159 / Personal prayer preview ------------------------------------------
   A pending submission is visible to its author without being presented as a
   reviewed public blessing.  The wall pauses briefly, then returns to its
   existing unhurried rhythm. */
.prayer-message.is-own-preview {
  padding: clamp(14px, 2vw, 20px) !important;
  border: 1px solid rgb(234 185 79 / 48%);
  border-radius: 12px;
  background: linear-gradient(120deg, rgb(234 185 79 / 10%), transparent 68%);
  box-shadow: 0 0 0 4px rgb(234 185 79 / 5%);
}

.prayer-preview-status {
  display: inline-flex;
  max-width: 100%;
  margin: 0 auto 11px;
  padding: 4px 8px;
  align-items: center;
  border: 1px solid rgb(234 185 79 / 35%);
  border-radius: 999px;
  color: rgb(244 222 171 / 88%);
  background: rgb(13 10 7 / 58%);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .055em;
  line-height: 1.35;
}

.prayer-preview-status[hidden] {
  display: none;
}

.prayer-preview-button {
  min-height: 44px;
  width: fit-content;
  margin-top: 2px;
  padding: 8px 13px;
  border: 1px solid rgb(234 185 79 / 36%);
  border-radius: 999px;
  color: #f2d99b;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .035em;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.prayer-preview-button:hover,
.prayer-preview-button:focus-visible {
  border-color: rgb(246 211 131 / 72%);
  color: #fff0c8;
  background: rgb(234 185 79 / 11%);
}

@media (max-width: 720px) {
  .prayer-message.is-own-preview {
    padding: 13px 12px !important;
  }

  .prayer-preview-status {
    margin-bottom: 9px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prayer-preview-button {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ritual-bell-coachmark,
  .ritual-bell-coachmark-arrow {
    animation: none;
    transition: none;
  }
}

/* ==========================================================================
   111 / Verified public records + prayer preset alignment
   The live-ready archive shows source-linked text records instead of visual
   placeholders. Prayer shortcuts share one measured baseline on every locale.
   ========================================================================== */

.prayer-compose .prayer-presets {
  display: grid !important;
  width: min(100%, 520px) !important;
  margin: 12px auto 0 !important;
  border-block: 1px solid rgb(229 185 95 / 24%);
  align-items: stretch !important;
  justify-self: center !important;
  gap: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.prayer-compose .prayer-presets button {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 9px 14px !important;
  border: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(12px, 1vw, 14px) !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

.prayer-compose .prayer-presets button + button {
  border-left: 1px solid rgb(229 185 95 / 24%) !important;
}

.prayer-compose > small {
  width: 100% !important;
  margin-top: 0 !important;
  text-align: center !important;
}

.sensitive-grid {
  align-items: stretch;
  gap: clamp(24px, 2.4vw, 34px) !important;
}

.sensitive-gate {
  display: grid;
  min-width: 0;
  grid-template-rows: minmax(54px, auto) 1fr;
}

.sensitive-gate h3 {
  display: flex;
  min-height: 54px;
  margin: 0 !important;
  padding: 0 16px 15px;
  align-items: flex-end;
  justify-content: center;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.42;
  text-align: center;
}

.sensitive-gate .gate-panel,
.sensitive-gate .gate-media {
  width: 100%;
  min-height: 100%;
}

.sensitive-gate .gate-panel {
  align-content: center;
  padding: clamp(24px, 2.6vw, 34px) !important;
  gap: 18px !important;
}

.sensitive-gate .gate-panel p {
  max-width: 42em;
  font-size: clamp(14px, 1.05vw, 16px) !important;
  line-height: 1.82 !important;
}

.sensitive-gate .gate-media {
  padding: clamp(24px, 2.5vw, 34px) !important;
  align-content: start;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto auto;
  gap: 0 !important;
  background:
    radial-gradient(circle at 92% 7%, rgb(218 163 59 / 8%), transparent 27%),
    linear-gradient(145deg, #15110d, #0b0907 68%);
}

.verified-record-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.verified-record-heading time {
  color: #dbae50;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .12em;
}

.verified-record-status {
  display: inline-flex;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgb(224 181 91 / 32%);
  border-radius: 999px;
  align-items: center;
  color: #e8c77f;
  background: rgb(213 164 65 / 7%);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.2;
  white-space: nowrap;
}

.verified-record-status.is-advocacy {
  border-color: rgb(210 107 111 / 32%);
  color: #dc9a9d;
  background: rgb(139 43 48 / 8%);
}

.verified-record-source {
  margin: 14px 0 0 !important;
  color: rgb(226 215 199 / 54%) !important;
  font-size: 12px !important;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1.65 !important;
}

.gate-media h4 {
  margin: 12px 0 0;
  color: #f4ede3;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.42;
  letter-spacing: .01em;
}

.verified-record-summary {
  margin: 14px 0 0 !important;
  color: rgb(232 222 209 / 72%) !important;
  font-size: clamp(14px, 1.08vw, 16px) !important;
  line-height: 1.82 !important;
}

.verified-record-points {
  display: grid;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid rgb(229 185 95 / 17%);
  list-style: none;
}

.verified-record-points li {
  position: relative;
  min-height: 47px;
  padding: 12px 8px 12px 24px;
  border-bottom: 1px solid rgb(229 185 95 / 12%);
  color: rgb(240 232 221 / 82%);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
}

.verified-record-points li::before {
  position: absolute;
  top: 1.05em;
  left: 5px;
  width: 6px;
  height: 6px;
  border: 1px solid #d8a746;
  border-radius: 50%;
  content: "";
}

.verified-record-caveat {
  align-self: start;
  margin: 18px 0 0 !important;
  padding: 13px 15px;
  border-left: 2px solid rgb(210 107 111 / 48%);
  color: rgb(232 213 206 / 72%) !important;
  background: rgb(139 43 48 / 7%);
  font-size: 12.5px !important;
  line-height: 1.72 !important;
}

.verified-record-links {
  display: flex;
  margin-top: auto;
  padding-top: 22px;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.verified-record-links a {
  display: inline-flex;
  min-height: 42px;
  padding: 8px 0;
  border-bottom: 1px solid rgb(225 176 74 / 35%);
  align-items: center;
  gap: 10px;
  color: #e6bd68;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.verified-record-links a:hover,
.verified-record-links a:focus-visible {
  border-bottom-color: #f2d28d;
  color: #f2d28d;
}

.verified-record-checked {
  display: block;
  margin-top: 15px;
  color: rgb(218 207 191 / 45%);
  font-size: 10.5px;
  letter-spacing: .045em;
  line-height: 1.5;
}

.sensitive-gate .gate-media > button {
  min-height: 40px;
  margin-top: 20px;
  padding-inline: 14px;
}

@media (max-width: 720px) {
  .prayer-compose .prayer-presets {
    width: 100% !important;
  }

  .prayer-compose .prayer-presets button {
    min-height: 48px !important;
    padding-inline: 10px !important;
    font-size: clamp(12px, 3.55vw, 14px) !important;
  }

  .sensitive-grid {
    gap: 28px !important;
  }

  .sensitive-gate {
    grid-template-rows: auto 1fr;
  }

  .sensitive-gate h3 {
    min-height: 0;
    padding: 0 8px 12px;
    font-size: 16px !important;
  }

  .sensitive-gate .gate-panel,
  .sensitive-gate .gate-media {
    min-height: 0;
  }

  .sensitive-gate .gate-media {
    padding: 22px 20px !important;
  }

  .verified-record-heading {
    align-items: flex-start;
  }

  .verified-record-heading time {
    padding-top: 6px;
    font-size: 12px;
  }

  .gate-media h4 {
    font-size: clamp(22px, 6.4vw, 27px);
  }

  .verified-record-links {
    display: grid;
    gap: 2px;
  }

  .verified-record-links a {
    justify-content: space-between;
  }
}

/* 112 / Mobile long-read compression --------------------------------------
   Keep the approved vertical narrative. On phones the chapter rail becomes
   an explicit quick index, secondary record lists disclose progressively,
   and each major chapter offers one calm onward link. */
.section-nav-toggle,
.mobile-list-toggle,
.mobile-next-chapter {
  display: none;
}

.section-nav-links {
  display: contents;
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: calc(var(--site-header-height, 138px) + 62px) !important;
  }

  /* Keep header-owned flyouts above the sibling quick-index rail. Without
     this stacking order, the rail cuts through the open language grid. */
  .site-header {
    z-index: 90 !important;
  }

  .section-nav {
    position: sticky !important;
    top: var(--site-header-height, 138px) !important;
    z-index: 88 !important;
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-bottom: 1px solid rgb(224 181 91 / 18%) !important;
    background: rgb(13 11 9 / 94%) !important;
    backdrop-filter: blur(12px) saturate(.86);
  }

  .section-nav-toggle {
    display: grid;
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 0 max(20px, env(safe-area-inset-left));
    border: 0;
    grid-template-columns: auto minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    color: rgb(242 232 216 / 78%);
    background: transparent;
    text-align: left;
  }

  .section-nav-toggle-label {
    color: #d9ab4e;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .12em;
    white-space: nowrap;
  }

  .section-nav-toggle strong {
    overflow: hidden;
    color: #f4ede3;
    font-size: 14px;
    font-weight: 720;
    letter-spacing: .025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section-nav-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #d9ab4e;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    transition: transform 180ms ease-out;
  }

  .section-nav.is-open .section-nav-toggle svg {
    transform: rotate(180deg);
  }

  .section-nav-links {
    position: absolute;
    top: calc(100% - 1px);
    right: 12px;
    left: 12px;
    z-index: 2;
    display: none;
    max-height: min(62svh, 430px);
    padding: 8px;
    border: 1px solid rgb(224 181 91 / 24%);
    border-radius: 0 0 16px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    overflow-y: auto;
    background:
      radial-gradient(circle at 10% 0, rgb(222 174 70 / 9%), transparent 34%),
      #100d0a;
    box-shadow: 0 18px 34px rgb(0 0 0 / 42%);
  }

  .section-nav.is-open .section-nav-links {
    display: grid;
  }

  .section-nav-links a {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 10px;
    align-items: center;
    justify-content: flex-start;
    color: rgb(238 229 216 / 72%) !important;
    font-size: 13px !important;
    line-height: 1.4;
    text-align: left;
    white-space: normal !important;
  }

  .section-nav-links a.active {
    border-color: rgb(224 181 91 / 28%) !important;
    color: #f2ce7b !important;
    background: rgb(224 181 91 / 9%) !important;
  }

  .site-header.is-reader-compact + .section-nav {
    min-height: 0 !important;
    height: 0 !important;
    border-bottom-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
  }

  .site-header.is-reader-compact + .section-nav .section-nav-links {
    display: none !important;
  }

  main > .section {
    padding-top: clamp(58px, 15vw, 68px) !important;
    padding-bottom: clamp(62px, 16vw, 74px) !important;
  }

  .mobile-compact-list:not(.is-expanded) > .mobile-condensed-item {
    display: none !important;
  }

  .mobile-list-toggle {
    display: flex;
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    padding: 10px 14px;
    border: 1px solid rgb(65 55 43 / 24%);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    color: #2d2822;
    background: rgb(255 255 255 / 18%);
    font-size: 13px;
    font-weight: 760;
    letter-spacing: .035em;
  }

  .mobile-next-chapter {
    display: flex;
    width: min(calc(100% - 40px), 1080px);
    margin: clamp(34px, 9vw, 46px) auto 0;
    border-top: 1px solid rgb(90 75 57 / 17%);
  }

  .mobile-next-chapter a {
    display: flex;
    width: 100%;
    min-height: 52px;
    padding: 12px 2px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: inherit;
    font-size: 13px;
    font-weight: 760;
    letter-spacing: .035em;
    text-decoration: none;
  }

  .s-ash .mobile-next-chapter,
  .sensitive .mobile-next-chapter,
  .memorial-band .mobile-next-chapter,
  .share-section .mobile-next-chapter {
    border-top-color: rgb(231 192 111 / 20%);
  }

  .s-ash .mobile-next-chapter a,
  .sensitive .mobile-next-chapter a,
  .memorial-band .mobile-next-chapter a,
  .share-section .mobile-next-chapter a {
    color: #e4bd69;
  }
}

@media (max-width: 720px) and (orientation: landscape) and (max-height: 500px) {
  .section-nav-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .section-nav-links a {
    min-height: 44px !important;
    padding-block: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-nav-toggle svg {
    transition: none !important;
  }
}

/* 114 / Wide-screen masthead + persistent mobile quick index -------------
   Keep the approved player and immersive rail. Wide monitors receive a
   centred lower masthead grid instead of oversized margins inside fixed
   side columns. When the rail is compact, the quick index remains available
   as a small translated control without adding another header row. */
@media (min-width: 1200px) {
  .site-header {
    grid-template-columns:
      minmax(28px, 1fr)
      220px
      minmax(620px, 900px)
      170px
      minmax(28px, 1fr) !important;
    column-gap: clamp(14px, 1.15vw, 22px) !important;
  }

  .desktop-nav {
    grid-column: 2 / 5 !important;
    width: min(100%, 1240px) !important;
  }

  .brand {
    grid-column: 2 !important;
    width: 220px;
    margin-left: 0 !important;
  }

  .brand > span:last-child {
    max-width: 182px;
  }

  .site-bgm-bar {
    grid-column: 3 !important;
  }

  .language-switch {
    grid-column: 4 !important;
    width: 170px;
    margin-right: 0 !important;
  }
}

@media (max-width: 720px) {
  .site-header.is-reader-compact + .section-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 101 !important;
    min-height: 30px !important;
    height: 30px !important;
    margin-top: -30px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .site-header.is-reader-compact + .section-nav .section-nav-toggle {
    position: absolute;
    top: 0;
    right: max(12px, env(safe-area-inset-right));
    left: auto;
    width: auto;
    min-width: 0;
    min-height: 30px;
    height: 30px;
    padding: 0 7px 0 9px;
    border: 1px solid rgb(221 176 77 / 22%);
    border-top: 0;
    border-radius: 0 0 9px 9px;
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: auto;
    background: rgb(16 13 10 / 76%);
    box-shadow: 0 5px 14px rgb(0 0 0 / 18%);
  }

  .site-header.is-reader-compact + .section-nav .section-nav-toggle-label {
    max-width: 92px;
    overflow: hidden;
    font-size: 9.5px;
    letter-spacing: .08em;
    text-overflow: ellipsis;
  }

  .site-header.is-reader-compact + .section-nav .section-nav-toggle strong {
    display: none;
  }

  .site-header.is-reader-compact + .section-nav .section-nav-toggle svg {
    width: 14px;
    height: 14px;
  }

  .site-header.is-reader-compact + .section-nav .section-nav-links {
    top: 30px;
    pointer-events: auto;
  }

  .site-header.is-reader-compact + .section-nav.is-open .section-nav-links {
    display: grid !important;
  }
}

/* 120 / Desktop masthead edge balance + reserved translation emblem -------
   The 170px selector added in v114 outgrew the older absolutely positioned
   emblem rule. Give the complete emblem-plus-selector group its own 207px
   track, and keep compact desktop side rails deliberately shallow. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .site-header {
    grid-template-columns:
      12px
      220px
      minmax(590px, 1fr)
      207px
      12px !important;
    column-gap: 12px !important;
  }

  .brand {
    grid-column: 2 !important;
    width: 220px !important;
    margin-left: 0 !important;
  }

  .site-bgm-bar {
    grid-column: 3 !important;
  }

  .language-switch {
    grid-column: 4 !important;
    width: 170px !important;
    margin-right: 0 !important;
    justify-self: end !important;
  }
}

@media (min-width: 1400px) {
  .site-header {
    grid-template-columns:
      minmax(14px, 1fr)
      220px
      minmax(620px, 900px)
      207px
      minmax(14px, 1fr) !important;
  }

  .language-switch {
    width: 170px !important;
    justify-self: end !important;
  }
}

/* 116 / Mobile control cleanup -------------------------------------------
   iOS must not add a second native stepper to the ritual scene picker.
   The quick index uses a real centred title and balanced menu cells, while
   the BGM play glyph keeps only the approved outer gold control ring. */
.sound-toggle-glyph,
.sound-toggle:hover .sound-toggle-glyph,
.sound-toggle.playing .sound-toggle-glyph {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .ritual-theme-picker {
    position: relative !important;
  }

  .ritual-theme-picker select {
    padding-right: 36px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
  }

  .ritual-theme-picker::after {
    position: absolute;
    top: 50%;
    right: 17px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgb(238 202 121 / 82%);
    border-bottom: 1.5px solid rgb(238 202 121 / 82%);
    content: "";
    pointer-events: none;
    transform: translateY(-68%) rotate(45deg);
  }

  .section-nav-toggle {
    position: relative;
    display: flex !important;
    justify-content: center;
    gap: 8px !important;
    text-align: center !important;
  }

  .section-nav-toggle-label {
    font-size: 13px !important;
    letter-spacing: .04em !important;
  }

  .section-nav-toggle strong {
    display: none !important;
  }

  .section-nav-toggle svg {
    flex: 0 0 20px;
  }

  .section-nav-links a {
    justify-content: center !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  .site-header.is-reader-compact + .section-nav .section-nav-toggle {
    display: flex !important;
    min-width: 96px;
    padding-inline: 7px;
  }

  .site-header.is-reader-compact + .section-nav .section-nav-toggle-label {
    max-width: none;
    font-size: 13px !important;
    letter-spacing: .04em !important;
  }
}

/* 121 / Compact right-edge quick index + shorter chapter hand-offs --------
   Mobile navigation is a small utility, not another full-width chapter.
   Keep the trigger aligned with the right-edge controls, cap the open panel,
   and remove the stacked section padding that made onward links feel empty. */
@media (max-width: 720px) {
  .section-nav-toggle {
    width: auto !important;
    min-width: 132px !important;
    margin-left: auto !important;
    padding: 0 14px !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    text-align: right !important;
  }

  .section-nav-toggle-label {
    font-size: 15px !important;
    letter-spacing: .04em !important;
  }

  .section-nav-toggle svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }

  .section-nav-links {
    right: 12px !important;
    left: auto !important;
    width: min(280px, calc(100vw - 24px)) !important;
    max-height: min(58svh, 360px) !important;
    padding: 6px !important;
    border-radius: 0 0 12px 12px !important;
    gap: 3px !important;
  }

  .section-nav-links a {
    min-height: 44px !important;
    padding: 8px 10px !important;
    justify-content: flex-start !important;
    font-size: 14.5px !important;
    text-align: left !important;
  }

  .site-header.is-reader-compact + .section-nav .section-nav-toggle {
    min-width: 110px !important;
    padding-inline: 9px !important;
  }

  .site-header.is-reader-compact + .section-nav .section-nav-toggle-label {
    font-size: 13px !important;
  }

  main > .section:has(> .mobile-next-chapter) {
    padding-bottom: 20px !important;
  }

  main > .section:has(> .mobile-next-chapter) + .section {
    padding-top: 30px !important;
  }

  .mobile-next-chapter {
    margin-top: 24px !important;
  }

  .mobile-next-chapter a {
    min-height: 44px !important;
    padding: 9px 2px !important;
    font-size: 15px !important;
  }
}

/* 122 / Quiet mobile paw trails + lighter hero reading density ------------
   Two small trails use the unused masthead lanes without becoming controls
   or suggesting activity totals. Their staggered glow reads as a slow walk;
   reduced-motion users receive a quiet static mark. */
.mobile-paw-trail {
  display: none;
}

@media (max-width: 720px) {
  .mobile-paw-trail {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }

  .mobile-paw-trail--masthead {
    top: 22px;
    left: 50%;
    width: clamp(48px, 16vw, 78px);
    height: 28px;
    transform: translateX(-50%);
  }

  .mobile-paw-trail--quick-index {
    top: 9px;
    left: clamp(22px, 9vw, 40px);
    width: clamp(88px, 26vw, 112px);
    height: 30px;
  }

  .mobile-paw-trail i {
    --paw-angle: -14deg;
    --paw-y: 3px;

    width: clamp(12px, 3.5vw, 15px);
    height: clamp(13px, 3.8vw, 16px);
    display: block;
    background: #d9ab4e;
    filter: drop-shadow(0 0 5px rgb(230 179 76 / 24%));
    opacity: 0.08;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 36' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='25' r='8.7' fill='black'/%3E%3Ccircle cx='6.5' cy='16' r='4.7' fill='black'/%3E%3Ccircle cx='13' cy='9' r='4.6' fill='black'/%3E%3Ccircle cx='21.5' cy='9.5' r='4.6' fill='black'/%3E%3Ccircle cx='27' cy='17' r='4.7' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 36' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='25' r='8.7' fill='black'/%3E%3Ccircle cx='6.5' cy='16' r='4.7' fill='black'/%3E%3Ccircle cx='13' cy='9' r='4.6' fill='black'/%3E%3Ccircle cx='21.5' cy='9.5' r='4.6' fill='black'/%3E%3Ccircle cx='27' cy='17' r='4.7' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: mobile-paw-step-v122 7.2s ease-in-out infinite;
    animation-delay: calc(var(--paw-index) * 0.82s);
    transform: translateY(var(--paw-y)) rotate(var(--paw-angle)) scale(0.86);
  }

  .mobile-paw-trail i:nth-child(even) {
    --paw-angle: 15deg;
    --paw-y: -3px;
  }

  .mobile-paw-trail--quick-index i {
    animation-duration: 8.4s;
    animation-delay: calc(var(--paw-index) * 0.94s - 1.2s);
  }

  .site-header.is-reader-compact .mobile-paw-trail--masthead,
  .site-header.is-reader-compact + .section-nav .mobile-paw-trail--quick-index {
    display: none;
  }

  /* Translated brand names can use the complete centre lane. Preserve their
     reading room instead of forcing decoration into the text. */
  html:not([data-language="zh-Hant"]):not([data-language="zh-Hans"])
    .mobile-paw-trail--masthead {
    display: none;
  }

  .hero h1 {
    font-size: clamp(35px, 9.2vw, 40px) !important;
  }

  .hero-deck {
    margin-top: 29px !important;
    font-size: 15px !important;
    line-height: 1.86 !important;
  }

  html[data-language="en"] .hero h1,
  html[data-language="es"] .hero h1 {
    font-size: clamp(34px, 9vw, 39px) !important;
  }

  html[data-language="ja"] .hero h1 {
    font-size: clamp(34px, 8.9vw, 38.5px) !important;
  }

  html[data-language="ko"] .hero h1,
  html[data-language="vi"] .hero h1 {
    font-size: clamp(33px, 8.6vw, 37px) !important;
  }

  html[data-language="th"] .hero h1 {
    font-size: clamp(31px, 8.2vw, 35px) !important;
  }

  html[data-language="th"] .hero-deck {
    font-size: 14.75px !important;
    line-height: 1.92 !important;
  }
}

@keyframes mobile-paw-step-v122 {
  0%,
  9%,
  72%,
  100% {
    opacity: 0.07;
    transform: translateY(var(--paw-y)) rotate(var(--paw-angle)) scale(0.84);
  }

  18%,
  49% {
    opacity: 0.48;
    transform: translateY(var(--paw-y)) rotate(var(--paw-angle)) scale(1);
  }

  58% {
    opacity: 0.22;
    transform: translateY(var(--paw-y)) rotate(var(--paw-angle)) scale(0.93);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-paw-trail i {
    animation: none !important;
    opacity: 0.22;
    transform: translateY(var(--paw-y)) rotate(var(--paw-angle));
  }
}

/* 123 / Mobile reading-height redistribution ------------------------------
   Keep the full memorial image, but turn its available height into readable
   pauses between the argument's layers instead of one residual block below
   the CTA. The petition handoff also removes stacked bottom padding. */
@media (max-width: 720px) {
  .hero-copy {
    padding-top: clamp(56px, 8.3svh, 70px) !important;
  }

  .hero h1 {
    margin-top: clamp(28px, 4svh, 34px) !important;
  }

  .hero-deck {
    margin-top: clamp(36px, 5.4svh, 46px) !important;
  }

  .hero-tags {
    margin-top: clamp(32px, 5svh, 42px) !important;
  }

  .hero .primary-link {
    margin-top: clamp(58px, 7.6svh, 68px) !important;
  }

  html[data-language="zh-Hant"] .hero .primary-link,
  html[data-language="zh-Hans"] .hero .primary-link {
    margin-top: clamp(72px, 10.5svh, 88px) !important;
  }

  html[data-language="ja"] .hero .primary-link,
  html[data-language="ko"] .hero .primary-link,
  html[data-language="th"] .hero .primary-link {
    margin-top: clamp(64px, 8.4svh, 72px) !important;
  }

  .petition-grid {
    padding-bottom: 16px !important;
  }

  .petition-panel > .mobile-next-chapter {
    margin-top: 16px !important;
  }
}

/* 124 / One memorial paw + a complete walking trail + creator support -----
   The masthead carries one large, quiet paw rather than another footprint
   row. The lower trail now walks across the full unused lane toward the
   right-edge quick index. Creator support is reachable from both navigation
   systems without looking like a donation counter or a primary petition CTA. */
@media (min-width: 721px) {
  .desktop-nav {
    gap: clamp(10px, 1.05vw, 18px) !important;
  }
}

@media (max-width: 720px) {
  .mobile-paw-trail--masthead {
    top: 32px !important;
    left: 50% !important;
    width: clamp(48px, 13vw, 54px) !important;
    height: clamp(48px, 13vw, 54px) !important;
    justify-content: center !important;
    transform: translate(-50%, -50%) !important;
  }

  .mobile-paw-trail--masthead i {
    --paw-angle: -7deg;
    --paw-y: 0px;

    width: 100% !important;
    height: 100% !important;
    opacity: 0.08;
    filter: drop-shadow(0 0 14px rgb(230 179 76 / 22%));
    animation: masthead-paw-breathe-v124 8.2s ease-in-out infinite !important;
  }

  .mobile-paw-trail--quick-index {
    top: 8px !important;
    right: clamp(126px, 32vw, 144px) !important;
    left: clamp(22px, 7vw, 34px) !important;
    width: auto !important;
    height: 32px !important;
  }

  .mobile-paw-trail--quick-index i {
    width: clamp(9px, 2.9vw, 13px) !important;
    height: clamp(10px, 3.1vw, 14px) !important;
    animation: quick-index-paw-step-v124 9.8s ease-in-out infinite !important;
    animation-delay: calc(var(--paw-index) * .44s) !important;
  }

}

@keyframes masthead-paw-breathe-v124 {
  0%,
  100% {
    opacity: 0.055;
    transform: rotate(-7deg) scale(.91);
  }

  42% {
    opacity: .25;
    transform: rotate(-7deg) scale(1);
  }

  68% {
    opacity: .12;
    transform: rotate(-7deg) scale(.96);
  }
}

@keyframes quick-index-paw-step-v124 {
  0%,
  10%,
  62%,
  100% {
    opacity: .045;
    transform: translateY(var(--paw-y)) rotate(var(--paw-angle)) scale(.86);
  }

  18%,
  30% {
    opacity: .43;
    transform: translateY(var(--paw-y)) rotate(var(--paw-angle)) scale(1);
  }

  42% {
    opacity: .16;
    transform: translateY(var(--paw-y)) rotate(var(--paw-angle)) scale(.93);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-paw-trail--masthead i,
  .mobile-paw-trail--quick-index i {
    animation: none !important;
    opacity: .16;
  }
}

/* 125 / Verified four-dog memorial composition ---------------------------
   One mother and three puppies. Re-centre the three delayed heaven halos
   around the puppy group without changing the ritual timing. */
.ritual-heaven-puppy-halos i:nth-child(1) {
  top: 66.2%;
  left: 20.5%;
}

.ritual-heaven-puppy-halos i:nth-child(2) {
  top: 65.6%;
  left: 28%;
}

.ritual-heaven-puppy-halos i:nth-child(3) {
  top: 66.7%;
  left: 35.5%;
}

/* 129 / Hero choice study ------------------------------------------------
   Both mobile choices use purpose-built portrait artwork so the family
   version never loses puppies to a 3:2-to-portrait crop. */
@media (max-width: 720px) {
  html[data-hero-variant="family"] .hero .angel-frame > img,
  html[data-hero-variant="solo"] .hero .angel-frame > img,
  html[data-hero-variant="gathered"] .hero .angel-frame > img {
    object-position: center bottom !important;
    transform: scale(1) !important;
  }

  html[data-hero-variant="solo"] .hero .angel-frame > img {
    object-position: 54% bottom !important;
  }
}

@media (min-width: 721px) {
  html[data-hero-variant="solo"] .hero .angel-frame > img {
    object-position: 64% center !important;
    transform: scale(1.01) !important;
  }
}

/* 134 / Geometrically matched mode controls -----------------------------
   Responsive rules previously combined a 36px width with a 40px height.
   Lock both mode controls to the same square footprint so their 50% radius
   is a true circle at every breakpoint. */
.site-bgm-modes button {
  box-sizing: border-box !important;
  inline-size: 36px !important;
  min-inline-size: 36px !important;
  max-inline-size: 36px !important;
  block-size: 36px !important;
  min-block-size: 36px !important;
  max-block-size: 36px !important;
  flex: 0 0 36px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

/* 136 / Direct response and multilingual mobile fit ----------------------
   The longest numeric fact (06.30) needs a real gutter before its divider
   in every writing system. Mobile hero height follows its content so the
   CTA no longer leaves a language-dependent empty block below it. */
@media (max-width: 720px) {
  .fact-rail article {
    grid-template-columns: clamp(100px, 27vw, 108px) minmax(0, 1fr) !important;
  }

  .hero-inner,
  .hero-copy {
    min-height: auto !important;
  }

  html[data-language="th"] .hero-inner,
  html[data-language="th"] .hero-copy {
    min-height: auto !important;
  }

  .hero-copy {
    padding-bottom: clamp(28px, 5svh, 42px) !important;
  }
}

/* 137 / Mobile timeline centre axis --------------------------------------
   Dates and rail markers belong to each complete event row, not the first
   text line. Keep the alignment explicit so embedded mobile browsers cannot
   fall back to the earlier top-aligned rule. */
@media (max-width: 720px) {
  .timeline-list article {
    align-items: center !important;
  }

  .timeline-list time {
    align-self: center !important;
    margin-block: auto !important;
    padding-top: 0 !important;
  }

  .timeline-list article::before {
    top: calc(50% - 4px) !important;
  }
}

/* 143 / Immediate ritual feedback + readable BGM marquee -----------------
   Ring the bell in the click frame, keep touch focus from drawing a stray
   oval, and reveal long track titles with the familiar player marquee. */
.light-button::before {
  display: none !important;
  content: none !important;
}

.memorial-ritual.is-pressing .ritual-bell {
  transform: scale(.965);
}

.memorial-ritual.is-activating .ritual-bell {
  animation: ritual-bell-instant-feedback 480ms cubic-bezier(.2, .8, .2, 1);
  transform-origin: 50% 12%;
}

@keyframes ritual-bell-instant-feedback {
  0% {
    filter: brightness(1);
    transform: rotate(0deg) scale(.97);
  }

  24% {
    filter: brightness(1.25) drop-shadow(0 0 9px rgb(226 178 77 / 34%));
    transform: rotate(-4deg) scale(1.035);
  }

  52% {
    transform: rotate(3deg) scale(1.015);
  }

  76% {
    transform: rotate(-1.4deg) scale(1.005);
  }

  100% {
    filter: brightness(1);
    transform: rotate(0deg) scale(1);
  }
}

.site-bgm-picker {
  position: relative !important;
  overflow: hidden !important;
}

.site-bgm-track-window {
  position: absolute;
  z-index: 1;
  inset: 0 29px 0 12px;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--v73-cream);
  font-size: inherit;
  font-weight: 620;
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8px,
    #000 calc(100% - 10px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8px,
    #000 calc(100% - 10px),
    transparent 100%
  );
}

.site-bgm-track-sequence {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  transform: translateX(0);
  will-change: transform;
}

.site-bgm-track-text {
  display: block;
  width: max-content;
  min-width: max-content;
  padding-inline: 1px;
}

.site-bgm-track-text[aria-hidden="true"] {
  display: none;
}

.site-bgm-track-window.is-marquee .site-bgm-track-sequence {
  gap: var(--bgm-track-gap, 32px);
  animation: bgm-track-marquee var(--bgm-track-duration, 8s) linear infinite;
}

.site-bgm-track-window.is-marquee
  .site-bgm-track-text[aria-hidden="true"] {
  display: block;
}

.site-bgm-picker select {
  position: relative !important;
  z-index: 2 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.site-bgm-picker::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 10px;
  color: var(--v73-gold-soft);
  content: "⌄";
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-56%);
}

.site-bgm-picker:focus-within {
  outline: 2px solid var(--v73-gold-soft);
  outline-offset: 2px;
}

@keyframes bgm-track-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--bgm-track-cycle)));
  }
}

@media (pointer: coarse) {
  .light-button:focus,
  .light-button:focus-visible {
    outline: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-ritual.is-activating .ritual-bell {
    animation: none !important;
  }

  /* The track title is functional text, not decorative motion. Keep its
     slow, seamless reveal available in in-app browsers that report reduced
     motion, while the rest of the site's decorative motion stays disabled. */
  .site-bgm-track-window.is-marquee .site-bgm-track-sequence {
    animation-name: bgm-track-marquee !important;
    animation-duration: var(--bgm-track-duration, 8s) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
}

/* 146 / Multilingual ritual controls + centered mobile facts ------------- */
@media (max-width: 720px) {
  .ritual-theme-controls {
    width: min(calc(100% - 32px), 520px) !important;
  }

  .ritual-theme-random {
    flex: 0 0 clamp(82px, 23vw, 96px) !important;
  }

  .ritual-theme-picker {
    flex: 1 1 auto !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 12px !important;
  }

  .ritual-theme-picker > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ritual-theme-picker select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .fact-rail article {
    display: grid !important;
    align-items: stretch !important;
  }

  .fact-rail article > strong {
    display: grid;
    min-width: 0 !important;
    align-self: stretch;
    place-items: center;
    text-align: center;
  }

  .fact-rail article > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
  }

  /* Keep the transition after the prayer wall intentional, not a dark void.
     The prayer controls already end with their own quiet privacy note. */
  #memorial .memorial-ritual {
    padding-bottom: 24px !important;
  }

  #memorial > .mobile-next-chapter {
    margin-top: 16px !important;
  }
}

/* 157 / Keep multilingual "random" control on one line ------------------
   The mobile 82–96px width leaves Japanese ランダム only enough room for
   three glyphs beside the icon. Reserve a real text line and let the picker
   consume the remaining flexible width instead. */
@media (max-width: 720px) {
  .ritual-theme-random {
    display: inline-flex !important;
    flex: 0 0 clamp(108px, 30vw, 120px) !important;
    min-width: clamp(108px, 30vw, 120px) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .ritual-theme-random > span:last-child {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

/* 158 / Quiet bell coachmark ------------------------------------------------
   The first-action cue should read as a discreet temple plaque, not a second
   CTA.  The bell remains the visual focus while the instruction stays clear. */
.ritual-bell-coachmark {
  min-height: 36px;
  padding: 7px 13px 7px 11px;
  gap: 7px;
  border-color: rgb(232 188 99 / 34%);
  box-shadow:
    0 7px 20px rgb(0 0 0 / 30%),
    inset 0 1px rgb(255 234 182 / 6%);
  font-size: clamp(12px, .86vw, 13px);
  font-weight: 600;
  letter-spacing: .045em;
}

.ritual-bell-coachmark-arrow {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

.ritual-bell-coachmark-arrow svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.65;
}

@media (max-width: 720px) {
  .ritual-bell-coachmark {
    min-height: 32px;
    max-width: min(calc(100% - 40px), 284px);
    padding: 6px 11px 6px 9px;
    gap: 6px;
    font-size: clamp(11px, 3.1vw, 12.5px);
    letter-spacing: .025em;
  }

  .ritual-bell-coachmark-arrow {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .ritual-bell-coachmark-arrow svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.55;
  }
}

/* 159 / Creator support: a quiet, right-column utility ---------------------
   The payment path remains visibly secondary to the campaign record. */
@media (min-width: 981px) {
  .creator-support {
    padding-bottom: 24px !important;
  }

  .creator-support-meta {
    width: min(100%, 360px) !important;
    grid-column: 2 !important;
    align-self: start;
    justify-self: end !important;
    margin-top: 0 !important;
  }
}