/* ==========================================================================
   Greater Union Missionary Baptist Church · Austin, Texas
   base.css: design tokens, reset, typography, paper texture, utilities.

   Palette pulled from the church itself: the crimson marquee sign, the red
   brick and white slatted facade, the brass communion plates, and the walnut
   of a sanctuary hymn board.
   ========================================================================== */

:root {
  --paper: #f7f1e8;
  --paper-2: #efe4d3;
  --paper-3: #e6d6bf;
  --ink: #24161b;
  --ink-soft: #5d4a50;
  --crimson: #8f0038;
  --crimson-deep: #5c0024;
  --crimson-night: #2a0612;
  --brick: #a8452f;
  --brass: #c69a3b;
  --brass-light: #e8c873;
  --walnut: #3b2417;
  --walnut-2: #523323;
  --facade: #fbfaf6;
  --midnight: #140a1c;
  --line: rgba(36, 22, 27, 0.16);

  --f-display: "Gloock", "Georgia", serif;
  --f-body: "Newsreader", "Georgia", serif;
  --f-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-sign: "Mrs Saint Delafield", cursive;

  --gutter: clamp(16px, 4vw, 44px);
  --max: 1220px;
  --radius: 4px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* A fine paper grain used on the cream backgrounds. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.14 0 0 0 0 0.09 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* A small cross, used as a bullet in a few places. */
  --cross-crimson: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath fill='%238f0038' d='M3.5 0h2v3.5H9v2H5.5V12h-2V5.5H0v-2h3.5z'/%3E%3C/svg%3E");
  --cross-brass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath fill='%23c69a3b' d='M3.5 0h2v3.5H9v2H5.5V12h-2V5.5H0v-2h3.5z'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Links to a section (ministries.html#women and so on) land just below the
     sticky header instead of underneath it. */
  scroll-padding-top: 92px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The cream page reads like bulletin paper: a fine grain plus a few faint
   pools of warm light. */
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1.06rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  overflow-x: hidden;
  background-color: var(--paper);
  background-image:
    var(--grain),
    radial-gradient(ellipse 60% 40% at 8% 18%, rgba(232, 200, 115, 0.13), transparent 70%),
    radial-gradient(ellipse 55% 45% at 95% 55%, rgba(198, 154, 59, 0.09), transparent 70%),
    radial-gradient(ellipse 70% 40% at 30% 92%, rgba(143, 0, 56, 0.04), transparent 70%);
  background-size: 220px 220px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: scroll, fixed, fixed, fixed;
}
/* Fixed backgrounds are janky on phones; let the light scroll with the page there. */
@media (max-width: 860px) { body { background-attachment: scroll; } }

/* Scrollbars in the church colors: a slim brass slider on a clear track,
   turning crimson under the pointer. With a mouse, the page's own scrollbar
   is drawn over the page by scrollbar.js; these rules style the ones inside
   boxes (and the page's on phones or without JavaScript). Chrome, Edge and
   Safari draw the styled version; Firefox gets the thin brass one. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--brass) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brass-light), var(--brass)) padding-box; border: 3px solid transparent; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #b3124f, var(--crimson)) padding-box; border-width: 2px; }
::-webkit-scrollbar-thumb:active { background: var(--crimson-deep) padding-box; border-width: 2px; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }

/* ---------- Page scrollbar ----------
   scrollbar.js switches the browser's page scrollbar off and draws just a
   slider over the page edge: brass, shown while scrolling and fading a
   moment after, widening and turning crimson under the pointer. */
html.gscroll-on { scrollbar-width: none; }
html.gscroll-on::-webkit-scrollbar { display: none; }
.gscroll { position: fixed; top: 0; right: 0; bottom: 0; width: 12px; z-index: 1000; -webkit-user-select: none; user-select: none; }
.gscroll[hidden] { display: none; }
/* Phones and tablets: shown while scrolling, but touches pass through to the page. */
.gscroll-touch .gscroll { pointer-events: none; }
.gscroll-thumb {
  position: absolute; top: 0; left: 50%; width: 4px; margin-left: -2px; border-radius: 999px; will-change: transform;
  background: linear-gradient(180deg, var(--brass-light), var(--brass));
  opacity: 0; transition: opacity 0.45s ease, width 0.15s ease, margin-left 0.15s ease;
}
.gscroll.is-awake .gscroll-thumb, .gscroll:hover .gscroll-thumb, .gscroll.is-dragging .gscroll-thumb { opacity: 1; transition-duration: 0.15s; }
.gscroll:hover .gscroll-thumb, .gscroll.is-dragging .gscroll-thumb { width: 6px; margin-left: -3px; background: linear-gradient(180deg, #b3124f, var(--crimson)); }
.gscroll.is-dragging .gscroll-thumb { background: var(--crimson-deep); }
@media print { .gscroll { display: none; } }

img { max-width: 100%; display: block; height: auto; }
a { color: var(--crimson); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--crimson-deep); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 1.6rem + 5vw, 6.2rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.4vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
h4 { font-size: 1.3rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
/* Avoid single words stranded on the last line of list items and details too. */
li, dd, figcaption { text-wrap: pretty; }

.label {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.86rem;
  font-weight: 600;
}
.kicker {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--crimson);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 1.1rem;
}
.kicker::before {
  content: "";
  width: 7px; height: 22px;
  background: currentColor;
  box-shadow: 12px 6px 0 -1px currentColor;
  margin-right: 12px;
}
.kicker.light { color: var(--brass-light); }

.lede { font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.55; color: var(--ink-soft); }
.scripture { font-style: italic; }
.ref { font-family: var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; font-style: normal; font-weight: 600; }

/* ---------- Utilities ---------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--brass); color: var(--ink); padding: 8px 14px; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.95rem; }
.text-crimson { color: var(--crimson); }
.nowrap { white-space: nowrap; }