@font-face {
  font-family: "PT Sans Local";
  src: url("./assets/PTSans.ttc") format("truetype-collection");
  font-display: swap;
}

:root {
  --ink: #171719;
  --ink-soft: #242426;
  --paper: #f2efec;
  --paper-deep: #e6e1dc;
  --white: #fffdfb;
  --muted: #706d6b;
  --cyan: #31b9ce;
  --blue: #00769b;
  --rose: #f06a7d;
  --magenta: #b10543;
  --gradient: linear-gradient(105deg, #35bfd2 0%, #007596 46%, #ee6b7d 72%, #ad003d 100%);
  --reading-size: 1.2rem;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: "PT Sans Local", "PT Sans", Arial, sans-serif;
}
button, a { font: inherit; }
button { color: inherit; }
.grain {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.topbar {
  height: 86px; padding: 0 32px; display: grid; grid-template-columns: 260px 1fr 260px;
  align-items: center; background: var(--ink); color: white; position: sticky; top: 0; z-index: 15;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: white; cursor: pointer; text-align: left; }
.brand-heart { display: block; width: 37px; height: 32px; object-fit: contain; flex: none; }
.brand-title { font-size: 1.08rem; font-weight: 700; letter-spacing: .015em; white-space: nowrap; }
.series-progress { justify-self: center; display: grid; grid-template-columns: auto minmax(100px, 240px) auto; align-items: center; gap: 14px; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: #aaa7a4; }
.series-progress strong { color: white; font-weight: 500; }
.progress-track { width: 19vw; max-width: 240px; height: 2px; background: #454548; overflow: hidden; }
.progress-track i { display: block; height: 100%; background: var(--gradient); width: 0; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.about-button { justify-self: end; border: 1px solid #4a494b; color: #ddd; background: transparent; padding: 10px 16px; border-radius: 99px; cursor: pointer; transition: .2s; }
.about-button:hover { background: white; color: var(--ink); border-color: white; }

.app-shell { min-height: calc(100vh - 86px); display: grid; grid-template-columns: 118px minmax(480px, 1fr) 380px; }
.chapter-rail { background: var(--ink-soft); color: white; padding: 28px 18px 150px; position: sticky; top: 86px; height: calc(100vh - 86px); overflow: auto; }
.chapter-rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(to bottom, transparent, rgba(23,23,25,.1) 20%), url("./assets/series-visual.jpg") 64% center / auto 130px no-repeat; opacity: .78; pointer-events: none; }
.rail-label { display: flex; flex-direction: column; gap: 5px; padding: 0 8px 20px; border-bottom: 1px solid #3b3a3c; }
.rail-label span { font-size: .8rem; font-weight: 700; letter-spacing: .17em; }.rail-label small { font-size: .7rem; color: #828084; }
#chapterNav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding-top: 18px; }
.chapter-button { aspect-ratio: 1; position: relative; border: 0; border-radius: 12px; background: transparent; color: #939195; cursor: pointer; font-size: .88rem; transition: .25s; }
.chapter-button::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: transparent; transform: translateX(-50%); }
.chapter-button.covered::after { background: var(--rose); box-shadow: 0 0 10px var(--rose); }
.chapter-button:hover { background: #333235; color: white; transform: translateY(-2px); }
.chapter-button.active { background: var(--gradient); color: white; font-weight: 700; box-shadow: 0 8px 24px rgba(0,119,154,.22); }
.chapter-button.active::after { background: white; }

.reader { padding: 54px clamp(40px, 6vw, 100px) 42px; max-width: 980px; width: 100%; margin: 0 auto; }
.reader-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 26px; border-bottom: 1px solid #cbc5c0; }
.eyebrow { margin: 0 0 10px; font-size: .72rem; font-weight: 700; letter-spacing: .19em; color: var(--blue); }
h1 { margin: 0; font-size: clamp(2.8rem, 5vw, 5rem); line-height: .94; letter-spacing: -.045em; }
.chapter-theme { max-width: 600px; margin: 18px 0 0; color: var(--muted); font-size: 1.06rem; line-height: 1.45; }
.reader-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.icon-button, .official-link { border-radius: 99px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: .2s; }
.icon-button { width: 44px; border: 1px solid #c4beb9; background: transparent; }.icon-button:hover { background: var(--white); }
.official-link { gap: 7px; padding: 0 18px; background: var(--ink); color: white; text-decoration: none; }.official-link:hover { background: var(--blue); }
.reader-notice { margin: 30px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; padding: 18px; border: 1px solid #d3cdc8; border-radius: 16px; background: rgba(255,255,255,.48); }
.notice-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--gradient); color: white; font-size: .69rem; font-weight: 700; letter-spacing: .08em; }
.reader-notice p { margin: 0; color: #625f5c; font-size: .88rem; line-height: 1.45; }.reader-notice strong { color: var(--ink); }
.reader-notice button { border: 0; background: transparent; font-size: 1.4rem; color: #96908a; cursor: pointer; }
.reader-notice.dismissed { display: none; }

.section-heading { margin: 38px 0 14px; display: flex; align-items: center; gap: 14px; color: #88827d; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.section-heading::after { content: ""; height: 1px; background: #d3cdc8; flex: 1; }
.passage {
  position: relative; margin: 0 -18px 6px; padding: 16px 18px 16px 56px; border-radius: 14px;
  font-family: Georgia, "Times New Roman", serif; font-size: var(--reading-size); line-height: 1.7; color: #393634;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.passage .verse-number { position: absolute; left: 20px; top: 20px; font-family: "PT Sans Local", sans-serif; font-size: .67rem; font-weight: 700; color: #9a9490; }
.passage.covered { cursor: pointer; background: linear-gradient(90deg, rgba(47,188,207,.11), rgba(240,106,125,.07) 70%, transparent); }
.passage.covered::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 4px; background: var(--gradient); transform: scaleY(.35); transition: transform .25s; }
.passage.covered::after { content: "BEHANDELD"; font-family: "PT Sans Local", sans-serif; font-size: .56rem; letter-spacing: .13em; color: var(--magenta); position: absolute; right: 18px; top: 10px; opacity: 0; transition: .2s; }
.passage.covered:hover, .passage.covered:focus-visible, .passage.active { outline: none; background: linear-gradient(90deg, rgba(47,188,207,.2), rgba(240,106,125,.15) 70%, rgba(255,255,255,.25)); transform: translateX(5px); box-shadow: -8px 0 30px rgba(0,118,155,.08); }
.passage.covered:hover::before, .passage.covered:focus-visible::before, .passage.active::before { transform: scaleY(1); }
.passage.covered:hover::after, .passage.covered:focus-visible::after, .passage.active::after { opacity: 1; }
.passage em { display: block; margin-top: 4px; font-family: "PT Sans Local", sans-serif; font-style: normal; color: #8c8681; font-size: .82rem; line-height: 1.35; }
.passage.placeholder { color: #77716d; }
.source-cta { margin: 26px 0 0; padding: 26px; border-radius: 22px; background: var(--ink); color: white; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; position: relative; }
.source-cta::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -130px; border-radius: 45% 0 45% 45%; background: var(--gradient); opacity: .65; }
.source-cta p { margin: 0; font-size: 1rem; line-height: 1.45; max-width: 500px; position: relative; z-index: 1; }.source-cta strong { display: block; font-size: 1.2rem; }
.source-cta a { position: relative; z-index: 1; flex: none; color: white; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; padding: 11px 17px; text-decoration: none; }
.chapter-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 54px; padding-top: 22px; border-top: 1px solid #cbc5c0; }
.chapter-footer button { border: 0; background: transparent; cursor: pointer; padding: 12px 0; color: #56514e; }.chapter-footer button:last-child { text-align: right; }.chapter-footer button:disabled { opacity: .25; cursor: default; }
.chapter-footer p { margin: 0; color: #9a9490; font-size: .73rem; text-transform: uppercase; letter-spacing: .09em; }

.sermon-panel { background: #e5e0dc; border-left: 1px solid #d0cac5; padding: 40px 26px 28px; position: sticky; top: 86px; height: calc(100vh - 86px); overflow-y: auto; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }.panel-heading > div { display: flex; align-items: center; gap: 8px; }.panel-heading p { margin: 0; font-size: .69rem; font-weight: 700; letter-spacing: .12em; }.panel-heading strong { font-size: .75rem; border: 1px solid #bbb5b0; border-radius: 99px; padding: 4px 8px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 0 rgba(240,106,125,.5); animation: pulse 2.5s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(240,106,125,0); } 100% { box-shadow: 0 0 0 0 rgba(240,106,125,0); } }
.sermon-list { display: grid; gap: 14px; }
.sermon-card { position: relative; padding: 20px; border-radius: 18px; border: 1px solid #cbc4bf; background: rgba(255,255,255,.55); transition: transform .25s, background .25s, box-shadow .25s; overflow: hidden; }
.sermon-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gradient); opacity: .35; transition: .2s; }
.sermon-card.active, .sermon-card:hover { transform: translateY(-3px); background: var(--white); box-shadow: 0 16px 32px rgba(40,36,33,.09); }.sermon-card.active::before, .sermon-card:hover::before { opacity: 1; width: 5px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--blue); font-size: .7rem; font-weight: 700; letter-spacing: .1em; }
.card-top time { color: #97908b; font-weight: 400; letter-spacing: 0; }
.sermon-card h2 { font-size: 1.22rem; line-height: 1.1; margin: 13px 0 8px; }.sermon-card > p { color: #69635f; margin: 0; font-size: .88rem; line-height: 1.45; }
.card-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }.sermon-card:hover .card-reveal, .sermon-card.active .card-reveal, .sermon-card:focus-within .card-reveal { grid-template-rows: 1fr; }.card-reveal > div { overflow: hidden; }
.takeaways { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #ded8d3; }.takeaways strong { display: block; font-size: .68rem; letter-spacing: .1em; margin-bottom: 8px; }.takeaways ul { margin: 0; padding-left: 16px; color: #68625e; font-size: .82rem; line-height: 1.45; }
.watch-link { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 12px; border-top: 1px solid #e1dcd7; color: var(--ink); text-decoration: none; font-size: .8rem; font-weight: 700; }.watch-link span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--gradient); color: white; transition: transform .2s; }.watch-link:hover span { transform: translateX(3px); }
.legend { display: flex; gap: 18px; padding-top: 24px; margin-top: 28px; border-top: 1px solid #cdc7c2; color: #8a8480; font-size: .72rem; }.legend span { display: flex; align-items: center; gap: 6px; }.legend-mark { width: 8px; height: 8px; border-radius: 50%; }.legend-mark.covered { background: var(--rose); }.legend-mark.upcoming { border: 1px solid #9e9792; }
.empty-sermons { text-align: center; padding: 60px 22px; color: #8a8480; }.empty-sermons span { font-size: 2.4rem; color: #aaa39e; }.empty-sermons h2 { font-size: 1.1rem; color: #4a4542; margin: 13px 0 5px; }.empty-sermons p { font-size: .84rem; line-height: 1.4; margin: 0; }

.mobile-dock, .mobile-sheet, .sheet-backdrop { display: none; }
dialog { width: min(680px, calc(100vw - 32px)); padding: 54px; border: 0; border-radius: 28px; background: var(--ink); color: white; box-shadow: 0 30px 90px rgba(0,0,0,.4); overflow: hidden; }
dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(6px); }
dialog h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .95; letter-spacing: -.04em; margin: 0 0 24px; position: relative; z-index: 1; }.dialog-close { position: absolute; right: 22px; top: 18px; border: 0; background: transparent; color: white; font-size: 2rem; cursor: pointer; z-index: 2; }.dialog-stat { display: flex; align-items: center; gap: 16px; margin-top: 30px; }.dialog-stat strong { font-size: 3rem; }.dialog-stat span { color: #bcb9b7; max-width: 180px; line-height: 1.25; }.dialog-art { position: absolute; width: 380px; height: 210px; right: -150px; bottom: -90px; border-radius: 80px 0 80px 80px; background: var(--gradient); transform: rotate(-8deg); opacity: .8; }

.dialog-art { width: 400px; height: 230px; right: -140px; bottom: -92px; background: linear-gradient(110deg, rgba(49,185,206,.35), rgba(177,5,67,.45)), url("./assets/series-visual.jpg") 58% center / cover; opacity: .86; }

@media (max-width: 1180px) {
  .topbar { grid-template-columns: 220px 1fr auto; }.series-progress span { display: none; }
  .app-shell { grid-template-columns: 104px minmax(450px, 1fr) 330px; }.reader { padding-inline: 42px; }.sermon-panel { padding-inline: 20px; }
}
@media (max-width: 900px) {
  .topbar { height: 72px; grid-template-columns: 1fr auto; padding: 0 18px; }.series-progress { display: none; }.about-button { padding: 8px 12px; font-size: .8rem; }
  .app-shell { display: block; min-height: calc(100vh - 72px); }.chapter-rail, .sermon-panel { display: none; }.reader { padding: 36px 24px 110px; max-width: 760px; }.reader-heading { align-items: flex-start; }.reader-actions { flex-direction: column-reverse; align-items: flex-end; }.chapter-footer { margin-top: 38px; }
  .mobile-dock { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 18; padding: 6px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(23,23,25,.94); backdrop-filter: blur(16px); box-shadow: 0 12px 40px rgba(0,0,0,.28); }
  .mobile-dock button { border: 0; background: transparent; color: #ddd; padding: 13px; border-radius: 12px; }.mobile-dock button:hover { background: #343437; }.mobile-dock span { color: var(--cyan); margin-right: 5px; }.mobile-dock b { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 5px; border-radius: 99px; background: var(--rose); color: white; font-size: .67rem; }
  .sheet-backdrop { position: fixed; display: block; inset: 0; z-index: 21; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }.sheet-backdrop[hidden] { display: none; }
  .mobile-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 22; max-height: 78vh; overflow-y: auto; padding: 28px 20px 32px; border-radius: 26px 26px 0 0; background: #e8e3df; transform: translateY(105%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }.mobile-sheet.open { transform: translateY(0); }.sheet-handle { width: 44px; height: 4px; border-radius: 4px; background: #bbb4af; margin: -14px auto 20px; }.sheet-close { position: absolute; right: 17px; top: 16px; border: 0; background: transparent; font-size: 1.7rem; }
  .mobile-sheet #chapterNav { grid-template-columns: repeat(8, 1fr); }.mobile-sheet .chapter-button { background: rgba(255,255,255,.45); }.mobile-sheet .chapter-button.active { background: var(--gradient); }
}
@media (max-width: 560px) {
  .brand { gap: 9px; }.brand-heart { width: 31px; height: 27px; }.brand-title { font-size: .96rem; }.about-button { border: 0; padding-right: 0; }
  .reader { padding: 30px 18px 110px; }.reader-heading { display: block; }.reader-actions { margin-top: 22px; flex-direction: row; justify-content: space-between; }.reader-notice { grid-template-columns: auto 1fr; }.reader-notice button { grid-column: 2; position: absolute; right: 21px; }
  h1 { font-size: 3.2rem; }.passage { margin-inline: -8px; padding-left: 48px; }.passage .verse-number { left: 15px; }.passage.covered::after { display: none; }.source-cta { display: block; }.source-cta a { display: inline-flex; margin-top: 16px; }
  .chapter-footer p { display: none; }.chapter-footer { grid-template-columns: 1fr 1fr; }.chapter-footer button span { display: none; }
  .mobile-sheet #chapterNav { grid-template-columns: repeat(4, 1fr); }.mobile-sheet .sermon-card .card-reveal { grid-template-rows: 1fr; }
  dialog { padding: 44px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Bible-first reader */
.app-shell { grid-template-columns: 118px minmax(0, 1fr); }
.reader { max-width: 960px; padding-inline: clamp(42px, 8vw, 120px); }
.reader-heading { align-items: center; }
.chapter-theme { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .92rem; }
.translation-label { display: inline-grid; place-items: center; min-width: 38px; height: 25px; border-radius: 8px; background: var(--ink); color: white; font-size: .65rem; font-weight: 700; letter-spacing: .08em; }
.reader-actions { flex-direction: column; align-items: flex-end; }
.icon-button.active { color: white; background: var(--ink); border-color: var(--ink); }
.coverage-key { display: flex; align-items: center; gap: 7px; color: #79736f; font-size: .73rem; white-space: nowrap; }
.coverage-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--gradient); box-shadow: 0 0 0 4px rgba(49,185,206,.1); }
.chapter-button:disabled { cursor: not-allowed; color: #555358; opacity: .72; }
.chapter-button:disabled:hover { background: transparent; color: #555358; transform: none; }

.scripture { max-width: 740px; margin: 38px auto 0; }
.scripture-section + .scripture-section { margin-top: 44px; }
.scripture .section-heading { margin: 0 0 17px; color: var(--blue); font-size: .78rem; }
.verse-group { position: relative; }
.verse {
  position: relative;
  margin: 0;
  padding: 5px 18px 5px 56px;
  border-radius: 0;
  color: #34312f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--reading-size);
  line-height: 1.68;
  transition: color .2s, background .24s, box-shadow .24s, transform .24s;
}
.verse + .verse { margin-top: 2px; }
.verse-number { position: absolute; left: 21px; top: .95em; width: 18px; color: #99928d; font-family: "PT Sans Local", sans-serif; font-size: .62em; font-weight: 700; line-height: 1; text-align: right; }
.verse-text em { color: inherit; font-style: italic; }
.verse.covered { --sermon-a: #31b9ce; --sermon-b: #f06a7d; cursor: pointer; background: color-mix(in srgb, var(--sermon-a) 8%, rgba(255,255,255,.42)); }
.verse.covered.sermon-tone-1 { --sermon-a: #f6a84b; --sermon-b: #e85775; }
.verse.covered.sermon-tone-2 { --sermon-a: #836edb; --sermon-b: #30aebf; }
.verse.covered.sermon-tone-3 { --sermon-a: #d45f9c; --sermon-b: #e5a940; }
.verse.covered.range-start { margin-top: 14px; padding-top: 55px; border-radius: 18px 18px 0 0; }
.verse.covered.range-start:first-child { margin-top: 0; }
.verse.covered.range-start .verse-number { top: 5.2em; }
.verse.covered.range-middle { margin-top: 0; }
.verse.covered.range-end { margin-top: 0; padding-bottom: 15px; border-radius: 0 0 18px 18px; }
.verse.covered:hover, .verse.covered:focus-visible, .verse.covered.active { z-index: 1; outline: none; color: #171719; background: color-mix(in srgb, var(--sermon-a) 14%, rgba(255,255,255,.5)); transform: translateX(3px); }
.verse.covered:focus-visible { box-shadow: inset 0 0 0 2px rgba(0,118,155,.25); }
.passage-badge { position: absolute; left: 20px; right: 16px; top: 10px; display: flex; align-items: center; gap: 9px; height: 32px; color: #55504d; font-family: "PT Sans Local", sans-serif; font-size: .67rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.passage-badge strong { display: inline-flex; align-items: center; height: 25px; padding: 0 9px; border-radius: 99px; background: linear-gradient(105deg, var(--sermon-a), var(--sermon-b)); color: white; font-size: .64rem; letter-spacing: .1em; box-shadow: 0 5px 14px color-mix(in srgb, var(--sermon-a) 22%, transparent); }
.passage-badge span { font-weight: 700; color: #3d3937; }
.passage-badge i { margin-left: auto; color: #8a8480; font-style: normal; letter-spacing: .02em; text-transform: none; opacity: 0; transform: translateX(-5px); transition: opacity .2s, transform .2s; }
.verse.covered.range-start:hover .passage-badge i, .verse.covered.range-start:focus-visible .passage-badge i, .verse.covered.range-start.active .passage-badge i { opacity: 1; transform: translateX(0); }

.sermon-backdrop { position: fixed; inset: 0; z-index: 23; background: rgba(15,15,17,.58); backdrop-filter: blur(3px); }
.sermon-backdrop[hidden] { display: none; }
.sermon-popover {
  position: fixed;
  z-index: 24;
  width: min(350px, calc(100vw - 36px));
  max-height: calc(100vh - 122px);
  padding: 25px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 23px;
  background: rgba(28,28,31,.975);
  color: white;
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(9px) scale(.975);
  transform-origin: 20% top;
  transition: opacity .2s, visibility .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.sermon-popover::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gradient); }
.sermon-popover.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.popover-handle { display: none; }
.popover-close { position: absolute; right: 13px; top: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #ccc; font-size: 1.25rem; cursor: pointer; }
.popover-close:hover { background: rgba(255,255,255,.15); color: white; }
.popover-meta { display: flex; align-items: center; gap: 10px; padding-right: 32px; color: #8f8c90; font-size: .69rem; letter-spacing: .06em; text-transform: uppercase; }
.draft-label { padding: 5px 8px; border: 1px solid rgba(240,106,125,.45); border-radius: 99px; color: #ff9aaa; font-weight: 700; }
.popover-reference { margin: 19px 0 7px; color: var(--cyan); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sermon-popover h2 { margin: 0; max-width: 270px; font-size: 1.65rem; line-height: 1.03; letter-spacing: -.025em; }
.sermon-facts { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 13px; color: #dedbd9; font-size: .76rem; }
.sermon-facts span { display: inline-flex; align-items: center; gap: 6px; }
.sermon-facts i { color: var(--cyan); font-style: normal; font-size: .78rem; }
.sermon-facts .fact-pending { color: #8f8c90; }
.sermon-facts .fact-pending i { color: #68666b; }
.popover-summary { margin: 15px 0 0; color: #c8c5c5; font-size: .9rem; line-height: 1.48; }
.popover-section { margin-top: 20px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.11); }
.popover-section h3 { margin: 0 0 10px; color: #8e898d; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; }
.popover-section ul, .popover-section ol { margin: 0; padding-left: 19px; color: #ece9e7; font-size: .86rem; line-height: 1.45; }
.popover-section li + li { margin-top: 7px; }
.questions li::marker { color: var(--rose); font-weight: 700; }
.video-pending { width: 100%; margin-top: 21px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(255,255,255,.055); color: #77757a; cursor: not-allowed; text-align: left; }
.video-pending span { margin-right: 7px; }
.watch-video { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; width: 100%; margin-top: 21px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: linear-gradient(105deg, rgba(49,185,206,.14), rgba(240,106,125,.13)); color: white; text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.watch-video > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gradient); font-size: .68rem; }
.watch-video > span:nth-child(2) { min-width: 0; }
.watch-video strong, .watch-video small { display: block; }
.watch-video strong { font-size: .8rem; }
.watch-video small { margin-top: 2px; overflow: hidden; color: #aaa7aa; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.watch-video i { color: #8f8c90; font-style: normal; }
.watch-video:hover { border-color: rgba(49,185,206,.5); background: linear-gradient(105deg, rgba(49,185,206,.22), rgba(240,106,125,.2)); transform: translateY(-2px); }
.transcript-link { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 10px 3px 2px; color: #aaa7aa; font-size: .76rem; text-decoration: none; }
.transcript-link i { font-style: normal; transition: transform .2s; }
.transcript-link:hover { color: white; }
.transcript-link:hover i { transform: translate(2px, -2px); }
.chapter-footer { max-width: 740px; margin-inline: auto; }

.mobile-chapter-nav { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; padding-top: 18px; }
.sheet-note { margin: 22px 4px 0; color: #77716d; font-size: .84rem; line-height: 1.45; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 104px minmax(0, 1fr); }
  .reader { padding-inline: clamp(38px, 7vw, 82px); }
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .reader { max-width: 780px; padding: 36px 24px 110px; }
  .reader-actions { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 20px; }
  .sermon-popover { inset: auto 0 0; width: 100%; max-height: 82vh; padding: 32px 23px calc(28px + env(safe-area-inset-bottom)); border-radius: 27px 27px 0 0; transform: translateY(105%); opacity: 1; visibility: hidden; }
  .sermon-popover.open { visibility: visible; transform: translateY(0); }
  .popover-handle { display: block; width: 46px; height: 4px; margin: -18px auto 20px; border-radius: 4px; background: #646268; }
  .sermon-popover h2 { max-width: calc(100% - 35px); }
  body.sermon-open { overflow: hidden; }
  .mobile-sheet #chapterNav { display: none; }
}

@media (max-width: 560px) {
  .reader-heading { display: block; }
  .scripture { margin-top: 30px; }
  .verse { padding-left: 47px; padding-right: 10px; line-height: 1.63; }
  .verse-number { left: 13px; }
  .passage-badge { left: 13px; right: 10px; }
  .passage-badge i { display: none; }
  .scripture-section + .scripture-section { margin-top: 37px; }
  .chapter-footer { grid-template-columns: 1fr 1fr; }
  .chapter-footer p { display: none; }
  .mobile-chapter-nav { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}