/* The Bible text is set in Source Serif, the face of the 2026 edition; chapter initials use EB Garamond
   ExtraBold. Both are under the SIL Open Font License (assets/fonts/OFL.txt). */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/SourceSerif4-Regular.ttf") format("truetype"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/SourceSerif4-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/SourceSerif4-Italic.ttf") format("truetype"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/SourceSerif4-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 800; font-display: block; src: url("../fonts/EBGaramond-ExtraBold.ttf") format("truetype"); }

/* Thomson Bible — shared look (taken from the iPhone app's Theme.swift).
   Colours are built from the three source colours: black, white and the blue measured from
   the PDF (#0076BA). The background family follows the reader's black ↔ blue slider; prefs.js
   writes the current values into the --bg / --page / --surface / --raised variables. */

:root {
  --blue: rgb(0, 118, 186);            /* words of God and of Christ, exactly as printed */
  --blue-hc: rgb(64, 158, 214);        /* same hue, lifted for dark surfaces */
  --midnight: rgb(6, 22, 36);
  --deep-blue: rgb(6, 62, 102);
  --paper-top: rgb(244, 248, 253);
  --paper-bottom: rgb(206, 225, 243);

  --serif: Georgia, Gelasio, "Times New Roman", serif;
  --scripture: "Source Serif 4", Georgia, "Times New Roman", serif;
  --greek: "Times New Roman", "Noto Serif", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;

  --spring: cubic-bezier(.22, 1.2, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --glow: 1;
  --fs: 19px;                          /* reading text size and line spacing (set by the reader's settings) */
  --ls: 1;
  color-scheme: dark;

  /* dark (default tint) */
  --bg: rgb(9, 14, 20);
  --page: rgb(11, 18, 26);
  --surface: rgb(20, 31, 43);
  --raised: rgb(29, 43, 58);
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, .62);
  --ink-3: rgba(255, 255, 255, .36);
  --accent: rgb(64, 158, 214);
  --stroke: rgba(255, 255, 255, .08);
  --shadow: rgba(0, 0, 0, .35);
  --on-ink: #000;                      /* text on an ink-filled control */
  --art-ink: #fff;                     /* text on artwork */
  --art-top: var(--midnight);
  --art-bottom: #000;
  --selection: rgba(0, 118, 186, .32);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: rgb(236, 243, 250);
  --page: #fff;
  --surface: #fff;
  --raised: rgb(236, 241, 247);
  --ink: #000;
  --ink-2: rgba(0, 0, 0, .55);
  --ink-3: rgba(0, 0, 0, .3);
  --accent: rgb(0, 118, 186);
  --stroke: rgba(0, 0, 0, .06);
  --shadow: rgba(0, 40, 70, .10);
  --on-ink: #fff;
  --art-ink: var(--deep-blue);
  --art-top: var(--paper-top);
  --art-bottom: var(--paper-bottom);
  --selection: rgba(0, 118, 186, .16);
}

*, *::before, *::after { box-sizing: border-box; }
/* Feels like an app on a phone: the page never slides sideways (nothing can stick out past the
   screen edge), taps don't flash or zoom (pinch zoom still works), and buttons and pictures don't
   get selected or pop up a menu when held. */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overflow-x: hidden; overscroll-behavior-x: none; touch-action: manipulation;
}
body {
  margin: 0;
  position: relative; width: 100%; overflow-x: clip; overscroll-behavior-x: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img, svg, canvas { display: block; }
button, a, label, nav, [role="button"], [role="tab"], [role="switch"], img, svg, canvas {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
img { -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
::selection { background: var(--selection); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.glyph { flex: none; }

/* ---------- Background: deep blue-black with a barely-there blue light that slowly drifts ---------- */
.app-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); pointer-events: none; }
.app-bg i {
  position: absolute; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, rgba(var(--glow-rgb, 0, 118, 186), var(--a)), rgba(var(--glow-rgb, 0, 118, 186), 0));
}
.app-bg i:nth-child(1) { --a: calc(.2 * var(--glow) + .3 * var(--wash-k, 0)); width: 220vmax; height: 220vmax; left: -25vmax; top: -112vmax; animation: drift1 54s ease-in-out infinite alternate; }
.app-bg i:nth-child(2) { --a: calc(.1 * var(--glow) + .14 * var(--wash-k, 0)); width: 180vmax; height: 180vmax; left: -95vmax; top: -45vmax; animation: drift2 66s ease-in-out infinite alternate; }
.app-bg i:nth-child(3) { --a: calc(.08 * var(--glow) + .1 * var(--wash-k, 0)); width: 200vmax; height: 200vmax; left: -10vmax; top: 30vh; }
:root[data-theme="light"] .app-bg i:nth-child(1) { --a: calc(.16 * var(--glow)); }
:root[data-theme="light"] .app-bg i:nth-child(2) { --a: calc(.08 * var(--glow)); }
:root[data-theme="light"] .app-bg i:nth-child(3) { --a: calc(.07 * var(--glow)); }
@keyframes drift1 { from { transform: translate(8vmax, -2vmax); } to { transform: translate(-8vmax, 3vmax); } }
@keyframes drift2 { from { transform: translate(-6vmax, 4vmax); } to { transform: translate(7vmax, -4vmax); } }

/* ---------- Logo mark (Calvin's CTB monogram: silver on dark, pewter on light) ---------- */
.logo-mark { height: calc(var(--s, 46px) * .78); aspect-ratio: 936 / 647; flex: none; position: relative; }
.logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-mark .light { display: none; }
:root[data-theme="light"] .logo-mark .dark { display: none; }
:root[data-theme="light"] .logo-mark .light { display: block; }

/* ---------- Text styles ---------- */
.eyebrow { font: 700 11.5px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
.display { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }

/* ---------- Surfaces ---------- */
.card {
  background: var(--surface); border-radius: 22px;
  box-shadow: inset 0 0 0 .75px var(--stroke), 0 6px 14px var(--shadow);
}

/* ---------- Buttons (CapsuleButtonStyle, IconButton, PressableStyle) ---------- */
.pressable { transition: transform .32s var(--spring), opacity .2s ease, filter .2s ease; }
.pressable:active { transform: scale(.96); opacity: .88; transition-duration: .08s; }
@media (prefers-reduced-motion: reduce) { .pressable:active { transform: none; } }

.capsule {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border-radius: 999px; white-space: nowrap;
  font: 600 16px/1 var(--sans); position: relative; isolation: isolate;
}
.capsule::after {               /* the app's top-lit hairline */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px; background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.capsule.ink { background: var(--ink); color: var(--on-ink); box-shadow: 0 4px 10px var(--shadow); }
.capsule.on-dark { background: #fff; color: #000; box-shadow: 0 5px 12px rgba(0, 0, 0, .3); }
.capsule.accent { background: linear-gradient(var(--blue-hc), var(--blue)); color: #fff; box-shadow: 0 6px 14px rgba(0, 118, 186, .45); }
.capsule.plain { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--stroke); }
.capsule.plain::after { display: none; }
.capsule.glass { background: color-mix(in srgb, var(--art-ink) 12%, transparent); color: var(--art-ink); box-shadow: inset 0 0 0 .75px color-mix(in srgb, var(--art-ink) 25%, transparent); }
.capsule.glass::after { display: none; }
.capsule:hover { filter: brightness(1.04); }

.icon-btn {
  width: var(--s, 44px); height: var(--s, 44px); border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--ink);
  background: var(--surface); box-shadow: inset 0 0 0 .75px var(--stroke), 0 3px 8px var(--shadow);
}
.icon-btn.clear { background: none; box-shadow: none; }

/* ---------- Segmented pills ---------- */
.pills {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; position: relative;
  border-radius: 999px; background: var(--surface);
  box-shadow: inset 0 0 0 .75px var(--stroke), 0 4px 10px var(--shadow);
}
.pills.wordy { grid-auto-columns: auto; }
.pills .thumb {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink);
  box-shadow: 0 2px 6px var(--shadow); transition: transform .38s var(--spring), width .38s var(--spring);
}
.pills button {
  position: relative; z-index: 1; min-height: 40px; padding: 0 12px; border-radius: 999px;
  font: 600 14.5px/1 var(--sans); color: var(--ink-2); transition: color .25s ease; white-space: nowrap;
}
.pills button[aria-pressed="true"] { color: var(--bg); }
:root[data-theme="light"] .pills button[aria-pressed="true"] { color: #fff; }

/* ---------- Switch (BlueToggleStyle) ---------- */
.switch-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 54px; }
.switch-row .text { flex: 1; min-width: 0; }
.switch-row .title { font: 400 17px/1.25 var(--sans); }
.switch-row .sub { font: 400 13px/1.3 var(--sans); color: var(--ink-2); margin-top: 2px; }
.switch {
  width: 50px; height: 30px; border-radius: 999px; flex: none; position: relative;
  background: var(--raised); box-shadow: inset 0 0 0 .75px var(--stroke); transition: background .25s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .35s var(--spring);
}
[aria-checked="true"] .switch { background: var(--blue); }
[aria-checked="true"] .switch::after { transform: translateX(20px); }

.glyph-badge { width: 32px; height: 32px; border-radius: 10px; background: var(--raised); display: grid; place-items: center; flex: none; color: var(--ink); }

/* ---------- Bottom panels (the app's own sheets; a centred card on wide screens) ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .45); opacity: 0;
  transition: opacity .3s ease; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
:root[data-theme="light"] .scrim { background: rgba(0, 20, 40, .22); }
.scrim.open { opacity: 1; }
.sheet {
  position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; max-height: min(88dvh, 860px);
  display: flex; flex-direction: column;
  background: var(--page); color: var(--ink);
  border-radius: 32px 32px 0 0; box-shadow: inset 0 .75px 0 var(--stroke), 0 -10px 40px rgba(0, 0, 0, .35);
  transform: translateY(105%); transition: transform .5s var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.open { transform: none; }
.sheet .grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--ink-3); margin: 8px auto 0; flex: none; }
.sheet .sheet-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px 12px; flex: none; }
.sheet .sheet-head h2 { flex: 1; margin: 0; font: 700 26px/1.15 var(--serif); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Panels scroll up and down only: they never slide sideways (on phones a wide line let the Greek
   panel be dragged left and right). */
.sheet .sheet-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; padding: 4px 20px 24px; -webkit-overflow-scrolling: touch; }
.sheet .sheet-body { overflow-wrap: anywhere; }
.sheet .close { --s: 40px; background: var(--raised); }
@media (min-width: 760px) {
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, calc(100vw - 48px)); max-height: min(82vh, 820px);
    border-radius: 28px; transform: translate(-50%, -46%) scale(.96); opacity: 0;
    transition: transform .42s var(--ease-out), opacity .25s ease;
    box-shadow: inset 0 0 0 .75px var(--stroke), 0 30px 80px rgba(0, 0, 0, .45);
  }
  .sheet.open { transform: translate(-50%, -50%); opacity: 1; }
  .sheet .grabber { display: none; }
  .sheet .sheet-head { padding-top: 22px; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 120;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--on-ink);
  font: 600 14px/1 var(--sans); box-shadow: 0 8px 24px var(--shadow); transition: transform .4s var(--spring), opacity .25s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Scripture text (runs as printed: blue words, bold quotations) ---------- */
.w-blue { color: var(--blue); }
:root[data-theme="dark"] .hc .w-blue { color: var(--blue-hc); }
.underline-blue .w-blue { text-decoration: underline dotted rgba(0, 118, 186, .7); text-underline-offset: .18em; }
.w-bold { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .app-bg i { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Sliders ---------- */
.slider { position: relative; height: 40px; flex: 1; min-width: 0; touch-action: none; cursor: pointer; --f: 0; }
.slider .track, .slider .fill { position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; }
.slider .track { left: 0; right: 0; background: var(--raised); }
.slider .fill { left: 0; width: max(6px, calc(var(--f) * 100%)); background: var(--blue); }
.slider .knob {
  position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; left: calc(var(--f) * (100% - 30px));
  border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center;
  font: 700 11px/1 var(--rounded); box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.slider.tint .track { height: 12px; margin-top: -6px; border-radius: 6px; background: linear-gradient(90deg, rgb(5, 5, 6), rgb(12, 22, 32) 50%, rgb(36, 104, 172)); box-shadow: inset 0 0 0 .75px var(--stroke); }
/* Light mode: the slider goes from white to blue, as the background does. */
:root[data-theme="light"] .slider.tint .track { background: linear-gradient(90deg, rgb(250, 250, 251), rgb(228, 238, 250) 50%, rgb(150, 195, 238)); }
.slider.tint .fill { display: none; }
.slider.tint .knob { width: 28px; height: 28px; margin-top: -14px; left: calc(var(--f) * (100% - 28px)); background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

/* ---------- Printed page text (PagedReader: Source Serif, justified, never hyphenated) ---------- */
.page-text {
  font-family: var(--scripture); font-size: var(--fs); line-height: calc(1.14 + .36 * var(--ls));
  text-align: justify; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; color: var(--ink);
}
.page-text .opener { text-align: center; break-inside: avoid; clear: both; }
.page-text .ob { font: 600 max(11px, calc(var(--fs) * .62))/1.3 var(--scripture); letter-spacing: calc(var(--fs) * .18); color: var(--accent); text-transform: uppercase; margin: 0 0 calc(var(--fs) * .2); text-indent: calc(var(--fs) * .18); }
.page-text .on { font: 400 calc(var(--fs) * 3.1)/1.12 var(--scripture); margin: 0 0 calc(var(--fs) * .9); color: var(--ink); }
.page-text .rule { width: 60px; height: 1px; background: var(--stroke); margin: calc(var(--fs) * -.4) auto calc(var(--fs) * 1.2); }
.page-text .v { margin: 0 0 calc(var(--fs) * .5); }
.page-text .vt { border-radius: 4px; transition: background-color .25s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-text .v.sel .vt { background: var(--selection); }
.page-text .v.flash .vt { background: rgba(0, 118, 186, .2); }
.page-text .vn { font-size: .6em; color: var(--accent); position: relative; top: -.53em; line-height: 0; }
.page-text .mark { font: 700 .62em/0 var(--sans); color: var(--accent); position: relative; top: -.48em; }
.page-text .v.omitted .vt { color: var(--ink-2); }
.page-text.no-numbers .vn { display: none; }
/* Calvin's notes: a small blue letter where the print has a footnote number. */
.page-text .nl { font: 600 .6em/0 var(--scripture); color: var(--accent); position: relative; top: -.62em; margin-left: .03em; }
/* A chapter's first verse: the decorated initial, three lines tall, with the text around it, and the
   rest of the first word in small capitals. */
.page-text .initial {
  float: left; display: block;
  --line: calc(var(--fs) * (1.14 + .36 * var(--ls)));
  width: calc(var(--line) * 2 + var(--fs) * .66); height: calc(var(--line) * 2 + var(--fs) * .66);
  margin: calc((var(--line) - var(--fs)) / 2 + var(--fs) * .1) calc(var(--fs) * .45) 0 0;
}
.page-text .sc { font-size: .8em; letter-spacing: .06em; }
.page-text .init-off { display: none; }
.page-text.no-initials .init-on { display: none; }
.page-text.no-initials .init-off { display: inline; }

/* ---------- The opening animation's monogram (launch.js) ---------- */
.launch-logo { position: relative; }
.ll-stage { position: absolute; inset: 0; }
.ll-light { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 8 / 3; pointer-events: none; will-change: transform, opacity; }
.ll-halo {
  position: absolute; left: 50%; top: 50%; width: 37.5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, .55) 25%, rgba(217, 217, 217, .18) 55%, rgba(255, 255, 255, 0));
}
.ll-flare {
  position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; translate: 0 -50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}
:root[data-theme="light"] .ll-halo { background: radial-gradient(closest-side, rgba(0, 118, 186, .5), rgba(0, 118, 186, .18) 30%, rgba(0, 118, 186, 0)); }
:root[data-theme="light"] .ll-flare { background: linear-gradient(90deg, rgba(0, 118, 186, 0), rgba(0, 118, 186, .45), rgba(0, 118, 186, 0)); }
.ll-mark { position: absolute; inset: 0; will-change: transform, opacity, filter; }
.ll-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ll-mark .light { display: none; }
:root[data-theme="light"] .ll-mark .dark { display: none; }
:root[data-theme="light"] .ll-mark .light { display: block; }
/* a slanted band of light across the letters (only on the letters) */
.ll-glint {
  position: absolute; inset: 0; pointer-events: none; --sweep: 0; --p: calc(-30% + var(--sweep) * 160%);
  -webkit-mask: url(../img/ctb-silver.png) center / contain no-repeat; mask: url(../img/ctb-silver.png) center / contain no-repeat;
  background: linear-gradient(108deg, rgba(255, 255, 255, 0) calc(var(--p) - 17%), rgba(255, 255, 255, .8) var(--p), rgba(255, 255, 255, 0) calc(var(--p) + 17%));
  mix-blend-mode: plus-lighter;
}
:root[data-theme="light"] .ll-glint { mix-blend-mode: normal; opacity: .55; }

/* On artwork in light mode, the white button turns ink (the app's CapsuleButtonStyle). */
:root[data-theme="light"] .capsule.on-dark { background: #000; color: #fff; box-shadow: 0 4px 10px var(--shadow); }

/* ---------- Ways to give (support.js) ---------- */
.give-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 22px;
  display: flex; flex-direction: column; gap: 10px; color: var(--art-ink);
  background: linear-gradient(to bottom left, var(--art-top), var(--art-bottom));
  box-shadow: inset 0 0 0 .75px var(--stroke), 0 8px 16px var(--shadow);
}
.give-light { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; filter: blur(2.5px); }
.give-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
:root[data-theme="light"] .give-shade { background: linear-gradient(transparent, rgba(255, 255, 255, .55)); }
.give-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.give-eyebrow { margin: 0 0 8px; font: 700 11.5px/1.2 var(--sans); letter-spacing: 1.8px; text-transform: uppercase; color: color-mix(in srgb, var(--art-ink) 80%, transparent); }
.give-goal {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--art-ink) 14%, transparent); box-shadow: inset 0 0 0 .75px color-mix(in srgb, var(--art-ink) 22%, transparent);
}
.give-bible { width: 108px; aspect-ratio: 1; flex: none; margin: -8px -4px 0 0; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4)); }
:root[data-theme="light"] .give-bible { filter: drop-shadow(0 8px 14px rgba(0, 40, 70, .14)); }
.give-title { margin: 0; font: 400 27px/1.15 var(--serif); }
.give-text { margin: 0; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--art-ink) 78%, transparent); }
.give-btn { margin-top: 8px; width: 100%; }
.give-card.large { padding: clamp(24px, 3.4vw, 38px); min-height: 440px; }
.give-card.large .give-top { flex: 1; }
.give-card.large .give-bible { width: clamp(130px, 15vw, 190px); }
.give-card.large .give-title { font-size: clamp(30px, 3.6vw, 44px); }
.give-card.large .give-text { font-size: 17px; max-width: 520px; }
.give-card.large .give-btn { width: auto; align-self: flex-start; padding: 0 26px; }
@media (max-width: 600px) { .give-card.large .give-btn { width: 100%; } .give-card.large { min-height: 0; } }

.coffee-card { padding: 18px; border-radius: 26px; display: flex; flex-direction: column; gap: 14px; }
.coffee-row { display: flex; gap: 14px; align-items: flex-start; }
.coffee-row .glyph-badge { width: 44px; height: 44px; border-radius: 13px; }
.coffee-row .eyebrow { margin: 2px 0 0; }
.coffee-row h3 { margin: 4px 0; font: 700 20px/1.2 var(--serif); }
.coffee-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.coffee-btn { width: 100%; min-height: 48px; }
.give-panel { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
.give-panel .note { margin: 2px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-3); }