/*
Theme Name: FUSE Buchegg
Theme URI: https://fusebuchegg.ch/
Author: FUSE Buchegg
Description: Complete responsive website theme for the FUSE youth community of Buchegg Church.
Version: 1.3.6
Requires PHP: 8.2.35
Text Domain: fuse-buchegg
*/

:root {
    --bg: #f4f0ea;
    --paper: #fbfaf7;
    --ink: #1f1e1b;
    --muted: #706b62;
    --line: #cfc6b8;
    --taupe: #9f8d78;
    --olive: #585747;
    --sand: #d8c8b3;
    --dark: #353226;
    --white: #fff
}

/* COMMUNITY editorial direction — warm, human and typographic */
:root {
    --community-ivory: #ecebe7;
    --community-paper: #f5f4f1;
    --community-sand: #dad7d1;
    --community-coral: #df715f;
    --community-coral-soft: #eba190;
    --community-ink: #272724;
    --community-muted: #716b63;
    --community-sage: #aab7aa;
}

body { background:var(--community-ivory); color:var(--community-ink) }
.nav { background:rgba(244,239,230,.96); border-color:rgba(39,39,36,.14) }
.logo { color:var(--community-ink) }
.nav-links a,.about-scrollspy a { color:var(--community-ink) }
.about-scrollspy { background:var(--community-paper); border-color:rgba(39,39,36,.14) }
.about-scrollspy a[aria-current="location"] { background:var(--community-sand); color:var(--community-ink) }

.home-hero {
    background:linear-gradient(112deg,var(--community-ivory) 0 72%,var(--community-paper) 72% 100%);
    color:var(--community-ink)
}
.home-hero::before { border-color:rgba(39,39,36,.1) }
.home-hero h1 {
    color:var(--community-coral);
    font-family:'Barlow Condensed','Arial Narrow',sans-serif;
    font-weight:800;
    letter-spacing:-.055em;
    line-height:.78;
    text-transform:uppercase
}
.home-hero .eyebrow,.home-hero .lead { color:var(--community-ink) }
.home-hero .lead { max-width:480px }
.home-hero .hero-art .main,
.home-hero .hero-art .float,
.home-hero .hero-art .hero-photo-third { filter:saturate(.55) contrast(1.03) }
.home-hero .hero-art .main { box-shadow:0 22px 55px rgba(39,39,36,.16) }
.home-hero .hero-art .float,
.home-hero .hero-art .hero-photo-third { border-color:var(--community-paper) }
.hero-sticker { background:var(--community-coral); color:var(--community-paper) }
.hero-word { color:rgba(39,39,36,.07) }
.home-hero .btn,.btn {
    border-color:var(--community-ink);
    background:var(--community-ink);
    color:var(--community-paper);
    box-shadow:none
}
.home-hero .btn:hover,.btn:hover { background:var(--community-coral); border-color:var(--community-coral); color:var(--community-paper) }

.hero-stats,.upcoming-events,.about-section,.groups-directory,.smallgroup-form-page { background:var(--community-paper) }
.hero-stat strong,.section-title,.events-header .section-title { color:var(--community-ink) }
.marquee { background:var(--community-sand); color:var(--community-ink); border-color:rgba(39,39,36,.14) }
.upcoming-list,.upcoming-row,.cards > .card,.group-card,.smallgroup-form-card { background:var(--community-ivory) }
.upcoming-row.is-next { border-color:var(--community-coral); box-shadow:inset 4px 0 0 var(--community-coral) }
.next-event-badge,.events-next { background:var(--community-coral); color:var(--community-paper) }
.first-visit-section,.group-help-section,.dark { background:var(--community-sand); color:var(--community-ink) }
.first-visit-card { background:var(--community-paper); color:var(--community-ink) }
.dark .text-muted,.text-muted { color:var(--community-muted) }
.quote,.group-help-copy .section-title span { color:var(--community-coral) }
.about-hero,.events-hero,.smallgroups-hero { background:var(--community-ivory) }
.about-hero h1,.events-hero-copy h1,.smallgroups-hero-copy h1 { color:var(--community-coral) }
.cards > .card:nth-child(2) { background:#efe8dd }
.cards > .card:nth-child(3) { background:#e4e8df }
.footer { background:var(--community-ink); color:var(--community-paper) }

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, system-ui, sans-serif
}

img {
    max-width: 100%;
    display: block;
    object-fit: cover
}

a {
    color: inherit;
    text-decoration: none
}

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 34px;
    border-bottom: 1px solid var(--line);
    background: rgba(244, 240, 234, .82);
    backdrop-filter: blur(20px)
}

.logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 31px;
    letter-spacing: .12em
}

.nav-links {
    display: flex;
    gap: 26px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em
}

.nav-cta {
    justify-self: end;
    border: 1px solid var(--ink);
    padding: 11px 18px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em
}

.container {
    width: min(1180px, 90vw);
    margin: auto
}

.hero {
    min-height: 92vh;
    display: grid;
    align-items: center;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center
}

.eyebrow,
.meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--muted)
}

h1,
h2,
h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    line-height: .92;
    margin: 0
}

h1 {
    font-size: clamp(68px, 10vw, 145px);
    letter-spacing: -.05em
}

.section-title {
    font-size: clamp(46px, 7vw, 92px);
    letter-spacing: -.045em
}

.lead {
    font-size: 20px;
    line-height: 1.7;
    color: var(--muted);
    max-width: 620px
}

.text-muted {
    color: var(--muted);
    line-height: 1.75
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .13em;
    transition: .35s
}

.btn:hover {
    transform: translateY(-3px);
    background: transparent;
    color: var(--ink)
}

.btn.light {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper)
}

.hero-art {
    position: relative;
    min-height: 650px
}

.hero-art .main {
    height: 580px;
    width: 78%;
    margin-left: auto;
    filter: saturate(.85)
}

.hero-art .float {
    position: absolute;
    width: 38%;
    height: 270px;
    left: 0;
    bottom: 12%;
    border: 12px solid var(--bg)
}

.hero-art .tile {
    position: absolute;
    right: 8%;
    top: 10%;
    width: 170px;
    height: 210px;
    background: rgba(255, 255, 255, .34);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .5)
}

/* Homepage hero */
.home-hero { min-height:calc(100svh - 69px); isolation:isolate; background:radial-gradient(circle at 78% 18%,rgba(184,159,218,.24),transparent 22%),linear-gradient(115deg,var(--bg) 0 56%,#ded3c5 56% 100%) }
.home-hero::after { content:''; position:absolute; inset:0; z-index:-1; opacity:.2; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E") }
.home-hero .hero-grid { grid-template-columns:.88fr 1.12fr; gap:clamp(40px,6vw,90px); padding:64px 0 150px }
.hero-copy { position:relative; z-index:3 }
.hero-copy .eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 18px; color:var(--ink) }
.hero-copy .eyebrow::before { content:''; width:38px; height:1px; background:currentColor }
.home-hero h1 { position:relative; margin-left:-7px; font-size:clamp(105px,13vw,198px); line-height:.72; z-index:4 }
.home-hero .lead { max-width:540px; margin:45px 0 24px; font-size:clamp(16px,1.25vw,19px); line-height:1.65 }
.home-hero .btn { position:relative; overflow:hidden; padding:17px 24px; box-shadow:7px 7px 0 var(--taupe) }
.home-hero .hero-art { min-height:min(70vh,720px); transform:translate(var(--move-x,0),var(--move-y,0)); transition:transform .7s cubic-bezier(.2,.8,.2,1) }
.home-hero .hero-art::before { content:''; position:absolute; inset:5% 0 7% 12%; border:1px solid rgba(31,30,27,.35); transform:rotate(3deg) }
.home-hero .hero-art .main { position:absolute; right:2%; top:0; width:77%; height:88%; margin:0; filter:saturate(.95) contrast(1.05); box-shadow:0 30px 70px rgba(31,30,27,.22) }
/* Keep the full landscape photo visible instead of cropping it to the hero's height. */
.home-hero .hero-art .float { z-index:2; left:0; bottom:0; width:62%; height:auto; object-fit:contain; border:9px solid var(--bg); box-shadow:0 20px 50px rgba(31,30,27,.2) }
.home-hero .hero-art .hero-photo-third {
    position: absolute;
    z-index: 1;
    top: 6%;
    left: 0;
    width: 30%;
    height: auto;
    object-fit: contain;
    border: 9px solid var(--bg);
    box-shadow: 0 20px 50px rgba(31,30,27,.2)
}
.hero-photo-label { position:absolute; z-index:3; top:7%; left:1%; font-family:'Cormorant Garamond',serif; font-size:clamp(26px,2.8vw,43px); font-style:italic; line-height:.82; transform:rotate(-8deg) }
.hero-sticker { position:absolute; right:-2%; bottom:0; z-index:3; display:grid; place-items:center; width:104px; height:104px; border-radius:50%; background:var(--olive); color:var(--paper); font-size:10px; font-weight:800; line-height:1.08; letter-spacing:.16em; text-align:center; transform:rotate(10deg); box-shadow:0 0 0 7px rgba(159,141,120,.24) }
.hero-word { position:absolute; left:47%; bottom:-4%; z-index:-1; color:transparent; font-family:'Cormorant Garamond',serif; font-size:clamp(180px,28vw,500px); line-height:.7; letter-spacing:-.08em; -webkit-text-stroke:1px rgba(31,30,27,.12); transform:translateX(-20%) }
.hero-orbit { position:absolute; z-index:-1; border:1px solid rgba(31,30,27,.12); border-radius:50%; pointer-events:none }
.hero-orbit-one { width:380px; height:380px; top:-190px; left:18% }
.hero-orbit-two { width:580px; height:580px; right:-310px; bottom:-280px }
.hero-scroll { position:absolute; left:24px; bottom:32px; display:flex; align-items:center; gap:10px; font-size:9px; letter-spacing:.18em; text-transform:uppercase; transform:rotate(-90deg); transform-origin:left center }
.hero-scroll span { width:36px; height:1px; background:currentColor }

/* About page section scroll spy */
.about-scrollspy { position:sticky; top:69px; z-index:19; border-bottom:1px solid rgba(31,30,27,.2); background:rgba(244,240,234,.94); backdrop-filter:blur(18px) }
.about-scrollspy-inner { display:flex; width:min(1180px,90vw); margin:auto; overflow-x:auto; justify-content:center; scrollbar-width:none }
.about-scrollspy-inner::-webkit-scrollbar { display:none }
.about-scrollspy a { position:relative; flex:0 0 auto; padding:15px 22px 14px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; transition:color .25s ease,background .25s ease }
.about-scrollspy a::after { content:''; position:absolute; right:22px; bottom:-1px; left:22px; height:2px; background:var(--olive); transform:scaleX(0); transform-origin:left; transition:transform .3s ease }
.about-scrollspy a:hover { color:var(--ink); background:rgba(216,200,179,.2) }
.about-scrollspy a[aria-current="location"] { color:var(--ink); background:rgba(216,200,179,.34) }
.about-scrollspy a[aria-current="location"]::after { transform:scaleX(1) }
[data-scrollspy-section] { scroll-margin-top:132px }
.admin-bar .about-scrollspy { top:101px }

@media(max-width:650px) {
    .about-scrollspy { top:60px }
    .about-scrollspy-inner { width:100%; justify-content:flex-start; padding:0 10px }
    .about-scrollspy a { min-height:44px; display:flex; align-items:center; padding:13px 15px 12px; font-size:8px; letter-spacing:.12em }
    .about-scrollspy a::after { right:15px; left:15px }
    [data-scrollspy-section] { scroll-margin-top:112px }
    .admin-bar .about-scrollspy { top:106px }
}

@media(prefers-reduced-motion:reduce) {
    .about-scrollspy a,.about-scrollspy a::after { transition:none }
}

.hero-stats { position:absolute; left:50%; bottom:24px; z-index:6; display:grid; grid-template-columns:repeat(4,1fr); width:min(1180px,90vw); border:1px solid rgba(31,30,27,.24); background:rgba(251,250,247,.9); transform:translateX(-50%); backdrop-filter:blur(12px); animation:hero-stats-in .8s .25s both }
.hero-stat { display:grid; min-height:112px; place-content:center; padding:18px; text-align:center }
.hero-stat + .hero-stat { border-left:1px solid rgba(31,30,27,.2) }
.hero-stat strong { font-family:'Cormorant Garamond',serif; font-size:clamp(42px,4vw,62px); font-weight:500; line-height:.8 }
.hero-stat span { margin-top:15px; color:var(--muted); font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase }
@keyframes hero-stats-in { from { opacity:0; transform:translate(-50%,18px) } to { opacity:1; transform:translate(-50%,0) } }

@media(max-width:850px) {
    .hero-stats { position:relative; left:auto; bottom:auto; grid-template-columns:repeat(2,1fr); width:min(calc(100% - 32px),560px); margin:-40px auto 30px; transform:none; animation:hero-stats-mobile-in .7s .15s both }
    .hero-stat { min-height:104px; padding:16px 10px }
    .hero-stat:nth-child(3) { border-top:1px solid rgba(31,30,27,.2); border-left:0 }
    .hero-stat:nth-child(4) { border-top:1px solid rgba(31,30,27,.2) }
    .hero-stat strong { font-size:46px }
    @keyframes hero-stats-mobile-in { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
}

@media(max-width:420px) {
    .hero-stats { width:calc(100% - 24px); margin-top:-34px }
    .hero-stat { min-height:96px; padding:14px 8px }
    .hero-stat strong { font-size:40px }
    .hero-stat span { margin-top:12px; font-size:8px; letter-spacing:.14em }
}

@media(prefers-reduced-motion:reduce) {
    .hero-stats { animation:none }
}

.events-hero {
    min-height: 88vh;
    isolation: isolate;
    background:
        radial-gradient(circle at 72% 43%, rgba(183, 212, 76, .16), transparent 19%),
        radial-gradient(circle at 87% 16%, rgba(200, 184, 223, .24), transparent 18%),
        linear-gradient(120deg, var(--paper) 0 53%, rgba(216, 200, 179, .33) 53% 76%, var(--paper) 76% 100%)
}

/* Smallgroups directory */
.groups-directory { background:#ebe4da }
.groups-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,8vw,110px); align-items:end; margin-bottom:42px }
.groups-intro .eyebrow { margin:0 0 16px }
.groups-intro .section-title { font-size:clamp(58px,7vw,94px) }
.groups-intro .lead { margin:0 0 8px; font-size:17px }
.groups-guide { display:grid; grid-template-columns:auto repeat(3,1fr); align-items:center; margin-bottom:18px; border:1px solid rgba(31,30,27,.22); background:rgba(251,250,247,.48) }
.groups-guide span { align-self:stretch; display:grid; place-items:center; padding:16px 22px; background:var(--olive); color:var(--paper); font-size:9px; letter-spacing:.15em; text-transform:uppercase }
.groups-guide p { margin:0; padding:16px 22px; border-left:1px solid rgba(31,30,27,.18); color:var(--muted); font-size:11px; letter-spacing:.05em }
.groups-guide b { margin-right:9px; color:var(--ink); font-size:9px }
.groups-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.card.group-card { position:relative; display:flex; min-width:0; flex-direction:column; padding:0; overflow:hidden; border-color:rgba(31,30,27,.22); transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .3s ease }
.group-card::after { content:''; position:absolute; right:-70px; bottom:-70px; width:140px; height:140px; border:1px solid var(--taupe); border-radius:50%; opacity:.2; transition:transform .55s ease }
.group-image { position:relative; height:245px; overflow:hidden; background:var(--sand) }
.group-card .group-image img { width:100%; height:100%; margin:0; filter:grayscale(1) contrast(1.03); transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease }
.group-image::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(31,30,27,.25),transparent 48%); opacity:.45; transition:opacity .4s ease }
.group-image > span { position:absolute; right:14px; top:14px; z-index:2; display:grid; width:38px; height:38px; place-items:center; border-radius:50%; background:rgba(251,250,247,.9); color:var(--ink); font-size:9px; font-weight:700; letter-spacing:.08em; backdrop-filter:blur(8px) }
.group-image-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(145deg,var(--olive),var(--dark)); color:var(--paper) }
.group-image-placeholder::before { content:''; position:absolute; width:150px; height:150px; border:1px solid rgba(251,250,247,.18); border-radius:50% }
.group-image-placeholder strong { position:relative; z-index:1; max-width:88%; font-family:'Cormorant Garamond',serif; font-size:clamp(28px,3vw,54px); font-weight:500; line-height:.88; letter-spacing:.06em; text-align:center; overflow-wrap:anywhere }
.group-card:nth-child(2) .group-image-placeholder strong { max-width:96%; font-size:clamp(16px,2.35vw,42px); letter-spacing:.025em; overflow-wrap:normal; word-break:keep-all }
.group-image-placeholder small { position:relative; z-index:1; font-size:8px; letter-spacing:.18em; text-transform:uppercase; opacity:.72 }
.group-card-copy { position:relative; z-index:2; display:flex; min-height:245px; flex:1; flex-direction:column; padding:24px }
.group-card .meta { color:var(--olive); font-weight:700 }
.card.group-card h3 { margin:12px 0 10px; font-size:clamp(30px,3vw,46px); line-height:.92; overflow-wrap:anywhere }
.group-card p { margin:0 0 24px; font-size:14px; line-height:1.65 }
.group-card details { margin:-8px 0 22px; color:var(--muted); font-size:13px }
.group-card summary { display:inline-flex; min-height:34px; align-items:center; color:var(--ink); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer }
.group-card summary::marker { content:'' }
.group-card summary::after { content:'+'; margin-left:9px; font-size:15px; font-weight:400; transition:transform .25s ease }
.group-card details[open] summary::after { transform:rotate(45deg) }
.group-card details p { margin:8px 0 0; font-size:13px; line-height:1.6 }
.group-card a { align-self:flex-start; margin-top:auto; padding-bottom:4px; border-bottom:1px solid currentColor; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; transition:transform .3s ease }
.group-card.reveal.visible:hover { transform:translateY(-9px); border-color:rgba(31,30,27,.55); box-shadow:0 24px 45px rgba(31,30,27,.14) }
.group-card:hover .group-image img { transform:scale(1.075); filter:grayscale(1) contrast(1.08) }
.group-card:hover .group-image::after { opacity:.12 }
.group-card:hover::after { transform:scale(1.35) }
.group-card:hover a { transform:translateX(5px) }
.group-card:nth-child(3n + 2) .group-card-copy { background:#f0eaf5 }
.group-card:nth-child(4n) .group-image > span { background:#b7d44c }
.group-card:nth-child(1) { transition-delay:.02s }
.group-card:nth-child(2) { transition-delay:.08s }
.group-card:nth-child(3) { transition-delay:.14s }
.group-card:nth-child(4) { transition-delay:.04s }
.group-card:nth-child(5) { transition-delay:.1s }
.group-card:nth-child(6) { transition-delay:.16s }
.group-card:nth-child(7) { transition-delay:.04s }
.group-card:nth-child(8) { transition-delay:.1s }
.group-card:nth-child(9) { transition-delay:.16s }
.group-card:nth-child(10) { transition-delay:.04s }
.group-card:nth-child(11) { transition-delay:.1s }
.group-card:nth-child(12) { transition-delay:.16s }

@media(max-width:980px) {
    .groups-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
    .groups-guide { grid-template-columns:1fr 1fr }
    .groups-guide span { grid-row:span 2 }
    .groups-guide p { border-bottom:1px solid rgba(31,30,27,.18) }
}

@media(max-width:650px) {
    .groups-intro { grid-template-columns:1fr; gap:18px; margin-bottom:28px }
    .groups-guide { grid-template-columns:1fr; margin-bottom:14px }
    .groups-guide span { grid-row:auto }
    .groups-guide p { border-left:0 }
    .groups-grid { grid-template-columns:1fr }
    .card.group-card { display:grid; grid-template-columns:42% 58%; min-height:245px }
    .group-image { height:100%; min-height:245px }
    .group-card-copy { min-height:245px; padding:20px }
    .card.group-card h3 { font-size:34px }
    .group-card p { font-size:13px }
}

@media(max-width:420px) {
    .card.group-card { grid-template-columns:1fr }
    .group-image { height:220px; min-height:0 }
    .group-card-copy { min-height:230px }
}

@media(prefers-reduced-motion:reduce) {
    .group-card,.group-card .group-image img,.group-card::after,.group-card a { transition:none }
}

/* Keep phone rules last so page-specific desktop styles cannot override them. */
@media(max-width:650px) {
    .container { width:min(100% - 32px,1180px) }
    .nav { min-height:60px; padding:10px 16px }
    .section { padding:58px 0 }
    .section-title { font-size:clamp(45px,14vw,66px) }
    .lead { font-size:16px }
    .btn { min-height:48px; justify-content:center }
    .about-hero .split { padding:46px 0 54px }
    .about-hero h1 { font-size:clamp(68px,20vw,96px) }
    .about-hero-art { min-height:430px }
    .about-photo-main { height:325px }
    .smallgroups-hero-grid { grid-template-columns:1fr; gap:20px; padding:42px 0 56px }
    .smallgroups-hero-copy h1 { font-size:clamp(62px,18vw,88px) }
    .smallgroups-hero-copy .lead { margin:24px 0 20px; font-size:16px }
    .smallgroups-visual { min-height:340px }
    .ring-a { width:260px; height:260px }
    .ring-b { width:190px; height:190px }
    .smallgroups-center { width:140px; height:140px; font-size:27px }
    .groups-directory { padding-top:54px }
    .groups-intro { grid-template-columns:1fr; gap:18px; margin-bottom:28px }
    .groups-intro .section-title { font-size:clamp(50px,15vw,68px) }
    .groups-guide { grid-template-columns:1fr; margin-bottom:14px }
    .groups-guide span { grid-row:auto }
    .groups-guide p { min-height:46px; padding:12px 15px; border-left:0 }
    .groups-grid { grid-template-columns:1fr; gap:12px }
    .card.group-card { display:grid; grid-template-columns:38% 62%; min-height:220px }
    .group-image { height:100%; min-height:220px }
    .group-card-copy { min-height:220px; padding:17px }
    .card.group-card h3 { margin:9px 0 8px; font-size:32px }
    .group-card p { margin-bottom:16px; font-size:12px }
    .social-heading { gap:20px; margin-bottom:34px }
    .social-card { min-height:330px; padding:26px }
    .upcoming-list { gap:10px }
    .upcoming-row {
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;
        gap:18px;
        min-height:0;
        padding:21px
    }
    .upcoming-info { align-self:start }
    .upcoming-info h3 { margin-bottom:7px; font-size:clamp(34px,10vw,42px); line-height:.95 }
    .upcoming-info p { font-size:13px; line-height:1.5 }
    .upcoming-date { padding:8px 11px; font-size:10px }
    .upcoming-row a { min-height:38px; display:flex; align-items:center; margin-top:-4px }
    .events-toggle { width:100%; min-height:48px; margin-top:20px }
}

@media(max-width:420px) {
    .card.group-card { grid-template-columns:36% 64% }
    .group-image,.group-card-copy { min-height:225px }
}

/* Keep Smallgroup names readable inside narrow mobile artwork cards. */
@media(max-width:650px) {
    .card.group-card .group-image-placeholder strong {
        max-width:calc(100% - 20px);
        font-size:clamp(18px,4.4vw,28px);
        line-height:.92;
        letter-spacing:.035em;
        overflow-wrap:normal;
        word-break:normal
    }
    .card.group-card .group-image-placeholder small {
        max-width:calc(100% - 18px);
        font-size:7px;
        line-height:1.35;
        letter-spacing:.12em;
        text-align:center
    }
}

@media(max-width:420px) {
    .card.group-card .group-image-placeholder strong { font-size:clamp(17px,5vw,21px); letter-spacing:.025em }
}

@media(max-width:650px) {
    .groups-grid .group-card:nth-child(2) .group-image-placeholder strong {
        max-width:calc(100% - 12px);
        font-size:clamp(14px,3.8vw,22px);
        line-height:.94;
        letter-spacing:0
    }
    .groups-grid .group-card:nth-child(2) .group-card-copy h3 {
        font-size:clamp(18px,5.5vw,27px);
        letter-spacing:-.025em;
        overflow-wrap:normal;
        word-break:normal;
        white-space:nowrap
    }
}

@media(hover:none) and (pointer:coarse) {
    .group-card.reveal.visible:hover,.social-card:hover,.upcoming-row:hover,.card:hover { transform:none; box-shadow:none }
    .group-card:hover .group-image img { transform:none }
}
/* Layered editorial grey — final surface and photography system */
html body { background:#eeede9; color:#292826 }
html body .nav,html body .nav-links { background:#f5f4f0; border-color:#d5d1ca }
html body .about-scrollspy { background:#e5e2dc; border-color:#d0cbc3 }
html body .section { background:#eeede9 }
html body .home-hero,html body .about-hero,html body .events-hero,html body .smallgroups-hero { background:linear-gradient(125deg,#f3f2ee 0 64%,#dfdcd6 64%); color:#292826 }
html body .upcoming-events,html body .groups-directory,html body .smallgroup-form-page { background:#e7e4de }
html body .first-visit-section,html body .location-section { background:#dedad3 }
html body .card,html body .cards>.card:nth-child(n),html body .group-card,html body .gallery-album,html body .smallgroup-form-card { background:#f7f6f2; border:1px solid #d4cfc7; box-shadow:0 10px 28px rgba(40,36,31,.055) }
html body .first-visit-card,html body .first-visit-copy { background:#f7f6f2; color:#292826 }
html body .section-title { color:#292826 }
html body .home-hero h1,html body .first-visit-copy .section-title span,html body .events-header .section-title { color:#df715f }
html body .btn { background:#292826; color:#f7f6f2; border:1px solid #292826; box-shadow:none }
html body .btn:hover { background:#bc5647; border-color:#bc5647; color:#fff }
html body .marquee { background:#d8d3cb; color:#45403a; border-color:#c6bfb5 }
html body .social-section { background:#e2ded7 }
html body .social-card { background:#f5f2ec; color:#292826; border:1px solid #cbc4ba; box-shadow:none }
html body .social-instagram { border-top:4px solid #df715f }
html body .social-tiktok { border-top:4px solid #49453f }
html body #home-gallery { background:#34322f; color:#f5f2ec }
html body #home-gallery .section-title { color:#ed9a8b }
html body #home-gallery .text-muted,html body #home-gallery .eyebrow { color:#d8d1c7 }
html body #home-gallery .btn.light { background:#f5f2ec; color:#292826; border-color:#f5f2ec }
html body .footer { background:#d9d4cc; color:#292826; border-top:1px solid #c4bcb0 }
html body .hero-stats { background:#f7f6f2; border:1px solid #d5cfc5; box-shadow:0 12px 30px rgba(40,36,31,.07) }
html body .hero-stat strong { color:#34322f }
html body .hero-stat + .hero-stat { border-color:#d7d0c6 }
html body .first-visit-lead,html body .visit-facts small { color:#686159 }
html body .visit-facts strong { color:#292826 }
html body .hero-art img,html body .home-hero .hero-art .main,html body .home-hero .hero-art .float,html body .home-hero .hero-art .hero-photo-third,html body .card img,html body .card:hover img,html body .group-card .group-image img,html body .group-card:hover .group-image img,html body .gallery-mosaic img,html body #home-gallery .gallery-mosaic img,html body .gallery-album img,html body .about-photo,html body .events-photo,html body .first-visit-visual img { filter:brightness(.8) saturate(.9) contrast(1.03) }
@media(max-width:768px) {
    html body .home-hero,html body .about-hero,html body .events-hero,html body .smallgroups-hero { background:linear-gradient(150deg,#f3f2ee 0 76%,#dfdcd6 76%) }
    html body .first-visit-card { box-shadow:none }
    html body .social-card { min-height:280px }
}
/* Contrast contract: light surfaces use dark text; dark media retain light text. */
html body .footer h2,html body .footer h3,html body .footer p,html body .footer a,html body .footer small,
html body .vision-section h2,html body .vision-section h3,html body .vision-section p,
html body .location-section h2,html body .location-section h3,html body .location-section p,
html body .group-help-section h2,html body .group-help-section h3,html body .group-help-section p,
html body .groups-guide,html body .groups-guide p,html body .groups-guide strong,
html body .social-card strong,html body .social-card small,html body .social-card span,
html body .card h3,html body .card p,html body .group-card h3,html body .group-card p,
html body .upcoming-row:not(.is-next) .upcoming-info h3,
html body .first-visit-copy .section-title,html body .visit-facts strong { color:#292826 }
html body .footer .text-muted,html body .footer .meta,html body .footer .eyebrow,
html body .vision-section .text-muted,html body .location-section .text-muted,
html body .group-help-section .text-muted,html body .group-help-steps small { color:#625c55 }
html body .first-visit-copy .section-title span,html body .group-help-copy .section-title span { color:#bb5243 }
html body .footer a:hover { color:#a94235 }
html body .upcoming-row:not(.is-next):hover { background:#e2ddd5; color:#292826 }
html body .upcoming-row:not(.is-next):hover .upcoming-info p { color:#625c55 }
/* One photo treatment, including collage images and hover states. */
html body img[src*="/wp-content/uploads/"]:not(.logo):not([src$=".svg"]) {
    filter:brightness(.8) saturate(.9) contrast(1.03) !important;
}
html body .vision-symbol img { filter:none !important }
/* High-contrast scrollspy selection on all pages. */
html body .about-scrollspy a { color:#39352f; transition:background .18s ease,color .18s ease; border-bottom:3px solid transparent }
html body .about-scrollspy a:hover { background:#d1cbc1; color:#1e1d1b }
html body .about-scrollspy a[aria-current="location"],
html body .about-scrollspy a.active { background:#292826; color:#fff; border-bottom-color:#df715f; font-weight:800 }
html body .about-scrollspy a:focus-visible { outline:2px solid #a94235; outline-offset:-4px; background:#d1cbc1; color:#1e1d1b }
html body .about-scrollspy a[aria-current="location"]:focus-visible { background:#292826; color:#fff }
/* Location card: explicit contrast on the light-grey surface. */
html body .location-grid { border-color:#c6c0b7; background:#e5e1da }
html body .location-copy .eyebrow { color:#625b53 }
html body .location-copy .lead { color:#59534d }
html body .location-details { border-top-color:#bcb5aa }
html body .location-details span { color:#a84537 }
html body .location-details p { color:#59534d }
html body .location-details strong { color:#292826; font-weight:600 }
html body .location-copy .btn { background:#292826; border-color:#292826; color:#f7f6f2 }
html body .location-copy .btn:hover { background:#a94235; border-color:#a94235; color:#fff }
@media(max-width:650px) {
    html body .location-copy { padding:30px 22px }
    html body .location-copy .lead { font-size:15px; line-height:1.65 }
    html body .location-details { gap:18px; margin-top:22px; padding-top:22px }
    html body .location-copy .btn { margin-top:24px; width:100%; justify-content:center }
}
/* Consistent mobile navigation geometry on every page. */
@media(max-width:850px) {
    html body .nav { display:flex; align-items:center; justify-content:space-between; min-height:68px; height:68px; padding:0 20px; box-sizing:border-box; width:100%; border-bottom:1px solid #d0cbc3; box-shadow:none }
    html body .nav .logo { display:inline-flex; align-items:center; height:44px; margin:0; padding:0; font-size:28px; line-height:1; letter-spacing:-.025em; color:#292826 }
    html body .nav .menu-toggle { display:flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#292826; font-family:Arial,sans-serif; font-size:25px; line-height:1; box-shadow:none }
    html body .nav .menu-toggle[aria-expanded="true"] { background:#292826; color:#f5f4f1; transform:none }
    html body .nav .menu-toggle:focus-visible { outline:2px solid #bb5243; outline-offset:3px }
    html body .about-scrollspy { top:68px }
    html body.admin-bar .about-scrollspy { top:100px }
}
@media(max-width:782px) {
    html body.admin-bar .about-scrollspy { top:114px }
}
/* Unified light-grey surfaces across all pages and breakpoints. */
html body { background:#ecebe7; color:#272724 }
body .nav,body .nav-links,body .about-scrollspy { background:#ecebe7 }
body .section,body .home-hero,body .about-hero,body .events-hero,body .smallgroups-hero,body .gallery-hero,body .smallgroup-form-page,body .social-section,body .vision-section,body .location-section,body .group-help-section,body #home-gallery { background:#ecebe7; color:#272724 }
body .card,body .cards>.card:nth-child(n),body .group-card,body .gallery-album,body .first-visit-card,body .first-visit-copy,body .smallgroup-form-card,body .first-visit-card .visit-note { background:#f5f4f1; color:#272724 }
body .section-title,body .dark .split .section-title,body .first-visit-copy .section-title,body #home-gallery .section-title { color:#df715f }
body .first-visit-lead,body .text-muted,body .dark .text-muted,body #home-gallery .text-muted,body .group-help-copy>p:not(.eyebrow) { color:#625e58 }
body .eyebrow,body .dark .eyebrow,body #home-gallery .eyebrow,body .first-visit-copy .eyebrow,body .visit-facts small { color:#625e58 }
body .visit-facts strong,body .hero-stat strong,body .group-help-steps strong { color:#272724 }
body .visit-facts,body .visit-facts>div+div { border-color:rgba(39,39,36,.2) }
body .visit-route { color:#272724; border-color:rgba(39,39,36,.3) }
body .marquee,body .groups-guide { background:#dedbd5; color:#272724 }
body .smallgroup-contact-form input { background:#f5f4f1; color:#272724; border-color:#a9a49c }
body #home-gallery .btn.light,body .first-visit-card .btn.light { background:#272724; color:#f5f4f1; border-color:#272724; box-shadow:none }
body .footer { background:#dedbd5; color:#272724 }
body .footer a,body .footer p,body .footer small { color:#45413d }

/* Final COMMUNITY palette overrides */
body { background:var(--community-ivory); color:var(--community-ink) }
.nav { background:rgba(244,239,230,.96); border-color:rgba(39,39,36,.14) }
.logo,.nav-links a,.about-scrollspy a { color:var(--community-ink) }
.about-scrollspy { background:var(--community-paper) }
.about-scrollspy a[aria-current="location"] { background:var(--community-sand); color:var(--community-ink) }
.home-hero { background:linear-gradient(112deg,var(--community-ivory) 0 72%,var(--community-paper) 72%); color:var(--community-ink) }
.home-hero h1 { color:var(--community-coral); font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:800; letter-spacing:-.055em; line-height:.78; text-transform:uppercase }
.home-hero .eyebrow,.home-hero .lead { color:var(--community-ink) }
.home-hero .hero-art .main,.home-hero .hero-art .float,.home-hero .hero-art .hero-photo-third { filter:saturate(.55) contrast(1.03) }
.home-hero .hero-art .float,.home-hero .hero-art .hero-photo-third { border-color:var(--community-paper) }
.hero-sticker,.next-event-badge,.events-next { background:var(--community-coral); color:var(--community-paper) }
.home-hero .btn,.btn { border-color:var(--community-ink); background:var(--community-ink); color:var(--community-paper); box-shadow:none }
.home-hero .btn:hover,.btn:hover { border-color:var(--community-coral); background:var(--community-coral); color:var(--community-paper) }
.hero-stats,.upcoming-events,.about-section,.groups-directory,.smallgroup-form-page { background:var(--community-paper) }
.marquee,.first-visit-section,.group-help-section,.dark { background:var(--community-sand); color:var(--community-ink) }
.upcoming-list,.upcoming-row,.cards>.card,.group-card,.smallgroup-form-card { background:var(--community-ivory) }
.upcoming-row.is-next { border-color:var(--community-coral); box-shadow:inset 4px 0 0 var(--community-coral) }
.first-visit-card { background:var(--community-paper); color:var(--community-ink) }
.dark .text-muted,.text-muted { color:var(--community-muted) }
.quote,.group-help-copy .section-title span { color:var(--community-coral) }
.about-hero,.events-hero,.smallgroups-hero { background:var(--community-ivory) }
.about-hero h1,.events-hero-copy h1,.smallgroups-hero-copy h1 { color:var(--community-coral) }
.footer { background:var(--community-ink); color:var(--community-paper) }

/* Smallgroups contact callout */
.group-help-section { position:relative; overflow:hidden; padding:clamp(70px,9vw,120px) 0; background:#302e25 }
.group-help-section::before { content:'TALK'; position:absolute; right:-.04em; bottom:-.22em; color:transparent; font-family:'Cormorant Garamond',serif; font-size:clamp(180px,28vw,470px); line-height:.7; letter-spacing:-.08em; -webkit-text-stroke:1px rgba(255,255,255,.08); pointer-events:none }
.group-help-card { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:clamp(50px,8vw,120px); align-items:center }
.group-help-copy .eyebrow { color:#c8d75d }
.group-help-copy .section-title { max-width:720px; color:var(--paper); font-size:clamp(65px,7.4vw,112px); line-height:.82 }
.group-help-copy .section-title span { color:#c8d75d; font-style:italic }
.group-help-copy > p:not(.eyebrow) { max-width:650px; margin:30px 0; color:rgba(255,255,255,.72); font-size:17px; line-height:1.7 }
.group-help-button { background:#c8d75d; color:#24231d; box-shadow:7px 7px 0 rgba(255,255,255,.18) }
.group-help-button:hover { background:#d8e66a }
.group-help-steps { border-top:1px solid rgba(255,255,255,.22) }
.group-help-steps > div { display:grid; grid-template-columns:52px 1fr; gap:2px 18px; padding:25px 4px; border-bottom:1px solid rgba(255,255,255,.22) }
.group-help-steps span { grid-row:1 / span 2; color:#c8d75d; font:500 30px/1 'Cormorant Garamond',serif }
.group-help-steps strong { color:var(--paper); font-size:13px; letter-spacing:.08em; text-transform:uppercase }
.group-help-steps small { color:rgba(255,255,255,.6); font-size:13px; line-height:1.5 }
.smallgroup-form-promises { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px }
.smallgroup-form-promises span { padding:9px 12px; border:1px solid rgba(31,30,27,.3); border-radius:999px; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase }

@media(max-width:850px) {
    .group-help-card { grid-template-columns:1fr; gap:48px }
    .group-help-copy .section-title { font-size:clamp(62px,15vw,96px) }
}

@media(max-width:560px) {
    .group-help-section { padding:62px 0 74px }
    .group-help-copy > p:not(.eyebrow) { margin:24px 0; font-size:15px }
    .group-help-button { width:100%; justify-content:center }
    .group-help-steps > div { grid-template-columns:42px 1fr; gap:2px 12px; padding:21px 0 }
}

/* ================================================================
   FUSE BUCHEGG CI — poster-inspired system
   Requested commercial faces are first in each stack. Barlow
   Condensed and DM Serif Display are web fallbacks.
   ================================================================ */
:root {
    --ci-blue:#605c57;
    --ci-cream:#ecebe7;
    --ci-slate:#77716a;
    --ci-sage:#c9c1b7;
    --ci-lavender:#aaa29a;
    --ci-forest:#34312e;
    --ci-navy:#272724;
    --ci-coral:#df715f;
    --ci-orange:#df715f;
    --bg:var(--ci-cream);
    --paper:#fffdf5;
    --ink:var(--ci-navy);
    --muted:var(--ci-slate);
    --line:rgba(8,37,104,.28);
    --taupe:var(--ci-lavender);
    --olive:var(--ci-sage);
    --sand:#e3d9bb;
    --dark:var(--ci-navy);
    --white:#fff
}

body {
    background:var(--ci-cream);
    color:var(--ci-navy);
    font-family:'Europa Grotesk SH Medium Extended','Barlow Condensed','Arial Narrow',Arial,sans-serif;
    font-size:18px
}

h1,h2,h3,.section-title {
    font-family:'Classic Grotesque Pro Extended','Barlow Condensed','Arial Narrow',sans-serif;
    font-weight:900;
    line-height:.82;
    letter-spacing:-.035em;
    text-transform:uppercase
}

.lead,.text-muted { color:var(--ci-slate) }
.eyebrow,.meta {
    color:currentColor;
    font-weight:800;
    letter-spacing:.2em
}

.nav {
    min-height:82px;
    padding:17px clamp(20px,4vw,58px);
    border-bottom:3px solid var(--ci-navy);
    background:rgba(238,231,207,.96);
    backdrop-filter:blur(14px)
}

.admin-bar .nav { top:32px }
.logo {
    font-family:'Classic Grotesque Pro Extended','Barlow Condensed',sans-serif;
    font-size:36px;
    font-weight:900;
    letter-spacing:.035em;
    text-transform:uppercase
}
.nav-links { gap:clamp(17px,2.5vw,38px); font-size:13px; font-weight:800; letter-spacing:.12em }
.nav-links a { position:relative; padding:8px 0 }
.nav-links a::after { content:''; position:absolute; right:0; bottom:0; left:0; height:4px; background:var(--ci-coral); transform:scaleX(0); transform-origin:left; transition:transform .25s ease }
.nav-links a:hover::after { transform:scaleX(1) }
.menu-toggle { color:var(--ci-navy) }

.about-scrollspy {
    border-bottom:2px solid var(--ci-navy);
    background:rgba(255,253,245,.97)
}
.about-scrollspy a {
    padding-block:17px;
    color:var(--ci-navy);
    font-size:10px;
    font-weight:800
}
.about-scrollspy a:hover,.about-scrollspy a[aria-current="location"] { background:var(--ci-coral); color:var(--paper) }
.about-scrollspy a::after { display:none }

.section { padding:clamp(76px,9vw,136px) 0 }
.btn {
    min-height:54px;
    padding:15px 24px;
    border:3px solid var(--ci-navy);
    background:var(--ci-coral);
    color:var(--ci-navy);
    font-size:14px;
    font-weight:900;
    letter-spacing:.13em;
    box-shadow:8px 8px 0 var(--ci-navy)
}
.btn:hover { transform:translate(-2px,-2px); background:var(--ci-orange); color:var(--ci-navy); box-shadow:11px 11px 0 var(--ci-navy) }
.btn.light { border-color:var(--ci-cream); background:var(--ci-cream); color:var(--ci-navy); box-shadow:8px 8px 0 var(--ci-coral) }

/* Homepage: graphic poster and photo collage */
.home-hero {
    min-height:calc(100vh - 82px);
    background:var(--ci-navy);
    color:var(--ci-cream);
    border-bottom:0
}
.home-hero::before { content:'FIND YOUR PLACE'; position:absolute; top:7%; left:-.02em; color:rgba(238,231,207,.055); font:900 clamp(90px,17vw,280px)/.72 'Barlow Condensed',sans-serif; letter-spacing:-.06em; white-space:nowrap }
.home-hero .hero-grid { grid-template-columns:.82fr 1.18fr; gap:clamp(35px,6vw,90px); padding-top:70px }
.home-hero h1 { color:var(--ci-coral); font-size:clamp(128px,16vw,245px); line-height:.68 }
.home-hero .lead { max-width:540px; color:var(--ci-cream); font-size:21px }
.home-hero .eyebrow { color:var(--ci-orange) }
.home-hero .hero-art::before { border:3px solid var(--ci-coral); transform:rotate(2deg) }
.home-hero .hero-art .main { filter:grayscale(1) contrast(1.15); box-shadow:18px 18px 0 var(--ci-blue) }
.home-hero .hero-art .float { border-color:var(--ci-cream); box-shadow:12px 12px 0 var(--ci-coral) }
.home-hero .hero-art .hero-photo-third { border-color:var(--ci-cream); filter:grayscale(.35); box-shadow:10px 10px 0 var(--ci-orange) }
.hero-sticker { right:-3%; width:124px; height:124px; background:var(--ci-coral); color:var(--ci-navy); font-size:12px; box-shadow:none }
.hero-word { color:transparent; -webkit-text-stroke:2px rgba(238,231,207,.12) }
.hero-scroll { color:var(--ci-cream) }
.hero-stats {
    border:3px solid var(--ci-navy);
    background:var(--ci-cream);
    color:var(--ci-navy);
    backdrop-filter:none;
    box-shadow:10px 10px 0 var(--ci-coral)
}
.hero-stat + .hero-stat { border-color:var(--ci-navy) }
.hero-stat strong { color:var(--ci-blue); font-family:'Barlow Condensed',sans-serif; font-weight:900 }
.hero-stat span { color:var(--ci-navy); font-weight:800 }
.marquee { border-block:3px solid var(--ci-navy); background:var(--ci-coral); color:var(--ci-navy); font-weight:900 }

/* Events as campaign posters */
.upcoming-events { background:var(--paper) }
.events-header { display:grid; grid-template-columns:.35fr 1fr; gap:20px 45px; align-items:end; margin-bottom:50px }
.events-header .eyebrow { color:var(--ci-coral) }
.events-header .section-title { grid-column:2; color:var(--ci-navy); font-size:clamp(74px,10vw,150px) }
.events-header .text-muted { grid-column:2; max-width:640px; font-size:20px }
.upcoming-list { border:3px solid var(--ci-navy); box-shadow:13px 13px 0 var(--ci-blue) }
.upcoming-row { min-height:190px; border-color:var(--ci-navy); background:var(--ci-cream) }
.upcoming-row::before { filter:grayscale(1) contrast(1.1); opacity:.24 }
.upcoming-row:hover { color:var(--paper); background:var(--ci-navy) }
.upcoming-row:hover::before { opacity:.38; mix-blend-mode:luminosity }
.upcoming-date { color:var(--ci-coral); font-size:18px; font-weight:900 }
.upcoming-info h3 { font-size:clamp(48px,6vw,88px) }
.upcoming-row > a { border-color:currentColor; font-weight:900 }

.first-visit-section { background:var(--ci-sage) }
.first-visit-card { border:3px solid var(--ci-navy); background:var(--ci-forest); color:var(--ci-cream); box-shadow:16px 16px 0 var(--ci-coral) }
.first-visit-copy .section-title { color:var(--ci-cream) }
.first-visit-copy .section-title span { color:var(--ci-orange) }
.first-visit-lead,.visit-facts small { color:rgba(238,231,207,.72) }
.visit-facts { border-color:rgba(238,231,207,.35) }
.visit-facts > div + div { border-color:rgba(238,231,207,.35) }
.visit-facts strong { color:var(--ci-cream); font-family:'Barlow Condensed',sans-serif; font-weight:800 }
.visit-note { background:var(--ci-coral); color:var(--ci-navy); transform:rotate(-2deg) }
.visit-note span { font-family:'DM Serif Display',serif; font-style:italic }

.quote { color:var(--ci-navy); font-family:'DM Serif Display','Stella',serif; font-style:italic; font-size:clamp(54px,8vw,115px) }
.cards { gap:0; border:3px solid var(--ci-navy) }
.card { border:0; border-right:3px solid var(--ci-navy); background:var(--ci-cream) }
.card:last-child { border-right:0 }
.card:nth-child(2) { background:var(--ci-lavender); color:var(--ci-navy) }
.card:nth-child(3) { background:var(--ci-sage); color:var(--ci-navy) }
.card img { filter:grayscale(.85) contrast(1.08); border-bottom:3px solid var(--ci-navy); transition:filter .3s ease }
.card:hover img { filter:grayscale(0) contrast(1) }
.card h3 { font-size:clamp(42px,4vw,68px) }
.card .meta { color:var(--ci-coral); font-weight:900 }
.card-action { font-weight:900 }

.dark { background:var(--ci-navy); color:var(--ci-cream) }
.dark .text-muted { color:rgba(238,231,207,.72) }
.gallery-mosaic img { filter:grayscale(1) contrast(1.1); border:3px solid var(--ci-cream) }
.gallery-mosaic img:nth-child(2n) { border-color:var(--ci-coral) }
.social-section { background:var(--ci-blue) }
.social-heading .section-title,.social-heading .lead { color:var(--ci-cream) }
.social-card { border:3px solid var(--ci-navy); border-radius:0; box-shadow:10px 10px 0 var(--ci-navy) }
.social-instagram { background:var(--ci-coral) }
.social-tiktok { background:var(--ci-cream) }

/* Inner page campaigns */
.about-hero,.events-hero,.smallgroups-hero { background:var(--ci-cream) }
.about-hero h1,.events-hero-copy h1,.smallgroups-hero-copy h1 { color:var(--ci-navy); font-size:clamp(82px,10vw,158px) }
.about-photo,.events-photo { border:3px solid var(--ci-navy); filter:grayscale(.85); box-shadow:12px 12px 0 var(--ci-coral) }
.experience-section,.groups-directory { background:var(--paper) }
.experience-card { border:3px solid var(--ci-navy); border-radius:0; box-shadow:10px 10px 0 var(--ci-slate) }
.vision-section { background:var(--ci-blue); color:var(--ci-cream) }
.vision-section .text-muted,.vision-section .lead { color:rgba(238,231,207,.76) }
.location-section { background:var(--ci-sage) }
.events-hero { background:linear-gradient(145deg,var(--ci-cream) 0 60%,var(--ci-lavender) 60%) }
.events-next { border:3px solid var(--ci-navy); background:var(--ci-coral); color:var(--ci-navy); box-shadow:10px 10px 0 var(--ci-navy) }
.smallgroups-hero { background:linear-gradient(145deg,var(--ci-cream) 0 60%,var(--ci-sage) 60%) }
.smallgroups-ring { border-color:var(--ci-navy) }
.smallgroups-center { background:var(--ci-coral); color:var(--ci-navy); font-family:'DM Serif Display',serif }
.smallgroups-note { border:2px solid var(--ci-navy); background:var(--ci-cream); color:var(--ci-navy); font-weight:800 }
.groups-guide { border:3px solid var(--ci-navy); background:var(--ci-blue); color:var(--ci-cream) }
.group-card { border:3px solid var(--ci-navy); background:var(--ci-cream); box-shadow:8px 8px 0 var(--ci-slate) }
.group-image { border-color:var(--ci-navy) }
.group-image::after { background:var(--ci-blue) }
.group-image-placeholder { background:var(--ci-lavender) }
.group-card h3 { font-family:'Barlow Condensed',sans-serif; font-weight:900; text-transform:uppercase }
.group-help-section { background:var(--ci-navy) }
.group-help-copy .section-title span { color:var(--ci-coral) }
.group-help-button { border-color:var(--ci-cream); background:var(--ci-coral); color:var(--ci-navy); box-shadow:8px 8px 0 var(--ci-cream) }
.group-help-steps span { color:var(--ci-coral) }

/* Gallery archive */
.gallery-hero { background:var(--ci-navy); color:var(--ci-cream) }
.gallery-hero h1 { color:var(--ci-coral) }
.gallery-filter-pane,.gallery-filter-toggle { border-color:var(--ci-navy); background:var(--ci-cream) }
.gallery-album { border:3px solid var(--ci-navy); border-radius:0; background:var(--paper); box-shadow:8px 8px 0 var(--ci-slate) }
.gallery-album img { filter:grayscale(.8); transition:filter .3s ease }
.gallery-album:hover img { filter:grayscale(0) }

/* Form as an editorial campaign card */
.smallgroup-form-page { background:linear-gradient(135deg,var(--ci-cream) 0 60%,var(--ci-blue) 60%) }
.smallgroup-form-intro h1 { color:var(--ci-navy) }
.smallgroup-form-card { border:3px solid var(--ci-navy); background:var(--paper); box-shadow:16px 16px 0 var(--ci-coral) }
.smallgroup-form-heading > span { border:0; border-radius:0; background:var(--ci-coral); color:var(--ci-navy); font-weight:900 }
.smallgroup-contact-form input { border:3px solid var(--ci-navy); background:var(--ci-cream) }
.smallgroup-contact-form input:focus { border-color:var(--ci-coral); box-shadow:5px 5px 0 var(--ci-navy) }
.smallgroup-form-promises span { border:2px solid var(--ci-navy); border-radius:0; background:var(--ci-sage) }

.footer { border-top:3px solid var(--ci-navy); background:var(--ci-forest); color:var(--ci-cream) }
.footer h2 { color:var(--ci-coral) }

@media(max-width:900px) {
    .nav { min-height:68px; padding:12px 20px }
    .home-hero .hero-grid { grid-template-columns:1fr; padding-top:50px }
    .home-hero h1 { font-size:clamp(118px,29vw,210px) }
    .events-header { grid-template-columns:1fr }
    .events-header .section-title,.events-header .text-muted { grid-column:1 }
    .cards { border:0; gap:18px }
    .card,.card:last-child { border:3px solid var(--ci-navy) }
}

@media(max-width:650px) {
    body { font-size:16px }
    .nav { border-bottom-width:2px }
    .logo { font-size:29px }
    .about-scrollspy { top:60px }
    .home-hero h1 { font-size:clamp(105px,31vw,155px) }
    .home-hero .lead { font-size:17px }
    .home-hero .hero-art .main { box-shadow:9px 9px 0 var(--ci-blue) }
    .hero-sticker { width:88px; height:88px; font-size:8px }
    .hero-stats { box-shadow:7px 7px 0 var(--ci-coral) }
    .events-header .section-title { font-size:clamp(64px,20vw,98px) }
    .upcoming-list { box-shadow:8px 8px 0 var(--ci-blue) }
    .upcoming-row { min-height:160px }
    .first-visit-card { box-shadow:8px 8px 0 var(--ci-coral) }
    .about-hero h1,.events-hero-copy h1,.smallgroups-hero-copy h1 { font-size:clamp(66px,18vw,98px) }
    .smallgroup-form-page { background:var(--ci-cream) }
    .smallgroup-form-card { box-shadow:8px 8px 0 var(--ci-coral) }
}

/* ================================================================
   WELCOME HOME refinement — warmer, calmer, more editorial
   ================================================================ */
body {
    background:#f3eddd;
    color:#243d34;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:17px;
    line-height:1.65
}

h1,h2,.section-title {
    font-family:'Stella','DM Serif Display',Georgia,serif;
    font-weight:400;
    line-height:.9;
    letter-spacing:-.025em;
    text-transform:none
}
h3 {
    font-family:'Classic Grotesque Pro Extended','Barlow Condensed','Arial Narrow',sans-serif;
    font-weight:700;
    line-height:.95;
    letter-spacing:-.01em;
    text-transform:none
}
.eyebrow,.meta { font-family:'Europa Grotesk SH Medium Extended','Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.16em }

.nav {
    min-height:76px;
    border-bottom:1px solid rgba(44,75,62,.24);
    background:rgba(243,237,221,.94);
    box-shadow:0 5px 24px rgba(44,75,62,.05)
}
.logo { color:var(--ci-forest); font-size:33px; font-weight:800 }
.nav-links { color:var(--ci-forest); font-size:12px; font-weight:600 }
.nav-links a::after { height:2px; background:var(--ci-orange) }
.about-scrollspy { border-bottom:1px solid rgba(44,75,62,.18); background:rgba(255,253,245,.96) }
.about-scrollspy a { color:var(--ci-forest); font-weight:600 }
.about-scrollspy a:hover,.about-scrollspy a[aria-current="location"] { background:rgba(113,145,137,.18); color:var(--ci-forest) }

.btn {
    min-height:50px;
    border:1px solid var(--ci-forest);
    border-radius:2px;
    background:var(--ci-forest);
    color:var(--ci-cream);
    font-size:12px;
    font-weight:700;
    box-shadow:none
}
.btn:hover { transform:translateY(-2px); background:var(--ci-orange); color:#fff; border-color:var(--ci-orange); box-shadow:0 10px 24px rgba(44,75,62,.16) }
.btn.light { border-color:var(--ci-cream); background:var(--ci-cream); color:var(--ci-forest); box-shadow:none }

.home-hero {
    background:
        radial-gradient(circle at 76% 28%,rgba(113,145,137,.3),transparent 28%),
        linear-gradient(138deg,#29493c 0%,#203d34 70%,#1d352e 100%);
    color:var(--ci-cream)
}
.home-hero::before { display:none }
.home-hero h1 {
    color:var(--ci-orange);
    font-family:'Stella','DM Serif Display',Georgia,serif;
    font-size:clamp(118px,15vw,220px);
    font-weight:400;
    line-height:.72;
    letter-spacing:-.045em;
    text-transform:none
}
.home-hero .eyebrow { color:#d6caa9 }
.home-hero .lead { color:rgba(255,253,245,.84); font-size:19px; line-height:1.72 }
.home-hero .hero-art::before { border:1px solid rgba(238,231,207,.36); transform:rotate(2deg) }
.home-hero .hero-art .main {
    filter:saturate(.78) contrast(1.02);
    box-shadow:0 28px 65px rgba(0,0,0,.25)
}
.home-hero .hero-art .float {
    border-color:#f3eddd;
    filter:saturate(.88);
    box-shadow:0 18px 44px rgba(0,0,0,.22)
}
.home-hero .hero-art .hero-photo-third {
    border-color:#f3eddd;
    filter:saturate(.78);
    box-shadow:0 16px 38px rgba(0,0,0,.2)
}
.hero-sticker { width:108px; height:108px; background:var(--ci-orange); color:#fffdf5; box-shadow:0 10px 30px rgba(0,0,0,.18) }
.hero-word { display:none }
.hero-stats {
    border:0;
    background:rgba(243,237,221,.96);
    color:var(--ci-forest);
    box-shadow:0 18px 45px rgba(0,0,0,.16)
}
.hero-stat + .hero-stat { border-color:rgba(44,75,62,.18) }
.hero-stat strong { color:var(--ci-forest); font-family:'DM Serif Display',serif; font-weight:400 }
.hero-stat span { color:var(--ci-slate); font-weight:600 }
.marquee { border-block:1px solid rgba(44,75,62,.18); background:#d9d2bc; color:var(--ci-forest); font-family:'DM Serif Display',serif; font-weight:400 }

.upcoming-events { background:#fffdf7 }
.events-header { grid-template-columns:.3fr 1fr }
.events-header .eyebrow { color:var(--ci-orange) }
.events-header .section-title { color:var(--ci-forest); font-size:clamp(68px,9vw,132px) }
.events-header .text-muted { color:var(--ci-slate); font-size:18px }
.upcoming-list { border:1px solid rgba(44,75,62,.28); box-shadow:0 20px 48px rgba(44,75,62,.09) }
.upcoming-row { min-height:175px; border-color:rgba(44,75,62,.2); background:#f3eddd }
.upcoming-row::before { filter:saturate(.65); opacity:.17 }
.upcoming-row:hover { color:#fffdf5; background:var(--ci-forest) }
.upcoming-row:hover::before { opacity:.26; mix-blend-mode:soft-light }
.upcoming-date { color:var(--ci-orange); font-size:16px }
.upcoming-info h3 { font-size:clamp(44px,5.5vw,76px) }

.first-visit-section { background:#d5dfd8 }
.first-visit-card {
    border:0;
    background:#f8f3e6;
    color:var(--ci-forest);
    box-shadow:0 25px 65px rgba(44,75,62,.14)
}
.first-visit-copy .section-title { color:var(--ci-forest) }
.first-visit-copy .section-title span { color:var(--ci-orange); font-style:italic }
.first-visit-lead,.visit-facts small { color:var(--ci-slate) }
.visit-facts,.visit-facts > div + div { border-color:rgba(44,75,62,.2) }
.visit-facts strong { color:var(--ci-forest); font-family:'DM Serif Display',serif; font-weight:400 }
.visit-note { background:var(--ci-orange); color:#fffdf5; transform:rotate(-1.5deg); box-shadow:0 12px 28px rgba(44,75,62,.15) }

.quote { color:var(--ci-forest); font-size:clamp(52px,7.5vw,104px) }
.cards { gap:22px; border:0 }
.card,.card:last-child {
    border:1px solid rgba(44,75,62,.22);
    background:#fffdf7;
    color:var(--ci-forest);
    box-shadow:0 15px 36px rgba(44,75,62,.08)
}
.card:nth-child(2) { background:#e7e1eb; color:var(--ci-forest) }
.card:nth-child(3) { background:#d8e2de; color:var(--ci-forest) }
.card img { filter:grayscale(1) contrast(1.03); border-bottom:0 }
.card:hover img { filter:grayscale(1) contrast(1.08) }
.card h3 { font-size:clamp(40px,3.8vw,62px) }
.card .meta { color:var(--ci-orange) }

.dark { background:var(--ci-forest); color:#fffdf5 }
.dark .text-muted { color:rgba(255,253,245,.72) }
.gallery-mosaic img,.gallery-mosaic img:nth-child(2n) {
    filter:saturate(.7);
    border:6px solid #f3eddd;
    box-shadow:0 16px 34px rgba(0,0,0,.18)
}
.social-section { background:#79928c }
.social-card { border:0; box-shadow:0 16px 38px rgba(44,75,62,.14) }
.social-instagram { background:#e98b5b }
.social-tiktok { background:#f3eddd }

.about-hero,.events-hero,.smallgroups-hero { background:#f3eddd }
.about-hero h1,.events-hero-copy h1,.smallgroups-hero-copy h1 { color:var(--ci-forest); font-size:clamp(76px,9vw,140px) }
.about-photo,.events-photo { border:6px solid #fffdf5; filter:grayscale(1) contrast(1.04); box-shadow:0 20px 48px rgba(39,39,36,.16) }
.experience-section,.groups-directory { background:#fffdf7 }
.experience-card { border:1px solid rgba(44,75,62,.22); box-shadow:0 15px 36px rgba(44,75,62,.09) }
.vision-section { background:#4f7180; color:#fffdf5 }
.location-section { background:#d5dfd8 }
.events-hero { background:linear-gradient(145deg,#f3eddd 0 64%,#ded8e5 64%) }
.events-next { border:0; background:#e98b5b; color:#fffdf5; box-shadow:0 16px 36px rgba(44,75,62,.16) }
.smallgroups-hero { background:linear-gradient(145deg,#f3eddd 0 64%,#d5dfd8 64%) }
.smallgroups-ring { border-color:rgba(44,75,62,.42) }
.smallgroups-center { background:var(--ci-orange); color:#fffdf5 }
.smallgroups-note { border:1px solid rgba(44,75,62,.25); background:#fffdf5; color:var(--ci-forest) }
.groups-guide { border:0; background:#4f7180; color:#fffdf5; box-shadow:0 15px 36px rgba(44,75,62,.12) }
.group-card { border:1px solid rgba(44,75,62,.24); background:#fffdf7; box-shadow:0 13px 32px rgba(44,75,62,.09) }
.group-image-placeholder { background:#ded8e5 }
.group-help-section { background:var(--ci-forest) }
.group-help-section::before { opacity:.35 }
.group-help-copy .section-title span { color:var(--ci-orange) }
.group-help-button { border-color:var(--ci-orange); background:var(--ci-orange); color:#fffdf5; box-shadow:none }
.group-help-steps span { color:var(--ci-orange) }

.gallery-hero { background:var(--ci-forest); color:#fffdf5 }
.gallery-hero h1 { color:var(--ci-orange) }
.gallery-filter-pane,.gallery-filter-toggle { border-color:rgba(44,75,62,.24); background:#f3eddd }
.gallery-album { border:1px solid rgba(44,75,62,.22); background:#fffdf7; box-shadow:0 13px 32px rgba(44,75,62,.09) }
.gallery-album img { filter:grayscale(1) contrast(1.04) }

.smallgroup-form-page { background:linear-gradient(135deg,#f3eddd 0 64%,#79928c 64%) }
.smallgroup-form-intro h1 { color:var(--ci-forest) }
.smallgroup-form-card { border:0; background:#fffdf7; box-shadow:0 24px 58px rgba(44,75,62,.18) }
.smallgroup-form-heading > span { background:var(--ci-orange); color:#fffdf5 }
.smallgroup-contact-form input { border:1px solid rgba(44,75,62,.36); background:#f7f2e6 }
.smallgroup-contact-form input:focus { border-color:var(--ci-orange); box-shadow:0 0 0 3px rgba(239,139,37,.16) }
.smallgroup-form-promises span { border:1px solid rgba(44,75,62,.22); background:#d8e2de }
.footer { border-top:0; background:#203d34; color:#fffdf5 }
.footer h2 { color:var(--ci-orange) }

@media(max-width:650px) {
    .nav { border-bottom-width:1px }
    .home-hero h1 { font-size:clamp(96px,29vw,142px) }
    .hero-stats { box-shadow:0 12px 30px rgba(0,0,0,.14) }
    .upcoming-list,.first-visit-card,.smallgroup-form-card { box-shadow:0 14px 34px rgba(44,75,62,.12) }
}

/* ================================================================
   HARMONIZED BRAND PALETTES — cream-led, calm and professional
   ================================================================ */
:root {
    --cream-50:#f5f4f1;
    --cream-100:#ecebe7;
    --cream-200:#e3e1dc;
    --cream-300:#d8d5cf;
    --green-950:#272724;
    --green-800:#34312e;
    --green-650:#56514c;
    --green-500:#df715f;
    --green-250:#c9c1b7;
    --green-100:#e7e1d9;
    --blue-850:#45413d;
    --blue-650:#716b63;
    --blue-300:#bdb5ac;
    --blue-100:#e5dfd7;
    --lavender-650:#77716a;
    --lavender-300:#c8c0b7;
    --lavender-100:#e9e3dc;
    --warm-650:#bd5b4c;
    --warm-400:#df715f;
    --warm-150:#f1c8bd;
    --bg:var(--cream-100);
    --paper:var(--cream-50);
    --ink:var(--green-950);
    --muted:var(--blue-650);
    --line:rgba(36,61,52,.2);
    --taupe:var(--lavender-650);
    --olive:var(--green-500);
    --sand:var(--cream-300);
    --dark:var(--green-800)
}

body { background:var(--cream-100); color:var(--green-950) }
.nav { background:rgba(236,235,231,.96); border-bottom-color:rgba(39,39,36,.16) }
.about-scrollspy { background:rgba(255,253,247,.96) }
.about-scrollspy a:hover,.about-scrollspy a[aria-current="location"] { background:var(--green-100); color:var(--green-950) }
.btn { border-color:var(--green-800); background:var(--green-800); color:var(--cream-50) }
.btn:hover { border-color:var(--green-650); background:var(--green-650); color:var(--cream-50) }
.btn.light { border-color:var(--cream-50); background:var(--cream-50); color:var(--green-800) }

.home-hero {
    background:
        radial-gradient(circle at 82% 22%,rgba(197,211,206,.52),transparent 30%),
        linear-gradient(135deg,var(--cream-100) 0 66%,var(--green-100) 66% 100%);
    color:var(--green-950)
}
.home-hero h1 {
    color:var(--community-coral);
    font-family:'Barlow Condensed','Arial Narrow',sans-serif;
    font-weight:800;
    letter-spacing:-.055em;
    line-height:.78;
    text-transform:uppercase
}
.home-hero .eyebrow { color:var(--warm-650) }
.home-hero .lead { color:var(--blue-650) }
.home-hero .hero-art::before { border-color:rgba(54,87,72,.25) }
.home-hero .hero-art .main { filter:grayscale(1) contrast(1.04); box-shadow:0 24px 56px rgba(39,39,36,.15) }
.home-hero .hero-art .float,.home-hero .hero-art .hero-photo-third {
    border-color:var(--cream-50);
    filter:grayscale(1) contrast(1.04);
    box-shadow:0 15px 34px rgba(39,39,36,.13)
}
.hero-sticker { background:var(--warm-400); color:var(--cream-50); box-shadow:0 9px 24px rgba(36,61,52,.13) }
.hero-scroll { color:var(--green-650) }
.hero-stats { background:rgba(255,253,247,.96); color:var(--green-950); box-shadow:0 14px 36px rgba(36,61,52,.1) }
.hero-stat strong { color:var(--green-800) }
.hero-stat span { color:var(--blue-650) }
.marquee { background:var(--cream-300); color:var(--green-650); border-color:rgba(36,61,52,.14) }

.upcoming-events,.experience-section,.groups-directory { background:var(--cream-50) }
.events-header .eyebrow,.card .meta { color:var(--warm-650) }
.events-header .section-title { color:var(--green-800) }
.upcoming-list { border-color:rgba(36,61,52,.2); box-shadow:0 16px 40px rgba(36,61,52,.07) }
.upcoming-row { background:var(--cream-100); border-color:rgba(36,61,52,.16) }
.upcoming-row:hover { background:var(--green-650); color:var(--cream-50) }
.upcoming-date { color:var(--warm-650) }

.first-visit-section { background:var(--green-100) }
.first-visit-card { background:var(--cream-50); color:var(--green-950); box-shadow:0 20px 48px rgba(36,61,52,.1) }
.first-visit-copy .section-title { color:var(--green-800) }
.first-visit-copy .section-title span { color:var(--warm-650) }
.visit-note { background:var(--warm-400); color:var(--cream-50) }
.quote { color:var(--green-800) }
.card,.card:last-child { background:var(--cream-50); border-color:rgba(36,61,52,.16); box-shadow:0 12px 30px rgba(36,61,52,.06) }
.card:nth-child(2) { background:var(--lavender-100) }
.card:nth-child(3) { background:var(--green-100) }

.dark { background:var(--cream-200); color:var(--green-950) }
.dark .text-muted { color:var(--blue-650) }
.dark .btn.light { border-color:var(--green-800); background:var(--green-800); color:var(--cream-50) }
.gallery-mosaic img,.gallery-mosaic img:nth-child(2n) { border-color:var(--cream-50); box-shadow:0 12px 28px rgba(36,61,52,.1) }
.social-section { background:var(--cream-100) }
.social-heading .section-title { color:var(--green-800) }
.social-heading .lead { color:var(--blue-650) }
.social-card { color:var(--green-950); box-shadow:0 12px 30px rgba(36,61,52,.07) }
.social-instagram { background:var(--warm-150) }
.social-tiktok { background:var(--blue-100) }

.about-hero,.events-hero,.smallgroups-hero { background:var(--cream-100) }
.about-hero h1,.events-hero-copy h1,.smallgroups-hero-copy h1 { color:var(--green-800) }
.about-photo,.events-photo { box-shadow:0 16px 38px rgba(36,61,52,.11) }
.vision-section { background:var(--blue-100); color:var(--green-950) }
.vision-section .text-muted,.vision-section .lead { color:var(--blue-650) }
.location-section { background:var(--green-100) }
.events-hero { background:linear-gradient(145deg,var(--cream-100) 0 66%,var(--lavender-100) 66%) }
.events-next { background:var(--warm-150); color:var(--green-950); box-shadow:0 12px 28px rgba(36,61,52,.1) }
.smallgroups-hero { background:linear-gradient(145deg,var(--cream-100) 0 66%,var(--green-100) 66%) }
.smallgroups-center { background:var(--green-500); color:var(--cream-50) }
.smallgroups-note { background:var(--cream-50) }
.groups-guide { background:var(--blue-650); color:var(--cream-50); box-shadow:0 12px 28px rgba(36,61,52,.08) }
.group-card { background:var(--cream-50); border-color:rgba(36,61,52,.18); box-shadow:0 10px 25px rgba(36,61,52,.06) }
.group-image-placeholder { background:var(--lavender-100) }
.group-help-section { background:var(--cream-200); color:var(--green-950) }
.group-help-section::before { color:transparent; -webkit-text-stroke-color:rgba(36,61,52,.07) }
.group-help-copy .eyebrow { color:var(--warm-650) }
.group-help-copy .section-title { color:var(--green-800) }
.group-help-copy .section-title span { color:var(--green-650) }
.group-help-copy > p:not(.eyebrow) { color:var(--blue-650) }
.group-help-button { border-color:var(--green-800); background:var(--green-800); color:var(--cream-50) }
.group-help-steps { border-color:rgba(36,61,52,.18) }
.group-help-steps > div { border-color:rgba(36,61,52,.18) }
.group-help-steps span { color:var(--warm-650) }
.group-help-steps strong { color:var(--green-950) }
.group-help-steps small { color:var(--blue-650) }

.gallery-hero { background:var(--cream-200); color:var(--green-950) }
.gallery-hero h1 { color:var(--green-800) }
.gallery-filter-pane,.gallery-filter-toggle { background:var(--cream-100) }
.gallery-album { background:var(--cream-50); box-shadow:0 10px 25px rgba(36,61,52,.06) }

.smallgroup-form-page { background:linear-gradient(135deg,var(--cream-100) 0 68%,var(--green-100) 68%) }
.smallgroup-form-intro h1 { color:var(--green-800) }
.smallgroup-form-card { background:var(--cream-50); box-shadow:0 18px 42px rgba(36,61,52,.11) }
.smallgroup-form-heading > span { background:var(--green-500); color:var(--cream-50) }
.smallgroup-contact-form input { background:var(--cream-100) }
.smallgroup-contact-form input:focus { border-color:var(--green-500); box-shadow:0 0 0 3px rgba(113,145,137,.15) }
.smallgroup-form-promises span { background:var(--green-100) }
.form-notice-success { border-color:var(--green-500); background:var(--green-100); color:var(--green-950) }
.footer { background:var(--green-800); color:var(--cream-100) }
.footer h2 { color:var(--cream-200) }

/* Secure Smallgroups enquiry form */
.smallgroup-form-page { min-height:calc(100vh - 69px); padding:clamp(70px,9vw,130px) 0; background:linear-gradient(135deg,var(--bg) 0 62%,rgba(216,200,179,.52) 62% 100%) }
.smallgroup-form-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:clamp(50px,8vw,120px); align-items:center }
.smallgroup-form-intro h1 { max-width:720px; margin:18px 0 34px; font-size:clamp(70px,8vw,126px); line-height:.78; letter-spacing:-.055em }
.smallgroup-form-intro .lead { max-width:620px }
.form-back-link { display:inline-flex; margin-top:34px; padding-bottom:5px; border-bottom:1px solid currentColor; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase }
.smallgroup-form-card { position:relative; padding:clamp(28px,4vw,56px); border:1px solid var(--line); background:rgba(251,250,247,.94); box-shadow:20px 24px 0 rgba(159,141,120,.2) }
.smallgroup-form-heading { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding-bottom:28px; border-bottom:1px solid var(--line) }
.smallgroup-form-heading > span { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:10px; font-weight:700 }
.smallgroup-form-heading .eyebrow { margin:0 0 8px }
.smallgroup-form-heading h2 { font-size:clamp(38px,4vw,58px); line-height:.92 }
.smallgroup-contact-form { display:grid; gap:22px; margin-top:30px }
.form-field-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.smallgroup-contact-form label { display:grid; gap:9px }
.smallgroup-contact-form label > span { font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase }
.smallgroup-contact-form input { width:100%; min-height:54px; padding:13px 15px; border:1px solid rgba(31,30,27,.34); border-radius:0; outline:0; background:#fff; color:var(--ink); font:inherit; transition:border-color .2s ease,box-shadow .2s ease }
.smallgroup-contact-form input:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(159,141,120,.24) }
.smallgroup-contact-form .btn { width:100%; border:0; cursor:pointer }
.form-privacy { margin:0; color:var(--muted); font-size:12px; line-height:1.6 }
.form-field-help { color:var(--muted); font-size:11px; line-height:1.5 }
.form-notice { margin-top:24px; padding:14px 16px; border:1px solid; font-size:14px; line-height:1.5 }
.form-notice-success { border-color:#687a35; background:#eef2df; color:#354015 }
.form-notice-error { border-color:#9a514c; background:#f8e8e6; color:#6a2925 }
.form-trap { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important }

@media(max-width:850px) {
    .smallgroup-form-page { padding:64px 0 90px }
    .smallgroup-form-layout { grid-template-columns:1fr; gap:42px }
    .smallgroup-form-intro h1 { font-size:clamp(64px,16vw,100px) }
}

@media(max-width:560px) {
    .smallgroup-form-page { padding:44px 0 70px }
    .smallgroup-form-layout { width:min(100% - 24px,1180px) }
    .smallgroup-form-card { padding:24px 18px; box-shadow:9px 11px 0 rgba(159,141,120,.2) }
    .smallgroup-form-heading { gap:14px }
    .smallgroup-form-heading h2 { font-size:38px }
    .form-field-row { grid-template-columns:1fr }
}

/* Homepage: make the dynamically selected next event the unmistakable headline. */
@media(min-width:1001px) {
    .upcoming-events .upcoming-list {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .upcoming-events .upcoming-row:not(.is-next) {
        min-height: 270px
    }
}

.upcoming-list .upcoming-row.is-next {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
    grid-template-rows: auto 1fr;
    align-items: end;
    min-height: clamp(400px, 38vw, 500px);
    padding: clamp(34px, 5vw, 72px);
    overflow: hidden;
    border: 0;
    background: #202019;
    color: var(--paper);
    box-shadow: 0 28px 65px rgba(31, 30, 27, .2);
    isolation: isolate
}

.upcoming-list .upcoming-row.is-next::before {
    content: '';
    position: absolute;
    inset: 0 0 0 46%;
    z-index: -2;
    background: var(--event-image) center / cover no-repeat;
    transform: scale(1.01);
    transition: transform .8s cubic-bezier(.2,.8,.2,1)
}

.upcoming-list .upcoming-row.is-next::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #202019 0 42%, rgba(32,32,25,.92) 50%, rgba(32,32,25,.08) 75%, rgba(32,32,25,.12) 100%);
    pointer-events: none
}

.upcoming-list .is-next .next-event-badge {
    top: clamp(26px, 4vw, 54px);
    right: clamp(26px, 4vw, 54px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border: 1px solid rgba(255, 255, 255, .32);
    background: rgba(24, 24, 19, .78);
    color: #fff;
    font-size: 9px;
    backdrop-filter: blur(8px)
}

.upcoming-list .is-next .next-event-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8c8b3
}

.upcoming-list .is-next .upcoming-date {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: start;
    max-width: 210px;
    padding: 0;
    border: 0;
    color: var(--sand);
    font-size: clamp(16px, 1.7vw, 23px);
    letter-spacing: .16em;
    line-height: 1.15
}

.upcoming-list .is-next .upcoming-date::before {
    content: 'SAVE THE DATE';
    display: block;
    margin-bottom: 13px;
    color: rgba(255, 255, 255, .56);
    font-size: 8px;
    letter-spacing: .26em
}

.upcoming-list .is-next .upcoming-info {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    max-width: 780px
}

.upcoming-list .is-next .upcoming-info h3 {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(58px, 6.8vw, 100px);
    line-height: .88;
    letter-spacing: -.055em;
    text-wrap: balance
}

.upcoming-list .is-next .upcoming-info p {
    max-width: 600px;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.55
}

.upcoming-list .upcoming-row.is-next:hover {
    border-color: transparent;
    background: #202019;
    box-shadow: 0 34px 80px rgba(31, 30, 27, .28);
    transform: translateY(-6px)
}

.upcoming-list .upcoming-row.is-next:hover::before { transform: scale(1.045) }

@media(max-width:700px) {
    .upcoming-list .upcoming-row.is-next {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 34px;
        min-height: 430px;
        padding: 84px 25px 30px;
        box-shadow: 0 22px 45px rgba(31, 30, 27, .2)
    }

    .upcoming-list .upcoming-row.is-next::before { inset: 0 }
    .upcoming-list .upcoming-row.is-next::after { background: linear-gradient(180deg,rgba(32,32,25,.18),rgba(32,32,25,.96) 68%) }

    .upcoming-list .is-next .next-event-badge {
        top: 24px;
        right: auto;
        left: 25px
    }

    .upcoming-list .is-next .upcoming-date {
        align-self: start;
        font-size: 17px
    }

    .upcoming-list .is-next .upcoming-info h3 {
        font-size: clamp(56px, 17vw, 82px)
    }

    .upcoming-list .is-next .upcoming-info {
        grid-column: 1
    }
}

@media(prefers-reduced-motion:reduce) { .upcoming-list .upcoming-row.is-next::before { transition:none } }

/* Smallgroups: real group photos and mobile-friendly crops */
.group-image-photo img { object-position:50% 50% }
.group-image-davids img { object-position:50% 54% }
.group-image-forwards img { object-position:50% 46% }
.group-image-roots img { object-position:50% 48% }
.group-image-gems img { object-position:50% 48% }
.group-image-kyrie img { object-position:50% 50% }
.group-image-impact img { object-position:50% 50% }

@media(max-width:650px) {
    .card.group-card.group-card-has-photo { grid-template-columns:1fr }
    .group-card-has-photo .group-image { height:235px; min-height:235px }
    .group-card-has-photo .group-card-copy { min-height:0 }
    .group-card-has-photo .group-image-davids { height:270px; min-height:270px }
}
/* About: what visitors can expect */
.experience-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 5%,rgba(184,159,218,.28),transparent 25%),
        linear-gradient(135deg,#ded3c5 0 48%,var(--bg) 48% 100%)
}

.experience-section::before {
    content: 'YOUR FRIDAY';
    position: absolute;
    right: -2vw;
    bottom: -3vw;
    color: transparent;
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(120px,19vw,330px);
    line-height: .68;
    letter-spacing: -.06em;
    pointer-events: none;
    -webkit-text-stroke: 1px rgba(31,30,27,.1)
}

.experience-header {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: clamp(32px,7vw,110px);
    align-items: end;
    margin-bottom: 44px;
    padding-bottom: 38px;
    border-bottom: 1px solid rgba(31,30,27,.28)
}

.experience-header .section-title { margin-bottom: 0 }
.experience-header .lead { max-width: 500px; margin: 0 0 8px }
.experience-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px }

.experience-card {
    position: relative;
    min-width: 0;
    padding: clamp(30px,4vw,58px);
    overflow: hidden;
    border: 1px solid rgba(31,30,27,.34);
    background: rgba(251,250,247,.94);
    scroll-margin-top: 100px
}

.experience-groups { background: #cbbbe2 }
.experience-number {
    position: absolute;
    right: 14px;
    bottom: -25px;
    color: transparent;
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(120px,15vw,230px);
    line-height: .7;
    pointer-events: none;
    -webkit-text-stroke: 1px rgba(31,30,27,.14)
}

.experience-kicker {
    margin: 0 0 42px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase
}

.experience-card h3 { margin: 0; font-size: clamp(54px,6vw,88px); line-height: .82 }
.experience-intro { max-width: 520px; margin: 25px 0 34px; color: var(--muted); font-size: 16px; line-height: 1.65 }
.experience-steps { border-top: 1px solid rgba(31,30,27,.3) }

.experience-step {
    display: grid;
    grid-template-columns: 66px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(31,30,27,.2)
}

.experience-step > span {
    padding-top: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.experience-step strong { display: block; margin-bottom: 7px; font-size: 13px; letter-spacing: .04em }
.experience-step p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65 }
.experience-invite { position: relative; z-index: 1; margin-top: 28px; padding: 24px; background: var(--olive); color: var(--paper) }
.experience-invite p { margin: 0 0 18px; font-size: 13px; line-height: 1.6 }
.experience-link { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }

.cards > .card { display: flex; flex-direction: column }
.card-action {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 12px 15px;
    background: var(--ink);
    color: var(--paper);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    transition: transform .25s ease,background .25s ease
}

.card-action:hover { background: var(--olive); transform: translateX(3px) }

@media(max-width:900px) {
    .experience-header { grid-template-columns: 1fr; gap: 20px }
    .experience-grid { grid-template-columns: 1fr }
    .experience-card { scroll-margin-top: 82px }
}

@media(max-width:600px) {
    .experience-section { padding: 70px 0; background: linear-gradient(155deg,#ded3c5 0 32%,var(--bg) 32% 100%) }
    .experience-header { margin-bottom: 18px; padding-bottom: 26px }
    .experience-header .section-title { font-size: clamp(54px,16vw,72px) }
    .experience-header .lead { font-size: 15px }
    .experience-grid { gap: 12px }
    .experience-card { padding: 27px 22px 30px }
    .experience-kicker { margin-bottom: 30px }
    .experience-card h3 { font-size: clamp(50px,15vw,68px) }
    .experience-intro { margin: 20px 0 27px; font-size: 14px }
    .experience-step { grid-template-columns: 52px 1fr; gap: 12px; padding: 18px 0 }
    .experience-step p { font-size: 12px }
    .experience-invite { margin-top: 22px; padding: 20px }
    .card-action { width: 100%; margin-top: 18px }
}
/* Homepage: practical first-visit guide */
.first-visit-section {
    position: relative;
    overflow: hidden;
    background: var(--bg)
}

.first-visit-section::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    top: -250px;
    right: 8vw;
    border: 1px solid rgba(31,30,27,.12);
    border-radius: 50%;
    pointer-events: none
}

.first-visit-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(31,30,27,.3);
    background: var(--ink);
    box-shadow: 18px 18px 0 #ded3c5
}

.first-visit-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px,4.5vw,68px);
    color: var(--paper)
}

.first-visit-copy .eyebrow { color: #d8c8b5 }
.first-visit-copy .section-title {
    margin-bottom:24px;
    color:var(--community-paper);
    font-family:'Barlow Condensed','Arial Narrow',sans-serif;
    font-size:clamp(62px,5.8vw,88px);
    font-weight:800;
    letter-spacing:-.045em;
    line-height:.8;
    text-transform:uppercase
}
.first-visit-copy .section-title span { color:var(--community-coral); font-family:inherit; font-style:normal }
.first-visit-lead { max-width: 620px; margin: 0; color: rgba(251,250,247,.72); font-size: 15px; line-height: 1.7 }

.visit-facts {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin: 34px 0;
    border-top: 1px solid rgba(251,250,247,.25);
    border-bottom: 1px solid rgba(251,250,247,.25)
}

.visit-facts > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    min-width: 0;
    padding: 20px 14px 20px 0
}

.visit-facts > div + div { padding-left: 14px; border-left: 1px solid rgba(251,250,247,.2) }
.visit-facts span { color:var(--community-coral); font-size:9px; font-weight:700; letter-spacing:.12em }
.visit-facts p { margin: 0 }
.visit-facts small { display:block; margin-bottom:6px; color:#c9c1b7; font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase }
.visit-facts strong { display:block; color:var(--community-paper); font-family:'DM Serif Display',Georgia,serif; font-size:clamp(20px,2vw,27px); font-weight:400; line-height:1.05 }

.visit-actions { display: flex; flex-wrap: wrap; gap: 21px; align-items: center }
.visit-actions .btn { box-shadow: 6px 6px 0 rgba(216,200,179,.35) }
.visit-route { padding-bottom: 5px; border-bottom: 1px solid rgba(251,250,247,.7); color: var(--paper); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase }

.first-visit-visual { position:relative; min-height:560px; overflow:hidden }
.first-visit-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(31,30,27,.32)) }
.first-visit-visual img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04) }
.visit-note {
    position: absolute;
    right: 28px;
    bottom: 30px;
    z-index: 1;
    width: min(290px,calc(100% - 56px));
    padding: 21px 24px;
    background: rgba(251,250,247,.94);
    color: var(--ink);
    transform: rotate(-2deg);
    box-shadow: 0 16px 35px rgba(31,30,27,.2)
}

.visit-note span { display: block; font-family: 'Cormorant Garamond',serif; font-size: 27px; line-height: 1 }
.visit-note small { display: block; margin-top: 10px; font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }

@media(max-width:900px) {
    .first-visit-card { grid-template-columns: 1fr; box-shadow: 10px 10px 0 #ded3c5 }
    .first-visit-visual { min-height: 430px }
}

@media(max-width:820px) {
    .first-visit-section { padding: 54px 0 }
    .container.first-visit-card { width: min(calc(100% - 32px),560px); margin: 0 auto; min-height: 0; border-color: rgba(31,30,27,.18); box-shadow: none }
    .first-visit-copy { padding: 34px 24px 38px }
    .first-visit-copy .section-title { max-width: 100%; font-size: clamp(42px,10.8vw,54px); line-height: .9; letter-spacing: -.035em }
    .first-visit-copy .section-title span { white-space: nowrap }
    .first-visit-lead { font-size: 14px }
    .visit-facts { grid-template-columns: 1fr; margin: 28px 0 }
    .visit-facts > div { padding: 16px 0 }
    .visit-facts > div + div { padding-left: 0; border-top: 1px solid rgba(251,250,247,.17); border-left: 0 }
    .visit-facts strong { font-size: 24px; overflow-wrap: anywhere }
    .visit-actions { align-items: stretch }
    .visit-actions .btn,.visit-route { width: 100%; justify-content: center; text-align: center }
    .visit-route { padding: 14px; border: 1px solid rgba(251,250,247,.35) }
    .first-visit-visual { min-height: 340px }
    .visit-note { right: 18px; bottom: 18px; width: calc(100% - 36px) }
}

@media(max-width:420px) {
    .container.first-visit-card { width: calc(100% - 24px) }
    .first-visit-copy { padding: 30px 20px 32px }
    .first-visit-copy .section-title { font-size: clamp(38px,11.5vw,46px) }
    .first-visit-lead { line-height: 1.6 }
    .visit-facts { margin: 24px 0 }
    .visit-facts > div { padding: 14px 0 }
    .visit-facts strong { font-size: 22px }
    .first-visit-visual { min-height: 300px }
}



/* Phone-first refinements */
@media(max-width:650px) {
    html { scroll-padding-top:64px }
    body { overflow-x:hidden }
    .container { width:min(100% - 32px,1180px) }
    .nav { min-height:60px; padding:10px 16px }
    .logo { font-size:27px }
    .menu-toggle { display:grid; width:44px; height:44px; place-items:center; padding:0; font-size:25px }
    .nav-links { right:12px; left:12px; max-height:calc(100svh - 76px); overflow-y:auto; padding:18px; border-radius:16px }
    .nav-links a { display:flex; min-height:44px; align-items:center; padding:6px 4px }
    .hero { min-height:auto }
    .section { padding:58px 0 }
    .section-title { font-size:clamp(45px,14vw,66px); line-height:.92 }
    .lead { font-size:16px; line-height:1.6 }
    .eyebrow,.meta { font-size:10px }
    .btn { min-height:48px; justify-content:center; padding:13px 17px; text-align:center }
    .marquee { padding:13px 0; font-size:26px }

    .home-hero .hero-grid { gap:34px; padding:38px 0 56px }
    .home-hero h1 { font-size:clamp(90px,30vw,128px) }
    .home-hero .lead { margin-top:25px }
    .home-hero .hero-art { min-height:390px }
    .hero-sticker { width:72px; height:72px }

    .about-hero .split { padding:46px 0 54px }
    .about-hero h1 { font-size:clamp(68px,20vw,96px) }
    .about-hero .split > .reveal:first-child { padding:18px 0 18px 16px }
    .about-hero-art { min-height:430px }
    .about-photo-main { height:325px }

    .events-hero-grid { gap:34px; padding:46px 0 54px }
    .events-hero-copy h1 { font-size:clamp(62px,18vw,88px) }
    .events-hero-copy .lead { font-size:16px }
    .events-hero-tags { gap:7px; margin-top:22px }
    .events-hero-tags span { padding:8px 10px }
    .events-hero-art { min-height:400px }
    .events-next { min-width:200px; max-width:230px; padding:22px }
    .events-next strong { font-size:38px }

    .smallgroups-hero-grid { gap:20px; padding:42px 0 56px }
    .smallgroups-hero-copy h1 { font-size:clamp(62px,18vw,88px) }
    .smallgroups-hero-copy .lead { margin:24px 0 20px }
    .smallgroups-visual { min-height:340px }
    .ring-a { width:260px; height:260px }
    .ring-b { width:190px; height:190px }
    .smallgroups-center { width:140px; height:140px; font-size:27px }

    .groups-directory { padding-top:54px }
    .groups-intro .section-title { font-size:clamp(50px,15vw,68px) }
    .groups-intro .lead { font-size:15px }
    .groups-guide { border-radius:0 }
    .groups-guide span,.groups-guide p { min-height:46px; padding:12px 15px }
    .groups-grid { gap:12px }
    .card.group-card { grid-template-columns:38% 62%; min-height:220px }
    .group-image { min-height:220px }
    .group-card-copy { min-height:220px; padding:17px }
    .card.group-card h3 { margin:9px 0 8px; font-size:32px }
    .group-card p { margin-bottom:16px; font-size:12px; line-height:1.55 }
    .group-card a { min-height:34px; display:flex; align-items:center; font-size:8px }
    .group-image > span { top:10px; right:10px; width:32px; height:32px }

    .editorial-grid > div { padding:30px 24px; border-right:0; border-bottom:1px solid var(--line) }
    .editorial-grid img { height:340px }
    .quote { font-size:clamp(40px,13vw,58px) }
    .social-heading { gap:20px; margin-bottom:34px }
    .social-card { min-height:330px; padding:26px }
    .social-card strong { font-size:clamp(45px,15vw,60px) }
    .footer h2 { font-size:clamp(42px,13vw,58px) }
}

@media(max-width:420px) {
    .card.group-card { grid-template-columns:36% 64% }
    .group-image { height:auto; min-height:225px }
    .group-card-copy { min-height:225px }
    .group-card .meta { font-size:8px; letter-spacing:.12em }
    .group-card p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3 }
}

@media(hover:none) and (pointer:coarse) {
    .group-card.reveal.visible:hover,.social-card:hover,.upcoming-row:hover,.card:hover { transform:none; box-shadow:none }
    .group-card:hover .group-image img { transform:none; filter:saturate(.82) }
    .group-card:hover a,.upcoming-row:hover a { transform:none }
}

.events-hero::before {
    content: 'EVENTS';
    position: absolute;
    left: -3vw;
    bottom: -4vw;
    z-index: -2;
    color: transparent;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(190px, 27vw, 470px);
    line-height: .68;
    letter-spacing: -.07em;
    white-space: nowrap;
    -webkit-text-stroke: 1px rgba(31, 30, 27, .09);
    pointer-events: none
}

.events-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .13;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(118deg, transparent 0 89px, rgba(31, 30, 27, .12) 90px),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    background-size: auto, 180px 180px;
    mask-image: linear-gradient(to bottom, transparent 5%, #000 34%, #000 82%, transparent 100%)
}

.events-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(40px, 7vw, 100px);
    align-items: center;
    padding: 90px 0 70px
}

.events-hero-copy {
    position: relative;
    z-index: 2
}

.events-hero-copy h1 {
    max-width: 800px;
    font-size: clamp(72px, 9vw, 132px)
}

.events-hero-copy .lead {
    max-width: 690px;
    font-size: 18px
}

.events-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px
}

.events-hero-tags span {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase
}

.events-hero-art {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    background: var(--sand);
    isolation: isolate
}

.events-hero-art::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(53, 50, 38, .22)
}

.events-ghost {
    position: absolute;
    top: 42%;
    left: 50%;
    color: rgba(251, 250, 247, .58);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(120px, 18vw, 250px);
    line-height: .7;
    letter-spacing: -.08em;
    transform: translate(-52%, -50%) rotate(-8deg)
}

.events-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(53, 50, 38, .25);
    border-radius: 50%;
    transform: translate(-50%, -50%)
}

.orbit-one { width: 360px; height: 360px }
.orbit-two { width: 475px; height: 475px }

.events-next {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    min-width: 245px;
    padding: 30px;
    background: var(--olive);
    box-shadow: 0 24px 50px rgba(31, 30, 27, .2);
    color: var(--paper);
    transform: translate(-50%, -45%) rotate(3deg);
    z-index: 2
}

.events-next small,
.events-next span {
    font-size: 8px;
    letter-spacing: .17em;
    text-transform: uppercase
}

.events-next strong {
    margin: 16px 0 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 44px;
    font-weight: 500;
    line-height: .82
}

.events-next ul {
    display: grid;
    gap: 7px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none
}

.events-next li {
    position: relative;
    padding-left: 14px;
    color: rgba(251, 250, 247, .78);
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: .05em
}

.events-next li::before {
    content: '+';
    position: absolute;
    left: 0;
    color: var(--sand)
}

.events-next a {
    justify-self: start;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(251, 250, 247, .6);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    transition: border-color .25s ease, transform .25s ease
}

.events-next a:hover {
    border-color: var(--paper);
    transform: translateX(4px)
}

#event-overview {
    scroll-margin-top: 70px
}

.events-side-note {
    position: absolute;
    right: 32px;
    bottom: 34px;
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .18em;
    writing-mode: vertical-rl;
    z-index: 2
}

/* About page hero: asymmetric editorial collage */
.about-hero {
    isolation: isolate;
    background:
        radial-gradient(circle at 75% 34%, rgba(200, 184, 223, .28), transparent 21%),
        radial-gradient(circle at 12% 82%, rgba(183, 212, 76, .12), transparent 19%),
        linear-gradient(112deg, transparent 0 55%, rgba(216, 200, 179, .2) 55% 76%, transparent 76%),
        var(--bg)
}

.about-hero::before {
    content: 'BELONG';
    position: absolute;
    left: -2vw;
    bottom: -5vw;
    z-index: -2;
    color: transparent;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(190px, 27vw, 460px);
    line-height: .68;
    letter-spacing: -.07em;
    white-space: nowrap;
    -webkit-text-stroke: 1px rgba(31, 30, 27, .1);
    pointer-events: none
}

.about-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .14;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(31, 30, 27, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 30, 27, .12) 1px, transparent 1px),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    background-size: 90px 90px, 90px 90px, 180px 180px;
    mask-image: linear-gradient(to bottom, transparent 8%, #000 38%, #000 75%, transparent 100%)
}

.about-hero .split {
    position: relative;
    z-index: 1
}

.about-hero .split > .reveal:first-child {
    padding: 42px 0 42px 34px;
    border-left: 1px solid rgba(31, 30, 27, .24)
}

.about-hero .eyebrow {
    display: flex;
    align-items: center;
    gap: 12px
}

.about-hero .eyebrow::before {
    content: '';
    width: 34px;
    height: 1px;
    background: currentColor
}

.about-hero-art {
    position: relative;
    min-height: 640px;
    isolation: isolate;
    transform: rotate(-1deg)
}

.about-hero-art::before {
    content: '';
    position: absolute;
    inset: 7% 3% 5% 10%;
    background: var(--sand);
    clip-path: polygon(8% 0, 100% 5%, 93% 100%, 0 91%);
    opacity: .58;
    z-index: -2
}

.about-photo {
    position: absolute;
    padding: 12px;
    background: var(--paper);
    box-shadow: 0 24px 55px rgba(31, 30, 27, .16)
}

.about-photo img {
    width: 100%;
    height: 100%;
    filter: saturate(.7) contrast(.96)
}

.about-photo-main {
    width: 68%;
    height: 500px;
    top: 20px;
    right: 2%;
    transform: rotate(3deg)
}

.about-photo-main span {
    position: absolute;
    right: 20px;
    bottom: -46px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-style: italic;
    color: var(--muted)
}

.about-photo-small {
    width: 42%;
    height: 260px;
    left: 0;
    bottom: 25px;
    z-index: 2;
    transform: rotate(-6deg)
}

.about-stamp {
    position: absolute;
    top: 5%;
    left: 0;
    display: grid;
    width: 112px;
    height: 205px;
    place-content: center;
    text-align: center;
    background: var(--olive);
    color: var(--paper);
    box-shadow: 0 14px 30px rgba(31, 30, 27, .14);
    transform: rotate(-3deg);
    z-index: 3
}

.about-stamp span {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    letter-spacing: .12em
}

.about-stamp small {
    margin: 7px 0;
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase
}

.thin-line {
    height: 1px;
    background: var(--line)
}

.marquee {
    overflow: hidden;
    display: flex;
    gap: 30px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px;
    color: var(--olive);
    white-space: nowrap
}

.marquee span {
    animation: marquee 22s linear infinite
}

@keyframes marquee {
    to {
        transform: translateX(-100%)
    }
}

.section {
    padding: 110px 0;
    border-bottom: 1px solid var(--line)
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.editorial-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 0;
    border: 1px solid var(--line);
    background: var(--paper)
}

.editorial-grid>div {
    padding: 60px;
    border-right: 1px solid var(--line)
}

.editorial-grid img {
    height: 520px;
    width: 100%
}

.vision-section {
    background: var(--paper)
}

.vision-intro {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    column-gap: clamp(50px, 9vw, 130px);
    row-gap: 28px;
    align-items: center;
    margin-bottom: 72px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.vision-intro .eyebrow {
    grid-column: 1 / -1;
    margin: 0
}

.vision-intro .section-title {
    max-width: 700px;
    font-size: clamp(58px, 6.4vw, 92px);
    line-height: .9
}

.vision-intro .lead {
    margin: 0;
    max-width: 470px;
    padding-left: 32px;
    border-left: 1px solid var(--taupe);
    font-size: 18px;
    line-height: 1.75
}

.vision-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.vision-card {
    position: relative;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 34px 28px 30px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    text-align: center;
    transition: transform .35s ease, background .35s ease
}

.vision-card:nth-child(even) {
    background: #e5dacb
}

.vision-card:hover {
    z-index: 1;
    transform: translateY(-10px);
    background: var(--paper);
    box-shadow: 0 22px 45px rgba(31, 30, 27, .12)
}

.vision-card-top {
    display: grid;
    place-items: center;
    width: 100%;
    margin: 2px 0 30px
}

.vision-number {
    position: absolute;
    top: 22px;
    left: 24px;
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--olive)
}

.vision-symbol {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 1px rgba(31, 30, 27, .16), 0 14px 30px rgba(31, 30, 27, .16)
}

.vision-symbol img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.vision-card h3 {
    margin: 0 0 22px;
    font-size: 34px;
    line-height: 1;
    color: var(--ink)
}

.vision-card p {
    margin: 0;
    max-width: 230px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    transition: color .35s ease
}

.vision-card:hover p {
    color: var(--muted)
}

.location-section {
    background: var(--dark);
    color: var(--paper)
}

.location-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 610px;
    overflow: hidden;
    border: 1px solid rgba(251, 250, 247, .18)
}

.location-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(38px, 6vw, 76px)
}

.location-copy .eyebrow,
.location-copy .lead {
    color: #cfc6b8
}

.location-copy .lead {
    max-width: 500px;
    font-size: 17px
}

.location-copy .btn {
    align-self: flex-start;
    margin-top: 34px;
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink)
}

.location-copy .btn:hover {
    background: transparent;
    color: var(--paper)
}

.location-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid rgba(251, 250, 247, .2)
}

.location-details>div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px
}

.location-details span {
    color: var(--sand);
    font-size: 9px;
    letter-spacing: .12em
}

.location-details p {
    margin: 0;
    color: #cfc6b8;
    font-size: 12px;
    line-height: 1.6
}

.location-details strong {
    display: block;
    margin-bottom: 3px;
    color: var(--paper);
    font-size: 13px;
    font-weight: 500
}

.location-map {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    border-left: 1px solid rgba(251, 250, 247, .18);
    background: var(--sand)
}

.location-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.75) sepia(.16) contrast(.92)
}

.map-card {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: grid;
    min-width: 205px;
    padding: 18px 22px;
    background: var(--paper);
    box-shadow: 0 18px 45px rgba(31, 30, 27, .18);
    color: var(--ink);
    pointer-events: none;
    z-index: 2
}

.map-card small,
.map-card span {
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase
}

.map-card strong {
    margin: 4px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    font-weight: 500
}

.quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(42px, 7vw, 94px);
    line-height: .95;
    text-align: center;
    max-width: 970px;
    margin: auto
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 18px;
    transition: .4s
}

.card:hover {
    transform: translateY(-8px)
}

.card img {
    height: 330px;
    width: 100%;
    margin-bottom: 22px;
    filter: saturate(.85)
}

.cards > .card > img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center
}

.cards > .card:nth-child(3) > img {
    object-position: center 38%
}

.card h3 {
    font-size: 38px;
    margin: 10px 0
}

.dark {
    background: var(--community-ink);
    color: var(--community-paper)
}

.dark .text-muted,
.dark .eyebrow,
.dark .meta {
    color: #c9c1b7
}

.dark .split {
    grid-template-columns: .9fr 1.1fr;
    gap: 64px
}

.dark .split .section-title {
    color: var(--community-coral);
    font-size: clamp(48px, 5vw, 72px)
}

.gallery-mosaic {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    height: 560px;
    gap: 14px
}

.gallery-mosaic img {
    width: 100%;
    height: 100%;
    filter: grayscale(1) contrast(1.05)
}

.gallery-mosaic img:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2
}

.gallery-mosaic img:nth-child(2) {
    grid-column: 2;
    grid-row: 1
}

.gallery-mosaic img:nth-child(3) {
    grid-column: 2;
    grid-row: 2
}

.gallery-mosaic img:nth-child(4) {
    grid-column: 1;
    grid-row: 3
}

.gallery-mosaic img:nth-child(5) {
    grid-column: 2;
    grid-row: 3
}

.social-section {
    background: var(--paper);
    overflow: hidden
}

.social-heading {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(40px, 8vw, 120px);
    align-items: end;
    margin-bottom: 60px
}

.social-heading .lead {
    margin: 0 0 8px;
    max-width: 500px;
    font-size: 17px
}

.social-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.social-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
    min-height: 320px;
    padding: clamp(30px, 4vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(31, 30, 27, .25);
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease
}

.social-card:hover {
    transform: translateY(-6px);
    border-color: currentColor;
    box-shadow: 0 22px 45px rgba(31, 30, 27, .14)
}

.social-instagram {
    background: linear-gradient(135deg, #e3d5c2 0%, var(--sand) 62%, #cdb7da 100%);
    color: var(--ink)
}

.social-tiktok {
    background: linear-gradient(135deg, var(--ink) 0%, #292724 68%, #394a39 100%);
    color: var(--paper)
}

.social-card::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    top: -125px;
    right: -65px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .2;
    transition: transform .6s ease
}

.social-card:hover::after {
    transform: scale(1.18)
}

.social-card::before {
    position: absolute;
    right: -8px;
    bottom: -22px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(76px, 8vw, 118px);
    line-height: .8;
    letter-spacing: -.06em;
    opacity: .065;
    pointer-events: none
}

.social-instagram::before { content: 'INSTA' }
.social-tiktok::before { content: 'TIKTOK' }

.social-index {
    position: absolute;
    top: 28px;
    left: 30px;
    font-size: 10px;
    letter-spacing: .18em;
    opacity: .65
}

.social-card svg {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    padding: 20px;
    border: 1px solid currentColor;
    border-radius: 50%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round
}

.social-card svg .social-icon-dot {
    fill: currentColor;
    stroke: none
}

.social-card div {
    position: relative;
    z-index: 1;
    display: grid
}

.social-card small {
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .7
}

.social-card strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(46px, 5vw, 68px);
    font-weight: 500;
    line-height: .9
}

.social-card div span {
    justify-self: start;
    margin-top: 22px;
    padding: 9px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .3s ease, color .3s ease
}

.social-instagram:hover div span {
    background: var(--ink);
    color: var(--paper)
}

.social-tiktok:hover div span {
    background: var(--paper);
    color: var(--ink)
}

.team {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px
}

.team-profile {
    position: relative;
    border: 1px solid var(--line);
    background: var(--paper);
    overflow: hidden
}

.team-profile:nth-child(2) {
    background: #e5dacb
}

.team-profile::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    bottom: -90px;
    border: 1px solid var(--taupe);
    border-radius: 50%;
    opacity: .35
}

.team-photo {
    width: 100%;
    height: 350px;
    object-position: center 22%;
    filter: saturate(.75) contrast(.96);
    transition: filter .5s ease, transform .7s ease
}

.team-profile:hover .team-photo {
    filter: saturate(.95) contrast(1);
    transform: scale(1.015)
}

.team-profile-heading {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 30px clamp(28px, 4vw, 46px) 26px;
    border-bottom: 1px solid var(--line)
}

.team-profile h3 {
    margin-top: 6px;
    font-size: clamp(36px, 4vw, 52px)
}

.team-profile .meta {
    margin: 0
}

.team-profile-copy {
    position: relative;
    z-index: 1;
    padding: 24px clamp(28px, 4vw, 46px) 40px
}

.team-profile-copy p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75
}

.team-profile-copy p:last-child {
    margin-bottom: 0
}

.event-row {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1.1fr .9fr;
    grid-template-areas: 'date image content';
    gap: clamp(28px, 4vw, 58px);
    align-items: center;
    margin-bottom: 34px;
    padding: clamp(28px, 4vw, 52px);
    border: 1px solid var(--line);
    background: var(--paper);
    overflow: hidden
}

.event-row:nth-child(even) {
    grid-template-columns: .9fr 1.1fr 120px;
    grid-template-areas: 'content image date';
    background: var(--sand)
}

.event-row::after {
    content: '01';
    position: absolute;
    top: -38px;
    right: 20px;
    color: var(--line);
    font-family: 'Cormorant Garamond', serif;
    font-size: 150px;
    line-height: 1;
    opacity: .3;
    pointer-events: none
}

.event-row:nth-child(even)::after {
    content: '02';
    right: auto;
    left: 20px;
    color: var(--taupe)
}

.event-date {
    grid-area: date;
    position: relative;
    z-index: 1;
    align-self: stretch;
    display: flex;
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--bg);
    text-align: center
}

.event-row:nth-child(even) .event-date {
    border-color: var(--olive);
    background: var(--olive);
    color: var(--paper)
}

.event-date strong {
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px;
    font-weight: 500
}

.event-date span {
    margin-top: 12px;
    font-size: 9px;
    line-height: 1.6;
    letter-spacing: .16em
}

.event-image {
    grid-area: image;
    position: relative;
    height: 430px;
    overflow: hidden
}

.event-image img {
    width: 100%;
    height: 100%;
    filter: saturate(.65) contrast(.96);
    transition: transform .7s ease, filter .7s ease
}

.event-row:hover .event-image img {
    transform: scale(1.045);
    filter: saturate(.9) contrast(1)
}

.event-image span {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 10px 13px;
    background: rgba(31, 30, 27, .82);
    color: var(--paper);
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    backdrop-filter: blur(8px)
}

.event-content {
    grid-area: content;
    position: relative;
    z-index: 1
}

.event-content .eyebrow {
    margin-bottom: 24px
}

.event-row h2 {
    font-size: clamp(54px, 6vw, 82px)
}

.event-content .text-muted {
    max-width: 430px;
    font-size: 15px
}

/* Smallgroups hero */
.smallgroups-hero {
    isolation: isolate;
    background:
        radial-gradient(circle at 76% 45%, rgba(200, 184, 223, .3), transparent 23%),
        radial-gradient(circle at 13% 82%, rgba(183, 212, 76, .13), transparent 18%),
        linear-gradient(120deg, var(--bg) 0 58%, #e3d8ca 58% 100%)
}

.smallgroups-hero::before {
    content: 'TOGETHER';
    position: absolute;
    left: -3vw;
    bottom: -4vw;
    z-index: -2;
    color: transparent;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(175px, 24vw, 420px);
    line-height: .68;
    letter-spacing: -.07em;
    white-space: nowrap;
    -webkit-text-stroke: 1px rgba(31, 30, 27, .09);
    pointer-events: none
}

.smallgroups-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .18;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")
}

.smallgroups-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
    padding: 70px 0
}

.smallgroups-hero-copy {
    position: relative;
    z-index: 2
}

.smallgroups-hero-copy .eyebrow {
    display: flex;
    align-items: center;
    gap: 12px
}

.smallgroups-hero-copy .eyebrow::before {
    content: '';
    width: 36px;
    height: 1px;
    background: currentColor
}

.smallgroups-hero-copy h1 {
    font-size: clamp(72px, 8.5vw, 132px)
}

.smallgroups-hero-copy .lead {
    margin: 32px 0 26px;
    max-width: 580px;
    font-size: 18px
}

.smallgroups-visual {
    position: relative;
    min-height: 560px
}

.smallgroups-ring {
    position: absolute;
    border: 1px solid rgba(31, 30, 27, .3);
    border-radius: 50%
}

.ring-a { width: 390px; height: 390px; top: 9%; left: 5% }
.ring-b { width: 290px; height: 290px; top: 24%; left: 28%; background:rgba(251, 250, 247, .32) }
.ring-c { width: 185px; height: 185px; top: 7%; right: 0; border-color:rgba(88, 87, 71, .45) }

.smallgroups-center {
    position: absolute;
    top: 50%;
    left: 48%;
    z-index: 2;
    display: grid;
    width: 190px;
    height: 190px;
    place-items: center;
    border-radius: 50%;
    background: var(--olive);
    color: var(--paper);
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px;
    font-style: italic;
    line-height: .86;
    text-align: center;
    transform: translate(-50%, -50%) rotate(-5deg);
    box-shadow: 0 22px 45px rgba(31, 30, 27, .18)
}

.smallgroups-note {
    position: absolute;
    z-index: 3;
    padding: 10px 14px;
    border: 1px solid rgba(31, 30, 27, .4);
    border-radius: 999px;
    background: var(--paper);
    font-size: 9px;
    letter-spacing: .13em;
    text-transform: uppercase
}

.note-one { top: 16%; left: 0; transform: rotate(-6deg) }
.note-two { top: 68%; right: 0; transform: rotate(5deg) }
.note-three { bottom: 8%; left: 18%; transform: rotate(-3deg); background:#b7d44c }

#groups { scroll-margin-top:70px }

.smallgroup-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--paper);
    border: 1px solid var(--line)
}

.smallgroup-card img {
    height: 390px;
    width: 100%
}

.smallgroup-card div {
    padding: 42px
}

.contact-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 34px;
    border: 1px solid var(--line);
    background: var(--paper)
}

.footer {
    padding: 80px 0;
    background: var(--ink);
    color: var(--paper)
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 40px
}

.footer h2 {
    font-size: 72px
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: 1s ease
}

.reveal.visible {
    opacity: 1;
    transform: none
}

@media(max-width:1050px) {
    .team {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:850px) {
    .nav {
        grid-template-columns: 1fr auto;
        padding: 14px 18px
    }

    .nav-links {
        display: none
    }

    .hero-grid,
    .split,
    .editorial-grid,
    .smallgroup-card,
    .footer-grid {
        grid-template-columns: 1fr
    }

    .events-hero-grid {
        grid-template-columns: 1fr;
        padding: 70px 0 50px
    }

    .events-hero {
        background:
            radial-gradient(circle at 78% 68%, rgba(200, 184, 223, .24), transparent 25%),
            linear-gradient(155deg, var(--paper) 0 57%, rgba(216, 200, 179, .44) 57% 100%)
    }

    .events-hero::before {
        left: -8vw;
        bottom: 1%;
        font-size: clamp(150px, 42vw, 300px)
    }

    .events-hero::after {
        opacity: .09
    }

    .events-hero-copy h1 {
        font-size: clamp(64px, 17vw, 100px)
    }

    .events-hero-art {
        min-height: 480px
    }

    .hero-art {
        min-height: 480px
    }

    .hero-art .main {
        height: 430px;
        width: 88%
    }

    .about-hero-art {
        min-height: 520px
    }

    .about-hero {
        background:
            radial-gradient(circle at 75% 55%, rgba(200, 184, 223, .24), transparent 27%),
            linear-gradient(155deg, var(--bg) 0 58%, rgba(216, 200, 179, .42) 58% 100%)
    }

    .about-hero::before {
        left: -8vw;
        bottom: 1%;
        font-size: clamp(150px, 42vw, 300px)
    }

    .about-hero::after {
        background-size: 64px 64px, 64px 64px, 180px 180px;
        opacity: .1
    }

    .about-hero .split > .reveal:first-child {
        padding: 24px 0 24px 20px
    }

    .about-hero-art::before {
        inset: 8% 1% 5% 7%
    }

    .about-photo-main {
        width: 72%;
        height: 390px;
        right: 1%
    }

    .about-photo-small {
        width: 46%;
        height: 190px;
        bottom: 20px
    }

    .about-stamp {
        top: 4%;
        left: 0;
        width: 86px;
        height: 160px
    }

    .about-stamp span {
        font-size: 24px
    }

    .vision-intro {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 42px
    }

    .vision-intro .eyebrow {
        grid-column: auto
    }

    .vision-intro .section-title {
        font-size: clamp(50px, 14vw, 76px)
    }

    .vision-intro .lead {
        margin-top: 10px;
        padding: 20px 0 0;
        border-top: 1px solid var(--taupe);
        border-left: 0
    }

    .vision-cards {
        grid-template-columns: repeat(2, 1fr)
    }

    .location-grid {
        grid-template-columns: 1fr
    }

    .location-map {
        min-height: 480px;
        border-top: 1px solid rgba(251, 250, 247, .18);
        border-left: 0
    }

    .location-details {
        grid-template-columns: 1fr
    }

    .social-heading,
    .social-links {
        grid-template-columns: 1fr
    }

    .social-card {
        min-height: 330px
    }

    .cards,
    .team {
        grid-template-columns: 1fr
    }

    .footer {
        padding: 44px 0
    }

    .footer-grid {
        gap: 28px
    }

    .footer h2 {
        max-width: 100%;
        font-size: clamp(46px, 13vw, 64px);
        line-height: .98;
        overflow-wrap: normal
    }

    .footer p {
        margin: 0;
        line-height: 1.7
    }

    .event-row,
    .event-row:nth-child(even) {
        grid-template-columns: 1fr;
        grid-template-areas: 'date' 'image' 'content';
        gap: 24px;
        padding: 24px
    }

    .event-date {
        min-height: 0;
        padding: 18px;
        flex-direction: row;
        gap: 14px
    }

    .event-date span {
        margin-top: 0
    }

    .event-image {
        height: 340px
    }

    .gallery-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: 125px;
        height: auto;
        gap: 10px
    }

    .dark .split {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .gallery-mosaic img:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
        min-width: 0
    }

    .gallery-mosaic img:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: span 2
    }

    h1 {
        font-size: 70px
    }

    .section {
        padding: 70px 0
    }
}

/* Mobile dropdown navigation */
.menu-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink);
    transition:transform .38s cubic-bezier(.2,.8,.2,1),background-color .3s ease,color .3s ease
}

.mobile-cta {
    display: none
}

/* Homepage upcoming events */
.upcoming-events {
    position: relative;
    overflow: hidden;
    background: #f6f3ee
}

.events-header {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .65fr);
    gap: 28px 72px;
    align-items: end;
    max-width: none;
    margin-bottom: 52px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(31, 30, 27, .3)
}

.events-header .eyebrow {
    grid-column: 1 / -1;
    margin: 0 0 -16px;
    color: var(--ink)
}

.events-header .section-title {
    grid-column: 1;
    max-width: 700px;
    color: var(--community-coral);
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: clamp(58px, 6.5vw, 104px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .82;
    text-transform: uppercase
}

.events-header .section-title span { display:block }
.events-header .section-title span:first-child { white-space:nowrap }

.events-header .text-muted {
    grid-column: 2;
    max-width: 370px;
    margin: 0 0 7px;
    padding-left: 24px;
    border-left: 1px solid rgba(31, 30, 27, .35)
}

.upcoming-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.upcoming-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    gap: 26px 18px;
    align-items: start;
    min-height: 250px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(31, 30, 27, .2);
    background: var(--paper);
    transition: transform .3s ease, border-color .3s ease, background .3s ease
}

.upcoming-row::after {
    content: none
}

.upcoming-row:nth-child(4n + 2),
.upcoming-row:nth-child(4n + 3) {
    background: var(--paper)
}

.upcoming-row[hidden] {
    display: none
}

.upcoming-row.is-next {
    border-color: var(--olive);
    box-shadow: inset 5px 0 0 var(--olive)
}

.next-event-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 3;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--olive);
    color: var(--paper);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

.legacy-event {
    display: none
}

.upcoming-row:hover {
    z-index: 1;
    transform: translateY(-4px);
    border-color: rgba(31, 30, 27, .55);
    background: #fff
}

.upcoming-date {
    position: relative;
    z-index: 1;
    justify-self: start;
    padding: 9px 12px;
    border: 1px solid rgba(31, 30, 27, .45);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink)
}

.upcoming-info {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    align-self: end
}

.upcoming-info h3 {
    font-family: 'Cormorant Garamond', serif;
    max-width: 440px;
    font-size: clamp(38px, 3.5vw, 52px);
    font-weight: 500;
    line-height: .9;
    margin: 0 0 12px
}

.upcoming-info p {
    color: var(--muted);
    margin: 0;
    font-size: 15px
}

.upcoming-empty {
    padding: 24px 0;
    color: var(--muted);
    border-bottom: 1px solid rgba(31, 31, 31, .18)
}

.events-toggle {
    display: block;
    margin: 36px auto 0;
    padding: 13px 22px;
    border: 1px solid rgba(31, 30, 27, .45);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease
}

.events-toggle:hover {
    transform: translateY(-2px);
    background: var(--ink);
    color: var(--paper)
}

.upcoming-row a {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    justify-self: start;
    color: var(--ink);
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: transform .3s ease
}

.upcoming-row:hover a {
    transform: translateX(8px)
}

@media(max-width:850px) {
    .nav {
        position: sticky;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center
    }

    .menu-toggle {
        display: grid;
        width:44px;
        height:44px;
        place-items:center;
        justify-self: end;
        border-radius:50%
    }

    .menu-toggle[aria-expanded="true"] {
        background:var(--ink);
        color:var(--paper);
        transform:rotate(90deg)
    }

    .nav-cta {
        display: none
    }

    .nav-links {
        display: flex;
        position: absolute;
        top: 100%;
        right: 18px;
        left: 18px;
        background: var(--paper);
        visibility:hidden;
        max-height:0;
        overflow:hidden;
        padding:0 22px;
        border:1px solid transparent;
        border-radius: 24px;
        flex-direction: column;
        gap:0;
        opacity:0;
        pointer-events:none;
        transform:translateY(-14px) scale(.975);
        transform-origin:top center;
        box-shadow:0 0 0 rgba(0,0,0,0);
        z-index:999;
        transition:max-height .48s cubic-bezier(.2,.8,.2,1),padding .38s ease,opacity .26s ease,transform .42s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .4s ease,visibility 0s linear .48s
    }

    .nav-links.active {
        visibility:visible;
        max-height:calc(100svh - 84px);
        overflow-y:auto;
        padding:18px 22px;
        border-color:rgba(31,31,31,.14);
        opacity:1;
        pointer-events:auto;
        transform:translateY(8px) scale(1);
        box-shadow:0 24px 60px rgba(0,0,0,.16);
        transition-delay:0s
    }

    .nav-links a {
        min-height:50px;
        padding:0 4px;
        border-bottom:1px solid rgba(31,30,27,.1);
        font-size:16px;
        opacity:0;
        transform:translateY(-9px);
        transition:opacity .28s ease,transform .38s cubic-bezier(.2,.8,.2,1),color .2s ease
    }

    .nav-links a:last-child { border-bottom:0 }
    .nav-links.active a { opacity:1; transform:translateY(0) }
    .nav-links.active a:nth-child(1) { transition-delay:.06s }
    .nav-links.active a:nth-child(2) { transition-delay:.1s }
    .nav-links.active a:nth-child(3) { transition-delay:.14s }
    .nav-links.active a:nth-child(4) { transition-delay:.18s }
    .nav-links.active a:nth-child(5) { transition-delay:.22s }

    .nav-links a:hover,
    .nav-links a:focus-visible {
        color:var(--olive)
    }

    .mobile-cta {
        display: inline-block;
        margin-top: 8px;
        padding: 14px 18px;
        border-radius: 999px;
        background: var(--ink);
        color: var(--paper) !important;
        text-align: center
    }

    .upcoming-row {
        grid-template-columns: 1fr;
        min-height: 260px;
        gap: 22px;
        padding: 24px
    }

    .upcoming-list {
        grid-template-columns: 1fr
    }

    .upcoming-row:hover {
        transform: translateY(-5px)
    }

    .events-header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 34px
    }

    .events-header .eyebrow {
        grid-column: auto;
        margin-bottom: 0
    }

    .events-header .text-muted {
        max-width: 540px;
        padding: 16px 0 0;
        border-top: 1px solid rgba(31, 30, 27, .35);
        border-left: 0
    }
}

@media(prefers-reduced-motion:reduce) {
    .menu-toggle,.nav-links,.nav-links a { transition:none !important }
}

@media(max-width:850px) {
    .home-hero { min-height:auto; background:linear-gradient(160deg,var(--bg) 0 53%,#ded3c5 53% 100%) }
    .home-hero .hero-grid { grid-template-columns:1fr; gap:42px; padding:64px 0 86px }
    .home-hero h1 { font-size:clamp(104px,30vw,170px) }
    .home-hero .lead { margin-top:32px }
    .home-hero .hero-art { min-height:560px }
    .home-hero .hero-art .main { width:79%; height:86% }
    .hero-photo-label { display:none }
    .home-hero .hero-art { overflow:hidden }
    .hero-sticker { right:2% }
    .hero-scroll { display:none }
}

@media(max-width:560px) {
    .home-hero .hero-grid { padding:46px 0 70px }
    .home-hero h1 { font-size:clamp(96px,31vw,142px) }
    .home-hero .lead { margin:30px 0 18px; font-size:16px }
    .home-hero .btn { width:100%; justify-content:center; padding-inline:15px; font-size:10px }
    .home-hero .hero-art { min-height:430px }
    .home-hero .hero-art .main { right:0; width:82%; height:84% }
    .home-hero .hero-art .float { width:68%; border-width:6px }
    .home-hero .hero-art .hero-photo-third { border-width:6px }
    .hero-sticker { right:0; width:82px; height:82px; font-size:8px }
    .hero-word { left:28%; bottom:0 }
}

@media(max-width:850px) {
    .smallgroups-hero { min-height:auto; background:linear-gradient(155deg,var(--bg) 0 54%,#e3d8ca 54% 100%) }
    .smallgroups-hero-grid { grid-template-columns:1fr; gap:24px; padding:64px 0 78px }
    .smallgroups-hero-copy h1 { font-size:clamp(66px,17vw,102px) }
    .smallgroups-visual { min-height:480px; width:min(500px,100%); margin:auto }
    .ring-a { width:340px; height:340px }
    .ring-b { width:250px; height:250px }
    .smallgroups-hero::before { left:-8vw; bottom:1%; font-size:clamp(140px,38vw,280px) }
}

@media(max-width:560px) {
    .smallgroups-hero-grid { padding:48px 0 64px }
    .smallgroups-hero-copy .lead { font-size:16px }
    .smallgroups-hero-copy .btn { width:100%; justify-content:center }
    .smallgroups-visual { min-height:370px }
    .ring-a { width:280px; height:280px; left:0 }
    .ring-b { width:210px; height:210px; left:25% }
    .ring-c { width:125px; height:125px }
    .smallgroups-center { width:150px; height:150px; font-size:29px }
    .smallgroups-note { padding:8px 10px; font-size:7px }
    .note-two { top:70% }
}

@media(prefers-reduced-motion:reduce) {
    .home-hero .hero-art { transition:none }
}

@media(max-width:560px) {
    .events-hero-art {
        min-height: 420px
    }

    .events-next {
        min-width: 210px;
        padding: 25px
    }

    .events-next strong {
        font-size: 46px
    }

    .vision-cards {
        grid-template-columns: 1fr
    }

    .vision-card {
        min-height: 400px
    }

    .vision-card-top {
        margin-bottom: 24px
    }

    .social-card {
        grid-template-columns: 1fr;
        align-content: end;
        min-height: 400px
    }

    .social-card svg {
        width: 76px;
        height: 76px
    }
}

@media(prefers-reduced-motion:reduce) {
    .group-card.reveal,
    .group-card.reveal.visible,
    .group-card .group-image img,
    .group-card::after,
    .group-card a {
        transition: none;
        transition-delay: 0s
    }
}

@media(max-width:650px) {
    .container { width:min(100% - 32px,1180px) }
    .nav { min-height:60px; padding:10px 16px }
    .section { padding:58px 0 }
    .section-title { font-size:clamp(45px,14vw,66px) }
    .lead { font-size:16px }
    .btn { min-height:48px; justify-content:center }
    .about-hero .split { padding:46px 0 54px }
    .about-hero h1 { font-size:clamp(68px,20vw,96px) }
    .about-hero-art { min-height:430px }
    .about-photo-main { height:325px }
    .smallgroups-hero-grid { grid-template-columns:1fr; gap:20px; padding:42px 0 56px }
    .smallgroups-hero-copy h1 { font-size:clamp(62px,18vw,88px) }
    .smallgroups-hero-copy .lead { margin:24px 0 20px; font-size:16px }
    .smallgroups-visual { min-height:340px }
    .ring-a { width:260px; height:260px }
    .ring-b { width:190px; height:190px }
    .smallgroups-center { width:140px; height:140px; font-size:27px }
    .groups-directory { padding-top:54px }
    .groups-intro { grid-template-columns:1fr; gap:18px; margin-bottom:28px }
    .groups-intro .section-title { font-size:clamp(50px,15vw,68px) }
    .groups-guide { grid-template-columns:1fr; margin-bottom:14px }
    .groups-guide span { grid-row:auto }
    .groups-guide p { min-height:46px; padding:12px 15px; border-left:0 }
    .groups-grid { grid-template-columns:1fr; gap:12px }
    .card.group-card { display:grid; grid-template-columns:38% 62%; min-height:220px }
    .group-image { height:100%; min-height:220px }
    .group-card-copy { min-height:220px; padding:17px }
    .card.group-card h3 { margin:9px 0 8px; font-size:32px }
    .group-card p { margin-bottom:16px; font-size:12px }
    .social-heading { gap:20px; margin-bottom:34px }
    .social-card { min-height:330px; padding:26px }
}

@media(max-width:420px) {
    .card.group-card { grid-template-columns:36% 64% }
    .group-image,.group-card-copy { min-height:225px }
}

@media(hover:none) and (pointer:coarse) {
    .group-card.reveal.visible:hover,.social-card:hover,.upcoming-row:hover,.card:hover { transform:none; box-shadow:none }
    .group-card:hover .group-image img { transform:none }
}