@font-face {
  font-family: "Equity A";
  src: url("/fonts/equity/woff2/equity-a/equity_a_regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
}

@font-face {
  font-family: "Equity A";
  src: url("/fonts/equity/woff2/equity-a/equity_a_italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
}

@font-face {
  font-family: "Equity A";
  src: url("/fonts/equity/woff2/equity-a/equity_a_bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
}

@font-face {
  font-family: "Equity A";
  src: url("/fonts/equity/woff2/equity-a/equity_a_bold_italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: fallback;
}

/* ============================================
   ACIM Atlas — Theme Variables
   ============================================ */
:root{
  /* Foundation */
  --bg: #fbf7ef;
  --panel: #fffdf8;
  --ink: #1f2328;
  --ink-secondary: rgba(31,35,40,0.78);
  --muted: #5c6670;
  --soft-ink: rgba(31,35,40,0.92);
  --border: rgba(35, 38, 42, 0.14);
  --shadow: 0 6px 18px rgba(17, 20, 24, 0.08);
  --subtle-shadow: 0 1px 0 rgba(0,0,0,0.04);

  /* Surfaces */
  --surface-card: rgba(255,253,248,0.92);
  --surface-card-border: rgba(31,35,40,0.12);
  --surface-panel: rgba(255,253,248,0.80);
  --surface-panel-alt: rgba(255,253,248,0.74);
  --surface-panel-strong: rgba(255,253,248,0.72);
  --surface: #fffdf8;
  --surface-solid: #fffdf8;
  --surface-inset: rgba(31,35,40,0.03);
  --surface-inset-border: rgba(31,35,40,0.08);
  --chart-surface: #fffdf8;
  --tooltip-surface: #fffdf8;
  --modal-surface: #fffdf8;
  --modal-scrim: rgba(8, 21, 34, 0.62);

  /* Neutral overlays */
  --overlay-faint: rgba(31,35,40,0.02);
  --overlay-subtle: rgba(31,35,40,0.04);
  --overlay-light: rgba(31,35,40,0.10);
  --overlay-mid: rgba(31,35,40,0.14);
  --overlay-strong: rgba(31,35,40,0.22);
  --overlay-heavy: rgba(31,35,40,0.35);
  --overlay-dashed: rgba(31,35,40,0.16);
  --overlay-flag: rgba(31,35,40,0.88);
  --track-bg: rgba(0,0,0,0.06);

  /* Blue system */
  --blue-wash: rgba(74,152,232,0.08);
  --blue-light: rgba(43,108,176,0.14);
  --blue-border: rgba(43,108,176,0.25);
  --blue-border-strong: rgba(43,108,176,0.5);
  --blue-solid: rgba(43,108,176,0.68);
  --amber: #C48B2C;
  --amber-light: #FDF4E3;
  --blue-band-low: rgba(43,108,176,0.3);
  --blue-band-mid: rgba(43,108,176,0.5);
  --blue-band-high: rgba(43,108,176,0.72);
  --blue-glow: rgba(43,108,176,0.15);
  --blue-callout-border: rgba(43,108,176,0.16);
  --blue-callout-accent: rgba(43,108,176,0.55);
  --audio-highlight: rgba(255, 225, 92, 0.72);

  /* Semantic trail colors */
  --seed-dot: rgba(56,161,161,0.82);
  --seed-bg: rgba(56,161,161,0.15);
  --seed-text: rgba(40,130,130,0.95);
  --seed-border: rgba(56,161,161,0.3);

  --milestone-dot: rgba(183,121,31,0.78);
  --milestone-halo-inner: rgba(183,121,31,0.35);
  --milestone-halo-outer: rgba(183,121,31,0.15);
  --milestone-bg: rgba(183,121,31,0.12);
  --milestone-text: rgba(160,100,20,0.95);
  --milestone-border: rgba(183,121,31,0.3);

  --zenith-dot: rgba(126,58,183,0.82);
  --zenith-bg: rgba(126,58,183,0.12);
  --zenith-text: rgba(110,45,165,0.95);
  --zenith-border: rgba(126,58,183,0.3);

  --inactive-dot: rgba(154,163,173,0.3);

  /* Tier badge colors — C6 Scarlet to Ghost */
  --tier-primary-text: #8e1418;
  --tier-primary-bg: rgba(195,35,45,0.20);
  --tier-primary-border: rgba(195,35,45,0.44);
  --tier-pillar-text: #862a2c;
  --tier-pillar-bg: rgba(175,60,62,0.13);
  --tier-pillar-border: rgba(175,60,62,0.30);
  --tier-supporting-text: #724440;
  --tier-supporting-bg: rgba(148,88,85,0.09);
  --tier-supporting-border: rgba(148,88,85,0.22);
  --tier-minor-text: #6a5c58;
  --tier-minor-bg: rgba(130,112,108,0.06);
  --tier-minor-border: rgba(130,112,108,0.15);
  --tier-echo-text: #908886;
  --tier-echo-bg: rgba(145,140,138,0.03);
  --tier-echo-border: rgba(145,140,138,0.10);

  /* Link accent */
  --teal: #2b7a78;

  /* Practice callout */
  --practice-bg: rgba(47,133,90,0.06);
  --practice-border: rgba(47,133,90,0.16);
  --practice-accent: rgba(47,133,90,0.55);

  /* Misc */
  --snippet-color: rgba(92,102,112,0.92);
  --placeholder-color: rgba(92,102,112,0.78);
  --segmented-active-bg: rgba(255,253,248,0.95);

  /* Fonts */
  --serif: 'Equity A', Georgia, 'Times New Roman', Times, serif;
  --sans: 'Dixie', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';

  --radius: 14px;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"]{
  color-scheme: dark;
  --bg: #141618;
  --panel: #1c1e22;
  --ink: #e2e4e8;
  --ink-secondary: rgba(226,228,232,0.82);
  --muted: #8b929c;
  --soft-ink: rgba(226,228,232,0.88);
  --border: rgba(220,225,230,0.12);
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  --subtle-shadow: 0 1px 0 rgba(0,0,0,0.15);

  --surface-card: rgba(28,30,34,0.92);
  --surface-card-border: rgba(220,225,230,0.10);
  --surface-panel: rgba(28,30,34,0.80);
  --surface-panel-alt: rgba(28,30,34,0.74);
  --surface-panel-strong: rgba(28,30,34,0.72);
  --surface: #1c1e22;
  --surface-solid: #1c1e22;
  --surface-inset: rgba(220,225,230,0.04);
  --surface-inset-border: rgba(220,225,230,0.08);
  --chart-surface: #1c1e22;
  --tooltip-surface: #1e2024;
  --modal-surface: #1c1e22;
  --modal-scrim: rgba(5, 11, 18, 0.76);

  --overlay-faint: rgba(220,225,230,0.02);
  --overlay-subtle: rgba(220,225,230,0.04);
  --overlay-light: rgba(220,225,230,0.08);
  --overlay-mid: rgba(220,225,230,0.12);
  --overlay-strong: rgba(220,225,230,0.18);
  --overlay-heavy: rgba(220,225,230,0.30);
  --overlay-dashed: rgba(220,225,230,0.14);
  --overlay-flag: rgba(226,228,232,0.85);
  --track-bg: rgba(255,255,255,0.08);

  --blue-wash: rgba(88,162,240,0.12);
  --blue-light: rgba(80,140,210,0.18);
  --blue-border: rgba(80,140,210,0.30);
  --blue-border-strong: rgba(80,140,210,0.55);
  --blue-solid: rgba(90,150,220,0.75);
  --amber: #D4A24A;
  --amber-light: rgba(180,130,50,0.10);
  --blue-band-low: rgba(80,140,210,0.35);
  --blue-band-mid: rgba(80,140,210,0.55);
  --blue-band-high: rgba(80,140,210,0.78);
  --blue-glow: rgba(80,140,210,0.20);
  --blue-callout-border: rgba(80,140,210,0.20);
  --blue-callout-accent: rgba(80,140,210,0.60);
  --audio-highlight: rgba(212, 162, 74, 0.24);

  --seed-dot: rgba(72,190,190,0.85);
  --seed-bg: rgba(72,190,190,0.12);
  --seed-text: rgba(90,210,210,0.95);
  --seed-border: rgba(72,190,190,0.30);

  --milestone-dot: rgba(210,150,50,0.82);
  --milestone-halo-inner: rgba(210,150,50,0.40);
  --milestone-halo-outer: rgba(210,150,50,0.18);
  --milestone-bg: rgba(210,150,50,0.12);
  --milestone-text: rgba(230,170,60,0.95);
  --milestone-border: rgba(210,150,50,0.30);

  --zenith-dot: rgba(160,90,220,0.85);
  --zenith-bg: rgba(160,90,220,0.12);
  --zenith-text: rgba(180,110,240,0.95);
  --zenith-border: rgba(160,90,220,0.30);

  --inactive-dot: rgba(154,163,173,0.25);

  /* Tier badge colors — C6 dark mode */
  --tier-primary-text: #e8706a;
  --tier-primary-bg: rgba(220,75,70,0.14);
  --tier-primary-border: rgba(220,75,70,0.35);
  --tier-pillar-text: #d09088;
  --tier-pillar-bg: rgba(200,100,95,0.11);
  --tier-pillar-border: rgba(200,100,95,0.28);
  --tier-supporting-text: #b8a098;
  --tier-supporting-bg: rgba(175,120,112,0.08);
  --tier-supporting-border: rgba(175,120,112,0.22);
  --tier-minor-text: #9a908c;
  --tier-minor-bg: rgba(155,135,130,0.06);
  --tier-minor-border: rgba(155,135,130,0.16);
  --tier-echo-text: #807a78;
  --tier-echo-bg: rgba(150,142,140,0.04);
  --tier-echo-border: rgba(150,142,140,0.10);

  --practice-bg: rgba(70,160,110,0.08);
  --practice-border: rgba(70,160,110,0.18);
  --practice-accent: rgba(70,160,110,0.55);

  --snippet-color: rgba(160,170,180,0.88);
  --placeholder-color: rgba(140,150,160,0.72);
  --segmented-active-bg: rgba(28,30,34,0.90);
}

/* ============================================
   BASE
   ============================================ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color:var(--ink);
  font-family: var(--sans);
  line-height:1.45;
}

.page{
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 18px 40px;
}

.devSiteBanner{
  position: relative;
  z-index: 120;
  height: 10px;
  background:
    repeating-linear-gradient(
      -45deg,
      #d5a13b 0 16px,
      #2a2f35 16px 32px
    );
}

/* ============================================
   NAVIGATION
   ============================================ */
.topbar{
  margin-bottom: 0;
}
.topbar__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 18px;
}
.topbar__nav-bar {
  background: var(--overlay-subtle);
  border-bottom: 1px solid var(--border);
}
.topbar__context-bar {
  background: var(--surface-panel);
  border-bottom: 1px solid var(--border);
}

.nav-tabs {
  display: flex;
  gap: 0;
  border-bottom: none;
  align-items: baseline;
}
.nav-tab {
  font-size: 13px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
}
.nav-tab:hover { color: var(--ink); }
.nav-tab--active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
.nav-tab--brand {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-right: 8px;
  letter-spacing: -0.01em;
}
.nav-tab--brand .brand-light {
  font-weight: 400;
}
.nav-tab:first-child {
  padding-left: 0;
}

.breadcrumb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: var(--ink); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--ink); font-weight: 500; }
.select-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.select-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.select{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 220px;
  max-width: 100%;
  box-shadow: var(--subtle-shadow);
  font-family: var(--sans);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.sectionSelect--enhanced {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sectionSelectCustom {
  position: relative;
  min-width: 220px;
}
.sectionSelectCustom__trigger {
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 34px 8px 10px;
  min-width: 220px;
  box-shadow: var(--subtle-shadow);
  font-family: var(--sans);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
  position: relative;
}
.sectionSelectCustom__trigger::after {
  content: '▾';
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 11px;
  pointer-events: none;
}
.sectionSelectCustom__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(max(100%, 400px), calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(68vh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 140;
  background: var(--surface-solid);
  border: 1px solid var(--surface-card-border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34), var(--shadow);
  padding: 8px;
}
.sectionSelectCustom__group + .sectionSelectCustom__group {
  margin-top: 6px;
}
.sectionSelectCustom__groupLabel {
  padding: 6px 10px 4px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.sectionSelectCustom__groupLabel--linked {
  display: block;
  text-decoration: none;
  color: var(--muted);
  border-radius: 6px;
}
.sectionSelectCustom__groupLabel--linked:hover {
  color: var(--ink);
  background: var(--overlay-subtle);
}
/* On a chapter page the chapter's heading is the current entry, styled like a
   selected section. */
.sectionSelectCustom__groupLabel--linked.is-selected {
  background: var(--blue-wash);
  color: var(--blue-solid);
}
.sectionSelectCustom__option {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 3.4ch minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  text-align: left;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}
.sectionSelectCustom__option:hover,
.sectionSelectCustom__option:focus-visible {
  outline: none;
  background: var(--overlay-subtle);
}
.sectionSelectCustom__option.is-selected {
  background: var(--blue-wash);
  color: var(--blue-solid);
}
.sectionSelectCustom__prefix {
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.sectionSelectCustom__option.is-selected .sectionSelectCustom__prefix {
  color: color-mix(in srgb, var(--blue-solid) 80%, var(--muted));
}
.sectionSelectCustom__title {
  min-width: 0;
  overflow-wrap: anywhere;
}
.sectionSelectCustom__option--flush {
  grid-template-columns: minmax(0, 1fr);
}

/* Theme toggle */
.theme-btn {
  appearance: none;
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s;
  margin: 0 0 -1px 6px;
  flex-shrink: 0;
  align-self: center;
}
.theme-btn:hover { color: var(--ink); }
.theme-btn__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.theme-btn__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ============================================
   CONTROLS
   ============================================ */
.toggles{ display:flex; gap:10px; align-items:center; }
.toggles__hint{ font-size: 12px; color: var(--muted); }
.toggle{ display:flex; gap:8px; align-items:center; font-size: 13px; color: var(--muted); user-select:none; }

.btn{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  cursor:pointer;
}
.btn:hover{ box-shadow: var(--shadow); }

/* ============================================
   MOTIF HEADER
   ============================================ */
.motifHeader{
  background: var(--blue-wash);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--subtle-shadow);
  margin-bottom: 12px;
  position: relative;
}

.motifHeader__name{ margin:0; font-family: var(--serif); font-size: 36px; font-weight: 500; }
.motifHeader__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.motifHeader__meta { margin-top: 8px; display: grid; gap: 14px; }
.motifHeader__metaRow { display: grid; grid-template-columns: 94px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.motifHeader__textLabel { margin: 0; padding-top: 1px; }
.motifHeader__def,
.motifHeader__brief{ margin:0; color:var(--soft-ink); font-family: var(--serif); font-size: 16px; line-height: 1.5; }
.motifHeader__defGroup { display: block; }
.motifHeader__labelToggle {
  display: inline;
  margin-left: 0.35em;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--soft-ink);
  opacity: 0.7;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
  vertical-align: baseline;
  white-space: nowrap;
  transition: opacity 140ms ease, color 140ms ease;
}
.motifHeader__labelToggle:hover,
.motifHeader__labelToggle:focus-visible {
  opacity: 1;
  color: var(--ink);
}
.motifHeader .motifProfile { margin-top: 18px; }

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.motifHeader .header-actions--hero {
  position: static;
  justify-content: flex-end;
  flex: 0 0 auto;
  max-width: none;
}

.motifHeader--compact {
  margin-bottom: 12px;
}

.subpage-header .header-actions--hero {
  position: static;
  justify-content: flex-end;
  max-width: none;
}

.header-action-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 58%, transparent);
  background: color-mix(in srgb, var(--surface-card) 92%, var(--blue-wash));
  transition: border-color .15s, color .15s, background .15s;
}

.header-action-link:hover {
  color: var(--ink);
  border-color: var(--blue-border-strong);
  background: color-mix(in srgb, var(--blue-wash) 85%, var(--surface-card));
}

.header-action-link--guide {
  color: var(--blue-solid);
  font-weight: 600;
}

.header-action-link--journey {
  color: var(--blue-solid);
  font-weight: 600;
}
.header-action-link--practice {
  color: var(--blue-solid);
  font-weight: 600;
}


.header-action-link__label-short {
  display: none;
}

.motifHeader__actions {
  margin: 0;
}

@media (max-width: 900px) {
  .motifHeader__top {
    flex-direction: column;
    gap: 10px;
  }
  .motifHeader__name {
    line-height: 1.06;
  }
  .motifHeader .header-actions--hero {
    margin-top: 0;
    margin-bottom: 0;
    justify-content: flex-start;
    align-self: flex-start;
  }
  .subpage-header .header-actions--hero {
    margin-top: 0;
    margin-bottom: 0;
    justify-content: flex-start;
    align-self: flex-start;
  }
  .header-action-link {
    padding: 5px 10px;
    font-size: 12px;
  }
  .motifHeader__meta {
    margin-top: 14px;
  }
  .motifHeader__metaRow {
    grid-template-columns: 94px minmax(0, 1fr);
    column-gap: 8px;
  }
}

@media (max-width: 640px) {
  .motifHeader__meta {
    gap: 12px;
  }
  .motifHeader__metaRow {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .motifHeader__textLabel {
    padding-top: 0;
  }
}

/* ---- Motif Profile (category + role cards + donuts) ---- */
.motif-profile { display: flex; gap: 24px; flex-wrap: wrap; }
.motif-profile__left {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  container-type: inline-size;
  container-name: motif-profile-left;
}
.motif-profile__right { display: flex; flex-direction: column; gap: 12px; justify-content: center; }

/* Badge grid: stacks by default; side-by-side once the left column has room */
.motif-profile__badges {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@container motif-profile-left (min-width: 520px) {
  .motif-profile__badges--paired {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.profile-badge {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 14px;
  border-radius: 12px;
  background: var(--blue-light);
  border: 1px solid var(--blue-border-strong);
}
.profile-badge__eyebrow {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--sans);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
}
.profile-badge__name {
  font-size: 15px;
  font-weight: 600;
  font-family: var(--sans);
  line-height: 1.25;
}
.profile-badge__desc {
  font-size: 13px;
  color: var(--muted);
  font-family: var(--sans);
  line-height: 1.4;
  margin-top: 3px;
}

/* Legacy: kept for archived prototypes that still reference .role-badge */
.role-badge {
  display: flex; gap: 14px; padding: 14px 18px; align-items: center;
  border-radius: 12px; background: var(--blue-light); border: 1px solid var(--blue-border-strong);
}
.role-badge__name { font-size: 15px; font-weight: 600; font-family: var(--sans); }
.role-badge__desc { font-size: 13px; color: var(--muted); margin-top: 1px; font-family: var(--sans); }

.band-rows { display: flex; flex-direction: column; gap: 10px; }
.band-row { display: flex; align-items: center; gap: 10px; }
.band-label { font-size: 13px; font-family: var(--sans); color: var(--muted); width: 145px; white-space: nowrap; }
.band-meter { display: flex; gap: 3px; }
.band-seg { width: 32px; height: 10px; border-radius: 2px; background: var(--track-bg); }
.band-seg--on.low { background: var(--blue-band-low); }
.band-seg--on.mid { background: var(--blue-band-mid); }
.band-seg--on.high { background: var(--blue-band-high); }
.band-value { font-size: 13px; font-family: var(--sans); font-weight: 600; width: 36px; }
.band-desc { font-size: 13px; font-family: var(--sans); color: var(--muted); }

.donut-row { display: flex; gap: 16px; align-items: center; }
.donut { position: relative; flex-shrink: 0; }
.donut svg { display: block; transform: rotate(-90deg); }
.donut-track { stroke: var(--track-bg); }
.donut-fill { stroke: var(--blue-solid); }
.donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut__val { font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1; }
.donut__sub { font-size: 10px; font-family: var(--sans); color: var(--muted); margin-top: 1px; }
.donut-text__title { font-size: 13px; font-weight: 600; }
.donut-text__sub { font-size: 13px; color: var(--muted); font-family: var(--sans); }

.statsBar{ margin-top: 10px; }

/* ============================================
   DEPTH GEAR
   ============================================ */
.depthGear{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
  padding: 10px 18px 9px;
  margin: 20px 0 6px;
  border-radius: var(--radius);
  background: var(--surface-panel-alt);
  border: 1px solid var(--border);
}
.depthGear__label{
  font-size: 13px;
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.depthGear__spacer{ flex: 1 1 auto; }
.depthGear__tools{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }

.segmented{
  display:inline-flex;
  border: 1px solid var(--overlay-mid);
  border-radius: 999px;
  overflow:hidden;
  background: var(--overlay-subtle);
}
.segmented__btn{
  appearance:none;
  border: 0;
  background: transparent;
  padding: 7px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  cursor:pointer;
}
.segmented__btn:hover{ background: var(--overlay-subtle); color: var(--ink); }
.segmented__btn.is-active{
  background: var(--segmented-active-bg);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.segmented__btn:focus-visible{
  outline: 2px solid var(--blue-solid);
  outline-offset: -2px;
}

/* ============================================
   TIER FILTER CHIPS
   ============================================
   The dot is the state: solid in the tier's text color when the tier is
   shown, a hollow ring when it's hidden. */
.tierChips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tierChips__label {
  font-size: 13px; color: var(--muted); font-family: var(--sans);
  font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  margin-right: 2px;
}
.tierChip {
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 9px;
  min-height: 30px;
  border-radius: 999px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}
.tierChip__dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  transition: transform 0.15s;
}
.tierChip--primary { background: var(--tier-primary-bg); color: var(--tier-primary-text); border: 1px solid var(--tier-primary-border); }
.tierChip--primary .tierChip__dot { background: var(--tier-primary-text); }
.tierChip--pillar { background: var(--tier-pillar-bg); color: var(--tier-pillar-text); border: 1px solid var(--tier-pillar-border); }
.tierChip--pillar .tierChip__dot { background: var(--tier-pillar-text); }
.tierChip--supporting { background: var(--tier-supporting-bg); color: var(--tier-supporting-text); border: 1px solid var(--tier-supporting-border); }
.tierChip--supporting .tierChip__dot { background: var(--tier-supporting-text); }
.tierChip--minor { background: var(--tier-minor-bg); color: var(--tier-minor-text); border: 1px solid var(--tier-minor-border); }
.tierChip--minor .tierChip__dot { background: var(--tier-minor-text); }
.tierChip--echo { background: var(--tier-echo-bg); color: var(--tier-echo-text); border: 1px solid color-mix(in srgb, var(--tier-echo-text) 40%, transparent); }
.tierChip--echo .tierChip__dot { background: var(--tier-echo-text); }

.tierChip.is-off {
  background: transparent;
  color: var(--muted);
  border-color: var(--overlay-light);
  opacity: 0.58;
}
/* On: a solid dot in the tier's own text color. Off: a hollow ring, so the
   state reads by shape as well as color (Echo's colors are too pale to carry it). */
.tierChip.is-off .tierChip__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.tierChip:hover { opacity: 1; }
.tierChip:not(.is-off):hover {
  transform: translateY(-1px);
  box-shadow: var(--subtle-shadow);
}
.tierChip.is-off:hover { opacity: 0.78; }
.tierChip:focus-visible{
  outline: 2px solid var(--blue-solid);
  outline-offset: 2px;
}
.tierChip__count {
  font-weight: 500; opacity: 0.82; font-size: 11px; margin-left: 1px;
}

/* ============================================
   PIN KEY MOMENTS TOGGLE
   ============================================ */
.pin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 8px 16px 10px;
  margin-top: 8px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-panel-alt);
  box-shadow: var(--subtle-shadow);
}
.pin-toggle__track {
  width: 32px; height: 18px; border-radius: 999px;
  background: var(--overlay-light); position: relative;
  transition: background 0.2s; flex-shrink: 0;
}
.pin-toggle__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.pin-toggle.is-on .pin-toggle__track {
  background: var(--milestone-dot);
}
.pin-toggle.is-on .pin-toggle__thumb {
  transform: translateX(14px);
}
.pin-toggle__label {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.2px; text-transform: uppercase;
}
.pin-toggle__hint {
  font-family: var(--sans); font-size: 13px;
  color: var(--muted); margin-left: 2px;
}
.depthGear + .pin-toggle {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  row-gap: 4px;
  margin-top: -6px;
  margin-bottom: 14px;
  padding: 8px 18px 10px;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface-panel-alt);
}
@media (max-width: 640px) {
  .depthGear {
    gap: 10px;
    padding: 10px 12px 9px;
  }
  .depthGear__label,
  .tierChips__label {
    font-size: 12px;
  }
  .segmented__btn {
    min-height: 34px;
    padding: 8px 11px;
  }
  .tierChip {
    min-height: 34px;
    padding: 6px 12px 6px 10px;
  }
  .pin-toggle {
    padding: 8px 12px 10px;
  }
  .depthGear + .pin-toggle {
    padding: 8px 12px 10px;
  }
  .pin-toggle__hint {
    width: 100%;
    margin-left: 40px;
    font-size: 12px;
  }
}

/* Filtered-out empty state */
.filtered-empty {
  padding: 32px;
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  text-align: center;
  display: none;
  margin-top: 14px;
}
.filtered-empty.is-visible { display: block; }
.filtered-empty__title {
  font-family: var(--serif); font-size: 16px;
  color: var(--soft-ink); margin: 0 0 8px;
}
.filtered-empty__hint {
  font-family: var(--sans); font-size: 13px;
  color: var(--muted); margin: 0;
}

/* Key moment card accent (seed, milestone, zenith) */
.stop[data-key-moment="1"] {
  border-left: 2.5px solid var(--milestone-dot);
}

/* ============================================
   SECTION CARD LINKS
   ============================================ */
.stop__title-link { color: var(--ink); border-bottom: 1px solid var(--border); text-decoration: none; padding-bottom: 1px; transition: border-color 0.15s; }
.stop__title-link:hover { border-color: var(--ink); }
.stop__title-link .stopRef { }

.stop__source { margin-top: 11px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* Full Trail cards: "Read full section" and "Highlight source" each get their own line. */
.stop__source--stacked { flex-direction: column; align-items: flex-start; }
.stop__source-link { font-size: 12px; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s; font-family: var(--sans); letter-spacing: 0.01em; }
.stop__source-link:hover { color: var(--ink); text-decoration: underline; }
/* Multi-page evidence wrapper. Surrounding text ("Highlight source paragraphs
   ... at acim.org") inherits the source-link typography; each paragraph link
   inside is styled as a small chip so it's obvious which parts are clickable. */
.stop__source-links { font-size: 12px; color: var(--muted); font-family: var(--sans); letter-spacing: 0.01em; }
.stop__source-links a.stop__source-link {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.15);
  color: var(--muted);
  text-decoration: none;
  gap: 0;
  transition: background 0.15s, color 0.15s;
}
.stop__source-links a.stop__source-link:hover {
  background: rgba(128, 128, 128, 0.28);
  color: var(--ink);
  text-decoration: none;
}

/* ============================================
   HEADINGS
   ============================================ */
.h2{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 10px 0 10px;
  padding-left: 18px;
}
.h2--inset{ padding-left: 0; }

/* ============================================
   CHAPTER TRAIL
   ============================================ */
/* Title row: h2 on the left, moments legend on the right, bottom-aligned.
   On mobile the legend wraps below the heading and centers. */
.trail__titleRow{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 14px;
  margin: 0;
  padding: 0;
}
/* The heading inside the title row drops its own bottom margin
   so the row's margin-bottom controls spacing (matches Journey). */
.trail__heading{
  margin-bottom: 0;
  margin-top: 0;
}
@media (max-width: 760px) {
  body[data-page-type="motif-trail"] .trail__titleRow {
    padding-left: 18px;
    padding-right: 18px;
  }

  body[data-page-type="section-motifs"] .subpage-heading,
  body[data-page-type="section-contents"] .subpage-heading,
  body[data-page-type="section-paragraphs"] .paragraphs__titleRow,
  body[data-page-type="motif-sections"] .paragraphs__titleRow,
  body[data-page-type="chapter-motifs"] .paragraphs__titleRow,
  body[data-page-type="motif-contents"] .subpage-heading,
  body[data-page-type="motif-contents"] .motif-contents > .contents-controls,
  body[data-page-type="section-contents"] .section-contents > .contents-controls {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (max-width: 640px) {
  .trail__titleRow{ flex-wrap: wrap; gap: 0; }
  .trail__heading{ width: 100%; text-align: center; margin-bottom: 0; }
  .trail__titleRow .trail__legendRow{ width: 100%; justify-content: center; margin-top: -10px; }
}
.trail__sticky{
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  padding: 0;
  margin-bottom: 4px;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.trail__sticky.is-stuck {
  background: transparent;
}
.trailSticky__ctx-row {
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 3px;
}
.trail__sticky.is-stuck .trailSticky__ctx-row {
  display: flex;
}
.trailSticky__up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
}
.trailSticky__up:hover {
  background: var(--blue-wash);
  border-color: var(--blue-border);
  color: var(--ink);
}
.trailSticky__ctx {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.trailSticky__ctx-title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trail__hint{ color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .trail__sticky.is-stuck .trailSticky__ctx-row {
    gap: 6px;
    margin-bottom: 4px;
  }
  .trail__sticky.is-stuck .trailSticky__ctx-title {
    font-size: 13px;
  }
  .trail__sticky.is-stuck .trailSticky__up {
    width: 24px;
    height: 24px;
  }
}

.trail__legendRow{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
.legend__label{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  min-width: 62px;
}
.legend__item{
  display: flex;
  align-items: center;
  gap: 5px;
}
.legend__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.legend__dot--active{ background: var(--blue-solid); }
.legend__dot--seed{ background: var(--seed-dot); }
.legend__dot--milestone{ background: var(--milestone-dot); box-shadow: 0 0 0 3px var(--milestone-halo-inner), 0 0 0 5px var(--milestone-halo-outer); }
.legend__dot--zenith{ background: var(--zenith-dot); }
.legend__dot--inactive{ background: var(--inactive-dot); }
.legend__stripe{
  display: inline-block; width: 18px; height: 10px; border-radius: 3px;
}
.details__titleRow{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}
@media (max-width: 640px) {
  .details__titleRow{ flex-direction: column-reverse; align-items: stretch; }
  .details__titleRow .trail__legendRow{ justify-content: center; }
}

.trailMap{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding: 7px 8px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  scrollbar-color: var(--border) transparent;
}
.trailMap::-webkit-scrollbar{ height: 6px; }
.trailMap::-webkit-scrollbar-track{ background: transparent; }
.trailMap::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px; }

.trailMap-shell{
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--subtle-shadow);
  padding: 10px 10px 3px;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.trailMap-shell__edge{
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 40px;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.trailMap-shell__edge--left{
  left: 1px;
  justify-content: flex-start;
  padding-left: 4px;
  background: linear-gradient(
    90deg,
    var(--surface-panel-strong) 22%,
    color-mix(in srgb, var(--surface-panel-strong) 94%, transparent) 60%,
    color-mix(in srgb, var(--surface-panel-strong) 0%, transparent) 100%
  );
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.trailMap-shell__edge--right{
  right: 1px;
  justify-content: flex-end;
  padding-right: 4px;
  background: linear-gradient(
    270deg,
    var(--surface-panel-strong) 22%,
    color-mix(in srgb, var(--surface-panel-strong) 94%, transparent) 60%,
    color-mix(in srgb, var(--surface-panel-strong) 0%, transparent) 100%
  );
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.trailMap-shell__chevron{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted) 22%);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.trailMap-shell.is-overflow-left .trailMap-shell__edge--left,
.trailMap-shell.is-overflow-right .trailMap-shell__edge--right{
  opacity: 1;
}

.marker{
  position:relative;
  flex: 0 0 auto;
  width: 107px;
  padding: 10px 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--overlay-light);
  background: var(--overlay-faint);
  cursor:pointer;
  overflow: hidden;
}
.marker:hover{ box-shadow: var(--shadow); }
.marker--active{ background: var(--blue-wash); border-color: var(--blue-border); }
.marker--current{ background: var(--blue-band-low); border-color: var(--blue-solid); box-shadow: 0 0 0 1px var(--blue-solid); }
.marker--inactive{ opacity: 0.55; }
.marker__top{ display:flex; justify-content:space-between; align-items:center; gap: 8px; }
.marker__num{ font-weight:700; font-size: 13px; color: var(--muted); }
.marker__dot{
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--overlay-strong);
  margin-right: 2px;
}
.marker--active .marker__dot{ background: var(--blue-solid); }
.marker--seed .marker__dot{ background: var(--seed-dot); }
.marker--zenith .marker__dot{ background: var(--zenith-dot); }
.marker--milestone .marker__dot{ box-shadow: 0 0 0 3px var(--milestone-halo-inner), 0 0 0 5px var(--milestone-halo-outer); }
.marker__title{ margin-top: 6px; font-size: 13px; color: var(--ink); line-height:1.25; }
.marker__meta{ margin-top: 6px; color: var(--muted); font-size: 13px; display:flex; gap: 8px; flex-wrap:wrap; }

.marker--echo-only{ background: var(--overlay-faint); border-color: var(--overlay-light); border-style: dashed; cursor: default; opacity: 0.50; }
.marker--echo-only:hover{ box-shadow: none; }
.marker--echo-only .marker__dot{ background: var(--blue-solid); box-shadow: none; }
.marker--echo-only .marker__meta{ font-style: italic; }
.marker__stripe{
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 10px;
}

@media (max-width: 768px) {
  .trailMap{
    gap: 12px;
    padding: 12px 10px 15px;
  }
  .trailMap-shell__edge{
    width: 46px;
  }
  .trailMap .marker{
    width: 107px;
  }
}

/* Compact sticky trail map on smaller screens: number + dot pills,
   matching the compact stuck motif nav on section pages */
@media (max-width: 900px) {
  .trail__sticky.is-stuck .trailMap-shell{
    padding: 8px 10px;
  }
  .trail__sticky.is-stuck .trailMap{
    gap: 6px;
    padding: 0 0 1px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .trail__sticky.is-stuck .trailMap::-webkit-scrollbar{
    display: none;
  }
  /* Anchor the edge fades to the pill row so the chevrons center on it,
     not on the whole bar with its context row */
  .trail__sticky.is-stuck .trailMap-shell__row{
    position: relative;
  }
  .trail__sticky.is-stuck .trailMap-shell__edge{
    top: 0;
    bottom: 0;
    width: 34px;
  }
  .trail__sticky.is-stuck .trailMap-shell__edge--left{
    left: 0;
    padding-left: 2px;
    border-radius: 0;
    background: linear-gradient(
      90deg,
      var(--surface-card) 18%,
      color-mix(in srgb, var(--surface-card) 94%, transparent) 58%,
      color-mix(in srgb, var(--surface-card) 0%, transparent) 100%
    );
  }
  .trail__sticky.is-stuck .trailMap-shell__edge--right{
    right: 0;
    padding-right: 2px;
    border-radius: 0;
    background: linear-gradient(
      270deg,
      var(--surface-card) 18%,
      color-mix(in srgb, var(--surface-card) 94%, transparent) 58%,
      color-mix(in srgb, var(--surface-card) 0%, transparent) 100%
    );
  }
  .trail__sticky.is-stuck .trailMap .marker{
    width: auto;
    padding: 7px 12px;
    border-radius: 999px;
  }
  .trail__sticky.is-stuck .marker__top{
    gap: 10px;
  }
  .trail__sticky.is-stuck .marker__num{
    font-size: 13px;
  }
  .trail__sticky.is-stuck .marker__dot{
    width: 10px;
    height: 10px;
    margin-right: 0;
  }
  .trail__sticky.is-stuck .marker--milestone .marker__dot{
    box-shadow: 0 0 0 2px var(--milestone-halo-inner), 0 0 0 3px var(--milestone-halo-outer);
  }
  .trail__sticky.is-stuck .marker__title,
  .trail__sticky.is-stuck .marker__meta{
    display: none;
  }
  /* Ring drawn inside the pill so the scrolling row can't clip it */
  .trail__sticky.is-stuck .marker--current{
    box-shadow: inset 0 0 0 1px var(--blue-solid);
  }
}

/* ============================================
   ARC NARRATIVE
   ============================================ */
.arc-narrative{
  margin-top: 8px;
  padding: 18px 18px 12px;
  border-radius: var(--radius);
  background: var(--surface-panel);
  border: 1px solid var(--border);
}
.arc-narrative__body{
  line-height: 1.72;
  font-size: 16px;
  font-family: var(--serif);
  color: var(--soft-ink);
}
.arc-narrative__body h3{
  margin: 14px 0 6px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--blue-solid);
}
.arc-narrative__body p{ margin: 0 0 10px; }

/* Arc title flex (for inline play button) */
#arcTitle{ display: flex; align-items: center; gap: 10px; }

/* --- Arc audio paragraph highlighting (left accent bar) --- */
.arc-narrative__body [data-para]{
  margin-left: -8px;
  padding-left: 5.5px;
  border-left: 2.5px solid transparent;
  transition: border-color 0.25s ease;
}
.arc-narrative__body [data-para].is-speaking{
  border-left-color: var(--blue-solid);
}
.arc-narrative__body .arc-sentence{
  border-radius: 2px;
  transition: background-color 0.16s ease;
}
.arc-narrative__body .arc-sentence.is-speaking-sentence{
  background: var(--audio-highlight);
}

/* --- Arc audio: inline trigger pill --- */
.arc-audio-trigger{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 8px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface-panel-alt);
  cursor: pointer; color: var(--muted); font-family: var(--sans); font-size: 13px;
  transition: border-color 0.15s, color 0.15s;
  margin: -6px 0 0;
}
.arc-audio-trigger:hover{ border-color: var(--blue-solid); color: var(--blue-solid); }
.arc-audio-trigger svg{ width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }
.arc-audio-trigger .icon-pause{ display: none; }
.arc-audio-trigger.is-playing .icon-play{ display: none; }
.arc-audio-trigger.is-playing .icon-pause{ display: inline; }
.arc-audio-trigger.is-playing{ border-color: var(--blue-solid); color: var(--blue-solid); }

/* --- Narration player (views/partials/narration-player.ejs): pill + narrator --- */
/* The player adds [data-para] after load. Giving the elements its transparent
   border up front stops the border colour animating from black on load. */
/* Paragraph highlight (left accent) where the document player reads outside
   the Journey/Arc body (which has its own border-based rules above). Drawn
   as a pseudo-element so the page's own margins and padding are untouched. */
.narration-body:not(.arc-narrative__body) [data-para]{ position: relative; }
.narration-body:not(.arc-narrative__body) [data-para]::before{
  content: '';
  position: absolute; left: -8px; top: 0; bottom: 0; width: 2.5px;
  background: transparent;
  transition: background-color 0.25s ease;
}
.narration-body:not(.arc-narrative__body) [data-para].is-speaking::before{ background: var(--blue-solid); }
.narration-body > :is(p, h1, h2, h3, h4, h5, h6){
  margin-left: -8px;
  padding-left: 5.5px;
  border-left: 2.5px solid transparent;
}
.narration-body.is-narrating .arc-sentence,
.narration-body.is-narrating [data-para]:not(p){ cursor: pointer; }
.narration-body.is-narrating .arc-sentence:not(.is-speaking-sentence):hover{
  background: color-mix(in srgb, var(--audio-highlight) 45%, transparent);
}
.arc-audio-bar__skip,
.arc-audio-bar__follow,
.arc-audio-bar__more{
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--muted);
  transition: color 0.15s, background-color 0.15s;
}
/* Hover styles only where there's a real hover: iOS keeps them on after a
   tap, which left a shaded button behind. */
@media (hover: hover){
  .arc-audio-bar__skip:hover,
  .arc-audio-bar__follow:hover,
  .arc-audio-bar__more:hover,
  .arc-audio-bar__close:hover,
  .arc-audio-bar__chip:hover,
  .arc-audio-bar__list button:hover{ color: var(--fg); background: var(--surface-panel-alt); }
  .arc-audio-bar__btn:hover{ opacity: 0.85; }
  .arc-audio-bar__progress-wrap:hover .arc-audio-bar__progress::after{ transform: translateY(-50%) scale(1); }
}
.arc-audio-bar__skip svg{ width: 13px; height: 13px; fill: currentColor; }
.arc-audio-bar__more svg{ width: 16px; height: 16px; fill: currentColor; }
/* Wider screens pick narrator and speed with chips; the "⋯" menu and its
   selects are for narrow screens. */
.arc-audio-bar__more,
.arc-audio-bar__settings{ display: none; }
.arc-audio-bar__follow{ margin-left: auto; }
.arc-audio-bar__follow svg{ width: 16px; height: 16px; }
.arc-audio-bar__follow.is-on{ color: var(--blue-solid); }
.arc-audio-bar__narrator,
.arc-audio-bar__speed{
  font-family: var(--sans); font-size: 12px; color: var(--fg);
  background: var(--surface-panel-alt); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 4px; flex-shrink: 0;
}
/* Fixed-width digits and box so the clock doesn't shift its neighbours. */
.arc-audio-bar__follow ~ .arc-audio-bar__time{
  margin-left: 0; min-width: 12ch; text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Highlighting outside the Journey/Arc body (the trail's cards): the line
   or sentence being read. */
.narration-body .is-speaking-sentence{
  background: var(--audio-highlight);
  border-radius: 2px;
}
/* Links in a highlighted line (a practice card's motif name, the "Appears in"
   section link) take the line's colour; their own muted or accent colours
   wash out on the highlight. */
.narration-body .is-speaking-sentence a,
.narration-body .is-speaking-sentence a:hover{
  color: inherit;
}
/* Likewise the acim.org pill and the ¶ page picker beside a section link. */
.narration-body .is-speaking-sentence .practiceCard__readCta,
.narration-body .is-speaking-sentence .practiceCard__inlineSourcePickerSummary{
  color: inherit;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}
/* Trail cards: a play button leading the badges; the card being read gets
   an accent. */
.narration-card-btn{
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface-panel-alt);
  color: var(--muted); cursor: pointer; margin-left: auto;
  transition: color 0.15s, border-color 0.15s;
}
.stopBadges .narration-card-btn{ margin: 0 3px 0 0; align-self: center; }
.narration-card-btn:hover,
.narration-card-btn.is-current{ color: var(--blue-solid); border-color: var(--blue-solid); }
.narration-card-btn svg{ width: 11px; height: 11px; fill: currentColor; }
.narration-card-btn .icon-pause{ display: none; }
.narration-card-btn.is-playing .icon-play{ display: none; }
.narration-card-btn.is-playing .icon-pause{ display: block; }
.stop.narration-current{ box-shadow: inset 3px 0 0 var(--blue-solid); }
/* A key moment already has a gold left edge; while it's read that edge
   turns blue, rather than a second stripe being drawn inside it. */
.stop[data-key-moment="1"].narration-current{
  border-left-color: var(--blue-solid);
  box-shadow: var(--subtle-shadow);
}
.narration-audio__restart{
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.narration-audio__restart:hover{ color: var(--blue-solid); }
/* The pill's "Start over" is words; the practice card's tab uses the icon. */
.narration-audio__restartIcon{ display: none; }
.narration-audio{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 18px;
}
.narration-audio .arc-audio-trigger{ margin: 0; }
.narration-audio__narrator{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
}
.narration-audio__option{
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
}
.narration-audio__option input{ margin: 0; accent-color: var(--blue-solid); }
.narration-audio__narrator select{
  font: inherit; color: var(--fg); background: var(--surface-panel-alt);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px;
}

/* --- Arc audio: persistent bottom bar --- */
/* The layout's viewport-fit=cover lets the page run under the rounded
   corners and the home indicator; the env() insets keep the bar's controls
   clear of both, and the body keeps room for the bar while it's open. */
body{
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: var(--audio-bar-space, 0px);
}
.arc-audio-bar{
  --bar-inset-left: max(16px, calc(env(safe-area-inset-left) + 8px));
  --bar-inset-right: max(16px, calc(env(safe-area-inset-right) + 8px));
  position: fixed; bottom: 0; left: 0; right: 0;
  display: none; flex-direction: column;
  background: var(--surface-card); border-top: 1px solid var(--border);
  z-index: 1000;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
  /* The surface is slightly translucent; blur what shows through. */
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}
.arc-audio-bar.is-visible{ display: flex; }
.arc-audio-bar__progress-wrap{
  position: relative; height: 4px; background: var(--border);
  cursor: pointer; overflow: visible; flex-shrink: 0;
  touch-action: none;
}
/* A taller invisible strip to grab, so the 4px line isn't the target. The
   line is the bar's top edge, so the strip mostly grows downwards and
   clicks on the page just above don't seek. */
.arc-audio-bar__progress-wrap::before{
  content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -10px;
}
.arc-audio-bar__progress{
  position: absolute; top: 0; left: 0; height: 100%; width: 0%;
  background: var(--blue-solid); pointer-events: none;
  transition: width 0.15s linear;
}
.arc-audio-bar__progress::after{
  content: ''; position: absolute; right: -6px; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue-solid);
  transform: translateY(-50%) scale(0);
  transition: transform 0.15s;
}
.arc-audio-bar.is-scrubbing .arc-audio-bar__progress::after{ transform: translateY(-50%) scale(1); }
.arc-audio-bar.is-scrubbing .arc-audio-bar__progress{ transition: none; }
.arc-audio-bar__times{ display: none; }
.arc-audio-bar__tick{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5px; height: 12px;
  background: var(--soft-ink); opacity: 0.35;
  border-radius: 1px; pointer-events: none;
}
.arc-audio-bar__tick-hit{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 18px; cursor: pointer; z-index: 2;
}
.arc-audio-bar__tick-hit:hover .arc-audio-bar__tick{ opacity: 0.7; }
.arc-audio-bar__tick-hit .arc-audio-bar__tick-label{
  display: none; position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); margin-bottom: 6px;
  white-space: nowrap; font-family: var(--sans);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; color: var(--soft-ink);
  background: var(--surface-panel); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 7px; pointer-events: none;
}
.arc-audio-bar__tick-hit:hover .arc-audio-bar__tick-label{ display: block; }

.arc-audio-bar__controls{
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--bar-inset-right) max(10px, calc(env(safe-area-inset-bottom) + 6px)) var(--bar-inset-left);
}
.arc-audio-bar__transport{
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.arc-audio-bar__btn{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue-solid); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  flex-shrink: 0; transition: opacity 0.15s;
}
.arc-audio-bar__btn svg{ width: 15px; height: 15px; fill: currentColor; }
.arc-audio-bar__btn .icon-pause{ display: none; }
.arc-audio-bar__btn.is-playing .icon-play{ display: none; }
.arc-audio-bar__btn.is-playing .icon-pause{ display: block; }

.arc-audio-bar__meta{
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
}
/* The title gives up its room before the section does. */
.arc-audio-bar__meta strong{
  flex: 0 3 auto; min-width: 3em; color: var(--fg); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arc-audio-bar__meta .arc-audio-bar__chapter{ flex: 0 1 auto; min-width: 0; }

/* Chips: the section playing (after the title; narrow screens show it
   between the times instead), the narrator and the speed. Each opens a list. */
.arc-audio-bar__chip{
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  min-height: 28px; padding: 0 8px 0 10px;
  background: none; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--fg);
  transition: background-color 0.15s;
}
.arc-audio-bar__chip[aria-expanded="true"]{ background: var(--surface-panel-alt); }
.arc-audio-bar__chip[hidden]{ display: none; }
.arc-audio-bar__picker{ flex-shrink: 0; font-variant-numeric: tabular-nums; }
.arc-audio-bar__chipLabel{
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arc-audio-bar__chip svg{ width: 12px; height: 12px; flex-shrink: 0; color: var(--muted); }

.arc-audio-bar__popover{
  display: none; position: absolute; bottom: calc(100% + 8px); left: var(--bar-inset-left);
  width: min(440px, calc(100% - var(--bar-inset-left) - var(--bar-inset-right)));
  max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.arc-audio-bar__popover.is-open{ display: block; }
.arc-audio-bar__popover,
.arc-audio-bar__settings{
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}
/* The panels' headers (title and ×) and the dimmed page are for narrow screens. */
.arc-audio-bar__panelHead,
.arc-audio-bar-scrim{ display: none; }
.arc-audio-bar__popover--picker{ width: auto; min-width: 120px; }
.arc-audio-bar__list{ list-style: none; margin: 0; padding: 4px 0; }
.arc-audio-bar__list li + li{ border-top: 1px solid var(--border); }
.arc-audio-bar__list button{
  width: 100%; min-height: 42px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 14px; color: var(--fg);
}
.arc-audio-bar__listDetail{
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.arc-audio-bar__list .is-current button{
  color: var(--blue-solid); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--blue-solid);
}
.arc-audio-bar__time{
  font-family: var(--sans); font-size: 11px; color: var(--muted);
  white-space: nowrap; margin-left: auto;
}
.arc-audio-bar__close{
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 22px; padding: 0; line-height: 1; flex-shrink: 0;
  transition: color 0.15s, background-color 0.15s;
}

/* Phones and small tablets: two rows, as in podcast players. The progress
   bar with the clock and section beneath it, then a large play button
   between previous and next, with follow on the left and the "⋯" menu
   (narrator, speed, close) on the right. Every target is at least 44px and
   everything sits above the home indicator, away from the screen's corners. */
@media (max-width: 760px){
  .arc-audio-bar__progress-wrap{
    margin: 22px var(--bar-inset-right) 0 var(--bar-inset-left);
    border-radius: 2px;
  }
  .arc-audio-bar__progress{ border-radius: 2px; }
  .arc-audio-bar__progress-wrap::before{ top: -18px; bottom: -10px; }
  .arc-audio-bar__progress::after{ transform: translateY(-50%) scale(1); }
  .arc-audio-bar.is-scrubbing .arc-audio-bar__progress::after{ transform: translateY(-50%) scale(1.4); }
  .arc-audio-bar__times{
    /* Equal fixed columns for the times: the font's digits vary in width,
       and auto columns would nudge the section name every second. */
    display: grid; grid-template-columns: 4em minmax(0, 1fr) 4em;
    align-items: center; gap: 8px;
    padding: 12px var(--bar-inset-right) 0 var(--bar-inset-left);
    font-family: var(--sans); font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  /* The section list replaces the ticks' hover labels here, so the ticks
     are only markers and a drag can start anywhere on the bar. */
  .arc-audio-bar__tick-hit{ pointer-events: none; }

  /* The current section, between the times; above the progress bar's grab
     strip, which reaches down towards it. */
  .arc-audio-bar__chapter{
    position: relative; z-index: 3;
    grid-column: 2; justify-self: center;
    min-height: 40px; padding: 0 14px;
    border: none; border-radius: 20px;
    font-size: 14px;
  }
  .arc-audio-bar__total{ grid-column: 3; text-align: right; }

  /* Every item on the first row: placed by column alone, the grid would
     wrap the ones before the transport onto a second row. */
  .arc-audio-bar__controls{
    display: grid; align-items: center; gap: 0;
    grid-template-columns: 48px 1fr auto 1fr 48px;
    padding: 10px max(12px, calc(env(safe-area-inset-right) + 6px))
             max(18px, calc(env(safe-area-inset-bottom) + 8px))
             max(12px, calc(env(safe-area-inset-left) + 6px));
  }
  .arc-audio-bar__controls > *{ grid-row: 1; }
  .arc-audio-bar__meta,
  .arc-audio-bar__time,
  .arc-audio-bar__picker,
  .arc-audio-bar--menu .arc-audio-bar__close{ display: none; }
  .arc-audio-bar__follow{ grid-column: 1; margin-left: 0; }
  .arc-audio-bar__transport{ grid-column: 3; gap: 22px; }
  .arc-audio-bar__more{ display: flex; grid-column: 5; }
  .arc-audio-bar__close{ grid-column: 5; font-size: 28px; }
  .arc-audio-bar__skip,
  .arc-audio-bar__follow,
  .arc-audio-bar__more,
  .arc-audio-bar__close{ width: 48px; height: 48px; }
  .arc-audio-bar__skip svg{ width: 18px; height: 18px; }
  .arc-audio-bar__follow svg{ width: 22px; height: 22px; }
  .arc-audio-bar__more svg{ width: 22px; height: 22px; }
  .arc-audio-bar__btn{ width: 64px; height: 64px; }
  .arc-audio-bar__btn svg{ width: 24px; height: 24px; }

  /* Panels open above the bar, over a dimmed page; their header has a
     title and a close button. */
  .arc-audio-bar-scrim{
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.35);
    touch-action: none;
  }
  .arc-audio-bar-scrim.is-open{ display: block; }
  .arc-audio-bar__popover,
  .arc-audio-bar__settings{
    left: var(--bar-inset-left); right: var(--bar-inset-right); width: auto;
    bottom: calc(100% + 10px);
    max-height: min(65vh, 520px);
  }
  .arc-audio-bar__panelHead{
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 4px 4px 16px;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border);
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  }
  .arc-audio-bar__panelClose{
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: 26px; line-height: 1; color: var(--muted);
  }
  .arc-audio-bar__list button{ min-height: 52px; font-size: 15px; }
  .arc-audio-bar__listDetail{ font-size: 13px; }

  .arc-audio-bar__settings{
    display: none; position: absolute;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface-card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  }
  .arc-audio-bar__settings.is-open{ display: block; }
  .arc-audio-bar__more[aria-expanded="true"]{ color: var(--blue-solid); }
  .arc-audio-bar__setting{
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 56px; margin: 0 16px;
  }
  .arc-audio-bar__setting + .arc-audio-bar__setting{ border-top: 1px solid var(--border); }
  .arc-audio-bar__setting > span{
    display: inline; font-family: var(--sans); font-size: 15px; color: var(--fg);
  }
  /* 16px keeps iOS from zooming the page when a select is tapped. */
  .arc-audio-bar__settings select{
    font-size: 16px; padding: 6px 10px; min-height: 36px; border-radius: 8px;
  }
  .arc-audio-bar__settingClose{
    width: calc(100% - 32px);
    background: none; border: none; border-radius: 0; padding: 0; cursor: pointer;
    font-family: var(--sans); font-size: 15px; color: var(--fg); text-align: left;
  }
}

/* Legacy compat — hide old bar if present */
.arc-audio{ display: none; }
.arc-audio__btn, .arc-audio__track, .arc-audio__progress-wrap,
.arc-audio__progress, .arc-audio__time{ /* noop */ }
.arc-audio__tick-hit, .arc-audio__tick, .arc-audio__tick-label{ /* noop */ }

/* ============================================
   CHAPTERS & SECTION CARDS
   ============================================ */
.chapter{
  margin-top: 14px;
  padding-top: 8px;
}

.chapterHeader{
  display:flex;
  align-items:baseline;
  gap: 10px;
  padding: 14px 0 6px 18px;
  border-bottom: 1px solid var(--border);
}
.chapterHeader__title{ margin:0; font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.32; }
.chapterHeader__meta{ color: var(--muted); font-size: 12px; font-family: var(--sans); display:flex; gap:10px; flex-wrap:wrap; letter-spacing: 0.01em; }

.stopList{ display:flex; flex-direction:column; gap:12px; margin: 12px 0 24px; }

.stop{
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  box-shadow: var(--subtle-shadow);
}

@keyframes jumpTargetCardPulse {
  0% {
    border-color: var(--surface-card-border);
    box-shadow: var(--subtle-shadow);
  }
  30% {
    border-color: var(--blue-border-strong);
    box-shadow:
      0 0 0 2px var(--blue-border-strong),
      0 0 0 7px var(--blue-wash),
      var(--shadow);
  }
  100% {
    border-color: var(--surface-card-border);
    box-shadow: var(--subtle-shadow);
  }
}

@keyframes jumpTargetHeaderPulse {
  0% { background: transparent; }
  28% { background: var(--blue-wash); }
  100% { background: transparent; }
}

.stop.jump-target-flash,
.motifs-index__az-section.jump-target-flash,
.teachings-reversal.jump-target-flash,
.text-index__chapter-card.jump-target-flash,
.text-index__chapter-item.jump-target-flash {
  animation: jumpTargetCardPulse var(--jump-flash-ms, 940ms) ease-out;
}

.chapterHeader.jump-target-flash-header,
.motifs-index__motif-row.jump-target-flash-header,
.teachings-list__item.jump-target-flash-header {
  animation: jumpTargetHeaderPulse var(--jump-flash-ms, 900ms) ease-out;
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .stop.jump-target-flash,
  .motifs-index__az-section.jump-target-flash,
  .teachings-reversal.jump-target-flash,
  .text-index__chapter-card.jump-target-flash,
  .text-index__chapter-item.jump-target-flash,
  .chapterHeader.jump-target-flash-header,
  .motifs-index__motif-row.jump-target-flash-header,
  .teachings-list__item.jump-target-flash-header {
    animation: none;
  }
  .stop.jump-target-flash,
  .motifs-index__az-section.jump-target-flash,
  .teachings-reversal.jump-target-flash,
  .text-index__chapter-card.jump-target-flash,
  .text-index__chapter-item.jump-target-flash {
    border-color: var(--blue-border-strong);
    box-shadow: 0 0 0 2px var(--blue-border-strong), var(--subtle-shadow);
  }
  .chapterHeader.jump-target-flash-header,
  .motifs-index__motif-row.jump-target-flash-header,
  .teachings-list__item.jump-target-flash-header {
    background: var(--blue-wash);
  }
}

/* Reading mode — normal card, simplified content */
.stop--echoHidden{ display:none; }

.stopTop{ display:flex; justify-content:space-between; align-items:flex-start; gap: 14px; margin-bottom: 8px; }
.stopTitle{ margin:0; font-size: 16px; font-weight: 600; font-family: var(--serif); line-height: 1.3; }
.stopRef{ font-weight: 600; }
.stopBadges{ display:flex; gap: 5px; flex-wrap:wrap; justify-content:flex-end; margin-top: 1px; }

/* ============================================
   BADGES & PILLS
   ============================================ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 12px; font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--overlay-mid);
  color: var(--muted);
  background: var(--overlay-subtle);
}

.badge--tier-primary{ color: var(--tier-primary-text); background: var(--tier-primary-bg); border-color: var(--tier-primary-border); }
.badge--tier-pillar{ color: var(--tier-pillar-text); background: var(--tier-pillar-bg); border-color: var(--tier-pillar-border); }
.badge--tier-supporting{ color: var(--tier-supporting-text); background: var(--tier-supporting-bg); border-color: var(--tier-supporting-border); }
.badge--tier-minor{ color: var(--tier-minor-text); background: var(--tier-minor-bg); border-color: var(--tier-minor-border); }
.badge--tier-echo{ color: var(--tier-echo-text); background: var(--tier-echo-bg); border-color: var(--tier-echo-border); }

.badge--flag{ color: var(--overlay-flag); font-weight: 600; }
.badge--seed{ background: var(--seed-bg); color: var(--seed-text); border: 1px solid var(--seed-border); }
.badge--milestone{ background: var(--milestone-bg); color: var(--milestone-text); border: 1px solid var(--milestone-border); }
.badge--zenith{ background: var(--zenith-bg); color: var(--zenith-text); border: 1px solid var(--zenith-border); }
/* The key-moment badge being announced: its own colour, deepened, instead of
   the line highlight. */
.narration-body .badge.is-speaking-sentence{
  background: color-mix(in srgb, currentColor 24%, transparent);
  border-color: currentColor;
  border-radius: 999px;
}

.snippet{
  margin: 13px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.6;
}

/* ============================================
   CARD BODY & PROSE
   ============================================ */
.stopBody{
  margin-top: 11px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--soft-ink);
}
.stopBody p{ margin: 0 0 12px; }
.stopBody p:last-child{ margin-bottom: 0; }

.callout{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--blue-wash);
  border: 1px solid var(--blue-callout-border);
  border-left: 4px solid var(--blue-callout-accent);
}
.callout--practice{
  background: var(--practice-bg);
  border-color: var(--practice-border);
  border-left-color: var(--practice-accent);
}
.callout__label{
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.stop-prompt{ margin-top: 13px; }
.stop-prompt__label{ font-family: var(--sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; color: var(--blue-solid); margin: 0 0 4px; }
.stop-prompt__body{ font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--soft-ink); margin: 0; }

.pills{ display:flex; flex-wrap:wrap; gap: 6px; margin-top: 12px; }
.pill{
  font-size: 12px; font-family: var(--sans);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--overlay-subtle);
  border: 1px solid var(--overlay-light);
  color: var(--muted);
  letter-spacing: 0.01em;
}

.kvGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 10px;
  margin: 10px 0 0;
}
.kv{ font-size: 13px; color: var(--muted); font-family: var(--sans); }
.kv b{ color: var(--ink); font-weight: 650; }

.block{
  margin-top: 10px;
  padding: 10px 10px;
  background: var(--surface-inset);
  border: 1px solid var(--surface-inset-border);
  border-radius: 12px;
}
.block__placeholder{ color: var(--placeholder-color); font-style: italic; }

/* ============================================
   SCORE BARS
   ============================================ */
.score-bars { display: flex; flex-direction: column; gap: 8px; }
.score-bars__item {}
.score-bars__header { display: flex; justify-content: space-between; font-size: 13px; font-family: var(--sans); margin-bottom: 2px; }
.score-bars__label { color: var(--muted); }
.score-bars__value { font-weight: 600; color: var(--ink); }
.score-bars__track { height: 6px; background: var(--track-bg); border-radius: 3px; overflow: hidden; }
.score-bars__fill { height: 100%; border-radius: 3px; background: var(--overlay-heavy); }

/* ============================================
   RESEARCH DATA
   ============================================ */
.stop-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0 12px; }
.research-data { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 760px) { .research-data { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .research-data { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .stop { padding: 16px 14px 15px; }
  .stopTop { gap: 10px; margin-bottom: 7px; }
  .stopTitle,
  .motifCard__name { font-size: 15px; }
  .stopBadges { gap: 4px; }
  .badge { font-size: 11px; padding: 2px 6px; }
  .snippet { margin-top: 11px; font-size: 16px; }
  .threadG { margin-top: 10px; padding: 8px 10px 10px; }
}
.desc-group { }
.desc-group__title { font-size: 13px; font-family: var(--sans); font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.desc-group__row { font-size: 13px; font-family: var(--sans); color: var(--muted); line-height: 1.6; }

.section-subhead { margin: 14px 0 6px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.2px; text-transform: uppercase; color: var(--blue-solid); font-weight: 700; }
.section-prose { font-family: var(--serif); font-size: 16px; line-height: 1.72; color: var(--soft-ink); margin: 0 0 10px; }

/* ============================================
   SECTION PAGE
   ============================================ */
.sectionHeader { background: var(--blue-wash); border: 1px solid var(--blue-border); border-radius: var(--radius); padding: 18px; box-shadow: var(--subtle-shadow); margin-bottom: 12px; position: relative; }
.sectionHeader__ref { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.3px; }
.sectionHeader__title { margin: 4px 0 0; font-family: var(--serif); font-size: 36px; font-weight: 500; line-height: 1.2; }
.sectionHeader__chapter { margin-top: 6px; font-size: 13px; color: var(--muted); font-family: var(--sans); }
.sectionHeader__chapter a { color: var(--muted); text-decoration: none; }
.sectionHeader__chapter a:hover { text-decoration: underline; color: var(--ink); }
.sectionHeader__stats { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.sectionHeader__source { margin-top: 12px; }
.sectionHeader__source a { font-size: 13px; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.sectionHeader__source a:hover { color: var(--ink); text-decoration: underline; }
.sectionHeader__sourceTopRight { position: absolute; top: 14px; right: 18px; }
.sectionHeader__sourceTopRight a { font-size: 12px; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.sectionHeader__sourceTopRight a:hover { color: var(--ink); text-decoration: underline; }

.editorial { background: var(--surface-card); border: 1px solid var(--surface-card-border); border-radius: var(--radius); padding: 22px 22px 18px; box-shadow: var(--subtle-shadow); margin-bottom: 12px; }
.editorial__heading { margin: 0 0 4px; font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); }
.editorial__intro { margin: 0 0 18px; font-size: 13px; color: var(--muted); font-family: var(--sans); }
.editorial__section { margin-top: 18px; }
.editorial__section:first-of-type { margin-top: 0; }
.editorial__subhead { margin: 0 0 6px; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; color: var(--blue-solid); }
.editorial__body { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.68; color: var(--soft-ink); }
.editorial__divider { border: none; border-top: 1px dashed var(--overlay-dashed); margin: 16px 0; }
.editorial__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.editorial__pill { font-size: 12px; font-family: var(--sans); padding: 3px 8px; border-radius: 999px; background: var(--overlay-subtle); border: 1px solid var(--overlay-light); color: var(--muted); font-weight: 500; }

/* ============================================
   MICRO GRID — Tier Density + Flag Moments
   ============================================ */
.microGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 0;
  margin-bottom: 12px;
  padding: 14px 18px;
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  box-shadow: var(--subtle-shadow);
}
.microGrid__col { flex: 0 0 auto; min-width: 0; }
.microGrid__divider { flex: 0 0 1px; }
.microGrid__label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--muted);
  margin-bottom: 6px;
}
.microGrid__desc { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.microGrid__items { display: flex; gap: 8px; flex-wrap: wrap; }
.microGrid__item { display: flex; align-items: center; gap: 4px; font-family: var(--sans); font-size: 13px; font-weight: 500; }
.microGrid__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.microGrid__dot--primary { background: var(--tier-primary-border); }
.microGrid__dot--pillar { background: var(--tier-pillar-border); }
.microGrid__dot--supporting { background: var(--tier-supporting-border); }
.microGrid__dot--minor { background: var(--tier-minor-border); }
.microGrid__dot--echo { background: var(--tier-echo-border); }
.microGrid__count--primary { color: var(--tier-primary-text); }
.microGrid__count--pillar { color: var(--tier-pillar-text); }
.microGrid__count--supporting { color: var(--tier-supporting-text); }
.microGrid__count--minor { color: var(--tier-minor-text); }
.microGrid__count--echo { color: var(--tier-echo-text); }
.microGrid__divider { width: 1px; background: var(--overlay-light); align-self: stretch; }
.microGrid__flag { display: flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 13px; font-weight: 500; }
.microGrid__flagIcon { width: 8px; height: 8px; border-radius: 50%; }
.microGrid__flagIcon--seed { background: var(--seed-dot); }
.microGrid__flagIcon--milestone { background: var(--milestone-dot); }
.microGrid__flagIcon--zenith { background: var(--zenith-dot); }
.microGrid__flagLabel--seed { color: var(--seed-text); }
.microGrid__flagLabel--milestone { color: var(--milestone-text); }
.microGrid__flagLabel--zenith { color: var(--zenith-text); }

/* Thread Preview — Option E (Progress Fill) */
.threadG { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 10px; align-items: center; margin-top: 12px; padding: 9px 12px 12px; border-radius: 10px; background: var(--surface-inset); border: 1px solid var(--surface-inset-border); font-size: 13px; font-family: var(--sans); color: var(--muted); }
.threadG__prev { grid-column: 1; grid-row: 1; }
.threadG__track { grid-column: 2; grid-row: 1; }
.threadG__next { grid-column: 3; grid-row: 1; }
.threadG__progress { grid-column: 2; grid-row: 2; margin-top: 8px; }
.threadG__meta { display: none; }
.threadG__side { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); text-decoration: none; transition: color 0.15s; flex-shrink: 0; font-weight: 600; }
.threadG__side:hover { color: var(--accent); text-decoration: underline; }
.threadG__side svg { flex-shrink: 0; }
/* Section prev/next navigation */
.sectionNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-family: var(--sans);
  font-size: 13px;
}
.sectionNav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding: 0;
  transition: color 0.15s;
}
.sectionNav__link:hover {
  color: var(--accent);
  text-decoration: underline;
}
.sectionNav__link:focus-visible {
  outline: 2px solid var(--blue-solid);
  outline-offset: 2px;
}
.sectionNav__link--disabled { visibility: hidden; }
.sectionNav__link svg { flex-shrink: 0; }

.threadG--overview { margin-top: 16px; }

/* ============================================
   Spiral Staircase Section
   ============================================ */
/* Spiral Hero */
.spiralHero { display: flex; justify-content: center; padding: 8px 0 20px; }
.spiralHero--split { justify-content: center; align-items: center; gap: 32px; }
.spiralHero__canvasWrap { position: relative; flex-shrink: 0; width: 400px; max-width: 50%; }
.spiralHero__canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.spiralHero__moments { flex: none; }
.spiralHero__momentsLabel { font-family: var(--sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; }
.spiralHero__moments .momentsList { margin-top: 0; }

@media (max-width: 640px) {
  .spiralHero--split { flex-direction: column; align-items: center; gap: 20px; }
}

.spiralSection { margin: 12px 0 0; padding: 18px; border-radius: var(--radius); background: var(--surface-panel); border: 1px solid var(--border); }
.spiralSection__headerRow { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.spiralSection__badge { flex-shrink: 0; }
.spiralSection__header { margin-bottom: 0; }
.spiralSection__header em { font-style: italic; }
.spiralSection__desc { font-family: var(--serif); font-size: 16px; color: var(--soft-ink); line-height: 1.6; margin-bottom: 28px; }
.spiralSection__docLinkRow { margin: 6px 0 0; }
.spiralSection__docLink {
  color: var(--blue-solid);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.01em;
  font-weight: 600;
}
.spiralSection__docLink:hover { text-decoration: underline; }

.spiralBlock { margin-bottom: 32px; }
.spiralBlock__label { font-family: var(--sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue-solid); margin-bottom: 4px; }
.spiralBlock__helper { font-family: var(--serif); font-size: 16px; color: var(--soft-ink); line-height: 1.6; margin-bottom: 14px; }

.spiralDivider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }

/* Sparkline */
.spiralSpark__chart { position: relative; height: 48px; }
.spiralSpark__trackline { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--track-bg); border-radius: 3px; }
.spiralSpark__bar { position: absolute; bottom: 3px; width: 3px; border-radius: 1.5px 1.5px 0 0; transform: translateX(-50%); }
.spiralSpark__bar--normal { background: var(--overlay-heavy); }
.spiralSpark__bar--seed { background: var(--seed-dot); width: 4px; border-radius: 2px 2px 0 0; }
.spiralSpark__bar--milestone { background: var(--milestone-dot); width: 4px; border-radius: 2px 2px 0 0; }
.spiralSpark__bar--zenith { background: var(--zenith-dot); width: 4px; border-radius: 2px 2px 0 0; }
.spiralSpark__endpoints { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; font-weight: 500; font-family: var(--sans); }

/* Moments list */
.momentsList { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.momentsList__item { display: flex; align-items: baseline; gap: 6px; font-family: var(--sans); font-size: 13px; padding: 3px 0; }
.momentsList__symbol { flex-shrink: 0; font-weight: 700; }
.momentsList__symbol--seed { color: var(--seed-dot); }
.momentsList__symbol--milestone { color: var(--milestone-dot); }
.momentsList__symbol--zenith { color: var(--zenith-dot); }
.momentsList__ref { font-weight: 400; }
.momentsList__ref a { color: var(--ink); text-decoration: none; }
.momentsList__ref a:hover { color: var(--accent); text-decoration: underline; }
/* Spiral expand button */
.spiralExpand { position: absolute; top: 8px; right: 8px; z-index: 2; }

/* Spiral fullscreen overlay */
.spiralOverlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.spiralOverlay__content { background: #fffdf8; border-radius: 12px; padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); display: flex; flex-direction: column; align-items: center; max-width: 90vw; max-height: 90vh; }
[data-theme="dark"] .spiralOverlay__content { background: #1a1918; }
.spiralOverlay__header { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 16px; }
.spiralOverlay__title { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; text-transform: uppercase; }
.spiralOverlay__close { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--muted); padding: 0 4px; line-height: 1; }
.spiralOverlay__close:hover { color: var(--ink); }
.spiralOverlay__hint { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-top: 12px; }

/* Spiral tooltip */
.spiralTooltip {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 4100;
  background: var(--tooltip-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 8px 24px rgba(16, 38, 61, 0.2);
  white-space: normal;
  min-width: 180px;
  max-width: 330px;
  color: var(--ink);
}
.spiralTooltip--visible { opacity: 1; }

.momentsList__label { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
.momentsList__label--seed { color: var(--seed-dot); }
.momentsList__label--milestone { color: var(--milestone-dot); }
.momentsList__label--zenith { color: var(--zenith-dot); }
.momentsList__groupLabel { display: flex; align-items: baseline; gap: 6px; font-family: var(--sans); font-size: 13px; padding: 3px 0; width: 100%; margin-top: 4px; }
.momentsList__groupLabel .momentsList__label { font-weight: 600; }
.momentsList__item--indent { padding-left: 22px; }

/* Staircase */
.spiralStaircase__svg { width: 100%; height: auto; display: block; }

/* Thread */
.spiralThread__chart { position: relative; height: 10px; margin-top: 20px; }
.spiralThread__trackline { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 6px; background: var(--track-bg); border-radius: 3px; }
.spiralThread__dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
.spiralThread__dot--normal { background: var(--overlay-heavy); }
.spiralThread__dot--seed { background: var(--seed-dot); opacity: 1; width: 10px; height: 10px; }
.spiralThread__dot--milestone { background: var(--milestone-dot); opacity: 1; width: 10px; height: 10px; }
.spiralThread__dot--zenith { background: var(--zenith-dot); opacity: 1; width: 10px; height: 10px; }

.threadG__side--endpoint { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); cursor: default; pointer-events: none; }
.threadG__side--endpoint:hover { color: var(--muted); text-decoration: none; }
.threadG__track-bar { height: 6px; background: var(--track-bg); border-radius: 3px; position: relative; min-width: 80px; }
.threadG__marker { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--overlay-heavy); top: 50%; transform: translate(-50%, -50%); z-index: 1; }
.threadG__marker--seed { background: var(--seed-dot); width: 10px; height: 10px; }
.threadG__marker--milestone { background: var(--milestone-dot); width: 10px; height: 10px; }
.threadG__marker--zenith { background: var(--zenith-dot); width: 10px; height: 10px; }
.threadG__progress-bar { position: relative; height: 22px; border-radius: 999px; background: rgba(79, 111, 143, 0.12); border: 1px solid rgba(79, 111, 143, 0.2); overflow: hidden; }
.threadG__progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(79, 111, 143, 0.95), rgba(79, 111, 143, 0.7)); border-radius: 999px; }
.threadG__progress-pip { display: none; }
.threadG__progress-chip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--ink-secondary);
  white-space: nowrap;
  max-width: calc(50% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(31, 35, 40, 0.15);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.66), rgba(255, 253, 248, 0.56));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  backdrop-filter: saturate(130%) blur(2px);
  -webkit-backdrop-filter: saturate(130%) blur(2px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.threadG__progress-chip--left { left: 8px; }
.threadG__progress-chip--right { right: 8px; text-align: right; }
.threadG__meta-label { display: none; }
[data-theme="dark"] .threadG__progress-bar {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), inset 0 -1px 0 rgba(0,0,0,0.16);
}
[data-theme="dark"] .threadG__progress-fill {
  background: linear-gradient(90deg, rgba(96,156,228,0.95), rgba(96,156,228,0.72));
}
[data-theme="dark"] .threadG__progress-chip {
  color: var(--ink);
  border-color: rgba(120,170,230,0.28);
  background: rgba(24,26,30,0.92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  text-shadow: none;
}
/* Narrow screens: drop the dot track and keep the progress bar between prev/next */
@media (max-width: 900px) {
  .threadG__track { display: none; }
  .threadG__progress { grid-row: 1; margin-top: 0; }
}

/* ============================================
   Motif Charts Enhancements
   ============================================ */
.motifChartsSection .subpage-heading { margin-bottom: 16px; }
.motifChartsBlock { margin-bottom: 26px; }

body[data-page-type="motif-charts"] .motifChartsSection {
  font-family: var(--sans);
  font-size: 13px;
  padding-left: 14px;
  padding-right: 14px;
}

.motifChartsHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.motifChartsTools {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.motifChartsTool {
  display: grid;
  gap: 4px;
  min-width: 150px;
}

.motifChartsTool span {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.motifChartsTool select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
}

.motifChartsExpandBtn {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
}

.motifChartsExpandBtn:hover { border-color: var(--ink-secondary); }

.motifChartsWhy,
.motifChartsHow {
  padding: 8px 10px;
  margin-bottom: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
}

.motifChartsWhy {
  background: rgba(74, 152, 232, 0.08);
  border: 1px solid var(--blue-border);
  color: var(--soft-ink);
  border-radius: 8px 8px 0 0;
  border-bottom: 0;
}

.motifChartsHow {
  background: rgba(74, 152, 232, 0.08);
  border: 1px solid var(--blue-border);
  color: var(--soft-ink);
  border-radius: 0 0 8px 8px;
  margin-bottom: 8px;
}

.motifChartsViz {
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--chart-surface);
  padding: 6px;
  overflow: auto;
  position: relative;
  min-height: 120px;
}

.motifChartsViz svg {
  display: block;
  width: 100%;
  height: auto;
}

.motifChartsLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}

.motifChartsSwatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.motifChartsSwatch--seed { background: var(--seed-dot); }
.motifChartsSwatch--milestone { background: var(--milestone-dot); }
.motifChartsSwatch--zenith { background: var(--zenith-dot); }

.motifChartsTiny {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.motifChartsRow {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr) 58px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.motifChartsCodesRow {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.motifChartsCodeName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motifChartsBarTrack {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-inset);
}

.motifChartsBarFill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--blue-solid);
  opacity: 0.74;
}

.motifChartsTip {
  position: fixed;
  z-index: 4005;
  pointer-events: none;
  opacity: 0;
  background: var(--tooltip-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 38, 61, 0.2);
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  min-width: 170px;
  max-width: 330px;
  transition: none;
}

.motifChartsTip.is-visible { opacity: 1; }

.motifChartsModal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--modal-scrim);
  backdrop-filter: blur(4px);
}

.motifChartsModal.is-visible { display: flex; }

.motifChartsModal__panel {
  width: min(1800px, 98vw);
  height: 95vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--modal-surface);
  box-shadow: 0 20px 48px rgba(8, 22, 36, 0.35);
  padding: 12px;
}

.motifChartsModal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.motifChartsModal__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
}

.motifChartsModal__close {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-solid);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
}

.motifChartsModal__body {
  min-height: 0;
  overflow: auto;
  padding: 4px;
  background: var(--modal-surface);
  border-radius: 10px;
}

.motifChartsExpandedStage {
  min-height: calc(95vh - 128px);
  display: grid;
  align-content: start;
  gap: 10px;
  background: var(--chart-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}

.motifChartsExpandedStage svg,
.motifChartsExpandedStage canvas {
  width: 100% !important;
  max-width: 100%;
}

.motifChartsExpandedStage--spiral {
  min-height: 0;
  height: 100%;
  align-content: center;
  justify-items: center;
  overflow: hidden;
}

.motifChartsExpandedStage--spiral canvas {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: calc(100% - 34px);
  aspect-ratio: 1 / 1;
}

.motifChartsExpandedStage--spiral .motifChartsTiny {
  margin: 0;
  text-align: center;
}

@media (max-width: 900px) {
  .motifChartsRow { grid-template-columns: minmax(110px, 1fr) minmax(0, 1fr) 52px; }
  .motifChartsCodesRow { grid-template-columns: minmax(110px, 1fr) minmax(0, 1fr) 52px; }
}

/* Directional companion sections (Charts page) */
.motifChartsViz--companions { padding: 10px 10px 4px; }
.motifChartsCompanionSection { margin-bottom: 14px; }
.motifChartsCompanionSection:last-child { margin-bottom: 4px; }
.motifChartsCompanionSectionHead { margin: 0 0 8px; }
.motifChartsCompanionSectionTitle {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-solid);
  margin: 0 0 2px;
}
.motifChartsCompanionSectionHint {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}
.motifChartsCompanionSectionRows { margin-top: 6px; }
.motifChartsCompanionRow.is-hidden { display: none; }
.motifChartsCompanionLink {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.motifChartsCompanionLink:hover,
.motifChartsCompanionLink:focus-visible {
  border-bottom-color: var(--blue-solid);
}
.motifChartsCompanionToggle {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-solid);
  background: none;
  border: none;
  padding: 4px 0 2px;
  margin: 2px 0 4px;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.motifChartsCompanionToggle:hover,
.motifChartsCompanionToggle:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Motif Nav — Sticky pill navigator (Option E: wrap → scroll) */
.motifListSection__sub { margin: 0 0 10px; padding-left: 18px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
/* Sticky section context bar (appears only when stuck) */
/* stickyCtx removed — section context now lives inside motifNav */

.sticky-sentinel { height: 1px; margin: 0; }
/* Old inline motifNav block — overridden by hub-spoke declarations below */

.motifCard__name { margin: 0; font-size: 16px; font-weight: 600; font-family: var(--serif); line-height: 1.32; }
.motifCard__name a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--surface-card-border); padding-bottom: 1px; transition: border-color 0.15s; }
.motifCard__name a:hover { border-color: var(--ink); }
.motifCard__def { margin: 7px 0 0; font-size: 16px; color: var(--muted); font-family: var(--serif); line-height: 1.58; }

/* ============================================
   FOOTER
   ============================================ */
.footer{
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  margin-top: 26px;
  padding: 18px 0;
  text-align: center;
  line-height: 1.6;
}
.footer__brand{
  font-weight: 600;
  margin-bottom: 10px;
}
.footer__legal{
  display: grid;
  gap: 10px;
  justify-items: center;
}
.footer__legalBody{
  width: 100%;
  text-align: left;
}
.footer__legalBody p{
  margin: 0 0 0.72em;
}
.footer__legalBody p:last-child{
  margin-bottom: 0;
}
.footer__legalLink{
  width: 100%;
  margin: 0;
  text-align: left;
  /* Spaced like the home page's prose links (.homeV2__proseLinks). */
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* Inset the legal text to roughly where card text starts (page headers 18px, cards 20px), so it lines up down the page. */
.footer__legalBody,
.footer__legalLink{
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}
/* At the breakpoint where cards go edge to edge, their text sits at the page gutter, so the footer needs no extra inset. */
@media (max-width: 760px){
  .footer__legalBody,
  .footer__legalLink{
    padding-left: 0;
    padding-right: 0;
  }
}
/* Practice pages: the legal text lines up with the practice card (.practicePage__inner). */
body[data-page-type="practice"] .footer__legalBody,
body[data-page-type="practice"] .footer__legalLink{
  width: min(100%, 780px);
}
.footer__legal a{ color: var(--muted); text-decoration: underline; }
.footer__legal a:hover{ color: var(--ink); }

/* ============================================
   RESPONSIVE
   ============================================ */
/* ============================================
   HAMBURGER MENU
   ============================================ */
.hamburger-btn {
  display: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0 6px 12px;
}
.hamburger-icon {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  border-radius: 1px;
  transition: background 0.2s;
}
.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  position: absolute;
  left: 0;
  transition: transform 0.2s, top 0.2s;
}
.hamburger-icon::before { top: -6px; }
.hamburger-icon::after { top: 6px; }

/* Open state */
.hamburger-btn[aria-expanded="true"] .hamburger-icon { background: transparent; }
.hamburger-btn[aria-expanded="true"] .hamburger-icon::before { top: 0; transform: rotate(45deg); }
.hamburger-btn[aria-expanded="true"] .hamburger-icon::after { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  border-top: 1px solid var(--border);
  padding: 8px 0;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__item {
  display: block;
  padding: 10px 0;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.mobile-menu__item:hover { color: var(--ink); }
.mobile-menu__item--active {
  color: var(--ink);
  font-weight: 600;
}

/* ===========================
   SECTION PAGE
   =========================== */

/* Section Header */
.sectionHeader {
  background: var(--blue-wash);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--subtle-shadow);
  margin-bottom: 12px;
  position: relative;
}
.sectionHeader__ref {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* T-27.VIII's smile beside the reference: an egg glyph (below) whose face is still at rest and
   laughs only while its scene plays (public/eggs.js). */
.laughSmile__face { width: 20px; height: 20px; }

/* T-30.III's star glyph: still at rest; at the end of its scene the star comes home to it and it
   shines for a moment (public/eggs.js sets --shine from 0 to 1 and back). White on the dark page;
   the site's deeper gold with a strong warm glow on the light one, where anything paler is lost
   against the cream. */
.eggGlyph__button[data-egg="star"] .eggGlyph__icon {
  color: color-mix(in srgb, #c48b2c calc(var(--shine, 0) * 100%), currentColor);
  filter: drop-shadow(0 0 calc(var(--shine, 0) * 8px) rgba(232, 168, 58, calc(var(--shine, 0) * 0.95)));
}
[data-theme="dark"] .eggGlyph__button[data-egg="star"] .eggGlyph__icon {
  color: color-mix(in srgb, #ffffff calc(var(--shine, 0) * 100%), currentColor);
  filter: drop-shadow(0 0 calc(var(--shine, 0) * 6px) rgba(255, 255, 255, calc(var(--shine, 0) * 0.9)));
}
.laughSmile { vertical-align: -5px; }
.laughSmile__laugh,
.eggGlyph__button.is-playing .laughSmile__smile { display: none; }
.eggGlyph__button.is-playing .laughSmile__laugh { display: inline; }

/* Glyphs beside a section's reference (T-27.VIII's smile, T-20.II's lily, T-21.I's song, T-10.IV's
   spark), and the full-screen canvas a click plays on (public/eggs.js). The canvas never takes clicks. */
.eggGlyph {
  display: inline-flex;
  margin-left: 8px;
  vertical-align: -4px;
}
.eggGlyph__button {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.3s ease;
}
.eggGlyph__icon { width: 18px; height: 18px; }
.eggGlyph__button:hover,
.eggGlyph__button.is-playing { color: #B5914D; }
.eggGlyph__button:hover { transform: rotate(-8deg) scale(1.08); }
[data-theme="dark"] .eggGlyph__button:hover,
[data-theme="dark"] .eggGlyph__button.is-playing { color: var(--amber); }
.eggGlyph__button:focus-visible {
  outline: 2px solid var(--blue-solid);
  outline-offset: 2px;
  border-radius: 4px;
}
.eggStage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9000;
  pointer-events: none;
}

/* A scene's closing line (T-27.VIII's), centered over the canvas in the site's serif, at the type
   size its laugh modal used. It takes no clicks and fades on the scene's clock. */
.eggPhrase {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9001;
  width: min(560px, calc(100vw - 48px));
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg);
  pointer-events: none;
}
@media (max-width: 640px) {
  .eggPhrase { font-size: 20px; }
}
.sectionHeader__title {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.sectionHeader__chapter {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--sans);
}
.sectionHeader__summary {
  margin: 8px 0 14px;
  color: var(--soft-ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
}
.sectionHeader__chapter a {
  color: var(--muted);
  text-decoration: none;
}
.sectionHeader__chapter a:hover {
  text-decoration: underline;
  color: var(--ink);
}
.sectionHeader__actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sectionHeader__actionLink {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 58%, transparent);
  background: color-mix(in srgb, var(--surface-card) 92%, var(--blue-wash));
  transition: border-color .15s, color .15s, background .15s;
}
.sectionHeader__actionLink:hover {
  color: var(--ink);
  border-color: var(--blue-border-strong);
  background: color-mix(in srgb, var(--blue-wash) 85%, var(--surface-card));
}
.sectionHeader__actionLink--guide {
  color: var(--blue-solid);
  font-weight: 600;
}
.sectionHeader__actionLink--practice {
  color: var(--blue-solid);
  font-weight: 600;
}
.sectionHeader__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.sectionHeader__left { flex: 1; min-width: 0; }
.sectionHeader__right { flex-shrink: 0; align-self: flex-end; margin-bottom: -6px; }
.sectionHeader__sourceTopRight {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 1;
}
.sectionHeader__sourceTopRight a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
}
.sectionHeader__sourceTopRight a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.sectionHeader__source {
  margin-top: 6px;
}
.sectionHeader__source a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
}
.sectionHeader__source a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Section Header — Responsive */
@media (max-width: 640px) {
  .sectionHeader__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .sectionHeader__right {
    align-self: flex-start;
  }
  .sectionHeader__sourceTopRight {
    position: static;
    margin-top: 12px;
  }
  .sectionHeader__title {
    font-size: 36px;
  }
  .sectionHeader__actions {
    margin-top: 10px;
  }

  /* Micro grid responsive */
  .microGrid {
    flex-direction: column;
    gap: 14px;
  }
  .microGrid__divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }

  /* Band rows — stack label above bar */
  .band-row {
    flex-wrap: wrap;
  }
  .band-label {
    width: 100%;
    margin-bottom: -4px;
  }
}

/* Editorial Block */
.editorial {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  box-shadow: var(--subtle-shadow);
  margin-bottom: 12px;
}
.editorial__heading {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.editorial__intro {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--sans);
}
.editorial__section {
  margin-top: 18px;
}
.editorial__section:first-of-type {
  margin-top: 0;
}
.editorial__subhead {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--blue-solid);
}
.editorial__body {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.68;
  color: var(--soft-ink);
}

.editorial__body:last-child {
  margin-bottom: 0;
}
.editorial__profile {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.editorial__profileRow {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
}
.editorial__profileLabel {
  margin: 0;
  padding-top: 1px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
}
.editorial__profileText {
  margin: 0;
  color: var(--soft-ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .editorial__profile {
    gap: 12px;
  }
  .editorial__profileRow {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .editorial__profileLabel {
    padding-top: 0;
  }
}
.editorial__divider {
  border: none;
  border-top: 1px dashed var(--border);
  margin: 16px 0;
}

/* Chapter Section Listing */
.chapterSections {
  display: grid;
  gap: 22px;
}
.chapterSections__item {
  padding: 0;
}
.chapterSections__body {
  background: var(--overlay-subtle);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.chapterSections__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.chapterSections__sectionLink {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.chapterSections__sectionLink:hover {
  text-decoration: underline;
}
.chapterSections__convergence {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--soft-ink);
}
.chapterSections__events {
  margin: 6px 0 0;
  padding: 0 16px;
  display: grid;
  gap: 3px;
}
.chapterSections__event {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.chapterSections__eventLabel {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.chapterSections__eventLabel--seed {
  color: var(--seed-text);
}
.chapterSections__eventLabel--zenith {
  color: var(--zenith-text);
}
.chapterSections__eventLabel--milestone {
  color: var(--milestone-text);
}
.chapterSections__motifLink {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
  text-underline-offset: 2px;
}
.chapterSections__motifLink:hover {
  text-decoration-color: var(--ink);
}

/* Chapter Rail (sticky sidebar) */
.chapterRail {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  box-shadow: var(--subtle-shadow);
  padding: 18px;
  display: grid;
  gap: 18px;
}
.chapterRail__section {
  display: grid;
  gap: 6px;
}
.chapterRail__heading {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--muted);
  margin: 0;
}
.chapterRail__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chapterRail__flag {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.chapterRail__flag--seed { color: var(--seed-text); }
.chapterRail__flag--milestone { color: var(--milestone-text); }
.chapterRail__flag--zenith { color: var(--zenith-text); }
.chapterRail__body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--soft-ink);
  margin: 0;
}

/* Chapter layout: wider rail for patterns text */
.chapter-overview__content.journey-content--with-rail {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}

/* Chapter layout: rail visible on mobile, stacked above */
@media (max-width: 980px) {
  .chapter-overview__content.journey-content--with-rail {
    grid-template-columns: 1fr;
  }
  .chapter-overview__content .journey-content__rail {
    display: block;
    position: static;
    order: -1;
    margin-bottom: -2px;
  }
}

@media (max-width: 640px) {
  .chapterSections__header {
    flex-direction: column;
    gap: 2px;
  }
}

.editorial__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.editorial__pill {
  font-size: 12px;
  font-family: var(--sans);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
}

/* (threadD/E removed — replaced by threadG grid layout above) */

/* Motif Nav — Sticky pill navigator (expanded) */
.motifListSection__sub {
  margin: 0 0 10px;
  padding-left: 18px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
.sticky-sentinel {
  height: 1px;
  margin: 0;
}
.motifNav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-panel-strong);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  box-shadow: var(--subtle-shadow);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.motifNav.is-stuck {
  background: var(--surface-card);
  border-color: var(--blue-border);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .motifNav.is-stuck {
  box-shadow: 0 10px 24px rgba(0,0,0,0.34);
}
.motifNav__up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
}
.motifNav__up:hover {
  background: var(--blue-wash);
  border-color: var(--blue-border);
  color: var(--ink);
}
/* Section context row — top of pill bar, only when stuck */
.motifNav__ctx-row {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.motifNav.is-stuck .motifNav__ctx-row {
  display: flex;
}
.motifNav__ctx {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.motifNav__ctx-ref {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.motifNav__ctx-title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.motifNav__divider {
  display: none;
}
.motifNav__list-shell {
  position: relative;
  min-width: 0;
}
.motifNav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  flex: 1;
}
.motifNav__edge {
  display: none;
}
.motifNav__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-inset);
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.motifNav__pill:not(.motifNav__pill--current):hover {
  background: var(--surface-inset);
  border-color: var(--border);
  color: var(--ink);
}
.motifNav__pill--current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.motifNav__pill--current:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.motifNav__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.motifNav__dot--primary { background: var(--milestone-dot); }
.motifNav__dot--pillar { background: var(--blue-solid); }
.motifNav__dot--supporting { background: rgba(47,133,90,0.7); }
.motifNav__dot--minor { background: var(--overlay-strong); }
.motifNav__pill.motifNav__pill--tier-primary:not(.motifNav__pill--current) { color: var(--tier-primary-text); border-color: var(--tier-primary-border); background: var(--tier-primary-bg); }
.motifNav__pill.motifNav__pill--tier-pillar:not(.motifNav__pill--current) { color: var(--tier-pillar-text); border-color: var(--tier-pillar-border); background: var(--tier-pillar-bg); }
.motifNav__pill.motifNav__pill--tier-supporting:not(.motifNav__pill--current) { color: var(--tier-supporting-text); border-color: var(--tier-supporting-border); background: var(--tier-supporting-bg); }
.motifNav__pill.motifNav__pill--tier-minor:not(.motifNav__pill--current) { color: var(--tier-minor-text); border-color: var(--tier-minor-border); background: var(--tier-minor-bg); }
.motifNav__pill.motifNav__pill--tier-echo:not(.motifNav__pill--current) { color: var(--tier-echo-text); border-color: var(--tier-echo-border); background: var(--tier-echo-bg); }
.motifNav__pill--disabled { pointer-events: none; cursor: default; opacity: 0.45; }
.motifNav__pill--disabled:hover { background: var(--surface-inset); border-color: transparent; color: var(--muted); }
/* No stuck-state transformations — bar looks the same in-flow and stuck */

/* Compact sticky motif nav on smaller screens */
@media (max-width: 900px) {
  .motifNav.is-stuck {
    padding: 8px 10px;
    gap: 4px;
  }
  .motifNav.is-stuck .motifNav__ctx-row {
    gap: 6px;
  }
  .motifNav.is-stuck .motifNav__ctx-ref {
    font-size: 12px;
  }
  .motifNav.is-stuck .motifNav__ctx-title {
    font-size: 13px;
  }
  .motifNav.is-stuck .motifNav__list-shell {
    width: 100%;
  }
  .motifNav.is-stuck .motifNav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 1px;
  }
  .motifNav.is-stuck .motifNav__edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34px;
    display: flex;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .motifNav.is-stuck .motifNav__edge--left {
    left: 0;
    justify-content: flex-start;
    padding-left: 2px;
    background: linear-gradient(
      90deg,
      var(--surface-card) 18%,
      color-mix(in srgb, var(--surface-card) 94%, transparent) 58%,
      color-mix(in srgb, var(--surface-card) 0%, transparent) 100%
    );
  }
  .motifNav.is-stuck .motifNav__edge--right {
    right: 0;
    justify-content: flex-end;
    padding-right: 2px;
    background: linear-gradient(
      270deg,
      var(--surface-card) 18%,
      color-mix(in srgb, var(--surface-card) 94%, transparent) 58%,
      color-mix(in srgb, var(--surface-card) 0%, transparent) 100%
    );
  }
  .motifNav.is-stuck .motifNav__edgeChevron {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--ink) 78%, var(--muted) 22%);
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  }
  .motifNav.is-stuck.is-overflow-left .motifNav__edge--left,
  .motifNav.is-stuck.is-overflow-right .motifNav__edge--right {
    opacity: 1;
  }
  .motifNav.is-stuck .motifNav__list::-webkit-scrollbar {
    display: none;
  }
  .motifNav.is-stuck .motifNav__pill {
    font-size: 13px;
    padding: 7px 12px;
  }
  .motifNav.is-stuck .motifNav__up {
    width: 24px;
    height: 24px;
  }
}

/* Motif Card Name & Definition (section page card headers) */
.motifCard__name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--serif);
  line-height: 1.32;
}
.motifCard__name a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--surface-card-border);
  padding-bottom: 1px;
  transition: border-color 0.15s;
}
.motifCard__name a:hover {
  border-color: var(--ink);
}

/* ============================================
   Mini TOC — Floating dots (motif trail page)
   ============================================ */
.miniToc {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.miniToc.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.miniToc__item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--muted);
  transition: all 0.2s;
}
.miniToc__label {
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateX(4px);
  transition: all 0.2s;
  white-space: nowrap;
  pointer-events: none;
}
.miniToc__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: transparent;
  transition: all 0.2s;
  flex-shrink: 0;
}
.miniToc__item:hover .miniToc__label {
  opacity: 1;
  transform: translateX(0);
}
.miniToc__item:hover .miniToc__dot {
  border-color: var(--ink);
}
.miniToc__item--active .miniToc__dot {
  background: var(--accent);
  border-color: var(--accent);
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.25);
}
.miniToc__item--active .miniToc__label {
  color: var(--accent);
}

@media (max-width: 640px) {
  .miniToc { right: 8px; gap: 14px; }
  .miniToc__dot { width: 8px; height: 8px; }
  .miniToc__label { display: none; }
}

@media (max-width: 920px){
  .breadcrumb-row { flex-direction: column; gap: 8px; }
}

@media (max-width: 860px) {
  .nav-tabs { align-items: center; }
  .nav-tab--link { display: none; }
  .topbar .theme-btn,
  .topbar .hamburger-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 0 -1px;
    flex-shrink: 0;
  }
  .topbar .theme-btn {
    margin-left: 4px;
  }
  .topbar .hamburger-btn {
    margin-right: -6px;
  }
  .topbar .theme-btn .theme-btn__icon,
  .topbar .theme-btn .theme-btn__icon svg {
    width: 19px;
    height: 19px;
  }
  .hamburger-btn { display: block; }
}

@media (min-width: 861px) {
  .topbar .theme-btn {
    transform: translateX(6px);
  }
}

@media (max-width: 540px){
  .select-label{ display: none; }
  .breadcrumb-row{ flex-direction: column; align-items: stretch; }
  .select-group{ width: 100%; }
  .select-group form{ width: 100%; }
  .select{ min-width: 0; width: 100%; max-width: 100%; }
  .sectionSelectCustom,
  .sectionSelectCustom__trigger { min-width: 0; width: 100%; }
  .sectionSelectCustom__panel {
    width: 100%;
    max-height: min(60vh, 520px);
  }
  .trailMap .marker{ width: 107px; }
  .kvGrid{ grid-template-columns: 1fr; }
}

/* ── Motifs Index Page ── */

.motifs-index{
  max-width: 1080px;
  margin: 5px auto 0;
  padding: 0 0 4rem;
  --motifs-az-top: 10px;
  --motifs-az-scroll-margin: 80px;
}

.motifs-index__card{
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  box-shadow: var(--subtle-shadow);
  padding: 22px 22px 18px;
  margin-bottom: 12px;
}

.motifs-index__essayHero{
  margin-bottom: 12px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--blue-border) 72%, var(--surface-card-border) 28%);
  background: color-mix(in srgb, var(--surface-card) 88%, rgba(74, 152, 232, 0.08));
  box-shadow: var(--subtle-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* Reading paths: a tile per reading, the whole tile a link. At 760px and
   below they stack inside the tinted box (full-bleed); above that the box
   falls away and each tile wears its tint. */
.motifs-index__paths{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}
.motifs-index__path{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px 13px;
  border-radius: 12px;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-card);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.motifs-index__path:hover{
  border-color: var(--blue-border-strong);
  background: linear-gradient(var(--blue-wash), var(--blue-wash)), var(--surface-card);
}
.motifs-index__path:focus-visible{
  outline: 2px solid var(--blue-solid); outline-offset: 1px;
}
.motifs-index__pathKind{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-solid);
}
.motifs-index__pathTitle{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.motifs-index__pathCopy{
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--soft-ink);
  text-wrap: pretty;
}
.motifs-index__pathMeta{
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
@media (min-width: 761px) {
  .motifs-index__paths{
    gap: 12px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .motifs-index__path{
    padding: 18px 20px 16px;
    border-radius: var(--radius);
    border-color: color-mix(in srgb, var(--blue-border) 72%, var(--surface-card-border) 28%);
    background: color-mix(in srgb, var(--surface-card) 88%, rgba(74, 152, 232, 0.08));
    box-shadow: var(--subtle-shadow);
  }
  .motifs-index__path:hover{
    border-color: var(--blue-solid);
    background: color-mix(in srgb, var(--surface-card) 88%, rgba(74, 152, 232, 0.14));
  }
}

.motifs-index__sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.motifs-index__controls{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 10px; border-radius: 12px;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-card); box-shadow: var(--subtle-shadow);
}
.motifs-index__tablist{
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.motifs-index__tab{
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--surface-card-border);
  background: var(--surface-card); color: var(--muted); cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.motifs-index__tab:hover{
  color: var(--blue-solid); border-color: var(--blue-solid);
}
.motifs-index__tab[aria-selected="true"]{
  color: var(--ink); border-color: var(--blue-border-strong);
  background: var(--blue-wash); font-weight: 600;
}
.motifs-index__tab:focus-visible{
  outline: 2px solid var(--blue-solid); outline-offset: 1px;
}
.motifs-index__essay-cta{
  margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap;
}
.motifs-index__essay-cta a{
  color: var(--blue-solid); text-decoration: none; font-weight: 500;
}
.motifs-index__essay-cta a:hover{ text-decoration: underline; }

.motifs-index__searchWrap{ position: relative; flex: 1 1 240px; min-width: 200px; }
.motifs-index__searchWrap::before{
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; pointer-events: none;
  background-color: var(--muted); transition: background-color 0.15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.motifs-index__searchWrap:focus-within::before{ background-color: var(--blue-solid); }
.motifs-index__search-input{
  width: 100%; padding: 11px 42px 11px 36px; font-family: var(--sans); font-size: 13px;
  border: 1px solid var(--overlay-strong); border-radius: 8px;
  background: var(--surface-solid); color: var(--fg);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.motifs-index__search-input::placeholder{ color: var(--muted); }
.motifs-index__search-input:hover{ border-color: var(--overlay-heavy); }
.motifs-index__search-input:focus{
  border-color: var(--blue-solid); box-shadow: 0 0 0 3px var(--blue-wash);
}
.motifs-index__clear-btn{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 1px solid transparent; background: transparent; color: var(--muted);
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  display: none; font-size: 17px; line-height: 1; padding: 0;
}
.motifs-index__clear-btn:hover{ color: var(--ink); background: var(--overlay-subtle); }
.motifs-index__clear-btn:focus-visible{
  outline: 2px solid var(--blue-solid); outline-offset: 1px;
}

.motifs-index__no-results{
  display: none; margin: 0 0 12px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--surface-inset-border);
  background: var(--surface-inset); font-size: 13px; color: var(--muted);
}

.motifs-index__azJump{
  position: sticky; top: var(--motifs-az-top); z-index: 14;
  margin-bottom: 12px; padding: 8px; border-radius: 12px;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-card); box-shadow: var(--subtle-shadow);
  display: none;
}
.motifs-index__azShell{
  position: relative;
}
.motifs-index__azTrack{
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  scroll-behavior: smooth;
}
.motifs-index__azTrack::-webkit-scrollbar{
  display: none;
}
.motifs-index__azEdge{
  position: absolute;
  top: 0;
  bottom: 2px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.motifs-index__azEdge--left{
  left: 0;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-card) 97%, var(--surface-panel-strong) 3%) 0%, color-mix(in srgb, var(--surface-card) 82%, transparent) 58%, transparent 100%);
}
.motifs-index__azEdge--right{
  right: 0;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--surface-card) 97%, var(--surface-panel-strong) 3%) 0%, color-mix(in srgb, var(--surface-card) 82%, transparent) 58%, transparent 100%);
}
.motifs-index__azChevron{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--ink) 74%, var(--muted) 26%);
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--surface-card) 72%, transparent);
}
.motifs-index__azShell.is-scrollable-left .motifs-index__azEdge--left,
.motifs-index__azShell.is-scrollable-right .motifs-index__azEdge--right{
  opacity: 1;
}
.motifs-index__azBtn{
  border: 1px solid var(--surface-card-border); background: var(--surface-panel);
  color: var(--muted); text-decoration: none; padding: 5px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s;
  outline: none;
  box-shadow: none;
}
.motifs-index__azBtn.is-active{
  color: var(--ink); border-color: var(--blue-border-strong); background: var(--blue-wash);
}
.motifs-index__azBtn:focus{
  outline: none;
  box-shadow: none;
}
.motifs-index__azBtn:focus-visible{
  color: var(--ink);
  border-color: var(--blue-solid);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue-wash) 92%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .motifs-index__azBtn:hover{
    color: var(--ink);
    border-color: var(--blue-border-strong);
    background: var(--blue-wash);
  }
}
/* Below 900px, the same size as the compact pinned pills on Full Trail and
   Section Motifs, for reliable tapping. */
@media (max-width: 900px) {
  .motifs-index__azBtn{ padding: 7px 12px; font-size: 13px; }
}

.motifs-index__panel{ display: none; }
.motifs-index__panel.is-active{ display: block; }

.motifs-index__groupGrid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px;
}
.motifs-index__group-card{
  border: 1px solid var(--surface-card-border); border-radius: var(--radius);
  background: var(--surface-card); box-shadow: var(--subtle-shadow); overflow: clip;
}
.motifs-index__group-head{
  border-bottom: 1px solid var(--surface-card-border);
  padding: 11px 13px; background: var(--overlay-subtle);
}
.motifs-index__group-titleRow{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.motifs-index__group-title{
  font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--fg);
}
.motifs-index__group-count{
  font-family: var(--sans); font-size: 13px; color: var(--muted); white-space: nowrap;
}
.motifs-index__group-desc{
  font-family: var(--serif); font-size: 16px; color: var(--muted); line-height: 1.5;
}

.motifs-index__motif-list{ padding: 2px 0; }
.motifs-index__motif-row{
  display: block; min-height: 42px; padding: 10px 13px;
  border-top: 1px solid var(--surface-inset-border);
  text-decoration: none; color: var(--fg);
  transition: background 0.12s, color 0.12s;
}
.motifs-index__motif-row:first-child{ border-top: 0; }
.motifs-index__motif-row:hover{
  background: var(--blue-wash); color: var(--ink);
}
.motifs-index__motif-row:focus-visible{
  outline: 2px solid var(--blue-solid); outline-offset: -2px;
  background: var(--blue-wash);
}
.motifs-index__motif-name{
  display: block;
  font-family: var(--serif); font-size: 16px; line-height: 1.3; color: var(--blue-solid);
}
.motifs-index__motif-row:hover .motifs-index__motif-name,
.motifs-index__motif-row:focus-visible .motifs-index__motif-name{
  color: var(--ink);
}
.motifs-index__motif-def{
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.motifs-index__motif-row:hover .motifs-index__motif-def,
.motifs-index__motif-row:focus-visible .motifs-index__motif-def{
  color: var(--soft-ink);
}

/* Definition depth — short by default, italic short above full when toggled on. */
.motifs-index__motif-def--long{ display: none; }
.motifs-index__panel.is-longDefs .motifs-index__motif-def--short{ font-style: italic; }
.motifs-index__panel.is-longDefs .motifs-index__motif-def--long{ display: block; }

/* A search match found only in the long definition reveals it, so the row shows why it matched. */
.motifs-index__panel:not(.is-longDefs) .motifs-index__motif-row.is-revealLong .motifs-index__motif-def--short{ display: none; }
.motifs-index__motif-row.is-revealLong .motifs-index__motif-def--long{ display: block; }

.motifs-index__movement-desc--long{ display: none; white-space: pre-line; }
.motifs-index__panel.is-longDefs .motifs-index__movement-desc--short{ display: none; }
.motifs-index__panel.is-longDefs .motifs-index__movement-desc--long{ display: block; }

.motifs-index__defsToggle{
  font: inherit; text-align: left; color: inherit;
  margin: 0 0 12px;
}
.motifs-index__defsToggle[hidden]{ display: none; }
.contents-controls{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
}
.contents-controls > .motifs-index__group-count,
.contents-controls > .pin-toggle{ margin: 0; }
[data-contents-root] [hidden]{ display: none; }

/* Motif ladder — sticky rail beside the Contents list on wide screens. */
.motifLadder{ display: none; }
.motifLadder__body{ padding: 10px 13px; }
.motifLadder__svg{
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: calc(100vh - 150px);
}
.motifLadder__legend{ margin-top: 8px; }
.motifLadder__ring{ display: none; }
.motifLadder__mark.is-linked .motifLadder__ring{ display: inline; }
.motifLadder__mark:focus-visible,
.motifLadder__rung:focus-visible{ outline: 2px solid var(--blue-solid); outline-offset: 2px; }
a.motifLadder__rung:hover text,
.motifLadder__rung.is-current text{ fill: var(--blue-solid); font-weight: 700; }
.motifLadder__rung.is-current line{ stroke: var(--blue-solid); stroke-opacity: 1; stroke-width: 2; }
.motifLadder.is-keyMomentsOnly .motifLadder__mark--plain{ opacity: 0.2; pointer-events: none; }
@media (min-width: 900px) {
  .motifContents__layout.has-ladder{
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px; align-items: start;
  }
  .motifContents__layout.has-ladder .motifLadder{
    display: block; position: sticky; top: 10px;
  }
}

[data-contents-root] .filtered-empty__title{ font-family: var(--sans); font-size: 13px; }

/* Section Paragraphs — a Contents card holding a motif × paragraph grid.
   The selection bar and paragraph numbers stick while the rows scroll. */
[data-paragraphs-root] [hidden]{ display: none; }
/* --surface-card is --panel at 92% over the page, so pinned cells that rows
   slide beneath use that same colour made opaque, or the dots show through. */
.paragraphs__card{
  /* Selecting a motif resizes the sticky header; letting the browser re-anchor
     the scroll on top of that made the page jump, so the grid opts out. */
  overflow-anchor: none;
  /* Wide enough on desktop for every motif name on one line (the longest is
     Crucifixion and Resurrection); phones only wrap that longest one. */
  --pg-name: 16em; --pg-col: 32px;
  /* Key-moment column: room for the widest badge, ▲ Milestone. The card sets
     it to 0 when the section has no key moments, and phones drop it. */
  --pg-km: 104px;
  /* The name column's current width. The script sets it: fitted to this
     section's longest name (capped at --pg-name), or with Summaries on, the
     width the paragraph columns leave. These are the no-script fallbacks. */
  --pg-name-now: var(--pg-name);
  --pg-card-solid: color-mix(in srgb, var(--panel) 92%, var(--bg));
}
@media (max-width: 760px) {
  /* 12em keeps names up to 20 characters (Perception—Knowledge) on one line. */
  .paragraphs__card{ --pg-name: 12em; --pg-col: 24px; --pg-km: 0px; }
}
/* The sticky block wears the card-head tint, made opaque so rows scrolling
   beneath it don't show through. */
.paragraphsGrid__sticky{
  /* The section header's blue wash, laid over the opaque card colour so rows
     sliding beneath stay hidden. Blue sets it apart from the gray group headings. */
  --pg-head-bg: linear-gradient(var(--blue-wash), var(--blue-wash)), var(--pg-card-solid);
  position: sticky; top: var(--pg-sticky-top, 0px); z-index: 2;
  background: var(--pg-head-bg);
  border-bottom: 1px solid var(--surface-card-border);
}
.paragraphsGrid__status{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 11px 13px 10px;
  border-bottom: 1px solid var(--surface-inset-border);
}
/* The highlight chips list exactly the shared paragraphs, so they wear the
   shared columns' blue rather than the usual gray. */
.paragraphsGrid__status .stop__source-links a.stop__source-link{ background: var(--blue-light); color: var(--ink); }
.paragraphsGrid__status .stop__source-links a.stop__source-link:hover{ background: var(--blue-border); }
.paragraphsGrid__status .stop__source{ margin-top: 0; min-width: 0; }
/* The status line is UI text, so its notes and acim.org chips use the site's
   13px rather than the source links' smaller size on motif cards. */
.paragraphsGrid__status .stop__source-links,
.paragraphsGrid__status .stop__source-links a.stop__source-link{ font-size: 13px; }
.paragraphsGrid__statusEnd{ display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
/* Selected rows move under the paragraph numbers, beneath their own heading. */
.paragraphsGrid [data-paragraphs-pinned] > .paragraphsGrid__tier:first-child th{ border-top: 1px solid var(--surface-card-border); }
.paragraphsGrid__selectedLabel{
  position: sticky; left: 13px;
  display: inline-flex; align-items: center; gap: 10px;
}
.paragraphsGrid__selectedLabel .motifs-index__group-title{ position: static; }
/* "Selected" is a UI label, set like the tier chips' "Show". */
.paragraphsGrid__selectedLabel .motifs-index__group-title{
  font-size: 13px; color: var(--muted); font-family: var(--sans);
  font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
}
.paragraphsGrid__unpick{ color: var(--muted); font-weight: 400; }
/* The header scrolls sideways too (scrollbar hidden), so a trackpad, shift-wheel
   or swipe over the numbers or pinned rows moves the grid; the script keeps the
   two in step both ways. */
.paragraphsGrid__headScroll{ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.paragraphsGrid__headScroll::-webkit-scrollbar{ display: none; }
.paragraphsGrid__scroll{ overflow-x: auto; }

/* More paragraphs off to one side: the sub-page nav's fade-and-chevron edges
   on the sticky paragraph numbers only, fading to the header's blue over the card. The rows themselves aren't faded; a fade
   over them would also wash out the scrollbar and the tier-heading bands.
   The left edge begins where the pinned motif names end. */
.paragraphsGrid__headShell{ position: relative; }
/* Only the paragraph-number row fades, not the pinned rows beneath it; the
   script measures that row as --pg-head-row. */
.paragraphsGrid__headShell .subpage-nav-shell__edge{ top: 0; bottom: auto; height: var(--pg-head-row, 100%); border-radius: 0; }
.paragraphsGrid__headShell .subpage-nav-shell__edge--left{
  left: calc(var(--pg-name-now) + var(--pg-km));
  background:
    linear-gradient(90deg, var(--blue-wash) 18%, color-mix(in srgb, var(--blue-wash) 92%, transparent) 56%, transparent 100%),
    linear-gradient(90deg, var(--pg-card-solid) 18%, color-mix(in srgb, var(--pg-card-solid) 92%, transparent) 56%, transparent 100%);
}
.paragraphsGrid__headShell .subpage-nav-shell__edge--right{
  right: 0;
  background:
    linear-gradient(270deg, var(--blue-wash) 18%, color-mix(in srgb, var(--blue-wash) 92%, transparent) 56%, transparent 100%),
    linear-gradient(270deg, var(--pg-card-solid) 18%, color-mix(in srgb, var(--pg-card-solid) 92%, transparent) 56%, transparent 100%);
}
.paragraphs__card.is-overflow-left .paragraphsGrid__headShell .subpage-nav-shell__edge--left,
.paragraphs__card.is-overflow-right .paragraphsGrid__headShell .subpage-nav-shell__edge--right{ opacity: 1; }
.paragraphsGrid{
  table-layout: fixed; border-collapse: collapse;
  width: max(100%, calc(var(--pg-name-now) + var(--pg-km) + var(--pg-cols) * var(--pg-col)));
}
.paragraphsGrid__nameCol{ width: var(--pg-name-now); }
.paragraphsGrid__kmCol{ width: var(--pg-km); }
.paragraphsGrid__paraCol{ width: var(--pg-col); }
:where(.paragraphsGrid) th, :where(.paragraphsGrid) td{ padding: 0; font-weight: inherit; }
.paragraphsGrid thead th{ padding: 8px 0; text-align: center; vertical-align: bottom; }
/* Paragraph numbers: UI text at the site's 13px, linking to acim.org. */
.paragraphsGrid__num{
  display: block; font-family: var(--sans); font-size: 13px; color: var(--muted); text-decoration: none;
}
.paragraphsGrid__num:hover{ color: var(--ink); }
.paragraphsGrid__name{
  position: sticky; left: 0; z-index: 1;
  background: var(--pg-card-solid);
  padding: 8px 10px 8px 13px; text-align: left;
}
.paragraphsGrid thead .paragraphsGrid__name{ text-align: left; padding-left: 13px; background: var(--pg-head-bg); }
.paragraphsGrid__name .motifs-index__motif-name{
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  text-align: left; cursor: pointer; overflow-wrap: anywhere;
  display: inline; /* lets key-moment badges follow the name, as on Contents */
}
/* Key moments: badges line up in their own column, pinned beside the names.
   On phones that column collapses and the badges follow the name instead. */
.paragraphsGrid__km{
  position: sticky; left: var(--pg-name-now); z-index: 1;
  background: var(--pg-card-solid);
  padding: 8px 10px 8px 0; text-align: left; white-space: nowrap; overflow: hidden;
}
.paragraphsGrid thead .paragraphsGrid__km{ background: var(--pg-head-bg); padding: 8px 2px 8px 0; text-align: left; }
/* Header labels share the paragraph numbers' small muted type, on one baseline
   with ¶ pushed right so it sits just before ¶1. With a key-moment column, the
   name cell's copy of ¶ hides. */
.paragraphsGrid thead .paragraphsGrid__name{ padding-right: 2px; }
.paragraphsGrid__headLabel{ display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.paragraphs__card.has-km .paragraphsGrid__pilcrow--name{ display: none; }
.paragraphsGrid__badges{ display: none; white-space: nowrap; }
@media (max-width: 760px) {
  .paragraphsGrid__km,
  .paragraphsGrid thead .paragraphsGrid__km{ padding: 0; }
  .paragraphsGrid__km > *{ display: none; }
  .paragraphs__card.has-km .paragraphsGrid__pilcrow--name{ display: inline; }
  /* The badge takes its own line under the name; dots sit level with the name. */
  .paragraphsGrid__badges{ display: block; margin-top: 4px; }
  .paragraphs__card .paragraphsGrid__dotLink{ align-items: flex-start; padding-top: 15px; }
  .paragraphs__card .paragraphsGrid__cell{ vertical-align: top; }
}
.paragraphsGrid__row th, .paragraphsGrid__row td{ border-top: 1px solid var(--surface-inset-border); }
/* The first visible row under a heading (or at the top) has no rule of its own;
   the script moves is-first as selected rows step out of the list. */
.paragraphsGrid__tier + .paragraphsGrid__row th,
.paragraphsGrid__tier + .paragraphsGrid__row td,
.paragraphsGrid tbody > .paragraphsGrid__row:first-child th,
.paragraphsGrid tbody > .paragraphsGrid__row:first-child td,
.paragraphsGrid__row.is-first th,
.paragraphsGrid__row.is-first td{ border-top: 0; }

/* Summaries: the Contents snippet wrapped under the motif name, in the pinned
   name column, which widens so most snippets take a line or two. Dots then sit
   level with the name rather than the middle of the taller row. */
.paragraphsGrid__summaryText{ display: none; }
/* With Summaries on, the name column takes whatever width the paragraph and
   key-moment columns leave (never less than --pg-name), so snippets wrap only
   when the section is too wide. */
.paragraphs__card.is-summaries{ --pg-name: 26em; }
.paragraphs__card.is-summaries .paragraphsGrid__km{ vertical-align: top; }
.paragraphs__card.is-summaries .paragraphsGrid__summaryText{ display: block; }
.paragraphs__card.is-summaries .paragraphsGrid__dotLink{ align-items: flex-start; padding-top: 15px; }
.paragraphs__card.is-summaries .paragraphsGrid__cell{ vertical-align: top; }
@media (max-width: 760px) {
  .paragraphs__card.is-summaries{ --pg-name: 14em; }
}
/* The Summaries switch shares the heading's line, right-aligned. */
.paragraphs__titleRow{ align-items: center; margin-bottom: 24px; }
.paragraphs__titleRow .subpage-heading{ margin-bottom: 0; }
.paragraphs__titleRow .pin-toggle{ margin: 0; }

/* Motif Sections tab — the Paragraphs grid turned on its side: sections down
   the left, motifs across the top. It shares the grid styles above; these are
   its differences. The page's own motif is the primary column, tinted. */
[data-sections-root] [hidden]{ display: none; }
/* Chapter titles stay inside the section-name column (wrapping if long) so they
   never run across the motif columns; the heading band still spans the row. */
.sections__card .paragraphsGrid__tier .motifs-index__group-title{
  display: inline-block; max-width: calc(var(--pg-name-now) - 23px); vertical-align: top;
}
.sections__card{ --pg-name: 18em; --pg-col: 104px; }
.sectionsGrid__motifHead{ padding: 8px 4px; vertical-align: bottom; }
/* Motif names in the header read like the chapter headings (they're content,
   not UI labels); the primary column is set apart by its tint. */
.sectionsGrid__motifName{ display: block; line-height: 1.25; }
.paragraphsGrid__cell.is-primary,
.paragraphsGrid thead .sectionsGrid__motifHead.is-primary{ background: var(--blue-wash); }
/* Added columns carry a Remove pill in a header row of its own, shown only
   when comparing, so pills align across the top and names across the bottom. */
.sections__card:not(.is-comparing) .sectionsGrid__removeRow{ display: none; }
.sectionsGrid__removeCell{ padding: 8px 4px 0; text-align: center; vertical-align: bottom; }
.paragraphsGrid thead .sectionsGrid__removeCell.is-primary{ background: var(--blue-wash); }
.sectionsGrid__remove:focus-visible{ outline: 2px solid var(--blue-solid); outline-offset: 2px; }
/* Section names and key-moment marks are links, without the default underline. */
.sectionsGrid__label,
.sections__card .paragraphsGrid__dotLink{ text-decoration: none; }
.sections__card .paragraphsGrid [data-motif].is-colHover{ background: var(--overlay-light); }
.sections__card .sectionsGrid__motifHead.is-colHover .sectionsGrid__motifName{ color: var(--ink); }
/* Key moments draw their own mark in place of the dot, in the badge colors.
   The mark sits in the dot's 7px box so both centre at the same height. */
.sectionsGrid__km{
  display: inline-flex; align-items: center; justify-content: center;
  width: 7px; height: 7px; overflow: visible;
  font-family: var(--sans); font-size: 13px; line-height: 7px;
}
.sectionsGrid__km--seed{ color: var(--seed-dot); }
.sectionsGrid__km--milestone{ color: var(--milestone-dot); }
.sectionsGrid__km--zenith{ color: var(--zenith-dot); }
.paragraphsGrid__cell.is-tierHidden > *{ display: none; }
.paragraphs__card.is-summaries .paragraphsGrid__summaryText.is-tierHidden{ display: none; }
/* Summaries sit in each motif's own column: the mark becomes a bullet and the
   snippet follows it. The section-name column stays at its usual width and
   the motif columns share the rest (never under --pg-summary-col). */
.sections__card{ --pg-summary-col: 12em; }
.sectionsGrid__cellSummary{ display: none; }
/* Section names can wrap; with Summaries on they give their room to the motifs. */
.sections__card.is-summaries{ --pg-name: 14em; }
.sections__card.is-summaries .paragraphsGrid__dotLink{
  position: static;
  display: grid; grid-template-columns: 7px minmax(0, 1fr); column-gap: 10px; align-items: start;
  padding: 8px 12px 10px 10px; text-align: left;
}
.sections__card.is-summaries .paragraphsGrid__dotLink > .tierChip__dot,
.sections__card.is-summaries .paragraphsGrid__dotLink > .sectionsGrid__km{ margin-top: 9px; }
.sections__card.is-summaries .sectionsGrid__cellSummary{ display: block; margin-top: 0; }
.sections__card.is-summaries .paragraphsGrid__dotLink:hover .sectionsGrid__cellSummary{ color: var(--soft-ink); }
@media (max-width: 760px) {
  .sections__card.is-summaries{ --pg-name: 12em; --pg-summary-col: 13em; }
}
.sectionsGrid__compare{ min-width: 0; }
[data-sections-root] > .filtered-empty{ margin-top: 12px; }
@media (max-width: 760px) {
  .sections__card{ --pg-name: 12em; --pg-col: 84px; }
}

.paragraphsGrid tbody .paragraphsGrid__tier:first-child th{ border-top: 0; }
.paragraphsGrid__tier th{ text-align: left; border-top: 1px solid var(--surface-card-border); }
.paragraphsGrid__tier .motifs-index__group-title{ position: sticky; left: 13px; }
.paragraphsGrid__cell{ position: relative; text-align: center; vertical-align: middle; }
/* The whole cell is the link, not just the dot, so it is easy to hit on a phone. */
.paragraphsGrid__dotLink{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.paragraphsGrid__dotLink:focus-visible{ outline: 2px solid var(--blue-solid); outline-offset: -2px; }
.paragraphsGrid__cell .tierChip__dot{ display: inline-block; vertical-align: middle; background: var(--ink); }
.paragraphsGrid__cell--pageStart{ border-left: 2px solid var(--overlay-strong); }

/* Pointer feedback is gray, selection is blue, so the two never blur together.
   Sticky name cells layer the tint over the card colour to stay opaque. */
.paragraphsGrid__row:hover th, .paragraphsGrid__row:hover td,
.paragraphsGrid [data-p].is-colHover{ background: var(--overlay-light); }
.paragraphsGrid__row:hover .paragraphsGrid__name,
.paragraphsGrid__row:hover .paragraphsGrid__km{
  background: linear-gradient(var(--overlay-light), var(--overlay-light)), var(--pg-card-solid);
}
.paragraphsGrid__col.is-colHover .paragraphsGrid__num,
.paragraphsGrid__col.is-match .paragraphsGrid__num{ color: var(--ink); font-weight: 700; }
.paragraphsGrid__name .motifs-index__motif-name:hover{ color: var(--ink); }

/* Selected motifs light their rows; the paragraphs they all share light their
   columns; where the two cross is darker still. Everything else fades back. */
.paragraphsGrid__row.is-selected th, .paragraphsGrid__row.is-selected td,
.paragraphsGrid [data-p].is-match{ background: var(--blue-light); }
.paragraphsGrid__row.is-selected .paragraphsGrid__name,
.paragraphsGrid__row.is-selected .paragraphsGrid__km{
  background: linear-gradient(var(--blue-light), var(--blue-light)), var(--pg-card-solid);
}
.paragraphsGrid__row.is-selected td.is-match{ background: var(--blue-border); }
.paragraphsGrid__row.is-selected .motifs-index__motif-name{ color: var(--ink); font-weight: 700; }
/* Fading touches only what a cell holds (dot, number), never its tint, so a
   selected row stays one even band and the shared columns stay solid. */
.paragraphsGrid [data-p] > *{ transition: opacity 0.15s; }
.paragraphsGrid [data-p].is-dimmed > *{ opacity: 0.25; }
/* The filler column past the last paragraph isn't part of the grid. */
.paragraphsGrid__row:hover td.paragraphsGrid__spacer,
.paragraphsGrid__row.is-selected td.paragraphsGrid__spacer{ background: none; }
.paragraphsGrid__name .motifs-index__motif-name:focus-visible{ outline: 2px solid var(--blue-solid); outline-offset: 2px; }
.motifs-index__defsToggle:focus-visible{
  outline: 2px solid var(--blue-solid); outline-offset: 2px;
}

.motifs-index__az-section{
  border: 1px solid var(--surface-card-border); border-radius: var(--radius);
  background: var(--surface-card); box-shadow: var(--subtle-shadow);
  overflow: clip; scroll-margin-top: var(--motifs-az-scroll-margin);
}
.motifs-index__az-section + .motifs-index__az-section{ margin-top: 12px; }
.motifs-index__az-head{
  border-bottom: 1px solid var(--surface-card-border);
  padding: 11px 13px; background: var(--overlay-subtle);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.motifs-index__az-title{
  font-family: var(--mono, var(--sans)); font-size: 13px; font-weight: 700;
  color: var(--blue-solid); letter-spacing: 0.4px;
}

.motifs-index mark{
  background: rgba(255, 221, 87, 0.28); color: inherit;
  padding: 0 1px; border-radius: 3px;
}

@media (max-width: 860px) {
  .motifs-index__pathTitle{ font-size: 21px; }
  .motifs-index__pathCopy{ font-size: 15px; line-height: 1.55; }
  .motifs-index__pathMeta{ display: none; }
  .motifs-index__azJump{
    padding-left: 10px;
    padding-right: 10px;
  }
  .motifs-index__groupGrid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .motifs-index__paths{
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 8px;
  }
  .motifs-index__path{ padding: 13px 14px 12px; }
  .motifs-index{
    --motifs-az-top: 6px;
    --motifs-az-scroll-margin: 76px;
  }
}

.motifs-index__essay-title{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 0.5rem;
  text-align: left;
}

.motifs-index__essay p{
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 1.25rem;
  color: var(--soft-ink);
}

.motifs-index__essay a{
  color: var(--blue-solid);
  text-decoration: underline;
  font-weight: 400;
}

.motifs-index__essay a:hover{
  color: var(--ink);
}

.motifs-index__essay-subhead{
  margin: 16px 0 6px;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.motifs-essay-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
  gap: 14px;
  align-items: start;
}

.motifs-essay-page__main {
  min-width: 0;
}

.motifs-essay-page__bottom-nav {
  padding-left: 0;
  padding-right: 0;
}

.motifs-essay-page__bottom-nav .subpage-bottom-nav__link {
  max-width: 260px;
}

.motifs-essay-page__rail {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 10px;
}

.motifs-essay-page__toc {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-panel) 94%, transparent);
  padding: 10px;
}

.motifs-essay-page__toc h2 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.motifs-essay-page__toc ul {
  margin: 9px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.motifs-essay-page__tocAux {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 72%, transparent);
}

.motifs-essay-page__tocAux--top {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.motifs-essay-page__toc a {
  display: block;
  padding: 4px 6px 4px 10px;
  border-left: 2px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  overflow-wrap: anywhere;
  line-height: 1.45;
  transition: color .15s, background .15s, border-color .15s;
}

.motifs-essay-page__toc a.is-aux {
  font-size: 13px;
  color: color-mix(in srgb, var(--muted) 92%, var(--ink) 8%);
}

.motifs-essay-page__toc a:hover {
  color: var(--ink);
  background: var(--overlay-subtle);
}

.motifs-essay-page__toc a.is-active {
  color: var(--blue-solid);
  text-decoration: none;
  border-left-color: var(--blue-solid);
  background: var(--blue-wash);
}

.motifs-essay-page__toc a.is-aux.is-active {
  color: color-mix(in srgb, var(--amber) 80%, var(--ink));
  border-left-color: color-mix(in srgb, var(--amber) 70%, transparent);
  background: color-mix(in srgb, var(--amber-light) 60%, var(--surface-panel));
}

.motifs-essay-page__toc-mobile {
  margin-top: 0;
}

.motifs-essay-page .motifs-index__essay-subhead {
  scroll-margin-top: 12px;
}

/* Motif Lexicon: each entry wears the section page's motif card name and
   definition, with the long definition as essay prose below. */
.lexicon-movement + .lexicon-movement {
  margin-top: 28px;
}
.lexicon-entry {
  margin-top: 18px;
  scroll-margin-top: 12px;
}
.lexicon-entry__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lexicon-entry__head .narration-card-btn {
  margin-left: 0;
}
.motifs-index__essay .lexicon-entry .motifCard__name a {
  color: var(--ink);
  text-decoration: none;
}
.motifs-index__essay .lexicon-entry .motifCard__def {
  margin: 7px 0 10px;
  font-style: italic;
  line-height: 1.58;
}

@media (max-width: 980px) {
  .motifs-essay-page__layout {
    grid-template-columns: 1fr;
  }
  .motifs-essay-page__rail {
    position: static;
    display: none;
  }
  .motifs-essay-page__toc-mobile {
    display: flex;
  }
}

/* ── Research Page ── */
.research-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
  gap: 14px;
  align-items: start;
}
.research-page__main {
  min-width: 0;
}
.research-page__card {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  box-shadow: var(--subtle-shadow);
  padding: 22px 22px 18px;
}
.research-page__card p {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--soft-ink);
}
.research-page__card p:last-child {
  margin-bottom: 0;
}
.research-page__card a {
  color: var(--blue-solid);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--blue-solid) 40%, transparent);
  text-underline-offset: 2px;
  font-weight: 400;
}
.research-page__card a:hover {
  text-decoration-color: var(--blue-solid);
}
.research-page__card a.research-page__fnref {
  text-decoration: none;
  color: var(--blue-solid);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}
.research-page__fnDivider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0 16px;
}
.research-page__footnotes {
  display: grid;
  gap: 8px;
}
.research-page__footnotes p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.research-page__footnotes a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent);
  text-underline-offset: 2px;
}
.research-page__footnotes a:hover {
  color: var(--blue-solid);
  text-decoration-color: var(--blue-solid);
}
.research-page__fn {
  margin: 0;
}
.research-page__fn p {
  margin: 0 0 6px;
}
.research-page__fn ul {
  margin: 0 0 6px;
  padding: 0 0 0 18px;
  list-style: none;
  display: grid;
  gap: 4px;
}
.research-page__fn li {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.research-page__fnCategoryLabel {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 18px 0 2px;
}
.research-page__fn > .research-page__fnCategoryLabel:first-of-type {
  margin-top: 8px;
}
.research-page__fnCategoryNote {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 6px;
  font-style: italic;
}
.research-page__fnBack {
  font-weight: 800;
  text-decoration: none;
  color: var(--blue-solid);
  margin-right: 4px;
}
/* ── Research chart ── */
.research-page__chartWrap {
  margin: 20px 0 28px;
}
.research-chart {
  width: 100%;
  max-width: 680px;
  height: auto;
}
.research-chart__grid {
  stroke: var(--border);
  stroke-width: 0.5;
}
.research-chart__label {
  font-family: var(--sans);
  font-size: 10px;
  fill: var(--muted);
}
.research-chart__axisLabel {
  font-family: var(--sans);
  font-size: 10px;
  fill: var(--muted);
  font-style: italic;
}
.research-chart__line {
  fill: none;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.research-chart__line--novelty {
  stroke: var(--blue-solid);
  stroke-dasharray: 4 3;
  stroke-width: 1.4;
}
.research-chart__trend {
  stroke: var(--muted);
  stroke-width: 1.4;
}
.research-chart__line--echo {
  stroke: var(--muted);
  stroke-dasharray: 4 3;
  stroke-width: 1.4;
}
.research-page__chartCaption {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 8px 0 0;
  max-width: 680px;
}

.research-page__tableHeat--high {
  background: color-mix(in srgb, var(--blue-solid) 14%, transparent);
}
.research-page__tableHeat--med {
  background: color-mix(in srgb, var(--blue-solid) 8%, transparent);
}
.research-page__tableHeat--low {
  background: color-mix(in srgb, var(--blue-solid) 4%, transparent);
}
.research-page__tableWrap {
  overflow-x: auto;
  margin: 14px 0 18px;
  -webkit-overflow-scrolling: touch;
}
.research-page__table {
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}
.research-page__table th {
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
}
.research-page__table th:first-child,
.research-page__table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  width: 1%;
}
.research-page__table th:not(:first-child),
.research-page__table td:not(:first-child) {
  width: 1%;
  white-space: nowrap;
}
.research-page__table td {
  padding: 5px 16px;
  color: var(--soft-ink);
  text-align: center;
}
.research-page__table tbody tr + tr td {
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.research-page__subhead {
  margin: 28px 0 10px;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  scroll-margin-top: 12px;
}
.research-page__card > .research-page__subhead:first-child {
  margin-top: 0;
}
.research-page__subsubhead {
  margin: 20px 0 6px;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  scroll-margin-top: 12px;
}
.research-page__rail {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 10px;
}
.research-page__toc {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-panel) 94%, transparent);
  padding: 10px;
}
.research-page__toc h2 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.research-page__toc ul {
  margin: 9px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.research-page__tocAux {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 72%, transparent);
}
.research-page__tocAux--top {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.research-page__toc a {
  display: block;
  padding: 4px 6px 4px 10px;
  border-left: 2px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  overflow-wrap: anywhere;
  line-height: 1.45;
  transition: color .15s, background .15s, border-color .15s;
}
.research-page__toc a.is-aux {
  font-size: 13px;
  color: color-mix(in srgb, var(--muted) 92%, var(--ink) 8%);
}
.research-page__toc a:hover {
  color: var(--ink);
  background: var(--overlay-subtle);
}
.research-page__toc a.is-active {
  color: var(--blue-solid);
  text-decoration: none;
  border-left-color: var(--blue-solid);
  background: var(--blue-wash);
}
.research-page__toc-mobile {
  margin-top: 0;
  display: none;
  align-items: center;
  gap: 8px;
}
@media (max-width: 980px) {
  .research-page__layout {
    grid-template-columns: 1fr;
  }
  .research-page__rail {
    position: static;
    display: none;
  }
  .research-page__toc-mobile {
    display: flex;
  }
}

/* Essay CTA on motifs index */
/* ── About ── */
.about{
  max-width: 1080px; margin: 5px auto 0; padding: 0 0 4rem;
}
.about__card{
  background: var(--surface-card); border: 1px solid var(--surface-card-border);
  border-radius: var(--radius); box-shadow: var(--subtle-shadow);
  padding: 28px 28px 24px; margin-bottom: 12px;
}
.about__card p{
  font-family: var(--serif); font-size: 16px; line-height: 1.75;
  color: var(--fg); margin: 0 0 1em;
}
.about__card p:last-child{ margin-bottom: 0; }
.about__heading{
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  margin: 0 0 16px; color: var(--fg);
}
.about__subheading{
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--blue-solid); text-transform: uppercase; letter-spacing: 0.5px;
  margin: 24px 0 8px;
}
.about__card .about__subheading:first-of-type{ margin-top: 0; }
.about__links-list{
  font-family: var(--serif); font-size: 16px; line-height: 1.75;
  padding-left: 20px; margin: 0 0 1em;
}
.about__links-list li{ margin-bottom: 6px; }
.about__links-list a{ color: var(--blue-solid); text-decoration: none; }
.about__links-list a:hover{ text-decoration: underline; }
.about__card a{ color: var(--blue-solid); text-decoration: none; }
.about__card a:hover{ text-decoration: underline; }
.about__legal{
  font-size: 13px !important; color: var(--muted) !important; font-family: var(--sans) !important;
  margin-top: 12px !important;
}
.about__footer-note{
  max-width: 860px; margin: 8px auto 0; padding: 0 4px;
}

.downloads{
  max-width: 1080px; margin: 5px auto 0; padding: 0 0 4rem; overflow-x: clip;
}
.downloads__card{
  overflow: hidden;
}
.downloads__intro{
  padding-bottom: 18px;
  margin-bottom: 0;
}
.downloads__volumeCard{
  overflow: hidden;
}
.downloads__volume{
  display: grid;
  gap: 22px;
  justify-items: center;
}
.downloads__volumeTop{
  display: grid;
  grid-template-columns: 232px minmax(0, 430px);
  gap: 24px;
  align-items: start;
  justify-content: center;
  width: 100%;
}
.downloads__volumeMedia{
  display: flex;
  justify-content: center;
}
.downloads__cover{
  width: min(100%, 232px);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--surface-card-border) 82%, var(--blue-border) 18%);
  box-shadow: 0 10px 28px rgba(12, 22, 34, 0.10), var(--subtle-shadow);
  margin-bottom: 0;
}
.downloads__volumeBody{
  min-width: 0;
  padding-top: 6px;
}
.downloads__volumeTitle{
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--fg);
}
.downloads__volumeCopy{
  margin: 0 0 14px;
  width: auto;
  max-width: 48ch;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.72;
  color: var(--fg);
  text-align: left;
}
.downloads__volumeStats{
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-align: left;
}
.downloads__tableWrap{
  width: min(100%, 686px);
}
/* Motif Volume audiobooks: a cover stack header, then every motif by
   movement; the list shows its first rows and fades until expanded. */
.downloads__audiobooks{
  margin-top: 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-panel-alt); overflow: hidden;
}
.downloads__audiobooksHeader{
  display: flex; align-items: center; gap: 22px; width: 100%;
  padding: 18px 20px; border: none; background: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.downloads__coverStack{ position: relative; width: 132px; height: 112px; flex-shrink: 0; }
.downloads__coverStack img{
  position: absolute; top: 8px; left: 18px; width: 96px; height: 96px; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); object-fit: cover;
}
.downloads__coverStack img:nth-child(1){ transform: translate(-16px, 4px) rotate(-9deg); }
.downloads__coverStack img:nth-child(2){ transform: translate(16px, 2px) rotate(7deg); }
.downloads__coverStack img:nth-child(3){ transform: translate(0, -4px); }
.downloads__audiobooksText{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.downloads__audiobooksTitle{ font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--fg); }
.downloads__audiobooksMeta{ font-family: var(--sans); font-size: 13px; color: var(--muted); }
.downloads__audiobookListWrap{
  position: relative; max-height: 320px; overflow: hidden; padding: 0 20px;
  transition: max-height 0.3s ease;
}
.downloads__audiobookListWrap::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface-panel-alt));
}
.downloads__audiobooks.is-open .downloads__audiobookListWrap{ max-height: none; }
.downloads__audiobooks.is-open .downloads__audiobookListWrap::after{ display: none; }
.downloads__audiobooksMore{
  display: block; width: 100%; padding: 12px; border: none; border-top: 1px solid var(--border);
  background: none; cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--blue-solid);
}
.downloads__audiobooksMore:hover{ text-decoration: underline; }
.downloads__audiobookGroup{ padding-bottom: 10px; }
.downloads__audiobookMovement{
  margin: 6px 0 4px; font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase; color: var(--muted);
}
.downloads__audiobookList{ list-style: none; margin: 0; padding: 0; }
.downloads__audiobookItem{
  display: grid; grid-template-columns: 36px 1fr auto auto; gap: 12px; align-items: center;
  padding: 6px 0; border-top: 1px solid var(--border); font-family: var(--sans); font-size: 14px;
}
.downloads__audiobookItem:first-child{ border-top: none; }
.downloads__audiobookCover{ width: 36px; height: 36px; border-radius: 4px; object-fit: cover; }
.downloads__audiobookName{ color: var(--fg); }
.downloads__audiobookItem.is-pending .downloads__audiobookName{ color: var(--muted); }
.downloads__audiobookItem.is-pending .downloads__audiobookCover{ opacity: 0.45; }
.downloads__audiobookLength,
.downloads__audiobookSize{ color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 520px){
  .downloads__audiobooksHeader{ gap: 14px; padding: 14px; }
  .downloads__coverStack{ width: 104px; height: 92px; }
  .downloads__coverStack img{ width: 76px; height: 76px; left: 14px; }
  .downloads__audiobookItem{ grid-template-columns: 36px 1fr auto; }
  .downloads__audiobookLength{ display: none; }
}

.downloads__table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surface-card-border) 78%, var(--blue-border) 22%);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.32));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.downloads__table thead th{
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  background: color-mix(in srgb, var(--surface-card) 88%, white 12%);
  border-bottom: 1px solid color-mix(in srgb, var(--surface-card-border) 76%, var(--blue-border) 24%);
}
.downloads__table tbody th,
.downloads__table tbody td{
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--surface-card-border) 70%, var(--blue-border) 18%);
  vertical-align: middle;
  text-align: center;
}
.downloads__table tbody tr:last-child th,
.downloads__table tbody tr:last-child td{
  border-bottom: 0;
}
.downloads__tableLabel{
  width: 34%;
}
.downloads__tableLabelText{
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.downloads__tableMeta{
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.downloads__tableCell{
  width: 33%;
}
.downloads__tableCell--combined{
  width: 66%;
}
.downloads__tableCell--combined{
  text-align: center;
}
.downloads__fileLink,
.downloads__kindleLink{
  color: var(--blue-solid);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.downloads__fileLink:hover,
.downloads__kindleLink:hover{
  text-decoration: underline;
}
.downloads__fileMeta{
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.downloads__kindleLink{
  display: block;
  margin-top: 4px;
}
/* A volume in parts: part numbers and their links in two aligned columns, centered in the cell. */
.downloads__parts{
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.downloads__partLabel{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}
.downloads__fileEmpty{
  color: var(--muted);
  opacity: 0.72;
}

[data-theme="dark"] body[data-page-type="downloads"] .downloads__table{
  border-color: color-mix(in srgb, rgba(120, 185, 248, 0.20) 42%, var(--surface-card-border) 58%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-card) 94%, rgba(120, 185, 248, 0.06) 6%),
      color-mix(in srgb, var(--surface-panel) 96%, rgba(120, 185, 248, 0.04) 4%)
    );
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

[data-theme="dark"] body[data-page-type="downloads"] .downloads__table thead th{
  background: color-mix(in srgb, var(--surface-card) 88%, rgba(120, 185, 248, 0.08) 12%);
  border-bottom-color: color-mix(in srgb, rgba(120, 185, 248, 0.16) 34%, var(--surface-card-border) 66%);
  color: var(--muted);
}

[data-theme="dark"] body[data-page-type="downloads"] .downloads__table tbody th,
[data-theme="dark"] body[data-page-type="downloads"] .downloads__table tbody td{
  border-bottom-color: color-mix(in srgb, rgba(120, 185, 248, 0.12) 26%, var(--surface-card-border) 74%);
}

@media (max-width: 900px){
  .downloads__volumeTop{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .downloads__volumeBody{
    padding-top: 0;
    width: min(100%, 430px);
    margin: 0 auto;
  }
  .downloads__tableWrap{
    width: 100%;
  }
}

@media (max-width: 720px){
  .downloads__volumeTitle{
    font-size: 24px;
  }
  .downloads__volumeCopy{
    font-size: 15px;
  }
  .downloads__table thead th,
  .downloads__table tbody th,
  .downloads__table tbody td{
    padding: 12px 10px;
  }
  .downloads__table thead th{
    font-size: 12px;
  }
  .downloads__tableLabelText,
  .downloads__tableMeta,
  .downloads__fileLink,
  .downloads__kindleLink{
    font-size: 12px;
  }
}

/* ── Error pages (404 / 500): standalone, no site header or footer ── */
.errorStandalone {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 64px;
  text-align: center;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, rgba(108, 165, 226, 0.54), rgba(220, 178, 92, 0.46)) 1;
}
.errorStandalone__brand {
  margin-bottom: 36px;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.errorStandalone__brand span { font-weight: 400; }
.errorStandalone__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.errorStandalone__lead {
  margin: 14px 0 0;
  max-width: 34em;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--soft-ink);
}
.errorStandalone__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  margin-top: 32px;
}
.errorStandalone__button {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--blue-solid);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blue-solid) 35%, transparent);
  transition: filter 0.15s ease;
}
.errorStandalone__button:hover { filter: brightness(1.08); }
.errorStandalone__link {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.errorStandalone__link:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .errorStandalone > * { animation: aboutFadeUp 360ms ease-out backwards; }
  .errorStandalone > :nth-child(2) { animation-delay: 45ms; }
  .errorStandalone > :nth-child(3) { animation-delay: 90ms; }
  .errorStandalone > :nth-child(4) { animation-delay: 135ms; }
}

/* ── Home v2 ── */
.homeV2 {
  --homeV2-content-pad-x: 15px;
  max-width: 960px;
  margin: -22px auto 0;
  padding: 0 0 3.5rem;
}

.homeV2__topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--homeV2-content-pad-x);
}

.homeV2__logo.nav-tab {
  padding: 0;
  border-bottom: 0;
  margin: 0;
}

.homeV2__logo.nav-tab--brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1;
}

.homeV2__themeBtn.theme-btn {
  margin: 0;
  padding: 6px 9px;
  border: 1px solid var(--surface-card-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-panel) 88%, transparent);
  color: var(--muted);
  line-height: 1;
  font-size: 16px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.homeV2__themeBtn.theme-btn:hover {
  color: var(--ink);
  border-color: var(--blue-border-strong);
  background: var(--blue-wash);
}

.homeV2__banner {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding: 0.5rem 0 4.6rem;
  margin-bottom: 0;
  background: rgba(74, 152, 232, 0.14);
  border-bottom: 1px solid var(--border);
}

/* The top bar lives inside the banner so the hero color runs up behind the logo and theme button. */
.homeV2__banner .homeV2__topBar {
  padding: 6px 0;
  margin-bottom: 1.6rem;
}

.homeV2__bannerInner {
  max-width: calc(960px + 2 * 18px);
  margin: 0 auto;
  padding: 0 calc(18px + var(--homeV2-content-pad-x));
}

[data-theme="dark"] .homeV2__banner {
  background: rgba(88, 162, 240, 0.18);
}

.homeV2__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(32px, 4.5vw, 46px);
  line-height: 1.08;
  font-weight: 600;
  max-width: 20ch;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.homeV2__subtitle {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--soft-ink);
  max-width: 62ch;
}

/* Practice card on homepage */
.homeV2__practiceCard {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  position: relative;
  min-height: 160px;
  padding: 16px 15px 14px;
  margin-top: -3.2rem;
  margin-bottom: 14px;
  border: 1px solid var(--surface-card-border);
  border-radius: 18px;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(12, 22, 34, 0.10);
  z-index: 2;
  background:
    linear-gradient(to right,
      rgba(120, 180, 240, 0.17) 0%,
      rgba(120, 180, 240, 0.17) 40%,
      rgba(180, 130, 240, 0.17) 55%,
      rgba(240, 140, 180, 0.17) 60%,
      rgba(240, 170, 100, 0.17) 75%,
      rgba(120, 210, 180, 0.17) 100%
    ),
    var(--surface-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.homeV2__practiceCard > * {
  position: relative;
  z-index: 1;
}

.homeV2__practiceCard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to right, var(--surface-card) 0%, color-mix(in srgb, var(--surface-card) 95%, transparent) 15%, color-mix(in srgb, var(--surface-card) 60%, transparent) 33%, color-mix(in srgb, var(--surface-card) 15%, transparent) 50%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] .homeV2__practiceCard::after {
  background: linear-gradient(to right, var(--surface-card) 0%, color-mix(in srgb, var(--surface-card) 95%, transparent) 15%, color-mix(in srgb, var(--surface-card) 60%, transparent) 33%, color-mix(in srgb, var(--surface-card) 15%, transparent) 50%, transparent 65%);
}

.homeV2__practiceCard .homeV2__entryDesc {
  max-width: 360px;
}

.homeV2__practiceCard .homeV2__entryMeta {
  color: var(--blue-solid);
}

.homeV2__practiceCard .homeV2__entryMeta,
.homeV2__practiceCard .homeV2__entryTitle,
.homeV2__practiceCard .homeV2__entryDesc,
.homeV2__practiceCard .homeV2__entryLink {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.homeV2__practiceCardLink {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

.homeV2__practiceCard .homeV2__entryLink {
  justify-self: start;
  margin-top: 4px;
}

.homeV2__practiceCard .homeV2__entryLink a {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--blue-solid);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blue-solid) 35%, transparent);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.homeV2__practiceCard:hover .homeV2__entryLink a,
.homeV2__practiceCard .homeV2__entryLink a:hover {
  filter: brightness(1.08);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--blue-solid) 45%, transparent);
}

.homeV2__practiceCard:hover {
  border-color: var(--blue-border-strong);
  transform: translateY(-1px);
}

.homeV2__practiceFlows {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 85%, transparent 100%);
  z-index: 1;
}

.homeV2__practiceFlows a {
  pointer-events: auto;
}

.homeV2__flowViewport.homeV2__flowViewport--practice {
  background: transparent;
  padding: 1px 0;
  margin-bottom: 0;
  overflow: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  border-radius: 0;
}

.homeV2__flowViewport--practice .homeV2__flowRun {
  gap: 3px;
  padding-right: 3px;
}

.homeV2__practiceFlows .homeV2__pill {
  background: color-mix(in srgb, var(--surface-panel) 56%, transparent);
  border-color: color-mix(in srgb, var(--surface-card-border) 62%, transparent);
}

.homeV2__practiceFlows .homeV2__pill:hover {
  background: color-mix(in srgb, var(--blue-wash) 42%, transparent);
}

.homeV2__flowTrack--practice.is-animated {
  animation-duration: 140s;
  animation-delay: -9s;
}

.homeV2__flowTrack--p0.is-animated {
  animation-duration: 150s;
  animation-delay: -23s;
}

.homeV2__flowTrack--p2.is-animated {
  animation-duration: 156s;
  animation-delay: -31s;
}

.homeV2__flowTrack--p3.is-animated {
  animation-duration: 146s;
  animation-delay: -14s;
}

.homeV2__flowTrack--p4.is-animated {
  animation-duration: 164s;
  animation-delay: -38s;
}

.homeV2__flowTrack--p5.is-animated {
  animation-duration: 160s;
  animation-delay: -27s;
}

.homeV2__practiceFlows:hover .homeV2__flowTrack.is-animated,
.homeV2__practiceFlows:focus-within .homeV2__flowTrack.is-animated,
.homeV2__flowViewport--practice:hover .homeV2__flowTrack.is-animated {
  animation-play-state: paused;
}

.homeV2__practiceEyebrow {
  display: block;
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.homeV2__practiceTitle {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.homeV2__practiceDesc {
  margin: 0 0 14px;
  max-width: 60ch;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--soft-ink);
}

.homeV2__practiceLink {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-solid);
}

[data-theme="dark"] .homeV2__practiceCard {
  background:
    linear-gradient(to right,
      rgba(80, 140, 220, 0.10) 0%,
      rgba(80, 140, 220, 0.10) 40%,
      rgba(160, 90, 220, 0.10) 55%,
      rgba(220, 110, 160, 0.10) 60%,
      rgba(220, 140, 80, 0.10) 75%,
      rgba(80, 190, 150, 0.10) 100%
    ),
    var(--surface-card);
}

[data-theme="dark"] .homeV2__practiceCard:hover {
  border-color: var(--blue-border-strong);
}

.homeV2__entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.homeV2__entry {
  border: 1px solid var(--surface-card-border);
  border-radius: 14px;
  background: var(--surface-card);
  box-shadow: var(--subtle-shadow);
  text-decoration: none;
  color: var(--ink);
  padding: 16px 15px 14px;
  transition: border-color 0.15s, transform 0.12s;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
}

.homeV2__entry:hover {
  border-color: var(--blue-border-strong);
  transform: translateY(-1px);
}

.homeV2__entryMeta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.homeV2__entryDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-solid);
  opacity: 0.85;
}

.homeV2__entryTitle {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.12;
  font-weight: 600;
  color: var(--ink);
}

.homeV2__entryDesc {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.58;
  color: var(--soft-ink);
}

/* An anniversary card under the practice card, shown only on its day: a gold date seal
   (the volume-cover gold, #B5914D) beside the message, with a slow warm glow. */
.homeV2__anniversary {
  --anniv-gold: #B5914D;
  --anniv-border: rgba(181, 145, 77, 0.45);
  --anniv-glow: rgba(181, 145, 77, 0.22);
  --anniv-glow-soft: rgba(181, 145, 77, 0.06);
  --anniv-meta: rgba(140, 90, 20, 0.95);
  --anniv-seal-hi: #d4b479;
  --anniv-seal-lo: #9a7738;
  --anniv-seal-shadow: 0 4px 10px rgba(120, 86, 30, 0.25);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin: 0 0 14px;
  padding: 16px 26px 16px 18px;
  border: 1px solid var(--anniv-border);
  border-radius: 14px;
  background: var(--surface-card);
  box-shadow: var(--subtle-shadow);
  overflow: hidden;
}
.homeV2__anniversary[hidden] { display: none; }

.homeV2__anniversary::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 220% at 0% 50%, var(--anniv-glow) 0%, var(--anniv-glow-soft) 45%, transparent 75%);
  animation: homeV2AnnivBreathe 5s ease-in-out infinite;
}
@keyframes homeV2AnnivBreathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .homeV2__anniversary::before { animation: none; opacity: 0.8; }
}

.homeV2__anniversarySeal {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: radial-gradient(circle at 35% 30%, var(--anniv-seal-hi) 0%, var(--anniv-gold) 55%, var(--anniv-seal-lo) 100%);
  box-shadow:
    0 0 0 5px rgba(181, 145, 77, 0.12),
    0 0 0 11px rgba(181, 145, 77, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    var(--anniv-seal-shadow);
  color: #fffdf8;
}
.homeV2__anniversaryMonth {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding-left: 0.16em; /* optically re-centre tracked caps */
  text-transform: uppercase;
}
.homeV2__anniversaryDay {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 0.95;
}

.homeV2__anniversaryBody {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.homeV2__anniversaryMeta {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--anniv-meta);
}
.homeV2__anniversaryMessage {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}
.homeV2__anniversaryMessage em { font-style: italic; }

[data-theme="dark"] .homeV2__anniversary {
  --anniv-border: rgba(181, 145, 77, 0.5);
  --anniv-meta: var(--amber); /* #D4A24A in dark */
  --anniv-seal-hi: #cfae70;
  --anniv-seal-lo: #8a6a30;
  --anniv-seal-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .homeV2__anniversarySeal {
  box-shadow:
    0 0 0 5px rgba(181, 145, 77, 0.16),
    0 0 0 11px rgba(181, 145, 77, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    var(--anniv-seal-shadow);
}

/* ── Homepage holidays ── */
.homeV2__banner { overflow: hidden; }
.homeV2__bannerInner { position: relative; z-index: 1; }

/* Per-holiday tokens (light) */
.homeV2[data-holiday="christmas"] {
  --hol-banner: linear-gradient(to bottom, rgba(181,145,77,0.24), rgba(190,110,80,0.10));
  --hol-accent: rgba(140,90,20,0.95);
  --hol-ref: var(--hol-accent);
  --hol-border: rgba(181,145,77,0.5);
  --hol-link-border: rgba(181,145,77,0.55);
  --hol-link-bg: rgba(181,145,77,0.12);
  --hol-glow-1: rgba(181,145,77,0.24);
  --hol-glow-2: rgba(181,145,77,0.06);
  --hol-seal: linear-gradient(135deg, #d4b479, #a6823f);
  --hol-seal-ink: #fffdf8;
  --hol-spark-a: rgba(201,160,80,0.95);
  --hol-spark-b: rgba(201,160,80,0.95);
}
.homeV2[data-holiday="nye"] {
  --hol-banner: linear-gradient(to bottom, rgba(36,56,110,0.32) 0%, rgba(80,80,150,0.16) 60%, rgba(240,170,100,0.10) 100%);
  --hol-accent: #2f4a85;
  --hol-ref: var(--hol-accent);
  --hol-border: rgba(52,80,142,0.35);
  --hol-link-border: rgba(52,80,142,0.35);
  --hol-link-bg: rgba(52,80,142,0.07);
  --hol-glow-1: rgba(52,80,142,0.14);
  --hol-glow-2: rgba(240,170,100,0.06);
  --hol-seal: radial-gradient(circle at 35% 30%, #4a64a0 0%, #2d4a86 55%, #1f3366 100%);
  --hol-seal-halo: rgba(52,80,142,0.10);
  --hol-seal-shadow: rgba(30,40,80,0.25);
  --hol-seal-ink: #fffdf8;
  --hol-spark-a: rgba(60,85,160,0.95);
  --hol-spark-b: rgba(201,160,80,0.95);
}
.homeV2[data-holiday="newyear"] {
  --hol-banner: linear-gradient(to bottom, rgba(45,74,134,0.24) 0%, rgba(120,110,170,0.12) 55%, rgba(240,170,100,0.18) 100%);
  --hol-accent: #2f4a85;
  --hol-ref: var(--hol-accent);
  --hol-border: rgba(52,80,142,0.35);
  --hol-link-border: rgba(52,80,142,0.35);
  --hol-link-bg: rgba(52,80,142,0.07);
  --hol-glow-1: rgba(52,80,142,0.14);
  --hol-glow-2: rgba(240,170,100,0.06);
  --hol-seal: linear-gradient(to bottom, #2d4a86 0%, #5d5c92 52%, #d99a5c 100%);
  --hol-seal-halo: rgba(52,80,142,0.10);
  --hol-seal-shadow: rgba(30,40,80,0.25);
  --hol-seal-ink: #fffdf8;
  --hol-spark-a: rgba(70,95,160,0.9);
}
.homeV2[data-holiday="holyweek"] {
  --hol-banner: linear-gradient(to bottom, rgba(120,90,170,0.18), rgba(120,90,170,0.07));
  --hol-accent: #5b3f8c;
  --hol-ref: var(--hol-accent);
  --hol-border: rgba(120,90,170,0.35);
  --hol-link-border: rgba(120,90,170,0.35);
  --hol-link-bg: rgba(120,90,170,0.07);
  --hol-glow-1: transparent;
  --hol-glow-2: transparent;
  --hol-seal: radial-gradient(circle at 35% 30%, #8a6fbb 0%, #6a4f9c 55%, #4f3780 100%);
  --hol-seal-halo: rgba(120,90,170,0.10);
  --hol-seal-shadow: rgba(60,40,100,0.25);
  --hol-seal-ink: #fffdf8;
  --hol-spark-a: rgba(140,110,200,0.85);
  --hol-day-fill: #6a4f9c;
  --hol-day-ring: rgba(120,90,170,0.45);
  --hol-day-past: rgba(91,63,140,0.7);
  --hol-easter-ink: rgba(140,90,20,0.95);
}
.homeV2[data-holiday="easter"] {
  --hol-banner: linear-gradient(to bottom, rgba(150,195,150,0.16), rgba(240,205,130,0.22));
  --hol-accent: #3f7a4a;
  --hol-ref: var(--hol-accent);
  --hol-border: rgba(181,145,77,0.5);
  --hol-link-border: rgba(181,145,77,0.55);
  --hol-link-bg: rgba(181,145,77,0.12);
  --hol-glow-1: rgba(240,200,120,0.28);
  --hol-glow-2: rgba(150,200,150,0.08);
  --hol-seal: radial-gradient(circle at 50% 100%, #fff6dc 0%, #f1d38f 42%, #c99a4a 100%);
  --hol-seal-halo: rgba(181,145,77,0.14);
  --hol-seal-shadow: rgba(120,86,30,0.22);
  --hol-seal-ink: #4a3210;
  --hol-spark-a: rgba(201,160,80,0.95);
  --hol-spark-b: rgba(90,160,100,0.85);
}

/* Dark overrides */
[data-theme="dark"] .homeV2[data-holiday="christmas"] { --hol-accent: #D4A24A; --hol-border: rgba(181,145,77,0.55); }
[data-theme="dark"] .homeV2[data-holiday="nye"] {
  --hol-accent: #9fb5e8; --hol-border: rgba(130,160,230,0.40);
  --hol-link-border: rgba(130,160,230,0.40); --hol-link-bg: rgba(130,160,230,0.10);
  --hol-spark-a: rgba(200,215,255,0.95); --hol-spark-b: rgba(225,185,100,0.95);
}
[data-theme="dark"] .homeV2[data-holiday="newyear"] {
  --hol-accent: #9fb5e8; --hol-border: rgba(130,160,230,0.40);
  --hol-link-border: rgba(130,160,230,0.40); --hol-link-bg: rgba(130,160,230,0.10);
  --hol-spark-a: rgba(200,215,255,0.95);
}
[data-theme="dark"] .homeV2[data-holiday="holyweek"] {
  --hol-accent: #bba3e6; --hol-border: rgba(170,140,230,0.42);
  --hol-link-border: rgba(170,140,230,0.42); --hol-link-bg: rgba(170,140,230,0.10);
  --hol-spark-a: rgba(195,170,245,0.9);
  --hol-day-fill: #9a7fd0; --hol-day-ring: rgba(170,140,230,0.5); --hol-day-past: rgba(187,163,230,0.75);
  --hol-easter-ink: #D4A24A;
}
[data-theme="dark"] .homeV2[data-holiday="easter"] {
  --hol-accent: #8fcb9d; --hol-border: rgba(181,145,77,0.55);
  --hol-spark-a: rgba(225,185,100,0.95); --hol-spark-b: rgba(150,215,165,0.9);
}

/* Banner wash + glow + sparkles */
.homeV2__holidayLight { display: none; }
.homeV2[data-holiday] .homeV2__holidayLight {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--hol-banner), var(--bg);
}
.homeV2__holidayLight::before { content: ""; position: absolute; }
.homeV2[data-holiday="christmas"] .homeV2__holidayLight::before {
  right: -8%; top: -30%; width: 60%; height: 160%;
  background: radial-gradient(closest-side, rgba(240,200,120,0.30), transparent);
  animation: homeV2HolBreathe 6s ease-in-out infinite;
}
.homeV2[data-holiday="newyear"] .homeV2__holidayLight::before {
  left: 10%; right: 10%; bottom: -55%; height: 110%;
  background: radial-gradient(50% 50% at 50% 100%, rgba(240,170,100,0.45), rgba(240,170,100,0.12) 55%, transparent 75%);
  animation: homeV2HolRise 9s ease-in-out infinite alternate;
}
.homeV2[data-holiday="nye"] .homeV2__holidayLight::before {
  left: 20%; right: 0; bottom: -70%; height: 110%;
  background: radial-gradient(50% 50% at 50% 100%, rgba(240,170,100,0.30), transparent 70%);
  animation: homeV2HolRise 9s ease-in-out infinite alternate;
}
.homeV2[data-holiday="easter"] .homeV2__holidayLight::before {
  left: 30%; width: 70%; bottom: -70%; height: 150%;
  transform-origin: 50% 100%;
  background: radial-gradient(50% 50% at 50% 100%, rgba(255,236,180,0.85), rgba(240,200,120,0.28) 45%, rgba(150,200,150,0.10) 65%, transparent 80%);
  animation: homeV2HolBloom 7s ease-in-out infinite alternate;
}
[data-theme="dark"] .homeV2[data-holiday="newyear"] .homeV2__holidayLight::before {
  background: radial-gradient(50% 50% at 50% 100%, rgba(240,170,100,0.30), rgba(240,170,100,0.08) 55%, transparent 75%);
}
[data-theme="dark"] .homeV2[data-holiday="nye"] .homeV2__holidayLight::before {
  background: radial-gradient(50% 50% at 50% 100%, rgba(240,170,100,0.22), transparent 70%);
}
[data-theme="dark"] .homeV2[data-holiday="easter"] .homeV2__holidayLight::before {
  background: radial-gradient(50% 50% at 50% 100%, rgba(240,205,130,0.40), rgba(240,200,120,0.14) 45%, rgba(120,190,130,0.06) 65%, transparent 80%);
}

.homeV2__sparkle {
  position: absolute;
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  --c: var(--hol-spark-a);
  background: radial-gradient(circle, var(--c) 0%, transparent 70%);
  box-shadow: 0 0 calc(var(--size, 4px) * 2) var(--c);
  animation: homeV2HolTwinkle var(--twinkle, 4s) ease-in-out var(--twinkle-delay, 0s) infinite;
}
.homeV2__sparkle--b { --c: var(--hol-spark-b, var(--hol-spark-a)); }

/* Late night: a night wash over the usual blue banner, stars and the odd shooting star.
   Light mode uses crisp ink-blue stars and gold-headed streaks; dark mode, silvery glows. */
.homeV2[data-night],
.topbar[data-night] {
  --hol-banner: linear-gradient(to bottom, rgba(36, 44, 120, 0.22), rgba(90, 80, 160, 0.08));
  --hol-accent: #2f3f86;
  --hol-spark-a: #3a4a96;
  --night-star-glow: rgba(58, 74, 150, 0.35);
  --night-tail: rgba(47, 63, 134, 0.75);
  --night-head: #c9a050;
  --night-head-glow: rgba(201, 160, 80, 0.6);
}
[data-theme="dark"] .homeV2[data-night],
[data-theme="dark"] .topbar[data-night] {
  --hol-banner: linear-gradient(to bottom, rgba(6, 10, 32, 0.45), rgba(16, 22, 56, 0.16));
  --hol-accent: #9fb5e8;
  --hol-spark-a: rgba(225, 232, 255, 0.95);
  --night-star-glow: rgba(200, 215, 255, 0.7);
  --night-tail: rgba(220, 230, 255, 0.7);
  --night-head: #ffffff;
  --night-head-glow: rgba(210, 225, 255, 0.9);
}
.homeV2[data-night] .homeV2__holidayLight {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--hol-banner);
}
/* The sky spans the viewport's width and runs well past the banner, fading out lower down. It
   sits behind everything in .homeV2, so cards and text stay on top of it. */
.homeV2[data-night] { position: relative; isolation: isolate; }
.homeV2__nightSky {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 1100px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.homeV2[data-night] .homeV2__sparkle,
.topbar[data-night] .homeV2__sparkle {
  background: radial-gradient(circle, var(--c) 0 40%, transparent 72%);
  box-shadow: 0 0 calc(var(--size, 4px) * 1.5) var(--night-star-glow);
}
/* On other pages the night shows in the top navigation bar, behind its links. */
.topbar[data-night] .topbar__nav-bar {
  position: relative; /* no stacking context, so the nav's dropdowns keep their own layering */
  background: var(--hol-banner);
}
.topbar__nightSky {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.topbar__nightSky .homeV2__shootingStar { width: 80px; }

/* After a glyph's scene, something of it carries on in the navigation bar for five minutes
   (public/header-afterglow.js), behind the links like the night sky: lilies falling after T-20.II,
   notes appearing and fading in place after T-21.I, slanted sunbeams drifting after T-18.VIII,
   little ghosts drifting up after T-11.VIII. */
.topbar[data-afterglow] .topbar__nav-bar { position: relative; }
/* A soft halo in the page's own color keeps the link text clear of them. Light mode only: in dark
   mode the page's top gradients make the halo show, so the items are lighter instead. */
:root:not([data-theme="dark"]) .topbar[data-afterglow] .nav-tab { text-shadow: 0 0 1px var(--bg), 0 0 3px var(--bg), 0 0 6px var(--bg); }
.topbar__afterglow {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s ease;
}
.topbar__afterglow.is-on { opacity: 1; transition-duration: 1.2s; }
.topbar__afterglowItem {
  position: absolute;
  width: var(--size);
  height: var(--size);
  color: var(--c);
  opacity: 0.6;
}
[data-theme="dark"] .topbar__afterglowItem { opacity: 0.45; }
.topbar__afterglowItem svg { display: block; width: 100%; height: 100%; }
.topbar__lily {
  top: -18px;
  left: var(--x);
  animation: topbarLilyFall var(--dur) linear var(--delay) infinite;
}
.topbar__lily svg { animation: topbarLilySway var(--sway) ease-in-out var(--delay) infinite alternate; }
@keyframes topbarLilyFall {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(var(--fall)) rotate(var(--spin)); }
}
@keyframes topbarLilySway {
  from { transform: translateX(-6px); }
  to { transform: translateX(6px); }
}
.topbar__note {
  left: var(--x);
  top: var(--y);
}
.topbar__note svg {
  opacity: 0;
  transform: rotate(var(--tilt));
  animation: topbarNoteGlimmer var(--dur) ease-in-out var(--delay) infinite;
}
/* Each cycle: fade in, rise a few pixels while showing, fade out, then rest. */
@keyframes topbarNoteGlimmer {
  0% { opacity: 0; transform: translateY(4px) rotate(var(--tilt)); }
  14% { opacity: 1; }
  34% { opacity: 1; }
  46% { opacity: 0; transform: translateY(-4px) rotate(var(--tilt)); }
  100% { opacity: 0; transform: translateY(-4px) rotate(var(--tilt)); }
}
.topbar__afterglowItem.topbar__sunbeam {
  left: var(--x);
  top: -40%;
  width: 54px;
  height: 180%;
  opacity: 1;
  background: linear-gradient(to right, transparent, rgba(232, 160, 60, 0.38), transparent);
  transform: rotate(24deg);
  animation: topbarSunbeamDrift var(--dur) ease-in-out var(--delay) infinite;
}
[data-theme="dark"] .topbar__afterglowItem.topbar__sunbeam {
  background: linear-gradient(to right, transparent, rgba(255, 214, 140, 0.32), transparent);
}
/* Each cycle: the beam drifts slowly sideways as it brightens and fades, then rests. */
@keyframes topbarSunbeamDrift {
  0% { opacity: 0; translate: -40px 0; }
  25% { opacity: 1; }
  60% { opacity: 1; }
  85% { opacity: 0; translate: 60px 0; }
  100% { opacity: 0; translate: 60px 0; }
}

/* After T-11.VIII: little ghosts, a soft blue-grey on the light page and a pale moonlit blue on the
   dark one. */
.topbar__ghost {
  left: var(--x);
  top: var(--y);
}
.topbar__afterglowItem.topbar__ghost { color: #7d88ad; }
[data-theme="dark"] .topbar__afterglowItem.topbar__ghost { color: #c9d4f2; }
.topbar__ghost svg {
  opacity: 0;
  animation: topbarGhostDrift var(--dur) ease-in-out var(--delay) infinite;
}
/* Each cycle: appear, drift up with a little sway, fade, then rest. */
@keyframes topbarGhostDrift {
  0% { opacity: 0; transform: translate(0, 4px); }
  14% { opacity: 1; }
  26% { transform: translate(2px, 0); }
  38% { opacity: 1; transform: translate(-2px, -3px); }
  50% { opacity: 0; transform: translate(1px, -6px); }
  100% { opacity: 0; transform: translate(1px, -6px); }
}

.homeV2__shootingStar {
  position: absolute;
  width: 110px;
  height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(to right, transparent, var(--star-tail, var(--night-tail)));
  opacity: 0;
  transform-origin: 100% 50%;
  animation: homeV2Shoot var(--shoot-dur, 14s) linear var(--shoot-delay, 0s) infinite;
}
.homeV2__shootingStar::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--star-head, var(--night-head));
  box-shadow: 0 0 6px 2px var(--star-glow, var(--night-head-glow));
}
/* Each shooting star keeps its own color (night-sky.js, home-v2.js): the spark's Ray colors at full
   strength, rich on the light page and bright on the dark one, with a glow along the whole streak. */
.homeV2__shootingStar--gold { --star-tail: rgba(230, 160, 20, 0.95); --star-head: #f0a500; --star-glow: rgba(240, 165, 0, 0.75); }
.homeV2__shootingStar--rose { --star-tail: rgba(240, 50, 120, 0.9); --star-head: #ff2f7d; --star-glow: rgba(255, 47, 125, 0.7); }
.homeV2__shootingStar--violet { --star-tail: rgba(130, 70, 240, 0.9); --star-head: #8a4dff; --star-glow: rgba(138, 77, 255, 0.7); }
.homeV2__shootingStar--sky { --star-tail: rgba(20, 130, 240, 0.9); --star-head: #1a8cff; --star-glow: rgba(26, 140, 255, 0.7); }
.homeV2__shootingStar--teal { --star-tail: rgba(0, 180, 160, 0.9); --star-head: #00c2a8; --star-glow: rgba(0, 194, 168, 0.7); }
.homeV2__shootingStar--amber { --star-tail: rgba(255, 110, 20, 0.9); --star-head: #ff7a1a; --star-glow: rgba(255, 122, 26, 0.7); }
[data-theme="dark"] .homeV2__shootingStar--gold { --star-tail: rgba(255, 205, 60, 0.95); --star-head: #ffe066; --star-glow: rgba(255, 214, 60, 1); }
[data-theme="dark"] .homeV2__shootingStar--rose { --star-tail: rgba(255, 90, 160, 0.9); --star-head: #ff8fc4; --star-glow: rgba(255, 80, 150, 1); }
[data-theme="dark"] .homeV2__shootingStar--violet { --star-tail: rgba(170, 120, 255, 0.9); --star-head: #c9a8ff; --star-glow: rgba(160, 110, 255, 1); }
[data-theme="dark"] .homeV2__shootingStar--sky { --star-tail: rgba(80, 170, 255, 0.9); --star-head: #9fd0ff; --star-glow: rgba(70, 160, 255, 1); }
[data-theme="dark"] .homeV2__shootingStar--teal { --star-tail: rgba(40, 230, 200, 0.9); --star-head: #8ff5e3; --star-glow: rgba(30, 225, 195, 1); }
[data-theme="dark"] .homeV2__shootingStar--amber { --star-tail: rgba(255, 150, 50, 0.9); --star-head: #ffc07a; --star-glow: rgba(255, 140, 40, 1); }
.homeV2__shootingStar--gold, .homeV2__shootingStar--rose, .homeV2__shootingStar--violet,
.homeV2__shootingStar--sky, .homeV2__shootingStar--teal, .homeV2__shootingStar--amber {
  height: 2px;
  filter: drop-shadow(0 0 2px var(--star-glow));
}
.homeV2__shootingStar--gold::after, .homeV2__shootingStar--rose::after, .homeV2__shootingStar--violet::after,
.homeV2__shootingStar--sky::after, .homeV2__shootingStar--teal::after, .homeV2__shootingStar--amber::after {
  box-shadow: 0 0 8px 3px var(--star-glow);
}
/* Each streak crosses in the first few percent of its cycle and waits out the rest. */
@keyframes homeV2Shoot {
  0% { opacity: 0; transform: rotate(var(--angle, 155deg)) translateX(0); }
  1.5% { opacity: 1; }
  7% { opacity: 0; transform: rotate(var(--angle, 155deg)) translateX(var(--travel, 240px)); }
  100% { opacity: 0; transform: rotate(var(--angle, 155deg)) translateX(var(--travel, 240px)); }
}
@media (prefers-reduced-motion: reduce) {
  .homeV2__shootingStar { display: none; }
}

/* Drift: each sparkle wanders a little and back while it twinkles. */
.homeV2__sparkle {
  animation:
    homeV2HolTwinkle var(--twinkle, 4s) ease-in-out var(--twinkle-delay, 0s) infinite,
    homeV2HolDrift var(--drift, 10s) ease-in-out var(--drift-delay, 0s) infinite alternate;
}
@keyframes homeV2HolDrift { from { translate: 0 0; } to { translate: var(--dx, 0) var(--dy, -8px); } }

.homeV2__holidayGreeting {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: var(--hol-accent);
}
.homeV2__holidayGreeting[hidden] { display: none; }
.homeV2__holidayGreetingRef {
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.homeV2__holidayGreetingRef:hover { text-decoration: underline; }

/* Late night: the greeting sits in a frosted capsule, with a dot styled like a shooting-star head. */
.homeV2[data-night] { --night-capsule: rgba(255, 253, 248, 0.62); }
[data-theme="dark"] .homeV2[data-night] { --night-capsule: rgba(20, 24, 40, 0.55); }

.homeV2[data-night] .homeV2__holidayGreeting {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  /* --night-shift (set in home-v2.js) pulls the edge out to line up with the cards below. */
  max-width: calc(100% - var(--night-shift, 0px));
  box-sizing: border-box;
  margin: 0 0 16px var(--night-shift, 0px);
  padding: 8px 14px;
  border: 1px solid var(--surface-card-border);
  border-radius: 999px;
  background: var(--night-capsule);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(12, 22, 34, 0.08);
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}
.homeV2[data-night] .homeV2__holidayGreeting[hidden] { display: none; }
.homeV2__nightGreetingText {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
  text-wrap: pretty;
}
.homeV2__nightGreetingDot {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: calc((1.3em - 6px) / 2); /* centred on the first line (line-height 1.3) */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--night-head);
  box-shadow: 0 0 6px 2px var(--night-head-glow);
}
.homeV2__nightGreetingRefWrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.homeV2__nightGreetingDivider {
  width: 1px;
  height: 16px;
  background: var(--border);
}
.homeV2[data-night] .homeV2__holidayGreetingRef {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--hol-accent);
}
.homeV2[data-night] .homeV2__holidayGreetingRef:hover { text-underline-offset: 3px; }
.homeV2[data-night] .homeV2__holidayGreetingRef svg { opacity: 0.6; }

/* When the reference wraps under the line (a long line, or a phone), home-v2.js adds .is-stacked:
   the capsule becomes a rounded box and the reference sits indented under the text. */
.homeV2[data-night] .homeV2__holidayGreeting.is-stacked { border-radius: 16px; }
.homeV2__holidayGreeting.is-stacked .homeV2__nightGreetingDivider { display: none; }
.homeV2__holidayGreeting.is-stacked .homeV2__nightGreetingRefWrap { padding-left: 16px; }

/* Card */
.homeV2__holiday {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 0 0 14px;
  padding: 18px 26px 18px 20px;
  border: 1px solid var(--hol-border);
  border-radius: 14px;
  background: var(--surface-card);
  box-shadow: var(--subtle-shadow);
  overflow: hidden;
}
.homeV2__holiday[hidden] { display: none; }
/* On a holiday the card sits first, over the banner's edge, and the practice card follows it. */
.homeV2[data-holiday] .homeV2__holiday {
  margin-top: -3.2rem;
  z-index: 2;
  box-shadow: 0 10px 28px rgba(12, 22, 34, 0.10);
}
.homeV2[data-holiday] .homeV2__practiceCard { margin-top: 0; }
.homeV2__holiday::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 220% at 0% 50%, var(--hol-glow-1) 0%, var(--hol-glow-2) 45%, transparent 75%);
  animation: homeV2HolBreathe 5s ease-in-out infinite;
}

/* Seal (circle by default) */
.homeV2__holidaySeal {
  position: relative;
  width: 78px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--hol-seal-ink);
}
.homeV2__holidaySeal::before,
.homeV2__holidaySeal::after { content: ""; position: absolute; }
.homeV2__holidaySeal::before {
  inset: 2px;
  border-radius: 50%;
  background: var(--hol-seal);
  box-shadow:
    0 0 0 5px var(--hol-seal-halo, transparent),
    0 0 0 11px var(--hol-seal-halo, transparent),
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 10px var(--hol-seal-shadow, rgba(0,0,0,0.2));
}
.homeV2__holidaySealRing { display: none; }
.homeV2__holidaySealTop,
.homeV2__holidaySealMain,
.homeV2__holidaySealBottom { position: relative; }
.homeV2__holidaySealTop {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding-left: 0.16em;
  text-transform: uppercase;
}
.homeV2__holidaySealMain {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 0.95;
}
.homeV2__holidaySealBottom:empty,
.homeV2__holidaySealTop:empty { display: none; }

/* Christmas: 8-point star from two squares + thin inner ring */
.homeV2[data-holiday="christmas"] .homeV2__holidaySeal { gap: 2px; }
.homeV2[data-holiday="christmas"] .homeV2__holidaySeal::before,
.homeV2[data-holiday="christmas"] .homeV2__holidaySeal::after {
  inset: auto;
  left: 9px; top: 9px;
  width: 60px; height: 60px;
  border-radius: 6px;
  background: var(--hol-seal);
}
.homeV2[data-holiday="christmas"] .homeV2__holidaySeal::before { box-shadow: 0 4px 10px rgba(120,86,30,0.22); }
.homeV2[data-holiday="christmas"] .homeV2__holidaySeal::after { transform: rotate(45deg); }
.homeV2[data-holiday="christmas"] .homeV2__holidaySealRing {
  display: block;
  position: absolute;
  left: 12px; top: 12px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,253,248,0.45);
  z-index: 1;
}
.homeV2[data-holiday="christmas"] .homeV2__holidaySealTop { z-index: 1; font-size: 9px; letter-spacing: 0.14em; padding-left: 0.14em; }
.homeV2[data-holiday="christmas"] .homeV2__holidaySealMain { z-index: 1; font-size: 24px; }

/* Holy Week countdown seal */
.homeV2__holidaySeal--count { gap: 3px; }
.homeV2__holidaySeal--count .homeV2__holidaySealMain { line-height: 0.9; }
.homeV2__holidaySealBottom {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
}

/* Body */
.homeV2__holidayBody {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.homeV2__holidayMeta {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hol-accent);
}
.homeV2__holidayLine {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}
.homeV2__holidayLine em { font-style: italic; }
.homeV2__holidayFoot {
  margin-top: 4px;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.homeV2__holidayLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--hol-link-border);
  background: var(--hol-link-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.homeV2__holidayLink:hover { background: color-mix(in srgb, var(--hol-link-bg), var(--hol-link-border) 40%); }
.homeV2__holidayLinkRef { font-size: 13px; font-weight: 700; color: var(--hol-ref); }
/* Keep the reference and arrow whole; only the label wraps on narrow screens. */
.homeV2__holidayLinkRef,
.homeV2__holidayLink > [aria-hidden] { flex: none; white-space: nowrap; }

/* Holy Week day track */
.homeV2__holidayWeek {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.homeV2__holidayWeek[hidden] { display: none; }
.homeV2__holidayDay {
  /* Fixed rows keep every label on one line and every dot centred on one line, whatever its size. */
  display: grid;
  grid-template-rows: auto 11px;
  justify-items: center;
  align-items: center;
  row-gap: 5px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted, #5c6670);
}
.homeV2__holidayDay i { display: block; width: 7px; height: 7px; border-radius: 50%; }
.homeV2__holidayDay--past { color: var(--hol-day-past); }
.homeV2__holidayDay--past i { background: var(--hol-day-fill); }
.homeV2__holidayDay--today { color: var(--hol-accent); }
.homeV2__holidayDay--today i {
  width: 11px; height: 11px;
  background: var(--hol-day-fill);
  animation: homeV2HolToday 3s ease-in-out infinite;
}
.homeV2__holidayDay--future i { border: 1.5px solid var(--hol-day-ring); }
.homeV2__holidayDay--easter { position: relative; margin-left: 22px; color: var(--hol-easter-ink); }
.homeV2__holidayDay--easter::before {
  content: "";
  position: absolute;
  left: -22px; bottom: 5px;
  width: 12px; height: 1px;
  background: rgba(181,145,77,0.6);
}
/* The Easter label overhangs its column, centred over the dot, so the column is only as wide as
   the dot and the line before it sits evenly between Saturday and Easter. */
.homeV2__holidayDay--easter span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.homeV2__holidayDay--easter i { width: 9px; height: 9px; background: var(--surface-card); border: 1.5px solid #B5914D; }

/* Motion */
@keyframes homeV2HolTwinkle { 0%, 100% { opacity: 0.15; transform: scale(0.6); } 50% { opacity: 0.95; transform: scale(1); } }
@keyframes homeV2HolRise { 0% { transform: translateY(14%); opacity: 0.7; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes homeV2HolBloom { 0% { transform: scale(0.92); opacity: 0.65; } 100% { transform: scale(1.06); opacity: 1; } }
@keyframes homeV2HolBreathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes homeV2HolToday { 0%, 100% { box-shadow: 0 0 0 3px rgba(120,90,170,0.22); } 50% { box-shadow: 0 0 0 6px rgba(120,90,170,0.06); } }

@media (prefers-reduced-motion: reduce) {
  .homeV2__sparkle,
  .homeV2__holidayLight::before,
  .homeV2__holiday::before,
  .homeV2__holidayDay--today i { animation: none; }
  .homeV2__sparkle { opacity: 0.6; }
}

.homeV2__entryLink {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-solid);
}

.homeV2__specialPracticeGroup {
  margin-bottom: 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 0;
}

.homeV2__specialPracticeStrip {
  text-decoration: none;
  color: var(--ink);
  padding: 16px 15px 14px;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  text-align: center;
  gap: 6px;
}

.homeV2__specialPracticeStrip + .homeV2__specialPracticeStrip {
  border-left: 1px solid var(--surface-card-border);
}

.homeV2__specialPracticeStrip .homeV2__entryMeta {
  justify-content: center;
}

.homeV2__specialPracticeStripMeta {
  text-transform: uppercase;
}

.homeV2__specialPracticeStripBody {
  display: block;
  text-align: center;
}

.homeV2__specialPracticeStripTagline {
  display: inline-block;
  font-family: "Equity A", Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 540px;
}

.homeV2__specialPracticeStripLink {
  display: inline;
  margin-left: 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-solid);
  white-space: nowrap;
}

.homeV2__quick {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-bottom: 12px;
}

.homeV2__flowViewport {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: transparent;
  padding: 7px 6px;
  margin-bottom: 8px;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.homeV2__flowViewport:last-child {
  margin-bottom: 0;
}

.homeV2__flowTrack {
  display: flex;
  width: max-content;
  gap: 0;
  align-items: center;
}

.homeV2__flowTrack.is-animated {
  animation-name: homeV2Flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.homeV2__flowViewport:hover .homeV2__flowTrack.is-animated,
.homeV2__flowViewport:focus-within .homeV2__flowTrack.is-animated {
  animation-play-state: paused;
}

.homeV2__flowRun {
  display: inline-flex;
  gap: 7px;
  padding-right: 7px;
  flex-shrink: 0;
}

@keyframes homeV2Flow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.homeV2__flowEmpty {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 3px;
}

.homeV2__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-panel);
  color: var(--muted);
  font-size: 12px;
  padding: 6px 10px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.homeV2__pill:hover {
  color: var(--ink);
  border-color: var(--blue-border-strong);
  background: var(--blue-wash);
}

.homeV2__pillTag {
  font-family: var(--mono, var(--sans));
  color: color-mix(in srgb, var(--ink) 72%, var(--muted) 28%);
  font-size: 11px;
  font-weight: 700;
}

.homeV2__pillTag--practice {
  margin-left: -2px;
}

.homeV2__momentSymbol {
  font-size: 14px;
  margin-right: 0;
  line-height: 0;
}
.homeV2__momentSymbol--occurrence { color: var(--blue-solid); font-size: 11px; position: relative; top: -1px; }
.homeV2__momentSymbol--seed { color: var(--seed-dot); }
.homeV2__momentSymbol--milestone { color: var(--milestone-dot); position: relative; top: -1px; }
.homeV2__momentSymbol--zenith { color: var(--zenith-dot); position: relative; top: -1px; }

.homeV2__pill--flow {
  flex-shrink: 0;
}

.homeV2__prose {
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  padding: 0 var(--homeV2-content-pad-x) 14px;
  margin-bottom: 12px;
}

.homeV2__prose p {
  margin: 0 0 0.75em;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink);
}

.homeV2__prose p:last-child {
  margin-bottom: 0;
}

.homeV2__proseList {
  margin: 0 0 0.9em 1.2em;
  padding: 0;
  color: var(--ink);
}

.homeV2__proseList li {
  margin: 0 0 0.5em;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.68;
}

.homeV2__proseList li:last-child {
  margin-bottom: 0;
}

.homeV2__prose a {
  color: var(--blue-solid);
  text-decoration: none;
  font-weight: 600;
}

.homeV2__prose a:hover {
  text-decoration: underline;
}

.homeV2__facimRef {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  vertical-align: baseline;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.homeV2__prose a.homeV2__facimRef {
  font-weight: 400;
}

.homeV2__prose a.homeV2__facimRef:hover,
.homeV2__prose a.homeV2__facimRef:focus-visible {
  text-decoration: none;
  border-bottom-color: currentColor;
}

.homeV2__proseLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 2px;
}

.homeV2__proseLinks a {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.homeV2__secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 2px calc(var(--homeV2-content-pad-x) * -1) 26px;
}

.homeV2__lectureCard {
  border: 1px solid var(--surface-card-border);
  border-radius: 14px;
  background: var(--surface-card);
  box-shadow: var(--subtle-shadow);
  padding: 14px 13px;
  transition: border-color 0.15s, transform 0.12s;
}

.homeV2__lectureCard:hover,
.homeV2__lectureCard:focus-within {
  border-color: var(--blue-border-strong);
  transform: translateY(-1px);
}

.homeV2__lectureCard .homeV2__entryMeta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  line-height: 1.25;
}

.homeV2__lectureCard .homeV2__entryTitle {
  margin: 0 0 8px;
  font-size: 21px;
  max-width: none;
  white-space: nowrap;
}

.homeV2__lectureCard .homeV2__entryDesc {
  margin: 0 0 11px;
  font-size: 15px;
  line-height: 1.63;
}

.homeV2__lectureTools {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.homeV2__lectureTools a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-panel);
  color: var(--blue-solid);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  padding: 5px 9px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.homeV2__lectureTools a:hover {
  border-color: var(--blue-border-strong);
  background: var(--blue-wash);
  color: var(--ink);
  text-decoration: none;
}

.homeV2__lectureTools a:focus-visible {
  text-decoration: none;
}

.homeV2__attribution {
  border-top: 1px solid var(--surface-card-border);
  padding: 12px var(--homeV2-content-pad-x) 0;
  display: grid;
  gap: 10px;
}

.homeV2__attribution p {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.62;
  color: var(--muted);
}

.homeV2__attributionBrand {
  text-align: center;
  font-weight: 600;
}

.homeV2__attributionBody {
  width: 100%;
  margin: 0;
  text-align: left;
}

.homeV2__attributionBody p {
  margin: 0 0 0.72em;
}

.homeV2__attributionBody p:last-child {
  margin-bottom: 0;
}

.homeV2__attributionLink {
  width: 100%;
  margin: 0;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.homeV2__attribution a {
  color: var(--muted);
  text-decoration: underline;
}

@media (max-width: 860px) {
  .homeV2__practiceFlows {
    display: none;
  }

  .homeV2__entries {
    grid-template-columns: 1fr;
  }

  .homeV2__secondary {
    grid-template-columns: 1fr;
  }

  .homeV2__anniversary { gap: 16px; padding: 14px 16px; }
  .homeV2__anniversarySeal { width: 60px; height: 60px; }
  .homeV2__anniversaryDay { font-size: 24px; }
  .homeV2__anniversaryMessage { font-size: 17px; }
  .homeV2__holiday { gap: 16px; padding: 14px 16px; align-items: start; }
  .homeV2__holidaySeal { transform: scale(0.82); margin: -7px; }
  .homeV2__holidayLine { font-size: 17px; }
  .homeV2__holidayGreeting { font-size: 19px; }
}

/* On phones the holiday link takes its own row across the whole card, under the seal too. */
@media (max-width: 640px) {
  .homeV2__holiday { row-gap: 6px; }
  .homeV2__holidayBody { display: contents; }
  .homeV2__holidaySeal { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .homeV2__holidayMeta,
  .homeV2__holidayLine,
  .homeV2__holidayFoot { position: relative; grid-column: 2; }
  .homeV2__holidayMeta { grid-row: 1; align-self: end; }
  .homeV2__holidayLine { grid-row: 2; }
  .homeV2__holidayFoot { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; justify-content: center; }
  .homeV2__holidayLink { width: 100%; border-radius: 14px; line-height: 1.3; }
  .homeV2__holidayLinkLabel { margin-right: auto; }
}

@media (max-width: 640px) {
  .homeV2__title {
    font-size: clamp(26px, 7vw, 32px);
  }

  .homeV2__subtitle {
    font-size: 17px;
  }

  .homeV2__lectureCard .homeV2__entryTitle {
    white-space: normal;
  }

  .homeV2__specialPracticeStrip {
    padding: 0;
    display: grid;
    justify-items: start;
    text-align: left;
    gap: 8px;
  }

  .homeV2__specialPracticeGroup {
    grid-template-columns: 1fr;
    padding: 16px 15px 14px;
    gap: 12px;
  }

  .homeV2__specialPracticeStrip + .homeV2__specialPracticeStrip {
    border-left: none;
    border-top: 1px solid var(--surface-card-border);
    padding-top: 12px;
  }

  .homeV2__specialPracticeStrip .homeV2__entryMeta {
    justify-content: flex-start;
  }

  .homeV2__specialPracticeStripBody {
    text-align: left;
  }

  .homeV2__specialPracticeStripTagline {
    display: block;
    max-width: none;
  }

  .homeV2__specialPracticeStripLink {
    display: block;
    margin-left: 0;
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homeV2__flowTrack.is-animated {
    animation: none;
  }
}

/* ── Text Index ── */
.text-index{
  --text-index-ref-col: 1.7rem;
  --text-index-ref-gap: 10px;
  max-width: 1080px; margin: 5px auto 0; padding: 0 0 4rem;
}
.text-index__search{ margin-bottom: 14px; }
.text-index__sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-index__controls{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-card); box-shadow: var(--subtle-shadow);
}
.text-index__tablist{
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.text-index__tab{
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--surface-card-border);
  background: var(--surface-card); color: var(--muted); cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.text-index__tab:hover{
  color: var(--blue-solid); border-color: var(--blue-solid);
}
.text-index__tab[aria-selected="true"]{
  color: var(--ink); border-color: var(--blue-border-strong);
  background: var(--blue-wash); font-weight: 600;
}
.text-index__tab:focus-visible{
  outline: 2px solid var(--blue-solid); outline-offset: 1px;
}
.text-index__searchRow{ margin-bottom: 8px; }
.text-index__searchWrap{ position: relative; flex: 1 1 240px; min-width: 200px; }
.text-index__searchWrap::before{
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; pointer-events: none;
  background-color: var(--muted); transition: background-color 0.15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.text-index__searchWrap:focus-within::before{ background-color: var(--blue-solid); }
.text-index__search-input{
  width: 100%; padding: 11px 42px 11px 36px; font-family: var(--sans); font-size: 13px;
  border: 1px solid var(--overlay-strong); border-radius: 8px;
  background: var(--surface-solid); color: var(--fg);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.text-index__search-input:hover{ border-color: var(--overlay-heavy); }
.text-index__search-input:focus{
  border-color: var(--blue-solid); box-shadow: 0 0 0 3px var(--blue-wash);
}
.text-index__search-input::placeholder{ color: var(--muted); }
.text-index__clear-btn{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 1px solid transparent; background: transparent; color: var(--muted);
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  display: none; font-size: 17px; line-height: 1; padding: 0;
}
.text-index__clear-btn:hover{ color: var(--ink); background: var(--overlay-subtle); }
.text-index__clear-btn:focus-visible{
  outline: 2px solid var(--blue-solid); outline-offset: 1px;
}
.text-index__meta{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; min-height: 20px;
  padding-left: 14px;
}
.text-index__status{
  font-size: 12px; color: var(--muted); letter-spacing: 0.2px;
}
.text-index__no-results{
  display: none; margin: 0 0 14px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--surface-inset-border);
  background: var(--surface-inset); font-size: 13px; color: var(--muted);
}
.text-index__jump{
  position: sticky; top: 10px; z-index: 15;
  margin-bottom: 14px; padding: 9px; border-radius: 12px;
  border: 1px solid var(--surface-card-border); background: var(--surface-card);
  box-shadow: var(--subtle-shadow);
}
.text-index__jump-shell{
  position: relative;
}
.text-index__jump-track{
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.text-index__jump-track::-webkit-scrollbar{
  display: none;
}
.text-index__jump-edge{
  position: absolute;
  top: 0;
  bottom: 2px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.text-index__jump-edge--left{
  left: 0;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-card) 97%, var(--surface-panel-strong) 3%) 0%, color-mix(in srgb, var(--surface-card) 82%, transparent) 58%, transparent 100%);
}
.text-index__jump-edge--right{
  right: 0;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--surface-card) 97%, var(--surface-panel-strong) 3%) 0%, color-mix(in srgb, var(--surface-card) 82%, transparent) 58%, transparent 100%);
}
.text-index__jump-chevron{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--ink) 74%, var(--muted) 26%);
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--surface-card) 72%, transparent);
}
.text-index__jump-shell.is-scrollable-left .text-index__jump-edge--left,
.text-index__jump-shell.is-scrollable-right .text-index__jump-edge--right{
  opacity: 1;
}
.text-index__jump-btn{
  border: 1px solid var(--surface-card-border); background: var(--surface-panel);
  color: var(--muted); text-decoration: none; padding: 6px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s;
  outline: none;
  box-shadow: none;
}
.text-index__jump-btn.is-active{
  color: var(--ink); border-color: var(--blue-border-strong); background: var(--blue-wash);
}
.text-index__jump-btn:focus{
  outline: none;
  box-shadow: none;
}
.text-index__jump-btn:focus-visible{
  color: var(--ink);
  border-color: var(--blue-solid);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue-wash) 92%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .text-index__jump-btn:hover{
    color: var(--ink);
    border-color: var(--blue-border-strong);
    background: var(--blue-wash);
  }
}
/* Below 900px, the same size as the compact pinned pills on Full Trail and
   Section Motifs, for reliable tapping. */
@media (max-width: 900px) {
  .text-index__jump-track{ gap: 6px; }
  .text-index__jump-btn{ padding: 7px 12px; font-size: 13px; }
}
.text-index__grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px;
}
.text-index__chapter-card{
  border: 1px solid var(--surface-card-border); border-radius: var(--radius);
  background: var(--surface-card); box-shadow: var(--subtle-shadow);
  overflow: clip; scroll-margin-top: 78px;
}
.text-index__chapter-head{
  border-bottom: 1px solid var(--surface-card-border);
  padding: 12px 14px; background: var(--overlay-subtle);
  display: flex; align-items: center; gap: 10px;
}
.text-index__chapter-titleWrap{
  min-width: 0; display: grid;
  grid-template-columns: var(--text-index-ref-col) minmax(0, 1fr);
  align-items: baseline; column-gap: var(--text-index-ref-gap); width: 100%;
}
.text-index__chapter-titleWrap--linked {
  text-decoration: none;
  color: inherit;
}
.text-index__chapter-titleWrap--linked:hover .text-index__chapter-title {
  text-decoration: underline;
}
.text-index__chapter-ref{
  font-family: var(--mono, var(--sans)); font-size: 12px;
  color: var(--blue-solid); font-weight: 600; white-space: nowrap; text-align: right;
}
.text-index__chapter-title{
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--fg); line-height: 1.25; min-width: 0;
}
.text-index__chapter-body{ padding: 2px 0; }
.text-index__section-row{
  display: grid; grid-template-columns: var(--text-index-ref-col) minmax(0, 1fr);
  align-items: baseline; column-gap: var(--text-index-ref-gap); min-height: 42px;
  padding: 9px 14px; color: var(--fg); text-decoration: none;
  border-top: 1px solid var(--surface-inset-border);
  transition: background 0.12s, color 0.12s;
}
.text-index__section-row:first-child{ border-top: 0; }
.text-index__section-row:hover{
  background: var(--blue-wash); color: var(--ink);
}
.text-index__section-row:focus-visible{
  outline: 2px solid var(--blue-solid); outline-offset: -2px;
  background: var(--blue-wash);
}
.text-index__section-ref{
  font-family: var(--mono, var(--sans)); font-size: 12px;
  color: var(--blue-solid); white-space: nowrap; text-align: right;
}
.text-index__section-title{
  font-family: var(--serif); font-size: 16px; line-height: 1.3; min-width: 0;
}
.text-index mark{
  background: rgba(255, 221, 87, 0.28); color: inherit;
  padding: 0 1px; border-radius: 3px;
}

/* ---- Panel visibility ---- */
.text-index__panel{ display: none; }
.text-index__panel.is-active{ display: block; }

/* ---- Chapters panel (flat list with summary + patterns) ---- */
.text-index__chapterList{
  display: flex; flex-direction: column; gap: 14px;
}
.text-index__chapter-item{
  border: 1px solid var(--surface-card-border); border-radius: var(--radius);
  background: var(--surface-card); box-shadow: var(--subtle-shadow);
  padding: 16px 20px 18px; scroll-margin-top: 78px;
  display: flex; flex-direction: column; gap: 10px;
}
.text-index__chapter-itemHead{
  display: grid;
  grid-template-columns: var(--text-index-ref-col) minmax(0, 1fr);
  align-items: baseline; column-gap: var(--text-index-ref-gap);
  text-decoration: none; color: inherit;
}
.text-index__chapter-itemHead:hover .text-index__chapter-itemTitle{
  text-decoration: underline;
}
.text-index__chapter-itemRef{
  font-family: var(--mono, var(--sans)); font-size: 13px;
  color: var(--blue-solid); font-weight: 600; white-space: nowrap; text-align: right;
}
.text-index__chapter-itemTitle{
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--fg); line-height: 1.25; min-width: 0;
}
.text-index__chapter-summary{
  margin: 0;
  font-family: var(--serif); font-size: 16px; line-height: 1.55;
  color: var(--fg);
}
.text-index__chapter-patterns{
  margin: 0;
  font-family: var(--serif); font-size: 16px; line-height: 1.55;
  color: var(--muted); font-style: italic;
}

/* ---- Sections panel (detailed rows with convergence_in_brief) ---- */
.text-index__grid--detailed{
  grid-template-columns: 1fr;
}
.text-index__grid--detailed .text-index__chapter-ref,
.text-index__grid--detailed .text-index__section-ref{
  font-size: 13px;
}
.text-index__section-row--detailed{
  display: block;
  padding: 11px 14px 13px;
  min-height: 0;
}
.text-index__section-row--detailed .text-index__section-rowHead{
  display: grid;
  grid-template-columns: var(--text-index-ref-col) minmax(0, 1fr);
  align-items: baseline; column-gap: var(--text-index-ref-gap);
}
.text-index__section-brief{
  margin-top: 4px;
  padding-left: calc(var(--text-index-ref-col) + var(--text-index-ref-gap));
  font-family: var(--serif); font-size: 16px; line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 760px) {
  .text-index__grid{ grid-template-columns: 1fr; }
  .text-index__chapter-title{ font-size: 16px; }
  .text-index__chapter-itemTitle{ font-size: 17px; }
  .text-index__jump{ top: 6px; }
  .text-index__jump{ padding-left: 10px; padding-right: 10px; }
  .text-index__chapter-card{ scroll-margin-top: 70px; }
  .text-index__chapter-item{ scroll-margin-top: 70px; padding: 14px 16px 16px; }
  .text-index__section-brief{
    padding-left: 0;
    margin-top: 3px;
  }
}

/* ============================================================
   SUB-PAGE SHELL — Shared framework for hub-and-spoke pages
   ============================================================
   The hub-and-spoke refactor splits monolithic motif and section
   pages into focused sub-pages. This shell ensures every sub-page
   shares identical max-width, padding, and spacing.
   
   Container hierarchy:
     subpage-header  → compact title/subtitle (inside shell)
     subpage-nav     → horizontal tab row
     subpage-content → main content area (SSR-rendered subBody)
     subpage-cta     → bottom call-to-action link
   ============================================================ */

.subpage-header {
  /* Mirrors the .motifHeader blue box so sub-pages have the same
     branded container — just with less content inside (name + definition only).
     Lives INSIDE .subpage-content so it inherits the same max-width
     and padding as all other page content. No separate max-width needed. */
  padding: 18px;
  margin-bottom: 12px;
  background: var(--blue-wash);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius);
  box-shadow: var(--subtle-shadow);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 18px;
  row-gap: 12px;
}

.subpage-header__copy {
  min-width: 0;
}

.subpage-header__title {
  /* Subpage title styling */
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.subpage-header__subtitle {
  /* Matches .motifHeader__def exactly */
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.5;
  grid-column: 1 / -1;
  max-width: none;
}

.subpage-header__actions {
  margin-top: 0;
  align-self: start;
}

/* ============================================================
   SUB-PAGE NAV — Horizontal tab row for sub-page navigation
   ============================================================
   Appears below the compact header on all sub-pages.
   Scrollable horizontally on mobile with hidden scrollbars.
   ============================================================ */

.subpage-nav-shell {
  position: sticky;
  top: 0;
  z-index: 60;
  margin-bottom: 20px;
}

body[data-page-type="motif-overview"] .subpage-nav-shell,
body[data-page-type="motif-charts"] .subpage-nav-shell,
body[data-page-type="motif-teachings"] .subpage-nav-shell,
body[data-page-type="section-teachings"] .subpage-nav-shell,
body[data-page-type="motif-journey"] .subpage-nav-shell,
body[data-page-type="section-overview"] .subpage-nav-shell {
  margin-bottom: 12px;
}

.subpage-nav {
  /* Lives inside .subpage-content — no max-width/margin needed */
  padding: 4px;
  display: flex;
  gap: 2px;
  border: 1px solid var(--surface-card-border);
  border-radius: 10px;
  background: var(--surface-panel-strong);
  box-shadow: var(--subtle-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Horizontal scroll on mobile */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar */
  scrollbar-width: none;
}

.subpage-nav-shell__edge {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 34px;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.subpage-nav-shell__edge--left {
  left: 1px;
  justify-content: flex-start;
  padding-left: 2px;
  background: linear-gradient(
    90deg,
    var(--surface-panel-strong) 18%,
    color-mix(in srgb, var(--surface-panel-strong) 92%, transparent) 56%,
    color-mix(in srgb, var(--surface-panel-strong) 0%, transparent) 100%
  );
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
}

.subpage-nav-shell__edge--right {
  right: 1px;
  justify-content: flex-end;
  padding-right: 2px;
  background: linear-gradient(
    270deg,
    var(--surface-panel-strong) 18%,
    color-mix(in srgb, var(--surface-panel-strong) 92%, transparent) 56%,
    color-mix(in srgb, var(--surface-panel-strong) 0%, transparent) 100%
  );
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
}

.subpage-nav-shell__chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--ink) 74%, var(--muted) 26%);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  /* ‹ and › sit at x-height on the baseline, about 1.6px below the box's
     centre at 18px; lift them so the mark itself is centred. */
  transform: translateY(-0.09em);
}

.subpage-nav-shell.is-overflow-left .subpage-nav-shell__edge--left,
.subpage-nav-shell.is-overflow-right .subpage-nav-shell__edge--right {
  opacity: 1;
}

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

.subpage-nav__link {
  /* Pill/tab style links — inspired by styleguide segmented buttons */
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.subpage-nav__link:hover {
  color: var(--ink);
  background: var(--overlay-subtle);
}

.subpage-nav__link.is-active {
  /* Active state: text color changes, underline appears */
  color: var(--blue-solid);
  border-color: var(--blue-border);
  background: rgba(74, 152, 232, 0.08);
  font-weight: 600;
}
.subpage-nav__link:focus-visible {
  outline: 2px solid var(--blue-solid);
  outline-offset: 2px;
}

/* ============================================================
   SUB-PAGE CONTENT — Standardized content container
   ============================================================
   THIS IS THE KEY: every sub-page's content lives inside this
   container. No sub-page should define its own max-width or
   horizontal padding — the shell handles it.
   ============================================================ */

.subpage-content {
  max-width: 1080px;
  margin: 0 auto;
  /* No horizontal padding — content fills the full container width
     to align with the header box edges. Individual elements provide
     their own internal padding as needed. */
  padding: 0 0 40px;
}

/* ============================================================
   SUB-PAGE CTA — Bottom call-to-action link to next sub-page
   ============================================================
   Guides the reader to the next logical step in the hub-and-spoke.
   Only appears on pages that have a "next" page.
   ============================================================ */

.subpage-cta {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 18px 48px;
  text-align: right;
}

.subpage-cta__link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-solid);
  text-decoration: none;
  transition: color 0.15s;
}

.subpage-cta__link:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ---- Bottom prev/next sub-page nav ---- */
.subpage-bottom-nav {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 18px 48px;
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.subpage-bottom-nav__link {
  flex: 1;
  display: block;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
.subpage-bottom-nav__link:hover {
  border-color: var(--blue-border);
  background: var(--blue-wash);
}
.subpage-bottom-nav__label {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.subpage-bottom-nav__title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
}
.subpage-bottom-nav__link:last-child {
  text-align: right;
}
@media (max-width: 768px) {
  .subpage-header {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .subpage-header__subtitle {
    margin-top: 0;
  }
  .subpage-bottom-nav { flex-direction: column; }
  .subpage-nav {
    top: 0;
    padding: 3px;
    gap: 2px;
  }
  .subpage-nav-shell__edge {
    width: 38px;
  }
  .subpage-nav-shell__edge--left {
    background: linear-gradient(
      90deg,
      var(--surface-panel-strong) 22%,
      color-mix(in srgb, var(--surface-panel-strong) 94%, transparent) 60%,
      color-mix(in srgb, var(--surface-panel-strong) 0%, transparent) 100%
    );
  }
  .subpage-nav-shell__edge--right {
    background: linear-gradient(
      270deg,
      var(--surface-panel-strong) 22%,
      color-mix(in srgb, var(--surface-panel-strong) 94%, transparent) 60%,
      color-mix(in srgb, var(--surface-panel-strong) 0%, transparent) 100%
    );
  }
}
/* Below 900px the sub-page links keep their 13px text and grow for reliable
   tapping, as the compact pinned pills on Full Trail and Section Motifs do. */
@media (max-width: 900px) {
  .subpage-nav__link {
    padding: 10px 16px;
  }
}

/* ============================================================
   EXPLORE CARDS — Hub page navigation cards
   ============================================================
   Used on overview pages to route users to sub-pages.
   Three cards on desktop, stack to single column on mobile.
   Styled to match existing panel/card design language.
   ============================================================ */

/* ============================================================
   Notable Absences — "What's Missing" aside on Section Overview
   ============================================================ */

.absence-aside {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 24px 0 0 0;
  box-shadow: var(--subtle-shadow);
}

.absence-aside__title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue-solid);
  margin-bottom: 8px;
}

.absence-aside__item {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  margin-bottom: 6px;
}

.absence-aside__item:last-child {
  margin-bottom: 0;
}

.absence-aside__motif {
  font-weight: 600;
}
/* On the motif Overview, counterpart names link to their motifs. */
.absence-aside__link { color: inherit; text-decoration: none; }
.absence-aside__link:hover { text-decoration: underline; }
/* The compare line is UI text, so it takes the site's 13px, as the Paragraphs
   tab's status line does, rather than the cards' smaller source-link size. */
.absence-aside__compare .stop__source-links,
.absence-aside__compare .stop__source-links a.stop__source-link { font-size: 13px; }

/* ============================================================
   Explore Cards — Section Overview
   ============================================================ */

.explore-cards {
  margin-top: 48px;
}

.explore-cards .h2 {
  /* Uses existing h2 styling */
  padding-left: 0;
}

.explore-cards__row {
  /* Grid: 3 columns on desktop, responsive to 1 column on mobile */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.explore-card {
  /* Card styling matches .stop and .editorial panels */
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--subtle-shadow);
}

.explore-card:hover {
  border-color: var(--blue-border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.explore-card__icon {
  /* Emoji icon at the top */
  font-size: 28px;
  margin-bottom: 12px;
}

.explore-card__title {
  /* Serif heading like other card titles */
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}

.explore-card__desc {
  /* Muted description text */
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1; /* Pushes CTA to bottom */
  margin: 0 0 16px;
}

.explore-card__cta {
  /* Call-to-action link style */
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-solid);
}

/* ============================================================
   JOURNEY PLACEHOLDER — Empty state for narrative journey
   ============================================================
   Shown when the narrative journey content hasn't been written yet.
   Provides helpful guidance and links to alternative content.
   ============================================================ */

/* ============================================
   SUBPAGE HEADING — shared style for sub-page titles
   (Journey "The Journey of ...", Charts "The Spiral Staircase of ...",
    Trail "Motif Trail") — left-aligned, outside content boxes
   ============================================ */
.subpage-heading {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 24px;
}
.subpage-heading em {
  font-style: italic;
}

@media (min-width: 761px) {
  body[data-page-type="motif-trail"] .trail__titleRow {
    padding-left: 18px;
    padding-right: 18px;
  }

  [data-contents-root] > .subpage-heading,
  [data-contents-root] > .contents-controls,
  [data-paragraphs-root] > .paragraphs__titleRow,
  [data-sections-root] > .paragraphs__titleRow,
  .chapter-motifs > .paragraphs__titleRow {
    padding-left: 13px;
    padding-right: 13px;
  }
}

/* ---- Motif Profile ---- */
.motif-profile-page .arc-narrative { margin-top: 0; }
.profile-section { margin-top: 20px; }
.profile-section__title { font-family: var(--sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; color: var(--blue-solid); margin: 0 0 10px; }
.profile-section__hint { font-family: var(--sans); font-size: 12px; color: var(--muted); margin: -6px 0 8px; }
.profile-section__hint em { font-style: italic; }
.profile-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--surface-inset); border: 1px solid var(--border); font-family: var(--sans); font-size: 13px; color: var(--soft-ink); white-space: nowrap; }
.profile-pill--link { color: var(--ink); text-decoration: none; cursor: pointer; transition: all 0.15s; }
.profile-pill--link:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Companion bar chart */
.companion-list { display: flex; flex-direction: column; gap: 2px; }
.companion-row { display: grid; grid-template-columns: 150px 1fr 90px; align-items: center; gap: 10px; padding: 5px 0; }
.companion-row__name { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.companion-row__name:hover { color: var(--accent); }
.companion-row__bar-wrap { height: 6px; background: var(--surface-inset); border-radius: 3px; overflow: hidden; }
.companion-row__bar { height: 100%; border-radius: 3px; background: var(--blue-solid); opacity: 0.55; }
.companion-row__count { font-family: var(--sans); font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
.companion-row__detail { font-family: var(--sans); font-size: 13px; color: var(--muted); opacity: 0.65; }

/* Split columns — asymmetric dependency */
.split-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.split-cols--three { grid-template-columns: 1fr 1fr 1fr; }
.split-col__header { font-family: var(--sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; color: var(--blue-solid); margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.split-col__hint { font-family: var(--sans); font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.split-col__item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.split-col__item + .split-col__item { border-top: 1px solid rgba(0,0,0,0.04); }
.split-col__name { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; }
.split-col__name:hover { color: var(--accent, var(--blue-solid)); }
.split-col__pct { font-family: var(--sans); font-size: 13px; color: var(--muted); }

/* Split column toggle */
.split-col__item--hidden { display: none; }
.split-col__toggle { display: block; margin-top: 6px; padding: 0; font-family: var(--sans); font-size: 13px; color: var(--blue-solid); background: none; border: none; cursor: pointer; text-align: left; }
.split-col__toggle:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .split-cols, .split-cols--three { grid-template-columns: 1fr; gap: 18px; }
}

/* Counterparts */
.counterpart-list { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.counterpart-item { font-family: var(--serif); font-size: 16px; line-height: 1.55; }
.counterpart-item::marker { color: var(--muted); }
.counterpart-item__name { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.counterpart-item__name:hover { color: var(--blue-solid); }
.counterpart-item__note { color: var(--muted); }

/* Profile page divider */
.profile-divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* Inline absence callout (section motif cards) */
.inline-absence { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--milestone-dot) 8%, transparent); border: 1px solid color-mix(in srgb, var(--milestone-dot) 20%, transparent); margin-top: 10px; }
.inline-absence__icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.inline-absence__text { font-family: var(--sans); font-size: 12px; color: var(--soft-ink); line-height: 1.5; }
.inline-absence__motif { font-weight: 600; color: var(--ink); text-decoration: none; }
.inline-absence__motif:hover { color: var(--accent); text-decoration: underline; }

.profile-list { font-family: var(--serif); font-size: 16px; line-height: 1.7; color: var(--soft-ink); margin: 0; padding-left: 20px; }
.profile-list li { margin-bottom: 4px; }

.motif-teachings-page .arc-narrative,
.section-teachings-page .arc-narrative { margin-top: 0; }
.motif-teachings-page .profile-section:first-child { margin-top: 0; }
/* Chapter Motifs tab: the chapter's motifs by section as a heatmap. Each cell
   is filled with the motif's tier there, on one ramp that keeps the tiers in
   order: the tier border colours at 80% in light mode, the brighter tier text
   colours at stepped strengths in dark mode (the dark border colours muddy as
   fills). A hairline of card colour keeps the tiles distinct. Hover never
   changes a cell's colour: it darkens the row's name and the column's label,
   outlines the cell, and lights its tier in the legend. */
.chapterMotifs{
  --cm-card: color-mix(in srgb, var(--panel) 92%, var(--bg));
  --cm-primary: color-mix(in srgb, var(--tier-primary-border) 80%, transparent);
  --cm-pillar: color-mix(in srgb, var(--tier-pillar-border) 80%, transparent);
  --cm-supporting: color-mix(in srgb, var(--tier-supporting-border) 80%, transparent);
  --cm-minor: color-mix(in srgb, var(--tier-minor-border) 80%, transparent);
  --cm-echo: color-mix(in srgb, var(--tier-echo-border) 80%, transparent);
}
[data-theme="dark"] .chapterMotifs{
  --cm-primary: color-mix(in srgb, var(--tier-primary-text) 52%, transparent);
  --cm-pillar: color-mix(in srgb, var(--tier-pillar-text) 40%, transparent);
  --cm-supporting: color-mix(in srgb, var(--tier-supporting-text) 30%, transparent);
  --cm-minor: color-mix(in srgb, var(--tier-minor-text) 19%, transparent);
  --cm-echo: color-mix(in srgb, var(--tier-echo-text) 11%, transparent);
}
.chapterMotifs__cell--primary{ background: var(--cm-primary); }
.chapterMotifs__cell--pillar{ background: var(--cm-pillar); }
.chapterMotifs__cell--supporting{ background: var(--cm-supporting); }
.chapterMotifs__cell--minor{ background: var(--cm-minor); }
.chapterMotifs__cell--echo{ background: var(--cm-echo); }
.chapterMotifs__head{ display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.chapterMotifs__legend{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.chapterMotifs__legendItem{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
/* Pointing at a cell outlines its tier's chip in ink, as the cell itself is. */
.chapterMotifs .tierChip.is-hover{ box-shadow: 0 0 0 1.5px var(--ink); color: var(--ink); }
.chapterMotifs__switches{ display: flex; flex-wrap: wrap; gap: 10px; }
.chapterMotifs__table{ width: 100%; table-layout: fixed; border-collapse: collapse; }
.chapterMotifs{ --cm-name: 16em; }
.chapterMotifs__nameCol{ width: var(--cm-name); }
/* The legend and section labels stick beneath the tabs as one block, outside
   the rows' sideways scroll (a sticky element inside its own scroll box would
   stick to that box, not the page); the script keeps the two in step. */
.chapterMotifs__sticky{
  position: sticky; top: var(--cm-sticky-top, 0px); z-index: 3;
  background: var(--cm-card);
  border-bottom: 1px solid var(--surface-card-border);
}
.chapterMotifs__headScroll{ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.chapterMotifs__headScroll::-webkit-scrollbar{ display: none; }
/* More sections off to one side: the sub-page nav's fade-and-chevron edges, as
   on the Paragraphs tab, on the section labels' row only (pinned rows and the
   rows below aren't faded), fading to the labels' blue. The left edge begins
   where the pinned motif names end. */
.chapterMotifs__headShell{ position: relative; }
.chapterMotifs__headShell .subpage-nav-shell__edge{ top: 0; bottom: auto; height: var(--cm-head-row, 100%); border-radius: 0; }
.chapterMotifs__headShell .subpage-nav-shell__edge--left{
  left: var(--cm-name);
  background:
    linear-gradient(90deg, var(--blue-wash) 18%, color-mix(in srgb, var(--blue-wash) 92%, transparent) 56%, transparent 100%),
    linear-gradient(90deg, var(--cm-card) 18%, color-mix(in srgb, var(--cm-card) 92%, transparent) 56%, transparent 100%);
}
.chapterMotifs__headShell .subpage-nav-shell__edge--right{
  right: 0;
  background:
    linear-gradient(270deg, var(--blue-wash) 18%, color-mix(in srgb, var(--blue-wash) 92%, transparent) 56%, transparent 100%),
    linear-gradient(270deg, var(--cm-card) 18%, color-mix(in srgb, var(--cm-card) 92%, transparent) 56%, transparent 100%);
}
.chapterMotifs.is-overflow-left .chapterMotifs__headShell .subpage-nav-shell__edge--left,
.chapterMotifs.is-overflow-right .chapterMotifs__headShell .subpage-nav-shell__edge--right{ opacity: 1; }
.chapterMotifs__scroll{ overflow-x: auto; }
.chapterMotifs__table thead th{
  padding: 8px 0; text-align: center; font-weight: inherit;
  background: linear-gradient(var(--blue-wash), var(--blue-wash)), var(--cm-card);
}
/* Motif names stay pinned on the left when the rows scroll sideways. */
.chapterMotifs__name{ position: sticky; left: 0; z-index: 1; }
.chapterMotifs__table tbody th.chapterMotifs__name{ background: var(--cm-card); }
.chapterMotifs__table thead th.chapterMotifs__name{ text-align: left; padding-left: 13px; }
.chapterMotifs__table thead th.is-col .paragraphsGrid__num{ color: var(--ink); font-weight: 700; }
.chapterMotifs__table tbody th,
.chapterMotifs__table tbody td{ border-top: 1px solid var(--surface-inset-border); }
.chapterMotifs__table tbody tr.is-first th,
.chapterMotifs__table tbody tr.is-first td{ border-top: 0; }
.chapterMotifs__table tbody th.chapterMotifs__name{
  padding: 4px 10px 4px 13px; text-align: left; font-weight: inherit;
}
.chapterMotifs__table tbody th .motifs-index__motif-name{ display: inline; text-decoration: none; }
.chapterMotifs__row:hover .motifs-index__motif-name{ color: var(--ink); }
.chapterMotifs__cell{ position: relative; height: 30px; padding: 0; }
.chapterMotifs__cell[data-tier]{ box-shadow: inset 0 0 0 1.5px var(--cm-card); }
.chapterMotifs__cell[data-tier]:hover{ box-shadow: inset 0 0 0 1.5px var(--cm-card), inset 0 0 0 2.5px var(--ink); }
.chapterMotifs__link{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.chapterMotifs__link:focus-visible{ outline: 2px solid var(--blue-solid); outline-offset: -2px; }
/* Ordering subheads: the title stays in view when the rows scroll sideways. */
.chapterMotifs__group .motifs-index__group-title{ position: sticky; left: 13px; }
.chapterMotifs__table tbody tr.chapterMotifs__group th{ text-align: left; }
/* As on the Paragraphs tab: the sticky block's rule runs beneath the pinned
   rows, and the Selected heading takes the rule under the section labels. */
.chapterMotifs [data-chapter-motifs-pinned] > .chapterMotifs__group:first-child th{ border-top: 1px solid var(--surface-card-border); }
/* The Selected heading sits on the header's blue wash, as on the Paragraphs
   tab, where the whole sticky block has it. */
.chapterMotifs [data-chapter-motifs-pinned] .motifs-index__group-head{
  background: linear-gradient(var(--overlay-subtle), var(--overlay-subtle)), linear-gradient(var(--blue-wash), var(--blue-wash)), var(--cm-card);
}
/* Motif names select; the reset matches the Paragraphs tab's. */
.chapterMotifs__pick{
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  text-align: left; cursor: pointer;
  overflow-wrap: anywhere; /* long names wrap, as on the Paragraphs tab */
}
.chapterMotifs__pick:focus-visible{ outline: 2px solid var(--blue-solid); outline-offset: 2px; }
/* Selected motifs sit in the sticky header, their names on a blue band (the
   cells stay as in the list); sections they all share light their labels. */
.chapterMotifs__row.is-selected th.chapterMotifs__name{
  background: linear-gradient(var(--blue-light), var(--blue-light)), var(--cm-card);
}
.chapterMotifs__row.is-selected .motifs-index__motif-name{ color: var(--ink); font-weight: 700; }
.chapterMotifs__table thead th.is-match{
  background: linear-gradient(var(--blue-light), var(--blue-light)), var(--cm-card);
}
.chapterMotifs__table thead th.is-match .paragraphsGrid__num{ color: var(--ink); font-weight: 700; }
/* A hidden tier's cells go blank. */
.chapterMotifs__cell.is-tierOff{ background: none; box-shadow: none; }
.chapterMotifs__cell.is-tierOff .chapterMotifs__link{ visibility: hidden; }
/* The sticky header grows and shrinks as motifs are selected; the page stays put. */
.chapterMotifs{ overflow-anchor: none; }
.chapterMotifs [hidden],
.chapterMotifs__switches [hidden]{ display: none; }
@media (max-width: 760px) {
  .chapterMotifs__table{ min-width: 600px; }
  .chapterMotifs{ --cm-name: 9em; }
}

/* Section Teachings: each bullet opens with its motif's name, and each reversal
   names its motif ahead of the topic, in the occurrence cards' title treatment
   (ink, semibold, thin underline that darkens on hover). */
.sectionTeachings__motif{
  color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--surface-card-border); transition: border-color 0.15s;
}
.sectionTeachings__motif:hover{ border-color: var(--ink); }
.teachings-reversal__territory .sectionTeachings__motif{ color: var(--muted); }
/* In a "Drawn from" row, this section's own entry marks where it falls among
   the sources, tinted with the light blue the Paragraphs tab's chips use and
   padded like the acim.org source chips. */
.teachings-links .sectionTeachings__here{
  background: var(--blue-light); color: var(--ink); font-weight: 600; cursor: default;
  padding: 1px 6px; border-radius: 3px;
}
.teachings-links .sectionTeachings__here:hover{ background: var(--blue-light); color: var(--ink); text-decoration: none; }
.teachings-content__article { min-width: 0; }
.teachings-section { min-width: 0; }
.motif-teachings-page .teachings-section,
.section-teachings-page .teachings-section {
  scroll-margin-top: 12px;
}
.teachings-section__body { min-width: 0; }
.teachings-empty { margin: 0; color: var(--muted); }
.teachings-section__intro {
  margin: -2px 0 14px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--soft-ink);
}

.teachings-list {
  margin: 0;
  padding-left: 22px;
}

.teachings-list__item {
  color: var(--soft-ink);
  margin-bottom: 14px;
  padding-left: 8px;
}

.teachings-list__item:last-child {
  margin-bottom: 0;
}

.teachings-list__item::marker {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-solid);
}

.teachings-list__body p {
  margin: 0 0 10px;
}

.teachings-list__body p:last-child {
  margin-bottom: 0;
}

.teachings-links {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.teachings-links__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.teachings-links__link {
  font-size: 12px;
}

.teachings-sequence {
  position: relative;
  padding-left: 0;
}

.teachings-sequence__rows {
  display: grid;
  gap: 4px;
}

.teachings-sequence__middle {
  position: relative;
  display: grid;
  gap: 4px;
}

.teachings-sequence__rail {
  position: absolute;
  left: 31px;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  background: color-mix(in srgb, var(--muted) 68%, var(--ink) 32%);
}

.teachings-sequence__row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
}

.teachings-sequence__content {
  min-width: 0;
}

.teachings-sequence__line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.teachings-sequence__marker,
.teachings-sequence__rule {
  display: block;
  width: 100%;
  justify-self: center;
  text-align: center;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--soft-ink);
}

.teachings-sequence__rule {
  position: relative;
  min-height: 1.6em;
  font-size: 0;
  line-height: 0;
}

.teachings-sequence__rule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 6px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235c6670' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 6px;
  opacity: 0.9;
}

.teachings-sequence__text {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--soft-ink);
}

.teachings-links--inline {
  margin-top: 0;
  gap: 4px;
}

.teachings-links--inline .teachings-links__link {
  font-size: 13px;
  white-space: nowrap;
}

.teachings-sequence__content .teachings-links {
  margin-top: 6px;
}

.teachings-sequence__content .teachings-links--inline {
  margin-top: 0;
}

.teachings-reversals {
  display: grid;
  gap: 12px;
}

.teachings-reversal {
  border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-panel) 88%, transparent),
      color-mix(in srgb, var(--surface-panel) 58%, transparent)
    );
  overflow: hidden;
}

.teachings-reversal__header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-inset) 82%, transparent),
      color-mix(in srgb, var(--surface-inset) 64%, var(--surface-panel) 36%)
    );
}

.teachings-reversal__header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.teachings-reversal__territory {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  min-width: 0;
}

.teachings-reversal__header .teachings-links--inline {
  margin-top: 0;
  justify-content: flex-end;
  flex: 0 1 auto;
  min-width: 0;
}

.teachings-reversal__header .teachings-links--inline .teachings-links__link {
  font-size: 12px;
}

.teachings-reversal__body {
  padding: 16px 18px 18px 26px;
}

.teachings-reversal__lane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 10px;
  max-width: 100%;
}

.teachings-reversal__connector {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: auto;
  height: auto;
}

.teachings-reversal__connector::before {
  content: "›";
  display: block;
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 58%, var(--muted) 42%);
  transform: translateY(-1px);
}

.teachings-reversal__text {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--soft-ink);
}

.teachings-reversal__text--released {
  text-align: left;
}

.teachings-reversal__text--recognized {
  color: var(--ink);
  font-weight: 600;
  padding: 3px 12px 5px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--blue-solid) 18%, transparent);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--blue-solid) 28%, transparent) 0%,
      color-mix(in srgb, var(--blue-solid) 18%, transparent) 18%,
      color-mix(in srgb, var(--blue-solid) 10%, transparent) 52%,
      color-mix(in srgb, var(--blue-solid) 4%, transparent) 100%
    );
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--blue-solid) 24%, transparent);
}

@media (max-width: 620px) {
  .teachings-sequence__rail {
    left: 27px;
  }

  .teachings-sequence__row {
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 10px;
  }
}

@media (max-width: 520px) {
  .teachings-reversal__header-top {
    flex-direction: column;
    align-items: stretch;
  }

  .teachings-reversal__header .teachings-links--inline {
    justify-content: flex-start;
  }

  .teachings-reversal__body {
    padding-left: 20px;
  }

  .teachings-reversal__lane {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .teachings-reversal__text--released {
    text-align: left;
  }

  .teachings-reversal__connector {
    justify-self: start;
  }

  .teachings-reversal__connector::before {
    content: "⌄";
    font-size: 16px;
  }
}

.journey-content {
  /* Uses standard spacing */
}

.journey-content--with-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
  gap: 14px;
  align-items: start;
}

.journey-content--with-rail > * {
  min-width: 0;
}

.journey-content__rail {
  display: grid;
  gap: 10px;
  position: sticky;
  top: var(--journey-rail-top, 10px);
}

.journey-content__toc {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-panel) 94%, transparent);
  padding: 10px;
}

.journey-content__toc-mobile {
  display: none;
  align-items: center;
  gap: 8px;
  margin: -8px 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.journey-content__toc-mobile label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.journey-content__toc-mobile select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--surface-panel);
  color: var(--ink);
  font-size: 13px;
  padding: 8px 38px 8px 10px;
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25l5-5' stroke='%235f6873' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

.journey-content__toc h2 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.journey-content__toc ul {
  margin: 9px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.journey-content__tocAux {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 72%, transparent);
}

.journey-content__tocAux--top {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.journey-content__toc a {
  display: block;
  padding: 4px 6px 4px 10px;
  border-left: 2px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  overflow-wrap: anywhere;
  line-height: 1.45;
  transition: color .15s, background .15s, border-color .15s;
}

.journey-content__toc a.is-aux {
  font-size: 13px;
  color: color-mix(in srgb, var(--muted) 92%, var(--ink) 8%);
}

.journey-content__toc a:hover {
  color: var(--ink);
  background: var(--overlay-subtle);
}

.journey-content__toc a.is-active {
  color: var(--blue-solid);
  text-decoration: none;
  border-left-color: var(--blue-solid);
  background: var(--blue-wash);
}

.journey-content__toc a.is-aux.is-active {
  color: color-mix(in srgb, var(--amber) 80%, var(--ink));
  border-left-color: color-mix(in srgb, var(--amber) 70%, transparent);
  background: color-mix(in srgb, var(--amber-light) 60%, var(--surface-panel));
}

.motif-journey .arc-narrative__body h2,
.motif-journey .arc-narrative__body h3,
.motif-journey .arc-narrative__body h4 {
  scroll-margin-top: 12px;
}

.motif-journey .arc-narrative__body h3 {
  margin: 16px 0 6px;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.motif-journey .arc-narrative {
  margin-top: 0;
}

.motif-journey .arc-narrative__body p {
  margin: 0;
  text-indent: 1.4em;
}

.motif-journey .arc-narrative__body > p:first-child,
.motif-journey .arc-narrative__body h2 + p,
.motif-journey .arc-narrative__body h3 + p,
.motif-journey .arc-narrative__body h4 + p,
.motif-journey .arc-narrative__body h5 + p {
  text-indent: 0;
}

.motif-overview .arc-narrative__body p {
  margin: 0;
  text-indent: 1.4em;
}

.motif-overview .arc-narrative {
  margin-top: 0;
}

.motif-overview .arc-narrative__body h2,
.motif-overview .arc-narrative__body h3,
.motif-overview .arc-narrative__body h4 {
  scroll-margin-top: 12px;
}

.motif-overview .arc-narrative__body h3 {
  margin: 16px 0 6px;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.motif-overview .arc-narrative__body > p:first-child,
.motif-overview .arc-narrative__body h2 + p,
.motif-overview .arc-narrative__body h3 + p,
.motif-overview .arc-narrative__body h4 + p,
.motif-overview .arc-narrative__body h5 + p {
  text-indent: 0;
}

.section-overview .editorial__body {
  margin: 0;
  text-indent: 1.4em;
}

.section-overview .editorial__subhead {
  margin: 16px 0 6px;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.section-overview .editorial__subhead,
.section-overview .editorial__heading {
  scroll-margin-top: 12px;
}

.section-overview .editorial__heading + .editorial__body,
.section-overview .editorial__subhead + .editorial__body {
  text-indent: 0;
}

.motif-trail .stopBody p,
.section-motifs .stopBody p {
  margin: 0;
}

.motif-trail .stopBody p + p,
.section-motifs .stopBody p + p {
  text-indent: 1.4em;
}

@media (max-width: 980px) {
  .journey-content--with-rail {
    grid-template-columns: 1fr;
  }
  .journey-content__rail {
    position: static;
    display: none;
  }
  .journey-content__toc-mobile {
    display: flex;
  }
}

.journey-placeholder {
  /* Styled container for the placeholder message */
  padding: 32px;
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  text-align: center;
}

.journey-placeholder__text {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--soft-ink);
  margin: 0 0 16px;
}

.journey-placeholder__hint {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.journey-placeholder__hint a {
  color: var(--blue-solid);
  text-decoration: underline;
}

.journey-placeholder__hint a:hover {
  color: var(--ink);
}

/* ============================================================
   MOTIF + SECTION HERO BACKDROP PASS
   ============================================================
   Inspired by docs and home hero palettes, scoped to motif/section
   page types only so other .sectionHeader usages stay unchanged.
   ============================================================ */

body[data-page-type^="motif-"],
body[data-page-type^="section-"],
body[data-page-type^="chapter-"],
body[data-page-type="motifs-index"],
body[data-page-type="motifs-essay"],
body[data-page-type="motifs-lexicon"],
body[data-page-type="findings"],
body[data-page-type="text-index"],
body[data-page-type^="lecture"],
body[data-page-type^="lectures"] {
  background:
    radial-gradient(132% 88% at 100% -12%, rgba(74, 152, 232, 0.18) 0%, rgba(74, 152, 232, 0.07) 42%, transparent 72%),
    radial-gradient(118% 78% at -10% -8%, rgba(238, 166, 42, 0.12) 0%, rgba(238, 166, 42, 0.05) 38%, transparent 72%),
    var(--bg);
  background-repeat: no-repeat;
  background-size: 100% 760px, 100% 700px, auto;
  background-position: top center, top center, top left;
}

[data-theme="dark"] body[data-page-type^="motif-"],
[data-theme="dark"] body[data-page-type^="section-"],
[data-theme="dark"] body[data-page-type^="chapter-"],
[data-theme="dark"] body[data-page-type="motifs-index"],
[data-theme="dark"] body[data-page-type="motifs-essay"],
[data-theme="dark"] body[data-page-type="motifs-lexicon"],
[data-theme="dark"] body[data-page-type="findings"],
[data-theme="dark"] body[data-page-type="text-index"],
[data-theme="dark"] body[data-page-type^="lecture"],
[data-theme="dark"] body[data-page-type^="lectures"] {
  background:
    radial-gradient(136% 92% at 100% -12%, rgba(88, 162, 240, 0.22) 0%, rgba(88, 162, 240, 0.09) 44%, transparent 74%),
    radial-gradient(122% 80% at -10% -10%, rgba(228, 156, 40, 0.14) 0%, rgba(228, 156, 40, 0.05) 38%, transparent 72%),
    var(--bg);
  background-repeat: no-repeat;
  background-size: 100% 760px, 100% 700px, auto;
  background-position: top center, top center, top left;
}

body[data-page-type^="motif-"] .motifHeader,
body[data-page-type^="motif-"] .subpage-header,
body[data-page-type^="section-"] .sectionHeader,
body[data-page-type^="section-"] .subpage-header,
body[data-page-type^="chapter-"] .sectionHeader {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(166% 142% at 100% 0%, rgba(74, 152, 232, 0.30) 0%, rgba(74, 152, 232, 0.14) 34%, rgba(74, 152, 232, 0.05) 62%, transparent 86%),
    radial-gradient(142% 132% at 0% 100%, rgba(238, 166, 42, 0.21) 0%, rgba(238, 166, 42, 0.08) 36%, transparent 78%),
    radial-gradient(98% 98% at 48% -24%, rgba(162, 92, 230, 0.16) 0%, rgba(162, 92, 230, 0.07) 40%, transparent 82%),
    linear-gradient(132deg, color-mix(in srgb, var(--surface-card) 88%, rgba(92, 152, 230, 0.12)) 0%, var(--surface-card) 68%),
    var(--surface-card);
  border-color: color-mix(in srgb, var(--blue-border) 72%, var(--surface-card-border));
}

[data-theme="dark"] body[data-page-type^="motif-"] .motifHeader,
[data-theme="dark"] body[data-page-type^="motif-"] .subpage-header,
[data-theme="dark"] body[data-page-type^="section-"] .sectionHeader,
[data-theme="dark"] body[data-page-type^="section-"] .subpage-header,
[data-theme="dark"] body[data-page-type^="chapter-"] .sectionHeader {
  background:
    radial-gradient(168% 140% at 100% 0%, rgba(88, 162, 240, 0.34) 0%, rgba(88, 162, 240, 0.16) 35%, rgba(88, 162, 240, 0.06) 64%, transparent 86%),
    radial-gradient(144% 130% at 0% 100%, rgba(228, 156, 40, 0.22) 0%, rgba(228, 156, 40, 0.09) 36%, transparent 78%),
    radial-gradient(98% 98% at 48% -24%, rgba(172, 104, 240, 0.18) 0%, rgba(172, 104, 240, 0.08) 40%, transparent 82%),
    linear-gradient(132deg, color-mix(in srgb, var(--surface-card) 84%, rgba(88, 162, 240, 0.14)) 0%, var(--surface-card) 68%),
    var(--surface-card);
}

body[data-page-type="section-overview"] .sectionHeader,
body[data-page-type="section-contents"] .sectionHeader,
body[data-page-type="section-teachings"] .sectionHeader,
body[data-page-type="section-paragraphs"] .sectionHeader,
body[data-page-type="section-motifs"] .sectionHeader,
body[data-page-type="chapter-overview"] .sectionHeader,
body[data-page-type="chapter-motifs"] .sectionHeader {
  background: rgba(74, 152, 232, 0.08);
}

body[data-page-type^="motif-"] .motifHeader,
body[data-page-type^="motif-"] .subpage-header {
  background: rgba(74, 152, 232, 0.08);
}

body[data-page-type^="lecture"] .lectureHero,
body[data-page-type^="lecture"] .refHero,
body[data-page-type^="lectures"] .lectureLabHero,
body[data-page-type="lecture-search"] .lectureSearchHero,
body[data-page-type="theme-index"] .themeHero {
  background: rgba(74, 152, 232, 0.08);
}

[data-theme="dark"] body[data-page-type="section-overview"] .sectionHeader,
[data-theme="dark"] body[data-page-type="section-contents"] .sectionHeader,
[data-theme="dark"] body[data-page-type="section-teachings"] .sectionHeader,
[data-theme="dark"] body[data-page-type="section-paragraphs"] .sectionHeader,
[data-theme="dark"] body[data-page-type="section-motifs"] .sectionHeader,
[data-theme="dark"] body[data-page-type="chapter-overview"] .sectionHeader,
[data-theme="dark"] body[data-page-type="chapter-motifs"] .sectionHeader {
  background: rgba(88, 162, 240, 0.12);
}

[data-theme="dark"] body[data-page-type^="motif-"] .motifHeader,
[data-theme="dark"] body[data-page-type^="motif-"] .subpage-header {
  background: rgba(88, 162, 240, 0.12);
}

[data-theme="dark"] body[data-page-type^="lecture"] .lectureHero,
[data-theme="dark"] body[data-page-type^="lecture"] .refHero,
[data-theme="dark"] body[data-page-type^="lectures"] .lectureLabHero,
[data-theme="dark"] body[data-page-type="lecture-search"] .lectureSearchHero,
[data-theme="dark"] body[data-page-type="theme-index"] .themeHero {
  background: rgba(88, 162, 240, 0.12);
}

.lectureHeroWithTools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 40%);
  column-gap: 18px;
  align-items: stretch;
}

.lectureHeroWithTools__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.lectureHeroWithTools__rail {
  min-width: 0;
  border-left: 1px solid color-mix(in srgb, var(--blue-border) 60%, transparent);
  padding-left: 16px;
}

.lectureToolsRail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.lectureToolsRail__itemWrap {
  margin: 0;
  padding: 0;
}

.lectureToolsRail__item {
  display: grid;
  gap: 1px;
  border: 1px solid color-mix(in srgb, var(--blue-border) 58%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--blue-wash) 52%, var(--surface-card));
  text-decoration: none;
  padding: 7px 9px;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.lectureToolsRail__item:hover {
  border-color: color-mix(in srgb, var(--blue-border-strong) 82%, transparent);
  background: color-mix(in srgb, var(--blue-wash) 72%, var(--surface-card));
}

.lectureToolsRail__item.is-active {
  border-color: color-mix(in srgb, var(--blue-border-strong) 88%, var(--surface-card-border));
  background: color-mix(in srgb, var(--blue-wash) 84%, var(--surface-card));
  box-shadow: inset 2px 0 0 var(--blue-border-strong);
}

.lectureToolsRail__name {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.24;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}

.lectureToolsRail__desc {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

.lectureHeroDisclaimer {
  margin: auto 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.lectureHeroDisclaimer__text {
  margin: 0;
  color: inherit;
}

.lectureHeroDisclaimer__actions {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lectureHeroDisclaimer__dot {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
  padding: 0 1px;
}

.lectureHeroDisclaimer__link {
  color: color-mix(in srgb, var(--muted) 90%, #3d5466 10%);
  text-decoration: none;
  font-weight: 600;
}

.lectureHeroDisclaimer__link:hover {
  color: var(--ink);
  text-decoration: underline;
}

@media (max-width: 1020px) {
  .lectureHeroWithTools {
    grid-template-columns: 1fr;
    row-gap: 11px;
  }

  .lectureHeroWithTools__rail {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--blue-border) 60%, transparent);
    padding-left: 0;
    padding-top: 11px;
  }
}

/* ============================================================
   ABOUT PAGE — DISTINCT VISUAL PASS
   ============================================================ */
body[data-page-type="about"],
body[data-page-type="downloads"] {
  background:
    radial-gradient(132% 96% at 100% -12%, rgba(74, 152, 232, 0.20) 0%, rgba(74, 152, 232, 0.08) 42%, transparent 74%),
    radial-gradient(122% 84% at -12% -12%, rgba(238, 166, 42, 0.16) 0%, rgba(238, 166, 42, 0.06) 38%, transparent 74%),
    radial-gradient(96% 70% at 50% -18%, rgba(162, 92, 230, 0.10) 0%, rgba(162, 92, 230, 0.05) 34%, transparent 74%),
    var(--bg);
  background-repeat: no-repeat;
  background-size: 100% 840px, 100% 760px, 100% 680px, auto;
  background-position: top center, top center, top center, top left;
}

[data-theme="dark"] body[data-page-type="about"],
[data-theme="dark"] body[data-page-type="downloads"] {
  background:
    radial-gradient(136% 96% at 100% -12%, rgba(88, 162, 240, 0.24) 0%, rgba(88, 162, 240, 0.11) 44%, transparent 76%),
    radial-gradient(124% 86% at -12% -12%, rgba(228, 156, 40, 0.18) 0%, rgba(228, 156, 40, 0.07) 40%, transparent 74%),
    radial-gradient(98% 72% at 50% -18%, rgba(172, 104, 240, 0.14) 0%, rgba(172, 104, 240, 0.06) 36%, transparent 76%),
    var(--bg);
  background-repeat: no-repeat;
  background-size: 100% 840px, 100% 760px, 100% 680px, auto;
  background-position: top center, top center, top center, top left;
}

body[data-page-type="about"] .about,
body[data-page-type="downloads"] .downloads,
body[data-page-type="privacy"] .about,
body[data-page-type="rights-permissions"] .about {
  position: relative;
  margin-top: 2px;
  padding-bottom: 56px;
}

body[data-page-type="about"] .about::before,
body[data-page-type="downloads"] .downloads::before,
body[data-page-type="privacy"] .about::before,
body[data-page-type="rights-permissions"] .about::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -110px;
  top: 136px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 152, 232, 0.16) 0%, rgba(74, 152, 232, 0.07) 42%, transparent 74%);
  pointer-events: none;
}

body[data-page-type="about"] .about::after,
body[data-page-type="downloads"] .downloads::after,
body[data-page-type="privacy"] .about::after,
body[data-page-type="rights-permissions"] .about::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -130px;
  bottom: 160px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 166, 42, 0.14) 0%, rgba(238, 166, 42, 0.05) 40%, transparent 72%);
  pointer-events: none;
}

body[data-page-type="downloads"] {
  overflow-x: clip;
}

/* Index and reading page headers: title and subtitle on one baseline,
   closed by a hairline rule. No box. */
body[data-page-type="motifs-index"] .sectionHeader,
body[data-page-type="text-index"] .sectionHeader,
body[data-page-type="downloads"] .sectionHeader,
body[data-page-type="findings"] .sectionHeader,
body[data-page-type="about"] .sectionHeader,
body[data-page-type="rights-permissions"] .sectionHeader,
body[data-page-type="privacy"] .sectionHeader,
body[data-page-type="motifs-essay"] .sectionHeader,
body[data-page-type="motifs-lexicon"] .sectionHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 2px;
  padding: 6px 2px 14px;
  margin-bottom: 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
body[data-page-type="motifs-index"] .sectionHeader__title,
body[data-page-type="text-index"] .sectionHeader__title,
body[data-page-type="downloads"] .sectionHeader__title,
body[data-page-type="findings"] .sectionHeader__title,
body[data-page-type="about"] .sectionHeader__title,
body[data-page-type="rights-permissions"] .sectionHeader__title,
body[data-page-type="privacy"] .sectionHeader__title,
body[data-page-type="motifs-essay"] .sectionHeader__title,
body[data-page-type="motifs-lexicon"] .sectionHeader__title,
body[data-page-type="motifs-index"] .sectionHeader__chapter,
body[data-page-type="text-index"] .sectionHeader__chapter,
body[data-page-type="downloads"] .sectionHeader__chapter,
body[data-page-type="findings"] .sectionHeader__chapter,
body[data-page-type="about"] .sectionHeader__chapter,
body[data-page-type="rights-permissions"] .sectionHeader__chapter,
body[data-page-type="privacy"] .sectionHeader__chapter,
body[data-page-type="motifs-essay"] .sectionHeader__chapter,
body[data-page-type="motifs-lexicon"] .sectionHeader__chapter {
  margin: 0;
}
@media (max-width: 760px) {
  body[data-page-type="motifs-index"] .sectionHeader,
  body[data-page-type="text-index"] .sectionHeader,
  body[data-page-type="downloads"] .sectionHeader,
  body[data-page-type="findings"] .sectionHeader,
  body[data-page-type="about"] .sectionHeader,
  body[data-page-type="rights-permissions"] .sectionHeader,
  body[data-page-type="privacy"] .sectionHeader,
  body[data-page-type="motifs-essay"] .sectionHeader,
  body[data-page-type="motifs-lexicon"] .sectionHeader {
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 18px 12px;
    margin-bottom: 0;
    border-bottom: none;
  }
}

body[data-page-type="privacy"] .rightsIntro,
body[data-page-type="rights-permissions"] .rightsIntro {
  margin-bottom: 14px;
  padding-top: 18px;
  padding-bottom: 18px;
  background: color-mix(in srgb, var(--surface-card) 94%, var(--surface-panel));
  box-shadow: none;
}

body[data-page-type="privacy"] .rightsIntro p,
body[data-page-type="rights-permissions"] .rightsIntro p {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.62;
  color: color-mix(in srgb, var(--muted) 78%, var(--ink) 22%);
}

body[data-page-type="rights-permissions"] .about__card--plain::before,
body[data-page-type="privacy"] .about__card--plain::before,
body[data-page-type="privacy"] .about__card--plain::after,
body[data-page-type="rights-permissions"] .about__card--plain::after {
  display: none;
}

body[data-page-type="about"] .about::before,
body[data-page-type="downloads"] .downloads::before,
body[data-page-type="rights-permissions"] .about::before,
body[data-page-type="privacy"] .about::before,
body[data-page-type="about"] .about::after,
body[data-page-type="downloads"] .downloads::after,
body[data-page-type="rights-permissions"] .about::after,
body[data-page-type="privacy"] .about::after,
body[data-page-type="about"] .about__card::after,
body[data-page-type="downloads"] .about__card::after,
body[data-page-type="privacy"] .about__card::after,
body[data-page-type="rights-permissions"] .about__card::after {
  display: none;
}

body[data-page-type="about"] .about__card::before,
body[data-page-type="downloads"] .about__card::before,
body[data-page-type="privacy"] .about__card::before,
body[data-page-type="rights-permissions"] .about__card::before {
  background: none;
}

body[data-page-type="rights-permissions"] .about__card,
body[data-page-type="privacy"] .about__card,
body[data-page-type="privacy"] .rightsIntro,
body[data-page-type="rights-permissions"] .rightsIntro {
  box-shadow: none;
}

body[data-page-type="privacy"] .rightsIntro__updated,
body[data-page-type="rights-permissions"] .rightsIntro__updated {
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body[data-page-type="privacy"] .rightsIntro__summary,
body[data-page-type="rights-permissions"] .rightsIntro__summary {
  max-width: none;
}

body[data-page-type="about"] .about__card,
body[data-page-type="downloads"] .about__card,
body[data-page-type="privacy"] .about__card,
body[data-page-type="rights-permissions"] .about__card {
  position: relative;
  overflow: clip;
  border-radius: 18px;
  margin-bottom: 14px;
  padding: 30px clamp(20px, 3.2vw, 34px) 26px;
  border: 1px solid color-mix(in srgb, var(--surface-card-border) 82%, var(--blue-border) 18%);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--surface-card) 96%, rgba(73, 146, 224, 0.05)) 0%, var(--surface-card) 68%);
  box-shadow: 0 8px 26px rgba(12, 22, 34, 0.05), var(--subtle-shadow);
}

body[data-page-type="about"] .about__card::before,
body[data-page-type="downloads"] .about__card::before,
body[data-page-type="privacy"] .about__card::before,
body[data-page-type="rights-permissions"] .about__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--about-accent-a, rgba(74, 152, 232, 0.72)), var(--about-accent-b, rgba(238, 166, 42, 0.62)));
}

body[data-page-type="about"] .about__card::after,
body[data-page-type="downloads"] .about__card::after,
body[data-page-type="privacy"] .about__card::after,
body[data-page-type="rights-permissions"] .about__card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--about-accent-a, rgba(74, 152, 232, 0.30)) 25%, transparent) 0%, transparent 72%);
  pointer-events: none;
}

body[data-page-type="about"] .about__card,
body[data-page-type="downloads"] .about__card,
body[data-page-type="rights-permissions"] .about__card,
body[data-page-type="privacy"] .about__card,
body[data-page-type="privacy"] .rightsIntro,
body[data-page-type="rights-permissions"] .rightsIntro {
  background: var(--surface-card);
  box-shadow: none;
}

body[data-page-type="about"] .about__card--intro,
body[data-page-type="privacy"] .about__card--intro,
body[data-page-type="rights-permissions"] .about__card--intro {
  --about-accent-a: rgba(74, 152, 232, 0.72);
  --about-accent-b: rgba(238, 166, 42, 0.66);
}

body[data-page-type="about"] .about__card--analyst,
body[data-page-type="privacy"] .about__card--analyst,
body[data-page-type="rights-permissions"] .about__card--analyst {
  --about-accent-a: rgba(68, 153, 142, 0.70);
  --about-accent-b: rgba(147, 105, 220, 0.64);
}

body[data-page-type="about"] .about__card--ack,
body[data-page-type="privacy"] .about__card--ack,
body[data-page-type="rights-permissions"] .about__card--ack {
  --about-accent-a: rgba(185, 132, 45, 0.72);
  --about-accent-b: rgba(93, 144, 206, 0.64);
}

body[data-page-type="privacy"] .about__card--intro,
body[data-page-type="rights-permissions"] .about__card--intro {
  --about-accent-a: rgba(108, 165, 226, 0.54);
  --about-accent-b: rgba(220, 178, 92, 0.46);
}

body[data-page-type="about"] .about__card--intro,
body[data-page-type="downloads"] .about__card--intro {
  --about-accent-a: rgba(108, 165, 226, 0.54);
  --about-accent-b: rgba(220, 178, 92, 0.46);
}

body[data-page-type="privacy"] .about__card--analyst,
body[data-page-type="rights-permissions"] .about__card--analyst {
  --about-accent-a: rgba(98, 163, 156, 0.50);
  --about-accent-b: rgba(156, 129, 214, 0.44);
}

body[data-page-type="about"] .about__card--analyst,
body[data-page-type="downloads"] .about__card--analyst {
  --about-accent-a: rgba(98, 163, 156, 0.50);
  --about-accent-b: rgba(156, 129, 214, 0.44);
}

body[data-page-type="privacy"] .about__card--ack,
body[data-page-type="rights-permissions"] .about__card--ack {
  --about-accent-a: rgba(194, 156, 86, 0.50);
  --about-accent-b: rgba(118, 160, 212, 0.46);
}

body[data-page-type="about"] .about__card--ack,
body[data-page-type="downloads"] .about__card--ack {
  --about-accent-a: rgba(194, 156, 86, 0.50);
  --about-accent-b: rgba(118, 160, 212, 0.46);
}

body[data-page-type="downloads"] .about__card {
  --about-accent-a: rgba(108, 165, 226, 0.54);
  --about-accent-b: rgba(220, 178, 92, 0.46);
}

/* Downloads: cards cycle through the About page's three gradients (blue/amber, teal/violet, gold/blue). */
body[data-page-type="downloads"] .downloads > .about__card:nth-child(3n+3) {
  --about-accent-a: rgba(98, 163, 156, 0.50);
  --about-accent-b: rgba(156, 129, 214, 0.44);
}
body[data-page-type="downloads"] .downloads > .about__card:nth-child(3n+4) {
  --about-accent-a: rgba(194, 156, 86, 0.50);
  --about-accent-b: rgba(118, 160, 212, 0.46);
}

body[data-page-type="about"] .about__card p,
body[data-page-type="downloads"] .about__card p,
body[data-page-type="privacy"] .about__card p,
body[data-page-type="rights-permissions"] .about__card p {
  color: var(--soft-ink);
}

body[data-page-type="about"] .about__card ol,
body[data-page-type="rights-permissions"] .about__card ol,
body[data-page-type="privacy"] .about__card ol,
body[data-page-type="privacy"] .about__card ul,
body[data-page-type="rights-permissions"] .about__card ul {
  margin: 0 0 0.9em;
  padding-left: 1.5em;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.75;
  color: var(--soft-ink);
}

body[data-page-type="about"] .about__card ol li,
body[data-page-type="rights-permissions"] .about__card ol li,
body[data-page-type="privacy"] .about__card ol li,
body[data-page-type="privacy"] .about__card ul li,
body[data-page-type="rights-permissions"] .about__card ul li {
  margin-bottom: 0.35em;
  padding-left: 0.2em;
}

body[data-page-type="about"] .about__card ol li:last-child,
body[data-page-type="rights-permissions"] .about__card ol li:last-child,
body[data-page-type="privacy"] .about__card ol li:last-child,
body[data-page-type="privacy"] .about__card ul li:last-child,
body[data-page-type="rights-permissions"] .about__card ul li:last-child {
  margin-bottom: 0;
}

body[data-page-type="about"] .about__heading {
  margin-bottom: 18px;
  font-size: clamp(25px, 3.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

body[data-page-type="about"] .about__subheading,
body[data-page-type="privacy"] .about__subheading,
body[data-page-type="rights-permissions"] .about__subheading {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin: 26px 0 10px;
}

body[data-page-type="about"] .about__subheading {
  margin: 16px 0 6px;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

body[data-page-type="about"] .about__card .about__subheading:first-of-type,
body[data-page-type="privacy"] .about__card .about__subheading:first-of-type,
body[data-page-type="rights-permissions"] .about__card .about__subheading:first-of-type {
  margin-top: 0;
}

body[data-page-type="privacy"] .about__heading,
body[data-page-type="rights-permissions"] .about__heading {
  margin-bottom: 14px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.22;
  letter-spacing: -0.005em;
}

body[data-page-type="about"] .about__card--intro .about__subheading,
body[data-page-type="privacy"] .about__card--intro .about__subheading,
body[data-page-type="rights-permissions"] .about__card--intro .about__subheading {
  margin: 12px 0 6px;
}

body[data-page-type="about"] .about__card--intro p,
body[data-page-type="privacy"] .about__card--intro p,
body[data-page-type="rights-permissions"] .about__card--intro p {
  margin-bottom: 0.75em;
}

body[data-page-type="about"] .about__card--ack .about__subheading,
body[data-page-type="privacy"] .about__card--ack .about__subheading,
body[data-page-type="rights-permissions"] .about__card--ack .about__subheading {
  margin: 12px 0 6px;
}

body[data-page-type="about"] .about__card--ack .about__subheading:first-of-type,
body[data-page-type="privacy"] .about__card--ack .about__subheading:first-of-type,
body[data-page-type="rights-permissions"] .about__card--ack .about__subheading:first-of-type {
  margin-top: 0;
}

body[data-page-type="about"] .about__card--ack p,
body[data-page-type="privacy"] .about__card--ack p,
body[data-page-type="rights-permissions"] .about__card--ack p {
  margin-bottom: 0.75em;
}

body[data-page-type="about"] .about__links-list,
body[data-page-type="privacy"] .about__links-list,
body[data-page-type="rights-permissions"] .about__links-list {
  list-style: disc;
  padding-left: 22px;
  margin: 14px 0 8px;
  display: block;
}

body[data-page-type="about"] .about__links-list li,
body[data-page-type="privacy"] .about__links-list li,
body[data-page-type="rights-permissions"] .about__links-list li {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page-type="about"] .about__links-list li:last-child,
body[data-page-type="privacy"] .about__links-list li:last-child,
body[data-page-type="rights-permissions"] .about__links-list li:last-child {
  margin-bottom: 0;
}

body[data-page-type="about"] .about__links-list strong,
body[data-page-type="privacy"] .about__links-list strong,
body[data-page-type="rights-permissions"] .about__links-list strong {
  display: inline-block;
  margin-right: 4px;
  color: var(--ink);
}

body[data-page-type="about"] .about__card blockquote,
body[data-page-type="privacy"] .about__card blockquote,
body[data-page-type="rights-permissions"] .about__card blockquote {
  margin: 16px 0 18px;
  padding: 0 0 0 16px;
  border: 0;
  border-left: 3px solid var(--blue-border-strong);
  border-radius: 0;
  background: transparent;
}

body[data-page-type="about"] .about__card blockquote p,
body[data-page-type="privacy"] .about__card blockquote p,
body[data-page-type="rights-permissions"] .about__card blockquote p {
  margin: 0 0 0.9em;
  color: var(--soft-ink);
  font-style: italic;
}

body[data-page-type="about"] .about__card blockquote p:last-child,
body[data-page-type="privacy"] .about__card blockquote p:last-child,
body[data-page-type="rights-permissions"] .about__card blockquote p:last-child {
  margin-bottom: 0;
}

body[data-page-type="about"] .about__card blockquote .about__quoteSource,
body[data-page-type="privacy"] .about__card blockquote .about__quoteSource,
body[data-page-type="rights-permissions"] .about__card blockquote .about__quoteSource {
  margin-top: 0.35em;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  font-style: normal;
  color: var(--muted);
}

body[data-page-type="about"] .about__card a,
body[data-page-type="privacy"] .about__card a,
body[data-page-type="rights-permissions"] .about__card a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--blue-solid) 60%, transparent);
  text-underline-offset: 2px;
}

body[data-page-type="about"] .about__card a:hover,
body[data-page-type="privacy"] .about__card a:hover,
body[data-page-type="rights-permissions"] .about__card a:hover {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--ink) 46%, transparent);
}

body[data-page-type="about"] .about__footer-note,
body[data-page-type="privacy"] .about__footer-note,
body[data-page-type="rights-permissions"] .about__footer-note {
  max-width: 100%;
  margin-top: 6px;
  padding: 15px clamp(20px, 3.2vw, 34px);
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--blue-border) 62%, var(--surface-card-border));
  background: color-mix(in srgb, var(--surface-panel-alt) 82%, transparent);
}

body[data-page-type="about"] .about__footer-note p,
body[data-page-type="privacy"] .about__footer-note p,
body[data-page-type="rights-permissions"] .about__footer-note p {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-style: normal;
}

body[data-page-type="about"] .about__footer-note a,
body[data-page-type="privacy"] .about__footer-note a,
body[data-page-type="rights-permissions"] .about__footer-note a {
  color: var(--blue-solid);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--blue-solid) 60%, transparent);
  text-underline-offset: 2px;
}

body[data-page-type="about"] .about__footer-note a:hover,
body[data-page-type="privacy"] .about__footer-note a:hover,
body[data-page-type="rights-permissions"] .about__footer-note a:hover {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--ink) 46%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  body[data-page-type="about"] .sectionHeader,
  body[data-page-type="privacy"] .sectionHeader,
  body[data-page-type="rights-permissions"] .sectionHeader {
    animation: aboutFadeUp 300ms ease-out both;
  }
  body[data-page-type="about"] .about__card,
  body[data-page-type="privacy"] .about__card,
  body[data-page-type="rights-permissions"] .about__card {
    animation: aboutFadeUp 360ms ease-out both;
  }
  body[data-page-type="about"] .about__card--analyst,
  body[data-page-type="privacy"] .about__card--analyst,
  body[data-page-type="rights-permissions"] .about__card--analyst {
    animation-delay: 45ms;
  }
  body[data-page-type="about"] .about__card--ack,
  body[data-page-type="privacy"] .about__card--ack,
  body[data-page-type="rights-permissions"] .about__card--ack {
    animation-delay: 90ms;
  }
  body[data-page-type="downloads"] .sectionHeader {
    animation: aboutFadeUp 300ms ease-out both;
  }
  body[data-page-type="downloads"] .downloads > .about__card {
    animation: aboutFadeUp 360ms ease-out both;
  }
  body[data-page-type="downloads"] .downloads > .about__card:nth-child(3) { animation-delay: 45ms; }
  body[data-page-type="downloads"] .downloads > .about__card:nth-child(4) { animation-delay: 90ms; }
  body[data-page-type="downloads"] .downloads > .about__card:nth-child(n+5) { animation-delay: 135ms; }

  /* Site-wide: the top-level blocks of every page fade up in a short stagger.
     "backwards" fill drops the transform afterward so sticky and fixed descendants behave normally. */
  body:not([data-page-type="home"]):not([data-page-type="practice"]) main > section > *,
  body:not([data-page-type="home"]):not([data-page-type="practice"]) main > .subpage-content > * {
    animation: aboutFadeUp 360ms ease-out backwards;
  }
  body:not([data-page-type="home"]):not([data-page-type="practice"]) main > section > :nth-child(2),
  body:not([data-page-type="home"]):not([data-page-type="practice"]) main > .subpage-content > :nth-child(2) { animation-delay: 45ms; }
  body:not([data-page-type="home"]):not([data-page-type="practice"]) main > section > :nth-child(3),
  body:not([data-page-type="home"]):not([data-page-type="practice"]) main > .subpage-content > :nth-child(3) { animation-delay: 90ms; }
  body:not([data-page-type="home"]):not([data-page-type="practice"]) main > section > :nth-child(n+4),
  body:not([data-page-type="home"]):not([data-page-type="practice"]) main > .subpage-content > :nth-child(n+4) { animation-delay: 135ms; }
  /* Practice: the mode toggle and type picker stay put; only the card fades up. */
  body[data-page-type="practice"] .practicePage__inner > .practiceCard {
    animation: aboutFadeUp 360ms ease-out backwards;
  }
}

@keyframes aboutFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  body[data-page-type="about"] .about,
  body[data-page-type="privacy"] .about,
  body[data-page-type="rights-permissions"] .about {
    padding-bottom: 44px;
  }
  body[data-page-type="about"] .about__card,
  body[data-page-type="privacy"] .about__card,
  body[data-page-type="rights-permissions"] .about__card {
    border-radius: 14px;
    padding: 20px 16px 18px;
    margin-bottom: 10px;
  }
  body[data-page-type="about"] .about__links-list li {
    padding: 9px 10px;
  }
}

/* ============================================================
   MOBILE EDGE-TO-EDGE PASS
   ============================================================
   Mirrors the /practice treatment for selected page shells:
   outer containers can use the viewport edge on mobile while
   preserving top/bottom borders and leaving desktop unchanged.
   ============================================================ */

@media (max-width: 760px) {
  body[data-page-type^="motif-"] .subpage-content,
  body[data-page-type^="section-"] .subpage-content,
  body[data-page-type^="chapter-"] .subpage-content {
    width: auto;
    margin-left: -18px;
    margin-right: -18px;
  }

  body[data-page-type^="motif-"] .sectionNav,
  body[data-page-type^="section-"] .sectionNav,
  body[data-page-type^="chapter-"] .sectionNav {
    padding-left: 18px;
    padding-right: 18px;
  }

  body[data-page-type^="motif-"] .motifHeader,
  body[data-page-type^="motif-"] .subpage-header,
  body[data-page-type^="section-"] .sectionHeader,
  body[data-page-type^="section-"] .subpage-header,
  body[data-page-type^="chapter-"] .sectionHeader,
  body[data-page-type^="motif-"] .subpage-nav,
  body[data-page-type^="section-"] .subpage-nav,
  body[data-page-type^="chapter-"] .subpage-nav,
  body[data-page-type^="motif-"] .editorial,
  body[data-page-type^="section-"] .editorial,
  body[data-page-type^="chapter-"] .editorial,
  body[data-page-type^="motif-"] .arc-narrative,
  body[data-page-type^="section-"] .arc-narrative,
  body[data-page-type^="motif-"] .microGrid,
  body[data-page-type^="section-"] .microGrid,
  body[data-page-type^="chapter-"] .microGrid,
  body[data-page-type^="motif-"] .spiralSection,
  body[data-page-type^="section-"] .spiralSection,
  body[data-page-type^="motif-"] .trailMap,
  body[data-page-type^="section-"] .trailMap,
  body[data-page-type^="chapter-"] .chapterRail {
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page-type^="motif-"] .subpage-nav-shell__edge--left,
  body[data-page-type^="section-"] .subpage-nav-shell__edge--left,
  body[data-page-type^="chapter-"] .subpage-nav-shell__edge--left,
  body[data-page-type^="motif-"] .trailMap-shell__edge--left,
  body[data-page-type^="section-"] .trailMap-shell__edge--left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  body[data-page-type^="motif-"] .subpage-nav-shell__edge--right,
  body[data-page-type^="section-"] .subpage-nav-shell__edge--right,
  body[data-page-type^="chapter-"] .subpage-nav-shell__edge--right,
  body[data-page-type^="motif-"] .trailMap-shell__edge--right,
  body[data-page-type^="section-"] .trailMap-shell__edge--right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  body[data-page-type="about"] .about,
  body[data-page-type="downloads"] .downloads,
  body[data-page-type="rights-permissions"] .about,
  body[data-page-type="privacy"] .about,
  body[data-page-type="motifs-index"] .motifs-index,
  body[data-page-type="motifs-essay"] .motifs-essay-page,
  body[data-page-type="motifs-lexicon"] .motifs-essay-page,
  body[data-page-type="findings"] .research-page,
  body[data-page-type="text-index"] .text-index {
    max-width: none;
    width: auto;
    margin-left: -18px;
    margin-right: -18px;
  }

  body[data-page-type="about"] .about__card,
  body[data-page-type="downloads"] .about__card,
  body[data-page-type="rights-permissions"] .about__card,
  body[data-page-type="privacy"] .about__card,
  body[data-page-type="rights-permissions"] .rightsIntro,
  body[data-page-type="privacy"] .rightsIntro,
  body[data-page-type="about"] .about__footer-note,
  body[data-page-type="rights-permissions"] .about__footer-note,
  body[data-page-type="privacy"] .about__footer-note,
  body[data-page-type="motifs-index"] .motifs-index__essayHero,
  body[data-page-type="motifs-index"] .motifs-index__controls,
  body[data-page-type="section-paragraphs"] .motifs-index__controls,
  body[data-page-type="chapter-motifs"] .motifs-index__controls,
  body[data-page-type="motifs-index"] .motifs-index__panel,
  body[data-page-type="motifs-index"] .motifs-index__group-card,
  body[data-page-type="motifs-index"] .motifs-index__az-section,
  body[data-page-type="section-contents"] .motifs-index__az-section,
  body[data-page-type="section-paragraphs"] .motifs-index__az-section,
  body[data-page-type="motif-sections"] .motifs-index__az-section,
  body[data-page-type="chapter-motifs"] .motifs-index__az-section,
  body[data-page-type="motif-sections"] .filtered-empty,
  body[data-page-type="motif-contents"] .motifs-index__az-section,
  body[data-page-type="motif-contents"] .filtered-empty,
  body[data-page-type="section-contents"] .filtered-empty,
  body[data-page-type="motifs-essay"] .motifs-index__card,
  body[data-page-type="motifs-lexicon"] .motifs-index__card,
  body[data-page-type="motifs-essay"] .motifs-essay-page__toc,
  body[data-page-type="motifs-lexicon"] .motifs-essay-page__toc,
  body[data-page-type="findings"] .research-page__card,
  body[data-page-type="findings"] .research-page__toc,
  body[data-page-type="motif-overview"] .journey-content__toc,
  body[data-page-type="motif-teachings"] .journey-content__toc,
  body[data-page-type="section-teachings"] .journey-content__toc,
  body[data-page-type="motif-journey"] .journey-content__toc,
  body[data-page-type="section-overview"] .journey-content__toc,
  body[data-page-type="section-overview"] .absence-aside,
  body[data-page-type="motif-overview"] .absence-aside,
  body[data-page-type="text-index"] .text-index__jump,
  body[data-page-type="text-index"] .text-index__chapter-card,
  body[data-page-type="text-index"] .text-index__chapter-item,
  body[data-page-type="text-index"] .text-index__controls {
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page-type="lecture-companion"] .lectureHero,
  body[data-page-type="lecture-companion"] .block,
  body[data-page-type="lecture-companion"] .trackJumpBlock,
  body[data-page-type="lecture-companion"] .errorBox,
  body[data-page-type="lectures-index"] .lectureLabHero,
  body[data-page-type="lectures-index"] .lectureLabControls,
  body[data-page-type="lectures-index"] .lectureCard,
  body[data-page-type="lecture-search"] .lectureSearchHero,
  body[data-page-type="lecture-search"] .lectureSearchPanel,
  body[data-page-type="lecture-search"] .lectureSearchFilters,
  body[data-page-type="lecture-search"] .lectureSearchResultsPanel,
  body[data-page-type="lecture-references-index"] .refHero,
  body[data-page-type="lecture-references-index"] .refResults,
  body[data-page-type="theme-index"] .themeHero,
  body[data-page-type="theme-index"] .themeContent {
    margin-left: -18px;
    margin-right: -18px;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page-type="lectures-index"] .lectureHeroWithTools__rail {
    border-left: 0;
    padding-left: 0;
  }
}

.footer__reporting {
  width: min(760px, calc(100vw - 32px));
  margin: 18px auto 0;
  padding: 14px 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper, #faf8f2) 90%, #ffffff 10%);
  border: 1px solid color-mix(in srgb, var(--line, #d6d1c4) 78%, transparent 22%);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.footer__reporting--authenticated {
  border-style: dashed;
  border-width: 2px;
  background: color-mix(in srgb, #1d4d4f 5%, var(--paper, #faf8f2) 95%);
  padding-top: 16px;
  padding-bottom: 16px;
}

.footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  font-size: 13px;
}

.footer__reporting--authenticated .footer__actions {
  gap: 18px;
}

.footer__actions--compact {
  margin-top: 16px;
  gap: 20px;
}

.footer__actions a {
  color: inherit;
}

.footer__signout {
  display: none;
}

.feedback-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 0 40px;
  font-family: var(--sans);
  font-size: 13px;
}

.feedback-hero {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--blue-border);
  background: var(--blue-wash);
  box-shadow: var(--subtle-shadow);
}

.feedback-hero--admin {
  gap: 10px;
}

.feedback-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted, #6d6b66);
}

.feedback-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 500;
}

.feedback-card h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
}

.feedback-card h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feedback-card__header {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.feedback-summaryRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.feedback-summaryRow__item {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-card) 82%, var(--blue-wash));
  font-size: 12px;
  letter-spacing: 0.04em;
}

.feedback-summaryRow__item time[data-local-datetime] {
  margin-left: 0.4em;
}

.feedback-summaryRow__item.is-alert {
  background: color-mix(in srgb, #9b6b10 20%, var(--surface-card));
  color: #7b4b00;
  font-weight: 700;
}

.feedback-heroAction {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

.feedback-intro {
  margin: 0;
  max-width: 62ch;
  color: var(--muted, #6d6b66);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
}

.feedback-hero--new .feedback-intro {
  max-width: none;
}

.feedback-hero--mine .feedback-intro {
  max-width: none;
}

.feedback-card,
.auth-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius);
  box-shadow: var(--subtle-shadow);
  padding: 18px;
}

.feedback-card--secondary {
  background: color-mix(in srgb, var(--surface-panel-alt) 72%, var(--surface-card) 28%);
}

.feedback-card--guidance {
  margin-bottom: 18px;
  background: color-mix(in srgb, #c48b2c 7%, var(--surface-card) 93%);
  border-color: color-mix(in srgb, #c48b2c 18%, var(--surface-card-border) 82%);
}

.feedback-card--warning {
  background: color-mix(in srgb, #9b6b10 7%, var(--surface-card) 93%);
  border-color: color-mix(in srgb, #9b6b10 20%, var(--surface-card-border) 80%);
}

.feedback-card--filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.feedback-card--table,
.feedback-card--search {
  margin-bottom: 20px;
}

.feedback-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 20px;
}

.feedback-grid--admin-detail {
  align-items: start;
}

.feedback-grid--history {
  margin-top: 20px;
}

.feedback-stack {
  display: grid;
  gap: 16px;
}

.auth-card {
  display: grid;
  gap: 12px;
  justify-items: stretch;
}

.auth-signin-page {
  max-width: 720px;
  display: grid;
  gap: 18px;
  padding-top: 10px;
}

.auth-signin-hero {
  display: grid;
  gap: 8px;
  text-align: center;
}

.auth-signin-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.02;
  font-weight: 500;
}

.auth-signin-hero p {
  margin: 0 auto;
  max-width: 44ch;
  color: var(--muted, #6d6b66);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
}

.auth-card--signin {
  max-width: 620px;
  margin: 0 auto;
  justify-items: center;
  text-align: center;
  padding: 42px 44px;
}

.auth-options {
  display: grid;
  gap: 26px;
  width: 100%;
  justify-items: center;
}

.auth-providerBtn {
  width: min(100%, 360px);
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 22px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--subtle-shadow);
}

.auth-providerBtn:hover {
  box-shadow: var(--shadow);
}

.auth-providerBtn--google {
  background: #ffffff;
  color: #202124;
}

.auth-providerBtn--apple {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

.auth-providerBtn--disabled {
  background: var(--surface-panel);
  color: var(--muted);
  pointer-events: none;
}

.auth-providerBtn__logo {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.auth-providerBtn__logo svg {
  width: 100%;
  height: 100%;
}

.feedback-field {
  display: grid;
  gap: 10px;
}

.feedback-field + .feedback-field {
  margin-top: 8px;
}

.feedback-form {
  display: grid;
  gap: 16px;
}

.feedback-formTable {
  display: grid;
  gap: 14px;
}

.feedback-formRow {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.feedback-formRow--stacked {
  align-items: start;
}

.feedback-formRow__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6d6b66);
}

.feedback-formRow input,
.feedback-formRow select,
.feedback-formRow textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  padding: 9px 12px;
}

.feedback-formRow textarea {
  min-height: 220px;
  resize: vertical;
}

.feedback-contextGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.feedback-contextItem {
  display: grid;
  gap: 4px;
}

.feedback-contextItem--full {
  grid-column: 1 / -1;
}

.feedback-contextItem__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6d6b66);
}

.feedback-contextItem__value {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent 16%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 84%, var(--surface-card) 16%);
  line-height: 1.45;
}

.feedback-contextItem__value--wrap {
  overflow-wrap: anywhere;
}

.feedback-warningText {
  color: #7b4b00;
  font-weight: 600;
}

.feedback-guidance {
  display: grid;
  gap: 14px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.72;
  color: var(--soft-ink);
}

.feedback-guidance p {
  margin: 0;
}

.feedback-guidanceLead {
  position: relative;
}

.feedback-guidanceLead p {
  margin: 0;
  padding-right: 110px;
}

.feedback-guidance a {
  color: var(--blue-solid);
}

.feedback-guidance__quote {
  margin: 2px 0;
  padding: 10px 0 10px 18px;
  border-left: 3px solid color-mix(in srgb, #c48b2c 45%, var(--border));
  color: color-mix(in srgb, var(--ink) 88%, #6b5528 12%);
}

.feedback-guidance__quote p {
  margin: 0;
}

.feedback-guidanceDisclosure {
  display: block;
}

.feedback-guidanceDisclosure[hidden] {
  display: none;
}

.feedback-guidanceReveal {
  appearance: none;
  position: absolute;
  right: 0;
  bottom: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: color-mix(in srgb, var(--blue-solid) 82%, var(--muted) 18%);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.feedback-guidanceReveal:hover {
  text-decoration: underline;
}

.feedback-guidanceReveal span[aria-hidden="true"] {
  font-size: 15px;
}

.feedback-guidanceDisclosure__content {
  display: grid;
  gap: 14px;
}

.feedback-guidanceDisclosure__content[hidden] {
  display: none;
}

.feedback-field span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6d6b66);
}

.feedback-field input,
.feedback-field select,
.feedback-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  padding: 9px 12px;
}

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

.feedback-inlineControl {
  display: flex;
  gap: 10px;
  align-items: center;
}

.feedback-inlineControl select {
  flex: 1 1 auto;
}

.feedback-inlineControl .btn {
  flex: 0 0 auto;
  min-width: 84px;
}

.feedback-actionGroup + .feedback-actionGroup {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line, #d6d1c4) 72%, transparent 28%);
}

.feedback-actionGroup--danger {
  margin-top: 18px;
}

.feedback-actions--tight {
  margin-top: 12px;
}

.feedback-actions--triage {
  justify-content: flex-end;
}

.feedback-inlineForm {
  margin: 0;
}

.feedback-inlineForm--topGap {
  margin-top: 8px;
}

.feedback-linkButton {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--blue-solid);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.feedback-linkButton:hover {
  color: var(--ink);
}

.feedback-note--strong {
  color: #2f6f45;
  font-weight: 700;
}

.feedback-triageTable {
  display: grid;
  gap: 10px;
}

.feedback-triageRow {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.feedback-triageRow__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6d6b66);
}

.feedback-triageRow select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  padding: 9px 12px;
}

.feedback-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.feedback-actions--formEnd {
  justify-content: flex-start;
  margin-top: 2px;
}

.feedback-actions .btn,
.feedback-inline-actions .btn,
.auth-card .btn {
  box-shadow: none;
}

.feedback-actions--top {
  margin-bottom: 20px;
}

.feedback-field + .feedback-actionBtn {
  margin-top: 12px;
}

.feedback-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.feedback-inline-actions form {
  margin: 0;
}

.feedback-actionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  text-decoration: none;
}

.feedback-actionBtn--danger {
  border-color: color-mix(in srgb, #8f2636 44%, var(--border));
  color: #6f1626;
  background: color-mix(in srgb, #8f2636 8%, var(--panel));
}

.feedback-actionBtn--dangerSoft {
  border-color: color-mix(in srgb, #9b6b10 44%, var(--border));
  color: #7b4b00;
  background: color-mix(in srgb, #9b6b10 8%, var(--panel));
}

.feedback-actions--stacked {
  flex-direction: column;
  align-items: stretch;
}

.feedback-actions--stacked .btn {
  width: 100%;
}

.feedback-actionBtn--disabled {
  color: var(--muted);
  cursor: default;
  pointer-events: none;
  background: var(--surface-panel);
}

.feedback-link {
  color: var(--blue-solid);
  text-decoration: none;
}

.feedback-link:hover {
  text-decoration: underline;
}

.feedback-note,
.feedback-meta,
.feedback-empty {
  margin: 0;
  color: var(--muted, #6d6b66);
}

.feedback-banner {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-panel-alt);
  border: 1px solid var(--border);
}

.feedback-banner--warning {
  background: color-mix(in srgb, #9b6b10 7%, var(--surface-panel-alt));
  border-color: color-mix(in srgb, #9b6b10 22%, var(--border));
}

.feedback-banner--activeFilter {
  margin-bottom: 0;
  background: color-mix(in srgb, #f3d489 34%, var(--surface-panel-alt) 66%);
  border-color: color-mix(in srgb, #c48b2c 46%, var(--border) 54%);
  color: #6f4d10;
}

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

.feedback-table th,
.feedback-table td {
  padding: 10px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #d6d1c4) 72%, transparent 28%);
  text-align: left;
  vertical-align: top;
}

.feedback-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #6d6b66);
}

.feedback-reportMeta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 14px;
  line-height: 1.45;
}

.feedback-reportMeta__label,
.feedback-reportBodyLabel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6d6b66);
}

.feedback-reportBodyLabel {
  margin-bottom: 8px;
}

.feedback-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, #1d4d4f 12%, #ffffff 88%);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.feedback-pill--resolved,
.feedback-pill--closed {
  background: color-mix(in srgb, #2c7a4b 16%, #ffffff 84%);
}

.feedback-pill--spam {
  background: color-mix(in srgb, #8f2636 18%, #ffffff 82%);
}

.feedback-pill--critical,
.feedback-pill--in_progress {
  background: color-mix(in srgb, #9b6b10 16%, #ffffff 84%);
}

.feedback-pill--in_review,
.feedback-pill--needs_followup {
  background: color-mix(in srgb, #9b6b10 18%, #ffffff 82%);
}

.feedback-pill--reviewed {
  background: color-mix(in srgb, #2c7a4b 16%, #ffffff 84%);
}

.feedback-pill--unreviewed {
  background: color-mix(in srgb, #51606a 10%, #ffffff 90%);
  color: #44515a;
}

.feedback-pill--new,
.feedback-pill--attention {
  background: color-mix(in srgb, #9b6b10 24%, #ffffff 76%);
  color: #7b4b00;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, #9b6b10 36%, transparent 64%);
}

.feedback-factsGrid {
  display: grid;
  gap: 14px 18px;
}

.feedback-factsGrid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feedback-fact {
  display: grid;
  gap: 4px;
}

.feedback-fact--full {
  grid-column: 1 / -1;
}

.feedback-fact__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6d6b66);
}

.feedback-fact__value {
  font-size: 13px;
  line-height: 1.45;
}

.feedback-copyValue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
}

.feedback-copyValue__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.feedback-copyBtn {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted, #6d6b66);
  cursor: pointer;
  margin-left: 1px;
}

.feedback-copyBtn--action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.feedback-copyBtn::after {
  content: 'Copied';
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2f6f45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
  white-space: nowrap;
}

.feedback-copyBtn.is-copied::after {
  opacity: 1;
}

.feedback-copyBtn:hover {
  color: var(--ink);
}

.feedback-copyBtn svg {
  display: block;
  width: 100%;
  height: 100%;
}

.feedback-fact__value--wrap {
  overflow-wrap: anywhere;
}

.feedback-fact__value--alert {
  color: #9b6b10;
  font-weight: 600;
}

.feedback-factSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
  color: var(--muted, #6d6b66);
  font-size: 12px;
}

.feedback-detail-list {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
}

.feedback-detail-list div {
  display: grid;
  gap: 4px;
}

.feedback-detail-list dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6d6b66);
}

.feedback-detail-list dd {
  margin: 0;
}

.feedback-body {
  white-space: pre-wrap;
  line-height: 1.7;
}

.feedback-comment-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 14px;
}

.feedback-relatedList {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 12px;
}

.feedback-relatedGroup + .feedback-relatedGroup {
  margin-top: 18px;
}

.feedback-relatedGroup__label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6d6b66);
}

.feedback-relatedList li {
  display: grid;
  gap: 3px;
}

.feedback-relatedList a {
  color: var(--blue-solid);
  text-decoration: none;
  font-weight: 600;
}

.feedback-relatedList a:hover {
  text-decoration: underline;
}

.feedback-relatedList span {
  color: var(--muted, #6d6b66);
  font-size: 12px;
}

.feedback-comment-meta {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6d6b66);
  margin-bottom: 6px;
}

.feedback-timeline {
  display: grid;
  gap: 14px;
}

.feedback-timelineItem {
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--blue-border) 50%, var(--border));
}

.feedback-timelineItem__title {
  font-weight: 600;
  line-height: 1.45;
}

[data-theme="dark"] .footer__reporting {
  background: color-mix(in srgb, var(--surface-card) 92%, #0d1420 8%);
  border-color: color-mix(in srgb, rgba(120, 185, 248, 0.26) 58%, var(--surface-card-border) 42%);
}

[data-theme="dark"] .footer__reporting--authenticated {
  background: color-mix(in srgb, #112238 74%, var(--surface-card) 26%);
  border-color: color-mix(in srgb, rgba(120, 185, 248, 0.38) 68%, var(--surface-card-border) 32%);
}

[data-theme="dark"] .feedback-hero {
  background:
    linear-gradient(135deg, rgba(15, 30, 48, 0.96) 0%, rgba(10, 20, 34, 0.92) 100%),
    var(--surface-card);
  border-color: color-mix(in srgb, rgba(88, 162, 240, 0.44) 64%, var(--surface-card-border) 36%);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .feedback-kicker,
[data-theme="dark"] .feedback-note,
[data-theme="dark"] .feedback-meta,
[data-theme="dark"] .feedback-empty,
[data-theme="dark"] .feedback-fact__label,
[data-theme="dark"] .feedback-reportMeta__label,
[data-theme="dark"] .feedback-reportBodyLabel,
[data-theme="dark"] .feedback-comment-meta,
[data-theme="dark"] .feedback-summaryRow__item,
[data-theme="dark"] .feedback-triageRow__label {
  color: color-mix(in srgb, var(--muted) 88%, #c8d6ea 12%);
}

[data-theme="dark"] .feedback-intro {
  color: color-mix(in srgb, var(--muted) 74%, #dbe7f6 26%);
}

[data-theme="dark"] .feedback-card,
[data-theme="dark"] .auth-card {
  background: color-mix(in srgb, var(--surface-card) 94%, #0c1017 6%);
  border-color: color-mix(in srgb, rgba(120, 185, 248, 0.14) 42%, var(--surface-card-border) 58%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .feedback-card--secondary {
  background: color-mix(in srgb, #111924 74%, var(--surface-card) 26%);
}

[data-theme="dark"] .feedback-card--guidance {
  background: color-mix(in srgb, rgba(196, 139, 44, 0.16) 52%, var(--surface-card) 48%);
  border-color: rgba(196, 139, 44, 0.28);
}

[data-theme="dark"] .feedback-card--warning {
  background: color-mix(in srgb, rgba(155, 107, 16, 0.2) 56%, var(--surface-card) 44%);
  border-color: rgba(190, 136, 32, 0.34);
}

[data-theme="dark"] .feedback-summaryRow__item {
  background: color-mix(in srgb, #172334 78%, var(--surface-card) 22%);
}

[data-theme="dark"] .feedback-summaryRow__item.is-alert {
  background: color-mix(in srgb, rgba(190, 136, 32, 0.34) 58%, #1a1820 42%);
  color: #ffd98b;
}

[data-theme="dark"] .feedback-field input,
[data-theme="dark"] .feedback-field select,
[data-theme="dark"] .feedback-field textarea,
[data-theme="dark"] .feedback-triageRow select,
[data-theme="dark"] .feedback-formRow input,
[data-theme="dark"] .feedback-formRow select,
[data-theme="dark"] .feedback-formRow textarea {
  background: color-mix(in srgb, var(--surface-panel) 86%, #0b1118 14%);
  border-color: color-mix(in srgb, rgba(120, 185, 248, 0.16) 40%, var(--surface-card-border) 60%);
  color: var(--ink);
}

[data-theme="dark"] .feedback-field input:focus,
[data-theme="dark"] .feedback-field select:focus,
[data-theme="dark"] .feedback-field textarea:focus,
[data-theme="dark"] .feedback-triageRow select:focus,
[data-theme="dark"] .feedback-formRow input:focus,
[data-theme="dark"] .feedback-formRow select:focus,
[data-theme="dark"] .feedback-formRow textarea:focus {
  outline: 2px solid rgba(120, 185, 248, 0.45);
  outline-offset: 1px;
}

[data-theme="dark"] .feedback-contextItem__value {
  background: color-mix(in srgb, var(--surface-panel) 84%, #0b1118 16%);
  border-color: color-mix(in srgb, rgba(120, 185, 248, 0.16) 40%, var(--surface-card-border) 60%);
}

[data-theme="dark"] .feedback-warningText {
  color: #ffd98b;
}

[data-theme="dark"] .feedback-guidance {
  color: color-mix(in srgb, var(--ink) 88%, #ead9b2 12%);
}

[data-theme="dark"] .feedback-guidance a {
  color: #8fc4ff;
}

[data-theme="dark"] .feedback-guidance__quote {
  border-left-color: rgba(196, 139, 44, 0.52);
  color: #f2dfb4;
}

[data-theme="dark"] .feedback-actionGroup + .feedback-actionGroup {
  border-top-color: color-mix(in srgb, rgba(120, 185, 248, 0.18) 30%, var(--surface-card-border) 70%);
}

[data-theme="dark"] .auth-providerBtn {
  border-color: color-mix(in srgb, rgba(120, 185, 248, 0.18) 40%, var(--surface-card-border) 60%);
}

[data-theme="dark"] .auth-providerBtn--google {
  background: #f5f7fa;
  color: #202124;
}

[data-theme="dark"] .auth-providerBtn--apple {
  background: #0f1115;
  color: #ffffff;
  border-color: color-mix(in srgb, rgba(120, 185, 248, 0.18) 34%, #0f1115 66%);
}

[data-theme="dark"] .auth-signin-hero p {
  color: color-mix(in srgb, var(--muted) 74%, #dbe7f6 26%);
}

[data-theme="dark"] .feedback-link,
[data-theme="dark"] .feedback-linkButton,
[data-theme="dark"] .feedback-relatedList a {
  color: #8fc4ff;
}

[data-theme="dark"] .feedback-link:hover,
[data-theme="dark"] .feedback-linkButton:hover,
[data-theme="dark"] .feedback-relatedList a:hover {
  color: #d9ebff;
}

[data-theme="dark"] .feedback-actionBtn {
  background: color-mix(in srgb, #172334 78%, var(--surface-card) 22%);
  border-color: color-mix(in srgb, rgba(120, 185, 248, 0.18) 42%, var(--surface-card-border) 58%);
  color: var(--ink);
}

[data-theme="dark"] .feedback-actionBtn:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  border-color: color-mix(in srgb, rgba(143, 196, 255, 0.42) 52%, var(--surface-card-border) 48%);
}

[data-theme="dark"] .feedback-actionBtn--danger {
  background: color-mix(in srgb, rgba(127, 24, 46, 0.34) 68%, #1a1118 32%);
  border-color: rgba(180, 67, 93, 0.52);
  color: #ffb4c1;
}

[data-theme="dark"] .feedback-actionBtn--danger:hover {
  border-color: rgba(216, 96, 124, 0.7);
}

[data-theme="dark"] .feedback-actionBtn--dangerSoft {
  background: color-mix(in srgb, rgba(155, 107, 16, 0.26) 62%, #18141a 38%);
  border-color: rgba(190, 136, 32, 0.42);
  color: #ffd98b;
}

[data-theme="dark"] .feedback-banner {
  background: color-mix(in srgb, #152232 72%, var(--surface-panel) 28%);
  border-color: color-mix(in srgb, rgba(120, 185, 248, 0.2) 42%, var(--surface-card-border) 58%);
}

[data-theme="dark"] .feedback-banner--warning {
  background: color-mix(in srgb, rgba(155, 107, 16, 0.24) 56%, #18141a 44%);
  border-color: rgba(190, 136, 32, 0.34);
}

[data-theme="dark"] .feedback-banner--activeFilter {
  background: color-mix(in srgb, rgba(196, 139, 44, 0.28) 62%, var(--surface-panel) 38%);
  border-color: rgba(212, 162, 74, 0.48);
  color: #ffe1a1;
}

[data-theme="dark"] .feedback-pill {
  background: color-mix(in srgb, #152232 78%, var(--surface-card) 22%);
  color: #dbe7f6;
}

[data-theme="dark"] .feedback-pill--resolved,
[data-theme="dark"] .feedback-pill--closed {
  background: color-mix(in srgb, rgba(44, 122, 75, 0.36) 64%, #131b17 36%);
  color: #b8f2ca;
}

[data-theme="dark"] .feedback-pill--spam {
  background: color-mix(in srgb, rgba(143, 38, 54, 0.38) 66%, #1a1118 34%);
  color: #ffb4c1;
}

[data-theme="dark"] .feedback-pill--critical,
[data-theme="dark"] .feedback-pill--in_progress,
[data-theme="dark"] .feedback-pill--new,
[data-theme="dark"] .feedback-pill--attention {
  background: color-mix(in srgb, rgba(190, 136, 32, 0.34) 58%, #1a1820 42%);
  color: #ffd98b;
  border-color: rgba(190, 136, 32, 0.38);
}

[data-theme="dark"] .feedback-pill--in_review,
[data-theme="dark"] .feedback-pill--needs_followup {
  background: color-mix(in srgb, rgba(190, 136, 32, 0.34) 58%, #1a1820 42%);
  color: #ffd98b;
}

[data-theme="dark"] .feedback-pill--reviewed {
  background: color-mix(in srgb, rgba(44, 122, 75, 0.36) 64%, #131b17 36%);
  color: #b8f2ca;
}

[data-theme="dark"] .feedback-pill--unreviewed {
  background: color-mix(in srgb, rgba(113, 128, 138, 0.28) 62%, #161a1f 38%);
  color: #d5dde2;
}

[data-theme="dark"] .feedback-fact__value--alert,
[data-theme="dark"] .feedback-note--strong {
  color: #ffd98b;
}

[data-theme="dark"] .feedback-copyBtn:hover {
  color: #d9ebff;
}

[data-theme="dark"] .feedback-copyBtn::after {
  color: #b8f2ca;
}

[data-theme="dark"] .feedback-history-json {
  background: color-mix(in srgb, #152232 82%, var(--surface-card) 18%);
  color: #dce7f4;
}

[data-theme="dark"] .feedback-timelineItem {
  border-left-color: color-mix(in srgb, rgba(120, 185, 248, 0.42) 56%, var(--surface-card-border) 44%);
}

.feedback-history-json {
  display: block;
  white-space: pre-wrap;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #102a43 7%, #ffffff 93%);
}

.adminPageTools {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 1200;
  width: min(320px, calc(100vw - 16px));
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
}

.adminPageIssues {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  position: relative;
}

.adminPageIssues[open] {
  width: 100%;
  flex-basis: 100%;
}

.adminPageIssues__summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  width: auto;
  padding: 8px 9px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(17, 20, 24, 0.14);
  cursor: pointer;
}

.adminPageIssues[open] .adminPageIssues__summary {
  position: absolute;
  right: 0;
  bottom: calc(100% + 3px);
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  justify-content: center;
  z-index: 2;
}

.adminPageReview__closeGlyph {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}

.adminPageIssues[open] .adminPageReview__closeGlyph {
  display: flex;
}

.adminPageReview__srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.adminPageIssues[open] .adminPageIssues__count {
  display: none;
}

.adminPageIssues {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.adminPageIssues__summary {
  border: 1px solid color-mix(in srgb, #c48b2c 44%, var(--border) 56%);
  background: color-mix(in srgb, #f3d489 38%, var(--surface-card) 62%);
  color: #6f4d10;
}

.adminPageIssues__summary::-webkit-details-marker {
  display: none;
}

.adminPageIssues__count {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(111, 77, 16, 0.12);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

.adminPageIssues__panel {
  margin-top: 0;
  margin-right: 0;
  padding: 14px;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, #c48b2c 32%, var(--surface-card-border) 68%);
  background: color-mix(in srgb, #fff7df 78%, var(--surface-card) 22%);
  box-shadow: 0 18px 38px rgba(17, 20, 24, 0.18);
  font-size: 12px;
  line-height: 1.45;
}

.adminPageIssues__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.adminPageIssues__header .feedback-link {
  font-size: 12px;
}

.adminPageIssues__header h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
}

.adminPageIssues__meta {
  margin: 6px 0 0;
  color: var(--muted, #6d6b66);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.adminPageIssues__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.adminPageIssues__item {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, #c48b2c 18%, var(--border) 82%);
}

.adminPageIssues__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.adminPageIssues__itemLink {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.adminPageIssues__itemLink .feedback-pill {
  padding: 4px 8px;
  font-size: 9px;
  letter-spacing: 0.09em;
}

.adminPageIssues__itemLink:hover .adminPageIssues__itemTitle {
  text-decoration: underline;
}

.adminPageIssues__itemTitle {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.adminPageIssues__itemMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted, #6d6b66);
  font-size: 10px;
}

[data-theme="dark"] .adminPageIssues__summary {
  background: color-mix(in srgb, rgba(196, 139, 44, 0.34) 68%, #1a1820 32%);
  border-color: rgba(212, 162, 74, 0.5);
  color: #ffe1a1;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .adminPageIssues__count {
  background: rgba(255, 225, 161, 0.12);
}

[data-theme="dark"] .adminPageIssues__panel {
  background: color-mix(in srgb, rgba(196, 139, 44, 0.16) 20%, #17120a 80%);
  border-color: rgba(212, 162, 74, 0.34);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.38);
}

[data-theme="dark"] .adminPageIssues__meta,
[data-theme="dark"] .adminPageIssues__itemMeta {
  color: color-mix(in srgb, var(--muted) 80%, #eddcb4 20%);
}

[data-theme="dark"] .adminPageIssues__item {
  border-top-color: rgba(212, 162, 74, 0.18);
}

@media (max-width: 980px) {

  .feedback-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .feedback-shell {
    padding: 0 0 32px;
  }

  .feedback-card,
  .auth-card {
    padding: 18px;
  }

  .feedback-hero {
    padding: 16px;
  }

  .feedback-hero h1 {
    font-size: 28px;
  }

  .feedback-card--filters {
    grid-template-columns: 1fr;
  }

  .feedback-factsGrid--two {
    grid-template-columns: 1fr;
  }

  .feedback-contextGrid {
    grid-template-columns: 1fr;
  }

  .feedback-formRow {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .feedback-guidanceLead p {
    padding-right: 0;
  }

  .feedback-guidanceReveal {
    position: static;
    display: inline-block;
    margin-top: 8px;
  }

  .auth-signin-page {
    gap: 16px;
    padding-top: 0;
  }

  .auth-signin-hero h1 {
    font-size: 34px;
  }

  .auth-signin-hero p {
    font-size: 15px;
  }

  .feedback-inlineControl {
    flex-direction: column;
    align-items: stretch;
  }

  .feedback-inlineControl .btn {
    width: 100%;
  }

  .adminPageTools {
    right: 0;
    bottom: 0;
    width: min(300px, calc(100vw - 10px));
  }

  .feedback-heroAction {
    position: static;
    margin-left: 0;
  }

  .feedback-triageRow {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .feedback-actions--triage {
    justify-content: stretch;
  }

  .feedback-table {
    display: block;
    overflow-x: auto;
  }
}

/* Practice */
/* In light mode the practice page sits on a slightly deeper cream (5% of the
   practice accent), so the near-white card and its footer band stand apart from
   it, especially on phones, where the card runs edge to edge with no shadow.
   Dark mode keeps the site background. */
html:not([data-theme="dark"]) body[data-page-type="practice"] {
  --practice-page-bg: color-mix(in srgb, var(--bg) 95%, #8b6946);
}
body[data-page-type="practice"] .topbar__nav-bar {
  background: color-mix(in srgb, var(--practice-page-bg, var(--bg)) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body[data-page-type="practice"] {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(120, 180, 240, 0.33) 0%, transparent 25%),
    radial-gradient(ellipse at 25% 0%, rgba(180, 130, 240, 0.28) 0%, transparent 22%),
    radial-gradient(ellipse at 50% 0%, rgba(240, 140, 180, 0.22) 0%, transparent 24%),
    radial-gradient(ellipse at 75% 0%, rgba(240, 170, 100, 0.24) 0%, transparent 22%),
    radial-gradient(ellipse at 100% 0%, rgba(120, 210, 180, 0.31) 0%, transparent 25%),
    var(--practice-page-bg, var(--bg));
  background-repeat: no-repeat;
  background-size: 100% 420px, 100% 400px, 100% 400px, 100% 400px, 100% 420px, auto;
}

[data-theme="dark"] body[data-page-type="practice"] {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(80, 140, 220, 0.10) 0%, transparent 25%),
    radial-gradient(ellipse at 25% 0%, rgba(160, 90, 220, 0.09) 0%, transparent 22%),
    radial-gradient(ellipse at 50% 0%, rgba(220, 110, 160, 0.07) 0%, transparent 24%),
    radial-gradient(ellipse at 75% 0%, rgba(220, 140, 80, 0.08) 0%, transparent 22%),
    radial-gradient(ellipse at 100% 0%, rgba(80, 190, 150, 0.10) 0%, transparent 25%),
    var(--bg);
  background-repeat: no-repeat;
  background-size: 100% 420px, 100% 400px, 100% 400px, 100% 400px, 100% 420px, auto;
}

.practicePage {
  --practice-panel: rgba(255, 253, 248, 0.92);
  --practice-line: rgba(72, 56, 37, 0.11);
  --practice-line-strong: rgba(72, 56, 37, 0.18);
  --practice-ink: #2a241e;
  --practice-soft: #6a5b4c;
  --practice-faint: #8a7b6c;
  --practice-accent: #8b6946;
  --forgive-intro: rgba(225, 236, 247, 0.45);
  --forgive-look: var(--practice-panel);
  --forgive-wait: var(--practice-panel);
  --forgive-judge: var(--practice-panel);
  --forgive-remember: var(--practice-panel);
  --forgive-tab: rgba(255, 255, 255, 0.85);
  --practice-cite-highlight: color-mix(in srgb, var(--practice-accent) 14%, transparent);
  --practice-cite-row-hover: color-mix(in srgb, var(--practice-accent) 6%, transparent);
  --practice-cite-text: var(--practice-soft);
  --practice-cite-meta: var(--practice-soft);
  min-height: calc(100vh - 140px);
  padding: 12px 18px 48px;
}

.practicePage__inner {
  width: min(780px, 100%);
  margin: 0 auto;
}

.practicePage__title {
  display: none;
  margin: 0 0 10px;
  color: var(--practice-accent);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
}

/* ── Time slip ── */

.practiceTimeSlip {
  position: absolute;
  top: -1px;
  right: 24px;
  z-index: 2;
  padding: 6px 14px 8px;
  background: rgba(245, 235, 210, 0.35);
  border: 1px solid color-mix(in srgb, var(--practice-accent) 20%, var(--practice-line));
  border-top: none;
  border-radius: 0 0 10px 10px;
  color: var(--practice-accent);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(31, 35, 40, 0.04);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceTimeSlip {
  background: rgba(180, 140, 80, 0.08);
}

/* Cards with audio: a Listen tab in the time estimate's place, cut from the
   same cloth (narration-player.ejs inside .practiceCard__listenSlip). */
.practiceCard__slips {
  position: absolute;
  top: -1px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.practiceCard__listenSlip .narration-audio {
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0;
  margin: 0;
  background: rgba(245, 235, 210, 0.35);
  border: 1px solid color-mix(in srgb, var(--practice-accent) 20%, var(--practice-line));
  border-top: none;
  border-radius: 0 0 10px 10px;
  color: var(--practice-accent);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__listenSlip .narration-audio {
  background: rgba(180, 140, 80, 0.08);
}

.practiceCard__listenSlip .arc-audio-trigger,
.practiceCard__listenSlip .arc-audio-trigger:hover,
.practiceCard__listenSlip .arc-audio-trigger.is-playing {
  gap: 7px;
  margin: 0;
  padding: 6px 12px 8px 14px;
  border: none;
  border-radius: 0 0 0 10px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.practiceCard__listenSlip .arc-audio-trigger:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.practiceCard__listenSlip .arc-audio-trigger svg {
  width: 10px;
  height: 10px;
}

/* Narrator and "Start over" sit in the same tab, after a hairline. */
.practiceCard__listenSlip .narration-audio__narrator,
.practiceCard__listenSlip .narration-audio__restart {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  margin: 0 0 2px;
  padding: 0 12px 0 10px;
  border: none;
  border-left: 1px solid color-mix(in srgb, var(--practice-accent) 20%, var(--practice-line));
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.practiceCard__listenSlip .narration-audio__restart {
  text-decoration: none;
}

.practiceCard__listenSlip .narration-audio__restart:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.practiceCard__listenSlip .narration-audio__restart[hidden] {
  display: none;
}

.practiceCard__listenSlip .narration-audio__restart {
  padding: 0 11px 2px 10px;
}

.practiceCard__listenSlip .narration-audio__restartIcon {
  display: block;
  width: 13px;
  height: 13px;
}

.practiceCard__listenSlip .narration-audio__restartText {
  display: none;
}

.practiceCard__listenSlip .narration-audio__narrator > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.practiceCard__listenSlip .narration-audio__narrator select {
  padding: 0 2px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

@media (max-width: 520px) {
  .practiceCard__slips {
    right: 14px;
    gap: 6px;
  }
}

/* The narrowest phones: the narrator is chosen in the bottom bar instead, so
   the tab fits. */
@media (max-width: 360px) {
  .practiceCard__listenSlip .narration-audio__narrator {
    display: none;
  }
}

/* ── Control bar ── */

.practiceControlTray {
  width: fit-content;
  max-width: 100%;
  min-width: min(440px, 100%);
  margin: 0 auto 8px;
  padding: 12px 14px;
  background: var(--practice-panel);
  border: 1px solid color-mix(in srgb, var(--practice-line-strong) 85%, var(--practice-accent) 15%);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceControlTray {
  box-shadow: none;
}

.practiceControlBar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.practiceControlBar__type {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.practiceControlBar__typeLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 198px;
  padding: 5px 12px;
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  background: var(--practice-panel);
  border: 1px solid color-mix(in srgb, var(--practice-line-strong) 85%, var(--practice-accent) 15%);
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.practiceControlBar__lock {
  opacity: 0.65;
  transform: translateY(0px);
}

.practiceControlBar__lock svg {
  display: block;
}

.practiceControlBar__chevron {
  font-size: 10px;
  opacity: 0.5;
  transition: transform 200ms ease;
}

.practiceControlBar__typeLabel--open .practiceControlBar__chevron {
  transform: rotate(180deg);
}

.practiceControlBar__typeLabel:hover {
  color: var(--practice-soft);
  border-color: var(--practice-line-strong);
}

.practiceControlBar__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  padding: 6px 0 0;
  background: var(--surface-solid);
  border: 1px solid var(--practice-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.practiceControlBar__dropdownItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--practice-accent) var(--practice-duration-tint, 0%), transparent);
  font-family: var(--sans);
  font-size: 13px;
  text-align: left;
  cursor: default;
}

.practiceControlBar__dropdownItem--available {
  color: var(--practice-ink);
  cursor: pointer;
  transition: background-color 100ms ease;
}

.practiceControlBar__dropdownItem--available:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* The current type gets a filled row; it drops the duration tint so the fill reads cleanly. */
.practiceControlBar__dropdownItem--active,
.practiceControlBar__dropdownItem--active:hover {
  background: var(--overlay-light);
  box-shadow: none;
  font-weight: 700;
}

.practiceControlBar__dropdownMeta {
  flex: 0 0 auto;
  color: var(--practice-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.practiceControlBar__dropdownItem--disabled {
  color: var(--practice-faint);
  opacity: 0.5;
}

/* Marks the practice types whose cards can be listened to. */
.practiceControlBar__audioGlyph {
  margin-left: 7px;
  vertical-align: -1px;
  color: var(--practice-faint);
}


.practiceControlBar__dropdownHeading {
  padding: 6px 16px 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--practice-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.practiceControlBar__dropdownDivider {
  height: 1px;
  margin: 4px 12px;
  background: var(--practice-line);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceControlBar__dropdown {
  background: var(--surface-solid);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceControlBar__dropdownItem {
  box-shadow: none;
}

[data-theme="dark"] body[data-page-type="practice"] .practiceControlBar__dropdownItem--available:hover {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceControlBar__dropdownItem--active,
[data-theme="dark"] body[data-page-type="practice"] .practiceControlBar__dropdownItem--active:hover {
  background: rgba(255, 255, 255, 0.12);
}

.practiceControlBar__typeHint {
  justify-self: end;
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.practiceControlBar__refresh {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--practice-faint);
  font-size: 20px;
  line-height: 0;
  background: none;
  border: 1px solid color-mix(in srgb, var(--practice-line-strong) 85%, var(--practice-accent) 15%);
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, transform 200ms ease;
}

.practiceControlBar__refresh:hover {
  color: var(--practice-ink);
  border-color: var(--practice-line-strong);
}

.practiceControlBar__refresh:active {
  transform: rotate(360deg);
}

/* ── Scope indicator ── */

.practiceScope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px auto 0;
  padding: 5px 10px 5px 14px;
  background: var(--practice-panel);
  border: 1px solid color-mix(in srgb, var(--practice-line-strong) 85%, var(--practice-accent) 15%);
  border-radius: 999px;
  text-align: center;
}

.practicePage__inner > .practiceScope {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.practiceControlTray > .practiceScope {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.practiceScope__label {
  margin: 0;
  color: var(--practice-soft);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.practiceScope__detail {
  margin: 0;
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
}

.practiceScope__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 999px;
  border: none;
  background: none;
  color: var(--practice-faint);
  font-size: 14px;
  text-decoration: none;
  transition: color 140ms ease;
}

.practiceScope__clear:hover {
  color: var(--practice-ink);
}

/* ── Card ── */

.practiceCard {
  position: relative;
  background: var(--practice-panel);
  border: 1px solid color-mix(in srgb, var(--practice-line-strong) 85%, var(--practice-accent) 15%);
  border-radius: 24px;
  box-shadow: 0 24px 48px rgba(54, 40, 28, 0.03);
  overflow: hidden;
}
/* Light mode: the card is a solid sheet lifted off the cream page with the site's
   card shadow, so it reads apart from the page. On phones it runs edge to edge
   with no shadow. */
html:not([data-theme="dark"]) body[data-page-type="practice"] .practiceCard {
  background: var(--panel);
}
@media (min-width: 721px) {
  html:not([data-theme="dark"]) body[data-page-type="practice"] .practiceCard {
    box-shadow: var(--shadow);
  }
}

/* Act I — Invitation */

.practiceCard__readSetup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 32px 32px;
  background: rgba(225, 236, 247, 0.45);
  border-radius: 24px 24px 0 0;
}

.practiceCard__readSetup + .practiceCard__invitation {
  border-radius: 0;
  border-top: 1px solid var(--practice-line);
  background: rgba(245, 235, 210, 0.35);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__readSetup {
  background: rgba(60, 90, 130, 0.15);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__readSetup + .practiceCard__invitation {
  background: rgba(180, 140, 80, 0.08);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__commentaryMain {
  background: rgba(180, 140, 80, 0.08);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__reversalSection {
  background: rgba(180, 140, 80, 0.08);
}

.practiceCard__invitation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 36px 32px 40px;
  background: rgba(225, 236, 247, 0.45);
  border-radius: 24px 24px 0 0;
}

.practiceCard__eyebrow {
  margin: 0;
  color: var(--practice-accent);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}

.practiceCard__readTitle {
  margin: 0;
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

.practiceCard__readLink {
  color: var(--practice-accent);
  text-decoration: underline;
  text-decoration-color: var(--practice-line-strong);
  text-underline-offset: 3px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.practiceCard__readLink:hover {
  color: var(--practice-accent);
  text-decoration-color: var(--practice-accent);
}

.practiceCard__readCta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: baseline;
  position: relative;
  top: -1px;
  margin-left: 5px;
  padding: 4px 10px;
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--practice-line);
  border-radius: 999px;
  transition: color 140ms ease, border-color 140ms ease;
}

.practiceCard__readLink:hover .practiceCard__readCta {
  color: var(--practice-accent);
  border-color: var(--practice-accent);
}

.practiceCard__inlineSourcePicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  margin-left: 6px;
}

.practiceCard__inlineSourcePickerSummary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--practice-line);
  border-radius: 999px;
  background: transparent;
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  vertical-align: baseline;
  position: relative;
  top: -1px;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.practiceCard__inlineSourcePickerSummary:hover,
.practiceCard__inlineSourcePicker:focus-within .practiceCard__inlineSourcePickerSummary {
  color: var(--practice-accent);
  border-color: var(--practice-accent);
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.practiceCard__inlineSourcePickerMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  min-width: max-content;
  display: none;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--practice-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--practice-panel) 96%, white 4%);
  box-shadow: 0 10px 24px rgba(31, 35, 40, 0.12);
}

.practiceCard__inlineSourcePicker:hover .practiceCard__inlineSourcePickerMenu,
.practiceCard__inlineSourcePicker:focus-within .practiceCard__inlineSourcePickerMenu {
  display: grid;
}

.practiceCard__inlineSourcePickerLink {
  display: block;
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--practice-line) 48%, white 52%);
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  text-align: center;
  transition: background 140ms ease, color 140ms ease;
}

.practiceCard__inlineSourcePickerLink:hover {
  background: color-mix(in srgb, var(--practice-line-strong) 42%, white 58%);
  color: var(--practice-ink);
}

/* Forgive/Recognize citations. Each step's position line reads "1 of N ·
   Sources"; the link opens the current slide's list and the step intro's list,
   one row per citation. Slide rows quote the card line they support, or read
   "The whole slide"; step intro rows are title and ref. Hovering or focusing a
   row highlights that line (or the whole tile).
   The opening line's ring and list stay hidden (.is-showing-sources is never
   set) until its sources get a home; the ring takes no space, so the centred
   line stays centred. */
.practiceCard:not(.is-showing-sources) .practiceCard__citeCount {
  display: none;
}

.practiceCard:not(.is-showing-sources) .practiceCard__citeList:not(.practiceCard__citeList--slide) {
  display: none;
}

/* "Sources" on a step's position line: same 13px sans as "1 of N", in the
   accent to mark it as the one thing on the line to tap. ::before widens the
   tap target to 44px tall without moving the line. */
.practiceCard__citeSources {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  color: var(--practice-accent);
  font: inherit;
  cursor: pointer;
}

.practiceCard__citeSources::before {
  content: '';
  position: absolute;
  inset: -14px -8px;
}

.practiceCard__citeSources:hover,
.practiceCard__citeSources[aria-expanded="true"] {
  color: var(--practice-ink);
}

.practiceCard__citeSources:focus-visible {
  outline: 2px solid var(--blue-solid);
  outline-offset: 2px;
}

/* A step's sources come in two labelled groups, "This slide" then "Step intro",
   in the position line's voice (13px sans, sentence case) and inset to the row
   text. A label sits tight on its rows (the row under it drops its rule) and
   well clear of what's above. */
.practiceCard__citeGroupLabel {
  margin: 0;
  padding-inline: 10px;
  color: var(--practice-cite-meta);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
}

.practiceCard__citeGroupLabel + .practiceCard__citeRow::before {
  display: none;
}

/* The step intro's list sits a group's width below the slide's list. */
.practiceCard__citeList--slide.practiceCard__citeList--intro {
  margin-top: 16px;
}

.practiceCard__citeLine {
  border-radius: 3px;
  transition: background 160ms ease;
}

.practiceCard__citeLine.is-cite-highlight {
  background: var(--practice-cite-highlight);
}

.practiceCard__citeLine.is-cite-highlight-whole {
  background: var(--practice-cite-highlight);
}

/* Every tile: a small bare circle right after its last sentence, saying only
   that sources are there; the count lives in its label. An empty inline-block
   sits with its bottom edge on the text baseline. The ring is just above x-height,
   in the eyebrow's accent so it reads as part of the card; ::before widens the
   tap target to 32px without changing what shows. */
.practiceCard__citeCount {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: baseline;
  border: 1.5px solid var(--practice-accent);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.practiceCard__citeCount::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 999px;
}

.practiceCard__citeCount:hover {
  background: color-mix(in srgb, var(--practice-accent) 20%, transparent);
}

.practiceCard__citeCount[aria-expanded="true"] {
  background: var(--practice-accent);
}

.practiceCard__citeList {
  display: none;
  flex-direction: column;
  /* Rows pad 10px for their hover tint; pulling the list out by the same
     amount lines the row text up with the card text on both sides. */
  margin-inline: -10px;
  text-align: left;
}

.practiceCard__citeList.is-open {
  display: flex;
}

/* Slides aren't flex columns, so their list sets its own gap from the text. */
.practiceCard__citeList--slide {
  margin-top: 16px;
}

.practiceCard__citeRow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 16px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--practice-cite-text);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

/* The divider is inset to the text width, so it neither curls into the hover
   tint's rounded corners nor runs past the text. */
.practiceCard__citeRow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--practice-line);
}

/* Hover only where there is a real pointer; a tap shouldn't leave a tint. */
@media (hover: hover) {
  .practiceCard__citeRow:hover {
    background: var(--practice-cite-row-hover);
    color: var(--practice-ink);
  }
}

.practiceCard__citeRow:focus-visible {
  outline: 2px solid var(--practice-accent);
  outline-offset: -2px;
  background: var(--practice-cite-row-hover);
  color: var(--practice-ink);
}

.practiceCard__citeQuote {
  overflow: hidden;
  color: var(--practice-cite-text);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practiceCard__citeRef {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
  font-family: var(--sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.practiceCard__citeTitle {
  color: var(--practice-cite-meta);
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

/* In a step intro's rows the title is the lead, so it takes the row's size
   and colour rather than the faint caption under a quote. */
.practiceCard__citeRow--compact .practiceCard__citeTitle {
  color: var(--practice-cite-text);
  font-size: 13px;
}

/* Phones: no hover, so the quote is the only way to tell which line a row
   backs. It takes the full width (up to two lines), with title and ref sharing
   the line below; a step intro row is at least a 44px tap target. */
@media (max-width: 720px) {
  .practiceCard__citeRow:not(.practiceCard__citeRow--compact) {
    grid-template-areas: "quote quote" "title ref";
  }

  .practiceCard__citeRow:not(.practiceCard__citeRow--compact) .practiceCard__citeQuote {
    grid-area: quote;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  .practiceCard__citeRow:not(.practiceCard__citeRow--compact) .practiceCard__citeRef {
    grid-area: ref;
  }

  .practiceCard__citeRow:not(.practiceCard__citeRow--compact) .practiceCard__citeTitle {
    grid-area: title;
  }

  .practiceCard__citeRow--compact {
    min-height: 44px;
    align-content: center;
  }
}

.practiceCard__snippet {
  margin: 0;
  margin-left: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--practice-accent);
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
}

.practiceCard__framing {
  margin: 0;
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

/* Deeper — disclosure toggle */

.practiceCard__divider {
  border-top: 1px solid var(--practice-line);
}

.practiceCard__deeper {
  position: relative;
  border-top: 1px solid var(--practice-line);
  border-bottom: 1px solid var(--practice-line);
  height: 8px;
}

.practiceCard__deeper--open {
  height: auto;
  border-top: 1px solid var(--practice-line);
  border-bottom: 1px solid var(--practice-line);
}

.practiceCard__deeperLine {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.practiceCard__deeperPill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  background: var(--practice-panel);
  border: 1px solid var(--practice-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.practiceCard__deeperPill:hover {
  color: var(--practice-accent);
  border-color: var(--practice-accent);
}

.practiceCard__deeperContent {
  padding: 28px 32px;
}

.practiceCard__deeperContent .practiceCard__label {
  margin-bottom: 10px;
}

.practiceCard__deeperBody {
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

.practiceCard__deeperDivider {
  height: 1px;
  margin: 20px 0;
  background: var(--practice-line);
}

.practiceCard__deeperBody p {
  margin: 0 0 12px;
}

.practiceCard__deeperBody p:last-child {
  margin-bottom: 0;
}

/* Reversal */

.practiceCard__reversalSetup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 32px 32px;
  background: rgba(225, 236, 247, 0.45);
  border-radius: 24px 24px 0 0;
}

.practiceCard__reversalSection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 32px 36px;
  border-top: 1px solid var(--practice-line);
  background: rgba(245, 235, 210, 0.35);
}
.practiceCard__reversalSection:last-child {
  border-bottom: none;
}

.practiceCard__eyebrow--shift {
  margin-top: 16px;
}

.practiceCard__reversalDef {
  margin: 0;
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

.practiceCard__reversalShift {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  text-align: center;
}

.practiceCard__reversalTerritory {
  margin: 0;
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

.practiceCard__reversalLane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 12px 0 8px;
  text-align: center;
}

.practiceCard__reversalBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.practiceCard__reversalBoxLabel {
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.practiceCard__reversalReleased {
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  padding: 10px 24px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--blue-solid) 20%, transparent);
  background: color-mix(in srgb, var(--blue-wash) 60%, rgba(255, 255, 255, 0.8));
}

.practiceCard__reversalArrow {
  color: var(--practice-faint);
  font-size: 16px;
}

.practiceCard__reversalRecognized {
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.5;
  padding: 10px 24px 12px;
  border-radius: 14px;
  border: 1px solid rgba(160, 140, 200, 0.25);
  background:
    radial-gradient(ellipse at 15% 30%, rgba(120, 180, 240, 0.38) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 15%, rgba(200, 120, 240, 0.30) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 70%, rgba(240, 170, 100, 0.28) 0%, transparent 45%),
    radial-gradient(ellipse at 35% 85%, rgba(100, 220, 170, 0.30) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 45%, rgba(240, 140, 180, 0.20) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.65) 0%, rgba(245, 240, 250, 0.3) 100%);
  box-shadow:
    0 3px 14px rgba(160, 140, 220, 0.28),
    0 0 24px rgba(180, 160, 240, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Dark mode reversal boxes */
[data-theme="dark"] body[data-page-type="practice"] .practiceCard__szSection--seed {
  background: rgba(72, 190, 190, 0.06);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__szSection--zenith {
  background: rgba(160, 90, 220, 0.06);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__reversalSetup {
  background: rgba(60, 90, 130, 0.15);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__reversalReleased {
  background: color-mix(in srgb, var(--blue-solid) 15%, rgba(28, 30, 34, 0.8));
  border-color: color-mix(in srgb, var(--blue-solid) 20%, transparent);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__reversalRecognized {
  border-color: rgba(160, 140, 200, 0.30);
  background:
    radial-gradient(ellipse at 15% 30%, rgba(80, 140, 220, 0.30) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 15%, rgba(160, 90, 220, 0.24) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 70%, rgba(220, 140, 80, 0.20) 0%, transparent 45%),
    radial-gradient(ellipse at 35% 85%, rgba(80, 190, 150, 0.24) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 45%, rgba(220, 110, 160, 0.16) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 50%, rgba(30, 32, 38, 0.8) 0%, rgba(28, 30, 34, 0.6) 100%);
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(140, 120, 200, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.practiceCard__reversalSeen {
  margin: 4px 0 0;
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
}

/* Beneath the Surface */

.practiceCard__beneathSetup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 36px 32px 32px;
  background: rgba(225, 236, 247, 0.45);
  border-radius: 24px 24px 0 0;
}

.practiceCard__beneathMain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 32px 32px;
  border-top: 1px solid var(--practice-line);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 14px,
      rgba(60, 40, 70, 0.05) 14px,
      rgba(60, 40, 70, 0.05) 15px
    ),
    radial-gradient(ellipse at 85% 15%, rgba(40, 30, 60, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(30, 40, 50, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(35, 30, 45, 0.10) 0%, transparent 70%),
    rgba(235, 230, 222, 0.7);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__beneathSetup {
  background: rgba(60, 90, 130, 0.15);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__beneathMain {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 14px,
      rgba(100, 80, 120, 0.12) 14px,
      rgba(100, 80, 120, 0.12) 15px
    ),
    radial-gradient(ellipse at 85% 15%, rgba(20, 15, 35, 0.50) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(15, 20, 30, 0.40) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(18, 15, 25, 0.30) 0%, transparent 70%),
    rgba(14, 12, 18, 0.7);
}

/* Two Threads */

.practiceCard__threadSection {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 32px 32px;
  border-top: 1px solid var(--practice-line);
}

.practiceCard__threadSection--wrong {
  background:
    radial-gradient(ellipse at 85% 15%, rgba(40, 30, 60, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(30, 40, 50, 0.06) 0%, transparent 55%),
    rgba(240, 236, 232, 0.5);
}

.practiceCard__threadSection--right {
  background:
    radial-gradient(ellipse at 85% 15%, rgba(218, 170, 100, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(200, 150, 80, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(240, 220, 190, 0.25) 0%, transparent 70%),
    rgba(248, 238, 222, 0.4);
}

.practiceCard__threadDef {
  margin: 0;
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

.practiceCard__threadSection .practiceCard__section {
  margin-top: 4px;
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__threadSection--wrong {
  background:
    radial-gradient(ellipse at 85% 15%, rgba(20, 15, 35, 0.40) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(15, 20, 30, 0.30) 0%, transparent 55%),
    rgba(18, 16, 22, 0.5);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__threadSection--right {
  background:
    radial-gradient(ellipse at 85% 15%, rgba(180, 140, 80, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(160, 120, 70, 0.12) 0%, transparent 55%),
    rgba(40, 35, 28, 0.5);
}

/* Common Confusions */

.practiceCard__confusionsSetup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 32px 32px;
  background: rgba(225, 236, 247, 0.45);
  border-radius: 24px 24px 0 0;
}

.practiceCard__confusionsMain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 32px 32px;
  border-top: 1px solid var(--practice-line);
  background:
    repeating-linear-gradient(
      -3deg,
      transparent 0px,
      transparent 18px,
      rgba(180, 80, 60, 0.03) 18px,
      rgba(180, 80, 60, 0.03) 20px
    ),
    repeating-linear-gradient(
      4deg,
      transparent 0px,
      transparent 22px,
      rgba(60, 80, 180, 0.03) 22px,
      rgba(60, 80, 180, 0.03) 24px
    ),
    radial-gradient(ellipse at 30% 20%, rgba(200, 60, 60, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(60, 60, 200, 0.05) 0%, transparent 50%),
    rgba(248, 244, 240, 0.4);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__confusionsSetup {
  background: rgba(60, 90, 130, 0.15);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__confusionsMain {
  background:
    repeating-linear-gradient(
      -3deg,
      transparent 0px,
      transparent 18px,
      rgba(180, 80, 60, 0.04) 18px,
      rgba(180, 80, 60, 0.04) 20px
    ),
    repeating-linear-gradient(
      4deg,
      transparent 0px,
      transparent 22px,
      rgba(60, 80, 180, 0.04) 22px,
      rgba(60, 80, 180, 0.04) 24px
    ),
    radial-gradient(ellipse at 30% 20%, rgba(200, 60, 60, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(60, 60, 200, 0.05) 0%, transparent 50%),
    rgba(22, 18, 24, 0.4);
}

/* Seed and Zenith */

.practiceCard__szSetup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 32px 32px;
  border-radius: 24px 24px 0 0;
}

.practiceCard__szSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 32px 32px;
  border-top: 1px solid var(--practice-line);
}

.practiceCard__szSection--seed {
  background: rgba(56, 161, 161, 0.06);
}

.practiceCard__szSection--zenith {
  background: rgba(126, 58, 183, 0.06);
}

.practiceCard__szBadge {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* While its key moment is announced, the label takes a tint of its own
   colour, fitted to the word, instead of the line highlight. */
.narration-body .practiceCard__szBadge.is-speaking-sentence {
  width: fit-content;
  margin: -1px -7px;
  padding: 1px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.practiceCard__szBadge--seed {
  color: var(--seed-text);
}

.practiceCard__szBadge--zenith {
  color: var(--zenith-text);
}

.practiceCard__szBadge--milestone {
  color: var(--milestone-text);
}

.practiceCard__szSection--milestone {
  background: rgba(183, 121, 31, 0.05);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__szSection--milestone {
  background: rgba(210, 150, 50, 0.06);
}

.practiceCard__szRef {
  margin: 0;
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

.practiceCard__szSnippet {
  margin: 0;
  margin-left: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--practice-accent);
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
}

.practiceCard__szSection .practiceCard__deeperBody {
  margin-top: 8px;
}

/* Complete Arc Timeline */

.practiceCard__arcEyebrow {
  padding: 12px 32px;
  border-top: 1px solid var(--practice-line);
  border-bottom: 1px solid var(--practice-line);
  background: rgba(0, 0, 0, 0.02);
  text-align: center;
}

.practiceCard__arcEyebrow .practiceCard__eyebrow {
  margin: 0;
}

.practiceCard__arcTimeline {
}

.practiceCard__arcStop {
  display: grid;
  grid-template-columns: 48px 1fr;
  min-height: 0;
}

.practiceCard__arcTrack {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.practiceCard__arcTrack::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--practice-line-strong);
  transform: translateX(-50%);
}

.practiceCard__arcStop--first .practiceCard__arcTrack::before {
  top: 24px;
}

.practiceCard__arcStop--last .practiceCard__arcTrack::before {
  bottom: auto;
  height: 38px;
}

.practiceCard__arcSymbol {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: -5px;
  font-size: 16px;
  border-radius: 999px;
  background: var(--practice-panel);
}

.practiceCard__arcSymbol--seed {
  color: var(--seed-dot);
  border: 2px solid var(--seed-border);
  background: color-mix(in srgb, var(--seed-dot) 10%, var(--practice-panel));
}

.practiceCard__arcSymbol--milestone {
  color: var(--milestone-dot);
  border: 2px solid var(--milestone-border);
  background: color-mix(in srgb, var(--milestone-dot) 10%, var(--practice-panel));
}

.practiceCard__arcSymbol--zenith {
  color: var(--zenith-dot);
  border: 2px solid var(--zenith-border);
  background: color-mix(in srgb, var(--zenith-dot) 10%, var(--practice-panel));
}

.practiceCard__arcContent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 32px 28px 12px;
  border-bottom: 1px solid var(--practice-line);
}

.practiceCard__arcStop--seed .practiceCard__arcContent {
  background: rgba(56, 161, 161, 0.06);
}

.practiceCard__arcStop--milestone .practiceCard__arcContent {
  background: rgba(183, 121, 31, 0.05);
}

.practiceCard__arcStop--zenith .practiceCard__arcContent {
  background: rgba(126, 58, 183, 0.06);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__arcStop--seed .practiceCard__arcContent {
  background: rgba(72, 190, 190, 0.06);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__arcStop--milestone .practiceCard__arcContent {
  background: rgba(210, 150, 50, 0.06);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__arcStop--zenith .practiceCard__arcContent {
  background: rgba(160, 90, 220, 0.06);
}

.practiceCard__arcStop--last .practiceCard__arcContent {
  border-bottom: none;
}

.practiceCard__arcContent .practiceCard__deeperBody {
  margin-top: 4px;
}

/* Teaching */

.practiceCard__teachingSetup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 32px 32px;
  background: rgba(225, 236, 247, 0.45);
  border-radius: 24px 24px 0 0;
}

.practiceCard__teachingMain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 32px 36px;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(218, 170, 100, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(200, 150, 80, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(240, 220, 190, 0.25) 0%, transparent 70%),
    color-mix(in srgb, rgba(248, 238, 222, 0.6) 60%, var(--practice-panel));
  border-top: 1px solid var(--practice-line);
}

.practiceCard__teachingBody {
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__teachingMain {
  background:
    radial-gradient(ellipse at 85% 15%, rgba(180, 140, 80, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(160, 120, 70, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(120, 100, 70, 0.10) 0%, transparent 70%),
    color-mix(in srgb, rgba(40, 35, 28, 0.5) 60%, var(--practice-panel));
}

/* Motif Journey */

.practiceCard__journeySetup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 32px 32px;
  background: rgba(225, 236, 247, 0.45);
  border-radius: 24px 24px 0 0;
}

.practiceCard__journeyMain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 32px 36px;
  border-top: 1px solid var(--practice-line);
  background: color-mix(in srgb, var(--practice-panel) 92%, white 8%);
}

.practiceCard__journeyBody {
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
}

.practiceCard__journeyBody h2,
.practiceCard__journeyBody h4,
.practiceCard__journeyBody h5 {
  margin: 18px 0 8px;
  color: var(--practice-accent);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.practiceCard__journeyBody h3 {
  margin: 16px 0 6px;
  color: var(--practice-ink);
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.practiceCard__journeyBody p {
  margin: 0 0 14px;
}

.practiceCard__journeyBody p:last-child {
  margin-bottom: 0;
}

.practiceCard__journeyBody a {
  color: var(--blue-solid);
  text-decoration: none;
}

.practiceCard__journeyBody a:hover {
  text-decoration: underline;
}

.practiceCard__journeyBody ul,
.practiceCard__journeyBody ol {
  margin: 0 0 14px 1.25em;
  padding: 0;
}

.practiceCard__journeyBody li + li {
  margin-top: 6px;
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__journeySetup {
  background: rgba(60, 90, 130, 0.15);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__journeyMain {
  background: color-mix(in srgb, var(--practice-panel) 96%, white 4%);
}

/* Commentary setup + main */

.practiceCard__commentarySetup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 36px 32px 32px;
  background: rgba(225, 236, 247, 0.45);
  border-radius: 24px 24px 0 0;
}

.practiceCard__commentaryMain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 32px 32px;
  border-top: 1px solid var(--practice-line);
  background: rgba(245, 235, 210, 0.35);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__commentarySetup {
  background: rgba(60, 90, 130, 0.15);
}

/* Inline commentary (Sit With This) */

.practiceCard__inlineCommentary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 36px 32px 36px;
  background: rgba(225, 236, 247, 0.45);
  border-radius: 24px 24px 0 0;
}

.practiceCard__inlineCommentary--secondary {
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--practice-line);
}

.practiceCard__inlineCommentary .practiceCard__eyebrow {
  margin: 0;
}

.practiceCard__inlineHeader {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.practiceCard__inlineCommentary .practiceCard__snippet {
  margin: 0;
  margin-left: 0;
  padding-left: 0;
  border-left: none;
  font-weight: 700;
}

.practiceCard__inlineHeading {
  margin: 0;
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

/* Act II — Return */

.practiceCard__return {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 36px 32px 36px;
}

.practiceCard__inlineCommentary + .practiceCard__return,
.practiceCard__commentaryMain + .practiceCard__return {
  border-top: 1px solid var(--practice-line);
}

.practiceCard__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.practiceCard__label {
  margin: 0;
  color: var(--practice-accent);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}

.practiceCard__labelRow {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.practiceCard__labelRow .practiceCard__label {
  margin-bottom: 0;
}

.practiceCard__labelToggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms ease;
}

.practiceCard__labelToggle:hover {
  color: var(--practice-accent);
}


.practiceCard__fieldValue {
  margin: 0;
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

/* Motif groups (Slow Read) */

.practiceCard__motifGroup {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.practiceCard__motifGroup + .practiceCard__motifGroup {
  margin-top: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--practice-line);
}

.practiceCard__motifGroupName {
  margin: 0;
  color: var(--practice-accent);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* Footer — Context */

.practiceCard__context {
  padding: 20px 32px 24px;
  border-top: 1px solid var(--practice-line);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0 0 24px 24px;
}

/* Only the card's last band rounds; one followed by another band (Go Deeper
   above the sources footer) ends square. */
.practiceCard__context:not(:last-child) {
  border-radius: 0;
}

.practiceCard__contextRef {
  margin: 0 0 10px;
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
}

.practiceCard__contextDef {
  margin: 0 0 14px;
  color: var(--practice-faint);
  font-family: "Equity A", Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
}

.practiceCard__contextDefLink {
  color: var(--practice-soft);
  text-decoration: none;
  transition: color 140ms ease;
}

.practiceCard__contextDefLink:hover {
  color: var(--practice-ink);
}

.practiceCard__contextDefLink strong {
  color: inherit;
}

.practiceCard__contextSource {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin: 0 0 14px;
}

.practiceCard__contextSourceLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.practiceCard__contextSourceText {
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
}

.practiceCard__contextEvidenceLinks {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.practiceCard__contextEvidenceLink {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--practice-line) 58%, white 42%);
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

.practiceCard__contextEvidenceLink:hover {
  background: color-mix(in srgb, var(--practice-line-strong) 44%, white 56%);
  color: var(--practice-ink);
}

.practiceCard__contextEvidenceSep {
  color: var(--practice-line-strong);
  font-size: 13px;
}

.practiceCard__contextLinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
}

.practiceCard__contextLink {
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 13px;
  text-decoration: none;
  transition: color 140ms ease;
}

.practiceCard__contextLink:hover {
  color: var(--practice-ink);
}

.practiceCard__contextDot {
  color: var(--practice-line-strong);
  font-size: 13px;
}

/* ── Permalink ── */

.practicePermalink {
  width: fit-content;
  max-width: 100%;
  min-width: min(440px, 100%);
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.practicePermalink__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.practicePermalink__input {
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  color: var(--practice-soft);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--practice-line);
  border-radius: 999px;
  outline: none;
}

.practicePermalink__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.practicePermalink__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--practice-faint);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--practice-line-strong) 85%, var(--practice-accent) 15%);
  border-radius: 999px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.practicePermalink__copy:hover,
.practicePermalink__copy.is-copied {
  color: var(--practice-ink);
  border-color: var(--practice-line-strong);
  background: rgba(0, 0, 0, 0.03);
}

.practicePermalink__status {
  min-height: 0;
  margin: 0;
  color: var(--practice-faint);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 140ms ease, transform 140ms ease, color 140ms ease;
}

.practicePermalink__status.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Empty state ── */

.practiceCard--empty {
  padding: 36px 32px;
}

.practiceCard__emptyLine {
  margin: 0;
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

.practiceCard__emptyHint {
  margin: 8px 0 0;
  color: var(--practice-ink);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}

.practiceCard__emptyHint a {
  color: var(--practice-soft);
  text-decoration-color: var(--practice-line-strong);
  text-underline-offset: 2px;
  transition: color 140ms ease;
}

.practiceCard__emptyHint a:hover {
  color: var(--practice-ink);
}


/* ── Dark mode ── */

[data-theme="dark"] body[data-page-type="practice"] .practicePage {
  --practice-panel: rgba(28, 30, 34, 0.92);
  --practice-line: rgba(220, 225, 230, 0.10);
  --practice-line-strong: rgba(220, 225, 230, 0.18);
  --practice-ink: #e2e4e8;
  --practice-soft: #8b929c;
  --practice-faint: #6b7280;
  --practice-accent: #b8956c;
  --forgive-intro: rgba(60, 90, 130, 0.15);
  --forgive-look: var(--practice-panel);
  --forgive-wait: var(--practice-panel);
  --forgive-judge: var(--practice-panel);
  --forgive-remember: var(--practice-panel);
  --forgive-tab: rgba(40, 42, 48, 0.5);
  /* A tint reads fainter on a dark panel, so the citation tints run stronger. */
  --practice-cite-highlight: color-mix(in srgb, var(--practice-accent) 30%, transparent);
  --practice-cite-row-hover: color-mix(in srgb, var(--practice-accent) 12%, transparent);
  /* Soft and faint gray sit too close to the dark panel for the source rows. */
  --practice-cite-text: color-mix(in srgb, var(--practice-ink) 70%, var(--practice-soft));
  --practice-cite-meta: var(--practice-soft);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] body[data-page-type="practice"] .segmented__btn.is-active {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__invitation,
[data-theme="dark"] body[data-page-type="practice"] .practiceCard__inlineCommentary:not(.practiceCard__inlineCommentary--secondary),
[data-theme="dark"] body[data-page-type="practice"] .practiceCard__reversalSetup,
[data-theme="dark"] body[data-page-type="practice"] .practiceCard__teachingSetup {
  background: rgba(60, 90, 130, 0.15);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__inlineSourcePickerSummary {
  background: transparent;
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__inlineSourcePickerMenu {
  border-color: color-mix(in srgb, var(--practice-line-strong) 82%, white 18%);
  background: color-mix(in srgb, var(--practice-panel) 94%, black 6%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__inlineSourcePickerLink {
  background: color-mix(in srgb, var(--practice-line) 78%, black 22%);
  color: var(--practice-soft);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__inlineSourcePickerLink:hover {
  background: color-mix(in srgb, var(--practice-line-strong) 72%, black 28%);
  color: var(--practice-ink);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__contextEvidenceLink {
  background: color-mix(in srgb, var(--practice-line) 78%, black 22%);
  color: var(--practice-soft);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceCard__contextEvidenceLink:hover {
  background: color-mix(in srgb, var(--practice-line-strong) 72%, black 28%);
  color: var(--practice-ink);
}

[data-theme="dark"] body[data-page-type="practice"] .practiceScope__clear:hover {
  border-color: var(--practice-line-strong);
}

/* ── Mobile ── */

@media (max-width: 720px) {
  .practicePage {
    padding: 12px 0 36px;
  }

  .practicePage__inner {
    width: auto;
    margin-left: -18px;
    margin-right: -18px;
  }

  .practicePage__title {
    display: block;
    padding-left: 18px;
    padding-right: 18px;
  }

  .practiceCard {
    border-top: 1px solid color-mix(in srgb, var(--practice-line-strong) 85%, var(--practice-accent) 15%);
    border-bottom: 1px solid color-mix(in srgb, var(--practice-line-strong) 85%, var(--practice-accent) 15%);
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }

  .practiceControlTray {
    width: auto;
    min-width: 0;
    margin-left: 18px;
    margin-right: 18px;
  }

  .practiceCard__invitation {
    padding: 28px 18px 32px;
  }

  .practiceCard__return {
    padding: 28px 18px 28px;
  }

  .practiceCard__context {
    padding: 16px 18px 22px;
  }

  .practicePermalink {
    width: auto;
    min-width: 0;
    margin-top: 8px;
    margin-left: 18px;
    margin-right: 18px;
  }

  .practiceCard--empty {
    padding: 28px 18px;
  }

  .practiceCard__readTitle,
  .practiceCard__fieldValue,
  .practiceCard__snippet {
    max-width: none;
  }

  .practiceCard__inlineSourcePickerMenu {
    left: auto;
    right: 0;
    transform: none;
    min-width: 132px;
  }

  .practiceCard__deeperContent {
    padding-left: 18px;
    padding-right: 18px;
  }

  .practiceCard__contextSource {
    flex-direction: column;
    gap: 8px;
  }

  .practiceCard__contextSource.practiceCard__contextSource--chips-only {
    flex-direction: row;
    gap: 6px 12px;
  }

  .practiceCard__contextEvidenceLinks {
    justify-content: center;
  }

  .practiceCard__contextEvidenceSep {
    display: none;
  }

  .practicePermalink__controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .practiceCard__arcStop {
    grid-template-columns: 36px 1fr;
  }

  .practiceCard__arcContent {
    padding-right: 18px;
  }

  .practiceCard__readSetup,
  .practiceCard__commentarySetup,
  .practiceCard__commentaryMain,
  .practiceCard__inlineCommentary,
  .practiceCard__reversalSetup,
  .practiceCard__reversalSection,
  .practiceCard__teachingSetup,
  .practiceCard__teachingMain,
  .practiceCard__journeySetup,
  .practiceCard__journeyMain,
  .practiceCard__szSetup,
  .practiceCard__szSection,
  .practiceCard__beneathSetup,
  .practiceCard__beneathMain,
  .practiceCard__confusionsSetup,
  .practiceCard__confusionsMain,
  .practiceCard__threadSection {
    padding-left: 18px;
    padding-right: 18px;
  }

  .practiceCard__readSetup,
  .practiceCard__invitation,
  .practiceCard__commentarySetup,
  .practiceCard__inlineCommentary,
  .practiceCard__reversalSetup,
  .practiceCard__teachingSetup,
  .practiceCard__journeySetup,
  .practiceCard__beneathSetup,
  .practiceCard__confusionsSetup,
  .practiceCard__szSetup,
  .practiceCard__context {
    border-radius: 0;
  }

  /* The Listen tab reaches across the card here, so the first section
     starts below it rather than under it. */
  .practiceCard > .practiceCard__slips + * {
    padding-top: 52px;
  }

}

/* =========================================================
   Book-style paragraphs for long-form narrative pages
   (mirrors the .motif-journey / .arc-narrative__body pattern)
   ========================================================= */

/* About page */
body[data-page-type="about"] .about .about__card > p,
body[data-page-type="about"] .about .about__card > blockquote > p,
body[data-page-type="about"] .about .about__footer-note > p {
  margin: 0;
  text-indent: 1.4em;
}
body[data-page-type="about"] .about .about__card > p:first-of-type,
body[data-page-type="about"] .about .about__card > h2 + p,
body[data-page-type="about"] .about .about__card > h3 + p,
body[data-page-type="about"] .about .about__card > blockquote + p,
body[data-page-type="about"] .about .about__card > blockquote > p:first-of-type,
body[data-page-type="about"] .about .about__card > .about__signature,
body[data-page-type="about"] .about .about__footer-note > p:first-of-type,
body[data-page-type="about"] .about .about__footer-note > h2 + p,
body[data-page-type="about"] .about .about__footer-note > h3 + p {
  text-indent: 0;
}

body[data-page-type="about"] .about .about__card > .about__signature {
  margin-top: 1.5em;
  font-style: italic;
}

/* Findings page body (footnotes excluded via the > combinator) */
.research-page .research-page__card > p {
  margin: 0;
  text-indent: 1.4em;
}
.research-page .research-page__card > p:first-of-type,
.research-page .research-page__card > h2 + p,
.research-page .research-page__card > h3 + p,
.research-page .research-page__card > h4 + p,
.research-page .research-page__card > ul + p,
.research-page .research-page__card > ol + p,
.research-page .research-page__card > hr + p,
.research-page .research-page__card > .research-page__tableWrap + p,
.research-page .research-page__card > .research-page__chartWrap + p {
  text-indent: 0;
}

/* Practice cards: Afterglow layer. Kept last so it wins on source order over the
   earlier practice rules. Seed, milestone and zenith tints are deliberately untouched. */
html body[data-page-type="practice"] .practicePage {
  --pc-aurora: linear-gradient(90deg, rgba(120,180,240,0.85), rgba(180,130,240,0.75), rgba(240,140,180,0.7), rgba(240,170,100,0.75), rgba(120,210,180,0.85));
  --pc-cool: rgba(225, 236, 247, 0.38);
  --pc-warm: rgba(245, 235, 210, 0.38);
  --pc-dusk: rgba(60, 50, 80, 0.07);
  --pc-glowbox: color-mix(in srgb, white 70%, var(--practice-panel));
  --pc-aurora-soft: linear-gradient(90deg, rgba(120,180,240,0.16), rgba(180,130,240,0.12), rgba(240,140,180,0.10), rgba(240,170,100,0.12), rgba(120,210,180,0.16));
}
html[data-theme="dark"] body[data-page-type="practice"] .practicePage {
  --pc-aurora: linear-gradient(90deg, rgba(80,140,220,0.8), rgba(160,90,220,0.7), rgba(220,110,160,0.6), rgba(220,140,80,0.7), rgba(80,190,150,0.8));
  --pc-cool: rgba(60, 90, 130, 0.14);
  --pc-warm: rgba(180, 140, 80, 0.07);
  --pc-dusk: rgba(0, 0, 0, 0.28);
  --pc-glowbox: color-mix(in srgb, white 4%, var(--practice-panel));
  --pc-aurora-soft: linear-gradient(90deg, rgba(80,140,220,0.14), rgba(160,90,220,0.11), rgba(220,110,160,0.08), rgba(220,140,80,0.10), rgba(80,190,150,0.14));
}

html body[data-page-type="practice"] .practiceCard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: var(--pc-aurora); opacity: 1;
}
/* Time / Listen tabs hang from the line: opaque, so the line doesn't show through. */
html body[data-page-type="practice"] .practiceCard .practiceTimeSlip,
html body[data-page-type="practice"] .practiceCard .practiceCard__listenSlip .narration-audio {
  background: color-mix(in srgb, var(--practice-accent) 6%, var(--practice-panel));
}
html[data-theme="dark"] body[data-page-type="practice"] .practiceCard .practiceTimeSlip,
html[data-theme="dark"] body[data-page-type="practice"] .practiceCard .practiceCard__listenSlip .narration-audio {
  background: color-mix(in srgb, var(--practice-accent) 8%, rgb(28, 30, 34));
}
html body[data-page-type="practice"] .practiceCard :is(.practiceTimeSlip, .practiceCard__slips) { top: 2px; }

html body[data-page-type="practice"] .practiceCard :is(.practiceCard__readSetup, .practiceCard__invitation, .practiceCard__reversalSetup, .practiceCard__beneathSetup, .practiceCard__confusionsSetup, .practiceCard__teachingSetup, .practiceCard__journeySetup, .practiceCard__commentarySetup, .practiceCard__inlineCommentary:not(.practiceCard__inlineCommentary--secondary)) {
  background: linear-gradient(180deg, var(--pc-cool), transparent 140%);
}
html body[data-page-type="practice"] .practiceCard :is(.practiceCard__reversalSection, .practiceCard__commentaryMain, .practiceCard__readSetup + .practiceCard__invitation, .practiceCard__teachingMain, .practiceCard__threadSection--right, .practiceCard__confusionsMain) {
  background: linear-gradient(180deg, var(--pc-warm), transparent 160%);
}
html body[data-page-type="practice"] .practiceCard :is(.practiceCard__beneathMain, .practiceCard__threadSection--wrong) {
  background: linear-gradient(180deg, var(--pc-dusk), transparent 130%);
}

html body[data-page-type="practice"] .practiceCard .practiceCard__reversalReleased {
  background: transparent;
  border: 1px solid var(--practice-line-strong);
  color: var(--practice-soft);
}
html body[data-page-type="practice"] .practiceCard .practiceCard__reversalRecognized {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--practice-line-strong);
  background: var(--pc-aurora-soft), var(--pc-glowbox);
  box-shadow: 0 6px 18px rgba(54, 40, 28, 0.06);
}
html[data-theme="dark"] body[data-page-type="practice"] .practiceCard .practiceCard__reversalRecognized {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* One Instant: inline background/box styles removed from practice.ejs (see README);
   these give the block the same treatment as other setups + the shift box. */
/* Doubled class: the setup-band :is() rule above carries a :not() argument, which lifts
   its specificity past a single class. */
html body[data-page-type="practice"] .practiceCard .practiceCard__reversalSetup.practiceCard__reversalSetup--instant {
  padding-bottom: 48px;
  background: var(--pc-aurora-soft), linear-gradient(180deg, var(--pc-cool), transparent 140%);
}
html body[data-page-type="practice"] .practiceCard .practiceCard__instantBox {
  padding: 20px 32px 24px;
  border-radius: 16px;
  background: var(--pc-glowbox);
  border: 1px solid var(--practice-line-strong);
  box-shadow: 0 6px 18px rgba(54, 40, 28, 0.06);
}
html[data-theme="dark"] body[data-page-type="practice"] .practiceCard .practiceCard__instantBox {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* Seed & Zenith / Complete Arc setup band joins the other setups. */
html body[data-page-type="practice"] .practiceCard .practiceCard__szSetup {
  background: linear-gradient(180deg, var(--pc-cool), transparent 140%);
}

/* One Instant: the motif name sits above the box in the reading voice, so it frames the line
   without reading as a second move. */
html body[data-page-type="practice"] .practiceCard .practiceCard__instantMotif {
  margin: 0;
  color: var(--practice-soft);
  font-family: "Equity A", Georgia, serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

/* Chapter Motifs: Signal. Kept after the original Chapter Motifs rules, which it
   overrides by specificity (.chapterMotifs .x): Primary and Pillar keep their fills,
   the lower tiers become short ticks, the grid caps its cell width, and on phones
   only the section labels and pinned rows stick. */
/* ---- Layout: width cap, full-width bands, phone sticky ---- */
/* Section count, read from the label row, sizes the grid to its content. */
.chapterMotifs{ --cm-n: 8; --cm-name: 12.5em; --cm-cell-max: 60px; --cm-cell-min: 40px; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(2):last-child){ --cm-n: 1; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(3):last-child){ --cm-n: 2; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(4):last-child){ --cm-n: 3; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(5):last-child){ --cm-n: 4; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(6):last-child){ --cm-n: 5; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(7):last-child){ --cm-n: 6; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(8):last-child){ --cm-n: 7; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(9):last-child){ --cm-n: 8; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(10):last-child){ --cm-n: 9; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(11):last-child){ --cm-n: 10; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(12):last-child){ --cm-n: 11; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(13):last-child){ --cm-n: 12; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(14):last-child){ --cm-n: 13; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(15):last-child){ --cm-n: 14; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(16):last-child){ --cm-n: 15; }
.chapterMotifs:has(.chapterMotifs__thead th:nth-child(17):last-child){ --cm-n: 16; }

/* The label row's blue wash runs the card's full width, past a capped grid
   (the script already measures the row as --cm-head-row). */
.chapterMotifs__headShell::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: var(--cm-head-row, 0px); background: var(--blue-wash); pointer-events: none;
}
/* Cells stop growing past --cm-cell-max, so a 4-section chapter is a compact
   grid rather than four long bars; the head and body tables share the width. */
.chapterMotifs .chapterMotifs__table{
  width: min(100%, calc(var(--cm-name) + var(--cm-n) * var(--cm-cell-max)));
  min-width: calc(var(--cm-name) + var(--cm-n) * var(--cm-cell-min));
}
/* Ordering subheads and the Selected heading keep their band across the
   whole card when the grid is narrower than it. A shadow, clipped to the
   row's height, paints the band rightwards without adding scroll width. */
.chapterMotifs .chapterMotifs__table tr.chapterMotifs__group > th{
  clip-path: inset(0 -100vw 0 0);
  box-shadow: 0 0 0 100vw var(--overlay-subtle), 0 0 0 100vw var(--cm-card);
}
.chapterMotifs [data-chapter-motifs-pinned] tr.chapterMotifs__group > th{
  box-shadow: 0 0 0 100vw var(--overlay-subtle), 0 0 0 100vw var(--blue-wash), 0 0 0 100vw var(--cm-card);
}
@media (max-width: 760px) {
  /* On a phone the whole block (chips, legend, count, status, labels) ran to
     a third of the screen. Only the section labels and pinned rows stick;
     the chips and status line scroll away with the page. */
  .chapterMotifs .chapterMotifs__sticky{ display: contents; }
  .chapterMotifs .chapterMotifs__sticky > .chapterMotifs__head,
  .chapterMotifs .chapterMotifs__sticky > .paragraphsGrid__status{ background: var(--cm-card); }
  .chapterMotifs .chapterMotifs__headShell{
    position: sticky; top: var(--cm-sticky-top, 0px); z-index: 3;
    background: var(--cm-card); border-bottom: 1px solid var(--surface-card-border);
  }
  .chapterMotifs{ --cm-name: 9em; }
  .chapterMotifs .chapterMotifs__table{ min-width: calc(var(--cm-name) + var(--cm-n) * var(--cm-cell-min)); }
}


/* ---- Signal: cells ----
   Only what's central gets colour. Primary and Pillar keep today's fills;
   Supporting, Minor and Echo step back to a short tick in their own tier
   colour, fainter down the ramp. The chapter's spine reads at a glance, and
   the rest is there when you look for it. */
.chapterMotifs .chapterMotifs__table tbody th,
.chapterMotifs .chapterMotifs__table tbody td{ border-top: 0; }
.chapterMotifs .chapterMotifs__table tbody th.chapterMotifs__name{ padding: 2px 12px 2px 13px; line-height: 1.2; }
.chapterMotifs [data-chapter-motifs-list] .chapterMotifs__group th{ padding-top: 14px; border-top: 0; }
.chapterMotifs__scroll{ padding-bottom: 6px; }

.chapterMotifs .chapterMotifs__cell,
.chapterMotifs .chapterMotifs__cell[data-tier],
.chapterMotifs .chapterMotifs__cell[data-tier]:hover{ height: 28px; background: none; box-shadow: none; }
.chapterMotifs .chapterMotifs__cell[data-tier]::before{
  content: ""; position: absolute; pointer-events: none; border-radius: 3px; background: var(--sg-c);
}
.chapterMotifs .chapterMotifs__cell--primary::before,
.chapterMotifs .chapterMotifs__cell--pillar::before{ inset: 2px; }
.chapterMotifs .chapterMotifs__cell--primary{ --sg-c: var(--cm-primary); }
.chapterMotifs .chapterMotifs__cell--pillar{ --sg-c: var(--cm-pillar); }
.chapterMotifs .chapterMotifs__cell--supporting::before,
.chapterMotifs .chapterMotifs__cell--minor::before,
.chapterMotifs .chapterMotifs__cell--echo::before{
  left: 50%; top: 50%; width: 14px; height: 3px; transform: translate(-50%, -50%);
}
.chapterMotifs .chapterMotifs__cell--supporting{ --sg-c: color-mix(in srgb, var(--tier-supporting-text) 55%, transparent); }
.chapterMotifs .chapterMotifs__cell--minor{ --sg-c: color-mix(in srgb, var(--tier-minor-text) 38%, transparent); }
.chapterMotifs .chapterMotifs__cell--echo{ --sg-c: color-mix(in srgb, var(--tier-echo-text) 30%, transparent); }
.chapterMotifs .chapterMotifs__cell.is-tierOff::before{ display: none; }
.chapterMotifs .chapterMotifs__link{ z-index: 1; }
.chapterMotifs .chapterMotifs__cell[data-tier]:hover::before{ box-shadow: 0 0 0 1.5px var(--ink); }
.chapterMotifs .chapterMotifs__row:hover th.chapterMotifs__name{ background: linear-gradient(var(--overlay-subtle), var(--overlay-subtle)), var(--cm-card); }
/* A key moment on a tick cell: the mark stands in place of the tick, as on a
   motif's Sections tab, where the mark replaces the tier dot. The tier is
   still in the cell's title. */
.chapterMotifs .chapterMotifs__cell--supporting[data-km]::before,
.chapterMotifs .chapterMotifs__cell--minor[data-km]::before,
.chapterMotifs .chapterMotifs__cell--echo[data-km]::before{ display: none; }
/* Key-moment marks in the grid at 16px (the motif names' size) instead of 13px,
   so they hold their own on a fill or alone in a cell. The 7px box stays,
   so the glyph still centres. */
.chapterMotifs .chapterMotifs__link .sectionsGrid__km{ font-size: 16px; }