/* The Sarah Conference 2026 site, six directions on one system.
   Type follows the brand sheet: Montserrat Bold caps for titles, labels and dates; Montserrat Regular caps for headers above titles;
   Playfair Display for headings and longer text. Spacing scale: 4 8 16 24 32 48 64 96. Brand colourways only. */
:root{
  --ink:#354211; --forest:#3F4D1C; --forest-d:#2E3913; --sage:#B8D5C6; --mint:#87C4A8; --pmint:#A8DCC1;
  --bone:#ECEAE0; --cream:#F4F6E6; --blush:#E8C1C9; --ssage:#7DA893; --olive:#8D9F4A; --lime:#C3D96B; --moss:#6F9B67;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:Montserrat, "Helvetica Neue", Arial, sans-serif;
  --gut:max(20px, env(safe-area-inset-left,0px)); --gutr:max(20px, env(safe-area-inset-right,0px));
  --max:1180px; --pad:64px;
  /* Light sage */
  --bg:var(--sage); --fg:var(--ink); --alt:var(--cream); --altfg:var(--ink); --deep:var(--forest); --dfg:var(--cream);
  --acc:var(--lime); --afg:var(--ink); --pop:var(--blush); --arch:var(--mint);
  --banner:var(--forest); --bannerfg:var(--cream); --dot:var(--lime);
  --bglk-l:var(--ink); --bglk-y:var(--ssage); --bglk-b:var(--ink);
  color-scheme:light;
}
html[data-cw="forest"]{ --bg:var(--forest); --fg:var(--cream); --alt:var(--cream); --altfg:var(--ink); --deep:var(--forest-d); --dfg:var(--cream);
  --acc:var(--lime); --afg:var(--ink); --pop:var(--pmint); --arch:var(--olive); --banner:var(--forest-d); --bannerfg:var(--cream); --dot:var(--lime);
  --bglk-l:var(--cream); --bglk-y:var(--olive); --bglk-b:var(--pmint)}
html[data-cw="split"]{ --bg:var(--sage); --fg:var(--ink); --alt:var(--bone); --altfg:var(--ink); --deep:var(--ink); --dfg:var(--bone);
  --acc:var(--blush); --afg:var(--ink); --pop:var(--blush); --arch:var(--blush); --banner:var(--ink); --bannerfg:var(--bone); --dot:var(--blush)}
html[data-cw="bone"]{ --bg:var(--bone); --fg:var(--ink); --alt:var(--cream); --altfg:var(--ink); --deep:var(--ink); --dfg:var(--bone);
  --acc:var(--lime); --afg:var(--ink); --pop:var(--blush); --arch:var(--sage); --banner:var(--forest); --bannerfg:var(--cream); --dot:var(--lime)}
@media (min-width:760px){ :root{--gut:max(40px, env(safe-area-inset-left,0px)); --gutr:max(40px, env(safe-area-inset-right,0px)); --pad:96px} }
@media (min-width:1100px){ :root{--pad:120px} }

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font:400 18px/1.6 var(--serif); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{display:block; max-width:100%}
a{color:inherit; text-underline-offset:3px; text-decoration-thickness:1px}
p,h1,h2,h3,dl,dd,figure,ol{margin:0}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:calc(var(--max) + 80px); margin:0 auto; padding-left:var(--gut); padding-right:var(--gutr)}
.center{text-align:center}
.mt8{margin-top:8px} .mt16{margin-top:16px} .mt24{margin-top:24px} .mt32{margin-top:32px} .mt48{margin-top:48px}
.measure{max-width:46ch}

/* surfaces */
.t-bg{background:var(--bg); color:var(--fg); --lk-l:var(--bglk-l); --lk-y:var(--bglk-y); --lk-b:var(--bglk-b)}
.t-alt{background:var(--alt); color:var(--altfg); --lk-l:var(--ink); --lk-y:var(--ssage); --lk-b:var(--ink)}
.t-deep{background:var(--deep); color:var(--dfg); --lk-l:var(--cream); --lk-y:var(--olive); --lk-b:var(--pmint)}
.t-sage{background:var(--sage); color:var(--ink)} .t-blush{background:var(--blush); color:var(--ink)} .t-mint{background:var(--pmint); color:var(--ink)} .t-bone{background:var(--bone); color:var(--ink)}
.t-sage,.t-blush,.t-mint,.t-bone{--lk-l:var(--ink); --lk-y:var(--ssage); --lk-b:var(--ink)}
.sec{padding-block:var(--pad)}

/* type */
.label{font:700 11px/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase}
.eyebrow{font:400 12px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase}
h2{font:400 clamp(34px, 5.4vw, 56px)/1.08 var(--serif); letter-spacing:-.01em; text-wrap:balance}
h3{font:400 clamp(22px, 2.4vw, 26px)/1.2 var(--serif); text-wrap:balance}
.lead{font:400 clamp(26px, 3.6vw, 40px)/1.25 var(--serif); text-wrap:balance}
.fine{font:500 13px/1.5 var(--sans); opacity:.8}
.verse{font:italic 400 clamp(24px, 3.6vw, 36px)/1.35 var(--serif); max-width:26ch; margin-left:auto; margin-right:auto; text-wrap:balance}
.verse.sm{font-size:clamp(20px, 2.6vw, 26px)}
.bss{display:flex; justify-content:center; align-items:center; gap:16px; font:400 clamp(22px, 3vw, 30px)/1 var(--serif)}
.bss i{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5}

/* logo stack (brand sheet: presents, gap, title on one line, lockup straight under) */
.stack{display:flex; flex-direction:column}
.stack.center{align-items:center; text-align:center} .stack.left{align-items:flex-start}
.pres{display:inline-flex; align-items:center; gap:10px; font:400 clamp(9px, 2.5vw, 11px)/1 var(--sans); letter-spacing:.22em; text-transform:uppercase}
.pcc{display:block; flex:none; height:22px; aspect-ratio:600/337; background:currentColor; -webkit-mask:url(/assets/logo.webp) center/contain no-repeat; mask:url(/assets/logo.webp) center/contain no-repeat}
.name{margin-top:clamp(20px, 3vw, 32px); font:700 clamp(14px, 3.9vw, 22px)/1.1 var(--sans); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
.lock{position:relative; width:min(100%, 560px); aspect-ratio:1400/442; margin-top:6px}
.lk{position:absolute; inset:0; -webkit-mask:var(--m) center/100% 100% no-repeat; mask:var(--m) center/100% 100% no-repeat}
.lk-l{--m:url(/assets/living.webp); background:var(--lk-l)} .lk-y{--m:url(/assets/your.webp); background:var(--lk-y)} .lk-b{--m:url(/assets/best.webp); background:var(--lk-b)}
.theme-lock .lock{margin:0 auto; width:min(100%, 620px)}

/* buttons and links */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; border:0; border-radius:999px; background:var(--acc); color:var(--afg); font:700 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; text-decoration:none; cursor:pointer; white-space:nowrap}
.btn svg{width:18px; height:18px}
.btn.ghost{background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor}
.tlink{display:inline-flex; align-items:center; gap:10px; min-height:44px; font:700 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; text-decoration:none; border-bottom:1.5px solid currentColor}
.tlink svg{width:18px; height:18px}

/* banner: WORSHIP • TEACHING • FELLOWSHIP */
.banner{overflow:hidden; white-space:nowrap; background:var(--banner); color:var(--bannerfg); padding-block:14px}
.banner .run{display:inline-flex; align-items:center; gap:28px; font:700 12px/1 var(--sans); letter-spacing:.28em; text-transform:uppercase; animation:run 46s linear infinite}
.banner i{width:6px; height:6px; border-radius:50%; background:var(--dot)}
@keyframes run{to{transform:translateX(-50%)}}

/* two-column section layout */
.g2{display:grid; gap:32px}
@media (min-width:900px){ .g2{grid-template-columns:5fr 7fr; gap:64px; align-items:start} }

/* countdown */
.cd{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 24px}
.cd span{display:flex; flex-direction:column; gap:6px; font:700 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase}
.cd b{font:400 clamp(40px, 5vw, 56px)/.9 var(--serif); letter-spacing:0; font-variant-numeric:lining-nums tabular-nums}
.cd small{width:100%; font:700 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; opacity:.8}
.cd small:empty{display:none}
.cd.sm b{font-size:32px}

/* ticket stub */
.stub{display:flex; max-width:440px; background:var(--cream); color:var(--ink); border-radius:12px; text-decoration:none; overflow:hidden}
.stub-a{flex:1; min-width:0; padding:18px 20px; display:flex; flex-direction:column; gap:6px}
.stub-t{font:400 22px/1.15 var(--serif)}
.stub-d{font:500 12px/1.4 var(--sans)}
.stub-b{flex:0 0 120px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:16px 10px; background:var(--acc); color:var(--afg); border-left:2px dashed rgba(53,66,17,.45)}
.stub-p{font:400 34px/1 var(--serif)}
.stub-go{margin-top:6px}
.stub:hover .stub-go{text-decoration:underline}

/* speakers */
.spk-grid{display:grid; gap:48px}
@media (min-width:700px){ .spk-grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px} }
.spk-ph{position:relative; aspect-ratio:4/5; border-radius:999px 999px 0 0; overflow:hidden; display:flex; align-items:flex-end; justify-content:center}
.spk-ph .im{position:absolute; inset:6% 4% 0}
.role{margin-top:20px; color:inherit; opacity:.75}
.spk h3{margin-top:6px}
.spk-line{margin-top:8px; font-size:16px; line-height:1.5; opacity:.9}
.more{margin-top:16px; border-top:1px solid currentColor}
.more summary{list-style:none; cursor:pointer; min-height:48px; display:flex; align-items:center; justify-content:space-between; font:700 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+"; font:400 20px var(--sans)}
.more[open] summary::after{content:"–"}
.more p{font-size:16px; line-height:1.6; margin-bottom:14px}

/* the day */
.run-list{list-style:none; padding:0; margin:0; --tc:72px}
.run-list li{position:relative; display:grid; grid-template-columns:var(--tc) 1fr; gap:16px; padding:12px 0}
.run-list .t{font:400 28px/1.1 var(--serif); font-variant-numeric:lining-nums tabular-nums}
.run-list p{font:500 14px/1.5 var(--sans); margin-top:4px; opacity:.85}
.run-list li::before{content:""; position:absolute; left:18px; top:0; bottom:0; border-left:2px dotted currentColor; opacity:.55}
.run-list li:first-child::before{top:52px} .run-list li:last-child::before{bottom:auto; height:18px}
.run-list li.anchor .t{position:relative; z-index:1; background:inherit}
.run-list li.mid{padding-left:24px}
.run-list li.mid::after{content:""; position:absolute; left:13px; top:20px; width:12px; height:12px; border-radius:50%; background:currentColor}
.run-list li.mid .t{display:none}
.run-list li.mid{grid-template-columns:1fr}
.run-list li.mid > div{padding-left:calc(var(--tc) - 24px + 16px + 28px)}
.run-list li.mid h3{font-size:clamp(19px, 2vw, 22px)}
.run-list li.anchor h3{font-size:clamp(22px, 2.4vw, 26px)}
@media (min-width:760px){ .run-list{--tc:110px} .run-list .t{font-size:36px} .run-list li::before{left:26px} .run-list li.mid::after{left:21px} .run-list li:first-child::before{top:60px} }

/* question cards: flat, lockup at the base like the printed set */
.wrap-bleed{overflow:hidden}
.qc-row{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); padding:4px var(--gutr) 8px var(--gut); scrollbar-width:none}
.qc-row::-webkit-scrollbar{display:none}
.qc{flex:0 0 clamp(220px, 62vw, 260px); scroll-snap-align:start; aspect-ratio:5/7; border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:16px; color:var(--ink)}
.qc.t-deep{color:var(--dfg)}
.qc-q{flex:1; display:flex; align-items:center; font:400 22px/1.3 var(--serif)}
.qc-q.big{font-size:clamp(28px, 7vw, 36px); flex:none}
.qc .lock{width:72%; margin:0 auto}
@media (min-width:1100px){ .qc-row{justify-content:center; overflow:visible} .qc{flex-basis:180px} .qc-q{font-size:19px} }

/* forms */
.form{display:grid; gap:20px}
.form .label{display:flex; flex-direction:column; gap:8px}
.form input, .form textarea{width:100%; min-height:52px; border:1.5px solid currentColor; border-radius:10px; background:transparent; padding:12px 14px; font:500 16px var(--sans); color:inherit; letter-spacing:0; text-transform:none}
.form textarea{min-height:120px; resize:vertical; font:400 20px/1.4 var(--serif)}
.form input::placeholder{color:inherit; opacity:.55}
.two{display:grid; gap:20px} @media (min-width:600px){ .two{grid-template-columns:1fr 1fr} }
fieldset{border:0; padding:0; margin:0; min-width:0}
legend{padding:0; margin-bottom:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips{position:relative}
.chips input{position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none}
.chips label{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1.5px solid currentColor; border-radius:999px; font:600 14px var(--sans); cursor:pointer}
.chips input:checked + label{background:var(--acc); color:var(--afg); border-color:var(--acc)}
.chips input:focus-visible + label{outline:2px solid var(--acc); outline-offset:2px}
.form-end{display:grid; gap:12px; justify-items:start}
.thanks{font:400 24px/1.35 var(--serif)}

/* find us, faq, price */
.addr{font:400 24px/1.35 var(--serif)}
.facts{display:grid; grid-template-columns:84px 1fr; gap:14px 16px; margin-top:24px; font:500 15px/1.5 var(--sans)}
.facts dt{padding-top:3px; opacity:.75}
.facts dd{margin:0}
.faq details{border-top:1px solid currentColor}
.faq details:last-child{border-bottom:1px solid currentColor}
.faq summary{list-style:none; cursor:pointer; min-height:60px; display:flex; justify-content:space-between; align-items:center; gap:16px; font:400 20px/1.3 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:400 22px var(--sans); flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{font-size:17px; padding-bottom:20px; max-width:56ch}
.price{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; font:500 14px/1.4 var(--sans); letter-spacing:.06em}
.price b{font:400 64px/1 var(--serif); letter-spacing:0}
.bring{border-top:1px solid rgba(244,246,230,.3); padding-top:32px}
@media (min-width:900px){ .bring{border-top:0; border-left:1px solid rgba(244,246,230,.3); padding:0 0 0 48px} }
.g2-side{min-width:0}
.foot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-block:40px; border-top:1px solid currentColor; margin-top:0}
.dir > .foot{background:var(--bg)}

/* ============ POSTER ============ */
.p-hero{padding-top:40px; overflow:hidden}
.p-top{display:flex; flex-direction:column; align-items:center}
.p-hero .lock{width:min(88vw, 620px)}
.p-when{text-align:center}
.p-stage{position:relative; width:min(100%, 820px); margin:32px auto 0; padding-inline:var(--gut)}
.p-arch{position:absolute; left:12%; right:12%; top:12%; bottom:0; border-radius:999px 999px 0 0; background:var(--arch)}
.p-trio{position:relative; width:100%; aspect-ratio:1822/1000}
.p-names{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; padding-block:20px 28px; text-align:center}
.p-names b{display:block; font:400 clamp(14px, 2.2vw, 20px)/1.25 var(--serif)}
.p-names .label{display:block; margin-top:6px; font-size:9px; opacity:.75}
.p-band{padding-block:20px}
.p-band-in{display:grid; gap:16px}
.pb{display:flex; flex-direction:column; gap:4px; text-decoration:none}
.pb-v{font:400 19px/1.3 var(--serif)}
a.pb .pb-v{text-decoration:underline; text-underline-offset:4px}
.p-band .btn{width:100%}
@media (min-width:760px){ .p-band-in{grid-template-columns:repeat(3, minmax(0,1fr)) auto; align-items:center; gap:24px} .p-band .btn{width:auto} .p-names .label{font-size:10px} }

/* ============ EDITORIAL ============ */
.e-hero{padding-block:32px 0}
.e-grid{display:grid; gap:32px}
.e-text{padding-bottom:8px}
.e-list{display:grid; gap:0; border-top:1.5px solid currentColor}
.e-list > div{display:grid; grid-template-columns:96px 1fr; gap:4px 16px; padding:16px 0; border-bottom:1px solid currentColor}
.e-list dt{padding-top:5px}
.e-list dd{grid-column:2; font:400 20px/1.3 var(--serif)}
.e-list dd small{display:block; font:500 13px/1.4 var(--sans); opacity:.8}
.e-list dd + dd{margin-top:10px}
.e-cta{display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px}
.e-days{display:flex; align-items:baseline; gap:10px}
.e-days b{font:400 44px/1 var(--serif); font-variant-numeric:lining-nums}
.e-fig{margin:0 calc(-1 * var(--gutr)) 0 calc(-1 * var(--gut))}
.e-fig img{width:100%; height:auto; aspect-ratio:1600/893; object-fit:cover}
.e-fig figcaption{padding:12px var(--gutr) 24px var(--gut); font-size:9.5px; opacity:.75}
@media (min-width:900px){
  .e-hero{padding-top:56px}
  .e-grid{grid-template-columns:4fr 7fr; gap:56px; align-items:end}
  .e-text{padding-bottom:56px}
  .e-fig{margin:0 calc(-1 * var(--gutr)) 0 0; align-self:stretch; display:flex; flex-direction:column; justify-content:flex-end}
  .e-fig img{aspect-ratio:1600/893; height:auto; object-fit:cover}
  .e-fig figcaption{padding-left:0}
}

/* ============ CREAM ============ */
.c-hero{padding-top:32px}
.c-grid{display:grid; gap:24px}
.c-day{font-size:clamp(18px, 2.6vw, 26px); letter-spacing:.3em; color:inherit; opacity:.8}
.c-dm{font:400 clamp(42px, 6vw, 68px)/1 var(--serif); white-space:nowrap}
.c-verse{font:italic 400 19px/1.45 var(--serif); max-width:34ch}
.c-verse .label{display:block; margin-top:10px; font-style:normal}
.c-photo{position:relative; align-self:end}
.c-disc{position:absolute; left:6%; right:6%; top:10%; bottom:0; border-radius:999px 999px 0 0; background:var(--arch)}
.c-trio{position:relative; width:100%; aspect-ratio:1822/1000}
.c-time{display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:16px; padding:10px 18px; border-radius:999px; background:var(--pop); color:var(--ink)}
.c-time b{font:400 20px/1 var(--serif); white-space:nowrap}
.c-time .label{font-size:9.5px}
.c-speak{padding-block:24px 32px; border-top:1px solid currentColor}
.c-speak p:last-child{margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; font:400 20px/1.35 var(--serif)}
.c-speak i{width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.6}
.c-band{padding-block:40px}
.c-band-in{display:grid; gap:32px}
.c-venue{display:flex; flex-direction:column; gap:8px; text-decoration:none}
.c-v{font:400 clamp(28px, 3vw, 36px)/1.15 var(--serif); text-decoration:underline; text-underline-offset:6px}
.c-band .label{opacity:.85}
@media (max-width:899px){ .c-text{text-align:center} .c-text .stack{align-items:center} .c-verse{margin-inline:auto} .c-photo{order:-1} .c-speak{text-align:center} .c-speak p:last-child{flex-direction:column; gap:2px} .c-speak i{display:none} .c-band .cd{justify-content:flex-start} }
@media (min-width:900px){ .c-grid{grid-template-columns:1fr 1fr; gap:48px; align-items:end} .c-text{padding-bottom:40px} .c-time b{font-size:22px} .c-band-in{grid-template-columns:1fr auto 1.2fr; gap:56px; align-items:start} }

/* ============ TICKET ============ */
.tk-hero{padding-block:40px 56px}
.tk{display:grid; background:var(--cream); color:var(--ink); border-radius:16px; overflow:hidden; --lk-l:var(--ink); --lk-y:var(--ssage); --lk-b:var(--ink); max-width:1080px; margin:0 auto}
.tk-main{padding:28px 24px 24px}
.tk-rows{display:grid; gap:0; margin-top:28px; border-top:1.5px solid currentColor}
.tk-rows > div{display:grid; grid-template-columns:72px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid rgba(53,66,17,.25)}
.tk-rows dt{padding-top:5px}
.tk-rows dd{font:400 20px/1.3 var(--serif)}
.tk-rows dd small{display:block; font:500 13px/1.4 var(--sans); opacity:.8}
.tk-cut{position:relative; height:0; border-top:2px dashed rgba(53,66,17,.4); margin:0 20px}
.tk-cut::before,.tk-cut::after{content:""; position:absolute; top:-14px; width:28px; height:28px; border-radius:50%; background:var(--bg)}
.tk-cut::before{left:-34px} .tk-cut::after{right:-34px}
.tk-stub{display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px; text-align:center}
.tk-price{font:400 64px/1 var(--serif)}
.tk-cd{justify-content:center; text-align:center; max-width:1080px; margin-left:auto; margin-right:auto}
.tk-cd span{align-items:center}
.tk-cd small{text-align:center}
.tk-more{display:flex; flex-direction:column; justify-content:center}
@media (min-width:900px){
  .tk{grid-template-columns:1fr auto 280px}
  .tk-main{padding:48px 48px 40px}
  .tk-rows{grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1.5px solid currentColor}
  .tk-rows > div{grid-template-columns:1fr; gap:6px; border-bottom:0; padding:16px 16px 0 0}
  .tk-cut{height:auto; width:0; margin:20px 0; border-top:0; border-left:2px dashed rgba(53,66,17,.4)}
  .tk-cut::before{top:-34px; left:-15px} .tk-cut::after{top:auto; bottom:-34px; left:-15px; right:auto}
  .tk-stub{justify-content:center; padding:40px 32px}
}

/* ============ THE DAY ============ */
.d-hero{padding-block:40px 48px}
.d-grid{display:grid; gap:40px}
.d-big{font:400 clamp(72px, 16vw, 148px)/.95 var(--serif); letter-spacing:-.02em; font-variant-numeric:lining-nums; margin-top:8px}
.d-meta{margin-top:12px; font:500 15px/1.5 var(--sans)}
.d-live{display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; background:var(--acc); color:var(--afg)}
.d-live i{width:8px; height:8px; border-radius:50%; background:currentColor}
@media (min-width:900px){ .d-grid{grid-template-columns:1fr 1fr; align-items:end} .d-state{text-align:right} }
.spine{list-style:none; padding:0; position:relative}
.stop{position:relative; padding:0 0 64px 28px; border-left:1.5px solid currentColor}
.stop:last-child{padding-bottom:0; border-left-color:transparent}
.stop::before{content:""; position:absolute; left:-8px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 2px currentColor}
.stop.past::before{background:currentColor}
.stop.now::before{background:var(--acc); box-shadow:0 0 0 5px rgba(195,217,107,.3)}
.stop-t{display:flex; align-items:baseline; gap:12px; margin-bottom:8px}
.stop-n{font:400 32px/1 var(--serif); font-variant-numeric:lining-nums}
.stop-n:empty{display:none}
.stop-t .label{opacity:.8}
.stop.now .stop-t .label::after{content:" · happening now"; color:var(--acc)}
.stop-b{min-width:0}
.panel{background:var(--alt); color:var(--altfg); border-radius:16px; padding:24px; --lk-l:var(--ink); --lk-y:var(--ssage); --lk-b:var(--ink)}
.panel.deep{background:var(--deep); color:var(--dfg); --lk-l:var(--cream); --lk-y:var(--olive); --lk-b:var(--pmint)}
.panel .qc-row{padding-inline:0}
.d-spine-sec .spk-grid{gap:40px}
.d-spine-sec .qc-row{padding-left:0}
@media (min-width:900px){
  .spine{padding-left:200px}
  .stop{padding-left:48px; padding-bottom:96px}
  .stop-t{position:absolute; left:-200px; top:0; width:170px; flex-direction:column; align-items:flex-end; gap:8px; text-align:right}
  .stop-n{font-size:48px}
  .panel{padding:32px}
}

/* ============ THE DECK ============ */
.dk{padding-block:20px 32px; overflow:hidden}
.dk-top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.dk-top .pres{font-size:9.5px}
.dk-arrows{display:flex; gap:8px}
.dk-arrows button{width:44px; height:44px; border-radius:50%; border:1.5px solid currentColor; background:transparent; color:inherit; font:400 18px var(--sans); cursor:pointer}
.rail{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:20px var(--gutr) 20px var(--gut); scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.dk-card{flex:0 0 min(84vw, 400px); height:clamp(540px, 74vh, 660px); scroll-snap-align:center; perspective:1600px}
.dk-in{position:relative; height:100%; transition:transform .6s cubic-bezier(.2,.75,.2,1); transform-style:preserve-3d}
.dk-card.flipped .dk-in{transform:rotateY(180deg)}
.dk-face{position:absolute; inset:0; display:flex; flex-direction:column; border-radius:20px; padding:22px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden}
.dk-face.back{transform:rotateY(180deg)}
.dk-face.scroll{overflow-y:auto}
.dk-head{display:flex; justify-content:space-between; opacity:.75; font-size:10px}
.dk-body{flex:1; display:flex; flex-direction:column; justify-content:center; gap:16px; padding-block:16px; min-height:0}
.dk-face.scroll .dk-body{justify-content:flex-start}
.dk-body.scroll{overflow-y:auto; justify-content:flex-start; font-size:16px}
.dk-body h2{font-size:clamp(30px, 8vw, 38px)}
.dk-foot .lock{width:60%; margin:0 auto}
.dk-when{text-align:center; font:400 26px/1.2 var(--serif)}
.dk-when .label{display:block; margin-top:8px; font-size:10px}
.dk .cd{justify-content:center; text-align:center}
.dk .cd span{align-items:center}
.dk-face .stack .lock{width:100%}
.dk-face .btn{align-self:center}
.dk-ph{flex:1; min-height:0; border-radius:999px 999px 0 0; overflow:hidden; display:flex; align-items:flex-end; justify-content:center}
.dk-ph{position:relative} .dk-ph .im{position:absolute; inset:6% 4% 0}
.dk-name{margin-top:4px; font-size:26px}
.flip{align-self:flex-start; min-height:44px; padding:0 18px; border-radius:999px; border:1.5px solid currentColor; background:transparent; color:inherit; font:700 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; cursor:pointer}
.dots{display:flex; justify-content:center; flex-wrap:wrap; gap:6px; padding-inline:var(--gut)}
.dots button{width:8px; height:8px; padding:0; border:0; border-radius:4px; background:currentColor; opacity:.25; cursor:pointer}
.dots button[aria-current="true"]{opacity:1; width:22px}
.dk-hint{margin-top:12px; opacity:.7; font-size:10px}
@media (min-width:900px){ .rail{padding-inline:calc(50% - 200px)} }

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .banner .run{animation:none} .dk-in{transition:none} }

.im{background-repeat:no-repeat; background-position:50% 100%; background-size:contain}
.im-trio{background-image:url(/assets/trio.webp)} .im-jayne{background-image:url(/assets/jayne.webp)} .im-celia{background-image:url(/assets/celia.webp)} .im-sjokvist{background-image:url(/assets/sjokvist.webp)}

@media (max-width:699px){
  .spk{display:grid; grid-template-columns:116px minmax(0,1fr); column-gap:18px; align-items:start}
  .spk-ph{grid-row:1 / span 4; width:116px}
  .spk .role{margin-top:4px} .spk-line{font-size:15px}
  .spk .more{grid-column:1 / -1}
  .spk-grid{gap:36px}
}
.c-date{display:flex; flex-direction:column; align-items:flex-start}
@media (max-width:899px){ .c-date{align-items:center} }

.dk-face .name{font-size:clamp(12px, 3.6vw, 15px); letter-spacing:.12em}
.dk-face .pres{font-size:9px}

.c-time{width:fit-content; max-width:100%}

.c-date .c-time{display:inline-flex; align-self:flex-start; width:auto}
@media (max-width:899px){ .c-date .c-time{align-self:center} }
.c-date .c-time{flex-direction:column; flex-wrap:nowrap; gap:4px; border-radius:18px; padding:12px 22px}
@media (min-width:900px){ .c-date .c-time{align-items:flex-start} }

/* Editorial: message from Dr Jayne, card game */
.e-msg{display:grid; gap:32px; align-items:center}
.e-msg-ph{position:relative; width:min(220px, 60%); aspect-ratio:4/5; border-radius:999px 999px 0 0; overflow:hidden}
.e-msg-ph .im{position:absolute; inset:8% 4% 0}
@media (min-width:760px){ .e-msg{grid-template-columns:260px 1fr; gap:56px} .e-msg-ph{width:100%} }
.game{position:relative; width:min(300px, 80vw); margin:8px auto 0; aspect-ratio:5/7}
.game-stack span{position:absolute; inset:0; border-radius:16px; background:var(--cream); opacity:.35; transform:rotate(-6deg) translate(-10px, 6px)}
.game-stack span + span{opacity:.6; transform:rotate(4deg) translate(8px, 4px)}
.game .qc{position:absolute; inset:0; flex:none; width:auto; transition:transform .5s cubic-bezier(.2,.75,.2,1), opacity .25s}
.game .qc.dealing{transform:translateY(-14px) rotate(-2deg); opacity:0}
.game .qc-q{font-size:clamp(22px, 5.6vw, 26px)}
@media (prefers-reduced-motion:reduce){ .game .qc{transition:none} }

/* Connection cards (design B) */
.qc{position:relative}
.qc .label{display:none}
.qc-rd{font:400 30px/1 var(--serif)}
.qc-rd small{display:block; font:700 8px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; margin-bottom:4px}
.qc-q{padding:8px 4px 28px}
.qc-cc{position:absolute; right:18px; bottom:18px; font:700 8px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; opacity:.8}
.qc-back{background:var(--forest); color:var(--cream); --lk-l:var(--cream); --lk-y:var(--olive); --lk-b:var(--pmint); align-items:center; justify-content:center; gap:0}
.qb-frame{position:absolute; inset:12px; border:1.2px solid rgba(244,246,230,.45); border-radius:9px}
.qb-top,.qb-tap{position:absolute; left:0; right:0; text-align:center; font:700 8px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; opacity:.8}
.qb-top{top:32px} .qb-tap{bottom:32px}
.mark{display:inline-flex; flex-direction:column; align-items:stretch}
.mark .mk-n{font:700 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; text-align:center; margin-right:-.2em}
.mark .lock{width:100%; margin:8px 0 0}
.game-flip{all:unset; cursor:pointer; position:absolute; inset:0; perspective:1200px; border-radius:16px}
.game-flip:focus-visible{outline:2px solid var(--cream); outline-offset:4px}
.gf-in{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.game .qc{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.game .game-card{transform:rotateY(180deg)}
.game.open .gf-in{transform:rotateY(180deg)}
.game .qc.dealing{transform:rotateY(180deg) translateY(-14px); opacity:0}
@media (prefers-reduced-motion:reduce){ .gf-in{transition:none} }

/* ===== 28 Oct: new homepage and shared sections ===== */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* hero: lockup, date bubble, flip countdown, photo, speakers and booking */
.h-hero{padding-top:clamp(24px, 4vw, 48px)}
.h-top{display:flex; flex-direction:column; align-items:center; text-align:center}
.h-lock{margin:0; width:min(100%, 640px)}
.h-lock .lock{width:100%; margin:0}
.h-date{margin-top:clamp(20px, 3vw, 32px)}
.h-date span{display:inline-block; background:var(--forest); color:var(--blush); border-radius:999px; padding:13px clamp(20px, 5vw, 34px); font:700 clamp(14px, 4.1vw, 22px)/1.1 var(--sans); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
.h-where{margin-top:12px; font:400 clamp(11.5px, 3.3vw, 15px)/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase}
.h-where a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.h-cd{margin-top:clamp(28px, 4vw, 40px); display:flex; flex-direction:column; align-items:center; gap:14px}

.flip-cd{display:flex; align-items:flex-start; gap:clamp(6px, 1.6vw, 12px)}
.fl-u{display:flex; flex-direction:column; align-items:center; gap:8px}
.fl-ds{display:flex; gap:4px}
.fl-d{position:relative; display:flex; align-items:center; justify-content:center; width:clamp(40px, 11.5vw, 62px); aspect-ratio:5/7; border-radius:8px;
  background:linear-gradient(#4A5A22 0 50%, var(--forest) 50% 100%); color:var(--cream); font:700 clamp(30px, 8.6vw, 48px)/1 var(--sans); font-variant-numeric:tabular-nums;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 6px 14px -6px rgba(20,28,6,.55); transform-origin:50% 50%; backface-visibility:hidden}
.fl-d::after{content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--forest-d); box-shadow:0 1px 0 rgba(255,255,255,.08)}
.fl-d::before{content:""; position:absolute; top:50%; left:-3px; right:-3px; height:8px; margin-top:-4px; border-left:3px solid var(--ink); border-right:3px solid var(--ink); border-radius:2px}
.fl-d.flap{animation:flap .5s cubic-bezier(.4,0,.2,1)}
@keyframes flap{0%{transform:perspective(300px) rotateX(0)} 50%{transform:perspective(300px) rotateX(-90deg)} 100%{transform:perspective(300px) rotateX(0)}}
.fl-l{font:700 10px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase}
.fl-c{font:700 clamp(24px, 6vw, 36px)/1 var(--sans); padding-top:clamp(12px, 3.4vw, 20px); opacity:.6}

.h-photo{position:relative; width:min(100%, 860px); margin:clamp(28px, 4vw, 48px) auto 0; padding-inline:var(--gut)}
.h-disc{position:absolute; left:50%; bottom:0; width:58%; aspect-ratio:1; transform:translateX(-50%); border-radius:50% 50% 0 0; height:72%; aspect-ratio:auto; background:var(--sage)}
.h-trio{position:relative; width:100%; aspect-ratio:1500/823}
.h-stk{position:absolute; right:max(4px, calc(var(--gut) - 14px)); bottom:-4%; width:clamp(92px, 25vw, 150px); z-index:2}

.h-split{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; max-width:960px; margin:0 auto clamp(32px, 5vw, 56px);
  background:var(--cream); color:var(--ink); border-radius:0 0 24px 24px; padding:clamp(18px, 4vw, 32px)}
.hs-sp ul{list-style:none; margin:10px 0 12px; padding:0; display:grid; gap:10px}
.hs-sp li{display:flex; flex-direction:column; gap:2px}
.hs-sp li .label{font-size:9.5px; opacity:.75}
.hs-n{font:400 clamp(16px, 4.4vw, 22px)/1.2 var(--serif)}
.hs-k{font-size:10px}
.hs-sp .tlink{min-height:36px; font-size:10.5px}
.hs-book{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; width:clamp(124px, 34vw, 190px); aspect-ratio:1; border-radius:50%;
  background:var(--lime); color:var(--ink); text-decoration:none; box-shadow:0 0 0 6px var(--cream), 0 0 0 7.5px var(--ink); transition:transform .25s}
.hs-book:hover{transform:rotate(-4deg) scale(1.03)}
.hs-b-k{font:700 clamp(9.5px, 2.6vw, 12px)/1.25 var(--sans); letter-spacing:.16em; text-transform:uppercase; max-width:9em}
.hs-b-p{font:400 clamp(34px, 9.4vw, 52px)/1 var(--serif)}
.hs-b-u{font:700 9px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase}
@media (min-width:760px){ .h-split{grid-template-columns:minmax(0,1fr) auto; padding:32px 40px} .hs-sp ul{grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 24px} }

/* stickers (brand sheet: round forest with lime ring; round seal in light sage) */
.stk{position:relative; display:block; aspect-ratio:1; border-radius:50%; text-decoration:none; transition:transform .3s}
a.stk:hover{transform:rotate(-6deg) scale(1.04)}
.stk-ring{position:absolute; inset:0; width:100%; height:100%; animation:spin 26s linear infinite}
.stk-ring text{font:700 15px var(--sans); letter-spacing:3.2px; text-transform:uppercase; fill:currentColor}
@keyframes spin{to{transform:rotate(360deg)}}
.stk-in{position:absolute; inset:21%; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center}
.stk-sis{background:var(--sage); color:var(--ink); box-shadow:0 10px 24px -12px rgba(20,28,6,.6)}
.stk-sis .stk-in{border:1.5px solid var(--ink)}
.stk-sis .pcc{height:auto; width:44%}
.stk-sis .stk-k{font:700 clamp(8px, 2.2vw, 11px)/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; background:var(--blush); padding:4px 7px; border-radius:999px}
.stk-tix{width:clamp(210px, 58vw, 270px); margin:0 auto; background:var(--forest); color:var(--lime); box-shadow:0 0 0 2px var(--lime) inset, 0 18px 34px -18px rgba(0,0,0,.6)}
.stk-tix .stk-in{border:2px solid var(--lime); color:var(--cream); background:var(--forest-d)}
.stk-tix .stk-k{font:700 12px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--lime)}
.stk-tix .stk-p{font:400 clamp(44px, 12vw, 58px)/1 var(--serif)}
.stk-tix .stk-u{font:700 10px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; background:var(--blush); color:var(--ink); padding:5px 9px; border-radius:999px}
.stk-tix .stk-u:empty{display:none}
@media (prefers-reduced-motion:reduce){ .stk-ring{animation:none} .fl-d.flap{animation:none} }

/* The Sarah Conference: intro with the lockup and the anchor scripture */
.intro-in{max-width:780px; text-align:center}
.intro-lead{font:400 clamp(24px, 4.6vw, 36px)/1.25 var(--serif); text-wrap:balance}
.intro-lock{width:min(100%, 620px); margin:clamp(20px, 3vw, 28px) auto 0}
.intro-lock .lock{width:100%; margin:0}
.intro-verse{margin-top:clamp(40px, 6vw, 64px); padding-block:clamp(32px, 5vw, 48px); border-block:1.5px solid currentColor}
.intro-body{margin:clamp(32px, 5vw, 48px) auto 0; max-width:60ch; text-align:left; display:grid; gap:18px; font-size:clamp(17px, 2vw, 19px)}
.intro-body p:first-child{font-size:clamp(20px, 2.6vw, 24px); line-height:1.45}

/* speakers: bios on show */
.spk-bio{margin-top:14px}
.spk-bio > p{font-size:16px; line-height:1.6}
.spk-bio .more{margin-top:12px}

/* the day: Montserrat, its own colour block, dots only at 9am and 4pm */
.day-box{display:grid; gap:32px; background:var(--forest); color:var(--cream); border-radius:28px; padding:clamp(28px, 6vw, 64px) clamp(22px, 6vw, 64px)}
.day-box h2{font:700 clamp(28px, 6vw, 42px)/1.05 var(--sans); letter-spacing:.06em; text-transform:uppercase}
.day-box .eyebrow{color:var(--lime)}
.day-sub{font:500 15px/1.6 var(--sans); opacity:.9; max-width:36ch}
.tl{list-style:none; margin:0; padding:0; font-family:var(--sans)}
.tl li{position:relative; padding:0 0 22px 44px}
.tl li::before{content:""; position:absolute; left:9px; top:0; bottom:0; border-left:2px dotted rgba(244,246,230,.6)}
.tl li:first-child::before{top:14px}
.tl li:last-child{padding-bottom:0}
.tl li:last-child::before{bottom:auto; height:14px}
.tl-dot{position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px var(--forest)}
.tl-t{display:block; font:700 13px/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--lime)}
.tl h3{font:600 clamp(17px, 2vw, 20px)/1.35 var(--sans); letter-spacing:0; text-wrap:pretty}
.tl-a h3{font-weight:700; margin-top:2px}
.tl-m{padding-left:68px!important}
.tl-m h3{font-weight:500}
.tl p{font:500 14px/1.5 var(--sans); margin-top:4px; opacity:.85}
.tl a{color:var(--lime)}
@media (min-width:900px){ .day-box{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; gap:64px} }

/* tickets */
.tix-in{display:grid; gap:40px; align-items:center}
.tix-note{font:500 14px/1.6 var(--sans); max-width:44ch; opacity:.9}
.tix-note + .tix-note{margin-top:6px}
@media (min-width:900px){ .tix-in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }

/* bless a sister */
.sis-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:start}
.sis-head .stk{width:clamp(92px, 24vw, 140px)}
.sis{list-style:none; margin:40px 0 0; padding:0; display:grid; gap:16px}
.sis-c{display:flex; flex-direction:column; gap:10px; border:1.5px solid currentColor; border-radius:22px; padding:24px}
.sis-c:nth-child(2){background:var(--blush); border-color:var(--blush)}
.sis-c p:not(.label){font-size:16px; line-height:1.55}
.sis-go{margin-top:auto; padding-top:8px}
@media (min-width:900px){ .sis{grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px} }

/* connection cards, scattered on the table (old Poster deck, new card design) */
.conn{overflow:hidden; padding-bottom:clamp(40px, 5vw, 64px)}
.table{position:relative; height:clamp(540px, 52vw, 700px); margin-top:clamp(8px, 2vw, 24px)}
.tcard{--w:clamp(132px, 12vw, 176px); position:absolute; left:50%; top:50%; width:var(--w); aspect-ratio:63/88; margin-left:calc(var(--w) / -2); margin-top:calc(var(--w) * -.7);
  border:0; border-radius:calc(var(--w) * .07); padding:calc(var(--w) * .085); text-align:left; cursor:pointer; color:var(--ink);
  display:flex; flex-direction:column; transform:translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s, 1));
  transition:transform .6s cubic-bezier(.2,.75,.2,1), box-shadow .3s; box-shadow:0 1px 2px rgba(0,0,0,.18), 0 12px 26px -10px rgba(0,0,0,.5)}
.tcard.t-bone{background:var(--bone)} .tcard.t-sage{background:var(--sage)} .tcard.t-blush{background:var(--blush)} .tcard.t-ink{background:var(--pmint)}
.tcard.key{--s:1.75; box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.tcard:not(.key):hover{--s:1.05}
.tc-rd{font:400 calc(var(--w) * .13)/1 var(--serif)}
.tc-rd small{display:block; font:700 calc(var(--w) * .038)/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; margin-bottom:3px}
.tc-q{flex:1; display:flex; align-items:center; font:400 calc(var(--w) * .09)/1.24 var(--serif); padding-bottom:calc(var(--w) * .12)}
.tc-cc{position:absolute; right:calc(var(--w) * .085); bottom:calc(var(--w) * .085); font:700 calc(var(--w) * .034)/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; opacity:.8}
.conn-go{position:relative; z-index:60; margin-top:8px}
@media (max-width:860px){ .table{height:520px} .tcard{--w:116px} .tcard.key{--s:2.05} }

/* live Q&A */
.ask-eb{display:flex; align-items:center; gap:12px}
.live{display:inline-flex; align-items:center; gap:7px; background:var(--blush); color:var(--ink); border-radius:999px; padding:5px 11px; font:700 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase}
.live i{width:8px; height:8px; border-radius:50%; background:#8B3A52; animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

/* the Deck: fixes */
.dk-ov{font:400 22px/1.3 var(--serif)}
.dk-lock .lock{width:100%; margin:0}
.dk-small{font-size:15px; line-height:1.55}

@media (max-width:759px){ .spk-bio{grid-column:1 / -1} }
.stk-ring text{font-size:14px; letter-spacing:0}

.dk-face .tl li{padding-bottom:12px} .dk-face .tl h3{font-size:16px} .dk-face .tl-m{padding-left:56px!important} .dk-face .tl p{font-size:13px}

/* ===== 28 Oct, round 2 ===== */
/* simpler sister sticker: one ring, no spinning text */
.stk-sis{background:var(--sage); color:var(--ink); box-shadow:0 10px 22px -12px rgba(20,28,6,.55)}
.stk-sis .stk-in{inset:7%; border:1.5px solid var(--ink); gap:5px}
.stk-sis .pcc{width:30%; height:auto}
.stk-sis .stk-t{font:700 clamp(10px, 2.9vw, 15px)/1.1 var(--sans); letter-spacing:.12em; text-transform:uppercase}
.stk-sis .stk-k{font:700 clamp(7px, 1.9vw, 9px)/1 var(--sans); letter-spacing:.16em; padding:3px 7px; background:var(--blush); border-radius:999px; text-transform:uppercase}
a.stk-sis:hover{transform:rotate(-6deg)}

/* intro */
.intro-theme{margin-top:clamp(28px, 4vw, 40px); font:400 12px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase}
.intro-lock{margin-top:12px}
.intro-call{margin:clamp(16px, 2.4vw, 24px) auto 0; max-width:28ch; font:italic 400 clamp(21px, 3.4vw, 28px)/1.35 var(--serif); text-wrap:balance}
.intro-verse{border:0; background:var(--sage); color:var(--ink); border-radius:28px; padding:clamp(32px, 6vw, 56px) clamp(20px, 5vw, 56px); margin-top:clamp(32px, 5vw, 48px)}
.intro-close{margin:clamp(32px, 5vw, 48px) auto 0; max-width:40ch; font:400 clamp(19px, 2.6vw, 24px)/1.45 var(--serif); text-wrap:pretty}

/* speakers intro */
.spk-intro{display:grid; gap:20px}
.spk-intro-t{display:grid; gap:16px; font-size:clamp(17px, 2vw, 19px)}
.spk-intro-t p:first-child{font-size:clamp(20px, 2.6vw, 24px); line-height:1.45}
@media (min-width:900px){ .spk-intro{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:start} }

/* the day, in capitals */
.tl h3{text-transform:uppercase; letter-spacing:.08em; font-size:clamp(14px, 1.7vw, 16px); line-height:1.45}
.tl-a h3{font-size:clamp(15px, 1.9vw, 18px); letter-spacing:.06em}
.tl-t{font:700 clamp(28px, 6vw, 40px)/1 var(--sans); letter-spacing:.02em; margin-bottom:6px}
.tl-dot{top:12px}
.tl li:first-child::before{top:22px}
.tl li:last-child::before{height:22px}
.tl-m{padding-bottom:18px}
.tl-m h3{font-weight:600}
.tl-m::after{content:""; position:absolute; left:44px; top:.72em; width:14px; border-top:2px solid var(--lime)}
.tl p{text-transform:none; letter-spacing:0}
.dk-face .tl-m::after{left:36px}

/* tickets with bless a sister */
.tix-too{display:block; font-style:italic; color:var(--lime)}
.tix .sis-wrap{margin-top:clamp(48px, 7vw, 72px); padding-top:clamp(32px, 5vw, 48px); border-top:1px solid rgba(244,246,230,.3)}
.tix .sis{margin-top:20px}
.tix .sis-c{border-color:rgba(244,246,230,.45)}
.tix .sis-c:nth-child(2){background:var(--blush); color:var(--ink); border-color:var(--blush)}
.tix .sis-c .btn.ghost{color:var(--cream)}

.e-ph{border:1.5px dashed currentColor; border-radius:16px; padding:24px; max-width:52ch; display:grid; gap:10px}
.e-ph span{display:block; height:10px; border-radius:6px; background:currentColor; opacity:.12}
.e-ph span.short{width:60%}
[hidden]{display:none!important}
/* Sarah Women's Ministry: forest, last on the page */
.t-forest{background:var(--forest); color:var(--cream); --lk-l:var(--cream); --lk-y:var(--olive); --lk-b:var(--pmint)}
/* How to find us: details on top, a wide map underneath */
.find-top{align-items:start}
.find-top .addr{font-size:clamp(22px,2.2vw,28px)}
.find-facts{margin-top:0}
@media (min-width:900px){ .find-facts{margin-top:44px} }
#find .map-embed,[id$="-find"] .map-embed{margin-top:40px; aspect-ratio:4/3}
@media (min-width:700px){ #find .map-embed,[id$="-find"] .map-embed{aspect-ratio:21/8} }
/* speakers and the day share a background: close the double gap */
#day.sec,[id$="-day"].sec{padding-top:24px}
/* drawn map: always loads, no third-party tiles */
#find .map-embed.smap-wrap,[id$="-find"] .map-embed.smap-wrap{aspect-ratio:auto}
.smap-wrap a{display:block}
.smap{display:block; width:100%; height:auto}
.smap-d{display:none; aspect-ratio:1200/460}
.smap-m{aspect-ratio:630/440}
@media (min-width:700px){ .smap-d{display:block} .smap-m{display:none} }

/* ===== live site: menu, review ribbon, map ===== */
html{scroll-padding-top:72px}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:41; background:var(--bg)}
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--bg); color:var(--fg); border-bottom:1px solid currentColor; border-bottom-color:color-mix(in srgb, currentColor 25%, transparent)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px}
.nav-brand{display:flex; flex-direction:column; gap:5px; text-decoration:none; white-space:nowrap; min-width:0}
.nb-pres{display:inline-flex; align-items:center; gap:8px; font:400 9.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase}
.nb-pres .pcc{height:15px}
.nb-name{font:700 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase}

.nav-btn{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px; border:1.5px solid currentColor; border-radius:999px; background:transparent; color:inherit; font:700 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; cursor:pointer}
.nav-bars{width:14px; height:10px; border-block:1.5px solid currentColor; position:relative}
.nav-bars::after{content:""; position:absolute; left:0; right:0; top:50%; border-top:1.5px solid currentColor; transform:translateY(-50%)}
.nav-menu{display:none; position:absolute; left:0; right:0; top:100%; background:var(--bg); color:var(--fg); padding:8px var(--gutr) 24px var(--gut); border-bottom:1px solid currentColor; max-height:calc(100vh - 80px); overflow-y:auto}
.nav-menu.open{display:block}
.nav-menu > a{display:flex; align-items:center; min-height:52px; border-bottom:1px solid color-mix(in srgb, currentColor 20%, transparent); font:400 22px/1.2 var(--serif); text-decoration:none}
.nav-more{margin-top:20px; display:flex; flex-wrap:wrap; gap:8px}
.nav-more .label{width:100%; opacity:.7; margin-bottom:4px}
.nav-more a{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1.5px solid currentColor; border-radius:999px; font:600 13px var(--sans); text-decoration:none}
.nav-more a[aria-current]{background:var(--acc); color:var(--afg); border-color:var(--acc)}
@media (min-width:1600px){
  .nav-btn{display:none}
  .nav-menu{display:flex; position:static; padding:0; border:0; align-items:center; gap:22px; max-height:none; overflow:visible; background:transparent}
  .nav-menu > a{min-height:44px; border:0; font:600 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase}
  .nav-more{display:none}
  .nav-menu > a.nav-other{display:inline-flex; padding:0 14px; min-height:36px; border:1.5px solid currentColor; border-radius:999px; letter-spacing:.08em; text-transform:none; font-weight:600}
}
.nav-menu > a.nav-other{display:none}
@media (min-width:1600px){ .nav-menu > a.nav-other{display:inline-flex} }
.review{background:var(--ink); color:var(--cream)}
.review-in{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:40px; flex-wrap:wrap}
.review a{color:inherit}
.map-embed{position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; border:1px solid currentColor}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.err{margin-top:8px}

.chooser{display:grid; gap:20px; margin-top:40px}
@media (min-width:760px){ .chooser{grid-template-columns:repeat(2,minmax(0,1fr))} }
.chooser a{display:flex; flex-direction:column; gap:8px; padding:28px; border:1.5px solid currentColor; border-radius:16px; text-decoration:none}
.chooser a h3{font-size:28px}
.chooser a p{font-size:16px; opacity:.9}


@media (max-width:1599px){
  .nav-in{justify-content:center; position:relative; min-height:64px}
  .nav-brand{align-items:center; text-align:center}
  .nav-btn{position:absolute; right:var(--gutr); top:50%; transform:translateY(-50%)}
}
@media (max-width:520px){ .nav-btn{width:44px; padding:0; justify-content:center; font-size:0; gap:0} .nb-name{font-size:12px; letter-spacing:.12em} .nb-pres{font-size:8.5px; letter-spacing:.16em} }

@media (min-width:1600px){ .nav-menu{gap:18px} .nav-menu > a{white-space:nowrap; letter-spacing:.1em; font-size:11px} }