/* =========================================================================
   Self-hosted Google Fonts (latin + latin-ext), served from /fonts/ to
   satisfy the production CSP (font-src 'self'). Blocks are verbatim from
   Google's css2 response for a modern Chrome UA; only src is rewritten.
   Note: Google serves one variable woff2 per subset, shared across the
   requested weights, hence the shared files below.
   ========================================================================= */
/* Bricolage Grotesque 700 latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-700-800-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;
}
/* Bricolage Grotesque 700 latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-700-800-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;
}
/* Bricolage Grotesque 800 latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-700-800-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;
}
/* Bricolage Grotesque 800 latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-700-800-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;
}
/* Fraunces italic 500 latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-500-600-italic-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;
}
/* Fraunces italic 500 latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-500-600-italic-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;
}
/* Fraunces italic 600 latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-500-600-italic-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;
}
/* Fraunces italic 600 latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-500-600-italic-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;
}
/* Hanken Grotesk 400 latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/hanken-grotesk-400-700-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;
}
/* Hanken Grotesk 400 latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/hanken-grotesk-400-700-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;
}
/* Hanken Grotesk 500 latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/hanken-grotesk-400-700-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;
}
/* Hanken Grotesk 500 latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/hanken-grotesk-400-700-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;
}
/* Hanken Grotesk 700 latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/hanken-grotesk-400-700-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;
}
/* Hanken Grotesk 700 latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/hanken-grotesk-400-700-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;
}

/* Fonts (Bricolage Grotesque + Hanken Grotesk + Fraunces) are loaded via a
   <link> in each page <head>, not an @import here, so they resolve in one
   fewer request hop and never chain behind this stylesheet. */

/* =========================================================================
   TYPE SYSTEM A: "Warm Geometric Authority"
   Display = Bricolage Grotesque (opsz), body = Hanken Grotesk. A serious,
   modern product that happens to be warm: big, tight, heavy headlines over a
   quiet humanist body; the accent voice (tagline, prayer names) is a
   letterspaced small-caps Bricolage, not a third family. 2 families, 5 weights.
   Loads AFTER site.css. Text color stays on the live scroll vars only.
   ========================================================================= */

:root {
  --display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- body: the face that disappears ---- */
body {
  font-family: var(--sans);
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: 0;
}

/* every display element rides the optical-size axis toward its actual size */
.hero-head, .feat-head, .finale__head, .stat, .pull,
.sabr-intro__line, .rating__num, .tag .prayer, .finale__tag {
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   HERO: the 120-point element. Heavy, tight, near-touching.
   ========================================================================= */
.hero-head {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.7rem, 8.4vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  max-width: 13ch;
  text-shadow: 0 2px 30px rgba(24,14,8,0.28);
}
.hero-lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.3vw, 1.42rem);
  line-height: 1.5;
  letter-spacing: 0.002em;
  color: var(--muted);
  max-width: 36ch;
}

/* small-caps label voice, shared by eyebrow / scroll-cue / rail */
.eyebrow, .scroll-cue, .rail__label {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.26em;
}
.eyebrow { font-size: 0.76rem; color: var(--accent); }
.scroll-cue { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--muted); }
.rail__label { font-size: 0.68rem; letter-spacing: 0.14em; }

/* CTA: confident, not shouty */
.cta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: -0.005em;
}

/* =========================================================================
   STAT + DOTS
   ========================================================================= */
.stat {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.stat__src {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.dots-cap .cap {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.7vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* =========================================================================
   SABR INTRO: a warm display line, not a body line
   ========================================================================= */
.sabr-intro__line {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 4vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -0.028em;
  max-width: 15ch;
}

/* =========================================================================
   CHAPTER TAGS: prayer name carries the accent small-caps voice
   ========================================================================= */
.tag { font-family: var(--display); font-weight: 700; }
.tag .prayer {
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  font-size: 0.94rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.tag .time, .tag .daypart {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================================
   FEATURE HEADINGS + BODY
   ========================================================================= */
.feat-head {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.05rem, 5.4vw, 3.5rem);
  line-height: 1.0;
  letter-spacing: -0.032em;
  max-width: 15ch;
}
.feat-lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.1vw, 1.28rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 34ch;
}
.checks { font-family: var(--sans); }
.checks li {
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.5;
  letter-spacing: 0.002em;
}
.checks li b { font-weight: 700; letter-spacing: -0.002em; }

/* =========================================================================
   REVIEWS
   ========================================================================= */
.pull {
  font-family: var(--display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.85rem, 5vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 17ch;
}
.rating__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.review {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.002em;
}

/* =========================================================================
   FINALE: heaviest headline, small-caps tagline as the closing accent
   ========================================================================= */
.finale__head {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6.2vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 15ch;
}
.finale__lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.08rem, 2.3vw, 1.35rem);
  line-height: 1.5;
  color: var(--muted);
}
.finale__tag {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

/* =========================================================================
   NAV + FOOTER
   ========================================================================= */
.nav__brand span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
}
.foot__links a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
}