/* ─────────────────────────────────────────────────────────────
   BALI LIFE — "Poster Wall" design system
   The ONE stylesheet for every page. Read README.md before editing.

   Rules
   · Colours, fonts and sizes come from the tokens in :root. Never
     type a raw hex, font name or px font-size in a component.
   · Borders are 1.5px solid var(--ink). Corners are square (no radius).
   · Shadows are hard offsets (8px 8px 0), never blurred.
   · New components go in their own labelled block below.

   TYPE SCALE — every text size on the site comes from here.
   Display ....... page + section titles, Welcome, Tithes & Offering
   XL ............ rhythm names (Sunday, Family Dinners…)
   L ............. location names, big times, account number
   M ............. card titles, leader names, footer headings
   Lede .......... the intro paragraph under a page title
   Script ........ every hand-script accent (one size)
   Body / Small .. running text
   Mono / Mono L . labels and schedule lines
   ───────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;
  --jet:#000000; --charcoal:#1F1F1F; --egret:#F5F5F1; --bone:#F3F1E6;
  --red:#E33C36; --ruby:#D71920; --concrete:#B7B1A6; --stone:#CBB79A;
  --green:#E9F19D; --yellow:#F1B51C; --blue:#9AA8BC; --poppy:#E6582E;
  --paper:#FAFAF6; --paper-2:#F3F2EC;
  --ink:var(--jet); --muted:#5e5a53;

  --f-poster:'Anton','Archivo',Impact,sans-serif;
  --f-grot:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-black:'Grenze Gotisch','Old English Text MT',serif;
  --f-script:'Pinyon Script','Snell Roundhand',cursive;
  --f-mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --fs-display:clamp(56px,8.4vw,132px);
  --fs-xl:clamp(40px,5.2vw,84px);
  --fs-l:clamp(32px,3.6vw,56px);
  --fs-m:clamp(21px,2vw,28px);
  --fs-script:clamp(26px,2.5vw,38px);
  --fs-lede:clamp(18px,1.6vw,22px);
  --fs-body:17px;
  --fs-sm:15px;
  --fs-mono:12.5px;
  --fs-mono-l:clamp(14px,1.15vw,16px);

  --gut:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.1,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper);overflow-x:clip}   /* clip, not hidden: nothing can push the page sideways on a phone, and the sticky nav keeps working */
body{background:var(--paper);color:var(--ink);font-family:var(--f-grot);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:var(--egret)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
[hidden]{display:none!important}
.nw{white-space:nowrap}   /* added by the build around phrases like life-on-life so they never split */
.mono{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase}
.script{font-family:var(--f-script);font-size:var(--fs-script);line-height:1;color:var(--red)}

/* Light paper grain */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:100;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}

/* ── NAV ── */
/* Sticks to the very top and pads itself below the phone's status bar, so its background covers the notch area */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gut) 12px;background:var(--paper);border-bottom:1.5px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--ink)}
/* Paper panel reaching up from the nav, so nothing shows through above it (iPhone status bar, overscroll) */
.nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;background:var(--paper);pointer-events:none}
.nav .logo{width:46px;display:block;flex:none}
.nav .logo .ch{fill:var(--ink)}
.nav ul{display:flex;gap:26px;list-style:none}
.nav ul a{text-decoration:none;position:relative;white-space:nowrap}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav ul a:hover::after,.nav ul a.on::after,.nav ul a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav ul a.on{font-weight:500}
.nav .right{display:flex;align-items:center;gap:10px}
.seg{display:flex;border:1.5px solid var(--ink);position:relative}
.seg button,.seg span,.seg a{text-decoration:none;padding:7px 11px;font-family:var(--f-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;transition:color .3s,background .3s}
.seg .on{background:var(--ink);color:var(--paper)}
.seg button:not(.on):hover,.seg a:not(.on):hover{background:var(--green)}
.seg .soon{opacity:.4;cursor:not-allowed}
@media (max-width:1560px){.nav ul{gap:18px}}
/* Mobile menu: under 1420px the links fold into a Menu button (site.js toggles .open) */
.nav .menu{display:none;padding:7px 11px;border:1.5px solid var(--ink);font-family:var(--f-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.nav.open .menu{background:var(--ink);color:var(--paper)}
@media (max-width:1420px){
  .nav ul{display:none}
  .nav .menu{display:block}
  .nav.open ul{display:grid;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-block:1.5px solid var(--ink);padding:6px var(--gut) 14px}
  .nav.open ul a{display:block;padding:12px 0;border-bottom:1px dashed var(--ink);font-size:var(--fs-mono-l)}
  .nav.open ul li:last-child a{border:0}
  /* Active link in the open menu: the red line takes the place of the dotted divider (never both) */
  .nav.open ul a::after{bottom:-1px}
  .nav.open ul a.on,.nav.open ul a[aria-current],.nav.open ul a:hover{border-bottom-color:transparent}
}
@media (max-width:420px){.seg button,.seg span,.seg a{padding:7px 8px;font-size:11px}.seg.lang{display:none}}
/* Language links inside the phone menu (the EN/ID switch is hidden on small phones) */
.nav ul .langs{display:none}
/* Phones: the EN/ID switch moves into the menu, drawn exactly like the header's EN | ID box */
@media (max-width:420px){.nav.open ul .langs{display:flex;padding-top:16px}.nav.open ul .langs .seg a{display:block;padding:9px 14px;border:0;font-size:12px}.nav ul .langs a::after{display:none}}

/* ── BUTTONS & LINKS ── */
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--ink);position:relative;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),border-color .35s;background:transparent;color:var(--ink)}
.btn::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .4s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn:hover{color:var(--egret);border-color:var(--red)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.lnk{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px;transition:color .2s}
.lnk:hover{color:var(--red)}

/* ── MINI RHYTHM (weekly-schedule list) ── */
.mini{list-style:none;display:grid;gap:12px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.mini li{display:grid;gap:2px;animation:line .6s var(--ease) both;animation-delay:calc(var(--n) * 90ms + 120ms)}
@keyframes line{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mini b{font-weight:500;font-size:var(--fs-mono);color:var(--muted)}
.mini .ln{font-size:var(--fs-mono-l);position:relative;justify-self:start;padding:2px 10px 2px 0}
.mini .key .ln{padding-left:12px}
.mini .tba .ln{color:var(--muted)}
.mini .tba .ln::before{content:"→ "}
.mini .oval{position:absolute;inset:-9px -16px -9px -12px;width:calc(100% + 28px);height:calc(100% + 18px);overflow:visible;pointer-events:none}
.mini .oval path{fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:draw 1.2s var(--ease) .5s forwards;vector-effect:non-scaling-stroke}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:480px){.mini .oval{display:none}.mini .key .ln{background:var(--green);color:var(--jet);padding:3px 8px}}

/* ── HOME HERO (index.html only: brandmark + location tickets) ── */
.hero{position:relative;--vh:min(100svh,1100px);min-height:calc(var(--vh) - 72px);padding:clamp(16px,2.4vw,32px) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero .bigmark .mark{display:block;width:min(100%, calc((var(--vh) - 160px) * 1.13));height:auto;overflow:visible}
.hero .bigmark .ch{fill:var(--ink);transform-box:fill-box;transform-origin:50% 100%;animation:rise 1s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 150ms)}
@keyframes rise{from{transform:translateY(40%) scaleY(.2);opacity:0}to{transform:none;opacity:1}}

.hero .intro{display:flex;flex-direction:column;gap:16px}
.welcome{font-family:var(--f-black);font-weight:800;font-size:var(--fs-display);line-height:.82;white-space:nowrap;letter-spacing:-.01em;transition:font-size .7s var(--ease)}
html:not([data-loc="none"]) .welcome{font-size:var(--fs-xl)}
.welcome .w{display:inline-block;animation:drop .9s var(--ease) both;animation-delay:calc(var(--d) * 45ms + 600ms)}
@keyframes drop{from{transform:translateY(-30px) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.welcome small{display:block;font-family:var(--f-poster);font-weight:400;font-size:.46em;line-height:1;text-transform:uppercase;margin-top:.14em}
.hero .ask{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}

.tickets{display:grid;gap:12px}
.tk{display:grid}
.ticket{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 20px;text-align:left;border:1.5px solid var(--ink);padding:clamp(12px,1.5vw,18px) clamp(16px,2vw,24px);background:var(--paper);position:relative;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),transform .45s var(--spring),box-shadow .3s,padding .5s var(--ease);animation:tin .8s var(--ease) both}
.tk:nth-child(1) .ticket{animation-delay:1s}.tk:nth-child(2) .ticket{animation-delay:1.12s}
@keyframes tin{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.ticket::before{content:"";position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:-1}
.ticket:hover::before{transform:none}
.ticket .tn{font-family:var(--f-poster);font-size:var(--fs-l);line-height:1;text-transform:uppercase;transition:font-size .5s var(--ease)}
.ticket .tl{grid-column:1;font-family:var(--f-script);font-size:var(--fs-script);line-height:1.12;color:var(--red)}
.ticket .tt{grid-row:1/3;grid-column:2;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;text-align:right;line-height:1.5}
.ticket .tt b{display:block;font-family:var(--f-poster);font-weight:400;font-size:var(--fs-l);letter-spacing:0;line-height:1;transition:font-size .5s var(--ease)}
.ticket .ta{grid-row:1/3;grid-column:3;font-family:var(--f-mono);font-size:20px;transition:transform .35s var(--ease)}
.ticket:hover .ta{transform:translateX(5px)}
.ticket.on{background:var(--ink);color:var(--paper);box-shadow:8px 8px 0 var(--red);transform:translate(-4px,-4px);animation:none}
.ticket.on::before{display:none}
.ticket.on .ta{transform:rotate(90deg)}
/* Unchosen ticket tucks down to a slim row once a location is picked */
html:not([data-loc="none"]) .ticket:not(.on){padding-block:10px}
html:not([data-loc="none"]) .ticket:not(.on) .tn,html:not([data-loc="none"]) .ticket:not(.on) .tt b{font-size:var(--fs-m)}
html:not([data-loc="none"]) .ticket:not(.on) .tl{font-size:22px}
html[data-loc="none"] .tk:nth-child(1) .ticket{animation:tin .8s var(--ease) 1s both, nudge 3.6s ease-in-out 3s infinite}
@keyframes nudge{0%,86%,100%{transform:none}90%{transform:translateX(-5px) rotate(-.4deg)}95%{transform:translateX(3px)}}

/* The card opens directly under its own ticket */
.hero .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
html[data-loc="seminyak"] .tk[data-id="seminyak"] .panel,html[data-loc="canggu"] .tk[data-id="canggu"] .panel{grid-template-rows:1fr}
.hero .panel > div{overflow:hidden}
.hero .panel .in{border:1.5px solid var(--ink);border-top:0;padding:clamp(14px,1.6vw,22px) clamp(16px,2vw,24px);background:var(--bone);display:grid;gap:14px;margin:0 6px}
/* schedule reads as a table: DAY | line */
.hero .panel .mini{grid-template-columns:max-content minmax(0,1fr);gap:10px 18px;align-items:baseline}
.hero .panel .mini li{display:contents}
.hero .panel .mini li > *{animation:line .6s var(--ease) both;animation-delay:inherit}
.hero .panel .mini li b,.hero .panel .mini li .ln{animation-delay:calc(var(--n) * 90ms + 120ms)}
.hero .panel .mini .ln{font-size:14px}
.hero .panel .ctas .btn{padding:11px 16px}
html:not([data-loc="none"]) .hero .ask{display:none}
.hero .hint{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
html:not([data-loc="none"]) .hero .hint{display:none}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;align-items:start}
  .hero .bigmark .mark{width:min(36vw,170px)}
  .hero .bigmark{order:-1}
}
/* Phones: the header logo is already on screen, so the big hero logo is hidden (otherwise "bali life" appears three times) */
@media (max-width:760px){.hero .bigmark{display:none}}
@media (max-width:480px){.hero .panel .mini{grid-template-columns:1fr;gap:2px}.hero .panel .mini li .ln{margin-bottom:8px}.ticket{grid-template-columns:1fr auto}.ticket .ta{display:none}.welcome{font-size:clamp(52px,15vw,72px)}html:not([data-loc="none"]) .welcome{font-size:clamp(44px,12vw,56px)}}

/* ── MARQUEE ── */
.marquee{overflow:hidden;border-block:1.5px solid var(--ink);background:var(--red);color:var(--jet)}
.marquee.alt{background:var(--jet);color:var(--egret);transform:rotate(-1.2deg) scale(1.03);margin-top:-6px}
.marquee .track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee.alt .track{animation-direction:reverse;animation-duration:42s}
.marquee span{font-family:var(--f-poster);font-size:var(--fs-l);line-height:1.2;text-transform:uppercase;padding-right:.4em;white-space:nowrap}
.marquee span i{font-style:normal;color:var(--egret);padding-inline:.25em}
.marquee.alt span{font-family:var(--f-mono);font-size:var(--fs-mono-l);line-height:3;letter-spacing:.14em}
.marquee.alt span i{color:var(--red)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── SECTION HEADS ── */
section{scroll-margin-top:calc(76px + env(safe-area-inset-top,0px))}
.sec{padding:clamp(72px,10vw,140px) var(--gut) 0}
.head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;border-bottom:1.5px solid var(--ink);padding-bottom:14px;margin-bottom:clamp(20px,3vw,40px)}
.head h2{font-family:var(--f-poster);font-weight:400;font-size:var(--fs-display);line-height:1;text-transform:uppercase;letter-spacing:-.005em}
.head h2 .s{font-family:var(--f-script);text-transform:none;color:var(--red);font-size:var(--fs-script);letter-spacing:0;display:inline-block;transform:rotate(-6deg) translateY(-.4em);margin-left:.3em}

/* Location bar above the rhythm rows */
.locbar{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:6px 0 18px}
.locbar .now{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.locbar .now b{font-family:var(--f-grot);font-weight:900;font-stretch:125%;font-size:var(--fs-m);text-transform:uppercase;line-height:1}

/* ── RHYTHM ROWS (one size for every name) ── */
.rows{border-top:1.5px solid var(--ink)}
.day{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(18px,4vw,64px);padding:clamp(22px,3vw,40px) 0;border-bottom:1.5px solid var(--ink);align-items:center}
.day .dn{font-family:var(--f-poster);font-size:var(--fs-xl);line-height:1;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .5s var(--ease)}
.day:hover .dn,.day.lit .dn{color:var(--ink)}
.day .dn em{display:block;font-style:normal;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.12em;-webkit-text-stroke:0;color:var(--red);margin-top:12px}
.day .dd{display:flex;flex-direction:column;gap:10px}
.day .sub{color:var(--red)}
.day .when{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--fs-mono)}
.day .when span+span::before{content:"·";margin-right:16px}
.day p{max-width:52ch;color:var(--charcoal)}
.day .acts{display:flex;gap:18px;flex-wrap:wrap;margin-top:2px}
.day.has-img{grid-template-columns:minmax(0,6fr) auto minmax(0,4fr)}
.dph{width:clamp(120px,13vw,190px);aspect-ratio:4/5;max-width:100%;overflow:hidden;border:1.5px solid var(--ink);background:#fff;transform:rotate(-2.5deg);transition:transform .5s var(--spring),box-shadow .3s}
.day:nth-child(even) .dph{transform:rotate(2deg)}
.day:hover .dph{transform:rotate(0) scale(1.06);box-shadow:6px 6px 0 var(--red)}
/* Every rhythm-row image is shown black & white (photos and posters alike) */
.dph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.dph-gap{width:clamp(120px,13vw,190px)}
.dph.poster img{object-fit:cover;object-position:50% 20%}
@media (max-width:760px){.day,.day.has-img{grid-template-columns:1fr}.dph{width:min(52vw,200px)}.dph-gap{display:none}}

/* ── LIFE TOGETHER (Canggu photo wall) ── */
.life .wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row dense;gap:clamp(8px,1.1vw,16px)}
.lph{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;border:1.5px solid var(--ink);background:var(--charcoal);transition:opacity .8s var(--ease),transform .8s var(--spring);transition-delay:calc(var(--k) * 45ms)}
.lph.wide{grid-column:span 2;aspect-ratio:auto}
.lph img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transform:translateY(var(--iy,0px));transition:scale 1s var(--ease)}
.lph:hover img{scale:1.05}
.life .wall.wait .lph{opacity:0;transform:translateY(30px) rotate(-1deg)}
@media (max-width:1000px){.life .wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.life .wall{grid-template-columns:repeat(2,minmax(0,1fr))}.lph.wide{aspect-ratio:8/5}}   /* on 2 columns a wide tile has its own row, so it needs its own shape */

/* ── CONNECT ── */
.connect{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:clamp(28px,4vw,48px)}
.conn{display:flex;gap:clamp(14px,2vw,24px);align-items:center;border:1.5px solid var(--ink);padding:clamp(16px,2vw,24px);text-decoration:none;background:var(--paper);transition:transform .45s var(--spring),box-shadow .3s}
a.conn:hover{transform:translate(-4px,-4px) rotate(-.6deg);box-shadow:8px 8px 0 var(--ink)}
.conn.wa{background:var(--green)}
.conn.note{background:var(--paper-2);border-style:dashed}
.conn .qr{width:clamp(88px,9vw,120px);flex:none;background:#fff;padding:8px;border:1.5px solid var(--ink)}
.conn .ct{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm)}
.conn .k{color:var(--red)}
.conn b{font-family:var(--f-grot);font-weight:900;font-stretch:118%;font-size:var(--fs-m);line-height:1;text-transform:uppercase}
.conn .go{margin-top:6px}
@media (max-width:760px){.connect{grid-template-columns:1fr}.conn .qr{display:none}}

/* ── POSTERS STRIP ── */
.posters{overflow:hidden;margin-top:clamp(28px,4vw,48px);padding-block:10px 24px}
.ptrack{display:flex;gap:18px;width:max-content;animation:slide 60s linear infinite}
.posters:hover .ptrack{animation-play-state:paused}
/* Posters shrink on smaller screens (height 220–340px), so the loop is shortened in step to keep the same speed on screen as desktop */
@media (max-width:1416px){.ptrack{animation-duration:55s}}
@media (max-width:1250px){.ptrack{animation-duration:48s}}
@media (max-width:1080px){.ptrack{animation-duration:42s}}
@media (max-width:916px){.ptrack{animation-duration:39s}}
.pst{display:block;height:clamp(220px,24vw,340px);flex:none;border:1.5px solid var(--ink);background:#fff;transition:transform .5s var(--spring)}
.pst:nth-child(odd){transform:rotate(-1.5deg)}.pst:nth-child(even){transform:rotate(1.2deg)}
.pst:hover{transform:rotate(0) scale(1.04)}
.pst img{height:100%;width:auto;max-width:none}

/* ── PHOTO BAND ── */
.photoband{position:relative;margin:clamp(56px,8vw,110px) var(--gut) 0;overflow:hidden;aspect-ratio:16/7;max-width:100%;background:var(--charcoal)}
.photoband img{width:100%;height:120%;object-fit:cover;filter:grayscale(1) contrast(1.1);transform:translateY(var(--py,-8%));will-change:transform;animation:fadein .8s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (max-width:640px){.photoband{aspect-ratio:4/5}}

/* ── VISIT ── */
.places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.places.one{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:stretch}
.place{border:1.5px solid var(--ink);padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:16px;background:var(--paper);position:relative}
.places.one .place{background:var(--bone);box-shadow:8px 8px 0 var(--ink)}
.place .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.place h3{font-family:var(--f-poster);font-weight:400;font-size:var(--fs-l);line-height:1;text-transform:uppercase}
.place .lang{display:inline-block;background:var(--ink);color:var(--paper);padding:4px 9px}
.place dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px}
.place dt{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.place dd{font-weight:600}
.place .ctas{margin-top:auto}
.other{border:1.5px dashed var(--ink);padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:16px;background:var(--paper-2)}
.other b{font-family:var(--f-poster);font-weight:400;font-size:var(--fs-l);line-height:1;text-transform:uppercase}
.other p{font-size:var(--fs-sm);color:var(--charcoal)}
@media (max-width:820px){.places,.places.one{grid-template-columns:1fr}}


/* ── PAGE HEADER (top of every page except the homepage) ──
   <header class="pagehead" id="top"><span class="eyebrow mono">…</span><h1>Title<span class="s">script accent</span></h1><p class="lede">…</p></header> */
.pagehead{margin-inline:var(--gut);padding-block:clamp(40px,7vw,100px) clamp(20px,3vw,36px);display:grid;gap:18px;border-bottom:1.5px solid var(--ink)}
.pagehead .eyebrow{color:var(--red)}
.pagehead h1{font-family:var(--f-poster);font-weight:400;font-size:var(--fs-display);line-height:1;text-transform:uppercase;text-wrap:balance}
.pagehead h1 .s{font-family:var(--f-script);text-transform:none;color:var(--red);font-size:var(--fs-script);display:inline-block;transform:rotate(-6deg) translateY(-.4em);margin-left:.3em}
.pagehead .lede{max-width:52ch;font-size:var(--fs-lede);line-height:1.45;color:var(--charcoal)}

/* ── PROSE (running text: about, beliefs, stories) ── */
.prose{max-width:65ch;display:grid;gap:1em}
.prose h3{font-family:var(--f-grot);font-weight:900;font-stretch:118%;font-size:var(--fs-m);line-height:1.05;text-transform:uppercase;margin-top:.8em}
.prose p,.prose li{color:var(--charcoal)}
.prose ul,.prose ol{padding-left:1.2em;display:grid;gap:.4em}
.prose a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{color:var(--red)}
.prose blockquote{font-family:var(--f-script);font-size:var(--fs-script);line-height:1.15;color:var(--red);padding-left:18px;border-left:1.5px solid var(--ink)}
/* Life Groups interest form (lifegroupinterest.html): square inputs, mono labels, same rules as the rest of the site */
.lgform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px) clamp(16px,2.4vw,32px);max-width:880px}
.lgform .f{display:flex;flex-direction:column;gap:8px;min-width:0}
.lgform .full{grid-column:1/-1}
.lgform label{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase}
.lgform label .opt{color:var(--muted)}
.lgform .hint{font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}
.lgform input,.lgform select{width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.lgform select{padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.lgform input:focus-visible,.lgform select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.lgform input:user-invalid,.lgform select:user-invalid{border-color:var(--red)}
.lgform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lgform .send{gap:16px;align-items:flex-start}
.lgform .lgerr{font-size:var(--fs-sm);color:var(--ruby)}
.lgform[aria-busy="true"] .btn{opacity:.6;pointer-events:none}
.lgdone{max-width:560px;outline:none}
@media (max-width:600px){.lgform{grid-template-columns:1fr}.lgform .hint[aria-hidden="true"]{display:none}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* ── CARDS (any grid of equal items: ministries, events, FAQs) ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(12px,2vw,24px)}
.card{border:1.5px solid var(--ink);padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:12px;background:var(--paper);text-decoration:none;transition:transform .45s var(--spring),box-shadow .3s}
a.card:hover{transform:translate(-4px,-4px) rotate(-.6deg);box-shadow:8px 8px 0 var(--ink)}
.card .k{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.card h3{font-family:var(--f-grot);font-weight:900;font-stretch:118%;font-size:var(--fs-m);line-height:1;text-transform:uppercase;overflow-wrap:anywhere}
.card p{font-size:var(--fs-sm);color:var(--charcoal)}
.card .go{margin-top:auto;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase}
.card.hl{background:var(--green)}
.card.dark{background:var(--jet);color:var(--egret);border-color:var(--jet)}
.card.dark p{color:#d9d6cf}


/* Anton's capitals fill almost the whole em box: keep its line-height at 1 or more so wrapped lines never touch */
/* ── ABOUT (about.html): big statements, Bible verses, articles of faith ── */
.statement{font-family:var(--f-poster);font-weight:400;font-size:var(--fs-l);line-height:1.02;text-transform:uppercase;text-wrap:balance}
.statement-note{margin-top:16px;max-width:52ch;font-size:var(--fs-lede);line-height:1.45;color:var(--charcoal)}
.statement-note:first-child{margin-top:0}
.verse{border-left:1.5px solid var(--red);padding:4px 0 4px clamp(16px,2vw,24px);display:grid;gap:12px;align-content:start}
.verse .k{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.verse blockquote{font-size:var(--fs-lede);line-height:1.5;text-wrap:pretty}
.verse .btn{justify-self:start;margin-top:8px}
.verse figcaption{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.beliefs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);margin-top:clamp(28px,4vw,48px)}
.belief{border-top:1.5px solid var(--ink);padding:clamp(18px,2vw,26px) 0 clamp(22px,2.4vw,32px);display:grid;grid-template-columns:clamp(52px,5vw,72px) minmax(0,1fr);gap:8px 16px;align-content:start}
.belief .n{grid-row:span 3;font-family:var(--f-poster);font-size:var(--fs-l);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .4s var(--ease)}
.belief:hover .n{color:var(--ink)}
.belief h3{font-family:var(--f-grot);font-weight:900;font-stretch:118%;font-size:var(--fs-m);line-height:1.05;text-transform:uppercase}
.belief p{font-size:var(--fs-sm);color:var(--charcoal)}
.belief .refs{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.06em;color:var(--muted)}
@media (max-width:820px){.beliefs{grid-template-columns:1fr}}
.fine{margin-top:clamp(28px,3vw,40px);max-width:80ch;font-size:var(--fs-mono);line-height:1.6;color:var(--muted)}

/* ── GIVE ── */
.give{margin-top:clamp(72px,10vw,140px);background:var(--jet);color:var(--egret);padding:clamp(56px,8vw,120px) var(--gut);position:relative;overflow:hidden}
.give .bg{position:absolute;right:-3%;bottom:-18%;font-family:var(--f-black);font-weight:900;font-size:clamp(200px,34vw,560px);line-height:.8;color:var(--charcoal);pointer-events:none;user-select:none}
.give .inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.give h2{font-family:var(--f-poster);font-weight:400;font-size:var(--fs-display);line-height:1;text-transform:uppercase}
.give h2 .s{display:block;font-family:var(--f-script);text-transform:none;font-size:var(--fs-script);color:var(--red);line-height:1.3}
.give .lead{max-width:44ch;margin-top:18px;color:#d9d6cf}
.acct{border:1.5px solid var(--egret);padding:clamp(18px,3vw,32px);display:grid;gap:16px}
.acct .row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;border-bottom:1px dashed #555;padding-bottom:12px}
.acct .row:last-of-type{border:0;padding:0}
.acct .k{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--concrete)}
.acct .v{font-weight:700}
.acct .num{font-family:var(--f-mono);font-size:var(--fs-l);letter-spacing:.02em;font-weight:500;font-variant-numeric:tabular-nums;color:var(--green);line-height:1.1}
.copybtn{justify-self:start;background:var(--red);color:var(--jet);padding:13px 18px;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;transition:transform .2s var(--ease),background .2s}
.copybtn:hover{transform:translateY(-2px) rotate(-1deg)}
.copybtn.done{background:var(--green)}
@media (max-width:860px){.give .inner{grid-template-columns:1fr}}

/* ── LEADERS ── */
.lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.leader{display:flex;flex-direction:column;gap:12px}
.portrait{aspect-ratio:4/5;max-width:100%;position:relative;overflow:hidden;background:var(--bone);border:1.5px solid var(--ink)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);filter:grayscale(1) contrast(1.06);transition:transform 1.2s var(--ease),filter .6s}
.leader:hover .portrait img{transform:scale(1.04);filter:grayscale(.15) contrast(1.04)}
.leader .role{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.leader h3{font-family:var(--f-grot);font-weight:900;font-stretch:118%;font-size:var(--fs-m);line-height:1;text-transform:uppercase}
.leader p{font-size:var(--fs-sm);color:var(--charcoal)}
.leader details summary{cursor:pointer;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;list-style:none;display:inline-flex;gap:8px;align-items:center;border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.leader details summary::-webkit-details-marker{display:none}
.leader details summary .pl{display:inline-block;transition:transform .3s var(--ease)}
.leader details[open] summary .pl{transform:rotate(45deg)}
.leader details p{margin-top:12px}
@media (max-width:900px){.lgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.lgrid{grid-template-columns:1fr}}

/* ── FOOTER ── */
footer{margin-top:clamp(72px,10vw,140px);background:var(--red);color:var(--jet);padding:clamp(40px,6vw,80px) var(--gut) calc(28px + env(safe-area-inset-bottom,0px));overflow:hidden;position:relative}
/* Same columns + gap as the leader grid (.lgrid) so the footer lines up with the leaders above it */
footer .top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(16px,2.4vw,32px);margin-bottom:clamp(32px,6vw,72px)}
footer .top .script{color:var(--jet);font-size:var(--fs-l)}
footer .fl h4{font-family:var(--f-poster);font-weight:400;font-size:var(--fs-m);text-transform:uppercase;line-height:1;margin-bottom:10px}
footer .fl p{font-size:var(--fs-sm)}
footer .fl a{display:inline-block;margin-top:8px}
footer .giant{width:100%}
footer .giant .mark{width:100%;height:auto}
footer .giant .ch{fill:var(--jet)}
footer .bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:22px;border-top:1.5px solid var(--jet);padding-top:14px}
footer .family{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
footer .family a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:transform .3s var(--spring)}
footer .family a:hover{transform:translateY(-2px)}
footer .family a:hover span{text-decoration:underline}
footer .family img{height:40px;width:auto;filter:brightness(0)}
@media (max-width:900px){footer .top{grid-template-columns:1fr 1fr}}
@media (max-width:600px){footer .top{grid-template-columns:1fr}}

/* ── Reveal (below-the-fold only) ── */
.pre{opacity:0;transform:translateY(34px)}
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .mini .oval path{stroke-dashoffset:0}
  .pre{opacity:1;transform:none}
}