/* ==========================================================================
   Hue.Church — Root Stylesheet
   Single source of truth for tokens, type, layout, buttons, utilities.
   Page-specific components stay in per-page <style> blocks.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'SF Pro Rounded';src:url('/public/fonts/SFProRounded-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SF Pro Rounded';src:url('/public/fonts/SFProRounded-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('/public/fonts/ArticulatCF-Normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('/public/fonts/ArticulatCF-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('/public/fonts/ArticulatCF-DemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Articulat CF';src:url('/public/fonts/ArticulatCF-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- Design Tokens ---------- */
:root{
  --font-heading:'SF Pro Rounded',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Articulat CF',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --white:#FFFFFF;
  --offwhite:#F4F4F2;
  --charcoal:#000000;
  --charcoal-mid:#111111;
  --charcoal-light:#222222;

  --grey:#6B6B6B;
  --grey-light:#A0A0A0;
  --grey-rule:rgba(0,0,0,0.08);

  --slate:#3A4A5C;
  --slate-deep:#2C3A4A;
  --slate-wash:#EBEEF1;
  --forest:#3D5244;
  --forest-deep:#2E4035;
  --forest-wash:#E6EBE7;
  --stone:#7A6E5D;
  --stone-deep:#5E5447;
  --stone-wash:#EDEAE6;
  --clay:#6B5D52;
  --clay-deep:#53463D;
  --clay-wash:#EDEBE8;

  --radius:12px;
  --radius-sm:8px;
  --radius-lg:20px;

  --transition:0.4s cubic-bezier(0.16,1,0.3,1);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);color:var(--charcoal);background:var(--white);font-size:16px;line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:400;line-height:1.05;letter-spacing:-0.035em;color:var(--charcoal);text-wrap:balance}
h1{font-size:clamp(3.2rem,9vw,7rem);font-weight:400}
h2{font-size:clamp(2.2rem,5vw,3.8rem)}
h3{font-size:clamp(1.4rem,3vw,2rem)}
h4{font-size:clamp(1.1rem,2vw,1.4rem)}
h5{font-size:clamp(1rem,1.4vw,1.2rem)}

p{font-size:clamp(1rem,1.1vw,1.15rem);line-height:1.75;color:var(--grey)}
p,li{text-wrap:pretty}

.hero__sub,.cta-banner p,.section-header p{text-wrap:balance}

/* Desktop: ignore hard <br> inside headings; let text-wrap:balance do the work */
@media(min-width:769px){h1 br,h2 br,h3 br{display:none}}

/* ---------- Layout Primitives ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container--wide{max-width:1400px;margin:0 auto;padding:0 24px}
.container--narrow{max-width:800px;margin:0 auto;padding:0 24px}

.section-header{text-align:center;max-width:640px;margin:0 auto 72px}
.section-header .eyebrow{margin-bottom:16px}
.section-header p{text-wrap:balance}

.eyebrow{font-family:var(--font-heading);font-weight:600;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey-light)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:600;font-size:0.85rem;letter-spacing:0.04em;text-decoration:none;border:none;cursor:pointer;transition:all var(--transition);border-radius:100px;padding:16px 36px}
.btn--primary{background:var(--charcoal);color:var(--white)}
.btn--primary:hover{background:var(--charcoal-light);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,0.15)}
.btn--white{background:var(--white);color:var(--charcoal)}
.btn--white:hover{background:var(--offwhite);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,0.1)}
.btn--outline{background:transparent;color:var(--charcoal);border:1.5px solid var(--charcoal)}
.btn--outline:hover{background:var(--charcoal);color:var(--white);transform:translateY(-2px)}
.btn--outline-white{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,0.4)}
.btn--outline-white:hover{background:var(--white);color:var(--charcoal);border-color:var(--white);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--charcoal);padding:12px 0}
.btn--ghost:hover{opacity:0.6}

/* ---------- Utilities ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.8s var(--transition),transform 0.8s var(--transition)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}

.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}