/* ============================================================
   Bethel First Church of God — Dover, TN
   Editorial redesign
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Archivo+Expanded:wght@600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

:root {
  --black:   #0f1f17;   /* deepest forest */
  --ink:     #16291e;
  --paper:   #f7f9f8;   /* crisp cool white */
  --paper-2: #e8efec;
  --muted:   #5a6b62;
  --peach:   #4ba3d6;   /* sky blue accent */
  --peach-d: #2e7fb8;   /* deeper sky */
  --green:   #1c3a2b;   /* forest roof green */
  --line:    rgba(15,31,23,.14);
  --line-lt: rgba(247,249,248,.20);
  --maxw:    1280px;
  --display: 'Archivo Expanded', 'Archivo', sans-serif;
  --sans:    'Archivo', system-ui, sans-serif;
  --serif:   'Newsreader', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--black);
  line-height: 1.55;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3 { font-family: var(--display); font-weight: 800; line-height: .94; letter-spacing: -.02em; text-transform: uppercase; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 2rem; }
@media (max-width:640px){ .wrap{ padding:0 1.25rem; } }

/* index number tag */
.idx { font-family: var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.28em; color: var(--peach-d); text-transform: uppercase; }

/* ---------- Header ---------- */
.site-head {
  position: fixed; top:0; left:0; right:0; z-index:100;
  mix-blend-mode: difference; /* flips over dark hero + light body */
}
.site-head, .site-head a { color:#fff; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:1.4rem 2rem; max-width:1440px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:.7rem; font-family:var(--display); font-weight:700; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; }
.brand .dot { width:9px; height:9px; background:var(--peach); border-radius:50%; flex:none; }
.nav-links { display:flex; gap:2rem; list-style:none; align-items:center; }
.nav-links a { font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.85; transition:opacity .2s; }
.nav-links a:hover, .nav-links a.active { opacity:1; }
.nav-cta { border:1px solid currentColor; padding:.5rem 1.1rem !important; opacity:1 !important; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span { display:block; width:26px; height:2px; background:#fff; margin:6px 0; transition:.3s; }

@media (max-width:900px){
  .site-head { mix-blend-mode:normal; background:var(--black); }
  .nav-toggle { display:block; }
  .nav-links {
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; align-items:stretch;
    background:var(--black); max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .nav-links.open { max-height:420px; }
  .nav-links li { border-top:1px solid var(--line-lt); }
  .nav-links a { display:block; padding:1.1rem 2rem; opacity:1; }
  .nav-cta { border:0; }
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1.1rem 1.8rem; border-radius:0; transition:transform .25s, background .25s, color .25s;
}
.btn .arw { transition:transform .25s; }
.btn:hover .arw { transform:translateX(5px); }
.btn-peach { background:var(--peach); color:var(--black); }
.btn-peach:hover { background:var(--peach-d); }
.btn-black { background:var(--black); color:var(--paper); }
.btn-black:hover { background:var(--green); }
.btn-line { border:1px solid currentColor; }
.btn-line:hover { background:#fff; color:var(--black); }

/* ---------- Hero ---------- */
.hero {
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; background:url('images/church.jpg') center 30%/cover no-repeat; }
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,31,23,.45) 0%, rgba(15,31,23,.05) 35%, rgba(15,31,23,.88) 100%);
}
.hero .wrap { position:relative; z-index:2; width:100%; padding-bottom:clamp(2.5rem,6vw,5rem); padding-top:8rem; }
.hero .idx { color:var(--peach); }
.hero h1 {
  font-size:clamp(3rem, 11vw, 10rem); margin:1rem 0 1.4rem; max-width:14ch;
}
.hero h1 .ser { font-family:var(--serif); font-weight:400; font-style:italic; text-transform:none; letter-spacing:-.01em; color:var(--peach); }
.hero-row { display:flex; flex-wrap:wrap; gap:2.5rem; align-items:flex-end; justify-content:space-between; }
.hero-row p { max-width:42ch; font-size:1.1rem; color:rgba(255,255,255,.82); }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* marquee strip under hero */
.strip { background:var(--black); color:var(--paper); overflow:hidden; border-bottom:1px solid var(--line-lt); }
.strip-track { display:flex; gap:3.5rem; white-space:nowrap; padding:1rem 0; animation:scroll 32s linear infinite; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; }
.strip-track span { display:inline-flex; align-items:center; gap:3.5rem; }
.strip-track span::after { content:'✦'; color:var(--peach); }
@keyframes scroll { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .strip-track{ animation:none; } }

/* ---------- Sections ---------- */
section { padding:clamp(4rem,9vw,8rem) 0; }
.dark { background:var(--black); color:var(--paper); }
.dark .idx { color:var(--peach); }
.green { background:var(--green); color:var(--paper); }
.green .idx { color:var(--peach); }

/* editorial section header */
.head { display:grid; grid-template-columns:1fr 1.4fr; gap:2rem; align-items:end; margin-bottom:3.5rem; padding-bottom:2rem; border-bottom:1px solid var(--line); }
.dark .head, .green .head { border-color:var(--line-lt); }
.head h2 { font-size:clamp(2rem,5.5vw,4.2rem); }
.head .lede { font-family:var(--serif); font-size:clamp(1.1rem,1.8vw,1.4rem); line-height:1.45; color:var(--muted); }
.dark .head .lede, .green .head .lede { color:rgba(244,242,236,.72); }
@media (max-width:760px){ .head{ grid-template-columns:1fr; gap:1.2rem; } }

/* asymmetric split */
.split { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split.flip { grid-template-columns:.95fr 1.05fr; }
@media (max-width:860px){ .split, .split.flip { grid-template-columns:1fr; } }
.split h2 { font-size:clamp(2rem,5vw,3.6rem); margin:.8rem 0 1.4rem; }
.split p + p { margin-top:1rem; }
.split .body { font-family:var(--serif); font-size:1.18rem; line-height:1.6; }
.split .muted { color:var(--muted); font-family:var(--sans); font-size:1rem; }

.media { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--green); }
.media img { width:100%; height:100%; object-fit:cover; display:block; }
.media.wide { aspect-ratio:3/2; }
.media .tag { position:absolute; left:0; bottom:0; background:var(--peach); color:var(--black); font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; padding:.6rem 1rem; }

/* big numbered list (beliefs / values) */
.entries { border-top:1px solid var(--line); }
.dark .entries, .green .entries { border-color:var(--line-lt); }
.entry { display:grid; grid-template-columns:5rem 1fr; gap:1.5rem; padding:2rem 0; border-bottom:1px solid var(--line); align-items:baseline; transition:padding-left .3s; }
.dark .entry, .green .entry { border-color:var(--line-lt); }
.entry:hover { padding-left:1rem; }
.entry .n { font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--peach-d); font-variant-numeric:tabular-nums; }
.entry h3 { font-size:1.5rem; margin-bottom:.5rem; }
.entry .body { font-family:var(--serif); font-size:1.1rem; line-height:1.55; color:var(--muted); max-width:60ch; }
.dark .entry .body, .green .entry .body { color:rgba(244,242,236,.7); }
@media (max-width:640px){ .entry{ grid-template-columns:1fr; gap:.4rem; } }

/* times — big editorial schedule */
.sched { border-top:1px solid var(--line-lt); }
.sched .row { display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:center; padding:1.8rem 0; border-bottom:1px solid var(--line-lt); }
.sched .day { font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,3vw,2.4rem); text-transform:uppercase; }
.sched .what { color:rgba(244,242,236,.66); font-family:var(--serif); font-style:italic; font-size:1.05rem; text-align:left; }
.sched .time { font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,3vw,2.4rem); color:var(--peach); white-space:nowrap; }
@media (max-width:640px){ .sched .row{ grid-template-columns:1fr auto; } .sched .what{ grid-column:1 / -1; } }

/* feature trio */
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.dark .trio, .green .trio { border-color:var(--line-lt); }
@media (max-width:780px){ .trio{ grid-template-columns:1fr; } }
.feat { padding:2.5rem; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.dark .feat, .green .feat { border-color:var(--line-lt); }
.feat:nth-child(3n){ border-right:0; }
@media (max-width:780px){ .feat{ border-right:0; } }
.feat .n { font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--peach-d); }
.feat h3 { font-size:1.4rem; margin:1.2rem 0 .6rem; }
.feat p { color:var(--muted); font-family:var(--serif); font-size:1.05rem; }
.dark .feat p, .green .feat p { color:rgba(244,242,236,.7); }

/* pull quote */
.pull { text-align:left; max-width:18ch; }
.pull .idx { display:block; margin-bottom:2rem; }
.pull blockquote { font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(2rem,6vw,4.5rem); line-height:1.05; letter-spacing:-.01em; max-width:none; }
.pull cite { display:block; margin-top:2rem; font-family:var(--sans); font-style:normal; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--peach); }

/* full-bleed CTA */
.cta-band { position:relative; padding:clamp(5rem,12vw,10rem) 0; color:#fff; overflow:hidden; }
.cta-band .bg { position:absolute; inset:0; background:url('images/church.jpg') center 35%/cover; }
.cta-band .bg::after { content:''; position:absolute; inset:0; background:rgba(15,31,23,.72); }
.cta-band .wrap { position:relative; z-index:2; }
.cta-band h2 { font-size:clamp(2.4rem,7vw,6rem); max-width:16ch; margin-bottom:2rem; }
.cta-band h2 .ser { font-family:var(--serif); font-weight:400; font-style:italic; text-transform:none; color:var(--peach); }

/* contact / info */
.info { border-top:1px solid var(--line); }
.info .row { display:grid; grid-template-columns:14rem 1fr; gap:1.5rem; padding:1.6rem 0; border-bottom:1px solid var(--line); }
.info .k { font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.info .v { font-family:var(--serif); font-size:1.2rem; }
.info .v a { border-bottom:1px solid var(--peach); }
@media (max-width:640px){ .info .row{ grid-template-columns:1fr; gap:.3rem; } }

.map { width:100%; height:460px; border:0; filter:grayscale(.3) contrast(1.05); }

/* form */
.form .field { margin-bottom:1.5rem; }
.form label { display:block; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:.5rem; }
.form input, .form textarea { width:100%; padding:1rem 0; border:0; border-bottom:1px solid var(--line); background:transparent; font:inherit; font-family:var(--serif); font-size:1.1rem; color:var(--black); }
.form input:focus, .form textarea:focus { outline:0; border-color:var(--peach-d); }

/* page banner */
.banner { background:var(--black); color:var(--paper); padding:clamp(8rem,15vw,11rem) 0 clamp(3rem,6vw,5rem); }
.banner .idx { color:var(--peach); }
.banner h1 { font-size:clamp(2.6rem,9vw,7rem); margin:1rem 0 1.2rem; }
.banner h1 .ser { font-family:var(--serif); font-weight:400; font-style:italic; text-transform:none; color:var(--peach); }
.banner p { font-family:var(--serif); font-size:1.2rem; max-width:50ch; color:rgba(244,242,236,.72); }

/* ---------- Footer ---------- */
.foot { background:var(--black); color:rgba(244,242,236,.7); padding:clamp(4rem,8vw,6rem) 0 2.5rem; }
.foot-top { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid var(--line-lt); }
@media (max-width:760px){ .foot-top{ grid-template-columns:1fr; gap:2.2rem; } }
.foot-brand { font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,4vw,3rem); color:#fff; text-transform:uppercase; line-height:.95; }
.foot h4 { font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--peach); margin-bottom:1.2rem; }
.foot ul { list-style:none; }
.foot li { margin-bottom:.7rem; }
.foot a:hover { color:var(--peach); }
.foot-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; padding-top:1.8rem; font-size:.8rem; letter-spacing:.04em; color:rgba(244,242,236,.45); }

/* reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

.note { font-family:var(--sans); font-size:.92rem; color:var(--muted); border-left:2px solid var(--peach); padding:.4rem 0 .4rem 1.2rem; margin-top:1.5rem; }
.dark .note, .green .note { color:rgba(244,242,236,.7); }