/* ============================================================
   T.A.E.I.L. — Consolidated stylesheet
   Single-file stylesheet. Link ONLY this file from every page:
     <link rel="stylesheet" href="css/style.css">
   Do not add any other CSS file — everything is merged here.
   ============================================================ */

:root {
  --fd: 'Playfair Display', Georgia, serif;
  --fb: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --bg: #f8f5f0;
  --sur: #faf8f4;
  --sur2: #ffffff;
  --div: #e5dfd6;
  --bor: #d9d2c8;
  --tx: #1a1a2e;
  --txm: #5a5650;
  --txf: #716b64;
  --txi: #f8f5f0;
  --pr: #1b4965;
  --prh: #153a52;
  --prl: #d4e4ee;
  --go: #8c6634;
  --gol: #f0e8d8;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --txs: clamp(.875rem, .82rem + .2vw, 1rem);
  --txsm: clamp(1rem, .93rem + .25vw, 1.125rem);
  --txb: clamp(1.0625rem, 1rem + .28vw, 1.1875rem);
  --txl: clamp(1.25rem, 1.08rem + .7vw, 1.625rem);
  --txxl: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
  --txh: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --tr: 180ms cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"] {
  --bg: #161412; --sur: #1c1a17; --sur2: #211f1c; --div: #2e2b27; --bor: #3a3732;
  --tx: #e8e4de; --txm: #c1bbb4; --txf: #a39c95; --txi: #161412;
  --pr: #78b6d8; --prh: #9bcee6; --prl: #1e3040; --go: #e0ba76; --gol: #2a2218;
}

[data-colour-theme="forest"] {
  --bg: #f4f7f1; --sur: #f8faf6; --sur2: #ffffff; --div: #d9e2d3; --bor: #c7d4be;
  --tx: #1d2b20; --txm: #435844; --txf: #617262; --txi: #f4f7f1;
  --pr: #356859; --prh: #274f43; --prl: #d8ebe2; --go: #795226; --gol: #f4eadb;
}

[data-theme="dark"][data-colour-theme="forest"] {
  --bg: #111a14; --sur: #172119; --sur2: #1c291f; --div: #29352b; --bor: #465848;
  --tx: #e5eee3; --txm: #c2d0c2; --txf: #a0b0a0; --txi: #111a14;
  --pr: #9bceae; --prh: #c0e3c8; --prl: #213b2a; --go: #e5bd7d; --gol: #302618;
}

[data-colour-theme="lavender"] {
  --bg: #f8f5fb; --sur: #fcfaff; --sur2: #ffffff; --div: #e5dff0; --bor: #d7cde5;
  --tx: #28233a; --txm: #574f67; --txf: #756b85; --txi: #f8f5fb;
  --pr: #63508e; --prh: #4e3e73; --prl: #e6dff5; --go: #885527; --gol: #f5e9dc;
}

[data-theme="dark"][data-colour-theme="lavender"] {
  --bg: #191623; --sur: #211d2d; --sur2: #282235; --div: #383044; --bor: #514665;
  --tx: #eee9f4; --txm: #cec4dc; --txf: #aca0bd; --txi: #191623;
  --pr: #c0afe7; --prh: #d7ccf2; --prl: #33294a; --go: #edbd8b; --gol: #36271e;
}

[data-colour-theme="senior"] {
  --fd: Arial, Helvetica, sans-serif; --fb: Arial, Helvetica, sans-serif;
  --bg: #ffffff; --sur: #ffffff; --sur2: #ffffff; --div: #777777; --bor: #414141;
  --tx: #111111; --txm: #222222; --txf: #383838; --txi: #ffffff;
  --pr: #003f91; --prh: #002b66; --prl: #dcecff; --go: #713500; --gol: #fff0db;
  --txs: clamp(1.625rem, 1.55rem + .2vw, 1.75rem);
  --txsm: clamp(1.625rem, 1.55rem + .2vw, 1.75rem);
  --txb: clamp(1.75rem, 1.65rem + .3vw, 2rem);
  --txl: clamp(1.875rem, 1.72rem + .5vw, 2.25rem);
  --txxl: clamp(2.125rem, 1.9rem + .8vw, 2.75rem);
  --txh: clamp(2.5rem, 2.05rem + 1.5vw, 4rem);
  --tr: 0ms;
}

[data-theme="dark"][data-colour-theme="senior"] {
  --bg: #000000; --sur: #111111; --sur2: #1a1a1a; --div: #a8a8a8; --bor: #d0d0d0;
  --tx: #ffffff; --txm: #f0f0f0; --txf: #d0d0d0; --txi: #000000;
  --pr: #8fc7ff; --prh: #c1e0ff; --prl: #123b63; --go: #ffd27a; --gol: #4a3210;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-width: 0; font-family: var(--fb); font-size: var(--txb); color: var(--tx); background: var(--bg); line-height: 1.75; transition: background var(--tr), color var(--tr); }
img { display: block; max-width: 100%; }
p, li { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
::selection { background: var(--prl); color: var(--tx); }
:focus-visible { outline: 3px solid var(--pr); outline-offset: 3px; border-radius: .375rem; }
.pw { width: 100%; max-width: 680px; margin-inline: auto; padding-inline: var(--s6); }

/* Header */
.hdr { position: sticky; top: 0; z-index: 100; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4); padding: var(--s4) var(--s6); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--div); }
.logo { flex: 0 0 auto; font-family: var(--fd); font-size: var(--txsm); font-weight: 700; letter-spacing: .12em; color: var(--pr); text-decoration: none; white-space: nowrap; }
.hnav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s2);

  min-width: 0;
  width: 100%
  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: var(--bor) transparent;
}

/* Keep the navigation links on one horizontal scrolling row. */
.hnav .nl {
  flex: 0 0 auto;
}

/* A visible, subtle scrollbar makes the overflow discoverable. */
.hnav::-webkit-scrollbar {
  height: 6px;
}

.hnav::-webkit-scrollbar-track {
  background: transparent;
}

.hnav::-webkit-scrollbar-thumb {
  background: var(--bor);
  border-radius: 999px;
}

.hnav::-webkit-scrollbar-thumb:hover {
  background: var(--pr);
}
.header-controls { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }
.nl {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--txs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--txm);
  text-decoration: none;
  padding: var(--s2) .625rem;
  border-radius: .5rem;
  transition: color var(--tr), background var(--tr);
  white-space: normal;
  line-height: 1.25;
  min-height: 2.75rem;
  max-width: 8.75rem;
  overflow-wrap: break-word;
}
.nl:hover, .nl.active { color: var(--tx); background: var(--prl); }
.tgl { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 999px; border: 1px solid var(--bor); background: var(--sur); color: var(--txm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color var(--tr), background var(--tr), border-color var(--tr); }
.tgl:hover { color: var(--tx); background: var(--sur2); border-color: var(--pr); }

/* Theme chooser */
.theme-picker { position: relative; flex: 0 0 auto; }
.theme-picker-menu { position: absolute; top: calc(100% + .625rem); right: 0; width: 230px; padding: var(--s3); border: 2px solid var(--bor); border-radius: .75rem; background: var(--sur2); box-shadow: 0 12px 28px rgb(0 0 0 / .20); z-index: 300; }
.theme-picker-menu[hidden] { display: none !important; }
.theme-picker-title { padding: var(--s2) var(--s3); color: var(--txf); font-size: var(--txs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.theme-option { width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 0; border-radius: .5rem; background: transparent; color: var(--tx); font: inherit; font-size: var(--txsm); font-weight: 600; text-align: left; cursor: pointer; }
.theme-option:hover, .theme-option[aria-pressed="true"] { background: var(--prl); color: var(--pr); }
.theme-swatch { width: 20px; height: 20px; flex: 0 0 20px; border: 2px solid var(--bor); border-radius: 999px; }
.theme-swatch-classic { background: linear-gradient(135deg, #1b4965 50%, #b08850 50%); }
.theme-swatch-forest { background: linear-gradient(135deg, #356859 50%, #9a6d38 50%); }
.theme-swatch-lavender { background: linear-gradient(135deg, #63508e 50%, #a06b3e 50%); }
.theme-swatch-senior { background: linear-gradient(135deg, #003f91 50%, #ffffff 50%); border-color: #111111; }
/* Community and membership utility navigation */
.community-nav {
  position: relative;
  flex: 0 0 auto;
}

.community-nav-toggle {
  min-height: 40px;
  padding: .5rem .75rem;
  border: 1px solid var(--bor);
  border-radius: .5rem;
  background: var(--sur);
  color: var(--txm);
  cursor: pointer;
  font: inherit;
  font-size: var(--txs);
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--tr), background var(--tr), border-color var(--tr);
}

.community-nav-toggle:hover,
.community-nav-toggle[aria-expanded="true"] {
  color: var(--tx);
  background: var(--sur2);
  border-color: var(--pr);
}

.community-nav-menu {
  position: absolute;
  top: calc(100% + .625rem);
  right: 0;
  width: min(18rem, calc(100vw - 2rem));
  padding: .5rem;
  border: 2px solid var(--bor);
  border-radius: .75rem;
  background: var(--sur2);
  box-shadow: 0 12px 28px rgb(0 0 0 / .20);
  z-index: 300;
}

.community-nav-menu[hidden] {
  display: none !important;
}

.community-nav-menu a {
  display: block;
  padding: .75rem;
  border-radius: .5rem;
  color: var(--tx);
  font-size: var(--txsm);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.community-nav-menu a:hover,
.community-nav-menu a:focus-visible {
  background: var(--prl);
  color: var(--pr);
}
/* Hero */
.hero { max-width: 1100px; margin-inline: auto; padding: var(--s16) 0 var(--s12); text-align: center; }
.kicker { font-size: var(--txs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--go); margin-bottom: var(--s4); }
.htitle { max-width: 40ch; margin-inline: auto; font-family: var(--fd); font-size: var(--txh); font-weight: 700; line-height: 1.18; color: var(--tx); margin-bottom: var(--s4); }
.hsub { max-width: 58ch; margin: 0 auto var(--s8); font-family: var(--fd); font-size: var(--txl); font-style: italic; color: var(--txm); line-height: 1.6; }
.hline { width: 60px; height: 3px; margin: 0 auto; background: var(--go); border-radius: 2px; }
.hero-ctas { display: flex; justify-content: center; gap: var(--s4); margin-top: var(--s8); flex-wrap: wrap; }

/* Buttons */
.btn { min-height: 44px; padding: var(--s3) var(--s6); border: 1px solid transparent; border-radius: .5rem; font-size: var(--txsm); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--tr), background var(--tr), color var(--tr); cursor: pointer; }
.btn.primary { background: var(--pr); color: #fff; border-color: var(--pr); }
.btn.primary:hover { background: var(--prh); transform: translateY(-2px); }
.btn.secondary { color: var(--pr); border-color: var(--bor); background: transparent; }
.btn.secondary:hover { background: var(--sur); }
.btn.tertiary { background: var(--gol); color: var(--go); border-color: var(--bor); }
.btn.tertiary:hover { background: var(--sur2); }

/* Homepage hero CTA colour swap (Read Our Story = royal blue / gold text,
   Support the Build = warm parchment secondary) */
.hero-ctas .btn.cta-swap-primary { background: #173f7a; color: #f2d57e; border-color: #173f7a; box-shadow: 0 5px 14px rgb(16 47 96 / .24); }
.hero-ctas .btn.cta-swap-primary:hover { background: #102f60; color: #ffe7a0; border-color: #102f60; transform: translateY(-2px); }
.hero-ctas .btn.cta-swap-secondary { background: #eadcc4; color: #6f512e; border-color: #c9ad82; }
.hero-ctas .btn.cta-swap-secondary:hover { background: #e1cfb1; color: #4f381d; border-color: #b89669; }

/* Content */
.content-section { margin-bottom: var(--s12); }
.content-section h1, .content-section h2 { font-family: var(--fd); font-weight: 700; color: var(--tx); line-height: 1.2; }
.content-section h1 { font-size: var(--txh); margin: var(--s12) 0 var(--s6); }
.content-section h2 { font-size: var(--txxl); margin: var(--s12) 0 var(--s4); }
.content-section h2:first-child { margin-top: 0; }
.content-section h3 { font-family: var(--fd); font-size: var(--txl); line-height: 1.3; margin: var(--s8) 0 var(--s3); color: var(--pr); }
.content-section h4 { font-family: var(--fd); font-size: var(--txl); line-height: 1.3; margin: var(--s6) 0 var(--s3); color: var(--pr); }
.content-section p { max-width: 68ch; font-size: var(--txb); color: var(--tx); line-height: 1.85; margin-bottom: var(--s6); }
.content-section p em { font-family: var(--fd); color: var(--txm); }
.content-section p strong { font-weight: 700; color: var(--tx); }

.pillars, .features-grid, .different-features { display: grid; gap: var(--s6); margin-top: var(--s8); grid-template-columns: 1fr; }
.pillar, .feature-card, .feature-item { padding: var(--s6); background: var(--sur); border: 1px solid var(--bor); border-radius: .75rem; }
.pillar, .feature-card { text-align: center; display: flex; flex-direction: column; }
.pillar h3, .feature-card h3, .feature-item h3 { margin-top: 0; font-family: var(--fd); font-size: var(--txl); font-weight: 700; color: var(--pr); }
.pillar p, .feature-card p, .feature-item p { max-width: none; margin-bottom: 0; }
.audience-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin: var(--s6) 0; }
.audience-list li { position: relative; max-width: 68ch; padding-left: var(--s6); color: var(--tx); font-size: var(--txb); }
.audience-list li::before { content: '—'; position: absolute; left: 0; color: var(--go); font-weight: 700; }
blockquote { margin: var(--s8) 0; padding: var(--s4) var(--s6); border-left: 4px solid var(--go); border-radius: 0 .75rem .75rem 0; background: var(--gol); }
blockquote, blockquote p { font-family: var(--fd); font-size: var(--txl); font-style: italic; color: var(--tx); line-height: 1.6; }
blockquote p { margin: 0; }
.trust-strip { display: flex; justify-content: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s8) 0; margin: var(--s12) 0; border-top: 1px solid var(--div); border-bottom: 1px solid var(--div); }
.trust-strip span { padding: var(--s2) var(--s4); font-size: var(--txsm); color: var(--txm); background: var(--sur); border: 1px solid var(--bor); border-radius: .5rem; }

/* Feature-detail progressive disclosure (What We're Building page) */
.feature-detail-toggle {
  align-self: flex-start;
  margin-top: 1rem;
  padding: .25rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--pr);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}
.feature-detail-toggle:hover { opacity: .78; }
.feature-detail-toggle:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.feature-detail-panel {
  margin: 0 0 2.25rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--bor);
  border-left: 4px solid var(--go);
  border-radius: .75rem;
  background: var(--sur);
}
.feature-detail-panel[hidden] { display: none; }
.feature-detail-panel h3, .feature-detail-panel h4 { margin-top: 1.7rem; }
.feature-detail-panel h3:first-child, .feature-detail-panel h4:first-child { margin-top: 0; }
.feature-detail-panel h3 { color: var(--pr); }
.feature-detail-panel p, .feature-detail-panel li { max-width: 75ch; }
.feature-detail-panel ul { padding-left: 1.25rem; margin: 0 0 var(--s6); }
.feature-detail-panel li { margin-bottom: .65rem; }
.feature-detail-panel .draft-note { font-size: var(--txs); font-style: italic; color: var(--txf); border-top: 1px dashed var(--bor); margin-top: 1.7rem; padding-top: .85rem; }
@media (prefers-reduced-motion: no-preference) { .feature-detail-panel { scroll-margin-top: 1.5rem; } }

/* What We're Building page: wider desktop layout, closer to header margins.
   Applies via a body selector so no extra HTML class is required. */
body:has(.feature-detail-toggle) .pw { width: min(1500px, calc(100vw - 4rem)); max-width: none; }
body:has(.feature-detail-toggle) .content-section { max-width: 100%; }
body:has(.feature-detail-toggle) .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
body:has(.feature-detail-toggle) .feature-card { min-width: 0; }
@media (max-width: 1200px) {
  body:has(.feature-detail-toggle) .pw { width: min(1120px, calc(100vw - 3rem)); }
  body:has(.feature-detail-toggle) .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body:has(.feature-detail-toggle) .pw { width: 100%; padding-inline: 1rem; }
  body:has(.feature-detail-toggle) .features-grid { grid-template-columns: 1fr; }
}

/* Footer */
.ftr { margin-top: var(--s10); padding: var(--s8) var(--s6); border-top: 1px solid var(--div); }
.footer-columns { display: grid; grid-template-columns: 1fr; gap: var(--s8); margin-bottom: var(--s6); }
.footer-column h3 { font-family: var(--fd); font-size: var(--txl); color: var(--pr); margin-bottom: var(--s4); }
.footer-column ul { list-style: none; }
.footer-column li { margin-bottom: var(--s2); font-size: var(--txsm); }
.footer-column a { color: var(--txm); text-decoration: none; }
.footer-column a:hover { color: var(--pr); text-decoration: underline; }
.footer-contact { font-size: var(--txsm); color: var(--txm); text-align: center; margin-bottom: var(--s3); }
.footer-contact a { color: var(--pr); }
.footer-trust-line, .urgent-help-note { font-size: var(--txsm); color: var(--txf); text-align: center; }
.footer-trust-line { margin-bottom: var(--s4); }
.urgent-help-note { padding-top: var(--s4); border-top: 1px solid var(--div); }

/* Rotating quote base (About page and homepage share this structure) */
.quote-rotator {
  position: relative;
  width: min(100%, 780px);
  aspect-ratio: 1200 / 560;
  min-height: 0;
  max-width: none;
  margin: var(--s8) auto var(--s10);
}
.rotating-quote {
  position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(8px);
  transition: opacity 1000ms ease-in-out, transform 1000ms ease-in-out; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box; overflow: hidden;
  padding: 5.75rem clamp(2.5rem, 8vw, 5rem) 3.25rem;
  border: 0; border-radius: 1.25rem;
  background: url("../images/interfaith-memorial-frame.svg") center / 100% 100% no-repeat;
  box-shadow: none; color: #ffe58a; text-shadow: 0 1px 2px rgb(0 0 0 / 1); text-align: center;
}
.rotating-quote.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rotating-quote, .rotating-quote p, .rotating-quote p:first-of-type, .rotating-quote p:last-of-type,
html[data-colour-theme="senior"] .rotating-quote, html[data-colour-theme="senior"] .rotating-quote p,
html[data-colour-theme="senior"] .rotating-quote p:first-of-type, html[data-colour-theme="senior"] .rotating-quote p:last-of-type { color: #ffe58a !important; }
.rotating-quote p:first-of-type { font-family: var(--fd); font-weight: 700; font-size: calc(var(--txl) * 1.4); line-height: 1.3; margin-top: var(--s6); }
.rotating-quote p:last-of-type { font-family: var(--fb); font-weight: 600; font-size: var(--txsm); letter-spacing: .04em; margin-top: var(--s4); margin-bottom: var(--s2); }
@media (max-width: 767px) and (orientation: portrait) {
  .quote-rotator { width: 100%; aspect-ratio: 1200 / 560; min-height: 0; }
  .rotating-quote { padding: clamp(3.6rem, 12vw, 5.2rem) clamp(1.5rem, 6vw, 1.85rem) clamp(1.8rem, 7vw, 2.5rem); }
  .rotating-quote p:first-of-type { font-size: calc(var(--txl) * 1.15); }
}
html[data-colour-theme="senior"] .quote-rotator { min-height: 0; }
html[data-colour-theme="senior"] .rotating-quote p:first-of-type { font-family: var(--fb); line-height: 1.35; }
/* ============================================================
   Homepage hero quote panel — royal-blue top-only frame, warm
   parchment page background, Playwrite Canada typography.
   Scoped to the homepage via body:has(.hero).
   ============================================================ */
body:has(.hero) {
  --bg: #f0e8d8; --sur: #f7f0e4; --sur2: #fffaf1; --div: #ddcfb8; --bor: #d2bea0;
  --pr: #1f4f96; --prh: #163d78; --prl: #dce8f8;
  background: var(--bg);
}
/* Homepage dark mode.
   This must restate every homepage-overridden token because
   body:has(.hero) is more specific than the global dark rule. */
html[data-theme="dark"] body:has(.hero) {
  --bg: #2a2218;
  --sur: #32291d;
  --sur2: #3b3021;
  --div: #4c3d29;
  --bor: #655137;

  --tx: #f2ede5;
  --txm: #d3c9ba;
  --txf: #b6ab9c;
  --txi: #2a2218;

  --pr: #8dbbe8;
  --prh: #b8d8f3;
  --prl: #1d344c;

  --go: #e7c57f;
  --gol: #3a2e20;
}
/* Forest homepage in dark mode */
html[data-theme="dark"][data-colour-theme="forest"] body:has(.hero) {
  --bg: #111a14;
  --sur: #172119;
  --sur2: #1c291f;
  --div: #29352b;
  --bor: #465848;

  --tx: #e5eee3;
  --txm: #c2d0c2;
  --txf: #a0b0a0;
  --txi: #111a14;

  --pr: #9bceae;
  --prh: #c0e3c8;
  --prl: #213b2a;

  --go: #e5bd7d;
  --gol: #302618;
}

/* Lavender homepage in dark mode */
html[data-theme="dark"][data-colour-theme="lavender"] body:has(.hero) {
  --bg: #191623;
  --sur: #211d2d;
  --sur2: #282235;
  --div: #383044;
  --bor: #514665;

  --tx: #eee9f4;
  --txm: #cec4dc;
  --txf: #aca0bd;
  --txi: #191623;

  --pr: #c0afe7;
  --prh: #d7ccf2;
  --prl: #33294a;

  --go: #edbd8b;
  --gol: #36271e;
}
body:has(.hero) .hdr { background: color-mix(in srgb, var(--bg) 94%, transparent); }
body:has(.hero) .pillar, body:has(.hero) .feature-card, body:has(.hero) .feature-item, body:has(.hero) .trust-strip span { background: var(--sur); border-color: var(--bor); }

.hero .quote-rotator {
  width: min(100%, 780px);
  aspect-ratio: 1200 / 560;
  min-height: 0;
  max-width: none;
  margin: var(--s8) auto var(--s2);
  position: relative;
}
.hero .rotating-quote {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  padding: 5.75rem clamp(2.5rem, 8vw, 5rem) 3.25rem;
}

/* Classic (default) — replaces the ".hero .rotating-quote" classic rule */
html:not([data-colour-theme]) .hero .rotating-quote,
html[data-colour-theme="classic"] .hero .rotating-quote {
  background-color: #173f7a;
  background-image: url("../images/interfaith-memorial-top-royal-tall.svg");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.hero .rotating-quote p:first-of-type {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 600; /* or 700 if you want extra weight */
  letter-spacing: 0.01em;
  max-width: 42ch;
  margin: 0;
  line-height: 1.38;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.45rem);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.65);
}
.hero .rotating-quote p:last-of-type {
  font-family: "Playwrite CA", "Playwrite Canada", "Playfair Display", cursive;
  font-weight: 600; max-width: 33ch; margin: .7rem 0 0; line-height: 1.28;
  font-size: clamp(.95rem, .82rem + .5vw, 1.3rem);
}

/* Forest theme — replaces the ".hero .rotating-quote" forest rule */
html[data-colour-theme="forest"] .hero .rotating-quote {
  background: url("../images/interfaith-memorial-top-forest.svg") top center / 100% 100% no-repeat !important;
}
html[data-colour-theme="forest"] body:has(.hero) { --pr: #195f4a; --prh: #104535; --prl: #d8ebe2; }
html[data-colour-theme="forest"] .hero-ctas .btn.cta-swap-primary { background: #195f4a; border-color: #195f4a; color: #f2d57e; box-shadow: 0 5px 14px rgb(8 47 37 / .24); }
html[data-colour-theme="forest"] .hero-ctas .btn.cta-swap-primary:hover { background: #104535; border-color: #104535; color: #ffe7a0; }

/* Lavender (royal velvet) theme — replaces the ".hero .rotating-quote" lavender rule */
html[data-colour-theme="lavender"] .hero .rotating-quote {
  background: url("../images/interfaith-memorial-top-velvet.svg") top center / 100% 100% no-repeat !important;
}
html[data-colour-theme="lavender"] body:has(.hero) { --pr: #632b78; --prh: #47205d; --prl: #eadcf3; }
html[data-colour-theme="lavender"] .hero-ctas .btn.cta-swap-primary { background: #632b78; border-color: #632b78; color: #f2d57e; box-shadow: 0 5px 14px rgb(45 18 63 / .24); }
html[data-colour-theme="lavender"] .hero-ctas .btn.cta-swap-primary:hover { background: #47205d; border-color: #47205d; color: #ffe7a0; }

/* About-page quote card: compact, separate from homepage hero styling. */

.content-section > .quote-rotator .rotating-quote {
  padding: 4.75rem clamp(2rem, 6vw, 4rem) 2.75rem;
  background: url("../images/interfaith-memorial-frame.svg") center / 100% 100% no-repeat;
}

/* About-panel theme frames */
html[data-colour-theme="forest"] .content-section > .quote-rotator .rotating-quote {
  background-image: url("../images/interfaith-memorial-top-forest.svg");
}

html[data-colour-theme="lavender"] .content-section > .quote-rotator .rotating-quote {
  background-image: url("../images/interfaith-memorial-top-velvet.svg");
}

html:not([data-colour-theme]) .content-section > .quote-rotator .rotating-quote,
html[data-colour-theme="classic"] .content-section > .quote-rotator .rotating-quote {
  background-image: url("../images/interfaith-memorial-top-royal-tall.svg");
}
@media (max-width: 767px) and (orientation: portrait) {
  .community-nav-toggle {
    min-height: 40px;
    padding-inline: .625rem;
    font-size: .8rem;
  }

  .community-nav-menu {
    right: -44px;
  }
  .hero .quote-rotator {
    width: 100%;
    aspect-ratio: 1200 / 560;
    min-height: 0;
  }

  .hero .rotating-quote {
    padding: clamp(3.6rem, 12vw, 5.2rem)
             clamp(1.5rem, 6vw, 1.85rem)
             clamp(1.8rem, 7vw, 2.5rem);
  }

  .hero .rotating-quote p:first-of-type {
    max-width: 26ch;
    line-height: 1.3;
  }

  .hero .rotating-quote p:last-of-type {
    max-width: 27ch;
    margin-top: .55rem;
    line-height: 1.25;
  }
}

/* Senior-friendly homepage quote panel: separate tall frame, plain
   high-legibility font, no overflow below the gold border. */
html[data-colour-theme="senior"] .hero .quote-rotator, html[data-colour-theme="senior"] .hero .rotating-quote {
  min-height: 31.25rem !important; height: 31.25rem !important;
}
html[data-colour-theme="senior"] .hero .rotating-quote {
  background: url("../images/interfaith-memorial-top-senior.svg") top center / 100% 100% no-repeat !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box; overflow: hidden; padding: 7.5rem 5rem 5rem;
}
html[data-colour-theme="senior"] .hero .rotating-quote,
html[data-colour-theme="senior"] .hero .rotating-quote p,
html[data-colour-theme="senior"] .hero .rotating-quote p:first-of-type,
html[data-colour-theme="senior"] .hero .rotating-quote p:last-of-type {
  font-family: Arial, Helvetica, sans-serif !important; font-style: normal !important; text-shadow: none !important;
}
html[data-colour-theme="senior"] .hero .rotating-quote p:first-of-type {
  max-width: 24ch; margin: 0; font-size: clamp(2.1rem, 1.75rem + 1.2vw, 3.15rem); font-weight: 750; line-height: 1.25; color: #000000 !important;
}
html[data-colour-theme="senior"] .hero .rotating-quote p:last-of-type {
  max-width: 27ch; margin: 1rem 0 0; font-size: clamp(1.25rem, 1.05rem + .55vw, 1.65rem); font-weight: 750; line-height: 1.3; color: #173d34 !important;
}
@media (max-width: 767px) and (orientation: portrait) {
  html[data-colour-theme="senior"] .hero .quote-rotator, html[data-colour-theme="senior"] .hero .rotating-quote { min-height: 26rem !important; height: 26rem !important; }
  html[data-colour-theme="senior"] .hero .rotating-quote { padding: 6.15rem 2.9rem 4.3rem; }
  html[data-colour-theme="senior"] .hero .rotating-quote p:first-of-type { max-width: 20ch; font-size: clamp(1.7rem, 1.4rem + .9vw, 2.25rem); }
  html[data-colour-theme="senior"] .hero .rotating-quote p:last-of-type { max-width: 23ch; font-size: clamp(1.05rem, .9rem + .45vw, 1.35rem); }
}

/* Senior presentation (site-wide accessibility adjustments) */
[data-colour-theme="senior"] body, [data-colour-theme="senior"] .content-section p, [data-colour-theme="senior"] .audience-list li,
[data-colour-theme="senior"] .feature-card p, [data-colour-theme="senior"] .feature-item p, [data-colour-theme="senior"] .pillar p { font-size: var(--txb); line-height: 1.95; letter-spacing: .01em; }
[data-colour-theme="senior"] .content-section h1, [data-colour-theme="senior"] .content-section h2, [data-colour-theme="senior"] .content-section h3, [data-colour-theme="senior"] .htitle, [data-colour-theme="senior"] .logo, [data-colour-theme="senior"] blockquote, [data-colour-theme="senior"] blockquote p { font-family: var(--fb); font-style: normal; letter-spacing: normal; }
[data-colour-theme="senior"] .content-section h2 { padding-bottom: var(--s2); border-bottom: 2px solid var(--bor); }
[data-colour-theme="senior"] .pillar, [data-colour-theme="senior"] .feature-card, [data-colour-theme="senior"] .feature-item, [data-colour-theme="senior"] blockquote, [data-colour-theme="senior"] .trust-strip span { border-width: 2px; }
[data-colour-theme="senior"] .tgl { width: 52px; height: 52px; flex-basis: 52px; border-width: 2px; }
[data-colour-theme="senior"] .tgl svg { width: 23px; height: 23px; }
[data-colour-theme="senior"] .btn { font-size: var(--txsm); min-height: 60px; padding: .875rem 1.375rem; border-width: 2px; }
[data-colour-theme="senior"] .theme-option { min-height: 60px; }
[data-colour-theme="senior"] .logo { font-size: var(--txb); }
[data-colour-theme="senior"] .kicker, [data-colour-theme="senior"] .nl, [data-colour-theme="senior"] .tb, [data-colour-theme="senior"] .footer-trust-line, [data-colour-theme="senior"] .urgent-help-note, [data-colour-theme="senior"] .theme-picker-title, [data-colour-theme="senior"] .theme-option, [data-colour-theme="senior"] .trust-strip span, [data-colour-theme="senior"] .footer-column li, [data-colour-theme="senior"] .footer-column a { font-size: var(--txs); }
[data-colour-theme="senior"] .pw { max-width: min(980px, calc(100vw - 2.5rem)); }
[data-colour-theme="senior"] .content-section p, [data-colour-theme="senior"] .audience-list li { max-width: 82ch; }
[data-colour-theme="senior"] .hero { max-width: 1100px; }
[data-colour-theme="senior"] .htitle { max-width: 42ch; }
[data-colour-theme="senior"] .theme-picker-menu { width: 300px; }
[data-colour-theme="senior"] .theme-swatch { width: 24px; height: 24px; flex-basis: 24px; }
[data-colour-theme="senior"] :focus-visible { outline: 4px solid var(--go); outline-offset: 4px; }
[data-theme="dark"][data-colour-theme="senior"] .btn.primary { color: #000; }

/* Compact senior navigation/tabs — clean 2-line wrapping with generous spacing */
html[data-colour-theme="senior"] .hnav {
  gap: 1.25rem; /* Generous gap between tab buttons so they never touch */
  padding-block: 0.35rem;
}
html[data-colour-theme="senior"] .tabs {
  gap: 1.25rem;
}
html[data-colour-theme="senior"] .nl {
  font-size: calc(var(--txs) * .9); /* Retains your exact large senior font size */
  line-height: 1.45;                /* Increased so line 1 and line 2 never collide vertically */
  min-height: 64px;                 /* Allows comfortable room for 2 full lines of large text */
  max-width: 14rem;                 /* Increased from 8rem to 14rem so words wrap cleanly at natural breaks */
  padding: 0.6rem 1rem;             /* Comfortable padding around the text */
  white-space: normal;              /* Allows two-line wrapping as before */
  overflow-wrap: normal;            /* Prevents breaking words in half awkwardly */
  word-break: normal;
}
html[data-colour-theme="senior"] .tb {
  font-size: calc(var(--txs) * .9);
  line-height: 1.45;
  min-height: 64px;
  min-width: 180px;
  padding: 0.6rem 1.25rem;
  white-space: normal;
}
/* Portrait mobile */
@media (max-width: 767px) and (orientation: portrait) {
  .pw { padding-inline: var(--s4); }
  .hdr { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s3) var(--s4); }
  .hnav { display: none; }
  .header-controls { justify-content: flex-end; }
  .hero { padding: var(--s12) 0 var(--s10); }
  .htitle { max-width: 28ch; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .theme-picker-menu { right: -44px; }
  html[data-colour-theme="senior"] .hdr { grid-template-columns: 1fr auto; gap: var(--s3); }
  html[data-colour-theme="senior"] .theme-picker-menu { right: -56px; width: min(300px, calc(100vw - 1rem)); }
  html[data-colour-theme="senior"] .hero, html[data-colour-theme="senior"] .content-section { text-align: left; }
}

/* Landscape phones and tablets */
@media (min-width: 568px) and (orientation: landscape), (min-width: 768px) {
  .pw { max-width: min(1120px, calc(100vw - 4rem)); padding-inline: var(--s8); }
  .content-section { max-width: 920px; margin-inline: auto; }
  .content-section p, .audience-list li { max-width: 76ch; }
  .pillars, .features-grid, .different-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-colour-theme="senior"] .pw { max-width: min(1340px, calc(100vw - 4rem)); }
  html[data-colour-theme="senior"] .content-section { max-width: 1175px; }
  html[data-colour-theme="senior"] .content-section p, html[data-colour-theme="senior"] .audience-list li { max-width: 91ch; }
  html[data-colour-theme="senior"] .hero { max-width: 1200px; }
  html[data-colour-theme="senior"] .htitle { max-width: 44ch; }
}

/* Desktop */
@media (min-width: 1024px) {
  .pw { max-width: min(1240px, calc(100vw - 6rem)); padding-inline: var(--s10); }
  .content-section { max-width: 980px; }
  .content-section p, .audience-list li { max-width: 80ch; }
  .pillars, .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .different-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html[data-colour-theme="senior"] .pw { max-width: min(1490px, calc(100vw - 6rem)); }
  html[data-colour-theme="senior"] .content-section { max-width: 1175px; }
  html[data-colour-theme="senior"] .hero { max-width: 1280px; }
  html[data-colour-theme="senior"] .htitle { max-width: 46ch; }
}

@media (min-width: 1440px) {
  .pw { max-width: min(1360px, calc(100vw - 8rem)); }
  .content-section { max-width: 1040px; }
  .content-section p, .audience-list li { max-width: 82ch; }
  html[data-colour-theme="senior"] .pw { max-width: min(1630px, calc(100vw - 8rem)); }
  html[data-colour-theme="senior"] .content-section { max-width: 1250px; }
  html[data-colour-theme="senior"] .content-section p, html[data-colour-theme="senior"] .audience-list li { max-width: 94ch; }
}

@media (prefers-reduced-motion: reduce) { .rotating-quote { transition: none; } }

@media print {
  .hdr, .tabs, .tgl, .theme-picker { display: none !important; }
  body { font-size: 11pt; background: #fff; color: #000; }
}

/* ============================================================
   About quote panel — match the homepage hero panel exactly.
   ============================================================ */

/* Same box dimensions and margins as .hero .quote-rotator */
.content-section > .quote-rotator {
  width: min(100%, 780px);
  aspect-ratio: 1200 / 560;
  min-height: 0;
  max-width: none;
  margin: var(--s8) auto var(--s2);
  position: relative;
}

/* Same layout/padding as .hero .rotating-quote */
.content-section > .quote-rotator .rotating-quote {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  padding: 5.75rem clamp(2.5rem, 8vw, 5rem) 3.25rem;
}

/* Same default / Classic frame as Homepage */
html:not([data-colour-theme]) .content-section > .quote-rotator .rotating-quote,
html[data-colour-theme="classic"] .content-section > .quote-rotator .rotating-quote {
  background-color: #173f7a;
  background-image: url("../images/interfaith-memorial-top-royal-tall.svg");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Same Forest frame as Homepage */
html[data-colour-theme="forest"] .content-section > .quote-rotator .rotating-quote {
  background: url("../images/interfaith-memorial-top-forest.svg") top center / 100% 100% no-repeat !important;
}

/* Same Lavender frame as Homepage */
html[data-colour-theme="lavender"] .content-section > .quote-rotator .rotating-quote {
  background: url("../images/interfaith-memorial-top-velvet.svg") top center / 100% 100% no-repeat !important;
}

/* ---- Colour tokens: classic Win95 grey desktop + navy title bar ---- */
[data-colour-theme="retro"] {
  --fd: "MS Sans Serif", "Tahoma", "Segoe UI", Geneva, Verdana, sans-serif;
  --fb: "MS Sans Serif", "Tahoma", "Segoe UI", Geneva, Verdana, sans-serif;

  --bg: #008080;              /* teal desktop background */
  --sur: #c0c0c0;             /* classic Win95 grey */
  --sur2: #dfdfdf;            /* lighter grey panel fill */
  --div: #808080;             /* mid grey divider */
  --bor: #000000;             /* hard black borders */

  --tx: #000000;
  --txm: #1a1a1a;
  --txf: #3a3a3a;
  --txi: #ffffff;

  --pr: #000080;              /* navy title-bar blue */
  --prh: #0a0a6e;
  --prl: #c0c0c0;

  --go: #808000;              /* olive accent, in place of gold */
  --gol: #ffffe1;             /* pale tooltip-yellow */

  --tr: 0ms;                  /* snappy, no smooth transitions */
}

[data-theme="dark"][data-colour-theme="retro"] {
  /* Retro theme intentionally ignores dark mode — Win95 had one
     desktop look. Force the light retro palette regardless of the
     dark-mode toggle so the aesthetic stays authentic. */
  --bg: #008080; --sur: #c0c0c0; --sur2: #dfdfdf; --div: #808080; --bor: #000000;
  --tx: #000000; --txm: #1a1a1a; --txf: #3a3a3a; --txi: #ffffff;
  --pr: #000080; --prh: #0a0a6e; --prl: #c0c0c0;
  --go: #808000; --gol: #ffffe1;
}

/* ---- Global square-corner, bevelled aesthetic ---- */
html[data-colour-theme="retro"] * {
  border-radius: 0 !important;
}

html[data-colour-theme="retro"] body {
  background: var(--bg);
}

/* ---- Header reads like a Win95 title bar ---- */
html[data-colour-theme="retro"] .hdr {
  background: var(--pr);
  border-bottom: 2px solid #000000;
  box-shadow: inset 0 -2px 0 #000020;
  backdrop-filter: none;
}
html[data-colour-theme="retro"] .logo {
  color: #ffffff;
  font-weight: 700;
}
html[data-colour-theme="retro"] .nl {
  color: #ffffff;
  border: 1px solid transparent;
}
html[data-colour-theme="retro"] .nl:hover,
html[data-colour-theme="retro"] .nl.active {
  background: var(--sur);
  color: #000000;
  border: 2px outset #ffffff;
}

/* ---- Bevelled "3D" buttons, panels, and cards ---- */
html[data-colour-theme="retro"] .btn,
html[data-colour-theme="retro"] .tgl,
html[data-colour-theme="retro"] .community-nav-toggle,
html[data-colour-theme="retro"] .theme-option {
  background: var(--sur);
  color: #000000;
  border: 2px outset #ffffff;
  box-shadow: none;
  font-weight: 700;
}
html[data-colour-theme="retro"] .btn:hover,
html[data-colour-theme="retro"] .tgl:hover,
html[data-colour-theme="retro"] .community-nav-toggle:hover {
  background: var(--sur2);
}
html[data-colour-theme="retro"] .btn:active,
html[data-colour-theme="retro"] .tgl:active {
  border-style: inset;
}
html[data-colour-theme="retro"] .btn.primary {
  background: var(--sur);
  color: #000000;
  border-color: #ffffff;
}

html[data-colour-theme="retro"] .pillar,
html[data-colour-theme="retro"] .feature-card,
html[data-colour-theme="retro"] .feature-item,
html[data-colour-theme="retro"] .theme-picker-menu,
html[data-colour-theme="retro"] .community-nav-menu,
html[data-colour-theme="retro"] .feature-detail-panel,
html[data-colour-theme="retro"] .example-reflection-card {
  background: var(--sur2);
  border: 2px solid #000000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
}

html[data-colour-theme="retro"] blockquote {
  background: var(--gol);
  border-left: 4px solid #000000;
  border-radius: 0;
}

/* ---- Sunken "input-well" look for the quote panel ---- */
html[data-colour-theme="retro"] .quote-rotator .rotating-quote,
html[data-colour-theme="retro"] .hero .rotating-quote {
  background: var(--sur2) !important;
  border: 2px inset #ffffff;
  color: #000000 !important;
  text-shadow: none !important;
  font-family: var(--fb) !important;
  font-style: normal !important;
}
html[data-colour-theme="retro"] .rotating-quote p:first-of-type,
html[data-colour-theme="retro"] .hero .rotating-quote p:first-of-type {
  color: #000080 !important;
  font-family: var(--fb) !important;
  font-style: normal !important;
}
html[data-colour-theme="retro"] .rotating-quote p:last-of-type,
html[data-colour-theme="retro"] .hero .rotating-quote p:last-of-type {
  color: #000000 !important;
}

/* ---- Trust strip / footer read as status-bar chips ---- */
html[data-colour-theme="retro"] .trust-strip span {
  background: var(--sur);
  border: 2px inset #ffffff;
}
html[data-colour-theme="retro"] .ftr {
  border-top: 2px solid #000000;
}

/* ---- Theme swatch icon shown in the picker menu ---- */
.theme-swatch-retro {
  background: linear-gradient(135deg, #008080 50%, #c0c0c0 50%);
  border-color: #000000;
}
/* ============================================================
   T.A.E.I.L. Intentional Entry Portal Styles (Final Clean)
   ============================================================ */

/* Utility bar */
.entry-threshold-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0.5rem 1rem;
  background: var(--sur);
  border-bottom: 1px solid var(--div);
  font-size: var(--txs);
  color: var(--txm);
}
.entry-threshold-bar-left {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.entry-threshold-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.entry-threshold-bar-btn {
  background: transparent;
  border: 1px solid var(--bor);
  border-radius: 0.375rem;
  padding: 0.25rem 0.65rem;
  font-size: var(--txs);
  color: var(--tx);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: background var(--tr), color var(--tr);
}
.entry-threshold-bar-btn:hover {
  background: var(--prl);
  color: var(--pr);
}

/* Modal dialog overlay */
.entry-threshold-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(22, 20, 18, 0.82);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}
.entry-threshold-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.entry-threshold-modal {
  width: 100%;
  max-width: 620px;
  background: var(--sur);
  border: 1px solid var(--bor);
  border-top: 4px solid var(--go);
  border-radius: 1rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  color: var(--tx);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.entry-threshold-kicker {
  font-size: var(--txs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--go);
  margin: 0;
}
.entry-threshold-title {
  font-family: var(--fd);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--tx);
  margin: 0;
}
.entry-threshold-verse {
  font-family: var(--fd);
  font-size: var(--txl);
  font-style: italic;
  line-height: 1.6;
  color: var(--tx);
  margin: 0.25rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--go);
}
.entry-threshold-explanation {
  font-size: var(--txsm);
  color: var(--txm);
  line-height: 1.7;
  margin: 0;
}
.entry-threshold-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s2);
}
.entry-threshold-controls .btn {
  min-height: 46px;
  font-size: var(--txsm);
  padding: var(--s2) var(--s4);
}
.entry-threshold-btn-primary {
  background: var(--pr);
  color: #ffffff;
  border: 1px solid var(--pr);
  border-radius: 0.5rem;
  cursor: pointer;
}
.entry-threshold-btn-primary:hover {
  background: var(--prh);
}
.entry-threshold-btn-secondary {
  background: var(--sur2);
  color: var(--tx);
  border: 1px solid var(--bor);
  border-radius: 0.5rem;
  cursor: pointer;
}
.entry-threshold-btn-secondary:hover {
  background: var(--prl);
  color: var(--pr);
}
.entry-threshold-btn-skip {
  background: transparent;
  color: var(--txm);
  border: 1px solid var(--bor);
  border-radius: 0.5rem;
  cursor: pointer;
}
.entry-threshold-btn-skip:hover {
  background: var(--sur2);
  color: var(--tx);
}

/* Preferences & Selectors */
.entry-threshold-options {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--div);
  font-size: var(--txs);
  color: var(--txm);
}
.entry-threshold-setting-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.entry-threshold-setting-label {
  font-weight: 700;
  color: var(--tx);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}
.entry-threshold-radios-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.entry-threshold-radios-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
@media (max-width: 500px) {
  .entry-threshold-radios-grid {
    grid-template-columns: 1fr;
  }
}
.entry-threshold-radio-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  background: var(--sur2);
  border: 1px solid var(--bor);
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: var(--txs);
  color: var(--tx);
}
.entry-threshold-radio-option:hover {
  border-color: var(--pr);
}
.entry-threshold-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}
.entry-threshold-checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--pr);
}
.entry-threshold-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s2);
  font-size: var(--txs);
  color: var(--txf);
}
.entry-threshold-crisis-link {
  color: var(--txm);
  text-decoration: underline;
}
.entry-threshold-crisis-link:hover {
  color: var(--pr);
}

/* ============================================================
   Full-Screen 20-Second Portal Animation Layer
   ============================================================ */
.entry-portal-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.entry-portal-layer.active {
  opacity: 1;
  pointer-events: auto;
}

/* Central Portal Stage */
.entry-portal-stage {
  position: relative;
  width: min(65vw, 380px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Continuous Expanding Golden Rings (10s waves) */
.entry-portal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid rgba(242, 213, 126, 0.75);
  box-shadow: 0 0 45px rgba(242, 213, 126, 0.4);
  transform: scale(0.2);
  opacity: 0;
}
.entry-portal-layer.active .entry-portal-ring-1 {
  animation: portalExpandContinuous 10s cubic-bezier(0.12, 0.45, 0.25, 1) infinite;
  animation-delay: 0s;
}
.entry-portal-layer.active .entry-portal-ring-2 {
  animation: portalExpandContinuous 10s cubic-bezier(0.12, 0.45, 0.25, 1) infinite;
  animation-delay: 2.5s;
}
.entry-portal-layer.active .entry-portal-ring-3 {
  animation: portalExpandContinuous 10s cubic-bezier(0.12, 0.45, 0.25, 1) infinite;
  animation-delay: 5s;
}
.entry-portal-layer.active .entry-portal-ring-4 {
  animation: portalExpandContinuous 10s cubic-bezier(0.12, 0.45, 0.25, 1) infinite;
  animation-delay: 7.5s;
}

@keyframes portalExpandContinuous {
  0% { transform: scale(0.25); opacity: 0.85; }
  50% { opacity: 0.65; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Luminous Central Core */
.entry-portal-core {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%, #f2d57e 40%, rgba(217, 160, 91, 0) 75%);
  box-shadow: 0 0 60px rgba(242, 213, 126, 0.8);
  animation: portalCorePulse 6s ease-in-out infinite alternate;
}
@keyframes portalCorePulse {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 1; }
}

/* Background Atmosphere Mist */
.entry-portal-mist {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.5;
  animation: portalMistDrift 14s ease-in-out infinite alternate;
}
@keyframes portalMistDrift {
  0% { transform: scale(0.9); opacity: 0.35; }
  100% { transform: scale(1.2); opacity: 0.6; }
}

/* Wide Cinematic Lower-Third Presentation */
.entry-portal-text-container {
  position: absolute;
  bottom: clamp(2.5rem, 8vh, 5.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: min(94vw, 1150px);
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: 1.5rem;
  pointer-events: none;
}

.entry-portal-verse-set {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
}
.entry-portal-layer[data-verse="quiet-threshold"] .entry-portal-verse-set[data-verse="quiet-threshold"],
.entry-portal-layer[data-verse="remembrance"] .entry-portal-verse-set[data-verse="remembrance"],
.entry-portal-layer[data-verse="stillness"] .entry-portal-verse-set[data-verse="stillness"] {
  display: block;
}

.entry-portal-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: clamp(1.35rem, 1.15rem + 1.1vw, 2.3rem);
  font-style: italic;
  font-weight: 500;
  color: #fff9ea;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 25px rgba(242, 213, 126, 0.35);
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-wrap: balance;
  opacity: 0;
  pointer-events: none;
}

/* Sequential Reveal Timings */
.entry-portal-layer.active .entry-portal-msg-1 {
  animation: portalMessageFade 6s ease-in-out 0s forwards;
}
.entry-portal-layer.active .entry-portal-msg-2 {
  animation: portalMessageFade 6.5s ease-in-out 6.5s forwards;
}
.entry-portal-layer.active .entry-portal-msg-3 {
  animation: portalMessageFade 6.5s ease-in-out 13.5s forwards;
}

@keyframes portalMessageFade {
  0% { transform: translateY(12px); opacity: 0; }
  15% { transform: translateY(0); opacity: 1; }
  85% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-10px); opacity: 0; }
}

/* Themed Portal Colors */
.entry-portal-layer[data-theme="classic"] {
  background: radial-gradient(circle at center, #1b3a57 0%, #10263b 55%, #050d15 100%);
}
.entry-portal-layer[data-theme="classic"] .entry-portal-mist {
  background: radial-gradient(circle, rgba(242, 213, 126, 0.3) 0%, transparent 70%);
}

.entry-portal-layer[data-theme="forest"] {
  background: radial-gradient(circle at center, #1b4737 0%, #102d23 55%, #06140f 100%);
}
.entry-portal-layer[data-theme="forest"] .entry-portal-mist {
  background: radial-gradient(circle, rgba(155, 206, 174, 0.35) 0%, transparent 70%);
}
.entry-portal-layer[data-theme="forest"] .entry-portal-ring {
  border-color: rgba(242, 213, 126, 0.85);
  box-shadow: 0 0 45px rgba(242, 213, 126, 0.45);
}

.entry-portal-layer[data-theme="lavender"] {
  background: radial-gradient(circle at center, #421c54 0%, #291036 55%, #100617 100%);
}
.entry-portal-layer[data-theme="lavender"] .entry-portal-mist {
  background: radial-gradient(circle, rgba(208, 175, 231, 0.35) 0%, transparent 70%);
}
.entry-portal-layer[data-theme="lavender"] .entry-portal-ring {
  border-color: rgba(242, 213, 126, 0.85);
  box-shadow: 0 0 50px rgba(242, 213, 126, 0.5);
}

.entry-portal-layer[data-theme="retro"] {
  background: #008080;
  image-rendering: pixelated;
}
.entry-portal-layer[data-theme="retro"] .entry-portal-core {
  width: 80px;
  height: 80px;
  border-radius: 0;
  background: #ffff55;
  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 0 0 6px #c0a000, 0 0 0 12px #555500;
  animation: retroPixelCore 1.5s steps(2, start) infinite alternate;
}
@keyframes retroPixelCore {
  0% { transform: scale(0.95); }
  100% { transform: scale(1.1); }
}
.entry-portal-layer[data-theme="retro"] .entry-portal-ring {
  border-radius: 50%;
  border: 6px dashed #ffff55;
  box-shadow: 0 0 0 3px #000000;
}
.entry-portal-layer[data-theme="retro"].active .entry-portal-ring-1 {
  animation: retroPixelExpand 10s steps(12, end) infinite;
  animation-delay: 0s;
}
.entry-portal-layer[data-theme="retro"].active .entry-portal-ring-2 {
  animation: retroPixelExpand 10s steps(12, end) infinite;
  animation-delay: 2.5s;
}
.entry-portal-layer[data-theme="retro"].active .entry-portal-ring-3 {
  animation: retroPixelExpand 10s steps(12, end) infinite;
  animation-delay: 5s;
}
.entry-portal-layer[data-theme="retro"].active .entry-portal-ring-4 {
  animation: retroPixelExpand 10s steps(12, end) infinite;
  animation-delay: 7.5s;
}
@keyframes retroPixelExpand {
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.entry-portal-layer[data-theme="retro"] .entry-portal-msg {
  font-family: 'Courier New', monospace;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-shadow: 2px 2px 0px #000000;
}

/* Skip Button */
.entry-portal-dismiss {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 15;
  background: rgba(15, 23, 35, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #f7f0e4;
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  font-size: var(--txs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background var(--tr), border-color var(--tr);
}
.entry-portal-dismiss:hover {
  background: rgba(27, 58, 87, 0.95);
  border-color: #f2d57e;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .entry-portal-ring,
  .entry-portal-core,
  .entry-portal-mist {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Show only the first verse, still and readable, instead of all three stacked */
  .entry-portal-msg {
    animation: none !important;
    opacity: 0 !important;
    transform: none !important;
  }
  .entry-portal-msg-1 {
    opacity: 1 !important;
  }
  .entry-portal-layer {
    transition: none !important;
  }
}
.lang-picker { position: relative; display: inline-block; }
.lang-toggle { display: inline-flex; align-items: center; gap: .35rem; width: auto; padding-inline: .6rem; }
.lang-toggle #langCode { font-size: .8rem; font-weight: 600; }

.lang-menu { position: absolute; right: 0; top: calc(100% + .4rem);
  margin: 0; padding: .4rem; min-width: 9rem; z-index: 100;
  background: var(--bg, #fff); color: var(--fg, inherit);
  border: 1px solid currentColor; border-radius: .5rem; }
.lang-menu, .lang-menu li { list-style: none; }
.lang-menu li::marker { content: ""; }
.lang-menu[hidden] { display: none; }

.lang-menu button { display: flex; align-items: center; gap: .7rem; width: 100%;
  text-align: left; padding: .5rem .8rem; min-height: 44px;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.lang-menu button[aria-current="true"] { font-weight: 700; }
.lang-menu button:hover, .lang-menu button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.lang-flag { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  overflow: hidden; border: 2px solid currentColor; display: inline-flex; }
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-menu button[aria-current="true"] .lang-flag { box-shadow: 0 0 0 2px var(--accent, currentColor); }

.lang-picker .lang-menu,
.lang-picker .lang-menu li {
  list-style: none !important;
  list-style-image: none !important;
  background-image: none !important;
  margin: 0;
  padding-left: 0;
}
.lang-picker .lang-menu li::before,
.lang-picker .lang-menu li::after,
.lang-picker .lang-menu li::marker {
  content: none !important;
  display: none !important;
}
.lang-picker .lang-menu {
  padding: .4rem;
}

.lang-picker .lang-flag {
  box-sizing: border-box;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid currentColor;
  display: inline-block;
  line-height: 0;
}
.lang-picker .lang-flag svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* TAEIL-CJK-LANG-START */
/* Korean, Simplified Chinese, Traditional Chinese: system CJK fonts, no italics, Korean word-keeping */
html:lang(ko){--fd:"Noto Serif KR","Noto Serif CJK KR","Apple SD Gothic Neo","Malgun Gothic","Nanum Gothic",sans-serif;--fb:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR","Nanum Gothic",sans-serif}
html:lang(zh){--fd:"Noto Serif SC","Noto Serif CJK SC","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--fb:"PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",sans-serif}
html:lang(zh-Hant){--fd:"Noto Serif TC","Noto Serif CJK TC","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC",sans-serif;--fb:"PingFang TC","Microsoft JhengHei","Noto Sans TC","Noto Sans CJK TC",sans-serif}
html:lang(ko) body,html:lang(zh) body,html:lang(zh-Hant) body{line-height:1.85;letter-spacing:0}
html:lang(ko) p,html:lang(ko) li,html:lang(ko) h1,html:lang(ko) h2,html:lang(ko) h3,html:lang(ko) .btn{word-break:keep-all;overflow-wrap:break-word}
html:lang(ko) em,html:lang(zh) em,html:lang(zh-Hant) em,html:lang(ko) i,html:lang(zh) i,html:lang(zh-Hant) i,html:lang(ko) .hsubtitle,html:lang(zh) .hsubtitle,html:lang(zh-Hant) .hsubtitle{font-style:normal!important}
html:lang(ko) .logo,html:lang(zh) .logo,html:lang(zh-Hant) .logo,html:lang(ko) .nl,html:lang(zh) .nl,html:lang(zh-Hant) .nl{letter-spacing:.02em;text-transform:none}
/* seven-item language menu: keep it on screen on short viewports */
.lang-picker .lang-menu{max-height:min(70vh,28rem);overflow-y:auto}
/* TAEIL-CJK-LANG-END */