/* ============================================================
IPC Family Conference 2027
Design: "passing the light" — midnight indigo + warm lamp gold
Typography and colour come from the selected template preset (presets.json).
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h,72px)}
body{
margin:0;
font-family:var(--font-body);
color:#241F33;
background:var(--ivory);
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.08;font-family:var(--font-display);font-weight:var(--display-weight,700);text-transform:var(--display-transform,none);letter-spacing:var(--display-spacing,normal)}
p{margin:0}
.wrap{width:min(1180px,92vw);margin-inline:auto}
/* ---------- Type helpers ---------- */
.eyebrow{
font-family:var(--font-body);
font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--gold);margin:0 0 1rem;
}
.eyebrow--dark{color:var(--gold-ink)}
.h2{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.18;letter-spacing:var(--display-spacing,-.015em);color:#1B1733}
.h2--light{color:var(--ivory)}
.lead{font-size:1.12rem;color:#4A4560;max-width:60ch;margin-top:1.3rem;line-height:1.75}
/* Body copy anywhere: one measure, one rhythm. */
.prose{
margin-top:1.3rem;
display:flex;flex-direction:column;gap:1.05em;
max-width:62ch;font-size:1.08rem;line-height:1.75;color:#4A4560;
}
.prose p{margin:0}
.tone-dark .prose{color:rgba(247,243,234,.75)}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font-weight:600;font-size:.95rem;letter-spacing:.01em;
padding:.72rem 1.4rem;border-radius:var(--btn-radius,999px);border:1.5px solid transparent;
cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .2s,color .2s,border-color .2s;
white-space:nowrap;
}
.btn--lg{padding:.95rem 1.9rem;font-size:1.02rem}
.btn--gold{background:var(--gold);color:#1B1230;box-shadow:0 8px 26px -10px rgba(224,166,70,.8)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(224,166,70,.9)}
.btn--line{border-color:rgba(247,243,234,.5);color:var(--ivory)}
.btn--line:hover{border-color:var(--gold);color:var(--gold)}
.btn--ghost{color:var(--ivory);border-color:transparent}
.btn--ghost:hover{color:var(--gold)}
/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,backdrop-filter .3s,box-shadow .3s}
.nav__inner{display:flex;align-items:center;gap:1.5rem;padding:1.1rem 0}
.nav.is-stuck{background:rgba(21,18,43,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(247,243,234,.08)}
.brand{display:flex;align-items:baseline;gap:.45rem;margin-right:auto;color:var(--ivory)}
.brand__img{height:38px;width:auto;display:block}
.brand__mark{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:.02em;color:var(--ivory)}
.brand__mark--lg{font-size:2rem}
.brand__year{font-size:.85rem;font-weight:600;color:var(--gold);letter-spacing:.08em}
/* Brand text options — pick a font and a colour scheme in Site & event.
The per-field size/bold/italic controls stack on top of these. */
.brand--font-body .brand__mark{font-family:var(--font-body)}
.brand--font-display .brand__year{font-family:var(--font-body)}
.brand--gold_ivory .brand__mark{color:var(--gold)}
.brand--gold_ivory .brand__year{color:var(--ivory)}
.brand--all_gold .brand__mark,.brand--all_gold .brand__year{color:var(--gold)}
.brand--all_ivory .brand__mark,.brand--all_ivory .brand__year{color:var(--ivory)}
.brand--soft_gold .brand__year{color:var(--gold-soft)}
.nav__links{display:flex;align-items:center;gap:1.6rem}
.nav__links a{color:rgba(247,243,234,.82);font-size:.95rem;font-weight:500;position:relative;padding:.2rem 0}
/* Top-level entries come in two shapes: a bare (a page) and a .nav__drop
wrapper (a page with a submenu). Give both the same box so their text sits on
one line — an inline ignores vertical padding, which used to leave the
dropdown entries riding ~6px high. */
.nav__links > a,.nav__drop > a{display:inline-flex;align-items:center}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);transition:width .25s}
.nav__links a:hover{color:var(--ivory)}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex;align-items:center;gap:.6rem}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{width:26px;height:2px;background:var(--ivory);border-radius:2px;transition:.3s}
.nav__drawer{display:none;flex-direction:column;gap:.2rem;padding:0 4vw 1.4rem;background:rgba(21,18,43,.97);backdrop-filter:blur(14px)}
.nav__drawer a{color:rgba(247,243,234,.9);padding:.85rem 0;border-bottom:1px solid rgba(247,243,234,.08);font-weight:500}
.nav__drawer .btn{margin-top:.9rem}
/* ---------- Nav dropdowns (sections grouped under their page) ---------- */
.nav__drop{position:relative;display:flex;align-items:center}
.nav__caret{display:inline-block;width:0;height:0;margin-left:5px;flex:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.65;transition:transform .2s}
.nav__drop:hover .nav__caret,.nav__drop:focus-within .nav__caret{transform:rotate(180deg)}
.nav__drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:.7rem;display:none;z-index:60}
.nav__drop:hover .nav__drop-menu,.nav__drop:focus-within .nav__drop-menu{display:block}
.nav__drop-menu__inner{display:flex;flex-direction:column;min-width:190px;background:rgba(21,18,43,.97);backdrop-filter:blur(14px);border:1px solid rgba(247,243,234,.1);border-radius:12px;padding:.4rem;box-shadow:0 20px 40px rgba(10,8,25,.35)}
.nav__drop-menu a{padding:.6rem .8rem;border-radius:8px;font-size:.88rem;font-weight:500;white-space:nowrap;color:rgba(247,243,234,.82)}
.nav__drop-menu a::after{display:none}
.nav__drop-menu a:hover{background:rgba(247,243,234,.1);color:var(--ivory)}
.nav__drawer-group{display:flex;flex-direction:column}
.nav__drawer-group>a:first-child{font-weight:700}
.nav__drawer-child{padding-left:1.1rem !important;font-weight:400 !important;opacity:.82}
/* ---------- Hero ---------- */
.hero{
position:relative;background:var(--ink);color:var(--ivory);
padding:clamp(8rem,16vh,11rem) 0 clamp(3rem,7vh,5rem);
overflow:hidden;isolation:isolate;
}
.hero__glow{
position:absolute;z-index:-1;top:-18%;left:50%;transform:translateX(-50%);
width:min(1100px,120vw);height:760px;
background:radial-gradient(ellipse at center,rgba(224,166,70,.42),rgba(224,166,70,.10) 38%,transparent 64%);
filter:blur(8px);
}
.hero::before{ /* deep gradient floor */
content:"";position:absolute;inset:0;z-index:-2;
background:
radial-gradient(circle at 80% 12%,rgba(154,149,190,.16),transparent 40%),
linear-gradient(180deg,var(--ink),#100D24 90%);
}
.hero__lineage{ /* the "generation to generation" thread */
position:absolute;z-index:-1;left:50%;bottom:0;width:1px;height:120px;transform:translateX(-50%);
background:linear-gradient(var(--gold),transparent);
}
.hero__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero__title{
font-size:clamp(3rem,11vw,7rem);font-weight:600;letter-spacing:-.03em;margin:.4rem 0 0;
}
.hero__title span{display:block}
.hero__title em{font-style:italic;color:var(--gold);font-weight:500}
.hero__theme{margin:2rem 0 .4rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hero__theme-label{
font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;color:var(--mist);
position:relative;padding:0 1.3rem;
}
.hero__theme-label::before,.hero__theme-label::after{
content:"";position:absolute;top:50%;width:34px;height:1px;background:rgba(154,149,190,.5);
}
.hero__theme-label::before{right:100%}.hero__theme-label::after{left:100%}
.hero__theme-text{font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,3.2vw,2rem);color:var(--gold-soft)}
.hero__sub{max-width:46ch;color:rgba(247,243,234,.78);font-size:1.08rem;margin-top:.6rem}
.hero__actions{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
/* Countdown */
.countdown{display:flex;gap:clamp(.6rem,3vw,2.4rem);margin-top:3rem;flex-wrap:wrap;justify-content:center}
.countdown__unit{display:flex;flex-direction:column;align-items:center;min-width:64px}
.countdown__unit span{
font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);font-weight:600;color:var(--ivory);
line-height:1;font-variant-numeric:tabular-nums;
}
.countdown__unit label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin-top:.5rem}
.hero__attendees{margin-top:2.2rem;font-size:.9rem;color:var(--mist);letter-spacing:.02em}
/* ---------- Section scaffolding ---------- */
.section{padding:clamp(4.5rem,9vh,7.5rem) 0}
.section--ink{background:var(--ink);color:var(--ivory)}
.section--soft{background:#EFEADD}
.section__head{max-width:62ch;margin:0 auto clamp(2.5rem,5vw,3.8rem);text-align:center}
.section__head--left{text-align:left;margin-inline:0}
.section__head--left .section__intro{margin-inline:0}
.section__intro{color:rgba(247,243,234,.72);font-size:1.06rem;line-height:1.7;margin-top:1rem;max-width:58ch;margin-inline:auto}
.section__intro--dark{color:#55506C}
/* ---------- About ---------- */
.about{background:var(--ivory)}
.about__grid{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about__grid--single{grid-template-columns:minmax(0,1fr)}
.about__grid--single .prose{max-width:68ch}
.verse{
margin:0;padding:2.4rem;border-radius:20px;background:var(--ink);color:var(--ivory);
position:relative;overflow:hidden;
}
.verse::before{content:"\201C";position:absolute;top:-1.4rem;right:1rem;font-family:var(--font-display);font-size:9rem;color:rgba(224,166,70,.18);line-height:1}
.verse blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-size:1.55rem;line-height:1.35}
.verse figcaption{margin-top:1.2rem;color:var(--gold);font-weight:600;letter-spacing:.04em;font-size:.95rem}
/* ---------- Tracks ---------- */
.tracks__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem}
.track{
padding:2rem 1.7rem;border-radius:18px;background:var(--panel);
border:1px solid rgba(247,243,234,.07);transition:transform .3s,border-color .3s,background .3s;
}
.track:hover{transform:translateY(-5px);border-color:rgba(224,166,70,.45);background:#272151}
.track__icon{display:block;width:42px;height:42px;margin-bottom:1.1rem;background:var(--gold);border-radius:11px;
-webkit-mask:center/64% no-repeat;mask:center/64% no-repeat}
/* SVG-library variant: same gold box, glyph drawn inside (no mask). */
.track__icon--svg{-webkit-mask:none;mask:none;display:flex;align-items:center;justify-content:center}
.track__icon--svg .icon-svg{width:60%;height:60%;color:var(--ink);stroke-width:2}
.track h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--ivory)}
.track p{color:rgba(247,243,234,.66);font-size:.96rem}
/* icon masks (inline svg via mask) */
[data-icon="flame"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2c1 3-2 4-2 7a2 2 0 104 0c0-1 0-2 1-3 2 2 3 4 3 7a6 6 0 11-12 0c0-4 3-6 6-11z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2c1 3-2 4-2 7a2 2 0 104 0c0-1 0-2 1-3 2 2 3 4 3 7a6 6 0 11-12 0c0-4 3-6 6-11z'/%3E%3C/svg%3E")}
[data-icon="book"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h7v16H6a2 2 0 01-2-2zm9 0h7v14a2 2 0 01-2 2h-5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h7v16H6a2 2 0 01-2-2zm9 0h7v14a2 2 0 01-2 2h-5z'/%3E%3C/svg%3E")}
[data-icon="spark"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E")}
[data-icon="star"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.9 6.3L22 9.3l-5 4.6L18.3 21 12 17.3 5.7 21 7 13.9l-5-4.6 7.1-1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.9 6.3L22 9.3l-5 4.6L18.3 21 12 17.3 5.7 21 7 13.9l-5-4.6 7.1-1z'/%3E%3C/svg%3E")}
[data-icon="bloom"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a4 4 0 014 4 4 4 0 11-1 7 4 4 0 11-6 0 4 4 0 11-1-7 4 4 0 014-4zm0 6a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a4 4 0 014 4 4 4 0 11-1 7 4 4 0 11-6 0 4 4 0 11-1-7 4 4 0 014-4zm0 6a2 2 0 100 4 2 2 0 000-4z'/%3E%3C/svg%3E")}
[data-icon="pin"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 4a3 3 0 100 6 3 3 0 000-6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 4a3 3 0 100 6 3 3 0 000-6z'/%3E%3C/svg%3E")}
[data-icon="plane"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 16v-2l-8-5V3.5a1.5 1.5 0 00-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 16v-2l-8-5V3.5a1.5 1.5 0 00-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E")}
[data-icon="bus"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 3h14a2 2 0 012 2v11a2 2 0 01-2 2v2h-2v-2H7v2H5v-2a2 2 0 01-2-2V5a2 2 0 012-2zm0 4v5h14V7zm2.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm9 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 3h14a2 2 0 012 2v11a2 2 0 01-2 2v2h-2v-2H7v2H5v-2a2 2 0 01-2-2V5a2 2 0 012-2zm0 4v5h14V7zm2.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm9 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z'/%3E%3C/svg%3E")}
[data-icon="bed"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 7h2v6h16V9a3 3 0 00-3-3h-6v5H4V7zm0 8h20v4h-2v-2H4v2H2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 7h2v6h16V9a3 3 0 00-3-3h-6v5H4V7zm0 8h20v4h-2v-2H4v2H2z'/%3E%3C/svg%3E")}
[data-icon="car"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11l1.5-4.5A2 2 0 018.4 5h7.2a2 2 0 011.9 1.5L19 11h1a1 1 0 011 1v5h-2v2h-2v-2H7v2H5v-2H3v-5a1 1 0 011-1zm2.5 4a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm9 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11l1.5-4.5A2 2 0 018.4 5h7.2a2 2 0 011.9 1.5L19 11h1a1 1 0 011 1v5h-2v2h-2v-2H7v2H5v-2H3v-5a1 1 0 011-1zm2.5 4a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm9 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z'/%3E%3C/svg%3E")}
[data-icon="cup"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h13v3h2a3 3 0 010 6h-2.2A7 7 0 014 11zm13 5h2a1 1 0 000-2h-2zM3 20h16v2H3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h13v3h2a3 3 0 010 6h-2.2A7 7 0 014 11zm13 5h2a1 1 0 000-2h-2zM3 20h16v2H3z'/%3E%3C/svg%3E")}
/* ---------- Avatars ---------- */
.avatar{
display:flex;align-items:center;justify-content:center;width:100%;height:100%;
font-family:var(--font-display);font-weight:600;font-size:2.6rem;color:var(--gold);
background:linear-gradient(150deg,var(--panel),var(--ink));letter-spacing:.02em;
}
.avatar--lg{font-size:2rem}
/* ---------- Speakers ---------- */
.filters{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.6rem}
.filter{
background:transparent;border:1.5px solid #D8CFB8;color:#6A6480;
padding:.5rem 1.15rem;border-radius:999px;font-weight:600;font-size:.9rem;cursor:pointer;
transition:.2s;font-family:inherit;
}
.filter:hover{border-color:var(--gold);color:#1B1733}
.filter.is-active{background:#1B1733;border-color:#1B1733;color:var(--ivory)}
.speakers__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.6rem}
.speaker{transition:transform .3s,opacity .3s}
.speaker.is-hidden{display:none}
.speaker__photo{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;margin-bottom:1.1rem;background:var(--ink)}
.speaker__photo img{width:100%;height:100%;object-fit:cover}
.speaker__tag{
position:absolute;left:.8rem;bottom:.8rem;background:rgba(21,18,43,.78);backdrop-filter:blur(6px);
color:var(--gold-soft);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
padding:.3rem .7rem;border-radius:999px;
}
.speaker h3{font-size:1.25rem;color:#1B1733}
.speaker__role{color:var(--gold);font-weight:600;font-size:.85rem;letter-spacing:.04em;margin:.25rem 0 .6rem}
.speaker__bio{color:#55506C;font-size:.94rem}
/* ---------- Worship ---------- */
.worship__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;max-width:780px;margin-inline:auto}
.worship-card{display:flex;gap:1.2rem;align-items:center;padding:1.2rem;border-radius:18px;background:var(--panel);border:1px solid rgba(247,243,234,.07)}
.worship-card__photo{width:84px;height:84px;border-radius:14px;overflow:hidden;flex-shrink:0;background:var(--ink)}
.worship-card__photo img{width:100%;height:100%;object-fit:cover}
.worship-card h3{font-size:1.2rem;color:var(--ivory)}
.worship-card p{color:var(--mist);font-size:.9rem;margin-top:.2rem}
/* ---------- Schedule ---------- */
.schedule{background:var(--ivory)}
.schedule__days{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem}
.day{background:#fff;border:1px solid #E6DECB;border-radius:18px;padding:1.6rem;box-shadow:0 18px 40px -32px rgba(27,18,48,.5)}
.day__name{font-size:1.15rem;color:var(--gold);padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid #ECE4D2}
.day__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.slot{display:flex;gap:.9rem}
.slot__time{flex-shrink:0;width:74px;font-weight:700;color:#1B1733;font-size:.85rem;font-variant-numeric:tabular-nums;padding-top:.1rem}
.slot__body{display:flex;flex-direction:column}
.slot__body strong{color:#241F33;font-size:.98rem}
.slot__body small{color:#7C7693;font-size:.84rem}
/* ---------- Leadership ----------
Photos are square (the source images are 360x360) with lightly rounded
corners. The grid is centred, and the name box reserves two lines so every
role sits on the same baseline no matter how long the name is. */
.leaders__grid{
--cols:var(--cols-d,4);
display:grid;
grid-template-columns:repeat(var(--cols),minmax(0,1fr));
justify-content:center;
gap:2.4rem 1.6rem;
text-align:center;
}
/* The admin sets the desktop maximum; these steps are automatic. */
@media (max-width:1024px){.leaders__grid{--cols:var(--cols-l,4)}}
@media (max-width:820px){.leaders__grid{--cols:var(--cols-t,3)}}
@media (max-width:560px){.leaders__grid{--cols:var(--cols-m,2)}}
.leader{display:flex;flex-direction:column;align-items:center;width:100%}
.leader__photo{
width:100%;max-width:360px;aspect-ratio:1/1;
border-radius:10px;overflow:hidden;margin:0 auto 1.1rem;
background:var(--ink);border:1px solid #E0D7C2;
}
.leader__photo img{width:100%;height:100%;object-fit:cover;display:block}
.leader__photo .avatar{font-size:clamp(2.4rem,7vw,3.6rem)}
.leader h3{
font-size:1.08rem;color:#1B1733;line-height:1.25;
min-height:2.5em; /* room for a two-line name */
display:flex;align-items:center;justify-content:center;
}
.leader p{color:var(--gold-ink);font-weight:600;font-size:.86rem;margin-top:.15rem}
/* ---------- Visit ---------- */
.visit{background:var(--ivory)}
.visit__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.visit-card{padding:1.8rem;border-radius:18px;background:#fff;border:1px solid #E6DECB;transition:transform .3s,border-color .3s}
.visit-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.visit-card__icon{display:block;width:38px;height:38px;margin-bottom:1rem;background:var(--gold);border-radius:10px;
-webkit-mask:center/62% no-repeat;mask:center/62% no-repeat}
.visit-card h3{font-size:1.15rem;color:#1B1733;margin-bottom:.4rem}
.visit-card p{color:#55506C;font-size:.95rem}
/* ---------- Sponsors ---------- */
.sponsors__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.1rem}
.sponsor{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
min-height:130px;padding:1.5rem;background:#fff;border:1px solid #E6DECB;border-radius:16px;
transition:transform .3s,border-color .3s;
}
.sponsor:hover{transform:translateY(-4px);border-color:var(--gold)}
.sponsor img{max-height:54px;width:auto;object-fit:contain}
.sponsor__name{font-family:var(--font-display);font-size:1.2rem;color:#3A3550;text-align:center}
.sponsor__tier{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
/* ---------- FAQ ---------- */
.faq{background:#EFEADD}
.faq__wrap{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faq__list{display:flex;flex-direction:column;gap:.8rem}
.qa{background:#fff;border:1px solid #E2DAC6;border-radius:14px;overflow:hidden}
.qa summary{
list-style:none;cursor:pointer;padding:1.2rem 1.4rem;font-weight:600;color:#1B1733;font-size:1.02rem;
display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.qa summary::-webkit-details-marker{display:none}
.qa__icon{position:relative;width:18px;height:18px;flex-shrink:0}
.qa__icon::before,.qa__icon::after{content:"";position:absolute;background:var(--gold);border-radius:2px;transition:.3s}
.qa__icon::before{top:8px;left:0;width:18px;height:2px}
.qa__icon::after{top:0;left:8px;width:2px;height:18px}
.qa[open] .qa__icon::after{transform:rotate(90deg);opacity:0}
.qa__answer{padding:0 1.4rem 1.3rem;color:#55506C}
/* ---------- CTA band ---------- */
.cta-band{position:relative;background:var(--ink);color:var(--ivory);padding:clamp(4rem,8vh,6rem) 0;text-align:center;overflow:hidden;isolation:isolate}
.cta-band__glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 120%,rgba(224,166,70,.35),transparent 60%)}
.cta-band__inner{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.cta-band p{color:rgba(247,243,234,.78);max-width:46ch}
/* ---------- Footer ---------- */
.footer{background:#100D24;color:rgba(247,243,234,.7);padding:4rem 0 2rem}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem;padding-bottom:2.6rem;border-bottom:1px solid rgba(247,243,234,.1)}
.footer__brand p{margin-top:.5rem;font-size:.9rem}
.footer__col h4{font-family:var(--font-body);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.footer__col a,.footer__col span{display:block;color:rgba(247,243,234,.72);font-size:.94rem;margin-bottom:.55rem;transition:color .2s}
.footer__col a:hover{color:var(--gold)}
.footer__base{display:flex;justify-content:space-between;align-items:center;padding-top:1.6rem;font-size:.85rem;flex-wrap:wrap;gap:.8rem}
.footer__top:hover{color:var(--gold)}
/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
/* ---------- Responsive ---------- */
@media (max-width:900px){
.nav__links,.nav__cta{display:none}
.nav__toggle{display:flex}
.nav.is-open .nav__drawer{display:flex}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.about__grid,.faq__wrap{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.footer__grid{grid-template-columns:1fr}
.countdown{gap:.4rem}
.countdown__unit{min-width:58px}
}
/* ---------- Accessibility ---------- */
:where(a,button,summary,input,textarea,select):focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}
/* ============================================================
Tone system
Every section can take any background, so components adapt
to the tone the server computed for that section.
============================================================ */
.tone-dark{color:var(--ivory)}
.tone-light{color:#241F33}
.lead--light{color:rgba(247,243,234,.75)}
/* Dark-designed components sitting on a light background */
.tone-light .track{background:#fff;border-color:#E6DECB;box-shadow:0 18px 40px -32px rgba(27,18,48,.45)}
.tone-light .track:hover{background:#fff;border-color:var(--gold)}
.tone-light .track h3{color:#1B1733}
.tone-light .track p{color:#55506C}
.tone-light .worship-card{background:#fff;border-color:#E6DECB}
.tone-light .worship-card h3{color:#1B1733}
.tone-light .worship-card p{color:#55506C}
.tone-light .worship-card__photo,.tone-light .speaker__photo,.tone-light .leader__photo{background:var(--mist)}
/* Light-designed components sitting on a dark background */
.tone-dark .speaker h3,.tone-dark .leader h3{color:var(--ivory)}
.tone-dark .speaker__bio{color:rgba(247,243,234,.66)}
.tone-dark .leader p{color:var(--gold-soft)}
.tone-dark .leader__photo{border-color:rgba(247,243,234,.22)}
.tone-dark .day{background:var(--panel);border-color:rgba(247,243,234,.1);box-shadow:none}
.tone-dark .day__name{border-bottom-color:rgba(247,243,234,.14)}
.tone-dark .slot__time{color:var(--gold-soft)}
.tone-dark .slot__body strong{color:var(--ivory)}
.tone-dark .slot__body small{color:rgba(247,243,234,.6)}
.tone-dark .qa{background:var(--panel);border-color:rgba(247,243,234,.1)}
.tone-dark .qa summary{color:var(--ivory)}
.tone-dark .qa__answer{color:rgba(247,243,234,.72)}
.tone-dark .sponsor{background:var(--panel);border-color:rgba(247,243,234,.1)}
.tone-dark .sponsor__name{color:var(--ivory)}
.tone-dark .filter{color:var(--ivory);border-color:rgba(247,243,234,.3)}
.tone-dark .filter:hover{color:var(--gold);border-color:var(--gold)}
.tone-dark .filter.is-active{background:var(--gold);border-color:var(--gold);color:#1B1230}
.tone-dark .lead{color:rgba(247,243,234,.75)}
.tone-dark .verse blockquote{color:var(--ivory)}
/* A hero given a light background */
.hero.tone-light{color:#241F33}
.hero.tone-light .hero__title,.hero.tone-light .hero__sub{color:#1B1733}
.hero.tone-light .hero__glow{opacity:.25}
.hero.tone-light .btn--line{border-color:rgba(27,23,51,.35);color:#1B1733}
.cta-band.tone-light{color:#241F33}
.cta-band.tone-light .cta-band__glow{opacity:.2}
/* ---------- Text block ---------- */
.richtext__wrap{max-width:72ch}
.richtext__wrap--center{margin-inline:auto;text-align:center}
.richtext__wrap--center .richtext__body{margin-inline:auto}
.richtext__body{margin-top:1.3rem;display:flex;flex-direction:column;gap:1.05em;font-size:1.08rem;line-height:1.75;max-width:62ch}
.tone-light .richtext__body{color:#4A4560}
.tone-dark .richtext__body{color:rgba(247,243,234,.75)}
/* ---------- Facebook updates ---------- */
.fb-updates__wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.fb-updates__embed{margin-top:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;width:100%}
.fb-updates__embed iframe{border-radius:var(--card-radius,16px);box-shadow:0 18px 40px rgba(20,15,50,.12)}
.fb-updates__fallback{font-size:.85rem;opacity:.7}
/* ---------- Gallery ---------- */
.gallery__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.1rem}
.gallery__item{margin:0}
.gallery__item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--card-radius,16px)}
.gallery__item figcaption{margin-top:.6rem;font-size:.88rem;opacity:.75}
/* ---------- Contact section ---------- */
.contact__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.contact__row{display:flex;flex-direction:column;gap:.2rem;padding:1rem 0;border-bottom:1px solid rgba(128,120,150,.22)}
.contact__label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.contact__map iframe{width:100%;height:320px;border:0;border-radius:var(--card-radius,16px)}
@media (max-width:760px){.contact__grid{grid-template-columns:1fr}}
/* ---------- 404 ---------- */
.notfound{min-height:60vh;display:flex;align-items:center}
.is-hidden{display:none!important}
/* ---------- Button rows & inline links ---------- */
.btnrow{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.btnrow--center{justify-content:center}
.cta-band__inner .btnrow{margin-top:2rem}
.tone-light .btn--line{border-color:rgba(27,23,51,.35);color:#1B1733}
.tone-light .btn--line:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.tone-light .btn--ghost{color:#1B1733}
.tone-light .btn--ghost:hover{color:var(--gold-ink)}
.inline-link{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .2s}
.inline-link:hover{opacity:.75}
.tone-light .inline-link{color:var(--gold-ink)}
.buttons-sec .section__head{margin-bottom:1rem}
/* Accent text on light surfaces uses the darker accent, so it stays legible
whatever the template's accent colour is. */
.tone-light .day__name,
.tone-light .contact__label,
.tone-light .speaker__role,
.tone-light .sponsor__tier,
.tone-light .verse figcaption{color:var(--gold-ink)}
/* ---------- Venue ----------
Photo-led: a lead shot with a thumbnail strip, a fact list beside it,
and an optional map underneath. Everything collapses gracefully:
with no photos the fact list simply takes the full width. */
.venue__head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.venue__grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
.venue__grid--nomedia{grid-template-columns:minmax(0,1fr)}
.venue__media{display:flex;flex-direction:column;gap:.85rem}
.venue__thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.85rem}
.venue__shot{margin:0;position:relative;border-radius:var(--card-radius,16px);overflow:hidden;background:var(--mist)}
.venue__shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .5s ease}
.venue__shot--lead img{aspect-ratio:16/9}
.venue__shot:hover img{transform:scale(1.04)}
.venue__shot figcaption{
position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .7rem;
font-size:.78rem;font-weight:600;letter-spacing:.04em;color:#fff;
background:linear-gradient(to top,rgba(10,8,20,.72),transparent);
}
.venue__facts{margin:0;display:flex;flex-direction:column}
.venue__fact{padding:.95rem 0;border-bottom:1px solid rgba(128,120,150,.22)}
.venue__fact:first-child{padding-top:0}
.venue__fact dt{
font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold);margin-bottom:.3rem;
}
.tone-light .venue__fact dt{color:var(--gold-ink)}
.venue__fact dd{margin:0;font-size:.98rem;line-height:1.6}
.tone-light .venue__fact dd{color:#4A4560}
.tone-dark .venue__fact dd{color:rgba(247,243,234,.8)}
.tone-dark .venue__fact{border-bottom-color:rgba(247,243,234,.16)}
.venue__side .btnrow{margin-top:1.6rem}
.venue__map{margin-top:clamp(1.6rem,3.5vw,2.6rem);border-radius:var(--card-radius,16px);overflow:hidden;line-height:0}
.venue__map iframe{width:100%;height:clamp(260px,38vh,400px);border:0}
@media (max-width:900px){
.venue__grid{grid-template-columns:minmax(0,1fr)}
}
/* ---------- Theme & verse band ----------
Sits directly under the hero and reads as a continuation of it.
Works on any background: the tone class flips the text colours. */
.theme-band{position:relative;overflow:hidden;isolation:isolate;padding:clamp(3rem,7vh,5rem) 0}
.theme-band__glow{
position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(60% 120% at 50% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%);
}
.tone-light .theme-band__glow{opacity:.5}
.theme-band__inner{text-align:center;max-width:60ch}
.theme-band__theme{
font-family:var(--font-display);
font-weight:var(--display-weight,700);
text-transform:var(--display-transform,none);
letter-spacing:var(--display-spacing,normal);
font-size:clamp(1.9rem,4.6vw,3.2rem);
line-height:1.15;
color:var(--gold);
margin:0;
}
.tone-light .theme-band__theme{color:var(--gold-ink)}
.theme-band__rule{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:1.5rem auto 1.4rem;max-width:220px}
.theme-band__rule span{flex:1;height:1px;background:currentColor;opacity:.28}
.theme-band__rule i{width:6px;height:6px;transform:rotate(45deg);background:var(--gold)}
.tone-light .theme-band__rule i{background:var(--gold-ink)}
.theme-band__verse{
margin:0;font-family:var(--font-display);font-style:italic;
font-size:clamp(1.05rem,2.1vw,1.4rem);line-height:1.6;
}
.tone-dark .theme-band__verse{color:var(--ivory)}
.tone-light .theme-band__verse{color:#241F33}
.theme-band__ref{
margin:1rem 0 0;font-size:.8rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.tone-light .theme-band__ref{color:var(--gold-ink)}
.theme-band__note{margin:1.3rem 0 0;font-size:.98rem;line-height:1.7;opacity:.78}
/* ---------- Background media (any section) ----------
Layers, back to front: media (-3) -> scrim (-2) -> fade (-2) -> content.
A section's own background colour still paints behind all of it as a fallback,
and the scrim's opacity comes from that section's darkness setting. */
.has-media{position:relative;overflow:hidden;isolation:isolate}
.hero.has-media::before{content:none} /* the hero's gradient floor would hide the media */
.sec-media{position:absolute;inset:0;z-index:-3;overflow:hidden;background:var(--ink)}
.sec-media__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sec-media__video{
position:absolute;top:50%;left:50%;z-index:1;
width:100vw;height:56.25vw; /* 16:9 */
min-height:100%;min-width:177.78vh; /* cover, never letterbox */
transform:translate(-50%,-50%);
border:0;pointer-events:none;
}
.sec-scrim{
position:absolute;inset:0;z-index:-2;
background:var(--ink);
opacity:calc(var(--scrim,55) / 100);
}
.tone-light .sec-scrim{background:var(--ivory)}
/* A fixed legibility fade on top of the media, independent of the slider, so text
never floats on a busy patch of photo even at 0% darkness. */
.sec-fade{
position:absolute;inset:0;z-index:-2;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 45%,rgba(0,0,0,.40));
}
.tone-light .sec-fade{background:linear-gradient(180deg,rgba(255,255,255,.32),transparent 45%,rgba(255,255,255,.46))}
.has-media .hero__glow,.has-media .theme-band__glow,.has-media .cta-band__glow{opacity:.4}
.tone-dark.has-media .h2,.has-media .hero__title,.has-media .hero__theme-text,
.has-media .theme-band__theme,.has-media .theme-band__verse{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.tone-light.has-media .h2,.tone-light.has-media .hero__title{text-shadow:0 2px 24px rgba(255,255,255,.45)}
/* Phones: drop the video (data + battery) and fall back to the image. */
@media (max-width:760px){
.sec-media__video{display:none}
}
@media (prefers-reduced-motion:reduce){
.sec-media__video{display:none}
}
/* ---------- Floating section scroller ----------
Fixed to the right edge on every public page. Jumps section to section
rather than to the very top/bottom, which is what people actually want on
a long page. Disables itself at the ends. */
.scrollnav{
position:fixed;z-index:40;
right:clamp(.7rem,1.6vw,1.4rem);
top:50%;transform:translateY(-50%);
display:flex;flex-direction:column;gap:.5rem;
}
.scrollnav__btn{
width:42px;height:42px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
cursor:pointer;padding:0;
border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
background:color-mix(in srgb, var(--ink) 72%, transparent);
color:var(--gold);
backdrop-filter:blur(10px);
box-shadow:0 6px 20px -8px rgba(0,0,0,.55);
transition:background .2s,color .2s,transform .2s,opacity .2s,border-color .2s;
}
.scrollnav__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.scrollnav__btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-2px)}
.scrollnav__btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.scrollnav__btn[disabled]{opacity:.3;pointer-events:none}
@media (max-width:560px){
.scrollnav{right:.6rem;gap:.4rem}
.scrollnav__btn{width:38px;height:38px}
.scrollnav__btn svg{width:17px;height:17px}
}
@media print{.scrollnav{display:none}}
/* ---------- Prayer line ----------
A recurring call (day, time, dial-in details) presented as a single centred
panel. Rows come from the section's detail list, so any label/value pair
works — meeting ID, passcode, phone number. */
.prayer__wrap{display:flex;flex-direction:column;align-items:center}
.prayer__panel{
width:100%;max-width:620px;
padding:clamp(1.6rem,3.5vw,2.4rem);
border-radius:var(--card-radius,16px);
border:1px solid rgba(128,120,150,.22);
background:color-mix(in srgb, var(--ivory) 60%, transparent);
}
.tone-dark .prayer__panel{
border-color:rgba(247,243,234,.16);
background:color-mix(in srgb, var(--panel) 55%, transparent);
}
.prayer__details{margin:0;display:flex;flex-direction:column}
.prayer__detail{padding:.95rem 0;border-bottom:1px solid rgba(128,120,150,.22)}
.prayer__detail:first-child{padding-top:0}
.prayer__detail:last-child{border-bottom:0;padding-bottom:0}
.prayer__detail dt{
font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold);margin-bottom:.3rem;
}
.tone-light .prayer__detail dt{color:var(--gold-ink)}
.prayer__detail dd{margin:0;font-size:1.05rem;line-height:1.6}
.tone-light .prayer__detail dd{color:#4A4560}
.tone-dark .prayer__detail dd{color:rgba(247,243,234,.86)}
.tone-dark .prayer__detail{border-bottom-color:rgba(247,243,234,.16)}
.prayer__panel .btnrow{margin-top:1.6rem}
.prayer__note{
margin:1.2rem 0 0;text-align:center;font-size:.9rem;line-height:1.6;
}
.tone-light .prayer__note{color:#4A4560}
.tone-dark .prayer__note{color:rgba(247,243,234,.7)}
/* ---------- Upcoming events ----------
A dated rail down the page. Photos are never rendered inline: each event
carries its gallery as data and opens the lightbox below on click. */
.events__rail{
list-style:none;margin:0;padding:0 0 0 clamp(1.1rem,2.5vw,1.6rem);
border-left:2px solid rgba(128,120,150,.3);
}
.tone-dark .events__rail{border-left-color:rgba(224,166,70,.35)}
.event{position:relative;padding:0 0 clamp(1.6rem,3vw,2.2rem)}
.event:last-child{padding-bottom:0}
.event__dot{
position:absolute;left:calc(clamp(1.1rem,2.5vw,1.6rem) * -1 - 6px);top:.45rem;
width:10px;height:10px;border-radius:50%;background:var(--gold);
box-shadow:0 0 0 4px var(--ivory);
}
.tone-dark .event__dot{box-shadow:0 0 0 4px var(--ink)}
.event__when{
margin:0;font-size:.72rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold);
}
.tone-light .event__when{color:var(--gold-ink)}
.event__title{margin:.25rem 0 0;font-size:clamp(1.05rem,2vw,1.25rem)}
.event__info{margin:.45rem 0 0;font-size:.98rem;line-height:1.65;max-width:62ch;white-space:pre-line}
.tone-light .event__info{color:#4A4560}
.tone-dark .event__info{color:rgba(247,243,234,.8)}
.event__photos{
display:inline-flex;align-items:center;gap:.45rem;margin-top:.8rem;
padding:.45rem .9rem;border-radius:999px;cursor:pointer;
font-family:inherit;font-size:.82rem;font-weight:600;
background:transparent;color:var(--gold-ink);
border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
transition:background .18s,color .18s,border-color .18s;
}
.tone-dark .event__photos{color:var(--gold)}
.event__photos:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.event__photos-icon{
width:14px;height:12px;border:1.5px solid currentColor;border-radius:2px;flex:none;
}
.events__empty{font-size:.98rem;opacity:.75}
/* ---------- Lightbox ----------
One overlay shared by every gallery on the page. */
.lightbox{
position:fixed;inset:0;z-index:200;display:none;
align-items:center;justify-content:center;padding:clamp(1rem,4vw,2.5rem);
background:rgba(8,6,18,.92);
}
.lightbox.is-open{display:flex}
.lightbox__img{
max-width:100%;max-height:78vh;border-radius:var(--card-radius,16px);
object-fit:contain;background:#0A0814;
}
.lightbox__cap{
margin:.9rem 0 0;text-align:center;color:rgba(247,243,234,.82);
font-size:.9rem;min-height:1.2em;
}
.lightbox__count{
margin:.3rem 0 0;text-align:center;color:rgba(247,243,234,.5);
font-size:.75rem;letter-spacing:.12em;
}
.lightbox__btn{
position:absolute;width:46px;height:46px;border-radius:50%;cursor:pointer;
display:flex;align-items:center;justify-content:center;padding:0;
background:rgba(21,18,43,.8);color:var(--gold);font-size:1.4rem;line-height:1;
border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
transition:background .18s,color .18s;
}
.lightbox__btn:hover{background:var(--gold);color:var(--ink)}
.lightbox__btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lightbox__close{top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem)}
.lightbox__prev{left:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
.lightbox__next{right:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
.lightbox__btn[hidden]{display:none}
@media (max-width:560px){
.lightbox__btn{width:40px;height:40px}
.lightbox__img{max-height:64vh}
}
/* ---------- Register "coming soon" popup ----------
Shown when the Register button is set to message mode (Site & event). */
.msg-popup{
position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
padding:1.5rem;background:rgba(8,6,18,.72);
}
.msg-popup[hidden]{display:none}
.msg-popup__card{
position:relative;max-width:420px;width:100%;text-align:center;
background:var(--ivory,#F7F3EA);color:var(--ink,#15122B);
border-radius:var(--card-radius,16px);padding:2.4rem 2rem 2rem;
box-shadow:0 24px 60px rgba(8,6,18,.4);
}
.msg-popup__msg{
font-family:var(--font-display);font-size:1.3rem;line-height:1.45;margin:0 0 1.6rem;
}
.msg-popup__close{
position:absolute;top:.7rem;right:.9rem;width:34px;height:34px;border:0;cursor:pointer;
background:none;color:var(--ink,#15122B);font-size:1.6rem;line-height:1;opacity:.5;
}
.msg-popup__close:hover{opacity:1}
.msg-popup__ok{min-width:120px}