/* Perth Baptist Church — website
   Concept: the church's own corner of James & Stirling St — white brick, charcoal brick,
   the tall red cross and a Perth-blue sky. Big friendly type, real photos of real people.
   Change colours and fonts here once. */
:root{
  --ink:#17202E;        /* text, charcoal brick */
  --paper:#FFFFFF;
  --stone:#EFF1F4;      /* white-brick section background */
  --sky:#E3EEF9;        /* soft Perth sky band */
  --line:#D9DEE5;
  --muted:#556070;
  --cross:#C8282C;      /* the red cross: buttons, accents */
  --cross-ink:#A81E22;  /* red for text on white (AA contrast) */
  --river:#1D5FA6;      /* links, Swan River blue */
  --on-dark:#EEF2F7;
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:16px;
  --wrap:1160px;
  color-scheme:light;
}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--f-body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--river);text-underline-offset:3px}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em;color:var(--ink)}
h2{font-size:clamp(1.85rem,1.2rem + 2.6vw,3rem)}
h3{font-size:1.3rem;line-height:1.2;font-weight:700;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--river);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.section{padding-block:clamp(56px,8vw,104px)}
.kicker{font:700 .82rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--cross-ink)}
.head{display:grid;gap:14px;max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.lead{color:var(--muted);font-size:1.15rem;max-width:62ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph{background:#FFF3C4;color:#6B5200;padding:0 4px;border-radius:4px;font-size:.92em}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;border:2px solid transparent;font:700 1rem/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:20px;height:20px;flex:none}
.btn--red{background:var(--cross);color:#fff}
.btn--red:hover{background:var(--cross-ink)}
.btn--line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--line:hover{background:var(--ink);color:#fff}
.btn--white{background:#fff;color:var(--ink)}
.btn--ghost-light{border-color:rgba(238,242,247,.5);color:var(--on-dark)}
.btn--ghost-light:hover{background:var(--on-dark);color:var(--ink)}
.btn--sm{min-height:44px;padding:0 18px;font-size:.95rem}

/* Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:#fff}
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.header.is-scrolled{border-bottom-color:var(--line)}
.header__in{display:flex;align-items:center;gap:18px;min-height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none}
.brand svg{width:34px;height:44px;flex:none}
.brand b{display:block;font:800 1.08rem/1.05 var(--f-display);letter-spacing:-.01em}
.brand small{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:10px 11px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;font-size:.95rem}
.nav a:hover{background:var(--stone)}
.header__cta{flex:none}
.burger{display:none;margin-left:auto;width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* Hero */
.hero{padding-block:clamp(24px,4vw,56px) clamp(40px,6vw,72px)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero__text{display:grid;gap:22px;min-width:0}
.hero h1{font-size:clamp(2.4rem,1.3rem + 4.6vw,4.6rem)}
.hero h1 .red{color:var(--cross-ink)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.times div{padding:14px 16px;display:grid;gap:2px;border-right:1px solid var(--line);min-width:0}
.times div:last-child{border-right:0}
.times b{font:800 1.5rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.times span{font-size:.9rem;color:var(--muted);line-height:1.35}
.times em{font-style:normal;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cross-ink)}
.where{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:var(--muted)}
.where a{font-weight:700}
.hero__media{position:relative;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero__media img{width:100%;height:100%;object-fit:cover;border-radius:20px}
.hm-1{grid-column:1/-1;aspect-ratio:16/10}
.hm-2{aspect-ratio:4/3}
.hm-3{aspect-ratio:4/3}
.hero__stamp{position:absolute;right:-12px;bottom:-14px;background:var(--ink);color:#fff;border-radius:16px;padding:12px 16px;display:grid;gap:2px;box-shadow:0 14px 30px rgba(23,32,46,.25)}
.hero__stamp b{font:800 1.6rem/1 var(--f-display)}
.hero__stamp span{font-size:.85rem;opacity:.85}

/* Welcome languages band */
.hello{background:var(--ink);color:var(--on-dark);overflow:hidden}
.hello__in{display:flex;gap:28px;align-items:center;padding-block:16px;white-space:nowrap;font:700 1.15rem/1 var(--f-display)}
.hello__track{display:flex;gap:28px;animation:slide 40s linear infinite}
.hello__track span::after{content:"✚";color:var(--cross);margin-left:28px;font-size:.8em}
@keyframes slide{to{transform:translateX(-50%)}}

/* Plan a visit */
.visit__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.q{background:var(--stone);border-radius:var(--r);padding:22px;display:grid;gap:8px;align-content:start}
.q h3{font-size:1.15rem}
.q p{color:var(--muted)}
.visit__cta{margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:var(--sky);border-radius:20px;padding:22px}
.visit__cta img{width:160px;height:120px;object-fit:cover;border-radius:14px}
.visit__cta div{display:grid;gap:10px;min-width:0}

/* This week */
.week{background:var(--stone)}
.week__grid{display:grid;grid-template-columns:1.4fr .6fr;gap:24px;align-items:start}
.days{display:grid;gap:10px}
.day{display:grid;grid-template-columns:86px 1fr;gap:16px;background:#fff;border-radius:var(--r);padding:16px 18px;border:1px solid var(--line)}
.day__date{display:grid;align-content:start;gap:2px;font-variant-numeric:tabular-nums}
.day__date b{font:800 1.9rem/1 var(--f-display)}
.day__date span{font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cross-ink)}
.day ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.day li{display:grid;grid-template-columns:82px 1fr;gap:10px}
.day time{font-weight:700;font-variant-numeric:tabular-nums}
.day small{display:block;color:var(--muted);font-size:.9rem}
.day.is-today{border-color:var(--cross);box-shadow:0 0 0 1px var(--cross)}
.side{display:grid;gap:14px}
.card{background:#fff;border-radius:var(--r);padding:20px;border:1px solid var(--line);display:grid;gap:10px}
.card h3{font-size:1.1rem}
.card p{color:var(--muted);font-size:.98rem}
.links-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.links-list a{font-weight:700}

/* Ministries */
.min__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.min{display:grid;grid-template-rows:auto 1fr;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff;min-width:0}
.min img{width:100%;aspect-ratio:16/9;object-fit:cover}
.min__body{padding:20px 22px 22px;display:grid;gap:10px;align-content:start}
.min__body p{color:var(--muted)}
.tag{display:inline-flex;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--river)}
.min__meta{display:flex;flex-wrap:wrap;gap:6px}
.min__meta span{background:var(--stone);border-radius:999px;padding:5px 10px;font-size:.88rem;font-weight:700}

/* Young adults */
.ya{background:var(--sky)}
.ya__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4vw,56px);align-items:center}
.ya__text{display:grid;gap:18px;min-width:0}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:150px;gap:10px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.gallery .wide{grid-column:span 2}
.gallery .tall{grid-row:span 2}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:24px 1fr;gap:10px}
.ticks li::before{content:"✚";color:var(--cross);font-weight:700}

/* New to Perth */
.guide__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g{border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:8px;align-content:start}
.g h3{font-size:1.1rem;display:flex;gap:10px;align-items:center}
.g h3 i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--stone);font-size:1.05rem}
.g p{color:var(--muted);font-size:.98rem}
.note{margin-top:16px;color:var(--muted);font-size:.92rem}

/* Watch */
.watch{background:var(--ink);color:var(--on-dark)}
.watch h2{color:#fff}
.watch .lead{color:#B8C2D2}
.watch .kicker{color:#FF7A7C}
.watch__in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.watch__in .head{margin:0}
.watch__btns{display:flex;flex-wrap:wrap;gap:12px}

/* About */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:2px solid var(--line);margin-left:6px}
.timeline li{position:relative;padding:0 0 20px 22px}
.timeline li::before{content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--cross)}
.timeline b{font:800 1.25rem/1.2 var(--f-display);display:block}
.timeline p{color:var(--muted)}
.team{display:grid;gap:10px;margin-top:22px}
.person{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--stone)}
.person i{font-style:normal;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font:800 1rem/1 var(--f-display)}
.person b{display:block}
.person span{color:var(--muted);font-size:.92rem}
.beliefs{display:grid;gap:12px;margin-top:22px}
.beliefs p{color:var(--muted)}

/* News */
.news{background:var(--stone)}
.news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.post:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(23,32,46,.1)}
.post img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post__body{padding:18px 20px 22px;display:grid;gap:8px;align-content:start}
.post time{font-size:.85rem;font-weight:700;color:var(--cross-ink);letter-spacing:.06em;text-transform:uppercase}
.post p{color:var(--muted);font-size:.98rem}
.post .more{font-weight:700;color:var(--river)}

/* Give */
.give__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start}
.give__text{display:grid;gap:18px;min-width:0}
.funds{display:flex;flex-wrap:wrap;gap:8px}
.funds button{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:700 .95rem/1 var(--f-body);cursor:pointer;color:var(--ink)}
.funds button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.amounts button{min-height:52px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font:800 1.2rem/1 var(--f-display);cursor:pointer;color:var(--ink);font-variant-numeric:tabular-nums}
.amounts button[aria-pressed="true"]{border-color:var(--cross);color:var(--cross-ink);box-shadow:0 0 0 1px var(--cross)}
.freq{display:inline-flex;background:var(--stone);border-radius:999px;padding:4px}
.freq button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;font:700 .95rem/1 var(--f-body);cursor:pointer;color:var(--muted)}
.freq button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(23,32,46,.15)}
.give__box{background:var(--ink);color:var(--on-dark);border-radius:22px;padding:24px;display:grid;gap:16px}
.give__box h3{color:#fff}
.bank{display:grid;gap:0}
.bank div{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px dashed rgba(238,242,247,.18)}
.bank dt{color:#B8C2D2;font-size:.92rem}
.bank dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.copy{border:1px solid rgba(238,242,247,.3);background:transparent;color:var(--on-dark);border-radius:8px;padding:6px 10px;font:700 .8rem/1 var(--f-body);cursor:pointer;min-height:32px}
.copy.done{background:#fff;color:var(--ink)}
.give__small{font-size:.88rem;color:#B8C2D2}

/* Forms */
.forms{background:var(--sky)}
.forms__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
form.f{background:#fff;border-radius:20px;padding:24px;display:grid;gap:14px;border:1px solid var(--line)}
.f label{display:grid;gap:6px;font-weight:700;font-size:.95rem}
.f input,.f textarea,.f select{font:400 1rem/1.4 var(--f-body);padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--river);box-shadow:0 0 0 3px rgba(29,95,166,.15)}
.f .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.92rem;color:var(--muted)}
.f .check input{width:20px;height:20px;margin-top:2px;flex:none}
.f .status{font-size:.92rem;color:var(--muted)}

/* Safe church */
.safe{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;border:2px solid var(--ink);border-radius:20px;padding:24px}
.safe i{font-style:normal;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:1.5rem}
.safe div{display:grid;gap:8px}
.safe p{color:var(--muted)}

/* Contact */
.contact{background:var(--ink);color:var(--on-dark)}
.contact h2{color:#fff}
.contact .kicker{color:#FF7A7C}
.contact__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px)}
.contact a{color:#fff}
.bigphone{font:800 clamp(1.7rem,1rem + 2.8vw,2.8rem)/1.05 var(--f-display);text-decoration:none;display:inline-block;margin-top:14px}
.cinfo{display:grid;gap:14px;margin-top:22px;color:#B8C2D2}
.cinfo b{color:#fff;display:block}
.getting{border:1px solid rgba(238,242,247,.16);border-radius:20px;padding:22px;display:grid;gap:12px;color:#B8C2D2;align-content:start}
.getting h3{color:#fff;font-size:1.1rem}

/* Footer */
.footer{background:#0F1520;color:#9AA6B8;font-size:.9rem;padding-block:30px calc(30px + env(safe-area-inset-bottom,0px))}
.footer__in{display:grid;gap:18px}
.aoc{max-width:80ch;line-height:1.55}
.footer__row{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);padding-top:18px}
.footer nav{display:flex;flex-wrap:wrap;gap:16px}
.footer a{color:#C9D2DE;text-decoration:none}
.footer a:hover{color:#fff}
.credit{font-size:.82rem;opacity:.8}
.credit a{text-decoration:underline;text-underline-offset:3px}

/* Mobile bar */
.mbar{display:none}

/* Article page */
.article{max-width:740px;margin-inline:auto;padding-block:clamp(40px,6vw,80px)}
.article .back{font-weight:700;text-decoration:none;display:inline-flex;gap:8px;margin-bottom:24px}
.article h1{font-size:clamp(2rem,1.3rem + 3vw,3.2rem);margin:10px 0 18px}
.article .meta{color:var(--muted);font-size:.95rem}
.article p{margin-top:18px;font-size:1.12rem;line-height:1.75}
.byline{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;margin-top:28px;padding:18px;border-radius:20px;background:var(--stone)}
.byline img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.byline b{display:block;font:800 1.15rem/1.2 var(--f-display)}
.byline span{color:var(--muted);font-size:.95rem}
.byline a{font-weight:700}
.legal h2{font-size:1.4rem;margin-top:30px}
.legal p,.legal li{color:var(--muted)}

/* Tablet */
@media (max-width:1040px){
  .nav,.header__cta{display:none}
  .burger{display:inline-flex}
  .menu-open .nav{display:flex;position:fixed;inset:calc(70px + env(safe-area-inset-top,0px)) 0 auto 0;flex-direction:column;gap:2px;background:#fff;padding:12px max(16px,env(safe-area-inset-left,0px)) 22px;border-bottom:1px solid var(--line);box-shadow:0 20px 30px rgba(23,32,46,.12);max-height:calc(100vh - 70px);overflow:auto}
  .menu-open .nav a{padding:14px 12px;font-size:1.08rem}
  .hero__grid,.ya__grid,.about__grid,.give__grid,.contact__grid,.week__grid{grid-template-columns:1fr}
  .visit__grid,.guide__grid,.news__grid{grid-template-columns:repeat(2,1fr)}
}
/* Phone */
@media (max-width:700px){
  body{font-size:1rem;padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .times{grid-template-columns:1fr}
  .times div{border-right:0;border-bottom:1px solid var(--line);grid-template-columns:auto 1fr;align-items:baseline;column-gap:12px}
  .times div:last-child{border-bottom:0}
  .times em{grid-column:1/-1}
  .hero__actions .btn{flex:1 1 100%}
  .hero__stamp{right:8px;bottom:8px}
  .visit__grid,.guide__grid,.news__grid,.min__grid,.forms__grid{grid-template-columns:1fr}
  .visit__cta{grid-template-columns:1fr}
  .visit__cta img{width:100%;height:160px}
  .day{grid-template-columns:1fr;gap:10px}
  .day__date{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:10px}
  .day li{grid-template-columns:72px 1fr}
  .gallery{grid-auto-rows:110px}
  .amounts{grid-template-columns:repeat(2,1fr)}
  .f .row{grid-template-columns:1fr}
  .safe{grid-template-columns:1fr}
  .byline{grid-template-columns:72px 1fr}
  .byline img{width:72px;height:72px}
  .mbar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;border-top:1px solid var(--line);padding:8px max(10px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:12px;text-decoration:none;font-size:.8rem;font-weight:700;color:var(--ink);background:var(--stone)}
  .mbar a svg{width:22px;height:22px}
  .mbar a.give{background:var(--cross);color:#fff}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hello__track{animation:none}
  .btn:hover,.post:hover{transform:none}
}