:root{
  /* Surfaces — crisp white. Three tones kept a few points apart so the page
     still has rhythm; the two below white are near-neutral, because a warm
     cream reads as yellowed once it sits beside true white. */
  --paper:#ffffff;
  --paper-alt:#f7f7f5;
  --paper-deep:#ededea;

  /* Ink — near-black, neutralised. The old warm brown-black was tuned to
     cream and reads muddy against true white. Not pure black: that is harsh
     at this contrast. */
  --ink:#1b1b1d;
  --ink-dim:rgba(27,27,29,0.78);
  --ink-faint:rgba(27,27,29,0.62);

  /* Brass, deepened for light grounds. The original #bea35e falls below 4.5:1
     on every paper tone; this holds 4.95:1 even on the deepest. */
  --accent:#7a6230;
  --accent-line:rgba(122,98,48,0.34);
  --accent-hair:rgba(122,98,48,0.16);

  /* Dark panels — the hero and the gender-based violence section, where text
     sits over photography. Those sections redefine the ink and accent
     variables locally, so their descendants need no special-casing. */
  --granite:#171614;
  --on-dark:#f2ece0;
  --on-dark-dim:rgba(242,236,224,0.78);
  --on-dark-faint:rgba(242,236,224,0.55);
  --brass-light:#cbb072;

  --warning:#a8442a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'EB Garamond',Georgia,serif;
  /* 400 on paper. The old 500 existed only to stop light serif text blooming
     against a dark ground; on a light ground it just reads heavy. */
  font-weight:400;
  font-size:19px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- utility ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:'Jost',sans-serif;
  font-weight:400;
  font-size:12px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--accent);
}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.15}
h2{font-size:clamp(30px,4vw,44px);margin:14px 0 20px}
h3{font-size:24px;margin-bottom:8px}
.rule{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:0 auto;
}
.rule::before,.rule::after{
  content:"";height:1px;width:64px;background:var(--accent-line);
}

/* ---------- header ---------- */
header{
  /* A dark bar at the top of a light page. The same local-variable flip the
     hero and witness section use, so brand, nav and toggle follow along. */
  --ink:var(--on-dark);
  --ink-dim:var(--on-dark-dim);
  --ink-faint:var(--on-dark-faint);
  --accent:var(--brass-light);
  --accent-hair:rgba(203,176,114,0.20);
  position:sticky;top:0;z-index:20;
  background:rgba(23,22,20,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(203,176,114,0.20);
}
/* Phone and tablet: brand left, toggle right, on one row.
   Desktop: the brand takes a row of its own and the menu sits beneath it.
   Previously both shared a row, and between 900px and 1100px the name broke
   over four lines, the header grew to 253px and the page scrolled sideways. */
/* Column is the default and the phone layout overrides downward, rather than
   pairing min-width:821px with max-width:820px. At a fractional viewport such
   as 820.5 neither of those matched, and the header fell back to no layout at
   all: the menu ran to 880px and the page scrolled sideways. */
.nav{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:14px 24px 12px;max-width:1180px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.brand svg{flex:none}
.brand img{width:60px;height:60px;flex:none;display:block;object-fit:contain}
.brand-name{
  font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;letter-spacing:0.02em;
  color:var(--ink);white-space:nowrap;
}
.brand-sub{
  font-family:'Jost',sans-serif;font-size:10px;letter-spacing:0.28em;
  text-transform:uppercase;color:var(--ink-faint);display:block;margin-top:2px;
  white-space:nowrap;
}
nav.menu{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
nav.menu a{
  font-family:'Jost',sans-serif;font-size:12px;font-weight:400;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-dim);
  white-space:nowrap;
}
nav.menu a:hover{color:var(--accent)}
nav.menu a.active{color:var(--accent)}

/* ---------- mobile menu toggle ---------- */
.menu-toggle{
  display:none;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
  width:34px;height:34px;
  border:none;background:none;cursor:pointer;padding:0;
}
.menu-toggle span{
  display:block;width:24px;height:1.5px;background:var(--ink-dim);
  transition:transform .25s,opacity .25s,width .25s;
}
.menu-toggle[aria-expanded="true"] span{width:24px}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:820px){
  .menu-toggle{display:flex}
  .nav{flex-direction:row;justify-content:space-between;gap:16px;padding:10px 24px}
  .brand{gap:11px}
  .brand img{width:44px;height:44px}
  .brand-name{font-size:18px}
  .brand-sub{font-size:8.5px;letter-spacing:0.14em}
  nav.menu{
    display:none;
    flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(23,22,20,0.985);
    border-bottom:1px solid var(--accent-hair);
  }
  nav.menu.open{display:flex}
  nav.menu a{
    padding:18px 24px;
    border-top:1px solid var(--accent-hair);
  }
}

/* ---------- hero ---------- */
.hero{
  /* A dark panel on a light site. Redefining the ink and accent variables here
     flips every descendant — epigraph, buttons — without touching their rules. */
  --ink:var(--on-dark);
  --ink-dim:var(--on-dark-dim);
  --ink-faint:var(--on-dark-faint);
  --accent:var(--brass-light);
  --accent-line:rgba(203,176,114,0.34);
  --accent-hair:rgba(203,176,114,0.16);
  color:var(--on-dark);
  position:relative;
  min-height:92vh;
  min-height:92svh; /* excludes mobile browser chrome; ignored by browsers without svh */
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
  /* The photograph is already dark where the epigraph falls (mean luminance 73,
     only 7% of pixels above 180), so the scrim can be light and still hold the
     text well clear of contrast limits. */
  background:
    radial-gradient(ellipse 130% 90% at 50% 50%, transparent 45%, rgba(20,19,17,0.32) 100%),
    linear-gradient(180deg, rgba(23,22,20,0.45) 0%, rgba(23,22,20,0.22) 40%, rgba(23,22,20,0.30) 70%, rgba(20,19,17,0.66) 100%),
    url('images/St.Georges-hero.jpg') center 45%/cover no-repeat,
    #171614;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0.5;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="240" height="240" filter="url(%23g)" opacity="0.06"/></svg>');
}
.hero-inner{position:relative;z-index:2;max-width:760px;padding:120px 24px 100px}

/* On a phone the 16:9 photo can only fill a 1:2 screen by throwing away ~70% of
   its width. A shorter hero lets more of the building show, and the focal point
   is aimed at the church rather than the middle of the frame.
   Layer order for background-position: radial gradient, linear gradient, photo. */
@media(max-width:359px){
  .brand img{width:38px;height:38px}
  .brand-name{font-size:16.5px;white-space:normal}
  .brand-sub{display:none}
  .nav{padding:10px 16px}
}

@media(max-width:820px){
  .hero{
    min-height:62vh;
    min-height:62svh;
    background-position:0 0, 0 0, 38% 45%;
  }
  .hero-inner{padding:72px 24px 64px}
}
.epigraph{
  /* Two layers: a tight dark halo that protects the glyphs where the photo is
     bright, plus a wider soft one. This does the work a heavy scrim used to,
     locally, so the photograph itself can stay light. */
  text-shadow:0 1px 10px rgba(0,0,0,0.78), 0 2px 30px rgba(0,0,0,0.55);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:400;
  font-size:clamp(28px,4.6vw,46px);
  line-height:1.3;
  color:var(--ink);
}
.hero-ctas{margin-top:44px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;position:relative;
  font-family:'Jost',sans-serif;font-size:12.5px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  padding:15px 34px;
  border-radius:14px;
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 8px 24px rgba(0,0,0,0.25);
  transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-solid{
  background:linear-gradient(160deg, rgba(212,180,120,0.55), rgba(190,163,94,0.42));
  color:#1a1815;
  border:1px solid rgba(255,255,255,0.3);
}
.btn-solid:hover{
  background:linear-gradient(160deg, rgba(236,228,212,0.65), rgba(190,163,94,0.48));
  color:#1a1815;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 10px 28px rgba(0,0,0,0.3);
}
.btn-ghost{
  background:rgba(236,228,212,0.06);
  border:1px solid rgba(255,255,255,0.18);
  color:var(--ink-dim);
}
.btn-ghost:hover{
  background:rgba(236,228,212,0.12);
  border-color:rgba(255,255,255,0.32);
  color:var(--ink);
}

/* ---------- open hours ---------- */
.open{
  border-top:1px solid var(--accent-hair);
  border-bottom:1px solid var(--accent-hair);
  background:var(--paper-alt);
  text-align:center;
  padding:70px 24px;
}
.open h2{margin-top:16px}
.open p{max-width:620px;margin:18px auto 0;color:var(--ink-dim)}
.open .lead{
  margin-top:26px;
  font-size:clamp(17.5px,2vw,19.5px);
  line-height:1.75;
  color:var(--ink);
}
.open .hours{
  margin-top:26px;
  font-family:'Jost',sans-serif;font-size:13px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink);
}

/* ---------- services ---------- */
.services{padding:100px 0;text-align:center}
.services-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  max-width:820px;margin:48px auto 0;text-align:center;
}
@media(max-width:680px){.services-grid{grid-template-columns:1fr}}
.service-col h3{
  font-style:italic;font-weight:500;color:var(--accent);
  border-bottom:1px solid var(--accent-hair);
  padding-bottom:14px;margin-bottom:26px;
}
.service{margin-bottom:26px}
.service .time{
  font-family:'Jost',sans-serif;font-size:13px;letter-spacing:0.2em;
  color:var(--ink-faint);text-transform:uppercase;
}
.service .name{
  font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;
  margin:4px 0 2px;
}
.service .note{font-style:italic;color:var(--ink-dim);font-size:17px}
.services .links{margin-top:44px;display:flex;gap:36px;justify-content:center;flex-wrap:wrap}
.services .links a{
  font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.2em;text-transform:uppercase;
  border-bottom:1px solid var(--accent-line);padding-bottom:5px;
}

/* ---------- gender-based violence ---------- */
/* The photo carries a heavy scrim: parchment text needs the ground held near
   granite for contrast, and the candle should read as a lit point, not a
   picture competing with the prayer. */
.witness{
  /* Black ground, white copy, gold accents. No photograph behind it: the
     subject is better served by plain black than by atmosphere. */
  --ink:#ffffff;
  --ink-dim:rgba(255,255,255,0.82);
  --ink-faint:rgba(255,255,255,0.62);
  --accent:#d4af37;
  --accent-line:rgba(212,175,55,0.38);
  --accent-hair:rgba(212,175,55,0.18);
  color:#ffffff;
  border-top:1px solid rgba(212,175,55,0.25);
  border-bottom:1px solid rgba(212,175,55,0.25);
  padding:100px 0;
  text-align:center;
  background:#000000;
}
.witness-ribbon{
  display:block;width:68px;height:auto;margin:0 auto 24px;
}
.witness h2{margin-top:16px}
.witness .rule{margin-bottom:28px}
.witness-lead{
  max-width:620px;margin:0 auto;
  color:var(--ink-dim);
}
.witness-lead + .witness-lead{margin-top:16px}

.witness-prayer{
  max-width:660px;
  margin:46px auto 0;
  border:1px solid var(--accent-line);
  background:rgba(255,255,255,0.035);
  padding:44px 44px 38px;
  text-align:left;
}
.witness-prayer h3{
  text-align:center;
  font-size:27px;
  color:var(--accent);
  margin-bottom:26px;
}
.witness-prayer p{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-size:21px;
  line-height:1.62;
  color:var(--ink);
  margin-bottom:16px;
}
.witness-prayer .amen{
  text-align:center;
  font-style:italic;
  color:var(--accent);
  margin:24px 0 0;
}

.witness-help{
  max-width:820px;
  margin:46px auto 0;
  padding-top:32px;
  border-top:1px solid var(--accent-hair);
}
.witness-help h3{
  font-size:21px;
  color:var(--ink);
}
.witness-help > p{
  max-width:560px;margin:10px auto 0;
  color:var(--ink-dim);
  font-size:17.5px;
}
.witness-lines{
  display:flex;gap:40px;justify-content:center;flex-wrap:wrap;
  margin-top:28px;
}
.witness-lines div{text-align:center}
.witness-lines .line-name{
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--ink-faint);
}
.witness-lines .line-number{
  font-family:'Cormorant Garamond',serif;font-size:25px;
  margin-top:4px;
}
.witness-lines .line-note{
  font-size:15px;color:var(--ink-dim);margin-top:2px;
}
.witness-callback{
  margin-top:28px;
  font-size:16px;
  color:var(--ink-faint);
}

@media(max-width:820px){
  .witness{padding:76px 0}
  .witness-prayer{padding:34px 26px 30px}
  .witness-prayer p{font-size:20px}
  .witness-lines{gap:28px}
}

/* ---------- clergy ---------- */
.clergy{padding:100px 0;text-align:center}
.clergy-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:48px;
  margin-top:52px;text-align:left;max-width:760px;margin-left:auto;margin-right:auto;
}
@media(max-width:680px){.clergy-grid{grid-template-columns:1fr;max-width:420px}}
.clergy-card{display:flex;gap:24px;align-items:center}
.clergy-photo{
  width:96px;height:96px;flex:none;overflow:hidden;
  border:1px solid var(--accent-line);border-radius:50%;
}
.clergy-photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block;
  transform:scale(1.8);transform-origin:50% 10%;
}
/* Photos already cropped to head-and-shoulders need no zoom; the scale above
   is there to pull faces out of full-length shots. */
.clergy-photo.is-portrait img{
  object-position:50% 50%;transform:none;
}
.clergy-name{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--ink)}
.clergy-role{
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--accent);margin-top:6px;
}
.clergy-contact{margin-top:12px;color:var(--ink-dim);font-size:15.5px}

/* ---------- story ---------- */
.story{
  background:var(--paper-deep);
  border-top:1px solid var(--accent-hair);
  border-bottom:1px solid var(--accent-hair);
  padding:100px 0;
}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:820px){.story-grid{grid-template-columns:1fr}}
.story-photo{
  --ink-faint:var(--on-dark-faint);
  aspect-ratio:4/5;
  /* Shows only until the photo loads; a paper tone rather than the old dark
     one, so a lazy image does not flash a black rectangle on a light page. */
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(122,98,48,0.10), transparent 70%),
    linear-gradient(160deg,#f2f2f0 0%,#e6e6e2 100%);
  border:1px solid var(--accent-line);
  display:flex;align-items:flex-end;justify-content:center;
  position:relative;overflow:hidden;
}
.story-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:1;
  filter:brightness(1.05) contrast(1.02);
}
.story-photo::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top, rgba(20,18,15,0.85) 0%, transparent 30%);
}
.story-photo::after{
  content:"";position:absolute;inset:0;z-index:3;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="240" height="240" filter="url(%23g)" opacity="0.07"/></svg>');
}
.story-photo span{
  position:relative;z-index:4;margin-bottom:22px;
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.26em;
  text-transform:uppercase;color:var(--ink-faint);
}
.story-copy p{color:var(--ink-dim);margin-bottom:18px}
.story-copy .drop::first-letter{
  font-family:'Cormorant Garamond',serif;
  float:left;font-size:66px;line-height:0.85;
  padding:6px 12px 0 0;color:var(--accent);
}
.story-copy a{
  font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.2em;text-transform:uppercase;
  border-bottom:1px solid var(--accent-line);padding-bottom:5px;
}
.centenary{
  margin-top:28px;padding-top:22px;border-top:1px solid var(--accent-hair);
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;color:var(--accent);
}

/* ---------- parish life ---------- */
.life{padding:100px 0;text-align:center}
.life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px;text-align:left}
@media(max-width:820px){.life-grid{grid-template-columns:1fr}}
.card{
  border:1px solid var(--accent-hair);
  background:var(--paper-alt);
  padding:40px 32px;
  transition:border-color .3s;
  overflow:hidden;
}
.card:hover{border-color:var(--accent-line)}
.card.has-photo{padding:0}
.card-photo{aspect-ratio:16/10}
.card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:32px 32px 40px}
.card .eyebrow{font-size:11px}
.card h3{margin-top:12px}
.card p{color:var(--ink-dim);font-size:17.5px;margin-top:8px}
.card a{
  display:inline-block;margin-top:20px;
  font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;
  border-bottom:1px solid var(--accent-line);padding-bottom:4px;
}

/* ---------- prayer ---------- */
.prayer{
  border-top:1px solid var(--accent-hair);
  background:var(--paper-alt);
  padding:80px 0;
  text-align:center;
}
.prayer h2{margin-top:16px}
.prayer > .wrap > p{max-width:600px;margin:22px auto 0;color:var(--ink-dim)}
.prayer-contacts{
  display:flex;gap:56px;justify-content:center;flex-wrap:wrap;
  margin-top:38px;
}
.prayer-contacts p{color:var(--ink-dim);font-size:17px;line-height:1.9}

/* ---------- visit ---------- */
.visit{
  background:var(--paper);
  border-top:1px solid var(--accent-hair);
  padding:100px 0;
}
.visit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:48px}
@media(max-width:820px){.visit-grid{grid-template-columns:1fr}}
.visit h2{text-align:center}
.visit .eyebrow{display:block;text-align:center}
.visit-col h3{font-style:italic;color:var(--accent);font-size:21px;margin-bottom:12px}
.visit-col p{color:var(--ink-dim);font-size:18px}
.visit-col a{display:block;margin-top:4px}

.visit-photo{
  margin-top:48px;
  aspect-ratio:21/9;
  overflow:hidden;
  border:1px solid var(--accent-hair);
}
.visit-photo img{width:100%;height:100%;object-fit:cover;display:block}

.visit-map{
  margin-top:48px;
  border:1px solid var(--accent-hair);
  background:var(--paper-deep);
}
.visit-map iframe{
  display:block;width:100%;
  filter:grayscale(0.25) sepia(0.08) contrast(1.02);
}
.visit-map .map-link{
  display:block;text-align:center;padding:16px 24px;
  font-family:'Jost',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  border-top:1px solid var(--accent-hair);
}

/* ---------- interior page header (non-homepage pages) ---------- */
.page-header{
  padding:76px 24px 60px;text-align:center;
  border-bottom:1px solid var(--accent-hair);
  background:var(--paper-alt);
}
.page-header h1{font-size:clamp(34px,5vw,52px);margin:14px 0 16px}
.page-header p{max-width:600px;margin:0 auto;color:var(--ink-dim);font-size:19px}

/* ---------- resources / downloads ---------- */
.resources-section{padding:76px 0}
.resources-section.alt{background:var(--paper-alt);border-top:1px solid var(--accent-hair);border-bottom:1px solid var(--accent-hair)}
.resources-section h2{text-align:center}
.resources-section > .wrap > p.eyebrow{display:block;text-align:center}
.resource-list{list-style:none;max-width:760px;margin:40px auto 0}
.resource-item{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:22px 0;
  border-bottom:1px solid var(--accent-hair);
}
.resource-item:first-child{border-top:1px solid var(--accent-hair)}
.resource-item .title{
  font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;
}
.resource-item .meta{
  font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:4px;
}
.resource-item .download{
  flex:none;
  font-family:'Jost',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  border:1px solid var(--accent-line);
  padding:10px 20px;
  transition:border-color .25s,color .25s;
}
.resource-item .download:hover{border-color:var(--accent);color:var(--ink)}
.prose{max-width:680px;margin:24px auto 0;color:var(--ink-dim)}
.prose p{margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.ingredient-list{
  list-style:none;max-width:480px;margin:28px auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;
}
@media(max-width:520px){.ingredient-list{grid-template-columns:1fr}}
.ingredient-list li{
  color:var(--ink-dim);font-size:17.5px;padding-left:18px;position:relative;
}
.ingredient-list li::before{
  content:"";position:absolute;left:0;top:11px;width:6px;height:6px;
  background:var(--accent);border-radius:50%;
}
.crest-layout{
  display:grid;grid-template-columns:140px 1fr;gap:40px;align-items:start;
  max-width:820px;margin:24px auto 0;
}
.crest-layout .prose{max-width:none;margin:0}
.crest-image{width:100%}
.crest-image img{width:100%;height:auto;display:block}
@media(max-width:640px){
  .crest-layout{grid-template-columns:1fr;justify-items:center;text-align:center}
  .crest-image{max-width:120px}
}
.empty-state{
  max-width:760px;margin:40px auto 0;
  text-align:center;font-style:italic;color:var(--ink-faint);
  padding:32px 24px;border:1px dashed var(--accent-hair);
}
/* ---------- hire fees ---------- */
.venue-fee{
  max-width:760px;margin:34px auto 0;text-align:center;
  font-family:'Cormorant Garamond',serif;font-size:22px;
}
.venue-fee strong{font-weight:600;color:var(--accent)}
.venue-fee a{
  display:block;margin-top:12px;
  font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.2em;
  text-transform:uppercase;
}
.fee{
  font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;
  color:var(--accent);white-space:nowrap;
}
.fee-note{
  max-width:700px;margin:32px auto 0;text-align:center;
  color:var(--ink-dim);font-size:17.5px;
}

.resource-item.event-item{align-items:flex-start}
.event-poster{flex:none;width:120px;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--accent-line);display:block}
.event-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s}
.event-poster:hover img{opacity:.82}
/* landscape artwork (e.g. sponsor thank-you boards) */
.event-poster.wide{width:280px;aspect-ratio:16/9}
@media(max-width:620px){
  .resource-item.event-item{flex-wrap:wrap}
  .event-poster.wide{width:100%}
}

/* ---------- weekly calendar ---------- */
.week-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  max-width:980px;margin:40px auto 0;
  background:var(--accent-hair);border:1px solid var(--accent-hair);
}
.week-day{background:var(--paper-alt);padding:20px 14px}
.week-day .day-name{
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
.week-day .day-event{margin-bottom:14px}
.week-day .day-event:last-child{margin-bottom:0}
.week-day .day-event .time{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--ink)}
.week-day .day-event .what{
  font-family:'Jost',sans-serif;font-size:11.5px;line-height:1.4;
  color:var(--ink-dim);margin-top:2px;
}
.week-day .none{font-family:'Jost',sans-serif;font-size:11.5px;font-style:italic;color:var(--ink-faint)}
@media(max-width:860px){.week-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.week-grid{grid-template-columns:1fr}}

.key-dates{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;max-width:760px;margin:44px auto 0}
.date-badge{display:flex;align-items:center;gap:16px;border:1px solid var(--accent-line);padding:16px 20px}
.date-badge .date-box{flex:none;width:60px;text-align:center;border:1px solid var(--accent-line);padding:8px 0}
.date-badge .date-box .mon{
  display:block;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--accent);
}
.date-badge .date-box .day{display:block;font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--ink);line-height:1.2}
.date-badge .info .title{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600}
.date-badge .info .meta{font-family:'Jost',sans-serif;font-size:11.5px;color:var(--ink-faint);margin-top:2px}

/* ---------- ladies fellowship ---------- */
.section-intro{max-width:620px;margin:16px auto 0;text-align:center;color:var(--ink-dim)}
.fellowship-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:640px;margin:40px auto 0}
@media(max-width:560px){.fellowship-grid{grid-template-columns:1fr}}
.fellowship-grid .photo{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--accent-hair)}
.fellowship-grid .photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- photo gallery ---------- */
.photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:40px auto 0}
@media(max-width:820px){.photo-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.photo-gallery{grid-template-columns:1fr}}
.photo-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--accent-hair);display:block;transition:transform .3s}
.photo-gallery img:hover{transform:scale(1.02)}

/* ---------- recorded services (youtube) ---------- */
.watch-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px;
  max-width:820px;margin:40px auto 0;text-align:left;
}
@media(max-width:680px){.watch-grid{grid-template-columns:1fr}}
.watch-card{
  border:1px solid var(--accent-hair);background:var(--paper);
  transition:border-color .3s;overflow:hidden;
}
.watch-card:hover{border-color:var(--accent-line)}
.watch-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--paper-deep)}
.watch-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.watch-thumb .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(23,22,20,0.72);border:1px solid var(--accent-line);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s;
}
.watch-card:hover .play{background:rgba(23,22,20,0.9)}
.watch-card .body{padding:22px 24px}
.watch-card .title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600}
.watch-card .meta{
  font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-faint);margin:6px 0 16px;
}
.watch-card .watch-link{
  font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  border-bottom:1px solid var(--accent-line);padding-bottom:4px;
}

/* Centred link closing a section — e.g. "subscribe" under the recordings grid. */
.section-cta{text-align:center;margin-top:44px}
.section-cta a{
  font-family:'Jost',sans-serif;font-size:12.5px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  border-bottom:1px solid var(--accent-line);padding-bottom:5px;
}

/* ---------- footer ---------- */
footer{
  background:var(--paper-alt);
  border-top:1px solid var(--accent-hair);
  padding:56px 24px 48px;
  text-align:center;
}
footer .fine{
  font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-faint);line-height:2.3;
}
footer .fine a{color:var(--ink-dim)}
footer .fine a:hover{color:var(--accent)}

/* Social links sit above the fine print: brass-outlined discs, quiet until hovered. */
.social{
  display:flex;justify-content:center;gap:14px;
  margin:0 0 32px;
}
.social a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--accent-hair);
  color:var(--ink-faint);
  transition:border-color .2s ease,color .2s ease;
}
.social a:hover{border-color:var(--accent-line);color:var(--accent)}
/* currentColor lets the disc and the glyph shift together on hover */
.social svg{width:19px;height:19px;fill:currentColor}

/* ---------- venue booking ---------- */
.venue-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:820px;margin:40px auto 0;
}
@media(max-width:680px){.venue-gallery{grid-template-columns:1fr}}
.venue-gallery .placeholder{
  aspect-ratio:4/3;
  border:1px dashed var(--accent-hair);
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-style:italic;color:var(--ink-faint);font-size:14px;
  padding:16px;
}
.venue-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  max-width:820px;margin:40px auto 0;text-align:center;
}
@media(max-width:680px){.venue-facts{grid-template-columns:1fr}}
.venue-facts .fact .label{
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--ink-faint);
}
.venue-facts .fact .value{
  font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;
  color:var(--accent);margin-top:8px;
}

.booking-form{max-width:640px;margin:48px auto 0}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:680px){.form-grid-2{grid-template-columns:1fr}}
.form-row{margin-bottom:22px}
.form-row label{
  display:block;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;background:var(--paper-deep);border:1px solid var(--accent-line);
  color:var(--ink);padding:12px 14px;
  font-family:'EB Garamond',serif;font-size:16px;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{outline:none;border-color:var(--accent-line)}
.form-row textarea{resize:vertical;min-height:110px}
.fee-summary{
  margin:0 0 22px;padding:24px 26px;
  background:var(--paper-deep);border:1px solid var(--accent-line);
}
.fee-summary[hidden]{display:none}
.fee-summary-head{
  font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px;
}
.fee-summary-list > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:9px 0;
}
.fee-summary-list dt{font-size:16.5px;color:var(--ink-dim)}
.fee-summary-list dt span{
  display:block;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ink-dim);margin-top:3px;
}
.fee-summary-list dd{
  font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;
  white-space:nowrap;
}
.fee-summary-sub{border-top:1px solid var(--accent-hair)}
.fee-summary-total{
  border-top:1px solid var(--accent-line);
}
.fee-summary-total dt{color:var(--ink)}
.fee-summary-total dd{font-size:26px;color:var(--accent)}
.fee-summary-note{
  margin-top:16px;font-size:14px;font-style:italic;color:var(--ink-dim);
}

.form-note{
  font-size:14px;color:var(--ink-faint);font-style:italic;margin-top:-6px;margin-bottom:22px;
}
.form-error{
  font-size:13px;color:var(--warning);font-style:italic;margin-top:8px;
}
.form-error[hidden]{display:none}
.form-row input.invalid{border-color:var(--warning)}
.form-submit{border:none;cursor:pointer}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- touch targets ----------
   On touch devices every tappable control gets at least 44px of height,
   the point below which taps start missing. Applied by pointer type rather
   than width so it also covers tablets and touch laptops. */
@media (pointer:coarse),(max-width:820px){
  .menu-toggle{flex:none;width:44px;height:44px;margin-right:-5px}

  .services .links a,
  .card a,
  .story-copy a,
  .watch-card .watch-link,
  .visit-col a,
  .prayer-contacts a,
  .life-grid .card a,
  footer .fine a{
    display:inline-flex;align-items:center;min-height:44px;
  }

  .resource-item .download{
    display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;
  }

  /* phone and email links are the ones people actually tap on a phone */
  a[href^="tel:"],
  a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:44px;
  }

  /* footer sits on one line per link; keep the rhythm tight despite the taller hit area */
  footer .fine{line-height:1.6}
  footer .fine a{padding:0 2px}
}