/* ==========================================================================
   Charfield Christian Centre — stylesheet
   Design: warm community café palette, Fraunces + Work Sans
   ==========================================================================
   NOTE: Google Fonts are now loaded via <link> in each page's <head>
   (with preconnect) instead of a CSS @import, which was render-blocking. */

:root{
  /* --- colour tokens: warm café-house palette --- */
  --paper:        #FBF3E7;  /* cream paper background */
  --paper-alt:    #F2E4CE;  /* deeper cream for alternating sections */
  --card:         #FFFCF6;  /* card surface, lifted off paper */
  --ink:          #3B2417;  /* espresso — headings & nav */
  --ink-soft:     #6B5847;  /* soft charcoal-brown — body copy */
  /* Accent pairs. The "-d" shades are the darkest step that reads as the same
     colour as the brand hue but reaches WCAG AA (4.5:1) against --paper and
     --paper-alt, so they carry all text: links, eyebrows, small labels and
     button fills. The plain accents are kept for fills, rules, borders and
     large display type, where the 3:1 large-text threshold applies. */
  --terracotta:   #C1622D;  /* primary accent — coffee/clay (fills, rules, big type) */
  --terracotta-d: #A14F22;  /* AA text-safe accent — links, eyebrows, button fill */
  --terracotta-x: #7E3D18;  /* text/button hover — darker again, so hover still reads */
  --sage:         #6B7F5B;  /* secondary accent — village green (fills, rules, big type) */
  --sage-d:       #56684A;  /* AA text-safe sage — sage button fill and text */
  --sage-x:       #414F36;  /* sage hover shade */
  --honey:        #E3B45C;  /* highlight accent — rules and fills only, never text */
  --honey-d:      #7A5F1A;  /* AA text-safe honey — "when" labels and honey eyebrows */
  --line:         rgba(59,36,23,0.14);
  --shadow:       0 10px 30px rgba(59,36,23,0.10);
  --shadow-sm:    0 4px 14px rgba(59,36,23,0.08);

  /* --- type scale --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Work Sans', system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(2.4rem, 1.4rem + 3.6vw, 3.8rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);

  /* --- spacing scale --- */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5.5rem;

  --radius: 18px;
  --radius-sm: 10px;
  --container: 1180px;
}

/* ---------------------------------- reset ---------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--terracotta-d); text-decoration:none; }
a:hover{ color:var(--terracotta-x); }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.15;
  margin:0 0 var(--sp-2);
  font-weight:600;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ margin:0 0 var(--sp-2); }
ul{ margin:0 0 var(--sp-2); padding-left:1.2em; }
.lead{ font-size:var(--fs-lead); color:var(--ink-soft); }

:focus-visible{ outline:3px solid var(--terracotta); outline-offset:3px; border-radius:4px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

/* [hidden] must win over any display:grid/flex utility class, otherwise
   feature-toggled blocks (SITE_CONFIG in main.js) would stay visible. */
[hidden]{ display:none !important; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper);
  padding:.6em 1em; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------------------------------- layout ---------------------------------- */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 4vw, 2.75rem);
}
.section{ padding-block:var(--sp-6); position:relative; }
.section--alt{ background:var(--paper-alt); }
.section--tight{ padding-block:var(--sp-5); }
.section-head{ max-width:680px; margin-bottom:var(--sp-4); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta-d);
  margin-bottom:var(--sp-1);
}
.eyebrow::before{
  content:""; width:1.4em; height:2px; background:var(--terracotta-d); display:inline-block;
}

/* coffee-ring decorative watermark, used sparingly */
.ring{
  position:absolute; border:2px solid var(--terracotta); border-radius:50%;
  opacity:.07; pointer-events:none;
}

/* ---------------------------------- header / nav ---------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,243,231,0.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:.85rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--ink);
}
.brand small{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.brand svg{ flex-shrink:0; }

.nav-links{
  display:flex; gap:1.4rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  color:var(--ink); font-weight:500; font-size:.9rem; position:relative;
  padding-block:.3rem; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--terracotta); transform:scaleX(0); transition:transform .25s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--terracotta-d); }

.nav-toggle{
  display:none; background:none; border:1.5px solid var(--ink); border-radius:8px;
  padding:.4rem .6rem; cursor:pointer;
}
/* heart icon used for the "Support us" nav item */
.nav-links a.nav-heart{ display:inline-flex; align-items:center; }
.nav-heart svg{ display:block; }
.nav-heart:hover svg path, .nav-heart:focus-visible svg path{ fill:var(--terracotta-d); }
.nav-toggle svg{ display:block; }

@media (max-width: 1100px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:var(--sp-2) clamp(1.25rem,4vw,2.75rem) var(--sp-3);
    gap:var(--sp-2);
    transform-origin:top; transform:scaleY(0); opacity:0; visibility:hidden;
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-links.is-open{ transform:scaleY(1); opacity:1; visibility:visible; }
  .nav-toggle{ display:inline-flex; }
}

/* ---------------------------------- buttons ---------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:.8em 1.6em; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
/* Button fills use the "-d" accents so the cream label clears WCAG AA (4.5:1)
   against them; hovers drop to the even darker "-x" shade, which keeps the
   hover feedback visible now that the resting state is already dark. */
.btn-primary{ background:var(--terracotta-d); color:var(--paper); }
.btn-primary:hover{ background:var(--terracotta-x); transform:translateY(-2px); box-shadow:var(--shadow-sm); color:var(--paper); }
.btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn-sage{ background:var(--sage-d); color:var(--paper); }
.btn-sage:hover{ background:var(--sage-x); color:var(--paper); transform:translateY(-2px); }
.btn-row{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }

/* ---------------------------------- hero ---------------------------------- */
.hero{
  padding-block:var(--sp-6) var(--sp-5);
  overflow:hidden;
  position:relative;
}
.hero .container{
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-5); align-items:center;
}
.hero-art{ display:flex; justify-content:center; }
@media (max-width:860px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:220px; margin-inline:auto; }
}
.hero h1{ margin-bottom:var(--sp-2); }
.hero .lead{ max-width:46ch; }

/* ---------------------------------- menu board (signature component) ---------------------------------- */
.menu-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:var(--sp-3);
}
.menu-card{
  background:var(--card); border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-3) var(--sp-3);
  box-shadow:var(--shadow-sm);
  border-top:5px solid var(--terracotta);
  display:flex; flex-direction:column; gap:.4rem;
}
.menu-card.is-family{ border-top-color:var(--sage); }
.menu-card.is-social{ border-top-color:var(--honey); }
.menu-card.is-evening{ border-top-color:var(--ink); }
.menu-card .when{
  font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--terracotta-d);
}
.menu-card.is-family .when{ color:var(--sage-d); }
.menu-card.is-social .when{ color:var(--honey-d); }
.menu-card.is-evening .when{ color:var(--ink); }
.menu-card .time{ font-weight:500; color:var(--ink-soft); font-size:.92rem; }
.menu-card h3{ margin:.2rem 0 0; }
.menu-card p{ margin:0; font-size:.95rem; }
/* The rotating Friday sessions inside the Friday menu card (index.html). Without
   this the browser's default bullets hang outside the card, because the card is
   a flex column with no list padding of its own. */
.menu-card-list{ list-style:none; padding:0; margin:.1rem 0 .2rem; display:flex; flex-direction:column; gap:.25rem; }
.menu-card-list li{ position:relative; padding-left:1rem; font-size:.95rem; }
.menu-card-list li::before{
  content:"\00b7"; position:absolute; left:.15rem; top:-.05em; color:var(--terracotta-d); font-weight:700;
}
.tag-row{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.3rem; }
.tag{
  font-size:.74rem; font-weight:600; padding:.25em .7em; border-radius:999px;
  background:var(--paper-alt); color:var(--ink-soft);
}

/* ---------------------------------- cards / generic ---------------------------------- */
.card{
  background:var(--card); border-radius:var(--radius); padding:var(--sp-4);
  box-shadow:var(--shadow-sm);
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:780px){ .two-col{ grid-template-columns:1fr; } }

.quote{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem); color:var(--ink);
  border-left:4px solid var(--terracotta); padding-left:var(--sp-3); margin:var(--sp-3) 0;
}
.quote cite{ display:block; margin-top:var(--sp-1); font-style:normal; font-family:var(--font-body); font-size:.85rem; color:var(--ink-soft); }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-4); }
@media (max-width:780px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ background:var(--card); border-radius:var(--radius); padding:var(--sp-3); box-shadow:var(--shadow-sm); }
.pillar .num{ font-family:var(--font-display); font-size:1.6rem; color:var(--terracotta); display:block; margin-bottom:.3rem; }

/* ---------------------------------- widgets: calendar / form / give ---------------------------------- */
.widget-panel{
  background:var(--card); border-radius:var(--radius); padding:var(--sp-4);
  box-shadow:var(--shadow); border:1px solid var(--line);
}
.widget-panel iframe{ width:100%; border:0; border-radius:var(--radius-sm); }
.widget-note{
  font-size:.85rem; color:var(--ink-soft); background:var(--paper-alt);
  border-radius:var(--radius-sm); padding:.8rem 1rem; margin-top:var(--sp-2);
  border-left:3px solid var(--honey);
}

form.contact-form{ display:flex; flex-direction:column; gap:var(--sp-2); }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field label{ font-weight:600; font-size:.9rem; color:var(--ink); }
.field input, .field textarea{
  font-family:var(--font-body); font-size:1rem; padding:.75em .9em;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper);
  color:var(--ink); resize:vertical;
}
.field input:focus, .field textarea:focus{ border-color:var(--terracotta); }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.privacy-note{ font-size:.85rem; color:var(--ink-soft); margin:.2rem 0 0; line-height:1.55; }
.form-status{ font-weight:600; padding-top:.3rem; }
.form-status[data-state="ok"]{ color:var(--sage-d); }
.form-status[data-state="error"]{ color:var(--terracotta-d); }

.give-box{
  background:linear-gradient(135deg, var(--paper-alt), var(--card));
  border-radius:var(--radius); padding:var(--sp-4); box-shadow:var(--shadow-sm);
}
.bank-details{
  font-family:var(--font-body); font-size:.92rem; background:var(--paper);
  border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-3); margin-top:var(--sp-2);
  border:1px dashed var(--line);
}
.bank-details dt{ font-weight:600; color:var(--ink); }
.bank-details dd{ margin:0 0 .5rem; }

/* ---------------------------------- find us ---------------------------------- */
.directions-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.directions-list li{ padding-left:1.6rem; position:relative; }
.directions-list li::before{
  content:"→"; position:absolute; left:0; color:var(--terracotta); font-weight:700;
}
.w3w{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-body);
  font-weight:600; background:var(--paper-alt); padding:.4em .9em; border-radius:999px;
  color:var(--ink); margin-top:.5rem;
}
.w3w b{ color:var(--terracotta-d); }

/* ---------------------------------- footer ---------------------------------- */
.site-footer{
  background:var(--ink); color:#EFE3D4; padding-block:var(--sp-5) var(--sp-3);
}
.site-footer a{ color:#F2D9B3; }
.site-footer a:hover{ color:var(--honey); }
.footer-grid{
  display:grid; grid-template-columns:1.3fr .85fr .85fr .85fr; gap:var(--sp-4);
}
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr; gap:var(--sp-3); } }
.footer-grid h4{ color:#F2D9B3; font-size:1rem; margin-bottom:.6rem; }
.footer-grid p, .footer-grid address{ margin:0 0 .4rem; font-style:normal; font-size:.92rem; }
/* Long email addresses are joined client-side by js/main.js and can overflow
   the single-column footer grid on narrow screens — allow them to wrap. */
.footer-grid a{ overflow-wrap:anywhere; word-break:break-word; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:var(--sp-4); padding-top:var(--sp-2);
  font-size:.8rem; color:#C9B79E; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}

/* ---------------------------------- reveal-on-scroll ---------------------------------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ---------------------------------- page intro band (non-home pages) ---------------------------------- */
.page-intro{ padding-block:var(--sp-5) var(--sp-4); }
.page-intro h1{ margin-bottom:.4rem; }

/* ---------------------------------- social widgets (Facebook / Instagram) ---------------------------------- */
.social-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-3); align-items:start; }
@media (max-width:780px){ .social-grid{ grid-template-columns:1fr; } }
.fb-embed-wrap{ display:flex; justify-content:center; overflow:hidden; border-radius:var(--radius-sm); }
/* Single-widget state — while the Instagram grid is switched off (SITE_CONFIG
   in js/main.js) the Facebook panel would sit in the left column of .social-grid
   with an empty column beside it, so js/main.js adds this class to let the
   widget that is actually there span the full row. */
.social-grid--single{ grid-template-columns:1fr; }
/* LightWidget grid. The panel ships empty and hidden, and the <iframe> is only
   built once SITE_CONFIG.lightWidgetId holds a real widget ID. */
.ig-embed-wrap{ overflow:hidden; border-radius:var(--radius-sm); }
.ig-embed-wrap .lightwidget-widget{ width:100%; border:0; overflow:hidden; }
.social-follow-card{
  height:100%; display:flex; flex-direction:column; justify-content:center; gap:.6rem;
  text-align:center; align-items:center; padding:var(--sp-3);
}
.social-follow-card .ig-icon{ margin-bottom:.2rem; }
.social-follow-card h3{ margin-bottom:0; }

.footer-social{ display:flex; gap:.7rem; margin-top:var(--sp-2); }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  transition:background-color .18s ease, transform .18s ease;
}
.footer-social a:hover{ background:var(--terracotta); transform:translateY(-2px); }
.footer-social svg{ width:18px; height:18px; }

/* ---------------------------------- gallery ---------------------------------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:var(--sp-3);
}
/* Tiles are <figure>s (or <button>s) that behave like a clickable card, so the
   reset below matters: without margin:0 the browser's default figure margin
   (16px block / 40px inline) both insets grid tiles inside their tracks and
   pushed the activity-card thumbnails 40px out of the card. */
.gallery-item{
  cursor:pointer; border:none; background:none; padding:0; margin:0; text-align:left;
  font-family:var(--font-body); color:inherit;
}
.gallery-photo{
  aspect-ratio:4/3; border-radius:var(--radius-sm); display:flex; align-items:center;
  justify-content:center; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.gallery-photo img{ width:100%; height:100%; object-fit:cover; }

/* Poster / flyer tiles: the printed sheets are portrait (roughly A4), so the
   generic 4/3 crop would slice the headline off — this variant keeps the full
   sheet shape. Used by the "Posters & flyers" section in gallery.html. */
.gallery-grid--posters{ grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); }
.gallery-photo--poster{ aspect-ratio:5/7; }
.gallery-item figcaption{ margin-top:.55rem; font-size:.9rem; font-weight:600; color:var(--ink); }
.gallery-item .hint{ display:block; font-size:.78rem; font-weight:500; color:var(--ink-soft); margin-top:.1rem; }
.gallery-item:hover .gallery-photo, .gallery-item:focus-visible .gallery-photo{
  outline:3px solid var(--terracotta); outline-offset:2px;
}

/* Lightbox triggers used outside the gallery grid: activity-card thumbnails
   (.gallery-item--thumb) and in-page posters (.gallery-item--sheet). They
   behave exactly like a gallery tile - click, or press Enter, to open the
   overlay - but keep the size the surrounding content expects. */
.gallery-item--thumb{ display:block; width:100%; }
.gallery-photo--thumb{ aspect-ratio:auto; height:180px; margin-bottom:1rem; }
.gallery-item--sheet{ display:block; max-width:340px; margin:var(--sp-3) auto; }
.gallery-item--sheet figcaption{ text-align:center; }
.pattern-1{ background:linear-gradient(135deg, var(--terracotta), var(--honey)); }
.pattern-2{ background:linear-gradient(135deg, var(--sage), #3c4a31); }
.pattern-3{ background:linear-gradient(135deg, var(--honey), var(--terracotta-d)); }
.pattern-4{ background:linear-gradient(135deg, var(--ink), var(--ink-soft)); }
.pattern-5{ background:linear-gradient(135deg, var(--sage-d), var(--honey)); }
.pattern-6{ background:linear-gradient(135deg, var(--terracotta-d), var(--ink)); }
.pattern-7{ background:linear-gradient(135deg, var(--ink-soft), var(--sage)); }
.pattern-8{ background:linear-gradient(135deg, var(--honey), var(--sage-d)); }

.lightbox{
  position:fixed; inset:0; background:rgba(59,36,23,.88); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:var(--sp-3);
}
.lightbox[hidden]{ display:none; }
.lightbox-content{
  max-width:min(90vw,760px); max-height:90vh; background:var(--card);
  border-radius:var(--radius); padding:var(--sp-3); overflow:auto; position:relative;
  /* extra top room so the close button sits on the dialog chrome, not on the photo */
  padding-top:3rem;
}
.lightbox-content .gallery-photo{ aspect-ratio:auto; width:100%; height:min(58vh,500px); }
.lightbox-content img{ width:100%; max-height:58vh; object-fit:contain; border-radius:var(--radius-sm); }
/* ...and give portrait posters the extra height back, so the whole sheet fits. */
.lightbox-content .gallery-photo--poster{ height:auto; }
.lightbox-content .gallery-photo--poster img{ max-height:66vh; }
.lightbox-caption{ margin:var(--sp-2) 0 0; font-weight:600; color:var(--ink); text-align:center; }

/* Print / download row under the enlarged image. It starts out hidden via the
   [hidden] attribute and is only revealed by js/main.js once there is an image
   to act on, so it never appears as an empty strip. */
.lightbox-actions{
  display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap;
  margin-top:var(--sp-2);
}
.lightbox-actions .btn{ padding:.5rem .9rem; font-size:.9rem; }
.lightbox-close{
  /* Inside the dialog's own padding ring rather than hanging off the corner:
     .lightbox-content scrolls (overflow:auto) for tall posters on short
     viewports, and a negatively-offset child would create scrollbars and get
     its top edge clipped. Same placement at every breakpoint. */
  position:absolute; top:8px; right:8px; width:38px; height:38px; border-radius:50%;
  background:var(--ink); color:var(--paper); border:none; font-size:1.3rem; line-height:1;
  cursor:pointer; box-shadow:var(--shadow-sm);
}
/* The close button's own top padding is already reserved in .lightbox-content,
   so nothing extra is needed at small widths. */

/* Printing a poster: js/main.js adds .is-printing-poster to <body> when a
   visitor clicks "Print this poster" in the overlay, so the printout is the
   sheet they were looking at and nothing else from the page. The class is
   dropped again on afterprint (and when the overlay closes). */
@media print{
  @page{ size:A4 portrait; margin:10mm; }
  /* an overlay that happens to be open must not land on a normal printout */
  .lightbox{ display:none !important; }
  body.is-printing-poster > *{ display:none !important; }
  body.is-printing-poster #lightbox{
    display:flex !important; position:static; inset:auto; background:none; padding:0;
  }
  body.is-printing-poster .lightbox-content{
    max-width:none; max-height:none; overflow:visible; background:none;
    box-shadow:none; border-radius:0; padding:0; text-align:center;
  }
  body.is-printing-poster .lightbox-close,
  body.is-printing-poster .lightbox-actions{ display:none !important; }
  body.is-printing-poster .lightbox-content .gallery-photo{ height:auto; box-shadow:none; }
  body.is-printing-poster .lightbox-content img{
    width:auto; max-width:100%; max-height:250mm !important; border-radius:0;
  }
  body.is-printing-poster .lightbox-caption{ margin-top:6mm; font-size:12pt; }
}

/* ---------------------------------- history timeline ---------------------------------- */
.timeline{ list-style:none; margin:var(--sp-3) 0 0; padding:0; max-width:760px; }
.timeline-item{
  position:relative; padding-left:var(--sp-4); padding-bottom:var(--sp-4); border-left:2px solid var(--line);
}
.timeline-item:last-child{ border-left-color:transparent; padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px;
  border-radius:50%; background:var(--terracotta); border:3px solid var(--paper);
}
.timeline-item h3{ margin-bottom:.3rem; }
.timeline-item p{ margin:0; }

/* ---------------------------------- team profiles ---------------------------------- */
.team-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:var(--sp-3);
}
.team-card{
  background:var(--card); border-radius:var(--radius); padding:var(--sp-4);
  box-shadow:var(--shadow-sm);
}
.team-card h3{ margin-bottom:.2rem; }
.team-role{
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--terracotta-d); margin-bottom:var(--sp-2);
}
.team-card p:last-child{ margin-bottom:0; }

/* ==========================================================================
   Refactor utilities — classes extracted from inline styles (site-wide)
   ========================================================================== */

/* --- brand logo (inside shared header partial) --- */
.brand-logo{ border-radius:4px; object-fit:cover; }

/* --- hero (index) --- */
.hero-art{ display:flex; justify-content:center; max-width:400px; width:100%; }
.hero-img{
  border-radius:var(--radius); box-shadow:var(--shadow);
  width:100%; object-fit:cover; aspect-ratio:4/3;
}
.hero-ring-lg{ width:380px; height:380px; top:-120px; right:-120px; }
.hero-ring-sm{ width:200px; height:200px; bottom:-60px; left:8%; border-color:var(--sage); }

/* --- content images --- */
.card-img-thumb{ border-radius:var(--radius-sm); width:100%; height:140px; object-fit:cover; margin-bottom:.5rem; }
.card-img-thumb--tall{ border-radius:var(--radius-sm); width:100%; height:180px; object-fit:cover; margin-bottom:1rem; }
.page-img{ border-radius:var(--radius); width:100%; object-fit:cover; box-shadow:var(--shadow-sm); }
.page-img--250{ border-radius:var(--radius); width:100%; max-height:250px; object-fit:cover; box-shadow:var(--shadow-sm); }
.page-img--200{ border-radius:var(--radius); width:100%; max-height:200px; object-fit:cover; box-shadow:var(--shadow-sm); margin-bottom:1rem; }
.page-img-wrap{ margin-top:1.5rem; margin-bottom:1.5rem; }

/* --- intro band (vision / history two-column hero) --- */
.intro-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:var(--sp-4); align-items:center; }
@media (max-width:780px){ .intro-grid{ grid-template-columns:1fr; } }
.intro-photo-wrap{ max-width:320px; width:100%; }
@media (max-width:780px){ .intro-photo-wrap{ max-width:100%; margin-inline:auto; } }

/* --- typography width helpers --- */
.lead--narrow{ max-width:60ch; }
.lead--wide{ max-width:64ch; }
.quote--wide{ max-width:760px; }
.lead--mid{ max-width:760px; margin-top:var(--sp-3); }
.quote--flush{ margin:0; }
.quote--bare{ border-left:none; padding-left:0; margin:0 0 var(--sp-3); }

/* --- section head spacing helper --- */
.section-head--gap{ margin-top:var(--sp-5); margin-bottom:var(--sp-3); }

/* --- layout alignment helpers --- */
.two-col--center{ align-items:center; }
.two-col--start{ align-items:start; }
.two-col--stretch{ align-items:stretch; }
.btn-row--center{ justify-content:center; }
.btn--mt{ margin-top:var(--sp-2); }
.card--mb{ margin-bottom:var(--sp-3); }
.card--flush p{ margin:0; }
.p--flush{ margin:0; }

/* --- centered / constrained cards --- */
.card--center{ text-align:center; }
.card--center-680{ text-align:center; max-width:680px; margin-inline:auto; }
.card--center-720{ text-align:center; max-width:720px; margin-inline:auto; }
.card--wide{ max-width:800px; }

/* --- widget panels --- */
.widget-panel--flush{ padding:0; overflow:hidden; }
.widget-note--wide{ margin-top:var(--sp-4); max-width:760px; }
.card--scroll{ overflow-x:auto; }

/* --- activity table (weekly-activities) --- */
.activity-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.activity-table th{
  text-align:left; padding:.6rem 1rem .6rem 0; color:var(--ink); font-family:var(--font-display);
}
.activity-table tr.head{ border-bottom:2px solid var(--line); }
.activity-table th + th{ padding-left:1rem; }
.activity-table th:last-child{ padding-right:0; }
.activity-table td{ padding:.65rem 1rem .65rem 0; border-bottom:1px solid var(--line); }
.activity-table td + td{ padding-left:1rem; }
.activity-table td:last-child{ padding-right:0; }
.activity-table tr:last-child td{ border-bottom:none; }
.activity-table tr.alt{ background:var(--paper-alt); }
.activity-table .day-name{ font-weight:600; }
.activity-table .day-sun, .activity-table .day-mon{ color:var(--terracotta-d); }
.activity-table .day-tue{ color:var(--sage-d); }
.activity-table .day-bible{ color:var(--ink); }
.activity-table .day-fri{ color:var(--honey-d); }
.activity-table .day-occ{ color:var(--ink-soft); }
/* "See the poster" link inside the activity table's Activity column — sits on
   its own line under the activity name so the table stays scannable. */
.table-poster-link{
  display:block; font-family:var(--font-body); font-size:.8rem; font-weight:600;
  color:var(--terracotta-d); text-decoration:underline; margin-top:.15rem;
}
.table-poster-link:hover{ color:var(--terracotta-x); }

/* --- eyebrow color/margin helpers (weekly-activities cards) --- */
.eyebrow--sage{ color:var(--sage-d); }
.eyebrow--ink{ color:var(--ink); }
.eyebrow--honey{ color:var(--honey-d); }
.eyebrow--mt{ margin-top:.5rem; }

/* --- card stacks (weekly-activities equal-height cards) --- */
.card-stack{ display:flex; flex-direction:column; justify-content:space-between; height:100%; border-top:5px solid var(--terracotta); }
.card-stack--sage{ border-top:5px solid var(--sage); }
.card-stack--ink{ border-top:5px solid var(--ink); }
.card-stack--honey{ border-top:5px solid var(--honey); }

/* --- statement of faith list (vision) --- */
.faith-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.faith-list li{ padding-left:1.6rem; position:relative; }
.faith-star{ position:absolute; left:0; color:var(--terracotta); font-weight:700; }

/* --- ticked list (support-us: Gift Aid benefits / volunteer ideas) --- */
.check-list{ list-style:none; padding:0; margin:0 0 var(--sp-2); display:flex; flex-direction:column; gap:.5rem; }
.check-list li{ position:relative; padding-left:1.6rem; }
.check-list li::before{ content:"\2713"; position:absolute; left:0; color:var(--sage-d); font-weight:700; }

/* --- directions list margin helper (find-us) --- */
.directions-list--mb{ margin-bottom:1.5rem; }
.directions-list--flush{ margin-bottom:0; }
.extra-mt{ margin-top:var(--sp-3); }