/* =========================================================================
   Hearing Scripture — stylesheet
   Reading-first. Mobile-first. System serif fallback, Crimson Pro for body.
   ========================================================================= */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fcfbf7;
  color: #1d1c1a;
  font-family: 'Crimson Pro', 'Source Serif Pro', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
  font-size: 1.125rem;          /* 18px on mobile */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
em, i { font-style: italic; }
strong { font-weight: 600; }

a {
  color: #5b1a23;        /* muted burgundy */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: #3a0f17; }
a:focus-visible {
  outline: 2px solid #5b1a23;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 1rem; top: 1rem;
  width: auto; height: auto;
  background: #1d1c1a;
  color: #fcfbf7;
  padding: 0.5rem 0.75rem;
  z-index: 100;
  text-decoration: none;
}

/* ---------- Site header ---------- */
.site-header {
  border-bottom: 1px solid #e5dcc5;
  background: #f5efdf;
}
.site-header__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.site-header__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
}
.site-header__logo {
  width: 52px;
  height: 52px;
  display: block;
  flex-shrink: 0;
}
.site-header__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.site-header__title {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.site-header__tagline {
  font-size: 0.95rem;
  font-style: italic;
  color: #5b574c;
  margin-top: 0.15rem;
}
@media (min-width: 768px) {
  .site-header__logo {
    width: 60px;
    height: 60px;
  }
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.95rem;
}
.site-nav a {
  text-decoration: none;
  color: #3a3833;
  font-weight: 500;
}
.site-nav a:hover { color: #5b1a23; }
.site-nav__cta {
  color: #5b1a23 !important;
  font-weight: 600;
}

/* Nav dropdown group ("Tools" with sub-menu). Clicking the parent link
   navigates to the tools landing page; hovering reveals the dropdown.
   Hover behavior is desktop-only — on touch devices the parent link just
   navigates without ever showing the dropdown. */
.site-nav__group {
  position: relative;
}
.site-nav__group-trigger {
  /* Visual cue that this nav item has more underneath. The caret stays
     small and restrained — same color/weight as the link. */
  position: relative;
}
.site-nav__group-trigger::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.35em;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
  opacity: 0.55;
}
.site-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0.35rem 0 0;
  padding: 0.45rem 0;
  list-style: none;
  background: #fcfbf7;
  border: 1px solid #e5dcc5;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(40, 25, 10, 0.14);
  min-width: 180px;
  z-index: 80;
}
/* Invisible bridge across the gap between trigger and dropdown so the
   cursor can transit downward without losing the hover state. Sits on
   the dropdown so it spans the full dropdown width (not just the
   trigger's narrow width), covering any diagonal cursor path. */
.site-nav__dropdown::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 0.35rem;
}
.site-nav__dropdown li { margin: 0; }
.site-nav__dropdown a {
  display: block;
  padding: 0.45rem 1rem;
  text-decoration: none;
  color: #3a3833;
  font-size: 0.95rem;
  white-space: nowrap;
}
.site-nav__dropdown a:hover {
  background: #f3ebd5;
  color: #5b1a23;
}
/* Hover/focus desktop reveal — hover-capable devices only, so touch
   doesn't get a stuck-open menu. */
@media (hover: hover) and (min-width: 768px) {
  .site-nav__group:hover .site-nav__dropdown,
  .site-nav__group:focus-within .site-nav__dropdown {
    display: block;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid #e5dcc5;
  background: #f5efdf;
  margin-top: 4rem;
  padding: 2.25rem 0 2.5rem;
  font-size: 0.9rem;
  color: #5b574c;
}
.site-footer__inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.site-footer__copy { margin: 0; }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-footer__nav a {
  color: #5b574c;
  text-decoration: none;
}
.site-footer__nav a:hover { color: #5b1a23; text-decoration: underline; }

/* ---------- Home page ---------- */
.home-hero {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid #efeadb;
}
.home-hero__inner {
  max-width: 38rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.home-hero__title {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.home-hero__tagline {
  font-style: italic;
  color: #5b574c;
  font-size: 1.2rem;
  margin: 0 0 1.5rem;
}
.home-hero__lede {
  font-size: 1.1rem;
  line-height: 1.65;
  margin: 0;
}

.home-book-cta {
  background: #f5efdf;
  border-top: 1px solid #e5dcc5;
  border-bottom: 1px solid #e5dcc5;
  padding: 2.5rem 0;
}
.home-book-cta__inner {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
.home-book-cta__cover img {
  max-width: 220px;
  margin: 0 auto;
  box-shadow: 0 4px 18px rgba(60, 40, 20, 0.18);
  border-radius: 2px;
}
.home-book-cta__copy { text-align: center; }
.home-book-cta__kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: #7a5b1c;
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.home-book-cta__heading {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.75rem;
  margin: 0 0 0.25rem;
  line-height: 1.15;
}
.home-book-cta__subtitle {
  font-size: 1.05rem;
  color: #5b574c;
  margin: 0 0 1rem;
}
.home-book-cta__lede {
  margin: 0 0 1.25rem;
  color: #3a3833;
}
.home-book-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.chapter-list {
  max-width: 42rem;
  margin: 3rem auto;
  padding: 0 1.25rem;
}
.chapter-list__heading {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
  letter-spacing: -0.005em;
}
.chapter-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: chapter;
}
.chapter-list__item {
  border-top: 1px solid #efeadb;
  padding: 1.25rem 0;
}
.chapter-list__item:last-child { border-bottom: 1px solid #efeadb; }
.chapter-list__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.chapter-list__link:hover .chapter-list__title { color: #5b1a23; }
.chapter-list__number {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: #7a5b1c;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.chapter-list__title {
  display: block;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.chapter-list__subtitle {
  display: block;
  font-style: italic;
  color: #5b574c;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.chapter-list__description {
  display: block;
  color: #3a3833;
  font-size: 1rem;
  line-height: 1.55;
}

.home-about {
  max-width: 38rem;
  margin: 3rem auto 1rem;
  padding: 0 1.25rem;
  font-size: 1.05rem;
}
.home-about__inner {
  background: #f5efdf;
  border: 1px solid #e5dcc5;
  border-radius: 6px;
  padding: 1.5rem 1.4rem;
}
@media (min-width: 768px) {
  .home-about__inner {
    padding: 1.85rem 2rem;
  }
}
.home-about__heading {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
}
.home-about p {
  margin: 0;
}

/* ---------- Chapter page ---------- */
.chapter {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}
.chapter__header { margin-bottom: 2rem; }
.chapter__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: #7a5b1c;
  font-weight: 600;
  margin: 0 0 0.65rem;
}
.chapter__title {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 2.15rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.chapter__subtitle {
  font-style: italic;
  color: #5b574c;
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.35;
}

/* Audio player — appears between chapter header and the hero word block
   when a matching MP3 exists in /audio/. preload="none" on the <audio>
   keeps mobile data usage at zero until the visitor hits play. */
.chapter-audio {
  margin: 1.75rem 0 2rem;
  padding: 0.85rem 1rem 1rem;
  background: rgba(91, 26, 35, 0.04);
  border-left: 3px solid #5b1a23;
  border-radius: 2px;
}
.chapter-audio__label {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #5b1a23;
  font-weight: 600;
}
.chapter-audio audio {
  width: 100%;
  display: block;
}
@media print {
  .chapter-audio { display: none; }
}

/* Hero word block */
.hero-word {
  margin: 2rem 0 2.5rem;
  padding: 1.75rem 1.25rem;
  background: #f3ebd5;
  border-left: 4px solid #b78b3e;
  text-align: center;
  border-radius: 2px;
}
.hero-word__original {
  font-family: 'Times New Roman', 'David', 'SBL Hebrew', 'EzraSIL', serif;
  font-size: 2.6rem;
  line-height: 1.1;
  font-weight: 400;
  color: #1d1c1a;
  margin-bottom: 0.4rem;
  /* Hebrew/Greek glyphs rely on system fonts */
}
.hero-word__transliteration {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.35rem;
  color: #3a3833;
  margin-bottom: 0.35rem;
}
.hero-word__language {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: #7a5b1c;
  font-weight: 600;
}

/* ---------- Prose ---------- */
.prose { font-size: 1.125rem; line-height: 1.7; }
.prose p { margin: 0 0 1.25em; }
.prose p:first-child { margin-top: 0; }
.prose h2 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 2.25em 0 0.65em;
  letter-spacing: -0.005em;
}
.prose h3 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 1.75em 0 0.5em;
}
.prose blockquote {
  margin: 1.5em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 3px solid #b78b3e;
  font-style: italic;
  color: #2a2926;
  background: transparent;
}
.prose blockquote p { margin: 0 0 0.75em; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose ul, .prose ol {
  margin: 1.25em 0;
  padding-left: 1.5em;
}
.prose li { margin: 0.4em 0; }
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.prose code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.95em;
  background: #f1ecdc;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.prose hr {
  border: 0;
  margin: 2.5em auto;
  text-align: center;
  height: auto;
  overflow: visible;
}
.prose hr::before {
  content: '* * *';
  display: inline-block;
  letter-spacing: 0.6em;
  color: #b78b3e;
  font-size: 1.1rem;
}
.prose img { margin: 1.5em auto; border-radius: 2px; }
.prose .footnote {
  font-size: 0.95rem;
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid #efeadb;
  color: #3a3833;
}

/* Footnotes from python-markdown */
.prose .footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
}

/* Inline Hebrew/Greek words in body — make them sit better visually */
.prose em { font-style: italic; }
.prose strong em, .prose em strong { font-weight: 600; font-style: italic; }

/* ---------- Chapter end-of-page CTA ---------- */
.book-cta {
  margin: 3.5rem 0 2rem;
  padding: 1.75rem 1.25rem;
  background: #f5efdf;
  border: 1px solid #e5dcc5;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  text-align: center;
}
.book-cta__cover img {
  max-width: 170px;
  margin: 0 auto;
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.18);
  border-radius: 2px;
}
.book-cta__kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: #7a5b1c;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.book-cta__heading {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
  line-height: 1.15;
}
.book-cta__lede {
  margin: 0 0 1.25rem;
  color: #3a3833;
  font-size: 1.05rem;
}
.book-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  padding: 0.7em 1.25em;
  border-radius: 4px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  line-height: 1.1;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.button--primary {
  background: #5b1a23;
  color: #fcfbf7;
  border: 1px solid #5b1a23;
}
.button--primary:hover {
  background: #3a0f17;
  color: #fcfbf7;
  text-decoration: none;
}
.button--secondary {
  background: transparent;
  color: #5b1a23;
  border: 1px solid #5b1a23;
}
.button--secondary:hover {
  background: #5b1a23;
  color: #fcfbf7;
  text-decoration: none;
}

/* ---------- Chapter nav ---------- */
.chapter-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #efeadb;
  font-size: 0.95rem;
}
.chapter-nav a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.75rem 0;
}
.chapter-nav a:hover .chapter-nav__title { color: #5b1a23; }
.chapter-nav__label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: #7a5b1c;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.chapter-nav__title {
  display: block;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.25;
}
.chapter-nav__next { text-align: left; }

/* ---------- Static pages ---------- */
.static-page {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}
.static-page__title {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 2.15rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1.75rem;
}

/* ---------- Search trigger (header nav icon) ---------- */
.search-trigger {
  background: none;
  border: 1px solid transparent;
  color: #3a3833;
  padding: 0.4rem 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  line-height: 0;
}
.search-trigger:hover {
  color: #5b1a23;
  background: #f3ebd5;
  border-color: #e5dcc5;
}
.search-trigger:focus-visible {
  outline: 2px solid #5b1a23;
  outline-offset: 2px;
}

/* ---------- Search modal ---------- */
body.search-open { overflow: hidden; }

/* When the `hidden` attribute is set we want display:none.
   The `.search-modal { display: flex }` rule below has equal specificity
   to the UA `[hidden]` rule but comes later in the cascade, so it would
   win without this explicit override. */
.search-modal[hidden] { display: none; }

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 1rem;
  opacity: 0;
  transition: opacity 180ms ease;
}
.search-modal.is-visible { opacity: 1; }

.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 14, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.search-modal__panel {
  position: relative;
  background: #fcfbf7;
  border: 1px solid #e5dcc5;
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(40, 25, 10, 0.28);
  max-width: 38rem;
  width: 100%;
  max-height: calc(100vh - 5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform 180ms ease;
}
.search-modal.is-visible .search-modal__panel {
  transform: translateY(0);
}

.search-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.35rem;
}
.search-modal__label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 600;
  color: #7a5b1c;
  font-family: 'Crimson Pro', Georgia, serif;
}
.search-modal__close {
  background: none;
  border: none;
  color: #5b574c;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  line-height: 1;
  transition: background-color 120ms ease, color 120ms ease;
}
.search-modal__close:hover {
  color: #1d1c1a;
  background: #f3ebd5;
}

.search-modal__input {
  border: none;
  border-top: 1px solid #efeadb;
  border-bottom: 1px solid #efeadb;
  background: #fcfbf7;
  padding: 1rem 1.2rem;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.3rem;
  line-height: 1.3;
  color: #1d1c1a;
  width: 100%;
  outline: none;
}
.search-modal__input::placeholder {
  color: #8a8378;
  font-style: italic;
}
.search-modal__input:focus {
  background: #fff;
}

.search-modal__status {
  padding: 0.55rem 1.2rem 0.15rem;
  font-size: 0.78rem;
  color: #7a5b1c;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
  min-height: 1rem;
}

.search-modal__results {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.search-result {
  border-top: 1px solid #efeadb;
}
.search-result:first-child { border-top: none; }
.search-result__link {
  display: block;
  padding: 0.85rem 1.2rem;
  text-decoration: none;
  color: inherit;
}
.search-result__link:hover,
.search-result.is-active .search-result__link {
  background: #f3ebd5;
  text-decoration: none;
}
.search-result__eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: #7a5b1c;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.search-result__title {
  display: block;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  color: #1d1c1a;
}
.search-result__subtitle {
  display: block;
  font-style: italic;
  color: #5b574c;
  font-size: 0.95rem;
  margin-top: 0.15rem;
}
.search-result__snippet {
  display: block;
  font-size: 0.92rem;
  color: #3a3833;
  margin-top: 0.4rem;
  line-height: 1.45;
}
.search-result mark {
  background: #f1d27a;
  color: #1d1c1a;
  padding: 0 0.1em;
  border-radius: 2px;
}

@media (min-width: 768px) {
  .search-modal { padding-top: 6rem; }
}

/* Mobile: fill the screen, no rounded corners */
@media (max-width: 540px) {
  .search-modal {
    padding: 0;
    align-items: stretch;
  }
  .search-modal__panel {
    max-width: none;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
}

@media print {
  .search-trigger,
  .search-modal { display: none !important; }
}

/* ---------- Amount selector (shared by banner and support page) ---------- */
.amount-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.amount-btn {
  background: #fcfbf7;
  border: 1px solid #d9d3c1;
  color: #1d1c1a;
  border-radius: 4px;
  padding: 0.42rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: 'Crimson Pro', Georgia, serif;
  cursor: pointer;
  line-height: 1.3;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.amount-btn:hover {
  background: #f3ebd5;
  border-color: #b78b3e;
  color: #5b1a23;
  text-decoration: none;
}
.amount-btn.is-selected {
  background: #5b1a23;
  border-color: #5b1a23;
  color: #fcfbf7;
}
.amount-btn.is-selected:hover {
  background: #3a0f17;
  border-color: #3a0f17;
  color: #fcfbf7;
}

/* Custom-amount input (full support page only) */
.amount-custom {
  margin-top: 0.65rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d9d3c1;
  border-radius: 4px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  width: 10rem;
  background: #fcfbf7;
  color: #1d1c1a;
}
.amount-custom:focus {
  outline: 2px solid #5b1a23;
  outline-offset: 2px;
  border-color: #5b1a23;
}

/* ---------- Support banner ---------- */
.support-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fcfbf7;
  border-top: 1px solid #e5dcc5;
  box-shadow: 0 -6px 24px rgba(60, 40, 20, 0.14);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.support-banner.is-visible {
  transform: translateY(0);
}
.support-banner-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.9rem 2.75rem 0.9rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
}
.support-banner-msg {
  font-size: 0.98rem;
  color: #2a2926;
  line-height: 1.5;
  margin: 0;
}
.support-banner-msg strong {
  color: #1d1c1a;
  font-weight: 600;
}
.support-banner-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.support-banner-actions form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
}
.support-banner-dismiss {
  background: none;
  border: none;
  color: #5b574c;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  font-family: 'Crimson Pro', Georgia, serif;
  transition: background-color 120ms ease, color 120ms ease;
}
.support-banner-dismiss:hover {
  color: #1d1c1a;
  background: #f3ebd5;
}
.support-banner-close {
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  background: none;
  border: none;
  color: #5b574c;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  line-height: 1;
  transition: background-color 120ms ease, color 120ms ease;
}
.support-banner-close:hover {
  color: #1d1c1a;
  background: #f3ebd5;
}

@media (min-width: 768px) {
  .support-banner-inner {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 2.75rem 1rem 2rem;
  }
  .support-banner-msg { flex: 1; }
}

@media print {
  .support-banner { display: none !important; }
}

/* ---------- AdSense slot reservations ---------- */
.ad-slot {
  margin: 2rem 0;
  min-height: 90px;       /* prevents CLS even if ad fails to render */
  display: flex;
  justify-content: center;
  align-items: center;
}
.ad-slot--after-hero { min-height: 90px; }
.ad-slot--before-cta { min-height: 250px; }

/* ---------- Tablet / desktop ---------- */
@media (min-width: 768px) {
  body { font-size: 1.1875rem; }      /* ~19px */
  .site-header__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
  }
  .site-header__title { font-size: 1.65rem; }
  .home-hero { padding: 4.5rem 0 2.5rem; }
  .home-hero__title { font-size: 3.25rem; }
  .home-hero__tagline { font-size: 1.35rem; }
  .home-hero__lede { font-size: 1.2rem; }

  .home-book-cta__inner {
    grid-template-columns: 200px 1fr;
    gap: 2.5rem;
    text-align: left;
  }
  .home-book-cta__copy { text-align: left; }
  .home-book-cta__buttons { justify-content: flex-start; }
  .home-book-cta__heading { font-size: 2rem; }

  .chapter, .static-page {
    padding: 3.5rem 1.5rem 0;
  }
  .chapter__title, .static-page__title { font-size: 2.6rem; }
  .chapter__subtitle { font-size: 1.35rem; }

  .hero-word { padding: 2.25rem 1.5rem; }
  .hero-word__original { font-size: 3.25rem; }
  .hero-word__transliteration { font-size: 1.5rem; }

  .prose { font-size: 1.1875rem; line-height: 1.72; }
  .prose h2 { font-size: 1.85rem; }
  .prose h3 { font-size: 1.35rem; }

  .book-cta {
    grid-template-columns: 180px 1fr;
    gap: 1.75rem;
    text-align: left;
    padding: 2rem;
  }
  .book-cta__cover img { margin: 0; }
  .book-cta__buttons { justify-content: flex-start; }

  .chapter-nav {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .chapter-nav__next { text-align: right; }

  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  body { font-size: 1.25rem; }       /* ~20px */
  .home-hero__title { font-size: 3.75rem; }
  .chapter__title, .static-page__title { font-size: 2.85rem; }
}

/* ---------- Print ---------- */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }
  .site-header, .site-footer, .site-nav,
  .home-book-cta, .book-cta, .chapter-nav,
  .ad-slot, .skip-link {
    display: none !important;
  }
  .chapter, .static-page { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  .hero-word { background: transparent; border: 1px solid #ccc; }
}

/* =========================================================================
   Visual refinement pass — manuscript-inspired touches
   Adds aged-paper texture, an aleph watermark on the home hero, a drop cap
   on the first paragraph of each chapter body, and fleuron section breaks.
   ========================================================================= */

/* Subtle aged-paper texture across the whole site. SVG-based fractal noise
   inlined as a data URI — no extra HTTP request, ~0.4 KB. Very low opacity
   so it reads as warmth, not pattern. */
body {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Aleph watermark behind the home hero — large, very faint, brand-consistent
   with the favicon and YouTube channel. Positioned in the corner so it hints
   at the glyph without competing with the headline. */
.home-hero {
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: "א";
  position: absolute;
  font-family: "Frank Ruhl Libre", "Times New Roman", "David", serif;
  font-size: 22rem;
  color: #5b1a23;
  opacity: 0.05;
  top: -3rem;
  right: -2.5rem;
  pointer-events: none;
  line-height: 0.85;
  user-select: none;
  z-index: 0;
}
.home-hero__inner {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .home-hero::before {
    font-size: 30rem;
    top: -5rem;
    right: -4rem;
  }
}

/* Drop cap on the first paragraph of each chapter body — classical book
   typography. 3.5em keeps short opening paragraphs (e.g. epigraphs) from
   looking unbalanced, while still reading as a true illuminated initial. */
.chapter__body.prose > p:first-child::first-letter {
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 700;
  font-style: normal;       /* normalize even if the paragraph is italic */
  font-size: 3.5em;
  line-height: 0.88;
  float: left;
  margin: 0.08em 0.12em -0.05em 0;
  color: #5b1a23;
}
@media (min-width: 768px) {
  .chapter__body.prose > p:first-child::first-letter {
    font-size: 4.2em;
    margin: 0.1em 0.14em -0.05em 0;
  }
}

/* Fleuron section break — replaces the old "* * *" rendering with a single
   manuscript-tradition ornament in the gold accent. */
.prose hr::before {
  content: "❦";
  display: inline-block;
  color: #b78b3e;
  font-size: 1.7rem;
  letter-spacing: 0;
}

/* Slightly more prominent chapter numbers in the home-page list — gives
   the list better visual rhythm now that the book CTA card isn't there
   anchoring the top of the page. */
.chapter-list__number {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: #7a5b1c;
}

/* =========================================================================
   Lexicon — landing page and per-entry pages
   ========================================================================= */

/* ---------- Lexicon landing ---------- */
.lexicon-landing {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}
.lexicon-landing__header {
  margin-bottom: 2.5rem;
}
.lexicon-landing__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: #7a5b1c;
  font-weight: 600;
  margin: 0 0 0.65rem;
}
.lexicon-landing__title {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 2.15rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
}
.lexicon-landing__lede {
  font-size: 1.1rem;
  line-height: 1.65;
  color: #3a3833;
  margin: 0;
}
.lexicon-landing__section { margin: 2.5rem 0; }
.lexicon-landing__h2 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}
.lexicon-landing__section-lede {
  color: #5b574c;
  margin: 0 0 1.5rem;
  font-size: 1rem;
}
.lexicon-landing__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .lexicon-landing__list { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}
.lexicon-landing__item { margin: 0; }
.lexicon-landing__link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 0.85rem;
  row-gap: 0.15rem;
  padding: 0.95rem 1.1rem;
  background: #fcfbf7;
  border: 1px solid #e5dcc5;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, background-color 120ms ease;
  align-items: baseline;
}
.lexicon-landing__link:hover {
  border-color: #b78b3e;
  background: #f5efdf;
  text-decoration: none;
}
.lexicon-landing__lemma {
  font-family: 'Times New Roman', 'Frank Ruhl Libre', 'David', serif;
  font-size: 1.65rem;
  line-height: 1;
  color: #1d1c1a;
  grid-row: 1;
  grid-column: 1;
}
.lexicon-landing__translit {
  font-size: 1.05rem;
  color: #3a3833;
  grid-row: 1;
  grid-column: 2;
}
.lexicon-landing__meta {
  grid-row: 2;
  grid-column: 1 / -1;
  display: flex;
  gap: 0.7rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7a5b1c;
  font-weight: 600;
  margin-top: 0.15rem;
}
.lexicon-landing__short-def {
  grid-row: 3;
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: #3a3833;
  line-height: 1.45;
  margin-top: 0.25rem;
}

.lexicon-landing__coming-soon {
  background: #f5efdf;
  border: 1px solid #e5dcc5;
  border-radius: 6px;
  padding: 1.5rem 1.4rem;
}
.lexicon-landing__coming-soon .lexicon-landing__h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.lexicon-landing__coming-soon-note {
  margin: 0;
  color: #3a3833;
  line-height: 1.6;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .lexicon-landing__coming-soon { padding: 1.85rem 2rem; }
}

/* ---------- Lexicon entry ---------- */
.lexicon-entry {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}
.lexicon-entry__header { margin-bottom: 2rem; }
.lexicon-entry__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: #7a5b1c;
  font-weight: 600;
  margin: 0 0 1.25rem;
}
.lexicon-entry__hero {
  background: #f3ebd5;
  border-left: 4px solid #b78b3e;
  text-align: center;
  border-radius: 2px;
  padding: 1.85rem 1.25rem;
}
.lexicon-entry__lemma {
  font-family: 'Times New Roman', 'Frank Ruhl Libre', 'David', 'SBL Hebrew', serif;
  font-size: 3rem;
  line-height: 1.05;
  font-weight: 400;
  color: #1d1c1a;
  margin-bottom: 0.55rem;
}
@media (min-width: 768px) {
  .lexicon-entry__lemma { font-size: 3.6rem; }
}
.lexicon-entry__translit {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.5rem;
  color: #3a3833;
  margin-bottom: 0.25rem;
}
.lexicon-entry__pron {
  font-size: 0.95rem;
  color: #5b574c;
  font-style: italic;
}

.lexicon-entry__section { margin: 2.25rem 0; }
.lexicon-entry__h2 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
  letter-spacing: -0.005em;
}
.lexicon-entry__def {
  font-size: 1.1rem;
  line-height: 1.65;
  margin: 0;
  color: #1d1c1a;
}
.lexicon-entry__derivation {
  font-size: 1rem;
  line-height: 1.6;
  color: #3a3833;
  margin: 0;
}

.lexicon-entry__kjv-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.lexicon-entry__kjv-word {
  display: inline-block;
  background: #f5efdf;
  border: 1px solid #e5dcc5;
  color: #3a3833;
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  font-size: 0.95rem;
  font-family: 'Crimson Pro', Georgia, serif;
}
/* Cross-link chips — "Word family" + "Related words". Like the KJV chips
   but clickable (burgundy), pairing the original lemma with its translit. */
.lexicon-entry__xref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lexicon-entry__xref a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  background: #f5efdf;
  border: 1px solid #e5dcc5;
  border-radius: 3px;
  padding: 0.35rem 0.75rem;
  color: #5b1a23;
  text-decoration: none;
  font-size: 0.95rem;
}
.lexicon-entry__xref a:hover {
  background: #efe6d0;
  border-color: #d8cbab;
}
.lexicon-entry__xref-lemma {
  font-size: 1.1rem;
  color: #3a3833;
}
.lexicon-entry__xref a em { font-style: italic; }

/* ============================================================
   Interactive Gospel tool
   ============================================================ */
.ig { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.ig__eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
  color: #8a6d2f; margin: 0 0 0.4rem;
}
.ig__title { font-family: 'Crimson Pro', Georgia, serif; font-size: 2rem; line-height: 1.15; margin: 0 0 0.6rem; }
.ig__lead { font-size: 1.05rem; line-height: 1.6; color: #4a463d; margin: 0 0 1.5rem; }

.ig__controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  padding: 0.85rem 1rem; background: #f5efdf; border: 1px solid #e5dcc5;
  border-radius: 6px; position: sticky; top: 0.5rem; z-index: 5;
}
.ig__controls-label { font-size: 0.9rem; font-weight: 600; color: #5b574c; }
.ig__lenses { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ig-lens {
  font: inherit; font-size: 0.92rem; padding: 0.35rem 0.85rem; cursor: pointer;
  background: #fff; border: 1px solid #d8cbab; border-radius: 999px; color: #5b1a23;
}
.ig-lens:hover { background: #fbf6ea; }
.ig-lens.is-active { background: #5b1a23; border-color: #5b1a23; color: #fff; }

.ig__chapnav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1rem; }
.ig__chapnav--bottom { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid #e5dcc5; }
.ig-chapbtn {
  font: inherit; font-size: 0.92rem; padding: 0.4rem 0.85rem; cursor: pointer;
  background: #fff; border: 1px solid #d8cbab; border-radius: 6px; color: #5b1a23;
}
.ig-chapbtn:hover:not([disabled]) { background: #fbf6ea; }
.ig-chapbtn[disabled] { opacity: 0.4; cursor: default; }
.ig-chaplabel { font-size: 0.95rem; color: #5b574c; font-weight: 600; }
.ig-chapselect {
  font: inherit; font-size: 0.95rem; padding: 0.35rem 0.5rem;
  background: #fff; border: 1px solid #d8cbab; border-radius: 6px; color: #1f1d18; cursor: pointer;
}

.ig__hint { font-size: 0.9rem; color: #6b6557; margin: 1.1rem 0 0.25rem; }
.ig__status { font-size: 0.85rem; color: #8a6d2f; min-height: 1.2em; margin: 0 0 0.75rem; }

.ig__reader {
  font-family: 'Crimson Pro', Georgia, serif; font-size: 1.25rem; line-height: 1.75; color: #1f1d18;
}
.ig-para { margin: 0 0 1.15rem; }
.ig-vnum { font-size: 0.7em; color: #b0833a; font-weight: 600; vertical-align: super; margin-right: 0.15em; }

/* Variant slots — clickable phrases. Underline style encodes the variant type. */
.ig-slot {
  /* display:inline + text-align:inherit override the <button> UA defaults
     (inline-block + centered text) so a long, wrapping variant flows as
     ordinary inline text — wraps across lines and keeps trailing punctuation
     on the same line instead of forming a centered atomic box. */
  display: inline; text-align: inherit;
  font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-color: #c08a93;
  text-underline-offset: 0.18em; text-decoration-thickness: 1.5px;
}
.ig-slot:hover, .ig-slot:focus-visible { background: #fbeaed; color: #5b1a23; outline: none; border-radius: 2px; }
.ig-slot--textual { text-decoration-color: #6b8caf; }
.ig-slot--syntactic { text-decoration-style: double; text-decoration-color: #7da37d; }
.ig-block { display: inline; }

.ig__about { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #e5dcc5; font-size: 0.95rem; line-height: 1.6; color: #5b574c; }
.ig__about h2 { font-family: 'Crimson Pro', Georgia, serif; font-size: 1.15rem; margin: 0 0 0.5rem; }
.ig__loading { color: #8a6d2f; font-style: italic; }

/* Detail panel — right drawer (desktop) / bottom sheet (mobile). */
.ig-panel {
  position: fixed; z-index: 50; background: #fcfbf7; box-shadow: 0 0 30px rgba(0,0,0,0.18);
  display: flex; flex-direction: column; overflow: hidden;
}
/* The display:flex above would otherwise override the [hidden] attribute, so
   the panel must explicitly hide when hidden — keeps it closed until a slot
   is clicked, and lets the close button work. */
.ig-panel[hidden] { display: none !important; }
.ig-panel__backdrop { position: fixed; inset: 0; background: rgba(20,16,12,0.28); z-index: 40; }
.ig-panel__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.1rem; border-bottom: 1px solid #e5dcc5; background: #f5efdf;
}
.ig-panel__title { margin: 0; font-family: 'Crimson Pro', Georgia, serif; font-size: 1.2rem; line-height: 1.25; }
.ig-panel__greek { font-size: 1.35rem; }
.ig-panel__translit { font-style: italic; color: #5b574c; }
.ig-panel__close { font-size: 1.6rem; line-height: 1; background: none; border: none; cursor: pointer; color: #5b574c; padding: 0 0.25rem; }
.ig-panel__body { padding: 1rem 1.1rem; overflow-y: auto; }
.ig-panel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem; font-size: 0.85rem; }
.ig-panel__cat { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 3px; background: #efe3c8; color: #7a5a16; }
.ig-panel__cat--textual { background: #e1ebf4; color: #2f567f; }
.ig-panel__cat--syntactic { background: #e3efe3; color: #3c6b3c; }
.ig-panel__strongs a, .ig-panel__strongs span { color: #5b1a23; font-size: 0.85rem; }
.ig-panel__note { font-size: 0.9rem; line-height: 1.5; color: #5b574c; background: #f5efdf; border-left: 3px solid #d8cbab; padding: 0.6rem 0.8rem; margin: 0 0 1rem; border-radius: 0 4px 4px 0; }
.ig-panel__variants { list-style: none; margin: 0; padding: 0; }
.ig-variant { padding: 0.85rem 0; border-top: 1px solid #ece3cf; }
.ig-variant:first-child { border-top: none; }
.ig-variant.is-active { background: #fbf6ea; margin: 0 -1.1rem; padding: 0.85rem 1.1rem; border-radius: 4px; }
.ig-variant__badge { display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: #5b1a23; background: #f3dde1; padding: 0.1rem 0.45rem; border-radius: 3px; margin-bottom: 0.35rem; }
.ig-variant__text { font-family: 'Crimson Pro', Georgia, serif; font-size: 1.15rem; line-height: 1.4; margin: 0 0 0.4rem; color: #1f1d18; }
.ig-variant__support { font-size: 0.88rem; line-height: 1.5; color: #5b574c; margin: 0.35rem 0 0; }
.ig-src { margin-left: 1px; }
.ig-src a { color: #5b1a23; text-decoration: none; font-weight: 700; padding: 0 1px; }
.ig-src a:hover { text-decoration: underline; }
.ig-variant__mss { font-size: 0.82rem; color: #6b6557; margin: 0.3rem 0 0; }
.ig-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ig-tag { font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 3px; background: #ece3cf; color: #6b5a30; cursor: help; }
.ig-tag--lens { background: #5b1a23; color: #fff; }
/* Inline "What the first audience heard" treatment(s) from the lexicon. */
.ig-panel__heard { margin-top: 1.25rem; border-top: 1px solid #e5dcc5; padding-top: 0.75rem; }
.ig-heard { border: 1px solid #e5dcc5; border-radius: 5px; margin-top: 0.6rem; background: #fffdf8; }
.ig-heard__summary {
  cursor: pointer; padding: 0.55rem 0.7rem; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: #5b1a23; list-style: none;
}
.ig-heard__summary::-webkit-details-marker { display: none; }
.ig-heard__summary::before { content: "\25B8\00A0"; color: #b0833a; }
.ig-heard[open] .ig-heard__summary::before { content: "\25BE\00A0"; }
.ig-heard__summary span { text-transform: none; letter-spacing: 0; color: #5b574c; font-weight: 600; }
.ig-heard__body {
  padding: 0.1rem 0.85rem 0.7rem; font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem; line-height: 1.62; color: #2a2620;
}
.ig-heard__body p { margin: 0.6rem 0; }
.ig-heard__body p:first-child { margin-top: 0; }

body.ig-panel-open { overflow: hidden; }

@media (max-width: 767px) {
  .ig-panel { left: 0; right: 0; bottom: 0; max-height: 78vh; border-radius: 14px 14px 0 0; }
}
@media (min-width: 768px) {
  .ig-panel { top: 0; right: 0; bottom: 0; width: 380px; }
  .ig-panel__backdrop { background: rgba(20,16,12,0.18); }
}
/* Hover/focus preview tooltip — terse list of all renderings + their tags. */
.ig-tip {
  position: absolute; z-index: 60; max-width: 22rem;
  background: #2a2521; color: #f3ece0; border-radius: 6px;
  padding: 0.5rem 0.7rem; box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  pointer-events: none; font-size: 0.9rem; line-height: 1.45;
}
.ig-tip[hidden] { display: none !important; }
.ig-tip__row { display: block; padding: 0.1rem 0; }
.ig-tip__row + .ig-tip__row { border-top: 1px solid rgba(255,255,255,0.08); }
.ig-tip__text { font-family: 'Crimson Pro', Georgia, serif; }
.ig-tip__row.is-active .ig-tip__text { font-weight: 700; color: #fff; }
.ig-tip__tags { color: #b6ab97; font-size: 0.82rem; }
/* Explainer variant (lens buttons + tag chips): term name + definition. */
.ig-tip--term { max-width: 20rem; }
.ig-tip__term { display: block; font-weight: 700; color: #fff; font-size: 0.92rem; margin-bottom: 0.15rem; }
.ig-tip__def { display: block; color: #d4cab8; font-size: 0.85rem; line-height: 1.45; }

@media print {
  .ig__controls, .ig__hint, .ig__status, .ig-panel, .ig-panel__backdrop, .ig-tip { display: none !important; }
  .ig-slot { text-decoration: none; color: inherit; }
}
/* Touch devices: hover preview is pointless and can stick — suppress it. */
@media (hover: none) {
  .ig-tip { display: none !important; }
}
.lexicon-entry__kjv-note {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #5b574c;
  font-style: italic;
  margin: 0;
}

.lexicon-entry__chapter-card {
  display: block;
  background: #f5efdf;
  border: 1px solid #e5dcc5;
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.lexicon-entry__chapter-card + .lexicon-entry__chapter-card { margin-top: 0.6rem; }
.lexicon-entry__chapter-card:hover {
  border-color: #b78b3e;
  background: #f0e6c8;
  text-decoration: none;
}
.lexicon-entry__chapter-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: #7a5b1c;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.lexicon-entry__chapter-title {
  display: block;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #1d1c1a;
  margin-bottom: 0.15rem;
}
.lexicon-entry__chapter-subtitle {
  display: block;
  font-style: italic;
  color: #5b574c;
  font-size: 0.98rem;
  margin-bottom: 0.5rem;
}
.lexicon-entry__chapter-cta {
  display: block;
  color: #5b1a23;
  font-size: 0.9rem;
  font-weight: 600;
}

.lexicon-entry__placeholder {
  font-style: italic;
  color: #5b574c;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.lexicon-entry__attribution {
  margin: 3rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #efeadb;
  font-size: 0.85rem;
  color: #7a7263;
  line-height: 1.55;
}
.lexicon-entry__attribution p { margin: 0; }

/* ---------- Lexicon browse cards on the landing page ---------- */
.lexicon-landing__browse-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 2rem 0 2.5rem;
}
@media (min-width: 540px) {
  .lexicon-landing__browse-cards { grid-template-columns: 1fr 1fr; }
}
.lexicon-landing__browse-card {
  display: block;
  padding: 1.5rem 1.4rem;
  background: #f5efdf;
  border: 1px solid #e5dcc5;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.lexicon-landing__browse-card:hover {
  border-color: #b78b3e;
  background: #f0e6c8;
  text-decoration: none;
}
.lexicon-landing__browse-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: #7a5b1c;
  font-weight: 600;
  margin-bottom: 0.45rem;
}
.lexicon-landing__browse-title {
  display: block;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
  color: #1d1c1a;
  margin-bottom: 0.3rem;
}
.lexicon-landing__browse-count {
  display: block;
  font-size: 0.95rem;
  color: #5b574c;
}
.lexicon-landing__about p {
  font-size: 1rem;
  line-height: 1.65;
  color: #3a3833;
  margin: 0 0 0.85rem;
}
.lexicon-landing__about p:last-child { margin-bottom: 0; }

/* ---------- Lexicon browse pages (per-language alphabetical) ---------- */
.lexicon-browse {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}
.lexicon-browse__header { margin-bottom: 2rem; }
.lexicon-browse__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: #7a5b1c;
  font-weight: 600;
  margin: 0 0 0.65rem;
}
.lexicon-browse__title {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
}
.lexicon-browse__lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #3a3833;
  margin: 0 0 1rem;
}
.lexicon-browse__nav {
  font-size: 0.95rem;
  color: #5b574c;
  margin: 0;
}
.lexicon-browse__nav a {
  color: #5b1a23;
  text-decoration: none;
}
.lexicon-browse__nav a:hover { text-decoration: underline; }

.lexicon-browse__jump {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(252, 251, 247, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 1px solid #efeadb;
  border-bottom: 1px solid #e5dcc5;
  padding: 0.7rem 0;
  margin: 0 -1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem 0.4rem;
  font-size: 0.9rem;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
}
.lexicon-browse__jump a {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  color: #5b574c;
  text-decoration: none;
  border-radius: 3px;
}
.lexicon-browse__jump a:hover {
  background: #f3ebd5;
  color: #5b1a23;
}

.lexicon-browse__letter { margin: 2rem 0 2.5rem; }
.lexicon-browse__letter-heading {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 1.75rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #e5dcc5;
  color: #5b1a23;
  scroll-margin-top: 4rem;  /* leave room for sticky jump bar */
}
.lexicon-browse__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}
@media (min-width: 768px) {
  .lexicon-browse__list { grid-template-columns: 1fr 1fr; gap: 0.5rem 1.2rem; }
}
.lexicon-browse__item { margin: 0; }
.lexicon-browse__item a {
  display: grid;
  grid-template-columns: minmax(2.4rem, auto) 1fr auto;
  column-gap: 0.6rem;
  row-gap: 0.1rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  align-items: baseline;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.lexicon-browse__item a:hover {
  background: #f5efdf;
  border-color: #e5dcc5;
  text-decoration: none;
}
.lexicon-browse__item.is-featured a {
  background: #faf4e0;
}
.lexicon-browse__item.is-featured a:hover {
  background: #f3ebd5;
}
.lexicon-browse__lemma {
  font-family: 'Times New Roman', 'Frank Ruhl Libre', 'David', serif;
  font-size: 1.25rem;
  line-height: 1.1;
  color: #1d1c1a;
  grid-row: 1;
  grid-column: 1;
}
.lexicon-browse__translit {
  font-size: 0.98rem;
  color: #3a3833;
  grid-row: 1;
  grid-column: 2;
}
.lexicon-browse__strongs {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7a5b1c;
  font-weight: 600;
  grid-row: 1;
  grid-column: 3;
  white-space: nowrap;
}
.lexicon-browse__featured-mark {
  color: #b78b3e;
  font-size: 0.85rem;
  margin-left: 0.25rem;
}
.lexicon-browse__def {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: #5b574c;
  line-height: 1.4;
  margin-top: 0.1rem;
}

/* Hide the "What the first audience heard" section when it only contains
   the placeholder paragraph. Modern browsers (Chrome 105+, Safari 15.4+,
   Firefox 121+) support :has(); older browsers see the heading with an
   empty body — still acceptable. Future builds will skip writing the
   placeholder entirely; this rule handles the 14k pages already deployed. */
.lexicon-entry__section:has(.lexicon-entry__placeholder) { display: none; }
.lexicon-entry__placeholder { display: none; }

/* Strong's cross-reference links inserted by lexicon-tools (search.js). */
.lex-xref {
  color: #5b1a23;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  font-weight: 600;
}
.lex-xref:hover { color: #3a0f17; }

/* ---------- Lexicon search box (injected by search.js on lexicon pages) ---------- */
.lex-search {
  max-width: 42rem;
  margin: 1.75rem auto 0;
  padding: 0 1.25rem;
  position: relative;
}
.lex-search__inner {
  position: relative;
}
.lex-search__input {
  width: 100%;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.3;
  color: #1d1c1a;
  padding: 0.75rem 1rem;
  background: #fcfbf7;
  border: 1px solid #e5dcc5;
  border-radius: 4px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.lex-search__input::placeholder {
  color: #8a8378;
  font-style: italic;
}
.lex-search__input:focus {
  border-color: #b78b3e;
  box-shadow: 0 0 0 3px rgba(183, 139, 62, 0.18);
}
.lex-search__results {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  background: #fcfbf7;
  border: 1px solid #e5dcc5;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(40, 25, 10, 0.16);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 60;
}
.lex-search__result { margin: 0; }
.lex-search__link {
  display: grid;
  grid-template-columns: minmax(2.6rem, auto) 1fr auto;
  column-gap: 0.7rem;
  row-gap: 0.1rem;
  padding: 0.55rem 0.95rem;
  text-decoration: none;
  color: inherit;
  align-items: baseline;
}
.lex-search__link:hover,
.lex-search__result.is-active .lex-search__link {
  background: #f3ebd5;
  text-decoration: none;
}
.lex-search__lemma {
  font-family: 'Times New Roman', 'Frank Ruhl Libre', 'David', serif;
  font-size: 1.2rem;
  line-height: 1.05;
  color: #1d1c1a;
  grid-row: 1;
  grid-column: 1;
}
.lex-search__translit {
  font-size: 1rem;
  color: #3a3833;
  grid-row: 1;
  grid-column: 2;
}
.lex-search__sid {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7a5b1c;
  font-weight: 600;
  grid-row: 1;
  grid-column: 3;
  white-space: nowrap;
}
.lex-search__def {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: #5b574c;
  line-height: 1.4;
  margin-top: 0.15rem;
}
.lex-search__status {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7a5b1c;
  margin: 0.5rem 0 0;
  min-height: 1rem;
}

/* ---------- Verse occurrences (injected on lexicon entry pages) ---------- */
.lexicon-entry__occurrences-summary {
  font-size: 1rem;
  color: #5b574c;
  margin: 0 0 1.25rem;
  font-style: italic;
}
.lexicon-entry__verses {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lexicon-entry__verse {
  margin: 0 0 1.1rem;
  padding-left: 0;
}
.lexicon-entry__verse-ref {
  display: inline-block;
  color: #5b1a23;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  margin-bottom: 0.2rem;
}
.lexicon-entry__verse-ref:hover { color: #3a0f17; text-decoration: underline; }
.lexicon-entry__verse-text {
  display: block;
  font-size: 1rem;
  color: #1d1c1a;
  line-height: 1.6;
  font-family: 'Crimson Pro', Georgia, serif;
}
.lexicon-entry__verse-text--web {
  margin-top: 0.3rem;
  color: #3a3833;
}
.lexicon-entry__verse-tag {
  display: inline-block;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #7a5b1c;
  background: #faf4e0;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  vertical-align: 0.08em;
  margin-right: 0.45rem;
}
.lexicon-entry__verse-text--web .lexicon-entry__verse-tag {
  color: #5b1a23;
  background: #f3e0e3;
}
.lexicon-entry__verses-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}
.lexicon-entry__verse-btn {
  background: #5b1a23;
  color: #fcfbf7;
  border: 1px solid #5b1a23;
  border-radius: 4px;
  padding: 0.55em 1.05em;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.lexicon-entry__verse-btn:hover {
  background: #3a0f17;
  color: #fcfbf7;
}
.lexicon-entry__verse-btn--ghost {
  background: transparent;
  color: #5b1a23;
}
.lexicon-entry__verse-btn--ghost:hover {
  background: #5b1a23;
  color: #fcfbf7;
}

/* ============================================================
   Amplified Gospel — explanatory reading tool
   ============================================================ */
.amp { max-width: 42rem; margin: 0 auto; }
.amp__eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
  color: #8a6d2f; margin: 0 0 0.4rem;
}
.amp__title { font-family: 'Crimson Pro', Georgia, serif; font-size: 2rem; line-height: 1.15; margin: 0 0 0.6rem; }
.amp__chap { color: #8a6d2f; font-size: 1.3rem; font-weight: 400; white-space: nowrap; }
.amp__lead { font-size: 1.05rem; line-height: 1.6; color: #4a463d; margin: 0 0 1.4rem; }

.amp__note {
  background: #f5efdf; border: 1px solid #e5dcc5; border-radius: 6px;
  padding: 0.85rem 1rem; margin: 0 0 1.6rem;
}
.amp__note p { font-size: 0.92rem; line-height: 1.55; color: #5b574c; margin: 0 0 0.7rem; }
.amp-legend { vertical-align: baseline; }
.amp__toggle {
  font: inherit; font-size: 0.9rem; padding: 0.35rem 0.85rem; cursor: pointer;
  background: #fff; border: 1px solid #d8cbab; border-radius: 999px; color: #5b1a23;
}
.amp__toggle:hover { background: #fbf6ea; }
.amp__toggle[aria-pressed="true"] { background: #5b1a23; border-color: #5b1a23; color: #fff; }

.amp__chapnav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.4rem; }
.amp__chapnav--bottom { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid #e5dcc5; }
.amp-chapbtn {
  font: inherit; font-size: 0.92rem; padding: 0.4rem 0.85rem;
  background: #fff; border: 1px solid #d8cbab; border-radius: 6px; color: #5b1a23; text-decoration: none;
}
.amp-chapbtn:hover { background: #fbf6ea; }
.amp-chapbtn--off { opacity: 0.35; }
.amp-chaplabel { font-size: 0.95rem; color: #5b574c; font-weight: 600; }

/* The reading itself. Scripture is the darker, semibold spine; the
   amplification is the quieter voice woven around it. */
.amp__text {
  font-family: 'Crimson Pro', Georgia, serif; font-size: 1.25rem; line-height: 1.85;
}
.amp-para { margin: 0 0 1.3rem; }
.amp-vn {
  font-size: 0.62em; color: #b0833a; font-weight: 700; vertical-align: super;
  margin-right: 0.2em; text-decoration: none; line-height: 0;
}
.amp-vn:hover { color: #5b1a23; }
.amp-s { color: #1a1812; font-weight: 600; }
.amp-a { color: #5f5a4b; font-weight: 400; }
/* Hebrew/Greek terms: original script linked to the lexicon, opens in a new tab. */
a.amp-term { color: #5b1a23; text-decoration: none; border-bottom: 1px dotted #b9a06a; }
a.amp-term:hover { border-bottom-color: #5b1a23; }
.amp-term { font-style: normal; }

/* Plain mode — hide the added background; the scripture reads on its own. */
.amp--plain .amp-a { display: none; }
.amp--plain .amp-s { font-weight: 400; color: #1f1d18; }

.amp__partial {
  font-size: 0.9rem; color: #6b6557; font-style: italic;
  margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px dashed #e5dcc5;
}
.amp__about { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #e5dcc5; }
.amp__about h2 { font-family: 'Crimson Pro', Georgia, serif; font-size: 1.2rem; margin: 0 0 0.5rem; }
.amp__about p { font-size: 0.95rem; line-height: 1.6; color: #5b574c; margin: 0; }

@media print {
  .amp__note, .amp__chapnav, .amp__about { display: none; }
  .amp-s, .amp-a { color: #000; }
}

/* =========================================================================
   Word quiz — "What Did It Actually Mean?" (/quiz/)
   ========================================================================= */
.quiz { max-width: 40rem; margin: 0 auto; padding: 2rem 1.1rem 3.5rem; }
.quiz__header { text-align: center; margin-bottom: 1.75rem; }
.quiz__eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem;
  font-weight: 600; color: #b78b3e; margin: 0 0 0.5rem;
}
.quiz__title {
  font-size: 1.9rem; line-height: 1.15; margin: 0 0 0.6rem; color: #1d1c1a;
}
.quiz__subtitle { font-style: italic; color: #5b574c; margin: 0; font-size: 1.1rem; }
.quiz__noscript { text-align: center; color: #5b574c; }

/* Progress */
.quiz-progress-wrap { margin-bottom: 1.25rem; }
.quiz-progress {
  height: 5px; background: #e9e0c8; border-radius: 3px; overflow: hidden;
}
.quiz-progress__fill {
  display: block; height: 100%; background: #5b1a23;
  transition: width 0.35s ease;
}
.quiz-progress__label {
  font-size: 0.78rem; color: #8a8473; margin: 0.45rem 0 0;
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* Question card */
.quiz-card {
  background: #fffdf8; border: 1px solid #e5dcc5; border-radius: 8px;
  padding: 1.5rem 1.35rem 1.6rem; box-shadow: 0 4px 16px rgba(40, 25, 10, 0.06);
}
.quiz-card__eyebrow {
  font-size: 0.8rem; color: #b78b3e; font-weight: 600;
  letter-spacing: 0.05em; margin: 0 0 0.6rem;
}
.quiz-card__context {
  margin: 0 0 1rem; padding: 0.5rem 0 0.5rem 0.9rem;
  border-left: 3px solid #d8cba6; font-style: italic; color: #4a4639;
}
.quiz-card__prompt {
  font-size: 1.2rem; line-height: 1.35; margin: 0 0 0.9rem; color: #1d1c1a;
}
.quiz-card__word { text-align: center; margin: 0 0 1.2rem; }
.quiz-card__original {
  font-family: 'Times New Roman', 'David', 'SBL Hebrew', serif;
  font-size: 2rem; color: #1d1c1a;
}
.quiz-card__translit { font-style: italic; color: #6b6557; font-size: 1.05rem; }

/* Options */
.quiz-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.quiz-option {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1.4;
  background: #fcfbf7; color: #1d1c1a;
  border: 1.5px solid #ddd2b6; border-radius: 6px;
  padding: 0.8rem 1rem; transition: border-color 0.15s, background 0.15s;
}
.quiz-option:hover:not(:disabled) { border-color: #5b1a23; background: #f7f2e6; }
.quiz-option:disabled { cursor: default; }
.quiz-option.is-correct {
  border-color: #2f7a43; background: #eaf5ec; color: #1c4a29; font-weight: 600;
}
.quiz-option.is-wrong {
  border-color: #a8323b; background: #fbeced; color: #7a1c23;
}

/* Reveal */
.quiz-reveal { margin-top: 1.25rem; }
.quiz-reveal__verdict {
  display: inline-block; font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.04em; margin-bottom: 0.4rem;
}
.quiz-reveal__verdict.is-right { color: #2f7a43; }
.quiz-reveal__verdict.is-miss { color: #a8323b; }
.quiz-reveal__payoff { margin: 0.2rem 0 0.9rem; line-height: 1.6; color: #2b2822; }
.quiz-reveal__link {
  display: inline-block; font-weight: 600; margin-bottom: 1.1rem;
}
.quiz-reveal__nav { margin-top: 0.4rem; }

/* Score screen */
.quiz-score {
  text-align: center; background: #fffdf8; border: 1px solid #e5dcc5;
  border-radius: 8px; padding: 2.25rem 1.35rem;
  box-shadow: 0 4px 16px rgba(40, 25, 10, 0.06);
}
.quiz-score__eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem;
  font-weight: 600; color: #b78b3e; margin: 0 0 0.5rem;
}
.quiz-score__big { font-size: 3.2rem; line-height: 1; margin: 0 0 0.6rem; color: #5b1a23; }
.quiz-score__big span { font-size: 1.6rem; color: #8a8473; }
.quiz-score__line { font-size: 1.15rem; font-style: italic; color: #4a4639; margin: 0 0 1.5rem; }
.quiz-score__actions {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.quiz-score__share-status { font-size: 0.85rem; color: #2f7a43; min-height: 1.1em; margin: 0.3rem 0 0; }
.quiz-score__cta {
  margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid #e5dcc5;
}
.quiz-score__cta p { color: #4a4639; line-height: 1.6; margin: 0 0 0.7rem; }
.quiz-score__cta-link { font-weight: 600; }

@media (min-width: 768px) {
  .quiz__title { font-size: 2.3rem; }
}
@media print {
  .quiz-options, .quiz-reveal__nav, .quiz-score__actions { display: none; }
}