/* ==========================================================================
   THE KEEP — PARISH TEMPLATE
   --------------------------------------------------------------------------
   HOW BRANDING WORKS
   The two variable colours, --green and --brass, are overwritten at runtime
   by functions.php using values from The Parish. Everything else is fixed.
   Do not edit this file for a client. Ever. If you find yourself wanting to,
   the thing you want is a new setting, not a fork.
   ========================================================================== */

/* ==========================================================================
   THE KEEP — PARISH TEMPLATE
   Preview build. Every colour below is a per-site variable: change these
   six values and the whole site rebrands. Nothing else needs touching.
   ========================================================================== */
:root{
  --ink:#191B1A;        /* hymn board black, body text */
  --lime:#F2F3EF;       /* limewash walls, page background */
  --chalk:#FFFFFF;
  --green:#2E4739;      /* liturgical green, the parish accent */
  --green-dk:#22352B;
  --brass:#A6873C;      /* altar brass, used sparingly */
  --stone:#E4E4DD;
  --quiet:#6B7069;
  --rule:#D5D6CD;
  --measure:66ch;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* Long unbroken strings must never widen the page.
   An email address or a hyphenated surname is one unbreakable word to the
   layout engine, and inside a grid track it sets the track's minimum width.
   This, plus minmax(0,1fr) on every single-column stack below, is what stops
   a phone scrolling sideways. Do not remove either without the other. */
h1,h2,h3,p,li,dt,dd,td,th,a,figcaption{overflow-wrap:break-word;}
body{margin:0;background:var(--lime);color:var(--ink);
  font-family:'Public Sans',system-ui,sans-serif;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:'Newsreader',Georgia,serif;font-weight:500;margin:0;
  letter-spacing:-0.01em;line-height:1.12;}
h1{font-size:clamp(38px,6vw,64px);}
h2{font-size:clamp(27px,3.4vw,38px);}
h3{font-size:20px;}
p{margin:0 0 16px;}
a{color:var(--green);}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;}
.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(20px,4vw,36px);}
.sec{padding-block:clamp(48px,7vw,88px);}
.narrow{max-width:var(--measure);}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--quiet);margin:0 0 14px;}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--lime);
  padding:12px 18px;z-index:99;}
.skip:focus{left:16px;top:16px;}

/* ---------- top bar: the one thing a visitor always wants ---------- */
.bar{background:var(--green-dk);color:var(--chalk);font-size:15px;}
.bar .wrap{display:flex;gap:10px 28px;flex-wrap:wrap;
  align-items:center;justify-content:space-between;padding-block:10px;}
.bar-in{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.bar strong{font-weight:600;}
.bar a{color:var(--chalk);}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--rule);background:var(--lime);
  position:sticky;top:0;z-index:20;}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:16px;}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);}
.mark svg{height:38px;width:auto;color:var(--green);}
.mark b{font-family:'Newsreader',serif;font-size:23px;font-weight:500;
  letter-spacing:-.01em;display:block;line-height:1.1;}
.mark span{font-size:12.5px;color:var(--quiet);letter-spacing:.05em;}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
nav a{font-size:15.5px;text-decoration:none;color:var(--ink);}
nav a:hover{color:var(--green);text-decoration:underline;text-underline-offset:4px;}

/* ==========================================================================
   MOBILE MENU
   --------------------------------------------------------------------------
   Above 860px the menu is the row above and the button below is hidden.
   Below it, the row becomes a full-screen panel: one item per line, type
   large enough to read without glasses, and every row at least 56px tall so
   it can be hit with a thumb. Six links wrapped onto three lines at 14px is
   not a menu for this congregation.

   The button is labelled "Menu" on purpose. Three unlabelled lines are a
   convention younger users have learned and older users have not.
   ========================================================================== */
.nav-toggle{display:none;}
.nav-panel-head{display:none;}

@media(max-width:860px){

  .nav-toggle{
    display:inline-flex;align-items:center;gap:10px;
    background:none;border:2px solid var(--ink);border-radius:3px;
    color:var(--ink);font:inherit;font-size:16px;font-weight:600;
    padding:10px 15px;min-height:48px;cursor:pointer;
  }
  .nav-toggle-bars{
    display:block;width:21px;height:15px;position:relative;flex:none;
  }
  .nav-toggle-bars span{
    position:absolute;left:0;right:0;height:2.5px;background:currentColor;
    border-radius:2px;transition:transform .2s ease,opacity .2s ease;
  }
  .nav-toggle-bars span:nth-child(1){top:0;}
  .nav-toggle-bars span:nth-child(2){top:6.25px;}
  .nav-toggle-bars span:nth-child(3){bottom:0;}

  /* Open state: the three bars become a cross, so the button reads as the
     way back out as well as the way in. */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){
    transform:translateY(6.25px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){
    opacity:0;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){
    transform:translateY(-6.25px) rotate(-45deg);
  }

  .nav-panel{
    position:fixed;inset:0;z-index:60;
    background:var(--lime);
    display:flex;flex-direction:column;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
    transform:translateY(-100%);visibility:hidden;
    transition:transform .26s ease,visibility .26s ease;
  }
  .nav-is-open .nav-panel{transform:none;visibility:visible;}

  /* No transition for anyone who has asked the OS for less movement. */
  @media(prefers-reduced-motion:reduce){
    .nav-panel{transition:none;}
    .nav-toggle-bars span{transition:none;}
  }

  .nav-panel-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;padding:16px clamp(20px,4vw,36px);
    border-bottom:1px solid var(--rule);
  }
  .nav-panel-title{
    font-family:'Newsreader',Georgia,serif;font-size:20px;
    line-height:1.15;color:var(--ink);min-width:0;
  }
  .nav-close{
    display:inline-flex;align-items:center;gap:9px;flex:none;
    background:none;border:2px solid var(--ink);border-radius:3px;
    color:var(--ink);font:inherit;font-size:16px;font-weight:600;
    padding:10px 15px;min-height:48px;cursor:pointer;
  }
  .nav-close svg{width:15px;height:15px;}

  .nav-panel ul{
    display:block;flex:1 1 auto;
    padding:8px clamp(20px,4vw,36px) 40px;
  }
  .nav-panel li{border-bottom:1px solid var(--rule);}
  .nav-panel li:last-child{border-bottom:0;}
  .nav-panel a{
    display:flex;align-items:center;min-height:56px;
    padding:14px 0;
    font-family:'Newsreader',Georgia,serif;
    font-size:clamp(25px,6.2vw,31px);line-height:1.2;
    letter-spacing:-.01em;color:var(--ink);text-decoration:none;
  }
  .nav-panel a:hover,.nav-panel a:focus-visible{
    color:var(--green);text-decoration:none;
  }
  .nav-panel .current-menu-item > a{color:var(--green);font-weight:600;}

  /* Nothing behind the panel may scroll while it is open. */
  html.nav-is-open,body.nav-is-open{overflow:hidden;}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(44px,6vw,76px) clamp(30px,4vw,48px);}
.hero h1{max-width:16ch;}
.hero p{font-size:clamp(18px,2vw,21px);max-width:52ch;color:var(--quiet);
  margin-top:20px;}

/* A photograph beside the welcome, shaped like an arch.
   Only appears when the parish has supplied one in The Parish; without it
   the hero stays exactly as it was, words alone. */
.hero-top{display:grid;grid-template-columns:1.35fr .65fr;
  gap:clamp(30px,4.5vw,64px);align-items:center;}
.hero-words{min-width:0;}
.hero-words h1{max-width:18ch;}
.hero-has-photo .times{margin-top:clamp(30px,4vw,46px);}
.hero-arch{position:relative;border-radius:1000px 1000px 4px 4px;
  overflow:hidden;aspect-ratio:3/4;background:var(--stone);}
.hero-arch-img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:860px){
  .hero-top{grid-template-columns:minmax(0,1fr);gap:26px;}
  .hero-arch{aspect-ratio:16/10;border-radius:220px 220px 4px 4px;
    max-height:230px;order:-1;}
}

/* ==========================================================================
   THE HYMN BOARD — the signature element.
   Every English parish church has one: a dark board with slotted numerals
   showing this week's hymns. Here it carries this Sunday's services.
   ========================================================================== */
.board{background:var(--ink);color:var(--lime);border-radius:3px;
  padding:clamp(22px,3vw,32px);box-shadow:0 2px 0 rgba(0,0,0,.25);
  border:1px solid #2C2E2C;}
.board-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;border-bottom:1px solid #3A3D39;
  padding-bottom:14px;margin-bottom:8px;}
.board-head h2{color:var(--lime);font-size:clamp(22px,2.6vw,28px);}
.board-head span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:#8E948B;}
.slot{display:grid;grid-template-columns:auto 1fr auto;gap:18px;
  align-items:baseline;padding-block:15px;border-bottom:1px solid #2C2E2C;}
.slot:last-child{border-bottom:0;}
.slot-time{font-family:'Newsreader',serif;font-size:clamp(26px,3vw,34px);
  font-weight:500;color:var(--chalk);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;}
.slot-name{font-size:17px;color:var(--lime);}
.slot-note{font-size:14px;color:#9BA298;}
.slot-where{font-size:13.5px;color:#9BA298;text-align:right;}
@media(max-width:620px){
  .slot{grid-template-columns:minmax(0,1fr);gap:2px;}
  .slot-where{text-align:left;}
}

/* ---------- welcome ---------- */
.welcome{border-top:1px solid var(--rule);}
.welcome-grid{display:grid;grid-template-columns:1.3fr 1fr;
  gap:clamp(28px,5vw,60px);align-items:start;}
@media(max-width:820px){.welcome-grid{grid-template-columns:minmax(0,1fr);}}
.photo{background:var(--stone);aspect-ratio:4/3;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  color:var(--quiet);font-size:13px;text-align:center;padding:20px;}

/* ---------- notices ---------- */
.notices{background:var(--chalk);border-block:1px solid var(--rule);}
.notice-list{display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:26px;}
.notice{background:var(--chalk);padding:22px 24px;display:grid;
  grid-template-columns:110px 1fr;gap:20px;}
@media(max-width:620px){.notice{grid-template-columns:minmax(0,1fr);gap:4px;}}
.notice-date{font-size:13.5px;font-weight:600;color:var(--brass);
  letter-spacing:.04em;text-transform:uppercase;padding-top:3px;}
.notice h3{margin-bottom:4px;}
.notice p{margin:0;font-size:16px;color:var(--quiet);}

/* ---------- life events ---------- */
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;}
@media(max-width:820px){.events{grid-template-columns:minmax(0,1fr);}}
.event{border:1px solid var(--rule);background:var(--chalk);padding:26px;
  display:flex;flex-direction:column;}
.event h3{margin-bottom:8px;}
.event p{font-size:16px;color:var(--quiet);flex:1;}
.event a{font-weight:600;text-decoration:none;font-size:15.5px;
  border-bottom:2px solid var(--brass);padding-bottom:2px;align-self:flex-start;}

/* ---------- hall ---------- */
.hall{background:var(--green);color:var(--chalk);}
.hall h2{color:var(--chalk);}
.hall p{color:#C9D6CD;}
.hall .eyebrow{color:#9DB3A5;}
.hall-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,56px);
  align-items:center;}
@media(max-width:820px){.hall-grid{grid-template-columns:minmax(0,1fr);}}
/* .btn is the DARK-BAND button: pale on green or slate. On a light
   background use .btn-dark instead, or the two invert and you get a white
   button with dark text sitting in a dark rectangle. */
.btn{display:inline-block;background:var(--chalk);color:var(--green-dk);
  padding:14px 26px;text-decoration:none;font-weight:600;font-size:16px;
  border-radius:2px;border:0;cursor:pointer;}
.btn-dark{display:inline-block;background:var(--green);color:var(--chalk);
  padding:14px 26px;text-decoration:none;font-weight:600;font-size:16px;
  border-radius:2px;border:0;cursor:pointer;}
.btn-dark:hover{opacity:.9;}
.btn:hover{opacity:.9;}

/* ==========================================================================
   SAFEGUARDING — required on the front page by the Parish Safeguarding
   Handbook. In the WordPress build this block cannot be deleted or moved.
   ========================================================================== */
.safe{border:2px solid var(--ink);background:var(--chalk);
  padding:clamp(24px,3vw,34px);display:grid;
  grid-template-columns:auto 1fr;gap:24px;align-items:start;}
@media(max-width:620px){.safe{grid-template-columns:minmax(0,1fr);gap:14px;}}
.safe svg{width:38px;height:38px;color:var(--ink);flex-shrink:0;}
.safe h2{font-size:24px;margin-bottom:8px;}
.safe p{margin-bottom:8px;max-width:60ch;}
.safe .who{font-weight:600;}
/* The safeguarding officer's email is the longest unbreakable string on any
   parish site. Break it anywhere rather than let it push the page wider. */
.safe a{overflow-wrap:anywhere;}

/* ---------- footer ----------
   width:100% and clear are deliberate. Without a <main> wrapper closing
   the content above it, the footer inherits the reading column's width and
   renders as a dark rectangle mid-page. The templates are fixed, but this
   makes the failure impossible rather than merely unlikely. */
footer{background:var(--ink);color:#A8ADA5;padding-block:44px 36px;
  font-size:15px;width:100%;clear:both;display:block;}
footer h3{color:var(--lime);font-size:17px;margin-bottom:10px;}
footer a{color:var(--lime);}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
@media(max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr);gap:26px;}}
.foot-base a{color:#C6CCC4;text-decoration:none;
  border-bottom:1px solid #4A4F49;padding-bottom:1px;}
.foot-base a:hover{color:var(--lime);border-bottom-color:var(--brass);}
.foot-base{border-top:1px solid #2F322E;margin-top:34px;padding-top:20px;
  font-size:13.5px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;}

/* ---------- WordPress specifics ---------- */
.photo-img{width:100%;height:auto;border-radius:2px;object-fit:cover;aspect-ratio:4/3;}
.hall .photo-img{aspect-ratio:1/1;}
.prose h2{margin:34px 0 12px;}
.prose h3{margin:26px 0 8px;}
.prose ul,.prose ol{padding-left:22px;margin-bottom:16px;}
.prose li{margin-bottom:6px;}
.prose img{margin:24px 0;border-radius:2px;}
.prose blockquote{border-left:3px solid var(--brass);margin:24px 0;
  padding-left:20px;font-family:'Newsreader',serif;font-size:20px;}
.prose table{border-collapse:collapse;width:100%;margin:24px 0;font-size:16px;}
.prose th,.prose td{border:1px solid var(--rule);padding:10px 12px;text-align:left;}
.prose th{background:var(--stone);font-weight:600;}
.wp-block-file{margin:20px 0;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

@media print{
  .bar,.mast nav,.hall .photo-img{display:none;}
  body{background:#fff;font-size:12pt;}
  .board{background:#fff;color:#000;border:1px solid #000;}
  .board-head h2,.slot-time,.slot-name{color:#000;}
}

/* ==========================================================================
   0.2.0 ADDITIONS
   ========================================================================== */

/* ---------- crest or logo ---------- */
.crest{height:38px;width:auto;max-width:120px;object-fit:contain;color:var(--green);}
img.crest{height:auto;max-height:52px;}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:26px;margin-top:30px;}
.person{display:flex;gap:16px;align-items:flex-start;}
/* A 4:5 portrait rather than a square. A square crop on a head and
   shoulders photograph cuts the top of the head and widens the face. */
.person-photo{width:78px;height:98px;flex-shrink:0;
  border-radius:999px 999px 3px 3px;object-fit:cover;object-position:center 30%;
  background:var(--stone);}
.person-initials{display:flex;align-items:center;justify-content:center;
  font-family:'Newsreader',serif;font-size:27px;color:var(--green);
  background:var(--stone);}
.person-name{font-size:18px;margin:0 0 2px;}
.person-open{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--green);border-bottom:1.5px solid var(--brass);}
.person-role{font-size:14.5px;color:var(--quiet);margin:0 0 6px;}
.person-contact{font-size:14.5px;margin:0 0 4px;}
.person-note{font-size:13.5px;color:var(--quiet);margin:0;}

.person-modal[hidden]{display:none;}
.person-modal{position:fixed;inset:0;z-index:200;display:flex;
  align-items:center;justify-content:center;padding:24px;}
.person-modal-back{position:absolute;inset:0;background:rgba(25,27,26,.6);}
.person-modal-box{position:relative;background:var(--chalk);max-width:560px;
  width:100%;max-height:86vh;overflow-y:auto;padding:32px;border-radius:3px;}
.person-modal-x{position:absolute;top:10px;right:14px;background:none;border:0;
  font-size:28px;line-height:1;color:var(--quiet);cursor:pointer;}
.person-modal-photo{width:104px;height:130px;object-fit:cover;
  object-position:center 30%;border-radius:999px 999px 3px 3px;
  margin-bottom:16px;}

/* ---------- groups ---------- */
.groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:28px;}
.group{background:var(--chalk);padding:24px;}
.group h3{margin-bottom:6px;}
.group-when{font-size:14px;font-weight:600;color:var(--brass);
  letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;}
.group p{font-size:15.5px;color:var(--quiet);margin:0 0 6px;}

/* ---------- facilities ---------- */
.facilities{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 0;}
.facilities li{font-size:14.5px;background:var(--stone);padding:6px 14px;border-radius:2px;}

/* ---------- appeal ---------- */
.appeal{border:2px solid var(--brass);padding:clamp(24px,3vw,34px);}
.appeal-bar{height:12px;background:var(--stone);margin:18px 0 10px;overflow:hidden;}
.appeal-bar span{display:block;height:100%;background:var(--brass);}
.appeal-fig{font-family:'Newsreader',serif;font-size:clamp(24px,3vw,32px);
  font-variant-numeric:tabular-nums;}
.appeal-fig small{font-size:16px;color:var(--quiet);font-family:'Public Sans',sans-serif;}

/* ---------- documents ---------- */
.docs{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--rule);}
.docs li{border-bottom:1px solid var(--rule);padding:16px 0;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;}
.docs a{font-weight:600;text-decoration:none;}
.docs a:hover{text-decoration:underline;text-underline-offset:3px;}
.docs .doc-date{font-size:14px;color:var(--quiet);}

/* ==========================================================================
   NEWS
   --------------------------------------------------------------------------
   All of the "design flare" lives here rather than in anything the client
   does. They write a headline and some paragraphs; the template supplies
   the masthead, the drop capital, the pulled-out images and the big quotes.
   ========================================================================== */

.news-head{background:var(--stone);padding-block:clamp(40px,6vw,72px) clamp(30px,4vw,48px);
  border-bottom:1px solid var(--rule);}
.news-kicker{font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 16px;display:flex;gap:10px;align-items:center;}
.news-kicker a{color:var(--green);text-decoration:none;font-weight:600;}
.news-head h1{max-width:19ch;font-size:clamp(34px,5.4vw,58px);}
.news-standfirst{font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:var(--quiet);
  max-width:46ch;margin:20px 0 0;font-family:'Newsreader',Georgia,serif;}

/* Lead image sits full width, breaking out of the page rhythm. */
.news-lead{margin:0;}
/* Held to a 16:7 band rather than a share of the viewport height. 62vh
   filled most of a laptop screen before a single word appeared, which made
   the scroll to reach the writing far too long. */
.news-lead img{width:100%;height:auto;aspect-ratio:16/7;max-height:380px;
  object-fit:cover;object-position:center 45%;display:block;}
@media(max-width:700px){
  .news-lead img{aspect-ratio:16/9;max-height:260px;}
}
.news-lead figcaption{max-width:1080px;margin:10px auto 0;
  padding-inline:clamp(20px,4vw,36px);font-size:14px;color:var(--quiet);}

/* The reading column. Deliberately narrow. */
.news-body{max-width:60ch;margin:clamp(36px,5vw,56px) auto 0;font-size:18px;
  line-height:1.72;}

/* Drop capital on the opening paragraph. Automatic, so it is always right. */
.news-body > p:first-of-type::first-letter{
  font-family:'Newsreader',Georgia,serif;float:left;font-size:4.1em;
  line-height:.82;padding:.06em .09em 0 0;color:var(--green);font-weight:500;}
.news-body > p:first-of-type{font-size:19.5px;}

.news-body h2{font-size:clamp(24px,2.8vw,31px);margin:44px 0 12px;}
.news-body h3{font-size:20px;margin:32px 0 8px;}

/* Images inside the text break out wider than the column. */
.news-body figure,
.news-body .wp-block-image{margin:38px 0;width:min(88vw,880px);
  margin-left:50%;transform:translateX(-50%);}
.news-body figure img,
.news-body .wp-block-image img{width:100%;height:auto;border-radius:2px;}
.news-body figcaption{font-size:14px;color:var(--quiet);margin-top:10px;
  text-align:center;}

/* Quotes become the visual break in a long piece. */
.news-body blockquote{border:0;border-top:2px solid var(--brass);
  border-bottom:2px solid var(--brass);padding:26px 0;margin:40px 0;
  font-family:'Newsreader',Georgia,serif;font-size:clamp(21px,2.5vw,27px);
  line-height:1.42;color:var(--ink);text-align:center;}
.news-body blockquote p:last-child{margin-bottom:0;}
.news-body blockquote cite{display:block;font-family:'Public Sans',sans-serif;
  font-size:15px;font-style:normal;color:var(--quiet);margin-top:14px;}

/* Embedded video sits at the wider measure too. */
.news-body .wp-block-embed{margin:38px 0;width:min(88vw,880px);
  margin-left:50%;transform:translateX(-50%);}
.news-body .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;}

.news-body ul,.news-body ol{padding-left:24px;}
.news-body li{margin-bottom:8px;}

/* Extra room under the last paragraph, since the back link has gone. */
.news-body{padding-bottom:clamp(20px,3vw,30px);}

@media(max-width:700px){
  .news-body figure,.news-body .wp-block-image,
  .news-body .wp-block-embed{width:100%;margin-left:0;transform:none;}
  .news-body > p:first-of-type::first-letter{font-size:3.4em;}
}

/* ---------- news cards ---------- */
.news-head-row{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;flex-wrap:wrap;margin-bottom:8px;}
.news-all{font-weight:600;text-decoration:none;font-size:15.5px;
  border-bottom:2px solid var(--brass);padding-bottom:2px;}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px;}
.news-grid-wide{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
@media(max-width:820px){.news-grid{grid-template-columns:minmax(0,1fr);}}
.news-card{text-decoration:none;color:inherit;display:block;}
/* WordPress prints width and height attributes on every image, and its
   default stylesheet adds height:auto, which beats aspect-ratio and lets a
   portrait photograph stretch the card. Locking both dimensions here means
   the card is the same size whatever anyone uploads. */
.news-card-img{display:block;width:100%;aspect-ratio:3/2;
  height:auto;object-fit:cover;object-position:center;
  border-radius:2px;background:var(--stone);overflow:hidden;}
img.news-card-img{max-width:100%;}
.news-card-blank{background:var(--stone);}
.news-card-date{display:block;font-size:13.5px;color:var(--brass);
  letter-spacing:.05em;text-transform:uppercase;font-weight:600;margin:14px 0 4px;}
.news-card h3{font-size:20px;margin-bottom:6px;}
.news-card p{font-size:15.5px;color:var(--quiet);margin:0;}
.news-card:hover h3{color:var(--green);}

.pager{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap;}
.pager .page-numbers{padding:8px 14px;border:1px solid var(--rule);
  text-decoration:none;font-size:15px;}
.pager .page-numbers.current{background:var(--ink);color:var(--lime);
  border-color:var(--ink);}

/* ==========================================================================
   NEWS ARCHIVE
   Three sizes on purpose: one lead, then a pair, then a list. A page of
   identical cards reads as a database; three sizes reads as a publication.
   ========================================================================== */

.archive-head{background:var(--stone);border-bottom:1px solid var(--rule);
  padding-block:clamp(36px,5vw,60px) clamp(28px,4vw,44px);}
.archive-head h1{max-width:18ch;font-size:clamp(30px,4.6vw,48px);}

.lead-wrap{padding-block:clamp(36px,5vw,56px) 22px;}
/* An even split, using the same gap as the cards below, so the middle
   edge of the lead lines up exactly with the gap between the pair. An
   uneven split looked better in isolation and wrong on the page. */
.lead{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  align-items:center;text-decoration:none;color:inherit;}
@media(max-width:820px){.lead{grid-template-columns:minmax(0,1fr);gap:18px;}}
.lead-img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;
  object-position:center;border-radius:2px;background:var(--stone);display:block;}
.lead-body h2{font-size:clamp(25px,3.1vw,34px);margin:6px 0 12px;max-width:20ch;}
.lead-standfirst{font-family:'Newsreader',Georgia,serif;font-size:clamp(17px,1.9vw,20px);
  line-height:1.5;color:var(--quiet);margin:0 0 16px;}
.lead-more{font-weight:600;font-size:15.5px;color:var(--green);
  border-bottom:2px solid var(--brass);padding-bottom:2px;}
.lead:hover h2{color:var(--green);}

/* Same 22px gap as the lead above, so both rows share a column edge. */
.pair-wrap{padding-bottom:clamp(30px,4vw,44px);}
.pair-wrap .cards{gap:22px;margin-top:0;}
.news-grid-two{grid-template-columns:repeat(2,1fr);margin-top:0;}
@media(max-width:820px){.news-grid-two{grid-template-columns:minmax(0,1fr);}}

.archive-rest{border-top:1px solid var(--rule);}
.news-list{list-style:none;padding:0;margin:22px 0 0;}
.news-list li{border-bottom:1px solid var(--rule);}
.news-list a{display:flex;justify-content:space-between;gap:20px;
  align-items:baseline;padding:18px 0;text-decoration:none;color:inherit;
  flex-wrap:wrap;}
.news-list a:hover .news-list-title{color:var(--green);}
.news-list-title{font-family:'Newsreader',Georgia,serif;font-size:20px;
  font-weight:500;letter-spacing:-.01em;}
.news-list-date{font-size:14px;color:var(--quiet);white-space:nowrap;}

/* ==========================================================================
   ROOMS FOR HIRE
   --------------------------------------------------------------------------
   FIXES the white-on-white bug: these cards sit inside .hall, which sets all
   text to chalk. Everything below re-states its own colour explicitly rather
   than inheriting, so the cards read correctly on the green band.
   ========================================================================== */

.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:22px;margin-top:28px;align-items:stretch;}

.room-card{background:var(--chalk);border-radius:2px;overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease;}
.room-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.18);}
@media(prefers-reduced-motion:reduce){
  .room-card{transition:none;} .room-card:hover{transform:none;}
}

.room-card-img{display:block;width:100%;aspect-ratio:3/2;height:auto;
  object-fit:cover;object-position:center;background:var(--stone);}
.room-card-blank{background:var(--stone);}

.room-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;
  flex:1;}

/* Explicit colours. Do not let these inherit from .hall. */
.hall .room-card h3,
.room-card h3{color:var(--ink);font-size:20px;margin:0 0 6px;}
.hall .room-card .room-meta,
.room-card .room-meta{color:var(--brass);font-size:13.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px;}
.hall .room-card .room-summary,
.room-card .room-summary{color:var(--quiet);font-size:15.5px;line-height:1.6;
  margin:0 0 16px;flex:1;}
.hall .room-card .room-more,
.room-card .room-more{color:var(--green);font-size:15px;font-weight:600;
  margin-top:auto;}
.room-card:hover h3{color:var(--green);}

/* ---------- single room ---------- */
.room-hero img{width:100%;height:auto;aspect-ratio:16/7;max-height:360px;
  object-fit:cover;display:block;}
.room-head{padding-block:clamp(32px,4.5vw,52px) clamp(20px,3vw,30px);}
.room-head h1{max-width:16ch;}
.room-head .eyebrow a{color:var(--quiet);text-decoration:none;}
.room-standfirst{font-family:'Newsreader',Georgia,serif;
  font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:var(--quiet);
  max-width:48ch;margin:16px 0 0;}

.room-grid{display:grid;grid-template-columns:1.5fr 1fr;
  gap:clamp(28px,5vw,60px);align-items:start;
  padding-bottom:clamp(48px,7vw,88px);}
@media(max-width:860px){.room-grid{grid-template-columns:minmax(0,1fr);}}
.room-main{max-width:60ch;}
.room-h2{font-size:22px;margin:32px 0 8px;}

.room-facts{border-top:1px solid var(--ink);margin-bottom:26px;}
.room-facts .fact{display:flex;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--rule);}
.room-facts dt{font-size:15px;color:var(--quiet);margin:0;}
.room-facts dd{margin:0;font-weight:600;font-size:16px;text-align:right;}

.room-side-h{font-size:16px;margin:0 0 10px;}
.room-side .facilities{margin-bottom:26px;}

.room-enquire{background:var(--stone);padding:24px;border-radius:2px;}
.room-enquire p{font-size:15.5px;color:var(--quiet);margin:0 0 16px;}
.room-enquire .btn{background:var(--green);color:var(--chalk);}
.room-phone{margin:14px 0 0 !important;font-size:14.5px;}

.rooms-light .room-card{border:1px solid var(--rule);}

/* ---------- groups: shares the room card styles ---------- */
.group-who{font-size:14.5px;color:var(--green);font-weight:600;margin:0 0 12px;}
.group-welcome{background:var(--stone);padding:18px 22px;border-radius:2px;
  font-size:16px;margin-top:28px;}

/* ---------- appeal ---------- */
.appeal{border:2px solid var(--brass);padding:clamp(24px,3vw,34px);}
.appeal-has-img{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(22px,3.5vw,40px);
  align-items:center;padding:0;overflow:hidden;}
@media(max-width:820px){.appeal-has-img{grid-template-columns:minmax(0,1fr);}}
.appeal-img{width:100%;height:100%;min-height:240px;object-fit:cover;display:block;}
.appeal-has-img .appeal-body{padding:clamp(24px,3vw,34px) clamp(24px,3vw,34px) clamp(24px,3vw,34px) 0;}
@media(max-width:820px){.appeal-has-img .appeal-body{padding:0 24px 28px;}}
.appeal-sum{font-family:'Newsreader',Georgia,serif;font-size:clamp(17px,2vw,20px);
  line-height:1.5;color:var(--quiet);max-width:46ch;margin:10px 0 0;}
.appeal-deadline{font-size:14.5px;color:var(--quiet);margin:6px 0 0;}
.appeal-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:22px 0 0;}
.appeal-more{font-weight:600;font-size:15.5px;text-decoration:none;
  border-bottom:2px solid var(--brass);padding-bottom:2px;}
.appeal-side{background:var(--stone);padding:24px;border-radius:2px;}
.appeal-side .btn{background:var(--green);color:var(--chalk);margin-top:8px;}

/* ==========================================================================
   HERO SERVICE TIMES
   --------------------------------------------------------------------------
   Replaces the black hymn board. The times still lead the page, but on
   typography and a hairline rule rather than a filled box, so the church
   is the first thing anyone sees.
   ========================================================================== */

.hero-intro{font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--quiet);
  max-width:50ch;margin:20px 0 0;}

/* Equal columns, so the amount someone types never decides the size of
   the block. Four fixed tracks plus an auto track for the link. */
.times{display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  gap:clamp(14px,2.4vw,28px);align-items:start;
  margin-top:clamp(26px,3.5vw,38px);
  border-top:1.5px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:18px 0;}
.time{min-width:0;}
@media(max-width:860px){
  .times{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:460px){
  .times{grid-template-columns:minmax(0,1fr);}
}

.time-hr{display:block;font-family:'Newsreader',Georgia,serif;
  font-size:clamp(22px,2.6vw,28px);font-weight:500;color:var(--green);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;line-height:1.1;}
.time-sub{display:block;font-size:13.5px;line-height:1.45;color:var(--quiet);
  margin-top:4px;overflow-wrap:break-word;}

.times-all{align-self:center;font-size:14.5px;font-weight:600;
  color:var(--green);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid var(--brass);padding-bottom:2px;}
.times-all:hover{border-bottom-color:var(--green);}


@media(max-width:700px){
  .times{gap:16px 26px;}
  .times-all{margin-left:0;width:100%;align-self:flex-start;}
}

/* ==========================================================================
   ONE CARD SYSTEM
   --------------------------------------------------------------------------
   What's on, news and rooms all use .card. One component, three uses. A
   change here improves every section at once, which is the whole reason for
   having a system rather than three sets of similar rules.

   Colours are stated explicitly rather than inherited, because .hall sets
   everything to chalk and these cards sit inside it.
   ========================================================================== */

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;flex-wrap:wrap;margin-bottom:6px;}
.sec-all{font-weight:600;text-decoration:none;font-size:15.5px;color:var(--green);
  border-bottom:2px solid var(--brass);padding-bottom:2px;white-space:nowrap;}
/* The link under the row, right aligned, for sections with fewer cards
   than columns. Keeps the grid full width instead of leaving a gap. */
.sec-foot{display:flex;justify-content:flex-end;margin-top:22px;}
.sec-all-light{color:var(--chalk);border-bottom-color:var(--brass);}
.sec-h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:4px;}

/* Cards always fill the full width of the section. The number of columns
   follows the number of cards, so three rooms give three wide cards rather
   than three narrow ones huddled on the left. */
.cards{display:grid;gap:22px;margin-top:28px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.cards-2{grid-template-columns:repeat(2,1fr);}
.cards-3{grid-template-columns:repeat(3,1fr);}
.cards-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){
  .cards-3,.cards-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:620px){
  .cards,.cards-2,.cards-3,.cards-4{grid-template-columns:minmax(0,1fr);}
}

.card{background:var(--chalk);border-radius:2px;overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;
  border:1px solid var(--rule);
  transition:transform .16s ease, box-shadow .16s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.13);}
@media(prefers-reduced-motion:reduce){
  .card{transition:none;} .card:hover{transform:none;}
}
.card-img{display:block;width:100%;aspect-ratio:3/2;height:auto;
  object-fit:cover;object-position:center;background:var(--stone);}
.card-blank{background:var(--stone);}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}

.hall .card h3, .card h3{color:var(--ink);font-size:18.5px;margin:0 0 6px;
  line-height:1.25;}
.hall .card .card-when, .card-when{color:var(--quiet);font-size:13px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0 0 7px;}
.card-when.is-dated{color:var(--brass);}
.hall .card .card-sum, .card-sum{color:var(--quiet);font-size:15px;
  line-height:1.55;margin:0 0 12px;flex:1;}
.hall .card .card-where, .card-where{color:var(--quiet);font-size:13.5px;
  margin:0 0 12px;}
.hall .card .card-more, .card-more{color:var(--green);font-size:14.5px;
  font-weight:600;margin-top:auto;}
.card:hover h3{color:var(--green);}

/* ==========================================================================
   WHAT'S ON: the calendar list
   ========================================================================== */

.cal-month{font-size:15px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--quiet);margin:34px 0 0;
  padding-bottom:10px;border-bottom:1.5px solid var(--ink);}
.cal-month:first-of-type{margin-top:0;}
.cal-row{display:grid;grid-template-columns:64px 1fr auto;gap:20px;
  align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;}
.cal-row:hover .cal-title{color:var(--green);}
.cal-date{text-align:center;}
.cal-day{display:block;font-family:'Newsreader',Georgia,serif;font-size:27px;
  color:var(--green);line-height:1;font-variant-numeric:tabular-nums;}
.cal-dow{display:block;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--quiet);margin-top:2px;}
.cal-title{display:block;font-family:'Newsreader',Georgia,serif;font-size:19px;
  font-weight:500;letter-spacing:-.01em;}
.cal-sum{display:block;font-size:14.5px;color:var(--quiet);margin-top:3px;}
.cal-meta{text-align:right;font-size:13.5px;color:var(--quiet);}
.cal-meta span{display:block;}
@media(max-width:640px){
  .cal-row{grid-template-columns:52px 1fr;}
  .cal-meta{grid-column:2;text-align:left;margin-top:6px;}
}

/* ==========================================================================
   ALL SERVICE TIMES page
   ========================================================================== */

.times-list{margin-bottom:8px;}
.times-row{display:grid;grid-template-columns:96px 1fr auto;gap:20px;
  align-items:baseline;padding:15px 0;border-bottom:1px solid var(--rule);}
.times-t{font-family:'Newsreader',Georgia,serif;font-size:23px;
  color:var(--green);font-variant-numeric:tabular-nums;line-height:1.1;}
.times-n{font-size:16.5px;}
.times-note{display:block;font-size:14px;color:var(--quiet);margin-top:2px;}
.times-w{text-align:right;font-size:13.5px;color:var(--quiet);}
.times-w span{display:block;}
@media(max-width:640px){
  .times-row{grid-template-columns:76px 1fr;}
  .times-w{grid-column:2;text-align:left;margin-top:4px;}
}

/* ==========================================================================
   SPECIAL OCCASIONS
   ========================================================================== */

.occasions{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;}
@media(max-width:820px){.occasions{grid-template-columns:minmax(0,1fr);}}
.occasion{border:1px solid var(--rule);background:var(--chalk);padding:28px 26px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:border-color .16s ease;}
.occasion:hover{border-color:var(--green);}
.occasion-icon{width:46px;height:46px;color:var(--green);margin-bottom:16px;}
.occasion h3{font-size:21px;margin:0 0 5px;}
.occasion p{font-size:15px;color:var(--quiet);margin:0 0 16px;flex:1;}
.occasion-more{font-size:14.5px;font-weight:600;color:var(--green);
  border-bottom:2px solid var(--brass);padding-bottom:2px;align-self:flex-start;}

/* ==========================================================================
   PEOPLE: overlap fixed
   --------------------------------------------------------------------------
   Long addresses used to run into the next column. Solved by making the
   address the destination rather than the visible text, plus min-width:0 so
   the grid track is allowed to shrink.
   ========================================================================== */

.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:30px 26px;margin-top:30px;}
.person{display:flex;gap:16px;align-items:flex-start;min-width:0;}
.person-body{min-width:0;flex:1;}
.person-name{font-size:18px;margin:0 0 2px;overflow-wrap:break-word;}
.person-role{font-size:14.5px;color:var(--quiet);margin:0 0 8px;line-height:1.4;}
.person-note{font-size:13.5px;color:var(--quiet);margin:0 0 8px;}
.person-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font-size:14.5px;}
.person-links a,.person-open{color:var(--green);text-decoration:none;
  border-bottom:1.5px solid var(--brass);padding:0 0 1px;background:none;
  border-left:0;border-right:0;border-top:0;font:inherit;cursor:pointer;}
.person-links a:hover,.person-open:hover{border-bottom-color:var(--green);}

/* ---------- safeguarding ---------- */
/* ---------- safeguarding policy link ---------- */
.safe-policy{margin:16px 0 0!important;}
.safe-policy a{font-weight:600;text-decoration:none;color:var(--green);
  border-bottom:2px solid var(--brass);padding-bottom:2px;}
.safe-policy a:hover{border-bottom-color:var(--green);}

/* ---------- page hero ---------- */
.page-hero img{width:100%;height:auto;max-height:46vh;object-fit:cover;display:block;}
.page-head{padding-block:clamp(32px,4.5vw,52px) clamp(16px,2.5vw,24px);}
.page-head h1{max-width:18ch;}
.page-standfirst{font-family:'Newsreader',Georgia,serif;
  font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:var(--quiet);
  max-width:48ch;margin:16px 0 0;}
.archive-standfirst{font-family:'Newsreader',Georgia,serif;
  font-size:clamp(17px,2vw,20px);color:var(--quiet);max-width:48ch;margin:14px 0 0;}

/* ---------- people: name and photograph open the biography ---------- */
.person-photo-btn{background:none;border:0;padding:0;cursor:pointer;
  display:block;flex-shrink:0;border-radius:999px 999px 4px 4px;}
.person-photo-btn .person-photo{transition:opacity .16s ease;}
.person-photo-btn:hover .person-photo{opacity:.85;}
.person-name-btn{background:none;border:0;padding:0;font:inherit;
  color:inherit;cursor:pointer;text-align:left;
  border-bottom:1.5px solid var(--brass);}
.person-name-btn:hover{color:var(--green);border-bottom-color:var(--green);}
@media(prefers-reduced-motion:reduce){
  .person-photo-btn .person-photo{transition:none;}
}

/* ==========================================================================
   OCCASION PAGES: baptisms, weddings, funerals
   --------------------------------------------------------------------------
   The three highest-intent pages on a parish website, and previously the
   plainest. Everything here comes from the template: the client uploads a
   photograph and writes the words, and never chooses a layout.
   ========================================================================== */

/* --- photograph with the title over it --- */
.hero-page{position:relative;min-height:clamp(260px,34vh,380px);
  display:flex;align-items:flex-end;overflow:hidden;}
.hero-page-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;}
.hero-page-veil{position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(25,27,26,.82) 0%,
    rgba(25,27,26,.55) 42%,
    rgba(25,27,26,.15) 100%);}
.hero-page-text{position:relative;padding-block:clamp(30px,4vw,46px);width:100%;}
.hero-page-icon{width:44px;height:44px;color:var(--chalk);opacity:.9;
  margin-bottom:14px;}
.hero-page h1{color:var(--chalk);max-width:16ch;
  font-size:clamp(34px,5.4vw,58px);}
.hero-page-sf{font-family:'Newsreader',Georgia,serif;color:#E7EAE6;
  font-size:clamp(17px,2.1vw,22px);line-height:1.5;max-width:46ch;
  margin:14px 0 0;}

/* --- no photograph: the symbol carries it instead --- */
.page-head-occasion{border-bottom:1.5px solid var(--ink);}
.page-head-icon{width:52px;height:52px;color:var(--green);margin-bottom:18px;}

.page-body{padding-bottom:clamp(48px,7vw,88px);padding-top:clamp(30px,4vw,44px);}

/* --- the opening paragraph set larger, like the news template --- */
.prose-occasion > p:first-of-type{font-family:'Newsreader',Georgia,serif;
  font-size:clamp(19px,2.2vw,23px);line-height:1.5;color:var(--ink);
  margin-bottom:22px;}
.prose-occasion h2{font-size:clamp(21px,2.5vw,27px);margin:38px 0 10px;
  padding-top:20px;border-top:1px solid var(--rule);}
.prose-occasion h2:first-of-type{border-top:0;padding-top:0;}

/* --- the question every one of these pages has to answer --- */
.ask{background:var(--stone);padding:clamp(26px,3.5vw,38px);
  margin-top:clamp(36px,5vw,52px);max-width:60ch;border-radius:2px;}
.ask h2{font-size:22px;margin:0 0 10px;}
.ask p{font-size:16px;margin:0 0 14px;}
.ask-lines{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:baseline;
  margin:18px 0 0!important;}
.ask-phone{font-family:'Newsreader',Georgia,serif;font-size:clamp(23px,2.6vw,29px);
  color:var(--green);text-decoration:none;font-variant-numeric:tabular-nums;}
.ask-phone:hover{border-bottom:2px solid var(--brass);}
.ask-mail{font-weight:600;font-size:15.5px;color:var(--green);
  text-decoration:none;border-bottom:2px solid var(--brass);padding-bottom:2px;}
.ask-hours{font-size:14.5px!important;color:var(--quiet);margin:16px 0 0!important;}

/* --- the other two occasions --- */
.also{margin-top:clamp(40px,5vw,60px);padding-top:26px;
  border-top:1px solid var(--rule);}
.also-row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:16px;}
@media(max-width:620px){.also-row{grid-template-columns:minmax(0,1fr);}}
.also-card{display:flex;gap:16px;align-items:center;padding:20px 22px;
  border:1px solid var(--rule);background:var(--chalk);text-decoration:none;
  color:inherit;transition:border-color .16s ease;}
.also-card:hover{border-color:var(--green);}
.also-card span{font-size:15px;color:var(--quiet);line-height:1.45;}
.also-card strong{color:var(--ink);font-size:17px;font-weight:600;}
.also-icon{width:36px;height:36px;color:var(--green);flex-shrink:0;}
@media(prefers-reduced-motion:reduce){
  .also-card,.occasion{transition:none;}
}

/* ==========================================================================
   PHOTOGRAPH ROW
   --------------------------------------------------------------------------
   A sideways scrolling rail, not an auto-advancing carousel. Nothing moves
   unless somebody moves it, which avoids the usual accessibility problems
   and means a slow reader is never interrupted mid-caption.
   ========================================================================== */

.gallery{background:var(--stone);border-block:1px solid var(--rule);
  padding-block:clamp(34px,4.5vw,52px);}
.gal-nav{display:flex;gap:8px;}
.gal-btn{width:40px;height:40px;border:1px solid var(--quiet);background:none;
  color:var(--ink);font-size:16px;cursor:pointer;border-radius:2px;
  transition:background .15s ease;}
.gal-btn:hover{background:var(--chalk);}
@media(prefers-reduced-motion:reduce){.gal-btn{transition:none;}}

.gal-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:26px 0 6px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;}
.gal-rail::-webkit-scrollbar{display:none;height:0;width:0;}
.gal-rail:focus-visible{outline:3px solid var(--brass);outline-offset:-3px;}
.gal-item{flex:0 0 auto;width:min(78vw,340px);margin:0;scroll-snap-align:start;}
.gal-item img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;
  border-radius:2px;background:var(--rule);display:block;}
.gal-item figcaption{font-size:13.5px;color:var(--quiet);margin-top:9px;
  line-height:1.45;}

/* A hint that there is more to the right, on wider screens. */
@media(min-width:900px){
  .gal-item{width:340px;}
}

/* ==========================================================================
   QUICK LINKS
   --------------------------------------------------------------------------
   The bulletin and the live stream, side by side under the service times.
   Two colours so they read as two different things rather than a pair of
   buttons. One on its own takes the full width, so a parish that streams
   but uploads nothing still looks deliberate rather than short of a box.
   ========================================================================== */

.quick{display:grid;gap:14px;margin-top:clamp(22px,3vw,30px);}
.quick-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:720px){.quick-2{grid-template-columns:minmax(0,1fr);}}

.quick-box{display:flex;align-items:center;gap:16px;
  padding:20px 22px;border-radius:2px;text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;}
.quick-box:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.16);}
@media(prefers-reduced-motion:reduce){
  .quick-box{transition:none;} .quick-box:hover{transform:none;}
}
.quick-box svg{width:34px;height:34px;flex-shrink:0;}
.quick-text{flex:1;min-width:0;}
.quick-text strong{display:block;font-size:17px;font-weight:600;
  line-height:1.25;margin-bottom:3px;}
.quick-text span{display:block;font-size:14px;line-height:1.4;}
.quick-go{font-size:19px;flex-shrink:0;}

/* This week's sheet: green. The one almost everybody wants, and the one
   updated every week, so it takes the stronger colour. */
.quick-sheet{background:var(--green);color:var(--chalk);}
.quick-sheet svg{color:var(--chalk);}
.quick-sheet .quick-text span{color:#C6D4CB;}
.quick-sheet .quick-go{color:var(--chalk);}

/* Live stream: stone. Quieter, and only some parishes have one. */
.quick-live{background:var(--stone);color:var(--ink);}
.quick-live svg{color:var(--green);}
.quick-live .quick-text span{color:var(--quiet);}
.quick-live .quick-go{color:var(--green);}

/* ==========================================================================
   VISITING
   --------------------------------------------------------------------------
   Getting here and getting in touch, side by side. Most parish sites split
   these across two pages, which means one of them is always the one nobody
   can find.
   ========================================================================== */

.visit{display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(26px,4vw,52px);margin-top:28px;align-items:start;}
@media(max-width:860px){.visit{grid-template-columns:minmax(0,1fr);gap:32px;}}
.visit-h{font-size:19px;margin:0 0 14px;}

/* The address card, standing in for a map. A real embed would load Google
   scripts on every page, which is a privacy cost for very little gain when
   the link does the same job. */
.visit-map{background:var(--green);color:var(--chalk);border-radius:2px;
  padding:24px 26px;margin-bottom:20px;}
.visit-map address{font-style:normal;font-family:'Newsreader',Georgia,serif;
  font-size:clamp(19px,2.1vw,23px);line-height:1.4;margin:0 0 16px;}
.visit-map-link{display:inline-flex;align-items:center;gap:9px;
  color:var(--chalk);text-decoration:none;font-size:15px;font-weight:600;
  border-bottom:2px solid var(--brass);padding-bottom:2px;}
.visit-map-link svg{width:15px;height:19px;flex-shrink:0;}

.visit-prose p{font-size:16px;}

.visit-contact{border-top:1.5px solid var(--ink);}
.visit-row{display:grid;grid-template-columns:120px 1fr;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--rule);align-items:baseline;}
@media(max-width:520px){.visit-row{grid-template-columns:minmax(0,1fr);gap:2px;}}
.visit-label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--quiet);font-weight:600;}
.visit-big{font-family:'Newsreader',Georgia,serif;font-size:clamp(21px,2.3vw,26px);
  color:var(--green);text-decoration:none;font-variant-numeric:tabular-nums;
  line-height:1.1;}
.visit-big:hover{border-bottom:2px solid var(--brass);}
.visit-link{color:var(--green);text-decoration:none;font-size:16px;
  border-bottom:1.5px solid var(--brass);overflow-wrap:anywhere;}
.visit-row span{font-size:16px;}