/* Layout: flyer system — topo-map black field, oversized hairline caps, short yellow rule, bold date line, tracked footer caps. Single dark theme by design (brand). */
:root{
  --ink:#0D0D0C;          /* flyer background */
  --ink-2:#151513;        /* raised surface */
  --line:#5F4A1E;         /* contour gold */
  --bone:#F2F0EC;         /* primary text, logo white */
  --mute:#A9A5A0;         /* "AGAPE HOOD" grey */
  --signal:#E5D416;       /* yellow rule + script */
  --display:"Outfit","Avenir Next","Century Gothic",system-ui,sans-serif;
  --body:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
  color-scheme:dark;
}
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--ink)}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.topo{background-color:var(--ink);background-image:url("../img/topo.svg");background-size:1600px auto;background-position:center top}
.caps{text-transform:uppercase;letter-spacing:.32em;font-weight:600;font-size:13px}
.rule{width:clamp(96px,10vw,140px);height:6px;background:var(--signal);border:0;margin:0}
.display{font-family:var(--display);font-weight:100;text-transform:uppercase;line-height:.98;letter-spacing:.005em;margin:0;text-wrap:balance}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:14px 22px;border:1px solid var(--bone);text-decoration:none;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;transition:background .2s,color .2s}
.btn:hover{background:var(--bone);color:var(--ink)}
.btn.primary{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.btn.primary:hover{background:var(--bone);border-color:var(--bone)}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(13,13,12,.92);backdrop-filter:blur(8px);border-bottom:1px solid #26231c}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:30px;height:auto}
.brand span{color:var(--mute)}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav a{text-decoration:none;font-size:13px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);opacity:.85}
.nav a:hover{opacity:1;color:var(--signal)}
.nav .btn{opacity:1;padding:10px 16px;font-size:12px}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:8px 0}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .drawer{display:flex}
.drawer{display:none;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid #26231c;padding:8px max(var(--gutter),env(safe-area-inset-left,0px)) 24px}
.drawer a{padding:14px 0;border-bottom:1px solid #1f1d18;text-decoration:none;font-size:20px;font-weight:200;text-transform:uppercase;letter-spacing:.06em}
.drawer a.btn{margin-top:18px;justify-content:center;font-size:13px;border-bottom:1px solid var(--signal)}
@media (max-width:1340px){.nav{display:none}.menu{display:block}}
.nav a,.brand span{white-space:nowrap}.brand{flex-shrink:0}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:clamp(24px,4vw,64px);padding-block:clamp(56px,9vw,120px)}
.hero h1{font-size:clamp(46px,7.4vw,112px)}
.hero .stack{display:flex;flex-direction:column;gap:28px;min-width:0}
.when strong{display:block;font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.2}
.when span{display:block;font-weight:200;font-size:clamp(20px,2.2vw,28px);line-height:1.3}
.lede{max-width:56ch;margin:0;font-size:clamp(17px,1.4vw,19px)}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero .mark{justify-self:end;width:min(100%,400px);transform:translateY(8px)}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero .mark{order:-1;justify-self:start;width:72px;transform:none}}

/* quote */
.quote{border-block:1px solid #26231c;background:var(--ink-2)}
.quote .wrap{padding-block:clamp(40px,6vw,72px);display:grid;gap:14px}
.quote blockquote{margin:0;font-weight:200;font-size:clamp(24px,3.2vw,42px);line-height:1.2;max-width:28ch;text-wrap:balance}
.quote cite{font-style:normal;color:var(--mute)}

/* sections */
section.block .wrap{padding-block:clamp(64px,9vw,112px);display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.sec-head h2{font-size:clamp(40px,5.4vw,76px)}
.sec-head .sub{display:flex;flex-direction:column;gap:18px}
.sec-head a.more{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;text-decoration:none;border-bottom:1px solid var(--signal);padding-bottom:4px}

/* events */
.events{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1px;background:#2a261d;border:1px solid #2a261d}
.ev{background:var(--ink);padding:26px 24px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ev .d{font-weight:600;font-size:18px;line-height:1.2}
.ev .t{font-weight:200;font-size:17px;line-height:1.2;font-variant-numeric:tabular-nums}
.ev h3{margin:0;font-weight:200;text-transform:uppercase;font-size:24px;line-height:1.08;letter-spacing:.01em;text-wrap:balance}
.ev .r{width:44px;height:4px;background:var(--signal)}
.ev .meta{color:var(--mute);font-size:14px;line-height:1.45}
.ev .links{margin-top:auto;display:flex;gap:18px;flex-wrap:wrap;padding-top:6px}
.ev .links a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;text-decoration:none;border-bottom:1px solid var(--mute);padding-bottom:3px}
.ev .links a.reg{border-color:var(--signal);color:var(--signal)}
@media (max-width:600px){.ev:nth-child(n+5){display:none}}
.ev-empty{background:var(--ink);padding:28px;color:var(--mute)}

/* series */
.series .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.series h2{font-size:clamp(44px,6.4vw,96px)}
.series .copy{display:flex;flex-direction:column;gap:18px;max-width:58ch}
.series .copy p{margin:0}
.series .copy p:first-child{font-size:clamp(19px,1.7vw,22px);font-weight:300}
@media (max-width:760px){.series .wrap{grid-template-columns:1fr}}

/* next steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.step{display:flex;flex-direction:column;gap:12px;padding:26px 22px;border:1px solid #2f2b21;text-decoration:none;background:rgba(13,13,12,.88);transition:border-color .2s,transform .2s}
.step:hover{border-color:var(--signal);transform:translateY(-2px)}
.step b{font-weight:200;text-transform:uppercase;font-size:clamp(28px,2.5vw,36px);line-height:1;overflow-wrap:anywhere}
.step span{color:var(--mute);font-size:15px;line-height:1.5}
.step i{font-style:normal;margin-top:auto;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--signal)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.steps{grid-template-columns:1fr}}

/* beliefs */
.beliefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #2a261d}
.belief{display:flex;flex-direction:column;gap:10px;padding:30px 0;border-bottom:1px solid #2a261d;text-decoration:none;min-width:0}
.belief:nth-child(odd){padding-right:clamp(16px,3vw,40px)}
.belief:nth-child(even){padding-left:clamp(16px,3vw,40px);border-left:1px solid #2a261d}
.belief b{font-weight:100;text-transform:uppercase;font-size:clamp(30px,3.4vw,46px);line-height:1}
.belief span{color:var(--mute);font-size:15px;max-width:44ch}
.belief:hover b{color:var(--signal)}
@media (max-width:760px){.beliefs{grid-template-columns:1fr}.belief:nth-child(n){padding-left:0;padding-right:0;border-left:0}}

/* footer */
.foot .wrap{padding-block:clamp(64px,8vw,104px) 40px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px 64px}
.foot .tag{display:flex;flex-direction:column;gap:10px}
.foot .tag .caps{font-size:clamp(20px,2.2vw,30px);letter-spacing:.14em;font-weight:600;line-height:1.2}
.foot .tag .url{color:var(--mute);font-weight:600;font-size:clamp(17px,1.6vw,22px)}
.foot .script{width:min(100%,380px);margin-top:18px}
.foot .right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:32px;text-align:right}
.foot .right .wm{width:min(100%,300px)}
.foot address{font-style:normal;color:var(--mute);font-size:15px;line-height:1.6}
.foot address strong{color:var(--bone);font-weight:600}
.social{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.social a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--bone)}
.social a:hover{color:var(--signal)}
.legal{grid-column:1/-1;border-top:1px solid #26231c;padding-top:20px;color:#6f6b64;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}.foot .right{align-items:flex-start;text-align:left}.social{justify-content:flex-start}}

/* ---------- inner pages ---------- */
.nav a[aria-current="page"],.drawer a[aria-current="page"]{color:var(--signal);opacity:1}
.page-hero .wrap{padding-block:clamp(56px,8vw,112px) clamp(48px,6vw,80px);display:flex;flex-direction:column;gap:26px}
.page-hero .eyebrow{color:var(--mute)}
.page-hero h1{font-size:clamp(48px,8vw,120px)}
.page-hero .lede{max-width:60ch}
.crumbs{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.crumbs a{text-decoration:none;border-bottom:1px solid #3a352a}
.crumbs a:hover{color:var(--signal)}

.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.split h2{font-size:clamp(36px,4.6vw,64px)}
.split .label{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
@media (max-width:820px){.split{grid-template-columns:1fr}.split .label{position:static}}

.prose{display:flex;flex-direction:column;gap:18px;max-width:64ch}
.prose p{margin:0}
.prose p.big{font-size:clamp(19px,1.7vw,22px)}
.prose h3{margin:14px 0 0;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:15px;color:var(--bone)}
.prose ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:8px}
.prose li::marker{color:var(--signal)}
.prose a{text-decoration:none;border-bottom:1px solid var(--signal)}
.refs{color:var(--mute);font-size:14px;letter-spacing:.06em}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#2a261d;border:1px solid #2a261d}
.fact{background:var(--ink);padding:28px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.fact .k{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.fact .v{font-weight:200;font-size:clamp(24px,2.4vw,32px);line-height:1.15;text-transform:uppercase}
.fact .s{color:var(--mute);font-size:15px;line-height:1.5}
.fact .r{width:44px;height:4px;background:var(--signal)}
@media (max-width:820px){.facts{grid-template-columns:1fr}}

.verse{border-left:6px solid var(--signal);padding:6px 0 6px clamp(18px,3vw,32px);margin:0;display:flex;flex-direction:column;gap:12px}
.verse p{margin:0;font-weight:200;font-size:clamp(22px,2.6vw,34px);line-height:1.25;max-width:32ch}
.verse cite{font-style:normal;color:var(--mute)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

.cta-band{border-top:1px solid #26231c}
.cta-band .wrap{padding-block:clamp(56px,8vw,96px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.cta-band h2{font-size:clamp(36px,5vw,68px)}
.map{width:100%;aspect-ratio:16/9;border:1px solid #2a261d;filter:grayscale(1) invert(.92) contrast(.9);background:var(--ink-2)}
.prose ol.summary{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:14px}
.prose ol.summary li::marker{color:var(--signal);font-weight:600}
.slides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.slide{margin:0;display:flex;flex-direction:column;gap:8px}
.slide img{width:100%;border:1px solid #2a261d}
.slide figcaption{font-size:12px;letter-spacing:.2em;font-weight:600;color:var(--mute)}
@media (max-width:820px){.slides{grid-template-columns:1fr}}
.coffee-badge{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.coffee-badge img{width:100%;max-width:340px;border-radius:50%;box-shadow:0 0 0 1px #2a261d}
@media (max-width:700px){.coffee-badge{grid-template-columns:1fr}.coffee-badge img{max-width:240px}}
.photo-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.photo-split img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid #2a261d}
@media (max-width:820px){.photo-split{grid-template-columns:1fr}.photo-split img{aspect-ratio:4/5}}
.photo-split.wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.photo-split.wide img{aspect-ratio:4/3}
@media (max-width:820px){.photo-split.wide{grid-template-columns:1fr}.photo-split.wide img{aspect-ratio:4/3}}
.doc-cover{display:block;width:min(100%,300px);margin-top:10px}
.doc-cover img{width:100%;border:1px solid #2a261d;transition:border-color .2s,transform .2s}
.doc-cover:hover img{border-color:var(--signal);transform:translateY(-2px)}
@media (max-width:820px){.doc-cover{width:min(60%,240px)}}
.mc-card{padding:0 0 26px;overflow:hidden}
.mc-card img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:8px}
.mc-card b,.mc-card span{padding:0 22px}
.photo-bg{position:relative;background-color:var(--ink);background-image:linear-gradient(90deg,rgba(13,13,12,.94) 0%,rgba(13,13,12,.82) 45%,rgba(13,13,12,.55) 100%),var(--bg);background-size:cover;background-position:var(--pos,center)}
@media (max-width:760px){.photo-bg{background-image:linear-gradient(180deg,rgba(13,13,12,.80),rgba(13,13,12,.90)),var(--bg)}}
/* We are building: numbered steps */
.build-steps{list-style:none;margin:0;padding:0;border-top:1px solid #2a261d}
.build-step{display:grid;grid-template-columns:minmax(64px,140px) minmax(0,1fr);gap:clamp(18px,4vw,56px);padding:clamp(32px,5vw,56px) 0;border-bottom:1px solid #2a261d;scroll-margin-top:90px}
.build-num{font-weight:100;font-size:clamp(56px,8vw,110px);line-height:.85;color:var(--signal);font-variant-numeric:tabular-nums}
.build-step h2{margin:0 0 4px;font-weight:200;text-transform:uppercase;font-size:clamp(28px,3.4vw,46px);line-height:1.02;text-wrap:balance}
@media (max-width:600px){.build-step{grid-template-columns:1fr;gap:10px}}
.build-step ul{list-style:disc}
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.groups .step b{font-size:clamp(24px,2.1vw,30px)}
.groups .step .when{color:var(--bone);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
@media (max-width:980px){.groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.groups{grid-template-columns:1fr}}
/* This week at Agape (Attend page) */
.tw-sermon{display:flex;flex-direction:column;gap:14px}
.tw-series{color:var(--signal);font-size:12px;letter-spacing:.22em;font-weight:600}
.prose .tw-title{margin:0;letter-spacing:.01em;color:var(--bone);font-weight:200;text-transform:uppercase;font-size:clamp(30px,3.6vw,48px);line-height:1.02;text-wrap:balance}
.tw-passage{margin:0;font-weight:600;letter-spacing:.04em}
.tw-songs{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.tw-list{list-style:none;margin:0;padding:0;border-top:1px solid #2a261d}
.tw-song{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #2a261d}
.tw-song-title{display:flex;flex-direction:column;gap:2px;font-size:18px}
.tw-artist{color:var(--mute);font-size:13px}
.tw-listen{flex:none;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--signal);border-bottom:1px solid var(--signal);padding-bottom:3px}