/* ============================================================
   Proverbs by Theme — Soft & Elegant
   Purple + Warm Gold + Parchment
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* --- Custom Properties -------------------------------------- */
:root {
  /* Parchment / Surface */
  --bg:           #FBF6E9;   /* warm cream, the "paper" */
  --bg-deep:      #F4EBD3;   /* slightly warmer cream panel */
  --surface:      #FFFFFF;   /* card */
  --surface-alt:  #F7EFD9;   /* soft buttery panel */
  --surface-veil: #FAF4E1;   /* lightly tinted card */

  /* Hairlines */
  --border:       #E2D2A8;   /* warm tan */
  --border-light: #EFE5C9;
  --border-soft:  #F1E9CE;

  /* Brand — deep regal purple */
  --plum-950:     #1F1340;
  --plum-900:     #2A1A55;
  --plum-800:     #3A2475;   /* the "P" in the icon */
  --plum-700:     #4B2E83;
  --plum-600:     #6A4FA8;
  --plum-400:     #A28DC9;
  --plum-200:     #D8CCE9;
  --plum-100:     #ECE4F4;
  --plum-50:      #F5F0FA;

  /* Brand — warm gold */
  --gold-800:     #7A5418;
  --gold-700:     #9A6F25;   /* deep gold, readable text */
  --gold-600:     #B98935;   /* mid */
  --gold-500:     #C9A24A;   /* the frame */
  --gold-400:     #D9B96A;
  --gold-300:     #E5C684;
  --gold-200:     #ECD49A;
  --gold-100:     #F5E5B8;
  --gold-50:      #FBF1D4;

  /* Text */
  --text:         #2A1F4D;   /* deep purple-black */
  --text-2:       #5C5470;
  --text-3:       #968CAA;
  --text-on-plum: rgba(255,255,255,.82);

  /* Person-type tokens — softened & harmonized */
  --wise-bg:      #ECEEE0; --wise-fg:    #4F5F3A;   /* sage */
  --simple-bg:    #E5EBF2; --simple-fg:  #3D547A;   /* dusty blue */
  --fool-bg:      #F2E2E2; --fool-fg:    #8E3D44;   /* muted clay */
  --mocker-bg:    #ECE4F4; --mocker-fg:  #4B2E83;   /* plum (brand) */
  --sluggard-bg:  #F4E5C7; --sluggard-fg:#8A5E22;   /* warm tan */
  --other-bg:     #ECE7D9; --other-fg:   #5C503A;

  /* Legacy aliases — week-render.js etc. still work */
  --navy:         var(--plum-800);
  --navy-hover:   var(--plum-700);
  --gold:         var(--gold-700);
  --gold-light:   var(--gold-100);

  --color-accent:    var(--plum-700);
  --color-accent-bg: var(--plum-100);
  --space-section:   4rem;

  --radius:       12px;
  --radius-sm:    6px;
  --radius-lg:    18px;

  /* Soft warm shadows — never grey */
  --shadow-xs:    0 1px 2px rgba(82, 56, 18, .06);
  --shadow:       0 2px 8px rgba(82, 56, 18, .07), 0 1px 2px rgba(82, 56, 18, .04);
  --shadow-md:    0 6px 22px rgba(58, 36, 117, .09), 0 2px 6px rgba(82, 56, 18, .05);
  --shadow-lg:    0 18px 44px rgba(58, 36, 117, .15);

  --font-display: 'Cormorant Garamond', 'Garamond', Georgia, serif;
  --font-serif:   'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-w:        1120px;
  --reading-w:    700px;
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(106, 79, 168, .07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(201, 162, 74, .09), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a  { color: var(--plum-700); }
a:hover { color: var(--plum-800); }

::selection { background: var(--gold-200); color: var(--plum-900); }

/* --- Layout ------------------------------------------------- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.reading-container { width: 100%; max-width: var(--reading-w); margin: 0 auto; padding: 0 1.5rem; }

/* --- Decorative ornaments ----------------------------------- */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  color: var(--gold-600);
  margin: 1rem 0;
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 0 1 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-400), transparent);
}
.ornament-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(201,162,74,.12);
}

/* --- Site Header -------------------------------------------- */
.site-header {
  background: rgba(251, 246, 233, .85);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-light);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--plum-800);
  text-decoration: none;
  letter-spacing: .005em;
  white-space: nowrap;
}
.site-logo .logo-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex: 0 0 32px;
  background-image: url('../icons/favicon-512.png');
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 4px rgba(82, 56, 18, .15);
}
.site-logo span { color: var(--gold-700); font-style: italic; font-weight: 500; }

.site-nav { display: flex; gap: .15rem; align-items: center; }
.site-nav a {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  padding: .55rem .95rem;
  border-radius: 99px;
  transition: background .18s, color .18s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.site-nav a:hover { color: var(--plum-800); background: var(--plum-50); }
.site-nav a.active {
  color: var(--plum-800);
  background: var(--plum-100);
  font-weight: 600;
}

/* --- Hero --------------------------------------------------- */
.hero {
  position: relative;
  text-align: center;
  padding: 4.5rem 0 4rem;
  overflow: hidden;
}
.hero::before {
  /* soft parchment ornament background */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 700px 360px at 50% 0%, rgba(236, 228, 244, .9), transparent 60%),
    radial-gradient(ellipse 600px 360px at 50% 100%, rgba(245, 229, 184, .55), transparent 60%);
  pointer-events: none;
}
.hero-inner { position: relative; }

.hero-mark {
  width: 84px; height: 84px;
  margin: 0 auto 1.5rem;
  border-radius: 22px;
  background-image: url('../icons/favicon-512.png');
  background-size: cover;
  background-position: center;
  box-shadow:
    0 10px 30px rgba(58, 36, 117, .18),
    0 2px 6px rgba(82, 56, 18, .10);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 1.25rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: 24px; height: 1px;
  background: var(--gold-400);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--plum-900);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold-700);
  font-weight: 500;
}
.hero-lede {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: var(--text-2);
  max-width: 600px;
  margin: 0 auto 2.25rem;
  line-height: 1.55;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* --- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: .75rem 1.5rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
  white-space: nowrap;
  letter-spacing: .005em;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--plum-800);
  color: #fff;
  box-shadow: 0 4px 16px rgba(58, 36, 117, .25);
}
.btn-primary:hover { background: var(--plum-700); color: #fff; box-shadow: 0 8px 22px rgba(58, 36, 117, .32); }

.btn-gold {
  background: var(--gold-600);
  color: #fff;
  box-shadow: 0 4px 14px rgba(201, 162, 74, .35);
}
.btn-gold:hover { background: var(--gold-700); color: #fff; }

.btn-secondary {
  background: var(--surface);
  color: var(--plum-800);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--plum-600); color: var(--plum-800); background: var(--surface); }

.btn-navy { /* alias, retained for week-render.js */
  background: var(--plum-800);
  color: #fff;
}
.btn-navy:hover { background: var(--plum-700); color: #fff; }

.btn-outline {
  background: transparent;
  color: var(--plum-800);
  border-color: var(--plum-600);
}
.btn-outline:hover { background: var(--plum-800); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--plum-600); color: var(--plum-800); }

.btn-sm { font-size: .8125rem; padding: .5rem 1rem; }

/* --- Stats Bar --------------------------------------------- */
.stat-bar {
  background: transparent;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 1.5rem 0;
}
.stat-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 700px) { .stat-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.stat-item {
  text-align: center;
  color: var(--text-2);
  display: flex; flex-direction: column; gap: .15rem;
}
.stat-number {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--plum-800);
  line-height: 1;
}
.stat-label {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* --- Section Headings --------------------------------------- */
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  font-weight: 500;
  color: var(--plum-900);
  margin-bottom: .5rem;
  letter-spacing: -.005em;
  line-height: 1.15;
}
.section-heading em { color: var(--gold-700); font-style: italic; }
.section-subheading {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--text-2);
  max-width: 620px;
  line-height: 1.55;
}
.section-header { padding: 3rem 0 2rem; }
.section-header--centered { text-align: center; }
.section-heading--centered { margin: 0 auto .5rem; }
.section-subheading--centered { margin: 0 auto; }
.section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-400), transparent);
  margin: 3rem 0;
}

/* --- Feature Cards (home) ---------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: 1rem 0 2.5rem;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.625rem;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.feature-card::before {
  /* soft gold top accent line */
  content: "";
  position: absolute;
  inset: 0 1.5rem auto 1.5rem;
  top: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold-400), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--gold-300);
  color: inherit;
}
.feature-card:hover::before { opacity: 1; }

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--plum-100);
  border-radius: 12px;
  margin-bottom: 1.1rem;
  color: var(--plum-700);
}
.feature-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--plum-900);
  margin-bottom: .35rem;
  line-height: 1.2;
  letter-spacing: -.005em;
}
.feature-card p {
  font-size: .9375rem;
  color: var(--text-2);
  line-height: 1.55;
}
.feature-card.is-disabled { opacity: .72; cursor: default; background: var(--surface-veil); }
.feature-card.is-disabled:hover { transform: none; box-shadow: var(--shadow); border-color: var(--border-soft); }

/* --- Tags / Badges ----------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 99px;
  text-transform: capitalize;
  white-space: nowrap;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.tag-wise     { background: var(--wise-bg);     color: var(--wise-fg);     border-color: rgba(79,95,58,.18); }
.tag-fool     { background: var(--fool-bg);     color: var(--fool-fg);     border-color: rgba(142,61,68,.18); }
.tag-mocker   { background: var(--mocker-bg);   color: var(--mocker-fg);   border-color: rgba(75,46,131,.18); }
.tag-simple   { background: var(--simple-bg);   color: var(--simple-fg);   border-color: rgba(61,84,122,.18); }
.tag-sluggard { background: var(--sluggard-bg); color: var(--sluggard-fg); border-color: rgba(138,94,34,.20); }
.tag-other    { background: var(--other-bg);    color: var(--other-fg);    border-color: rgba(92,80,58,.16); }
.tag-theme    { background: var(--gold-50);     color: var(--gold-800);    border-color: var(--gold-200); }
.tag-ref      { background: var(--plum-50);     color: var(--plum-700);    border-color: var(--plum-200); }

/* --- Filter Bar -------------------------------------------- */
.filter-bar {
  background: rgba(251, 246, 233, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
  padding: 1.25rem 0;
  position: sticky;
  top: 64px;
  z-index: 90;
}
.filter-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}
.filter-group { display: flex; flex-direction: column; gap: .5rem; }
.filter-label {
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.filter-select {
  font-family: var(--font-sans);
  font-size: .9375rem;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .55rem .9rem;
  height: 40px;
  cursor: pointer;
  min-width: 200px;
  max-width: 280px;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A6F25' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.2rem;
}
.filter-select:focus { outline: none; border-color: var(--plum-600); box-shadow: 0 0 0 3px var(--plum-100); }

.pill-group { display: flex; flex-wrap: wrap; gap: .375rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 500;
  padding: .4rem .9rem;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  letter-spacing: .005em;
}
.pill:hover { border-color: var(--plum-600); color: var(--plum-800); background: var(--plum-50); }
.pill.active { color: #fff; border-color: transparent; }
.pill-wise.active     { background: var(--wise-fg); }
.pill-fool.active     { background: var(--fool-fg); }
.pill-mocker.active   { background: var(--mocker-fg); }
.pill-simple.active   { background: var(--simple-fg); }
.pill-sluggard.active { background: var(--sluggard-fg); }
.pill-other.active    { background: var(--plum-700); }
.pill .pill-check { display: none; width: 12px; height: 12px; stroke-width: 2.5; flex-shrink: 0; }
.pill.active .pill-check { display: inline-flex; }

.filter-reset {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gold-700);
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem .8rem;
  border-radius: 8px;
  transition: color .15s, background .15s;
  align-self: flex-end;
  margin-bottom: .25rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.filter-reset:hover { color: var(--plum-800); background: var(--gold-50); }

/* --- Result Bar -------------------------------------------- */
.result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem 0 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.result-count {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-2);
}
.result-count strong {
  color: var(--plum-800);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 1.125rem;
}

/* --- Verse Cards ------------------------------------------- */
.verse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.125rem;
  padding-bottom: 3rem;
}
@media (min-width: 640px) { .verse-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .verse-grid { grid-template-columns: repeat(3, 1fr); } }

.verse-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.375rem 1.375rem 1.25rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.verse-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--gold-300);
}
.verse-ref {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--plum-800);
  letter-spacing: -.005em;
  line-height: 1.1;
}
.verse-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.verse-teaching {
  font-size: .9375rem;
  color: var(--text);
  line-height: 1.55;
  flex-grow: 1;
}
.verse-snippet {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .9375rem;
  color: var(--plum-900);
  border-left: 2px solid var(--gold-400);
  padding: .1rem 0 .1rem .85rem;
  line-height: 1.5;
}
.verse-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .25rem;
  gap: .5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-soft);
  padding-top: .85rem;
}
.verse-link {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--plum-700);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: color .15s, gap .15s;
}
.verse-link:hover { color: var(--plum-800); gap: .4rem; }
.verse-link::after { content: '→'; font-size: .9rem; transition: transform .15s; }
.verse-link:hover::after { transform: translateX(2px); }

.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-2);
  grid-column: 1 / -1;
}
.empty-state h3 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  color: var(--plum-800);
  margin-bottom: .5rem;
}

/* --- Study Guide week-render output ------------------------ */
.week-section {
  padding: 2rem 0 3rem;
  border-bottom: 1px solid var(--border-soft);
}
.week-section:last-child { border-bottom: none; }
.week-number {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: .65rem;
}
.week-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 500;
  color: var(--plum-900);
  margin-bottom: .75rem;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.week-aim {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--text);
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--surface-veil);
  border-radius: var(--radius);
  border-left: 3px solid var(--gold-500);
  line-height: 1.55;
}

.passage-block {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-xs);
}
.passage-label {
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: .55rem;
}
.passage-ref-link {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--plum-800);
  text-decoration: none;
  letter-spacing: -.005em;
}
.passage-ref-link:hover { text-decoration: underline; text-decoration-color: var(--gold-400); text-underline-offset: 4px; }
.passage-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.7;
  margin-top: .75rem;
}

.refs-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.refs-list a, .refs-list span {
  font-family: var(--font-serif);
  font-size: .9375rem;
  color: var(--plum-800);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .4rem .85rem;
  transition: border-color .15s, background .15s, color .15s;
}
.refs-list a:hover { border-color: var(--gold-500); background: var(--gold-50); color: var(--plum-800); }

.sub-heading {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 1.75rem 0 .85rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.sub-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold-300), transparent);
}

.question-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.question-list li {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--text);
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.55;
}
.question-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 3px var(--gold-50);
}
.guidance-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.guidance-list li {
  font-size: .9375rem;
  color: var(--text-2);
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.55;
}
.guidance-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .65em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--plum-600);
}

.person-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .85rem;
  margin: .75rem 0 1.5rem;
}
.person-type-card {
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  border: 1px solid transparent;
  background: var(--surface);
  transition: transform .15s ease, box-shadow .15s ease;
}
.person-type-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.person-type-card .type-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: .25rem;
  letter-spacing: -.005em;
}
.person-type-card p {
  font-family: var(--font-serif);
  font-size: .9375rem;
  line-height: 1.5;
}
.person-type-card.wise     { background: var(--wise-bg);     border-color: rgba(79,95,58,.25);    color: var(--wise-fg); }
.person-type-card.fool     { background: var(--fool-bg);     border-color: rgba(142,61,68,.25);   color: var(--fool-fg); }
.person-type-card.mocker   { background: var(--mocker-bg);   border-color: rgba(75,46,131,.25);   color: var(--mocker-fg); }
.person-type-card.simple   { background: var(--simple-bg);   border-color: rgba(61,84,122,.25);   color: var(--simple-fg); }
.person-type-card.sluggard { background: var(--sluggard-bg); border-color: rgba(138,94,34,.30);   color: var(--sluggard-fg); }

.leader-notes-block {
  background: var(--gold-50);
  border: 1px solid var(--gold-200);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}
.leader-notes-label {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: .5rem;
}
.leader-notes-placeholder {
  font-family: var(--font-serif);
  font-size: .9375rem;
  color: var(--text-2);
  font-style: italic;
}

/* --- Appendix ---------------------------------------------- */
.appendix-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-bottom: 3rem;
}
@media (min-width: 640px) { .appendix-grid { grid-template-columns: repeat(2, 1fr); } }
.appendix-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s, border-color .2s;
}
.appendix-card:hover { box-shadow: var(--shadow); border-color: var(--gold-300); }
.appendix-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--plum-900);
  margin-bottom: .5rem;
  letter-spacing: -.005em;
}
.appendix-card .desc {
  font-family: var(--font-serif);
  font-size: .9375rem;
  color: var(--text-2);
  margin-bottom: 1.1rem;
  line-height: 1.6;
  font-style: italic;
}
.appendix-refs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.appendix-refs a {
  font-family: var(--font-serif);
  font-size: .9375rem;
  color: var(--plum-800);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .375rem .8rem;
  transition: border-color .15s, background .15s, color .15s;
}
.appendix-refs a:hover { border-color: var(--gold-500); background: var(--gold-50); }

/* --- Person Persona page ------------------------------------ */
.persona-intro {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-xs);
}
.persona-intro h2 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--plum-900);
}
.persona-intro p { font-family: var(--font-serif); font-size: 1rem; color: var(--text-2); }

/* --- Site Footer ------------------------------------------- */
.site-footer {
  background: var(--plum-900);
  color: rgba(255,255,255,.7);
  padding: 3rem 0 2.5rem;
  margin-top: 4rem;
  font-size: .875rem;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--gold-500), transparent);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
@media (min-width: 640px) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; align-items: center; }
}
.footer-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.footer-name span { color: var(--gold-200); font-style: italic; }
.footer-links { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.footer-links a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  padding: .4rem .85rem;
  border-radius: 99px;
  transition: background .15s, color .15s;
}
.footer-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.footer-note { color: rgba(255,255,255,.5); font-size: .8125rem; margin-top: .35rem; font-family: var(--font-serif); font-style: italic; }

/* --- Utilities --------------------------------------------- */
.mt-sm  { margin-top: .5rem; }
.mt-md  { margin-top: 1rem; }
.mt-lg  { margin-top: 1.5rem; }
.mb-sm  { margin-bottom: .5rem; }
.mb-md  { margin-bottom: 1rem; }
.mb-lg  { margin-bottom: 1.5rem; }

.text-center { text-align: center; }
.text-muted  { color: var(--text-2); font-size: .9375rem; }
.highlight   { background: var(--gold-100); padding: .15rem .35rem; border-radius: 4px; }

.page-body { padding: 2rem 0 3rem; }

/* --- Skip Navigation --------------------------------------- */
.skip-nav {
  position: absolute;
  top: -9999px;
  left: 0;
  z-index: 9999;
  background: var(--plum-800);
  color: #fff;
  padding: .5rem 1.25rem;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-nav:focus { top: 0; }

/* --- Philosophy "This Is / This Is Not" -------------------- */
.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 2rem 0 1rem;
  text-align: left;
}
@media (max-width: 600px) { .philosophy-grid { grid-template-columns: 1fr; } }
.philosophy-card {
  padding: 1.5rem 1.625rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
}
.philosophy-card-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: .01em;
  display: flex; align-items: center; gap: .5rem;
}
.philosophy-card-heading--is  { color: var(--wise-fg); }
.philosophy-card-heading--not { color: var(--fool-fg); }
.philosophy-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.philosophy-item {
  font-family: var(--font-serif);
  font-size: .9375rem;
  color: var(--text);
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}
.philosophy-indicator {
  position: absolute; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; top: .15em;
  border-radius: 50%; font-size: .75rem; font-weight: 700;
}
.philosophy-indicator--is  { background: rgba(79,95,58,.18); color: var(--wise-fg); }
.philosophy-indicator--not { background: rgba(142,61,68,.18); color: var(--fool-fg); }

/* --- Week List Preview (home page) ------------------------- */
.week-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.5rem;
  text-decoration: none;
  color: var(--text);
  font-size: .9375rem;
  border-bottom: 1px solid var(--border-soft);
  transition: background .15s, padding-left .15s;
}
.week-list-item:last-child { border-bottom: none; }
.week-list-item:hover { background: var(--bg); padding-left: 1.75rem; color: var(--plum-800); }
.week-list-num {
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-700);
  min-width: 60px;
}
.week-list-title {
  flex: 1;
  font-family: var(--font-serif);
  color: var(--text);
}
.week-list-arrow { color: var(--gold-500); font-size: 1rem; transition: transform .15s; }
.week-list-item:hover .week-list-arrow { transform: translateX(3px); }

/* --- Topic Nav Links (appendix) ---------------------------- */
.topic-nav-link {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--plum-800);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: .4rem .95rem;
  transition: all .15s;
}
.topic-nav-link:hover { background: var(--plum-800); color: #fff; border-color: var(--plum-800); }

/* --- Appendix Explore Link --------------------------------- */
.appendix-explore-link {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gold-700);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: gap .15s, color .15s;
}
.appendix-explore-link:hover { color: var(--plum-800); gap: .5rem; }

/* --- Credits Block ----------------------------------------- */
.credits-label {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: .75rem;
}
.credits-list { list-style: none; display: flex; flex-direction: column; gap: .375rem; }
.credits-item { font-family: var(--font-serif); font-size: .9375rem; color: var(--text-2); }

/* --- Page header (study guide index, appendix) -------------- */
.page-header {
  position: relative;
  padding: 3.5rem 0 3rem;
  text-align: center;
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 300px at 50% 0%, rgba(236, 228, 244, .9), transparent 65%),
    radial-gradient(ellipse 500px 240px at 50% 100%, rgba(245, 229, 184, .6), transparent 65%);
  pointer-events: none;
}
.page-header > .container { position: relative; }
.page-header-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 1rem;
}
.page-header-eyebrow::before,
.page-header-eyebrow::after { content: ""; width: 22px; height: 1px; background: var(--gold-400); }
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  color: var(--plum-900);
  margin-bottom: .75rem;
  letter-spacing: -.005em;
  line-height: 1.1;
}
.page-header h1 em { font-style: italic; color: var(--gold-700); }
.page-header p {
  font-family: var(--font-serif);
  color: var(--text-2);
  font-size: 1.0625rem;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}

/* --- Lucide --------------------------------------------------- */
.feature-icon svg, .nav-toggle svg, .nav-icon { stroke-width: 1.6; }
.nav-toggle svg { width: 22px; height: 22px; display: block; }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Nav Toggle ------------------------------------------------ */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: .45rem;
  color: var(--plum-800);
  border-radius: 10px;
  line-height: 0;
  transition: background .15s, border-color .15s;
}
.nav-toggle:hover { border-color: var(--plum-600); background: var(--plum-50); }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* --- Mobile Nav ------------------------------------------------ */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 64px;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-top: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    z-index: 99;
  }
  .site-nav.nav-open { max-height: 360px; }
  .site-nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .95rem 1.5rem;
    font-size: 1rem;
    min-height: 48px;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
  }
  .site-nav a:last-child { border-bottom: none; }

  .pill-group {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent 100%);
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .pill-group::-webkit-scrollbar { display: none; }
}

/* --- Ref Cards (study guide scripture refs) ---------------- */
.ref-cards {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 1.5rem;
}
.ref-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1rem 1.125rem .85rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.ref-card:hover { box-shadow: var(--shadow); border-color: var(--gold-300); }
.ref-card-ref {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--plum-800);
  letter-spacing: -.005em;
}
.ref-card-label {
  font-size: .9rem;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
}

/* --- Context Modal ----------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 50, 82, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}
.modal-panel {
  background: var(--surface);
  border-radius: var(--radius);
  max-width: 540px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  transform: translateY(8px);
  transition: transform .2s ease;
}
.modal-backdrop.is-open .modal-panel { transform: translateY(0); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--plum-800);
  margin: 0;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.125rem;
  color: var(--text-2);
  cursor: pointer;
  padding: .375rem .5rem;
  border-radius: 6px;
  line-height: 1;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--surface-alt); color: var(--text); }
.modal-body {
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  flex: 1;
}
.ctx-verse {
  font-family: var(--font-serif);
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--text-2);
  margin: 0 0 .5rem;
}
.ctx-verse.ctx-target {
  color: var(--text);
  font-weight: 500;
  border-left: 3px solid var(--gold);
  padding-left: .875rem;
}
.ctx-vnum {
  font-family: var(--font-sans);
  font-size: .675rem;
  font-weight: 700;
  color: var(--text-2);
  vertical-align: super;
  margin-right: .2rem;
  line-height: 0;
}
.ctx-target .ctx-vnum { color: var(--gold); }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-translation {
  font-family: var(--font-sans);
  font-size: .75rem;
  color: var(--text-2);
  font-style: italic;
}
button.verse-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* --- Ad Slots ---------------------------------------------- */
.ad-slot {
  background: linear-gradient(to bottom, var(--surface-veil), var(--surface));
  border-bottom: 1px solid var(--border-light);
  padding: 4px 0;
  text-align: center;
}
.ad-slot--top {
  position: sticky;
  top: 0;
  z-index: 800;
}
.ad-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.ad-frame {
  flex: 1;
  max-width: 728px;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: var(--surface-alt);
  border: 1px dashed var(--border);
}
.ad-frame::before {
  content: "AD";
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: var(--font-sans);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--text-3);
  text-transform: uppercase;
}
.ad-frame-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 100%;
  padding: 0 1rem;
  font-family: var(--font-sans);
  font-size: .875rem;
  color: var(--text-2);
  margin-top: 8px;
}
.ad-frame-placeholder strong {
  font-weight: 600;
  color: var(--text);
  font-size: .9375rem;
}
.ad-frame-placeholder small {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ad-frame-placeholder .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
}
.ad-why {
  font-family: var(--font-sans);
  font-size: .75rem;
  color: var(--text-3);
  text-decoration: none;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: .25rem .75rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: color .15s, background .15s, border-color .15s;
}
.ad-why:hover { color: var(--plum-800); background: var(--gold-50); border-color: var(--gold-200); }
.ad-why::after { content: "›"; font-size: .9rem; line-height: 1; }

.ad-slot--anchor {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  border-bottom: none;
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  padding: 4px 0;
}
.ad-slot--anchor .ad-frame { height: 90px; }
.ad-slot--anchor .ad-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, border-color .15s;
}
.ad-slot--anchor .ad-close:hover { color: var(--plum-800); border-color: var(--plum-600); }

body.ad-dismissed { padding-bottom: 0; }
body.ad-dismissed .ad-slot--anchor { display: none; }

@media (max-width: 640px) {
  .ad-slot { padding: 4px 0; }
  .ad-frame { height: 60px; max-width: 320px; border-radius: 4px; }
  .ad-frame::before { font-size: .5625rem; top: 4px; left: 6px; letter-spacing: .12em; }
  .ad-frame-placeholder { font-size: .75rem; gap: .35rem; padding: 0 .5rem; margin-top: 4px; }
  .ad-frame-placeholder strong { font-size: .8125rem; }
  .ad-frame-placeholder small { font-size: .5625rem; letter-spacing: .08em; }

  .ad-slot--anchor { padding: 4px 0; }
  .ad-slot--anchor .ad-frame { height: 60px; }
  .ad-slot--anchor .ad-close { width: 18px; height: 18px; font-size: .75rem; top: 4px; right: 6px; }
  .ad-why { font-size: .6875rem; padding: .2rem .6rem; }
}

/* --- Print ------------------------------------------------- */
@media print {
  .site-header, .filter-bar, .site-footer, .btn { display: none !important; }
  .ad-slot, .ad-slot--anchor { display: none !important; }
  body { background: white; color: black; font-size: 11pt; background-image: none; }
  .week-section { page-break-before: always; padding: 0; border: none; }
  .week-section:first-child { page-break-before: auto; }
  .passage-block, .appendix-card { border: 1px solid #ccc; box-shadow: none; }
}