/* ============================================================
   Uncommon Christian Network — stylesheet module: base
   Fonts, design tokens, reset, typography, buttons, notices.
   Load order (header.php): base, layout, home, live, support, pages.
   ============================================================ */
/* ---------- Self-hosted fonts ----------
   Previously loaded from fonts.googleapis.com, which cost a DNS lookup,
   a TLS handshake and a redirect to fonts.gstatic.com before any text
   could paint. Same files, served from our own origin.
   Regenerate with: curl the css2 URL, dedupe, keep latin + latin-ext.
   ---------------------------------------- */
/* Inter · latin — one variable file covers every weight we use */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter · latin-ext — one variable file covers every weight we use */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora · latin — one variable file covers every weight we use */
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(../fonts/sora-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora · latin-ext — one variable file covers every weight we use */
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(../fonts/sora-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Uncommon Christian Network — Clean & Modern theme
   ============================================================ */
:root{
  --violet-900:#2E1B4D;
  --violet-700:#4A2C7A;
  --violet-600:#6B3CC4;
  --violet-600-rgb:107,60,196;
  --violet-500:#9B6BF2;
  --violet-500-rgb:155,107,242;
  --violet-400:#BC97F8;
  --violet-400-rgb:188,151,248;
  --violet-200:#DCC6FB;
  --beacon-500:#EFB45C;
  --bg:#09090e;      /* near-black base, matches the redesigned pages + the transparent header */
  --bg-2:#111420;
  --panel:#1b212b;
  --line:#2a3240;
  --text:#e8ecf2;
  --muted:#9aa6b6;
  --accent:var(--violet-400);
  --accent-2:var(--violet-400);
  --danger:#ff6b6b;
  --ok:#43c59e;
  --radius:16px;
  --radius-sm:10px;
  --maxw:1320px;
  --shadow:0 12px 40px rgba(0,0,0,.35);
  --font:'Inter','Inter Fallback',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Sora','Sora Fallback',var(--font);
}

/* ---- Metric-matched fallback faces (prevents layout shift on font load) ----
   font-display:swap paints text in a fallback face first, then re-renders it in
   Inter/Sora. Those have different metrics, so the text reflows — the vertical
   "shake" while a page loads.

   These two faces wrap Arial (present on macOS/Windows, and metric-compatible
   with Liberation Sans on Linux) and stretch it so it occupies almost exactly
   the same space as the real font. The swap then happens with no reflow.

   The numbers are MEASURED from the actual woff2 files in assets/fonts/ with
   fontTools — average advance width across a-z plus space, against Arial's —
   not copied from a generator. Re-measure if the font files are ever replaced:
     size-adjust      = avgAdvance(web) / avgAdvance(Arial)
     ascent-override  = ascent(web) / unitsPerEm / size-adjust
   Inter and Sora both set the USE_TYPO_METRICS flag, so their OS/2 typo
   ascender/descender are the correct source, not hhea. */
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:109.38%;
  ascent-override:88.56%;
  descent-override:22.05%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Sora Fallback';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:117.19%;
  ascent-override:82.77%;
  descent-override:24.75%;
  line-gap-override:0%;
}

*{box-sizing:border-box}
/* scrollbar-gutter reserves the scrollbar's width even when a page doesn't need
   one. Without it, moving between a short page and a tall one — or a panel
   collapsing, or content finishing loading — makes the scrollbar appear and
   disappear, and every centred element jumps sideways by its width. That is the
   horizontal "shake" on load. Reserving the space permanently keeps it still. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Elements with the "hidden" attribute must stay hidden even when a class
   below sets display (e.g. .checkout-modal, which is display:grid and is
   toggled via the hidden attribute). Without this it covers the page. */
[hidden]{display:none !important}
/* player.js toggles this while a pjax navigation is in flight. */
body.pjax-loading{cursor:progress}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}

h1,h2,h3,h4{font-family:var(--display);line-height:1.15;margin:0 0 .5em;font-weight:700}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:600;
  color:var(--accent-2);margin:0 0 .6rem  /* accent-2 clears AA at this small size; accent did not */
}
.accent{color:var(--violet-500)}
.lead{color:var(--muted);font-size:1.08rem;max-width:640px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.4rem;border-radius:999px;font-weight:600;font-family:var(--display);
  cursor:pointer;border:1px solid transparent;transition:.18s ease;font-size:.95rem;
  white-space:nowrap;
}
.btn-lg{padding:1rem 1.8rem;font-size:1.05rem}
.btn-primary{background:var(--violet-600);color:#fff;border-color:var(--violet-500)}
.btn-primary:hover{background:var(--violet-500);color:#fff;border-color:var(--violet-500);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--violet-400);outline-offset:3px}
/* Skip-to-content link — off-screen until focused. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--violet-600);color:#fff;
  padding:.65rem 1.1rem;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
main:focus{outline:none}
/* Visually hidden but available to crawlers + assistive tech. */
.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}

/* ---------- Notices ---------- */
.notice{background:rgb(from var(--violet-200) r g b / .1);border:1px solid rgb(from var(--violet-200) r g b / .35);
  border-radius:var(--radius-sm);padding:1rem 1.2rem;color:var(--text);margin:1.5rem 0}
.notice code{background:rgba(0,0,0,.3);padding:.1rem .4rem;border-radius:5px;font-size:.9em}
.notice.success{background:rgba(67,197,158,.12);border-color:rgba(67,197,158,.4)}
.notice.error{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.4)}

/* Eyebrow variant with a short rule to its left (interior heroes). Must stay
   after .eyebrow above — same specificity, later-wins on letter-spacing. */
.eyebrow--rule{display:flex;align-items:center;gap:.85rem;
  text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;font-weight:700;
  color:var(--accent-2)}
.eyebrow--rule::before{content:"";width:34px;height:1px;background:var(--accent-2);
  opacity:.7;flex:none}

/* In-page anchor targets (e.g. /#reach) cleared below the sticky header. */
.anchor-offset{display:block;height:0;overflow:hidden;scroll-margin-top:90px}