/* Better Verses design system
   One typeface: Inter, for everything, Scripture included. One accent, deep evergreen, that means
   "go" and appears on the primary action. Neutrals are warm ivory and stone, so the page reads as paper rather
   than software. Tokens are named as roles (surface / on-surface / primary) and components never use a literal
   hex. 48px touch targets, visible focus, reduced-motion respected. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../inter.woff2) format('woff2'); }

:root {
  /* Color roles, light. One green hue, five tones (Material green 50 / 200 / 400 / 800 / 900), on a white page.
     50 comforts, 200 is calm, 400 is hope (rationed), 800 acts, 900 anchors. Scripture stays near-black. */
  --surface: #FFFFFF;
  --surface-low: #F4FAF4;             /* results and quiet panels */
  --surface-high: #E8F5E9;            /* search areas, Today card, soft sections */
  --on-surface: #182019;              /* main text            16.7:1 */
  --on-surface-variant: #59635B;      /* supporting text       6.3:1 */
  --outline: #8E9A90;
  --outline-variant: #D7E1D9;
  --primary: #2E7D32;                 /* buttons, links, active nav   5.1:1 on white */
  --on-primary: #FFFFFF;
  --primary-dark: #1B5E20;            /* pressed state only */
  --leaf: #43A047;                    /* the B tile and the copied toast: bright, not grave */
  --primary-container: #A5D6A7;       /* selected chips, matched words, small labels */
  --on-primary-container: #0F3D14;
  --primary-ink: #2E7D32;             /* references, link text        5.1:1 */
  --mint: #A5D6A7;
  --mint-fresh: #66BB6A;              /* hope: one or two small moments only, never text */
  --celery: #A5D6A7;                  /* the match highlight now uses the calm mint */
  --red-letter: #B8372B;
  --focus: var(--primary);

  --bg: var(--surface); --bg-2: var(--surface-low); --bg-3: var(--surface-high);
  --ink: var(--on-surface); --ink-2: var(--on-surface-variant); --ink-3: var(--outline);
  --line: var(--outline-variant); --accent: var(--primary); --accent-ink: var(--primary-ink);
  --on-accent: var(--on-primary); --accent-soft: var(--primary-container);

  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-verse: var(--font);   /* one sans-serif family everywhere; Scripture is set apart by size and measure, not a second typeface */
  --fs-body: 17px;
  --lh-body: 1.5;
  --fs-verse: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);      /* ~25–32px */
  --lh-verse: 1.38;

  --narrow: 34rem;   /* ~578px: interactive screens */
  --wide: 42rem;     /* ~714px: reading pages */

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-search: 12px;
  --r-xl: 28px;
  --r-pill: 999px;

  --tap: 48px;
  --state-hover: 8%;
  --state-press: 12%;
  --dur: 200ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0F1A11; --surface-low: #15231A; --surface-high: #1C2E20;
    --on-surface: #E6EDE7; --on-surface-variant: #AEBBB1; --outline: #78857B; --outline-variant: #2B3A2E;
    --primary: #81C784; --on-primary: #0A2E10; --primary-dark: #A5D6A7; --leaf: #66BB6A; --leaf: #66BB6A; --primary-container: #2E5A33; --on-primary-container: #C8E6C9; --primary-ink: #A5D6A7;
    --mint: #3E6E4D; --mint-fresh: #66BB6A; --celery: #2E5A33;
    --red-letter: #F2A29C; --focus: var(--primary);
  }
}
:root[data-theme="dark"] {
  --surface: #0F1A11; --surface-low: #15231A; --surface-high: #1C2E20;
  --on-surface: #E6EDE7; --on-surface-variant: #AEBBB1; --outline: #78857B; --outline-variant: #2B3A2E;
  --primary: #81C784; --on-primary: #0A2E10; --primary-dark: #A5D6A7; --leaf: #66BB6A; --primary-container: #2E5A33; --on-primary-container: #C8E6C9; --primary-ink: #A5D6A7;
  --mint: #3E6E4D; --mint-fresh: #66BB6A; --celery: #2E5A33;
  --red-letter: #F2A29C; --focus: var(--primary);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-body); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  letter-spacing: -0.01em;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 .5rem; font-weight: 700; text-wrap: balance; }
h1 { font-family: var(--font); font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; font-size: var(--t-headline); }
h1 .em { color: var(--primary); font-style: normal; }
.hero h1 { max-width: 28ch; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem); margin-bottom: 1rem; }
.hero .hero__dek { font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem); max-width: 46ch; margin-bottom: 1.1rem; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -0.02em; margin-top: 2.25rem; }
h3 { font-size: 1.1rem; letter-spacing: -0.01em; margin-top: 1.5rem; font-weight: 600; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
small, .muted { color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -3rem; background: var(--accent); color: var(--on-accent); padding: .5rem .9rem; border-radius: var(--r-sm); z-index: 10; }
.skip:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Layout */
.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--narrow)); }
main { padding: 1.5rem 0 4rem; }
.section { margin-top: 2rem; }
.section--tight { margin-top: 1.25rem; }
.finder__tag { font-size: .9rem; color: var(--ink-2); margin: .25rem 0 0; }
.finder__tag strong { font-weight: 600; color: var(--ink-2); }
.section > h2:first-child { margin-top: 0; }

/* App bar */
.bar { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); z-index: 5; }
.bar__in { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 1rem; }
.brand { white-space: nowrap; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; min-height: var(--tap); }
.brand__mark { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.brand__mark .tile { fill: var(--leaf); }
.brand__mark .glyph { fill: var(--on-primary); }
.nav { display: flex; gap: .25rem; }
.nav a { color: var(--ink-2); text-decoration: none; padding: .55rem .7rem; border-radius: var(--r-sm); min-height: var(--tap); display: inline-flex; align-items: center; font-size: .95rem; }
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--on-surface) var(--state-hover), transparent); }
.nav a[aria-current="page"] { color: var(--on-primary-container); background: var(--primary-container); }

/* Hero */
.hero { padding-top: 1.5rem; }
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 { margin-bottom: .4rem; }
.hero__dek { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 1.4rem; }

/* Search field */
.finder { display: grid; gap: .75rem; }
.field { position: relative; }
.field input {
  width: 100%; font: inherit; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight: 500; color: var(--ink);
  background: var(--bg-2); border: 1.5px solid var(--line); border-radius: var(--r-search);
  padding: .95rem 1.1rem; min-height: 56px; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field input::placeholder { color: var(--ink-2); opacity: 1; font-weight: 400; }
.field input:focus { outline: none; border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px var(--accent-soft); }
.finder__row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .7rem 1.2rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; background: var(--bg-2); color: var(--ink);
  text-decoration: none; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; cursor: pointer; user-select: none;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--on-surface) var(--state-hover), var(--bg-2)); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.finder .btn--primary { min-height: 54px; padding-inline: 1.6rem; font-size: 1.05rem; }
.btn--primary:hover { background: #276F2B; }
.btn--primary:active { background: var(--primary-dark); transform: scale(.98); }
.btn--ghost { background: transparent; border-color: var(--line); }
.btn--ghost:hover { background: color-mix(in srgb, var(--on-surface) var(--state-hover), transparent); }
.btn--link { background: none; border: 0; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; padding-inline: .5rem; font-weight: 500; }
.btn--link:hover { background: none; text-decoration-thickness: 2px; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .95rem;
  border-radius: var(--r-pill); background: var(--bg-2); border: 0;
  color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip:hover { background: color-mix(in srgb, var(--on-surface) var(--state-hover), var(--bg-2)); text-decoration: none; }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chips__label { font-size: .9rem; color: var(--ink-2); margin: 1rem 0 .5rem; }
.chips--quiet { margin-top: 1.25rem; }
.chips--quiet .chip { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.chips--quiet .chip:hover { background: var(--bg-2); color: var(--ink); }

/* Verse card */
.verse {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  contain: layout paint;
  padding: 1.35rem 1.35rem 1.15rem; margin: 1.25rem 0;
}
.verse--result { animation: rise .45s var(--ease-out) both; background: var(--bg-2); border: 0; box-shadow: 0 1px 0 var(--line), 0 12px 40px -18px rgba(0,0,0,.25); padding: 1.6rem 1.5rem 1.35rem; margin-top: 1.5rem; }
.verse--result .verse__text { font-size: clamp(1.65rem, 1.2rem + 2vw, 2.25rem); }
.verse--result .verse__ref { font-size: 1.05rem; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.verse__for { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-bottom: .6rem; }
.verse__ref { font-size: 1rem; font-weight: 600; color: var(--accent-ink); margin: 0 0 .5rem; }
.verse__text { font-family: var(--font-verse); font-size: var(--fs-verse); line-height: var(--lh-verse); font-weight: 420; margin: 0 0 .75rem; letter-spacing: -0.005em; text-wrap: pretty; }
.verse__text q { quotes: none; }
.verse__tr { font-size: .82rem; color: var(--ink-2); margin: 0; }
.verse__why { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.verse__why h3 { margin: 0 0 .4rem; font-size: .95rem; color: var(--ink-2); font-weight: 600; }
.verse__why p { font-size: .98rem; margin: 0; }
.verse__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.verse__actions .btn { padding-inline: 1rem; }
.verse__more { margin-top: 1rem; font-size: .95rem; }
.verse__more a { font-weight: 600; }

/* Article verse list (topic pages) */
.vlist { list-style: none; padding: 0; margin: 0; }
.vlist > li { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.vlist > li:first-child { border-top: 0; padding-top: .5rem; }
.vlist .verse__text { font-size: 1.2rem; line-height: 1.45; }
.vlist .verse__why { border: 0; padding-top: 0; margin-top: .7rem; }

/* Cards / lists */
.cards { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0; margin: 0; list-style: none; }
.card {
  display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1rem 1rem .95rem; color: var(--ink); text-decoration: none; min-height: 88px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { background: var(--accent-soft); text-decoration: none; }
.card:active { transform: scale(.985); }
.card strong { display: block; font-weight: 650; margin-bottom: .2rem; }
.card span { font-size: .9rem; color: var(--ink-2); }
.list--flow { display: flex; flex-wrap: wrap; gap: .6rem; }
.list--flow li + li { margin-top: 0; }
.card--sit { display: inline-flex; align-items: center; gap: .6rem; min-height: var(--tap); padding: .7rem 1rem; border-radius: var(--r-pill); }
.card--sit strong { margin: 0; }
.card--sit .arrow { color: var(--ink-3); flex: none; }
.list { list-style: none; padding: 0; margin: 0; }
.list li + li { margin-top: .15rem; }
.list a { display: inline-flex; align-items: center; min-height: var(--tap); }

.related { margin-top: 2.5rem; }
.related h2 { font-size: 1.1rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.related a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Daily block */
.daily { border: 0; background: var(--surface-high); border-radius: var(--r-lg); padding: 1.35rem; }
.daily .verse__for time { display: inline-block; background: var(--celery); color: var(--on-primary-container); border-radius: var(--r-pill); padding: .15rem .6rem; }
.daily .verse__for { color: var(--accent-ink); }
.daily__q { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .98rem; }
.daily__q strong { display: block; font-size: .9rem; color: var(--ink-2); font-weight: 600; margin-bottom: .25rem; }

/* Trust callout */
.trust { background: var(--bg-2); border-radius: var(--r-md); padding: 1.1rem 1.2rem; font-size: .95rem; color: var(--ink-2); margin-top: 2rem; }
.trust strong { color: var(--ink); }
.trust--band { margin-top: 2.25rem; padding: 1.6rem 1.4rem; }
.trust--band h2 { margin: 0 0 .4rem; font-size: 1.2rem; color: var(--ink); }
.trust--band p { color: var(--ink-2); }

/* Safety note */
.note { background: var(--bg-2); border-radius: var(--r-md); padding: .8rem 1rem; margin: 1.25rem 0; color: var(--ink-2); font-size: .95rem; }

/* Breadcrumbs */
.crumbs { font-size: .85rem; color: var(--ink-2); margin: 0 0 1rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: .3rem; color: var(--ink-3); }

/* Picks table (occasion pages) */
.picks { display: grid; gap: .5rem; padding: 0; margin: 1rem 0 0; list-style: none; }
.picks li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--line); }
.picks li:first-child { border-top: 0; }
.picks .kind { font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.wording { padding-left: 1.1rem; margin: .5rem 0 0; }
.wording li { margin-bottom: .5rem; }

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: .9rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: var(--tap); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 1rem; color: var(--ink-2); }

/* Prose pages */
.prose h2 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .35rem; }
.prose .todo { background: var(--bg-3); border-radius: var(--r-sm); padding: .15rem .45rem; font-size: .85rem; font-weight: 600; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 8px); background: var(--ink); color: var(--bg); padding: .65rem 1rem; border-radius: var(--r-pill); font-size: .95rem; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); z-index: 20; }
.toast { background: var(--leaf); color: #FFFFFF; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Ad slots: rendered only when site.config ads.enabled is true. Reserved height prevents layout shift. */
.ad-slot { min-height: 100px; margin: 2rem 0; }
.ad-slot-inline { min-height: 250px; }
.ad-slot-footer { min-height: 90px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 2rem 0 calc(3rem + env(safe-area-inset-bottom)); font-size: .9rem; color: var(--ink-2); }
.foot ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
.foot a { color: var(--ink-2); text-decoration: none; display: inline-flex; min-height: var(--tap); align-items: center; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot p { margin: 0 0 .25rem; }

/* 404 / states */
.state { text-align: left; padding: 1rem 0; }
.state .btn { margin-right: .5rem; margin-bottom: .5rem; }

@media (max-width: 480px) {
  /* One big primary action on a phone, like a native app. */
  .finder__row .btn--primary { flex: 1 1 100%; min-height: 56px; font-size: 1.1rem; }
  .finder__row { row-gap: .25rem; }
  .nav a { padding-inline: .45rem; font-size: .9rem; }
  .brand { font-size: 1rem; gap: .45rem; }
  .verse { padding: 1.15rem 1.1rem 1rem; border-radius: var(--r-md); }
  .picks li { grid-template-columns: 1fr; gap: .15rem; }
}

#result, #lead-verse, #today, #random { scroll-margin-top: 72px; }

/* Red letter: words of Jesus */
.rl { color: var(--red-letter); }
.rl-key { color: var(--red-letter); }
@media print { .rl { color: #B3261E; } }

/* ── Full-Bible search ── */
.finder__try { font-size: .9rem; color: var(--ink-2); line-height: 1.6; }
.finder__try a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.finder__try a:hover { border-color: var(--accent-ink); }
.finder__status { font-size: .9rem; color: var(--ink-2); margin: 0; }
.finder__status:empty { display: none; }
.filters[hidden] { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .75rem; font-size: .85rem; color: var(--ink-2); }
.filters label { display: inline-flex; align-items: center; gap: .4rem; }
.filters select { font: inherit; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .35rem .5rem; min-height: 36px; }
.results { margin-top: 1.25rem; scroll-margin-top: 72px; }
.results[hidden] { display: none; }
.results__count { font-size: .9rem; color: var(--ink-2); margin: 0 0 .75rem; }
.results__note { font-size: .95rem; margin: 0 0 .5rem; }
.curated { display: block; background: var(--accent-soft); color: var(--on-accent-soft, var(--ink)); border-radius: var(--r-lg); padding: 1rem 1.15rem; margin: 0 0 1.25rem; text-decoration: none; }
.curated__k { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .2rem; }
.curated strong { display: block; font-size: 1.15rem; color: var(--ink); }
.curated span:last-child { display: block; font-size: .9rem; color: var(--ink-2); margin-top: .2rem; }
.curated:hover { text-decoration: none; background: color-mix(in srgb, var(--on-surface) 6%, var(--accent-soft)); }
.hit { padding: 1.1rem 0 .9rem; border-top: 1px solid var(--line); }
.hit__ref { font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; }
.hit__ref a { color: var(--accent-ink); text-decoration: none; }
.hit__ref a:hover { text-decoration: underline; }
.hit__text { font-family: var(--font-verse); font-size: 1.2rem; line-height: 1.5; margin: 0 0 .5rem; text-wrap: pretty; }
.hit__text mark { background: var(--primary-container); color: inherit; border-radius: 3px; padding: 0 .1em; }
.hit__why { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .25rem; }
.hit__why span { font-size: .78rem; color: var(--ink-2); background: var(--bg-2); border-radius: var(--r-pill); padding: .2rem .6rem; }
.hit__actions { display: flex; flex-wrap: wrap; gap: 0 .25rem; margin-left: -.6rem; }
.hit__actions .btn { min-height: 40px; font-size: .9rem; }
.hit__ctx { background: var(--bg-2); border-radius: var(--r-md); padding: .9rem 1rem; margin: .5rem 0 .25rem; font-size: 1rem; }
.hit__ctxhead { font-size: .8rem; font-weight: 600; color: var(--ink-2); margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .06em; }
.hit__ctx .ctx { margin: 0 0 .45rem; color: var(--ink-2); }
.hit__ctx .ctx--hit { color: var(--ink); font-weight: 500; }
.hit__ctx sup { font-size: .7em; color: var(--ink-3); margin-right: .15em; }
.hit__ctxfoot { margin: .6rem 0 0; font-size: .9rem; }
.results__more { margin-top: 1rem; }
.searchmore { background: var(--bg-2); border-radius: var(--r-lg); padding: 1.25rem 1.25rem 1.35rem; }
.searchmore h2 { margin-top: 0; font-size: 1.2rem; }
.chip--more { background: transparent; border: 1px solid var(--line); }
@media (max-width: 480px) { .finder__try { flex-basis: 100%; } }
@media (max-width: 380px) {
  /* Very narrow phones: the B stands in for the wordmark so all three links fit. */
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .brand__mark { width: 34px; height: 34px; border-radius: 9px; }
  .nav { gap: 0; }
}

/* "Is that in the Bible?" card */
.saying { border-radius: var(--r-lg); padding: 1.1rem 1.2rem 1rem; margin: 0 0 1.25rem; background: var(--surface-high); }
.saying--not { background: var(--bg-2); }
.saying--misquote { background: var(--bg-2); }
.saying__k { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .35rem; }
.saying--not .saying__k { color: var(--red-letter); }
.saying__note { margin: 0 0 .75rem; }
.saying__ref { font-weight: 600; color: var(--accent-ink); margin: 0 0 .25rem; font-size: .95rem; }
.saying__text { font-family: var(--font-verse); font-size: 1.2rem; line-height: 1.5; margin: 0 0 .5rem; }
.saying__more { margin: 0; font-size: .9rem; }

.fine { font-size: .9rem; color: var(--ink-2); margin: 1rem 0 0; }

/* ── Header menu ──
   Desktop: Search · Topics · Journal · For Ministry in the bar, plus a Menu with everything.
   Phones: brand + Search + Menu only, so nothing scrolls sideways. */
.menu { position: relative; }
.menu summary { list-style: none; display: inline-flex; align-items: center; gap: .35rem; min-height: var(--tap); padding: .55rem .7rem; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; font-size: .95rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { color: var(--ink); background: color-mix(in srgb, var(--on-surface) var(--state-hover), transparent); }
.menu__list { position: absolute; right: 0; top: calc(100% + .35rem); min-width: 220px; margin: 0; padding: .4rem; list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 12px 40px -12px rgba(0,0,0,.3); z-index: 20; }
.menu__list a { display: flex; align-items: center; min-height: var(--tap); padding: .5rem .8rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: 1rem; }
.menu__list a:hover { background: var(--bg-2); }
.menu__list a[aria-current="page"] { color: var(--on-primary-container); background: var(--primary-container); }
@media (max-width: 720px) {
  .nav > a:not([href$="search/"]) { display: none; }
  .menu summary span { display: none; }
  .menu summary { padding: .55rem .6rem; }
}
@media (min-width: 721px) { .menu summary span { display: inline; } }

/* ── Passages, lists, tools ── */
.passage { margin: 1.25rem 0; padding: 1rem 1.15rem; background: var(--bg-2); border-radius: var(--r-lg); }
.passage .verse__ref { margin-bottom: .35rem; }
.passage .verse__ref a { color: var(--accent-ink); text-decoration: none; }
.passage .verse__text { margin: 0 0 .6rem; font-size: clamp(1.2rem, 1rem + .8vw, 1.45rem); }
.passage .vn { font-size: .6em; color: var(--ink-3); vertical-align: super; margin-right: .15em; font-family: var(--font); }
.passage figcaption { margin: 0; }
.btn--inline { min-height: 0; padding: 0; font-size: inherit; vertical-align: baseline; }
.list--cards, .tools, .posts { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .75rem; }
.list--cards a, .tools a, .posts a { display: block; padding: 1rem 1.15rem; background: var(--bg-2); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; }
.list--cards a:hover, .tools a:hover, .posts a:hover { background: color-mix(in srgb, var(--on-surface) 5%, var(--bg-2)); }
.list--cards strong, .tools strong, .posts strong { display: block; font-size: 1.1rem; margin-bottom: .2rem; letter-spacing: -.01em; }
.list--cards span, .tools span, .posts span { display: block; color: var(--ink-2); font-size: .95rem; }
.posts time { display: block; font-size: .82rem; color: var(--ink-3); margin-top: .5rem; }
@media (min-width: 640px) { .tools { grid-template-columns: 1fr 1fr; } }
.post h2 { margin-top: 2rem; }
.post__meta { color: var(--ink-2); font-size: .9rem; margin: -.25rem 0 1.5rem; }
.toc ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.toc a { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .8rem; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink); text-decoration: none; font-size: .9rem; }
.toc a:hover { background: var(--bg-3); }
.guide__section { scroll-margin-top: 72px; }
.guide__item { margin-bottom: 1.75rem; }
.guide__item .passage { margin-bottom: .5rem; }
.guide__why { margin: 0; color: var(--ink-2); }
.guide__why a { white-space: nowrap; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

.hero__sub { font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); font-weight: 400; line-height: 1.3; color: var(--ink); margin: 0 0 .35rem; letter-spacing: -.01em; max-width: 40ch; margin-bottom: .9rem; }
.hero__line { font-family: var(--font-verse); font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem); color: var(--primary-ink); margin: 0 0 .9rem; }

.newsletter { background: var(--surface-high); border-radius: var(--r-lg); padding: 1.35rem 1.35rem 1.5rem; }
.newsletter h2 { margin-top: 0; }
.newsletter p { color: var(--ink-2); }

.beliefs { padding-left: 1.4rem; margin: 1.5rem 0; }
.beliefs li { margin-bottom: 1.1rem; padding-left: .3rem; }
.beliefs li::marker { font-weight: 700; color: var(--primary); }

.leaveout { background: var(--bg-2); border-radius: var(--r-lg); padding: 1.15rem 1.25rem 1.2rem; }
.leaveout h2 { margin-top: 0; font-size: 1.15rem; }
.leaveout p { margin: 0; color: var(--ink-2); }
.leaveout strong { color: var(--ink); }
.say { list-style: none; padding: 0; margin: .75rem 0 0; }
.say li { padding: .6rem 0; border-top: 1px solid var(--line); }
.say li:first-child { border-top: 0; }

.signup { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .5rem; }
.signup input { flex: 1 1 220px; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: .85rem 1.1rem; min-height: 54px; }
.signup input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.signup .btn { flex: 1 1 220px; min-height: 54px; }
.newsletter .fine { margin-top: .5rem; }

/* "A little help finding" / "the right words.": the forced break holds on any phone 360px and up; below that it wraps naturally. */
.hero__br { display: inline; }
.hero h1 { text-wrap: initial; }
@media (max-width: 639px) { .hero__br { display: none; } .hero h1 { text-wrap: balance; } }

/* /send/ */
.send { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.send__row { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.send__who { margin: 0 0 .6rem; font-size: 1.35rem; }
.send__card { background: var(--surface-high); border-radius: var(--r-lg); padding: 1rem 1.15rem; }
.send__text { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); margin-bottom: .7rem; }
.send__line { margin: 0 0 .4rem; color: var(--ink); }
.send__k { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-right: .3rem; }
.send__more { margin: 0; font-size: .9rem; }

.results__note--soft { color: var(--ink-2); font-size: .9rem; }

.kicker { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin: 0 0 .4rem; }

.tool__pdf b { color: var(--primary); font-weight: 600; }
.tools .tool__about { display: inline-block; background: transparent; padding: .25rem .4rem; margin: .1rem 0 0 .75rem; font-size: .85rem; color: var(--ink-2); border-radius: var(--r-sm); text-decoration: underline; }
.tools .tool__about:hover { background: var(--bg-2); }

.btn--lg { min-height: 56px; padding-inline: 1.8rem; font-size: 1.1rem; }
@media (max-width: 480px) { .btn-row .btn--lg { flex: 1 1 100%; } }

.foot__signup { margin: 0 0 1.25rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--line); }
.foot__label { display: block; font-size: .95rem; color: var(--ink); margin: 0 0 .5rem; }
.foot__row { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 34rem; }
.foot__row input { flex: 1 1 200px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: .6rem 1rem; min-height: 46px; }
.foot__row input:focus { border-color: var(--primary); outline: none; }
.foot__row .btn { min-height: 46px; }

.finder__ask { display: block; font-weight: 600; font-size: 1.05rem; margin: 0 0 .5rem; }
.paths { margin-top: .5rem; }
@media (min-width: 640px) { .paths { grid-template-columns: 1fr 1fr 1fr; } }

/* The hand-picked answer, shown first when a search names a situation we curated for */
.answer { background: var(--surface-high); border-radius: var(--r-lg); padding: 1.25rem 1.25rem 1.1rem; margin: 0 0 1.5rem; }
.answer__k { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin: 0 0 .5rem; }
.answer__text { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); }
.answer .verse__why { border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent); padding-top: .8rem; margin-top: .8rem; }
.answer__skip p { color: var(--ink-2); }
.answer .verse__actions { margin-top: 1rem; }
.results__divider { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 1.5rem 0 .25rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.answer__lead { margin: 0 0 1rem; color: var(--ink-2); }
.pick { padding: .9rem 0; border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent); }
.pick--lead { border-top: 0; padding-top: 0; }
.pick__text { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); margin-bottom: .45rem; }
.pick--lead .pick__text { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem); }
.pick__why { margin: 0 0 .2rem; color: var(--ink-2); font-size: .95rem; }
.answer__more { margin: 1rem 0 0; font-size: .95rem; }
.results__divider .btn { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.results__hits[hidden] { display: none; }

.vlist__acts { margin: .6rem 0 0; display: flex; gap: 1rem; }
.vlist__acts .btn { padding-left: 0; }
.near { background: var(--surface-high); border-radius: var(--r-lg); padding: 1.1rem 1.15rem .6rem; margin: 0 0 1rem; }
.near__list { list-style: none; padding: 0; margin: .5rem 0 0; }
.near__list a { display: block; padding: .7rem 0; border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent); text-decoration: none; color: var(--ink); }
.near__list li:first-child a { border-top: 0; }
.near__list strong { display: block; font-size: 1.05rem; }
.near__list span { color: var(--ink-2); font-size: .9rem; }
.chip--season { background: var(--primary-container); border-color: transparent; color: var(--on-primary-container); font-weight: 600; }


/* ==========================================================================
   Design system v2 (sans-serif only, Material 3 roles, card discipline)
   Type roles: display (home hero only), headline (page H1), title-l (section H2),
   title-m (H3, component titles), body-l (Scripture), body (reading), label (controls, meta).
   Shape: xs 4 · sm 8 (chips, small controls) · md 12 (inputs, containers) · lg 16 (feature containers) · full (buttons).
   Surfaces: base → low (#F4FAF4) → high (#E8F5E9). Borders only where a surface change can't do the job.
   ========================================================================== */
:root {
  --t-display: clamp(2.125rem, 1.35rem + 3.2vw, 3.25rem);
  --t-headline: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem);
  --t-title-l: clamp(1.25rem, 1.12rem + .5vw, 1.5rem);
  --t-title-m: 1.125rem;
  --t-body-l: clamp(1.1875rem, 1.1rem + .35vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-label: .875rem;
}
h2 { font-size: var(--t-title-l); font-weight: 650; letter-spacing: -0.012em; line-height: 1.25; }
h3 { font-size: var(--t-title-m); font-weight: 600; line-height: 1.35; }
.hero h1 { font-size: var(--t-display); letter-spacing: -0.028em; line-height: 1.08; max-width: 20ch; }
.hero .hero__dek, .hero__dek { font-size: 1.125rem; line-height: 1.55; }

/* Scripture: same family, larger size, generous measure; the words themselves do the work */
.verse__text, .hit__text, .saying__text, .pick__text, .answer__text, .send__text, .passage .verse__text {
  font-family: var(--font); font-weight: 400; font-size: var(--t-body-l); line-height: 1.55; letter-spacing: -0.003em; color: var(--ink); max-width: 38em;
}
.pick--lead .pick__text, .vlist__lead .verse__text, .daily .verse__text, .verse .verse__text { font-size: clamp(1.3125rem, 1.15rem + .7vw, 1.5rem); line-height: 1.45; letter-spacing: -0.008em; }
.verse__ref, .hit__ref, .saying__ref { font-size: var(--t-label); font-weight: 650; letter-spacing: .01em; }
.hit__ref a { text-decoration: none; }

/* Chips: M3 small shape */
.chip, .card--sit, .toc a { border-radius: var(--r-sm); }
.chip:hover, .card--sit:hover, .toc a:hover { background: color-mix(in srgb, var(--on-surface) 6%, var(--bg-2)); }

/* Card discipline: lists are lists. Dividers instead of a rounded box per item. */
.list--cards, .tools, .posts { gap: 0; }
.list--cards a, .tools a, .posts a { background: transparent; border-radius: 0; padding: 1rem 0; border-top: 1px solid var(--line); }
.list--cards li:first-child a, .tools li:first-child a, .posts li:first-child a { border-top: 0; }
.list--cards a:hover, .tools a:hover, .posts a:hover { background: transparent; }
.list--cards a:hover strong, .tools a:hover strong, .posts a:hover strong { color: var(--primary); }
@media (min-width: 640px) { .tools { grid-template-columns: 1fr; } }
.tools .tool__about { margin: -.4rem 0 .6rem; padding: 0; display: inline-block; }

/* Supporting sections are plain text on the page, separated by a rule, not boxed */
.plain, .searchmore { background: transparent; padding: 1.5rem 0 0; border-top: 1px solid var(--line); border-radius: 0; }
.plain h2, .searchmore h2 { margin-top: 0; }
.trust { background: transparent; padding: 1rem 0 0; border-top: 1px solid var(--line); border-radius: 0; margin-top: 2rem; }
.hit__why span { background: transparent; padding: 0; border-radius: 0; }
.hit__why span + span::before { content: "·"; margin: 0 .4rem; color: var(--ink-3); }

/* The containers that remain are the ones that are distinct objects:
   the hand-picked answer, a caution, the day's verse, a download, a form. */
.answer, .near, .daily, .newsletter, .saying { border-radius: var(--r-lg); }
.note, .leaveout, .passage, .hit__ctx { border-radius: var(--r-md); }

/* Home */
.links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 1rem 0 0; font-size: .95rem; }
.links a { color: var(--ink-2); text-underline-offset: 3px; min-height: 40px; display: inline-flex; align-items: center; }
.links a:hover { color: var(--primary); }
.section--tight { margin-top: 1.75rem; }

/* Topic page list: the first verse leads; the others follow the same rhythm */
.vlist { counter-reset: v; }
.vlist > li { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.vlist > li:first-child { border-top: 0; padding-top: .5rem; }
.vlist__lead { }
.vlist > li.is-target { background: var(--surface-high); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; border-radius: var(--r-md); }
.vlist__acts { gap: 1.25rem; }