/*
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.1
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
}

* {
    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) }
.home-hero .hero-art .float { z-index:2; left:0; bottom:0; width:43%; height:39%; 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:saturate(.72); 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:saturate(1) }
.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 }
}
/* 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: 1.03fr .97fr;
    min-height: 610px;
    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(38px,5vw,76px);
    color: var(--paper)
}

.first-visit-copy .eyebrow { color: #d8c8b5 }
.first-visit-copy .section-title { margin-bottom: 25px; color: var(--paper); font-size: clamp(58px,6vw,92px); line-height: .86 }
.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: #b8a0d8; font-size: 9px; font-weight: 700; letter-spacing: .12em }
.visit-facts p { margin: 0 }
.visit-facts small { display: block; margin-bottom: 6px; color: rgba(251,250,247,.55); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase }
.visit-facts strong { display: block; font-family: 'Cormorant Garamond',serif; font-size: clamp(20px,2vw,28px); font-weight: 500; line-height: 1 }

.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: 610px; 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: saturate(.72) contrast(1.05) }
.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(--dark);
    color: var(--paper)
}

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

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

.dark .split .section-title {
    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: saturate(.8)
}

.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: 1.35fr .65fr;
    gap: 40px;
    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 {
    max-width: 760px;
    font-size: clamp(54px, 6vw, 88px)
}

.events-header .text-muted {
    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% }
    .home-hero .hero-art .float { width:45%; height:38% }
    .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:48%; height:37%; 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 }
}