/*
Theme Name: IPC Swansea
Theme URI: https://ipcswansea.com/
Author: Mount Creative
Author URI: https://wa.me/918891424056
Description: Custom theme for IPC Swansea, a Pentecostal church at Bethel Chapel, Morriston. Meetings, ministries, contact form and setup importer built in. No page builder needed.
Version: 1.4.8
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ipcswansea
*/

/* "Open Doors, darker": deep green-black bands (header, banner, photo band, contact, footer)
   alternating with warm sand light sections. Fraunces (soft) + Nunito: rounded and warm. */
:root{
  --ink:#13201B;
  --ink-2:#1B2B24;
  --ink-line:rgba(255,255,255,.12);
  --on-ink:#EEF2EE;
  --on-ink-mu:#A7B5AD;
  --bg:#F3ECE0;
  --soft:#E9DFCE;
  --card:#FBF7F0;
  --tx:#1F2420;
  --mu:#665F54;
  --line:#DCD0BC;
  --ac:#2E6A4C;
  --ac-hover:#245A3F;
  --ac-light:#8CC5A5;
  --d:"Fraunces",Georgia,"Times New Roman",serif;
  --b:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --w:1180px;
  --gut:clamp(18px,4vw,40px);
  --sec:clamp(56px,7vw,92px);
  --r:14px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 15px/1.7 var(--b);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:3px}
.dark :focus-visible{outline-color:var(--ac-light)}
::selection{background:var(--ac);color:#fff}
h1,h2,h3,h4{font-family:var(--d);font-weight:400;line-height:1.14;margin:0;text-wrap:balance;letter-spacing:-.005em;font-variation-settings:"SOFT" 100,"WONK" 0}
blockquote,.brand b,.times b,.sig b,.goal-links b,.side li a,.content blockquote p{font-variation-settings:"SOFT" 100,"WONK" 0}
p{margin:0 0 1em}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:12px;top:12px;z-index:999;clip:auto;width:auto;height:auto;background:var(--ac);color:#fff;padding:8px 14px}
.wrap{max-width:var(--w);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-block:var(--sec)}
.soft{background:var(--soft)}
.dark{background:var(--ink);color:var(--on-ink)}
.dark .mu,.dark .lead{color:var(--on-ink-mu)}
.h2{font-size:clamp(26px,2.8vw,34px);margin-bottom:12px}
.lead{color:var(--mu);max-width:56ch;font-size:16px}
.mu{color:var(--mu)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px;margin-bottom:28px}
.sec-head .h2{margin:0}
.sec-head .lead{margin:8px 0 0}

/* buttons + links */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--b);padding:12px 20px;border-radius:99px;background:var(--ac);color:#fff;border:0;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s}
.btn:hover{background:var(--ac-hover);color:#fff}
.btn.ghost{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ac)}
.dark .btn.ghost{background:transparent;color:var(--on-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.dark .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ac-light)}
.dark .btn{background:#fff;color:var(--ink)}
.dark .btn:hover{background:var(--ac-light);color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.more{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ac)}
.more:hover{color:var(--ac-hover)}
.dark .more{color:var(--ac-light)}
.more svg{width:14px;height:14px;transition:transform .2s}
.more:hover svg{transform:translateX(3px)}
.ico{width:18px;height:18px;flex:none}

.logo-disc{display:grid;place-items:center;border-radius:50%;background:#fff;flex:none;overflow:hidden}
.logo-disc img{width:100%;height:100%;object-fit:contain;transform:scale(1.06)}

/* ---------- header (always dark) ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--ink);z-index:60}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ink);color:var(--on-ink);border-bottom:1px solid var(--ink-line)}
.admin-bar .hdr{top:32px}
@media (max-width:782px){.admin-bar .hdr{top:0}}
.hdr .wrap{display:flex;align-items:center;gap:26px;height:90px}
.brand{display:flex;align-items:center;gap:14px;margin-right:auto;min-width:0}
.brand .logo-disc{width:80px;height:80px}
.ftr .brand .logo-disc{width:72px;height:72px}
.brand b{display:block;font:500 21px/1.1 var(--d)}
.brand small{display:block;font-size:11.5px;color:var(--on-ink-mu);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px}
.nav a{font-size:14px;color:var(--on-ink-mu);padding:6px 0;transition:color .2s}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a,.nav .current-menu-ancestor>a,.nav .current-page-ancestor>a{color:#fff}
.nav .current-menu-item>a,.nav .current_page_item>a{box-shadow:0 1px 0 var(--ac-light)}
.nav .sub-menu{display:none}
.hdr .btn{padding:10px 16px;font-size:13.5px}
.menu-btn{display:none;background:none;border:0;color:var(--on-ink);padding:8px;margin-right:-8px;cursor:pointer}
.menu-btn svg{width:22px;height:22px}

/* side panel */
.side{position:fixed;inset:0;z-index:80;visibility:hidden}
.side.open{visibility:visible}
.side .shade{position:absolute;inset:0;background:rgba(10,18,14,.55);opacity:0;transition:opacity .3s}
.side.open .shade{opacity:1}
.side .panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,88vw);background:var(--ink);color:var(--on-ink);padding:calc(20px + env(safe-area-inset-top,0px)) 26px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);overflow-y:auto}
.side.open .panel{transform:none}
.side .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.side .close{background:none;border:0;color:var(--on-ink);padding:6px;cursor:pointer}
.side .close svg{width:20px;height:20px}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:block;padding:11px 0;border-bottom:1px solid var(--ink-line);font:400 17px/1.25 var(--d)}
.side .sub-menu{padding-left:14px}
.side .sub-menu a{font:400 14px var(--b);color:var(--on-ink-mu)}
.side .meta{margin-top:auto;padding-top:24px;font-size:13.5px;color:var(--on-ink-mu)}
.side .meta b{color:var(--on-ink);font-weight:600}

/* ---------- home hero (dark) ---------- */
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,64px);align-items:center;padding-block:clamp(44px,6vw,80px) clamp(40px,5vw,64px)}
.hero h1{font-size:clamp(34px,4.2vw,54px);line-height:1.06;margin-bottom:18px}
.hero h1 em{font-style:italic;color:var(--ac-light)}
.hero .lead{margin-bottom:24px}
.times{display:flex;flex-wrap:wrap;gap:16px 34px;margin-top:30px;padding-top:22px;border-top:1px solid var(--ink-line)}
.times b{display:block;font:400 19px/1.25 var(--d);color:var(--on-ink)}
.times span{font-size:13.5px;color:var(--on-ink-mu);font-variant-numeric:tabular-nums}
.collage{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:repeat(2,minmax(150px,210px));gap:12px}
.collage figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.collage figure:first-child{grid-row:span 2}
.collage img{width:100%;height:100%;object-fit:cover}

/* ---------- about ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split .pic{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.split .pic img{width:100%;height:100%;object-fit:cover}
.facts{border-top:1px solid var(--line);margin:22px 0}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.facts span{color:var(--mu)}
.facts b{font-weight:600;text-align:right}

/* ---------- meetings ---------- */
.meetings{background:var(--card);border-radius:var(--r);border:1px solid var(--line);overflow:hidden}
.meet{display:grid;grid-template-columns:170px 1fr auto;gap:4px 24px;align-items:baseline;padding:16px 24px;border-bottom:1px solid var(--line)}
.meet:last-child{border-bottom:0}
.meet .day{font-size:13.5px;color:var(--mu)}
.meet h3{font-size:20px}
.meet p{grid-column:2;margin:0;color:var(--mu);font-size:13.5px}
.meet .time{font:600 14px var(--b);font-variant-numeric:tabular-nums;white-space:nowrap;grid-row:1;grid-column:3;color:var(--ac)}

/* ---------- ministries ---------- */
.min-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.min{display:flex;flex-direction:column;background:var(--soft);border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s}
.min:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(19,32,27,.45)}
.min .pic{aspect-ratio:4/3;overflow:hidden;background:var(--line)}
.min .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.min:hover .pic img{transform:scale(1.04)}
.min .body{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1}
.min h3{font-size:19px;margin-bottom:4px}
.min p{font-size:13.5px;color:var(--mu);margin:0}
.soft .min{background:var(--card)}
.min-grid.wide{grid-template-columns:repeat(3,1fr)}
.min-cta{background:var(--ink)!important;color:var(--on-ink);justify-content:flex-end}
.min-cta .body{justify-content:flex-end;padding:22px}
.min-cta h3{font-size:22px;margin-bottom:8px}
.min-cta p{color:var(--on-ink-mu);margin-bottom:14px}
.min-cta .more{color:var(--ac-light)}

/* ---------- photo band: mission & beliefs (dark) ---------- */
.band{display:grid;grid-template-columns:1fr 1fr}
.band .pic{min-height:420px;position:relative;overflow:hidden}
.band .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .txt{padding:clamp(40px,6vw,80px) clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.band blockquote{margin:0 0 16px;font:400 clamp(21px,2.2vw,27px)/1.35 var(--d)}
.band .lead{margin-bottom:26px}
.band h3{font-size:19px;margin-bottom:10px}
.band ul{list-style:none;margin:0 0 22px;padding:0;columns:2;column-gap:28px}
.band li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--ink-line);font-size:14px;color:var(--on-ink-mu)}

/* ---------- pastor ---------- */
.pastor{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(32px,6vw,80px);align-items:center}
.pastor figure{margin:0;max-width:380px;border-radius:var(--r);overflow:hidden}
.pastor figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%}
.pastor blockquote{margin:0 0 18px;font:400 clamp(20px,2vw,25px)/1.4 var(--d)}
.pastor blockquote cite{display:block;font:600 13px var(--b);color:var(--ac);font-style:normal;margin-top:8px}
.sig b{display:block;font:500 19px var(--d)}
.sig span{font-size:13.5px;color:var(--mu)}

/* ---------- goals ---------- */
.goals{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.goal-links{display:grid;gap:12px}
.goal-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;background:var(--card);border-radius:12px;border:1px solid var(--line);transition:border-color .2s}
.goal-links a:hover{border-color:var(--ac)}
.goal-links b{display:block;font:500 19px var(--d)}
.goal-links span span{font-size:13.5px;color:var(--mu)}
.goal-links svg{color:var(--ac)}

/* ---------- connect (dark) ---------- */
.connect{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.clist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.clist li{border-bottom:1px solid var(--line)}
.clist a,.clist div{display:flex;align-items:center;gap:14px;padding:13px 0;font-size:14.5px}
.clist a:hover{color:var(--ac)}
.clist svg{width:18px;height:18px;color:var(--ac);flex:none}
.clist small{display:block;font-size:12.5px;color:var(--mu)}
.dark .clist{border-top-color:var(--ink-line)}
.dark .clist li{border-bottom-color:var(--ink-line)}
.dark .clist svg{color:var(--ac-light)}
.dark .clist small{color:var(--on-ink-mu)}
.dark .clist a:hover{color:var(--ac-light)}

/* ---------- inner page banner (dark, with soft photo) ---------- */
.pbanner{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;isolation:isolate}
.pbanner .bg{position:absolute;inset:0 0 0 45%;z-index:-1}
.pbanner .bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.pbanner .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink),rgba(19,32,27,.5) 45%,rgba(19,32,27,.15))}
.pbanner .wrap{padding-block:clamp(44px,6vw,76px)}
.pbanner h1{font-size:clamp(30px,3.6vw,44px);max-width:16em}
.pbanner .lead{margin:12px 0 0;color:var(--on-ink-mu)}
.crumbs{font-size:13px;color:var(--on-ink-mu);margin-bottom:12px}
.crumbs a:hover{color:#fff}
.crumbs span{margin:0 6px;opacity:.6}

/* ---------- content pages ---------- */
.content{max-width:700px}
.content>*{max-width:100%}
.content h2{font-size:clamp(22px,2.3vw,28px);margin:1.9em 0 .55em}
.content h2:first-child{margin-top:0}
.content h3{font-size:20px;margin:1.5em 0 .5em}
.content p,.content li{color:#3A3A33;font-size:15px}
.content a{color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.content ol,.content ul{padding-left:1.3em}
.content li{margin-bottom:.7em}
.content li::marker{color:var(--ac)}
.content blockquote{margin:1.6em 0;padding:18px 22px;border-radius:12px;background:var(--soft)}
.content blockquote p{font:400 20px/1.45 var(--d);color:var(--tx);margin:0 0 6px}
.content blockquote cite{font-size:13px;color:var(--mu);font-style:normal}
.content img{border-radius:12px}
.content .wp-block-image{margin:1.6em 0}
.content figcaption{font-size:13px;color:var(--mu);margin-top:8px}
.layout-side{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,6vw,80px);align-items:start}
.layout-side>*,.split>*,.contact-grid>*{min-width:0}
.aside-card{position:sticky;top:96px;border-radius:var(--r);padding:24px;background:var(--ink);color:var(--on-ink)}
.aside-card h3{font-size:20px;margin-bottom:12px}
.aside-card .facts{border-top-color:var(--ink-line);margin:0}
.aside-card .facts div{font-size:13.5px;padding:10px 0;border-bottom-color:var(--ink-line)}
.aside-card .facts span,.aside-card .mu{color:var(--on-ink-mu)}
.aside-card .btn{background:#fff;color:var(--ink)}
.aside-card .btn:hover{background:var(--ac-light)}
.aside-card .btn.ghost{background:transparent;color:var(--on-ink);box-shadow:inset 0 0 0 1px var(--ink-line)}
.min-hero{aspect-ratio:16/8;border-radius:var(--r);overflow:hidden;margin-bottom:32px;background:var(--soft)}
.min-hero img{width:100%;height:100%;object-fit:cover;border-radius:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start}
.form{display:grid;gap:14px;background:var(--soft);padding:clamp(20px,3vw,32px);border-radius:var(--r)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;font-size:13px;color:var(--mu);margin-bottom:6px;font-weight:500}
.form input,.form textarea{width:100%;background:var(--card);border:1px solid var(--line);color:var(--tx);font:15px/1.5 var(--b);padding:11px 14px;border-radius:10px;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px rgba(46,106,76,.15)}
.form textarea{min-height:150px;resize:vertical}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .note{font-size:13px;color:var(--mu);margin:0}
.notice{padding:13px 16px;border-radius:10px;font-size:14px;border:1px solid}
.notice.ok{border-color:#b9d9c6;background:#ecf6f0;color:#1f5a3c}
.notice.err{border-color:#f0c4c0;background:#fdf0ef;color:#8c2a22}

/* ---------- footer (darkest) ---------- */
.ftr{background:#0E1814;color:var(--on-ink)}
.ftr .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;padding-block:52px 36px}
.ftr h4{font:600 13px var(--b);color:#fff;margin-bottom:12px}
.ftr p,.ftr li{font-size:13.5px;color:var(--on-ink-mu)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:7px}
.ftr a:hover{color:#fff}
.ftr .brand{margin-bottom:14px}
.ftr .brand small{color:var(--on-ink-mu)}
.soc{display:flex;gap:10px}
.ftr .soc{margin-top:14px}
.soc a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--tx)}
.soc a:hover{border-color:var(--ac);color:var(--ac)}
.dark .soc a,.ftr .soc a{border-color:var(--ink-line);color:var(--on-ink)}
.dark .soc a:hover,.ftr .soc a:hover{border-color:var(--ac-light);color:var(--ac-light)}
.soc svg{width:15px;height:15px}
.clist .soc-row div{padding-left:32px}
.clist .soc-row .soc{margin-top:6px}
.clist .soc-row .soc svg{color:inherit}
.xm-end .soc a{border-color:rgba(255,255,255,.4);color:#fff}
.ftr .more{color:var(--ac-light)}
.ftr .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:16px calc(24px + env(safe-area-inset-bottom,0px));padding-right:calc(var(--gut) + 64px);border-top:1px solid var(--ink-line);font-size:13px;color:var(--on-ink-mu)}
.credit a{color:var(--on-ink)}

/* whatsapp button */
.wa{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:60;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#1f8f4e;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:transform .2s}
.wa:hover{transform:scale(1.06);color:#fff}
.wa svg{width:24px;height:24px}

/* gentle reveal (visible without JS / reduced motion) */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}}

.center-msg{min-height:50vh;display:grid;place-items:center;text-align:center}
.pagination{display:flex;gap:8px;margin-top:40px}
.pagination .page-numbers{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.pagination .current{border-color:var(--ac);color:var(--ac)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .nav,.hdr .btn{display:none}
  .menu-btn{display:block}
  .min-grid,.min-grid.wide{grid-template-columns:repeat(2,1fr)}
  .connect{grid-template-columns:1fr 1fr}
  .ftr .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:14.5px}
  .hero .wrap,.split,.pastor,.goals,.contact-grid,.layout-side,.band{grid-template-columns:minmax(0,1fr)}
  .collage{grid-template-rows:repeat(2,130px)}
  .band .pic{min-height:240px}
  .band ul{columns:1}
  .meet{grid-template-columns:1fr auto;padding:14px 18px}
  .meet .day{grid-column:1/-1}
  .meet p{grid-column:1/-1}
  .meet .time{grid-row:2;grid-column:2}
  .connect{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .aside-card{position:static}
  .pastor figure{max-width:280px}
  .brand small{display:none}
  .hdr .wrap{height:76px}
  .brand .logo-disc{width:64px;height:64px}
  .pbanner .bg{inset:0}
  .pbanner .bg img{opacity:.3}
}
@media (max-width:480px){
  .min-grid,.min-grid.wide{grid-template-columns:1fr}
  .ftr .cols{grid-template-columns:1fr}
}

/* ---------- tabs (History page / "Page with tabs" template) ---------- */
.tabbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.tab{font:600 13.5px/1.2 var(--b);color:var(--tx);background:var(--card);border:1px solid var(--line);border-radius:99px;padding:10px 16px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.tab:hover{border-color:var(--ac)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.is-tabbed .tabpanel h2{margin-top:0}
.tabnav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.tabnav button{font:600 14px/1.3 var(--b);color:var(--ac);background:none;border:0;padding:6px 0;cursor:pointer;text-align:left}
.tabnav button:hover{color:var(--ac-hover)}
.tabnav .next{margin-left:auto;text-align:right}
@media (max-width:760px){
  .tabbar{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);padding-left:var(--gut);padding-right:var(--gut);scrollbar-width:none}
  .tabbar::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;flex:none}
}
.tabpanel{scroll-margin-top:200px}
@media (max-width:760px){.tabpanel{scroll-margin-top:150px}}

/* ---------- Christmas page (QR code only) ---------- */
.xm-hero,.xm-body{--xm-red:#EE0000;--xm-gold:#FFC000;--xm-orange:#C55A11;--xm-blue:#2E75B6;--xm-night:#0F1A33;--xm-xred:#A3161F;--xm-holly:#1E5631}
.xm-hero{position:relative;overflow:hidden;isolation:isolate;text-align:center;background:radial-gradient(120% 90% at 50% 0%,#24365E 0%,#13203F 55%,#0B1429 100%);padding:clamp(28px,4vw,48px) 0 clamp(200px,21vw,280px)}
.xm-sky,.xm-snow{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.xm-sky{background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent),radial-gradient(1px 1px at 27% 62%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 41% 30%,#F6E3B4 50%,transparent),radial-gradient(1px 1px at 63% 14%,#fff 50%,transparent),radial-gradient(1px 1px at 78% 48%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 88% 22%,#fff 50%,transparent),radial-gradient(1px 1px at 7% 74%,#fff 50%,transparent),radial-gradient(1px 1px at 55% 80%,#fff 50%,transparent),radial-gradient(1px 1px at 94% 66%,#F6E3B4 50%,transparent),radial-gradient(1px 1px at 34% 9%,#fff 50%,transparent);opacity:.7}
.xm-snow::before,.xm-snow::after{content:"";position:absolute;inset:-300px 0 0;background-repeat:repeat}
.xm-snow::before{background-image:radial-gradient(2px 2px at 23px 41px,rgba(255,255,255,.75) 50%,transparent),radial-gradient(1.5px 1.5px at 131px 97px,rgba(255,255,255,.6) 50%,transparent),radial-gradient(2.5px 2.5px at 211px 203px,rgba(255,255,255,.5) 50%,transparent),radial-gradient(1.5px 1.5px at 77px 251px,rgba(255,255,255,.65) 50%,transparent),radial-gradient(2px 2px at 263px 29px,rgba(255,255,255,.5) 50%,transparent);background-size:290px 290px;animation:xm-snow1 22s linear infinite;opacity:.5}
.xm-snow::after{background-image:radial-gradient(1.5px 1.5px at 51px 113px,rgba(255,255,255,.6) 50%,transparent),radial-gradient(3px 3px at 167px 19px,rgba(255,255,255,.35) 50%,transparent),radial-gradient(1.5px 1.5px at 119px 181px,rgba(255,255,255,.55) 50%,transparent),radial-gradient(2px 2px at 13px 199px,rgba(255,255,255,.45) 50%,transparent);background-size:213px 233px;animation:xm-snow2 31s linear infinite;opacity:.4}
@keyframes xm-snow1{to{transform:translate(29px,290px)}}
@keyframes xm-snow2{to{transform:translate(-21px,233px)}}
.xm-star{width:clamp(54px,5.5vw,74px);height:auto;margin:0 auto 12px;display:block;animation:xm-twinkle 4s ease-in-out infinite;transform-origin:50% 38%}
@keyframes xm-twinkle{50%{opacity:.82;transform:scale(.96)}}
.xm-greet{display:flex;align-items:center;justify-content:center;gap:12px;font:italic 400 16px/1.4 var(--d);font-variation-settings:"SOFT" 100,"WONK" 0;color:#E9C77E;margin:0 0 10px;letter-spacing:.01em}
.xm-hero h1{color:var(--xm-red);font-size:clamp(28px,3.8vw,44px);max-width:14em;margin:0 auto}
.xm-hero .lead{font-size:15px;margin:12px auto 0;max-width:52ch;text-wrap:balance;color:var(--on-ink-mu)}
.xm-hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(60px,9vw,130px);display:block}
.xm-body{padding-top:clamp(28px,4vw,48px)}
.xm-content{margin-inline:auto;max-width:680px}
.xm-content .xm-intro{font:400 clamp(17px,1.6vw,19px)/1.6 var(--d);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--tx)}
.xm-content .xm-intro::first-letter{float:left;font-size:2.8em;line-height:.9;margin:.06em .04em 0 0;color:var(--xm-red)}
.xm-content h2{color:var(--xm-red)}
.xm-content h2::before{content:"";display:block;width:18px;height:24px;margin-bottom:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cpath d='M60 4 64 52 112 60 64 68 60 156 56 68 8 60 56 52Z' fill='%23B8893A'/%3E%3C/svg%3E") no-repeat center/contain}
.xm-content blockquote{background:var(--card);border:1px solid var(--line);border-left:3px solid #C9A25B}
/* Colours as in the client's Christmas text (Website.pdf) */
.xm-content>blockquote:first-of-type{background:var(--xm-night);border-color:var(--xm-night);border-left-color:var(--xm-gold)}
.xm-content>blockquote:first-of-type p,.xm-content>blockquote:first-of-type cite{color:var(--xm-gold)}
.xm-content h2:last-of-type+p{color:var(--xm-orange);font:italic 400 17px/1.6 var(--d);font-variation-settings:"SOFT" 100,"WONK" 0}
.xm-content blockquote p{font-size:17.5px}
.xm-content h2{font-size:clamp(21px,2vw,25px)}
.xm-content em{font-style:normal;font-weight:700;color:var(--ac);font-size:.92em;white-space:nowrap}
.xm-content .xm-gifts{list-style:none;padding:0;margin:1.4em 0;display:grid;gap:12px}
.xm-content .xm-gifts li{margin:0;padding:18px 20px 18px 56px;position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.xm-content .xm-gifts li::before{content:"";position:absolute;left:20px;top:20px;width:20px;height:20px;border-radius:5px;background:var(--ac);box-shadow:inset 0 0 0 0 transparent;background-image:linear-gradient(90deg,transparent 8px,#E9C77E 8px,#E9C77E 12px,transparent 12px),linear-gradient(transparent 8px,#E9C77E 8px,#E9C77E 12px,transparent 12px)}
.xm-content .xm-gifts strong{display:block;font:500 16.5px/1.3 var(--d);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--tx);margin-bottom:4px}
.xm-content .xm-prayer{background:var(--card);color:var(--tx);border:1px solid var(--line);border-left:3px solid var(--xm-orange);border-radius:var(--r);padding:clamp(22px,3vw,32px);margin:1.6em 0;position:relative;overflow:hidden}
.xm-content .xm-prayer::after{content:"";position:absolute;right:18px;top:16px;width:26px;height:34px;opacity:.9;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cpath d='M60 4 64 52 112 60 64 68 60 156 56 68 8 60 56 52Z' fill='%23C55A11'/%3E%3C/svg%3E") no-repeat center/contain}
.xm-content .xm-prayer p{color:var(--tx);margin:0 0 .6em}
.xm-content .xm-prayer p:last-child{font:italic 400 17px/1.6 var(--d);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--xm-orange);margin:0}
.xm-content .xm-prayer strong{color:var(--tx);font-weight:600}
.xm-content .xm-sign{text-align:center;margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--line);font:600 15px/1.6 var(--b);letter-spacing:.08em;text-transform:uppercase;color:var(--xm-blue)}
.xm-content .xm-sign strong{display:block;font-weight:700;color:var(--xm-blue);font-size:16px;margin-top:2px}
.xm-end{padding-block:clamp(30px,4vw,44px)}
.xm-end-head{text-align:center;max-width:560px;margin:0 auto}
.xm-end-head .h2{font-size:clamp(20px,2.2vw,24px);margin-bottom:6px}
.xm-end-head .lead{font-size:14.5px;margin:0 auto 14px}
.xm-end-head .btns{justify-content:center}
@media (max-width:760px){.xm-content .xm-gifts li{padding-left:50px}.xm-content .xm-gifts li::before{left:16px}}

/* Traditional Christmas colours: red, holly green, gold */
.xm-holly{width:44px;height:28px;flex:none;display:inline-block}
.xm-greet .xm-holly:last-child{transform:scaleX(-1)}
.xm-content .xm-gifts li::before{background-color:var(--xm-xred)}
.xm-content .xm-gifts li{border-top:3px solid var(--xm-xred)}
.xm-content h2::before{width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M30 24C22 14 12 10 2 12c4 3 3 6 6 7-3 2-1 5 1 7 7 2 15 0 21-2Z' fill='%232D6A3E'/%3E%3Cpath d='M34 24c8-10 18-14 28-12-4 3-3 6-6 7 3 2 1 5-1 7-7 2-15 0-21-2Z' fill='%231E5631'/%3E%3Ccircle cx='27' cy='27' r='4.5' fill='%23C8102E'/%3E%3Ccircle cx='36' cy='27' r='4.5' fill='%23B00E26'/%3E%3Ccircle cx='31.5' cy='21' r='4.5' fill='%23D7263D'/%3E%3C/svg%3E") no-repeat left center/contain;width:36px}
.xm-ribbon{height:14px;background:linear-gradient(var(--xm-gold) 0 2px,var(--xm-xred) 2px 12px,var(--xm-gold) 12px)}
.xm-end{background:radial-gradient(110% 120% at 50% 0%,#B21E26 0%,#8E141B 50%,#6E0E14 100%)}
.xm-end .lead{color:#F6DCDC}
.xm-end .btn{background:#fff;color:#8E141B}
.xm-end .btn:hover{background:var(--xm-gold);color:#3A0A0D}
.xm-end .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.xm-end .clist li{border-color:rgba(255,255,255,.2)}
.xm-end .clist small,.xm-end .clist svg{color:#F6C9C9}
.xm-end-head .xm-holly{width:40px;height:25px;margin:0 auto 6px;display:block}
.xm-content .xm-sign{border-top:0}
.xm-content .xm-sign::before{content:"";display:block;width:64px;height:40px;margin:0 auto 14px;background:inherit;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M30 24C22 14 12 10 2 12c4 3 3 6 6 7-3 2-1 5 1 7 7 2 15 0 21-2Z' fill='%232D6A3E'/%3E%3Cpath d='M34 24c8-10 18-14 28-12-4 3-3 6-6 7 3 2 1 5-1 7-7 2-15 0-21-2Z' fill='%231E5631'/%3E%3Ccircle cx='27' cy='27' r='4.5' fill='%23C8102E'/%3E%3Ccircle cx='36' cy='27' r='4.5' fill='%23B00E26'/%3E%3Ccircle cx='31.5' cy='21' r='4.5' fill='%23D7263D'/%3E%3C/svg%3E") no-repeat center/contain}
@media (max-width:480px){.xm-greet .xm-holly{width:32px;height:20px}.xm-greet{gap:8px;font-size:15px}}
.xm-manger{position:absolute;left:50%;bottom:clamp(8px,1.6vw,22px);width:clamp(260px,28vw,400px);height:auto;transform:translateX(-50%);display:block}