/* ==========================================================================
   St. Mary's Catholic Parish, Karu
   Design system v3 — modelled on the Basilique du Sacré-Cœur de Montmartre:
   white ground, generous air, a single warm accent, full-width photography,
   utility bar, mega-menu, and a sidebar template for interior pages.
   ========================================================================== */

html,body{ overflow-x:clip; }
:root{
  --paper:  #FFFFFF;
  --haze:   #F3F3F9;   /* a breath of the same azure */
  --sand:   #EFEAE1;
  --ink:    #101060;   /* the azure of the arms, deepened to read as text */
  --body:   #3A3F49;
  --mute:   #767C88;
  --line:   #E3DED4;
  --accent: #A51D1D;   /* the red of the arms, softened for the screen */
  --accent-d:#7F1616;
  --amber:  #E4B549;   /* the gold of the arms, as sampled */
  --gold-d: #957223;   /* darkened, so gold can sit on white */
  --sky:    #0B0B42;   /* the deepest azure, for bands */
  --arms:   #A4232B;   /* the parish red, kept for the crest and rules */
  --gold:   #E4B549;
  --season: #1E7A44;   /* replaced at runtime by the liturgical season */

  --serif: "Oswald", "Arial Narrow", Impact, sans-serif;
  --script: "Dancing Script", "Segoe Script", cursive;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gut: 22px;
  --max: 1280px;
  --sec: 72px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (min-width:900px){ :root{ --gut:44px; --sec:112px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto is essential — without it the width/height attributes on the
   markup win, CSS aspect-ratio is ignored, and images render stretched. */
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--accent); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.skip{ position:absolute; left:-9999px; background:var(--ink); color:#fff; padding:12px 18px; z-index:400; }
.skip:focus{ left:8px; top:8px; }

/* ------------------------------------------------------------- Typography */

h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); font-weight:600;
  line-height:1.06; letter-spacing:.005em; text-transform:uppercase;
  margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(2.5rem,5.6vw,4.2rem); }
h2{ font-size:clamp(1.95rem,3.8vw,3rem); }
h3{ font-size:clamp(1.35rem,2.2vw,1.75rem); }
h4{ font-family:var(--sans); font-size:1.02rem; font-weight:700; letter-spacing:-.005em; }

p{ margin:0 0 1.15em; max-width:70ch; }
.lede{ font-size:clamp(1.08rem,1.7vw,1.24rem); line-height:1.66; color:var(--body); max-width:60ch; }
strong{ color:var(--ink); }

.eyebrow, .script{
  font-family:var(--script); font-size:1.6rem; font-weight:700; line-height:1;
  letter-spacing:0; text-transform:none; color:var(--accent); margin:0 0 .55rem;
}
/* gold reads at only 1.9:1 on white, so it is reserved for dark grounds */
.sec-ink .eyebrow, .sec-ink .script,
.fc-hero .script, .fc-count .script{ color:var(--amber); }
.rule{ width:52px; height:2px; background:var(--gold); border:0; margin:0 0 1.6rem; }
.center{ text-align:center; }
.center .rule, .center .eyebrow{ margin-inline:auto; }
.center p{ margin-inline:auto; }

.sec{ padding-block:var(--sec); }
.sec-tight{ padding-block:calc(var(--sec)*.6); }
.sec-haze{ background:var(--haze); }
.sec-ink{ background:var(--ink); color:rgba(255,255,255,.82); }
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4{ color:#fff; }
.sec-head{ max-width:64ch; margin-bottom:3rem; }
.sec-head.center{ margin-inline:auto; }

/* ---------------------------------------------------------------- Buttons */

.btn{
  display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:.9rem; letter-spacing:.04em;
  text-transform:uppercase; padding:1.05em 2.1em; text-decoration:none;
  border:1.5px solid transparent; border-radius:999px;
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg{ width:15px; height:15px; }
.btn-solid{ background:var(--accent); color:#fff; }
.btn-solid:hover{ background:var(--accent-d); }
.btn-line{ border-color:var(--ink); color:var(--ink); }
.btn-line:hover{ background:var(--ink); color:#fff; }
.btn-white{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn-white:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.more{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid currentColor; padding-bottom:3px;
}
.more svg{ width:15px; height:15px; flex:none; }
.more:hover{ color:var(--accent-d); }
.sec-ink .more{ color:#fff; }

/* ------------------------------------------------------------ Utility bar */

.utility{ background:var(--ink); color:rgba(255,255,255,.8); font-size:.78rem; }
.utility .wrap{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:flex-end; gap:.3rem 1.7rem; min-height:40px; padding-block:7px; }
.utility a{ color:rgba(255,255,255,.8); text-decoration:none;
  display:inline-flex; align-items:center; gap:.45em; letter-spacing:.03em; }
.utility a:hover{ color:#fff; }
.utility svg{ width:13px; height:13px; opacity:.75; }
.utility .lang{ border-left:1px solid rgba(255,255,255,.22); padding-left:1.5rem; }
@media (max-width:640px){ .utility .hide-s{ display:none; } }

/* ---------------------------------------------------------------- Header */

.masthead{ background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:120; }
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; min-height:82px; }
@media (min-width:1040px){ .masthead .wrap{ min-height:100px; } }

.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.brand .seal{ width:52px; height:52px; flex:none; object-fit:contain; }
@media (min-width:1040px){ .brand .seal{ width:62px; height:62px; } }
.brand b{ display:block; font-family:var(--serif); font-weight:500; font-size:1.24rem;
  color:var(--ink); line-height:1.06; }
.brand small{ display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); margin-top:4px; }

.navtoggle{ display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  background:none; border:1px solid var(--line); border-radius:2px; padding:.6em 1em;
  font-family:var(--sans); font-weight:700; font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); }
.navtoggle svg{ width:16px; height:16px; }

.nav{ display:none; flex-basis:100%; }
.nav.open{ display:block; }
.nav > ul{ list-style:none; margin:0; padding:0 0 1.2rem; }
.nav > ul > li > a,
.nav > ul > li > button{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:.5rem; padding:1rem 0; background:none; border:0; cursor:pointer;
  border-bottom:1px solid var(--line);
  font-family:var(--sans); font-weight:700; font-size:.96rem; color:var(--ink);
  text-decoration:none; text-align:left;
}
.nav > ul > li > button svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.nav > ul > li.open > button svg{ transform:rotate(180deg); }

.mega{ display:none; padding:.6rem 0 1.4rem; }
.nav > ul > li.open .mega{ display:block; }
.mega figure{ display:none; }
.mega ul{ list-style:none; margin:0; padding:0; }
.mega ul a{ display:block; padding:.55rem 0; font-size:.94rem; color:var(--body);
  text-decoration:none; }
.mega ul a:hover{ color:var(--accent); }
.mega h4{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:1rem 0 .3rem; }

@media (min-width:1040px){
  .navtoggle{ display:none; }
  .nav{ display:block !important; flex-basis:auto; }
  .nav > ul{ display:flex; gap:2.1rem; padding:0; }
  .nav > ul > li{ position:static; }
  .nav > ul > li > a,
  .nav > ul > li > button{
    width:auto; padding:.4rem 0; border:0; font-size:.9rem; font-weight:600;
    position:relative; letter-spacing:.01em;
  }
  .nav > ul > li > a::after,
  .nav > ul > li > button::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
    background:var(--accent); transform:scaleX(0); transform-origin:left;
    transition:transform .3s var(--ease);
  }
  .nav > ul > li:hover > a::after,
  .nav > ul > li:hover > button::after,
  .nav > ul > li.open > button::after,
  .nav > ul > li > a[aria-current="page"]::after{ transform:scaleX(1); }

  .mega{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-top:1px solid var(--line);
    border-bottom:1px solid var(--line); box-shadow:0 24px 40px -30px rgba(22,35,61,.4);
    padding:2.6rem 0 3rem;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav > ul > li:hover .mega,
  .nav > ul > li.open .mega{ opacity:1; visibility:visible; transform:none; }
  .mega-inner{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
    display:grid; grid-template-columns:1fr 1fr 300px; gap:3rem; }
  .mega figure{ display:block; margin:0; }
  .mega figure img{ width:100%; aspect-ratio:5/4; object-fit:cover; }
  .mega figcaption{ font-size:.84rem; color:var(--mute); margin-top:.7rem; }
  .mega h4:first-child{ margin-top:0; }
}

/* ------------------------------------------------------------------ Hero */

/* ===================================================================
   Split hero — the homepage. The copy sits on a panel beside the
   photograph rather than on top of it, so contrast can never be broken
   by whichever photograph the parish uploads. The panel bleeds to the
   left edge of the screen while its text stays in the content column.
   =================================================================== */
.split{ display:grid; min-height:520px; height:clamp(520px,74svh,760px);
  background:var(--ink); }
@media (min-width:1000px){ .split{ grid-template-columns:minmax(0,43%) minmax(0,57%); } }
/* On a wide screen the panel keeps its text in the site content column, so its
   left padding grows with the viewport. Without this the text column gets
   NARROWER as the screen gets wider. */
@media (min-width:1600px){ .split{ grid-template-columns:minmax(0,48%) minmax(0,52%); } }
@media (max-width:999px){ .split{ height:auto; min-height:0; } }

.split-say{
  position:relative; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.6rem,6vh,4.5rem) clamp(1.6rem,3.2vw,3.4rem)
          clamp(2.6rem,6vh,4.5rem)
          max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
}
@media (max-width:999px){ .split-say{ order:2; padding-inline:var(--gut); } }
.split-say::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(120% 70% at 8% 0%,    rgba(255,255,255,.07), transparent 62%),
    radial-gradient(90% 60% at 100% 100%, rgba(192,145,47,.16), transparent 66%);
}
.split-say > *{ position:relative; }
/* The messages are stacked; only one is shown, and it changes with the
   photograph beside it. */
.split-deck{ display:grid; }
.split-msg{ grid-area:1/1; opacity:0; visibility:hidden; }
.split-msg.on{ opacity:1; visibility:visible; }
.split-msg .eyebrow,
.split-msg .split-head,
.split-msg .lede,
.split-msg .split-acts{ opacity:0; transform:translateY(18px); }
.split-msg.on .eyebrow    { animation:split-rise .8s var(--ease) .12s forwards; }
.split-msg.on .split-head { animation:split-rise .9s var(--ease) .24s forwards; }
.split-msg.on .lede       { animation:split-rise .9s var(--ease) .38s forwards; }
.split-msg.on .split-acts { animation:split-rise .9s var(--ease) .50s forwards; }
@keyframes split-rise{ to{ opacity:1; transform:none; } }
html:not(.js) .split-msg .eyebrow,
html:not(.js) .split-msg .split-head,
html:not(.js) .split-msg .lede,
html:not(.js) .split-msg .split-acts{ opacity:1; transform:none; }

.split-say .eyebrow{ display:flex; align-items:center; gap:.85rem;
  color:#F4E4C6; margin-bottom:1.1rem; }
.split-say .eyebrow::before{ content:""; width:30px; height:1px;
  background:#F4E4C6; flex:none; }
.split-say .split-head{ font-family:var(--serif); font-weight:400; color:#fff;
  margin:0 0 1rem; font-size:clamp(2rem,3.4vw,3.2rem); line-height:1.04;
  letter-spacing:-.012em; }
.split-say .lede{ margin:0 0 2rem; color:rgba(255,255,255,.87);
  line-height:1.68; max-width:38ch; }
.split-acts{ display:flex; flex-wrap:wrap; gap:.7rem; }
/* the panel is narrow between 900 and 1280px, so ease the buttons rather than
   let them fall onto two rows */
@media (min-width:1000px) and (max-width:1279px){
  .split-acts .btn{ padding-inline:1.25em; font-size:.73rem; letter-spacing:.09em; }
}
.split-acts .btn{ white-space:nowrap; }
.btn-gold{ background:var(--gold); color:#1B1405; }
.btn-gold:hover{ background:#E9CD8C; color:#1B1405; transform:translateY(-2px); }
.btn-ghost{ border:1px solid rgba(255,255,255,.42); color:#fff; background:none; }
.btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; }

.split-arms{ display:flex; align-items:center; gap:.9rem;
  margin-top:clamp(2rem,5vh,3.2rem); padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16); }
.split-arms img{ width:52px; height:52px; object-fit:contain; flex:none; }
.split-arms span{ font-size:.74rem; line-height:1.5; color:rgba(255,255,255,.62); }

.split-shot{ position:relative; overflow:hidden; margin:0; }
@media (max-width:999px){ .split-shot{ order:1; height:52svh; min-height:290px; } }
/* Five photographs stacked; only the copy stays put, so nothing a visitor
   needs to read is ever hidden by the rotation. */
.split-shot img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; z-index:0; }
.split-shot img.under{ opacity:1; z-index:1; }
.split-shot img.on{ opacity:1; z-index:2; animation:split-drift 16s ease-out forwards; }
.split-shot img.on:nth-of-type(even){ animation-name:split-drift-b; }
@keyframes split-drift{
  from{ transform:scale(1.02); } to{ transform:scale(1.09) translate3d(-.9%,-.7%,0); } }
@keyframes split-drift-b{
  from{ transform:scale(1.09) translate3d(.9%,.7%,0); } to{ transform:scale(1.02); } }

/* one transition each, so the sequence never falls into a pattern */
.split-shot img.on[data-fx="dissolve"]{ animation:split-drift 16s ease-out forwards,
  fx-dissolve 1.1s var(--ease) both; }
.split-shot img.on[data-fx="wipe"]{ animation:split-drift-b 16s ease-out forwards,
  fx-wipe 1.15s cubic-bezier(.65,0,.35,1) both; }
.split-shot img.on[data-fx="curtain"]{ animation:split-drift 16s ease-out forwards,
  fx-curtain 1.15s cubic-bezier(.65,0,.35,1) both; }
.split-shot img.on[data-fx="barn"]{ animation:split-drift-b 16s ease-out forwards,
  fx-barn 1.15s cubic-bezier(.65,0,.35,1) both; }
.split-shot img.on[data-fx="zoom"]{ animation:split-drift 16s ease-out forwards,
  fx-zoom 1.2s var(--ease) both; }
@keyframes fx-dissolve{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fx-wipe{ from{ clip-path:inset(0 0 0 100%); } to{ clip-path:inset(0 0 0 0); } }
@keyframes fx-curtain{ from{ clip-path:inset(100% 0 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes fx-barn{ from{ clip-path:inset(0 50% 0 50%); } to{ clip-path:inset(0 0 0 0); } }
@keyframes fx-zoom{ from{ opacity:0; } to{ opacity:1; } }

/* controls — required, not decoration: anything that moves for more than
   five seconds must be stoppable. */
.shot-controls{ position:absolute; left:1.3rem; bottom:1.1rem; z-index:3;
  display:flex; align-items:center; gap:1rem; }
.shot-dots{ display:flex; gap:.5rem; }
.shot-dots button{ width:26px; height:3px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.42); transition:background-color .3s var(--ease); }
.shot-dots button:hover{ background:rgba(255,255,255,.72); }
.shot-dots button[aria-selected="true"]{ background:var(--gold); }
.shot-dots button:focus-visible,
.shot-pause:focus-visible{ outline:2px solid #F4E4C6; outline-offset:3px; }
.shot-pause{ width:30px; height:30px; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.4); background:rgba(6,23,53,.32); color:#fff;
  border-radius:50%; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  transition:background-color .25s var(--ease); }
.shot-pause:hover{ background:rgba(6,23,53,.62); }
.shot-pause svg{ width:13px; height:13px; }
.split-shot::after{ content:""; position:absolute; inset:auto 0 0 0; height:26%; z-index:2;
  background:linear-gradient(180deg, rgba(22,35,61,0), rgba(22,35,61,.55));
  pointer-events:none; }
.split-shot figcaption{ position:absolute; right:1.4rem; bottom:1.15rem; z-index:3;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  text-shadow:0 1px 8px rgba(2,10,28,.95); }
@media (prefers-reduced-motion:reduce){
  .split-shot img.on{ animation:none; }
  .split-msg .eyebrow, .split-msg .split-head,
  .split-msg .lede, .split-msg .split-acts{ opacity:1; transform:none; animation:none; }
}

/* ===================================================================
   The register. Not a photograph with words laid over it: a ruled page
   from the parish books. The figure carries the hero, the photograph
   sits beside it at full colour with nothing veiling it, and the index
   along the foot is made of the numbers themselves.
   =================================================================== */
.register{ --page:#F4F0E5; --rule:rgba(22,35,61,.20);
  background:var(--page); color:var(--ink); position:relative; }
/* every row sits in the same column as the masthead and the sections below */
.register > *{ width:100%; max-width:var(--max); margin-inline:auto; }

.rg-top{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:.6rem 2rem; padding:1.15rem var(--gut);
  border-bottom:1px solid var(--rule); }
.rg-kicker{ margin:0; font-size:.68rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent); }
.rg-place{ margin:0; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(22,35,61,.62); }
@media (min-width:1100px){ .rg-place{ white-space:nowrap; } }

.rg-body{ display:grid; gap:0; border-bottom:1px solid var(--rule);
  grid-template-columns:1fr; padding-inline:var(--gut); }
@media (min-width:900px){ .rg-body{ grid-template-columns:1.15fr .85fr; } }

/* the figure */
.rg-entries{ display:grid; padding:clamp(2.2rem,6vh,4.4rem) 0
  clamp(2.2rem,6vh,4rem); align-content:center; }
@media (min-width:900px){ .rg-entries{ padding-right:clamp(2rem,5vw,4.5rem);
  border-right:1px solid var(--rule); } }
.rg-entry{ grid-area:1/1; opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility 0s linear .45s; }
.rg-entry.is-on{ opacity:1; visibility:visible; transition-delay:0s,0s; }
.rg-entry > *{ opacity:0; transform:translateY(14px); }
.rg-entry.is-on > *{ animation:rg-rise .8s cubic-bezier(.16,.7,.22,1) forwards; }
.rg-entry.is-on > *:nth-child(1){ animation-delay:.05s; }
.rg-entry.is-on > *:nth-child(2){ animation-delay:.16s; }
.rg-entry.is-on > *:nth-child(3){ animation-delay:.26s; }
.rg-entry.is-on > *:nth-child(4){ animation-delay:.36s; }
@keyframes rg-rise{ to{ opacity:1; transform:none; } }

.rg-num{ margin:0; font-family:var(--serif); font-weight:300; line-height:.84;
  font-size:clamp(5rem,15.5vw,13rem); letter-spacing:-.045em;
  font-variant-numeric:tabular-nums lining-nums; color:var(--ink); }
.rg-lab{ margin:1.1rem 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.35rem,2.9vw,2.15rem); line-height:1.14; letter-spacing:-.01em; }
.rg-lab::before{ content:""; display:block; width:52px; height:2px;
  background:var(--accent); margin-bottom:1.05rem; }
.rg-sub{ margin:.75rem 0 0; max-width:34em; color:rgba(22,35,61,.68);
  font-size:.95rem; line-height:1.6; }
.rg-act{ margin:1.9rem 0 0; }
.rg-act a{ display:inline-flex; align-items:center; gap:.55rem; color:var(--ink);
  font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; padding-bottom:4px; border-bottom:2px solid var(--accent);
  white-space:nowrap; }
.rg-act svg{ width:14px; height:14px; flex:none; transition:transform .3s var(--ease); }
.rg-act a:hover{ color:var(--accent); }
.rg-act a:hover svg{ transform:translateX(4px); }

/* the photograph: whole, uncropped in tone, nothing over it */
.rg-plates{ position:relative; min-height:clamp(260px,42svh,560px); }
@media (min-width:900px){ .rg-plates{ min-height:auto; } }
.rg-plate{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s var(--ease); }
.rg-plate.is-on{ opacity:1; }

/* the index is the data */
.rg-foot{ display:flex; align-items:stretch; gap:1rem; padding-inline:var(--gut); }
.rg-index{ display:grid; grid-template-columns:repeat(2,1fr); flex:1; }
@media (min-width:760px){ .rg-index{ grid-template-columns:repeat(4,1fr); } }
.rg-tab{ position:relative; display:flex; flex-direction:column; gap:.2rem;
  align-items:flex-start; text-align:left; padding:1.05rem 1.1rem 1.15rem 0;
  background:none; border:0; cursor:pointer; color:rgba(22,35,61,.5);
  border-right:1px solid var(--rule); transition:color .3s var(--ease); }
.rg-tab:last-child{ border-right:0; }
.rg-tab:hover{ color:var(--ink); }
.rg-tab.is-on{ color:var(--ink); }
.rg-tab b{ font-family:var(--serif); font-weight:400; font-size:1.5rem;
  line-height:1; font-variant-numeric:tabular-nums; }
.rg-tab span{ font-size:.63rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; }
.rg-tab i{ position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left; }
.rg-tab.is-on i{ animation:rg-fill var(--dur,9000ms) linear forwards; }
.register.is-held .rg-tab.is-on i{ animation-play-state:paused; }
@keyframes rg-fill{ to{ transform:scaleX(1); } }
.rg-pause{ align-self:center; display:grid; place-items:center; width:26px;
  height:26px; padding:0; cursor:pointer; background:none; border-radius:50%;
  border:1px solid var(--rule); transition:background-color .25s var(--ease); }
.rg-pause svg{ width:9px; height:9px; fill:var(--ink); }
.rg-pause:hover{ background:rgba(22,35,61,.07); }
.rg-tab:focus-visible, .rg-pause:focus-visible{ outline:2px solid var(--ink);
  outline-offset:3px; }

@media (max-width:700px), (prefers-reduced-motion:reduce){
  .rg-pause{ display:none; }
  .rg-tab i{ display:none; }
  .rg-entry.is-on > *{ animation:none; opacity:1; transform:none; }
}

/* ===================================================================
   Homepage in the reference idiom: bright ground, heavy serif headings,
   handwritten kickers, pill buttons, and the ring motif bleeding off
   the edges. Colours sampled from the screenshots supplied.
   =================================================================== */
.btn-pill{ background:var(--accent); color:#fff; }
.btn-pill:hover{ background:var(--accent-d); color:#fff; }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* the rings. Drawn in CSS, so they cost nothing to load */
.arc{ position:absolute; border-radius:50%; border:34px solid; pointer-events:none;
  z-index:0; opacity:.9; }
.arc-amber{ width:290px; height:290px; border-color:var(--gold) transparent transparent var(--gold);
  transform:rotate(-38deg); right:-140px; top:-120px; }
.arc-orange{ width:330px; height:330px; border-color:transparent var(--accent) var(--accent) transparent;
  transform:rotate(14deg); left:-165px; bottom:-150px; }
.arc-sky{ width:260px; height:260px; border-color:var(--ink) var(--ink) transparent transparent;
  transform:rotate(20deg); right:-130px; bottom:-110px; }
@media (max-width:820px){ .arc{ display:none; } }

/* hero */
.nz-hero{ position:relative; min-height:clamp(540px,80svh,820px); display:grid;
  place-items:center; text-align:center; overflow:hidden; background:var(--ink);
  isolation:isolate; }
.nz-shots{ position:absolute; inset:0; z-index:-2; }
.nz-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s var(--ease); }
.nz-bg.is-on{ opacity:1; animation:nz-drift 16s ease-out forwards; }
@keyframes nz-drift{ from{ transform:scale(1.06);} to{ transform:scale(1);} }
.nz-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(115% 75% at 50% 46%, rgba(31,43,54,.34), rgba(31,43,54,.72) 74%),
    linear-gradient(180deg, rgba(31,43,54,.72), rgba(31,43,54,.42) 42%,
                            rgba(31,43,54,.86)); }
.nz-hero .wrap{ position:relative; padding-block:clamp(3.5rem,11vh,6.5rem); }
.nz-words{ display:grid; }
.nz-msg{ grid-area:1/1; max-width:56rem; margin-inline:auto; opacity:0;
  visibility:hidden; transition:opacity .5s var(--ease), visibility 0s linear .5s; }
.nz-msg.is-on{ opacity:1; visibility:visible; transition-delay:0s,0s; }
.nz-msg > *{ opacity:0; transform:translateY(16px); }
.nz-msg.is-on > *{ animation:nz-rise .8s cubic-bezier(.16,.7,.22,1) forwards; }
.nz-msg.is-on > *:nth-child(1){ animation-delay:.08s; }
.nz-msg.is-on > *:nth-child(2){ animation-delay:.18s; }
.nz-msg.is-on > *:nth-child(3){ animation-delay:.30s; }
.nz-msg.is-on > *:nth-child(4){ animation-delay:.42s; }
@keyframes nz-rise{ to{ opacity:1; transform:none; } }
.nz-msg .script{ color:var(--amber); font-size:clamp(1.6rem,2.6vw,2.1rem);
  margin-bottom:.35rem; }
.nz-msg h1{ color:#fff; font-weight:800; margin:0;
  font-size:clamp(2.1rem,5.2vw,4.2rem); line-height:1.08;
  text-shadow:0 2px 34px rgba(10,18,26,.5); }
.nz-lede{ max-width:34em; margin:1.2rem auto 0; color:rgba(255,255,255,.9);
  font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.62; }
.nz-acts{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin:2rem 0 0; }

.nz-dots[hidden]{ display:none; }
.nz-dots{ position:absolute; z-index:2; left:50%; transform:translateX(-50%);
  bottom:clamp(1.3rem,4vh,2.4rem); display:flex; align-items:center; gap:.6rem; }
.nz-dot{ width:11px; height:11px; padding:0; border-radius:50%; cursor:pointer;
  border:0; background:rgba(255,255,255,.5); transition:background-color .3s var(--ease),
  transform .3s var(--ease); }
.nz-dot.is-on{ background:var(--amber); transform:scale(1.25); }
.nz-pause{ margin-left:.6rem; display:grid; place-items:center; width:26px; height:26px;
  padding:0; cursor:pointer; background:transparent; border-radius:50%;
  border:1px solid rgba(255,255,255,.45); }
.nz-pause svg{ width:9px; height:9px; fill:#fff; }
.nz-pause:hover{ background:rgba(255,255,255,.16); }
.nz-dot:focus-visible, .nz-pause:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* the figures, as a row */
.figures{ position:relative; overflow:hidden; }
.fig-row{ display:grid; gap:2rem 1.5rem; grid-template-columns:repeat(2,1fr);
  text-align:center; position:relative; z-index:1; }
@media (min-width:860px){ .fig-row{ grid-template-columns:repeat(4,1fr); } }
.fig-row div{ padding-inline:.5rem; }
.fig-row b{ display:block; font-family:var(--serif); font-weight:800; color:var(--ink);
  font-size:clamp(2.5rem,5vw,3.6rem); line-height:1; font-variant-numeric:tabular-nums; }
.fig-row span{ display:block; margin-top:.6rem; font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }

@media (max-width:700px), (prefers-reduced-motion:reduce){
  .nz-dots{ display:none !important; }
  .nz-bg.is-on{ animation:none; }
  .nz-msg.is-on > *{ animation:none; opacity:1; transform:none; }
}

/* ===================================================================
   The animation layer. Every rule here sits behind html.js and is
   switched off wholesale by a reduced-motion preference.
   =================================================================== */

/* --- headlines assemble word by word --- */
html.js .w{ display:inline-block; opacity:0; transform:translateY(.85em) rotate(3deg);
  transition:opacity .3s var(--ease), transform .42s cubic-bezier(.18,.95,.26,1); }
html.js .w.up{ opacity:1; transform:none; }

/* --- photographs are uncovered rather than faded --- */
html.js .curtain{ clip-path:inset(0 0 100% 0); transform:scale(1.06);
  transition:clip-path .6s cubic-bezier(.66,0,.2,1),
             transform .8s cubic-bezier(.16,.85,.24,1); }
html.js .curtain.open{ clip-path:inset(0 0 0 0); transform:none; }

/* --- grids arrive one after another, with a little lift --- */
html.js .stagger > *{ opacity:0; transform:translateY(64px) scale(.93);
  transition:opacity .34s var(--ease), transform .52s cubic-bezier(.17,.92,.25,1); }
html.js .stagger.go > *{ opacity:1; transform:none; }
html.js .stagger.go > *:nth-child(1){ transition-delay:0s; }
html.js .stagger.go > *:nth-child(2){ transition-delay:.06s; }
html.js .stagger.go > *:nth-child(3){ transition-delay:.12s; }
html.js .stagger.go > *:nth-child(4){ transition-delay:.18s; }
html.js .stagger.go > *:nth-child(5){ transition-delay:.24s; }
html.js .stagger.go > *:nth-child(6){ transition-delay:.30s; }

/* blocks in a two-column band fly in from opposite sides */
html.js [data-reveal][data-from="left"]{ transform:translateX(-70px) translateY(20px); }
html.js [data-reveal][data-from="right"]{ transform:translateX(70px) translateY(20px); }
html.js [data-reveal][data-from].shown{ transform:none; }
/* on one column there is no side to fly in from, and 70px of travel would
   push the page sideways, so it becomes a straight lift */
@media (max-width:900px){
  html.js [data-reveal][data-from="left"],
  html.js [data-reveal][data-from="right"]{ transform:translateY(48px); }
}

/* --- the moving band of the parish name --- */
.ticker{ overflow:hidden; background:var(--ink); padding:.9rem 0;
  border-block:1px solid rgba(255,255,255,.12); }
.ticker-run{ display:flex; width:max-content; animation:ticker 38s linear infinite; }
.ticker-run span{ display:inline-block; white-space:nowrap; padding-right:1.2rem;
  font-family:var(--serif); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:clamp(1.1rem,2.2vw,1.7rem); color:#fff; }
.ticker-run i{ color:var(--gold); font-style:normal; padding:0 .5rem; }
.ticker:hover .ticker-run{ animation-play-state:paused; }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* --- the seconds tick over --- */
html.js .fc-clock b.beat{ animation:beat .5s var(--ease); }
@keyframes beat{ 0%{ transform:translateY(-24%); opacity:.25; }
                 60%{ transform:translateY(0); opacity:1; } }

/* --- a light travels across a button on hover --- */
.btn-pill{ position:relative; overflow:hidden; }
.btn-pill::after{ content:""; position:absolute; top:0; bottom:0; width:42%;
  left:-60%; transform:skewX(-18deg); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transition:left .65s var(--ease); }
.btn-pill:hover::after{ left:120%; }

/* --- figures pulse very slightly as they land --- */
html.js .fig-row.go b{ animation:pop .8s cubic-bezier(.16,.9,.24,1); }
@keyframes pop{ 0%{ transform:scale(.86); } 60%{ transform:scale(1.03); } 100%{ transform:none; } }

/* --- the triad tiles tilt a shade toward the cursor --- */
.triad-row a{ transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.triad-row a:hover{ transform:translateY(-8px);
  box-shadow:0 34px 60px -34px rgba(16,16,96,.6); }

@media (prefers-reduced-motion:reduce){
  html.js .w, html.js .curtain, html.js .stagger > *{
    opacity:1 !important; transform:none !important; clip-path:none !important; }
  .ticker-run{ animation:none; }
  .btn-pill::after{ display:none; }
  html.js .fig-row.go b, html.js .fc-clock b.beat{ animation:none; }
}

/* ===================================================================
   Motion and touch. Everything here is opt-in: a reduced-motion
   preference switches all of it off, and nothing is required for the
   page to work or read.
   =================================================================== */

/* --- tap targets. The audit found links as short as 16px on a phone --- */
@media (max-width:900px){
  .utility a{ display:inline-flex; align-items:center; min-height:44px; }
  .foot a{ display:inline-flex; align-items:center; min-height:44px; }
  .foot li{ line-height:1.2; }
  .fc-t a{ min-height:44px; }
  .more{ min-height:44px; align-items:center; }
  .navtoggle{ min-height:46px; padding-inline:1rem; }
  .quick a{ min-height:96px; }
  .fc-acts .btn{ min-height:48px; }
}

/* --- a thin progress rule showing how far down the page you are --- */
.progress{ position:fixed; inset:0 auto auto 0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:left; z-index:300;
  background:linear-gradient(90deg, var(--accent), var(--gold));
  will-change:transform; }

/* --- the masthead tightens once you leave the hero --- */
.masthead{ transition:box-shadow .35s var(--ease), padding .35s var(--ease); }
.masthead.is-stuck{ box-shadow:0 10px 30px -22px rgba(16,16,96,.55); }
.masthead.is-stuck .brand img{ transform:scale(.86); }
.brand img{ transition:transform .35s var(--ease); }

/* --- back to the top --- */
.totop{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  z-index:290; display:grid; place-items:center; width:46px; height:46px;
  border:0; border-radius:50%; cursor:pointer; background:var(--ink); color:#fff;
  opacity:0; visibility:hidden; transform:translateY(14px);
  box-shadow:0 16px 34px -18px rgba(16,16,96,.7);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
.totop.is-on{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.totop:hover{ background:var(--accent); }
.totop svg{ width:16px; height:16px; fill:currentColor; }

/* --- reveals: travel a little further, and from a direction --- */
[data-reveal]{ will-change:transform, opacity; }
html.js [data-reveal][data-from="left"]{ transform:translateX(-26px); }
html.js [data-reveal][data-from="right"]{ transform:translateX(26px); }
html.js [data-reveal].shown{ transform:none; }

/* --- the rule under a section heading draws itself --- */
html.js .sec-head .rule{ transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease) .15s; }
html.js .sec-head.shown .rule, html.js .shown .rule{ transform:scaleX(1); }

/* --- the hero photograph drifts against the scroll --- */
.fc-shots{ will-change:transform; }

/* --- cards lift a touch more decisively --- */
.notice, .event, .school-card, .quick a{ transition:transform .35s var(--ease),
  box-shadow .35s var(--ease); }

/* --- the hero may be swiped on a phone, so say so once --- */
.fc-swipe{ display:none; }
@media (max-width:700px){
  .fc-swipe{ display:flex; align-items:center; justify-content:center; gap:.5rem;
    position:absolute; left:0; right:0; bottom:.9rem; z-index:2;
    color:rgba(255,255,255,.7); font-size:.62rem; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase; pointer-events:none; }
  .fc-swipe span{ display:block; width:22px; height:2px; background:rgba(255,255,255,.35); }
  .fc-swipe span.is-on{ background:var(--gold); }
}

@media (prefers-reduced-motion:reduce){
  .progress, .totop{ display:none !important; }
  .masthead.is-stuck .brand img{ transform:none; }
  html.js .sec-head .rule{ transform:none; transition:none; }
  html.js [data-reveal][data-from]{ transform:none; }
}

/* ===================================================================
   Homepage after the Faith Connect reference: full-bleed photograph,
   copy set hard left in heavy condensed capitals with the second line
   in gold, a service card at the lower right, and a dark countdown
   band carrying the live next-Mass clock.
   =================================================================== */
.fc-hero{ position:relative; min-height:clamp(560px,86svh,880px); display:grid;
  align-items:end; overflow:hidden; background:var(--ink); isolation:isolate; }
.fc-shots{ position:absolute; inset:0; z-index:-2; }
.fc-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .42s var(--ease); }
.fc-bg.is-on{ opacity:1; animation:fc-drift 18s ease-out forwards; }
@keyframes fc-drift{ from{ transform:scale(1.07);} to{ transform:scale(1);} }
.fc-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(12,12,14,.86), rgba(12,12,14,.52) 46%, rgba(12,12,14,.20) 74%),
    linear-gradient(180deg, rgba(12,12,14,.44), rgba(12,12,14,0) 34%, rgba(12,12,14,.60)); }

.fc-grid{ position:relative; display:grid; gap:2rem; align-items:end;
  padding-block:clamp(3rem,9vh,5.5rem) clamp(3.4rem,9vh,5rem); }
@media (min-width:1000px){ .fc-grid{ grid-template-columns:minmax(0,1fr) auto; } }
.fc-words{ display:grid; }
.fc-msg{ grid-area:1/1; opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility 0s linear .25s; }
.fc-msg.is-on{ opacity:1; visibility:visible; transition-delay:0s,0s; }
.fc-msg > *{ opacity:0; transform:translateY(20px); }
.fc-msg.is-on > *{ animation:fc-rise .5s cubic-bezier(.16,.9,.24,1) forwards; }
.fc-msg.is-on > *:nth-child(1){ animation-delay:.02s; }
.fc-msg.is-on > *:nth-child(2){ animation-delay:.10s; }
.fc-msg.is-on > *:nth-child(3){ animation-delay:.18s; }
@keyframes fc-rise{ to{ opacity:1; transform:none; } }

.fc-msg h1{ margin:0; color:#fff; font-weight:700; line-height:.94;
  font-size:clamp(2.6rem,7.2vw,6.2rem); letter-spacing:-.005em; }
.fc-msg h1 span, .fc-msg h1 em{ display:block; font-style:normal; }
.fc-msg h1 em{ color:var(--amber); }
.fc-sub{ max-width:34em; margin:1.5rem 0 0; color:rgba(255,255,255,.88);
  font-size:clamp(.98rem,1.2vw,1.1rem); line-height:1.6; }
.fc-acts{ display:flex; flex-wrap:wrap; gap:.8rem; margin:2rem 0 0; }

/* the service card */
.fc-card{ position:relative; background:#fff; color:var(--ink); border-radius:4px;
  padding:1.5rem 1.9rem 1.6rem; min-width:min(300px,80vw);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.7); }
.fc-card .script{ position:absolute; top:-2.1rem; right:1.4rem; margin:0;
  color:var(--amber); font-size:1.9rem; }
.fc-k{ margin:0; font-family:var(--serif); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.7rem,2.6vw,2.3rem); line-height:1; letter-spacing:.01em; }
.fc-t{ margin:.7rem 0 0; }
.fc-t a{ display:inline-flex; align-items:center; gap:.5rem; color:var(--accent);
  text-decoration:none; font-size:.76rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; }
.fc-t svg{ width:14px; height:14px; }

.fc-dots[hidden]{ display:none; }
.fc-dots{ position:absolute; z-index:2; right:clamp(1.2rem,4vw,3rem);
  top:clamp(1.4rem,5vh,3rem); display:flex; align-items:center; gap:.6rem; }
.fc-dot{ width:10px; height:10px; padding:0; border-radius:50%; cursor:pointer;
  border:0; background:rgba(255,255,255,.5); transition:background-color .3s var(--ease),
  transform .3s var(--ease); }
.fc-dot.is-on{ background:var(--amber); transform:scale(1.3); }
.fc-pause{ margin-left:.5rem; display:grid; place-items:center; width:26px; height:26px;
  padding:0; cursor:pointer; background:transparent; border-radius:50%;
  border:1px solid rgba(255,255,255,.45); }
.fc-pause svg{ width:9px; height:9px; fill:#fff; }
.fc-pause:hover{ background:rgba(255,255,255,.16); }
.fc-dot:focus-visible, .fc-pause:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* the countdown band */
.fc-count{ position:relative; overflow:hidden; text-align:center;
  padding:clamp(3.4rem,9vh,5.5rem) 0; background:var(--ink); isolation:isolate; }
.fc-count .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; }
.fc-count::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(12,12,14,.82), rgba(12,12,14,.68) 50%,
                                     rgba(12,12,14,.86)); }
.fc-count .wrap{ position:relative; }
.fc-count-k{ margin:0 0 1.6rem; color:rgba(255,255,255,.8); font-size:.78rem;
  font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.fc-clock{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2.6rem; }
.fc-clock span{ display:grid; gap:.4rem; min-width:76px; }
.fc-clock b{ font-family:var(--serif); font-weight:600; color:#fff; line-height:1;
  font-size:clamp(2.6rem,6.4vw,4.6rem); font-variant-numeric:tabular-nums; }
.fc-clock i{ font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.6); }
.fc-count-s{ margin:1.5rem 0 1.7rem; color:var(--amber); font-size:1.9rem; }
.fc-count-s:empty{ display:none; }

@media (max-width:700px){
  .fc-bg.is-on{ animation:none; }          /* no drift on a phone; battery */
  .fc-dots{ position:static; transform:none; justify-content:center;
    padding:1rem 0 .2rem; }
  /* the dot stays small but its hit area is a finger's width */
  .fc-dot{ width:14px; height:14px; position:relative; }
  .fc-dot::after{ content:""; position:absolute; top:-15px; bottom:-15px;
    left:-11px; right:-11px; }
  .fc-pause{ display:none; }               /* nothing autoplays here to pause */
}
@media (prefers-reduced-motion:reduce){
  .fc-dots{ display:none !important; }
  .fc-bg.is-on{ animation:none; }
  .fc-msg.is-on > *{ animation:none; opacity:1; transform:none; }
}

.quick{ background:var(--paper); padding:clamp(2.6rem,6vw,4rem) 0 0; }
.quick .wrap{ display:grid; gap:1.2rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .quick .wrap{ grid-template-columns:repeat(4,1fr); } }
.quick a{ display:flex; flex-direction:column; align-items:center; gap:.9rem;
  padding:2.1rem 1.1rem; text-align:center; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 40px -34px rgba(31,43,54,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.quick a:hover{ transform:translateY(-5px); color:var(--ink);
  box-shadow:0 26px 50px -30px rgba(31,43,54,.42); }
.quick svg{ width:38px; height:38px; }
.quick a:nth-child(1) svg{ color:var(--gold-d); }
.quick a:nth-child(2) svg{ color:var(--accent); }
.quick a:nth-child(3) svg{ color:var(--ink); }
.quick a:nth-child(4) svg{ color:var(--accent); }
.quick span{ font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; line-height:1.4; }

.triad{ margin-bottom:clamp(3rem,6vw,4.5rem); }
.triad:last-child{ margin-bottom:0; }
.triad h2{ font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.1; margin:0 0 1.6rem;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.9rem; }
.triad h2 span{ font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.triad-row{ display:grid; gap:1.3rem; grid-template-columns:repeat(3,1fr); }
@media (max-width:560px){ .triad-row{ grid-template-columns:1fr; } }
.triad-row a{ position:relative; display:block; overflow:hidden; text-decoration:none;
  aspect-ratio:1/1; background:var(--ink); }
.triad-row img{ width:100%; height:100%; object-fit:cover; opacity:.86;
  transition:transform .7s var(--ease), opacity .4s var(--ease); }
.triad-row a:hover img{ transform:scale(1.06); opacity:1; }
.triad-row a::after{ content:""; position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(180deg, rgba(6,23,53,0), rgba(6,23,53,.86)); }
.triad-row span{ position:absolute; left:0; right:0; bottom:1.3rem; z-index:1;
  text-align:center; color:#fff; font-family:var(--serif); font-size:1.5rem;
  text-shadow:0 2px 14px rgba(2,10,28,.8); }

.hero{ position:relative; min-height:78svh; display:grid; place-items:center;
  text-align:center; background:var(--ink); overflow:hidden; isolation:isolate; }
@media (min-width:900px){ .hero{ min-height:88svh; } }
.hero img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; animation:drift 22s ease-out forwards; }
@keyframes drift{ from{ transform:scale(1.02);} to{ transform:scale(1.12);} }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(12,20,36,.55) 0%, rgba(12,20,36,.34) 40%, rgba(12,20,36,.72) 100%); }
.hero .wrap{ position:relative; padding-block:7rem 5rem; }
.hero p{ max-width:none; margin-inline:auto; }
.hero .eyebrow{ color:#F0D9A0; }
.hero .mark{ width:96px; height:96px; margin:0 auto 1.8rem; object-fit:contain;
  filter:drop-shadow(0 4px 20px rgba(0,0,0,.4)); }
.hero h1{ color:#fff; font-size:clamp(2.2rem,5vw,3.9rem); margin-bottom:.35em;
  text-shadow:0 3px 30px rgba(4,10,24,.5); max-width:20ch; margin-inline:auto; }
.hero .sub{ color:#fff; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.4rem,3vw,2.3rem); line-height:1.28; max-width:22ch;
  margin:0 auto 2.4rem; text-shadow:0 2px 24px rgba(4,10,24,.55); }
.hero .sub em{ font-style:normal; color:#F0D9A0; }

/* --------------------------------------------------- Prepare your visit */

.prepare{ display:grid; gap:3rem; }
@media (min-width:900px){ .prepare{ grid-template-columns:1.35fr .8fr; gap:5rem; align-items:start; } }

.hours{ background:var(--haze); border-top:3px solid var(--accent); padding:2.2rem 2rem; }
.hours h3{ font-size:1.4rem; margin-bottom:.2em; }
.hours .big{ font-family:var(--serif); font-size:2rem; color:var(--ink); line-height:1.2;
  margin:.6rem 0 .2rem; }
.hours p{ font-size:.95rem; color:var(--mute); }
.hours hr{ border:0; border-top:1px solid var(--line); margin:1.5rem 0; }

.season-line{ display:flex; align-items:center; gap:.65rem; font-size:.86rem; color:var(--mute); }
.season-line .dot{ width:10px; height:10px; border-radius:50%; background:var(--season); flex:none; }
.season-line b{ color:var(--ink); }

.count-strip{ display:flex; gap:.45rem; margin:.9rem 0 .4rem; }
.count-strip .u{ min-width:56px; text-align:center; padding:.45rem .3rem;
  background:var(--paper); border:1px solid var(--line); }
.count-strip .u b{ display:block; font-family:var(--serif); font-size:1.5rem; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.count-strip .u span{ display:block; font-size:.58rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--mute); margin-top:4px; }
.next-name{ font-size:.9rem; color:var(--body); }
.next-name b{ color:var(--ink); }

/* --------------------------------------------------------- Reason cards */

.reasons{ display:grid; gap:1.4rem; }
@media (min-width:820px){ .reasons{ grid-template-columns:repeat(3,1fr); } }
.reason{ position:relative; display:block; overflow:hidden; text-decoration:none;
  aspect-ratio:3/4; isolation:isolate; }
.reason img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; transition:transform .8s var(--ease); }
.reason::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(12,20,36,.05) 30%, rgba(12,20,36,.82) 100%); }
.reason:hover img{ transform:scale(1.06); }
.reason span{ position:absolute; left:0; right:0; bottom:0; padding:1.8rem 1.6rem;
  color:#fff; font-family:var(--serif); font-size:1.5rem; line-height:1.2; }
.reason span::after{ content:""; display:block; width:34px; height:2px;
  background:var(--gold); margin-top:1rem; }

/* -------------------------------------------------------- Word from the PP */

/* The rector's word: one contained composition rather than a wide, half-empty
   band. The portrait is a tight editorial crop, credited beneath itself. */
.word{ display:grid; gap:2.4rem; align-items:center;
  max-width:1000px; margin-inline:auto; }
@media (min-width:900px){ .word{ grid-template-columns:320px 1fr; gap:4.5rem; } }

.word figure{ margin:0; position:relative; }
.word figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.word figure::before{
  content:""; position:absolute; left:-16px; top:-16px; width:64%; height:64%;
  border-left:2px solid var(--gold); border-top:2px solid var(--gold);
  opacity:.55; pointer-events:none;
}
.word figcaption{ margin-top:1.2rem; padding-top:.95rem; border-top:1px solid var(--line); }
.word figcaption b{ display:block; font-family:var(--serif); font-weight:500;
  font-size:1.16rem; color:var(--ink); line-height:1.25; }
.word figcaption span{ display:block; margin-top:.35rem; font-size:.72rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }

.word-text{ max-width:46ch; }
.word blockquote{ position:relative; margin:0 0 1.3rem; font-family:var(--serif);
  font-size:clamp(1.55rem,2.7vw,2.15rem); line-height:1.2; color:var(--ink); max-width:18ch; }
.word blockquote::before{
  content:"\201C"; position:absolute; left:-.5em; top:-.16em;
  font-family:var(--serif); font-size:2.6em; line-height:1; color:var(--gold);
  opacity:.32; pointer-events:none;
}
@media (max-width:899px){ .word blockquote::before{ left:-.28em; } }
.word-text p{ color:var(--body); }
.word-text .more{ margin-top:.6rem; }

/* ------------------------------------------------------------------ News */

.news{ display:grid; gap:1.8rem; }
@media (min-width:760px){ .news{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .news{ grid-template-columns:repeat(3,1fr); } }
.post{ display:block; text-decoration:none; color:inherit; }
.post .thumb{ overflow:hidden; aspect-ratio:16/10; margin-bottom:1.1rem; }
.post .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.post:hover .thumb img{ transform:scale(1.05); }
.post .meta{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); margin-bottom:.6rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.post .meta em{ font-style:normal; color:var(--accent); }
.post h3{ font-size:1.4rem; margin-bottom:.4rem; }
.post p{ font-size:.94rem; color:var(--mute); margin:0; }

/* ------------------------------------------------------- Notices / events */

/* Parish notices — cards rather than wide, sparse rows. Two across on desktop,
   so four notices sit as a tidy block instead of stretching the full width. */
#notice-list{ display:grid; gap:1.5rem; }
@media (min-width:820px){ #notice-list{ grid-template-columns:repeat(2,1fr); gap:1.7rem; } }

.notice{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-top:2px solid var(--gold);
  padding:1.9rem 1.8rem 1.5rem;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.notice:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -32px rgba(22,35,61,.4); }
.notice .tag{
  font-size:.67rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.9rem;
}
.notice h3, .prose .notice h3{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2vw,1.6rem);
  line-height:1.18; color:var(--ink); margin:0 0 .6rem;
}
.notice p{ margin:0; font-size:.95rem; color:var(--mute); }
.notice > div{ flex:1; }
.notice .when{
  display:block; margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.79rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--body);
}

.event{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:1.5rem 0; border-bottom:1px solid var(--line); align-items:start; }
.sec-ink .event{ border-bottom-color:rgba(255,255,255,.16); }
.event .date{ width:72px; text-align:center; padding:.55rem .2rem; border:1px solid var(--line); }
.sec-ink .event .date{ border-color:rgba(255,255,255,.3); }
.event .date b{ display:block; font-family:var(--serif); font-size:1.8rem; line-height:1;
  color:var(--accent); font-variant-numeric:tabular-nums; }
.sec-ink .event .date b{ color:#F0D9A0; }
.event .date span{ display:block; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--mute); margin-top:5px; }
.sec-ink .event .date span{ color:rgba(255,255,255,.6); }
.event h3{ font-family:var(--sans); font-size:1.03rem; font-weight:700; margin:0 0 .3rem; }
.event p{ margin:0; font-size:.93rem; color:var(--mute); }
.sec-ink .event p{ color:rgba(255,255,255,.7); }
.event .time{ display:block; font-size:.84rem; color:var(--accent); margin-top:.45rem; }
.sec-ink .event .time{ color:#F0D9A0; }

/* -------------------------------------------------------- Figure counter */

.figure-band{ position:relative; color:#fff; text-align:center; isolation:isolate;
  background:var(--ink); overflow:hidden; }
.figure-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; opacity:.42; }
.figure-band::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(110% 90% at 50% 50%, rgba(12,20,36,.5), rgba(12,20,36,.9)); }
.figure-band .wrap{ padding-block:calc(var(--sec)*.95); }
.figure-band .huge{ font-family:var(--serif); font-size:clamp(3.4rem,10vw,7rem);
  line-height:1; color:#fff; font-variant-numeric:tabular-nums; margin:0; }
.figure-band .cap{ font-family:var(--serif); font-size:clamp(1.2rem,2.4vw,1.7rem);
  color:rgba(255,255,255,.86); margin:.9rem 0 2rem; }
.figure-band .cap b{ color:#F0D9A0; font-weight:400; }

/* --------------------------------------------------------- Offer a Mass */

.offer{ display:grid; gap:3rem; }
@media (min-width:900px){ .offer{ grid-template-columns:1.2fr .8fr; gap:5rem; } }
.also{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.also li{ border-bottom:1px solid var(--line); }
.also a{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 0; text-decoration:none; color:var(--ink); font-weight:600; font-size:.98rem; }
.also a svg{ width:16px; height:16px; color:var(--accent); transition:transform .25s var(--ease); }
.also a:hover svg{ transform:translateX(5px); }

/* The at-a-glance panel on the school pages */
.hours .also div{ display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--line); }
.hours .also div:last-child{ border-bottom:0; }
.hours .also dt{ font-size:.86rem; color:var(--mute); flex:none; }
.hours .also dd{ margin:0; font-weight:700; font-size:.92rem; color:var(--ink); text-align:right; }

/* ------------------------------------------------------- Schools feature */

.schools{ display:grid; gap:1.6rem; }
@media (min-width:820px){ .schools{ grid-template-columns:repeat(2,1fr); } }
.school-card{ background:var(--paper); border:1px solid var(--line); text-decoration:none;
  display:block; color:inherit; transition:box-shadow .35s var(--ease), transform .35s var(--ease); }
.school-card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -34px rgba(22,35,61,.4); }
.school-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.school-card .in{ padding:2rem 1.9rem 2.2rem; }
.school-card .kind{ font-size:.7rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--accent); }
.school-card h3{ margin:.7rem 0 .5rem; }
.school-card p{ font-size:.95rem; color:var(--mute); margin:0 0 1.3rem; }
.school-card .more svg{ width:15px; height:15px; }

/* ------------------------------------------------ Interior page template */

.banner{ position:relative; height:clamp(240px,34vw,420px); background:var(--ink); }
.banner img{ width:100%; height:100%; object-fit:cover; opacity:.92; }

.crumb{ background:var(--haze); border-bottom:1px solid var(--line); }
.crumb .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.6rem 1.5rem; padding-block:.9rem; }
.crumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0;
  font-size:.79rem; color:var(--mute); }
.crumb li+li::before{ content:"/"; margin-right:.5rem; color:var(--line); }
.crumb a{ color:var(--mute); text-decoration:none; }
.crumb a:hover{ color:var(--accent); }
.share{ display:flex; gap:.5rem; }
.share a{ width:30px; height:30px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; color:var(--mute); }
.share a:hover{ color:var(--accent); border-color:var(--accent); }
.share svg{ width:13px; height:13px; }

.page{ display:grid; gap:3rem; padding-block:calc(var(--sec)*.72); }
@media (min-width:1000px){ .page{ grid-template-columns:250px 1fr; gap:5rem; align-items:start; } }

.sidenav{ font-size:.94rem; }
@media (min-width:1000px){ .sidenav{ position:sticky; top:120px; } }
.sidenav h4{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); padding-bottom:.9rem; border-bottom:2px solid var(--accent); margin-bottom:.3rem; }
.sidenav ul{ list-style:none; margin:0; padding:0; }
.sidenav li{ border-bottom:1px solid var(--line); }
.sidenav a, .sidenav span{ display:block; padding:.8rem 0; text-decoration:none; color:var(--body); }
.sidenav a:hover{ color:var(--accent); }
.sidenav span{ color:var(--accent); font-weight:700; }

.prose h1{ margin-bottom:.45em; }
.prose h2{ margin-top:2.6rem; font-size:clamp(1.6rem,2.8vw,2.15rem); }
.prose h3{ margin-top:2rem; font-size:1.25rem; font-family:var(--sans); font-weight:700; }
.prose figure{ margin:2.4rem 0; }
.prose figcaption{ font-size:.84rem; color:var(--mute); font-style:italic; margin-top:.7rem; }
.prose ul{ padding-left:1.2rem; }
.prose li{ margin-bottom:.5rem; }
.prose table{ width:100%; border-collapse:collapse; font-size:.94rem; margin:1.6rem 0; }
.prose th{ text-align:left; font-family:var(--sans); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
  padding:0 1rem .7rem 0; border-bottom:2px solid var(--accent); }
.prose td{ padding:.85rem 1rem .85rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
.prose td:last-child, .prose th:last-child{ padding-right:0; }
.prose tr.now td{ color:var(--ink); font-weight:700; }
.prose .callout{ background:var(--haze); border-left:3px solid var(--accent);
  padding:1.5rem 1.6rem; margin:2rem 0; }
.prose .callout p:last-child{ margin-bottom:0; }
.table-scroll{ overflow-x:auto; }

.readnext{ border-top:1px solid var(--line); margin-top:3.5rem; padding-top:1.8rem; }
.readnext span{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); margin-bottom:.6rem; }
.readnext a{ font-family:var(--serif); font-size:1.5rem; color:var(--ink); text-decoration:none; }
.readnext a{ display:inline-flex; align-items:center; gap:.6rem; }
.readnext a svg{ width:22px; height:22px; color:var(--accent); flex:none; }
.readnext a:hover{ color:var(--accent); }

/* ------------------------------------------------------------- Timetable */

.times{ display:grid; gap:0 3rem; }
@media (min-width:720px){ .times{ grid-template-columns:repeat(3,1fr); } }
.times h4{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:1.8rem 0 .2rem; }
.times > div > h4:first-child{ margin-top:0; }
.slot{ display:grid; grid-template-columns:1fr auto; gap:.3rem 1rem; align-items:baseline;
  margin:0; padding:.75rem 0; border-bottom:1px solid var(--line); }
.slot dt{ font-weight:700; font-size:.93rem; color:var(--ink); }
.slot dt em{ display:block; font-style:normal; font-weight:400; font-size:.79rem; color:var(--mute); }
.slot dd{ margin:0; font-family:var(--serif); font-size:1.3rem; color:var(--ink);
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.slot.next dd{ color:var(--accent); }
.slot.next dt::before{ content:"Next"; display:inline-block; margin-right:.5rem;
  padding:.15em .6em; font-size:.57rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; background:var(--accent); vertical-align:2px; }

/* ---------------------------------------------------------------- Gallery */

.gal{ display:grid; gap:.7rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .gal{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
.gal button{ padding:0; border:0; background:var(--ink); cursor:pointer; display:block;
  overflow:hidden; position:relative; aspect-ratio:4/3; }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gal button:hover img{ transform:scale(1.06); }

.lightbox{ position:fixed; inset:0; z-index:300; background:rgba(8,14,26,.96);
  display:none; align-items:center; justify-content:center; padding:1.2rem; }
.lightbox.on{ display:flex; }
.lightbox img{ max-width:100%; max-height:82vh; width:auto; }
.lightbox figure{ margin:0; }
.lightbox figcaption{ color:rgba(255,255,255,.75); font-size:.9rem; text-align:center; padding-top:1rem; }
.lb-close{ position:absolute; top:1.2rem; right:1.2rem; width:44px; height:44px; border-radius:50%;
  background:none; border:1px solid rgba(255,255,255,.4); color:#fff; font-size:1.4rem; cursor:pointer; }

/* ------------------------------------------------------------------ Misc */

.grid{ display:grid; gap:1.6rem; }
@media (min-width:640px){ .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--paper); border:1px solid var(--line); padding:1.9rem 1.7rem; }
.sec-haze .card{ background:var(--paper); }
.card h3{ font-family:var(--sans); font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.card p{ font-size:.94rem; color:var(--mute); margin:0; }
.card .when{ display:block; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line);
  font-size:.82rem; font-weight:700; color:var(--accent); }

.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{ content:""; position:absolute; left:0; top:.7rem; bottom:.7rem; width:1px; background:var(--line); }
.timeline li{ position:relative; padding:0 0 2.3rem 1.8rem; }
.timeline li::before{ content:""; position:absolute; left:-4px; top:.7rem; width:9px; height:9px;
  border-radius:50%; background:var(--accent); border:2px solid var(--paper); }
.timeline .yr{ display:block; font-family:var(--serif); font-size:1.6rem; color:var(--ink);
  line-height:1; margin-bottom:.4rem; }
.timeline p{ margin:0; font-size:.96rem; }

.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin:0; padding:0; list-style:none; }
.chips li{ background:var(--haze); border:1px solid var(--line); padding:.5rem 1.1rem; font-size:.88rem; }

.deets{ list-style:none; margin:0; padding:0; }
.deets li{ display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.deets svg{ width:19px; height:19px; color:var(--accent); flex:none; margin-top:4px; }
.deets b{ display:block; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mute); margin-bottom:3px; }
.deets a{ color:var(--ink); text-decoration:none; }
.map{ width:100%; height:340px; border:1px solid var(--line); display:block; }

.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }
.field input,.field select,.field textarea{ width:100%; font-family:var(--sans); font-size:1rem;
  padding:.85em .95em; background:var(--paper); border:1px solid var(--line); }
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); outline:none; }
.formnote{ font-size:.85rem; color:var(--mute); }

/* ---------------------------------------------------------- Scroll reveal */

/* Content is visible by default. The hidden starting state is applied ONLY
   once JavaScript has confirmed it is running and can reveal it again, so a
   blocked or failed script can never leave the page blank. */
html.js [data-reveal]{ opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js [data-reveal].shown{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.09s; }
[data-delay="2"]{ transition-delay:.18s; }
[data-delay="3"]{ transition-delay:.27s; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------- Footer */

.foot{ background:var(--ink); color:rgba(255,255,255,.68); font-size:.92rem; }
.foot a{ color:rgba(255,255,255,.68); text-decoration:none; }
.foot a:hover{ color:#F0D9A0; }
.foot .wrap{ padding-block:calc(var(--sec)*.58); }
.foot-top{ display:grid; gap:2.6rem; padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,.14); }
@media (min-width:900px){ .foot-top{ grid-template-columns:1.4fr 2.6fr; gap:4rem; } }
.foot .brand b{ color:#fff; font-size:1.2rem; }
.foot .brand small{ color:rgba(255,255,255,.5); }
.foot .contact{ margin-top:1.4rem; font-size:.92rem; line-height:1.9; }
.foot-links{ display:grid; gap:2rem; }
@media (min-width:620px){ .foot-links{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .foot-links{ grid-template-columns:repeat(4,1fr); } }
.foot h4{ color:#fff; font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; margin:0 0 1rem; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ padding:.3rem 0; }
.social{ display:flex; gap:.7rem; margin-top:1.4rem; }
.social a{ width:38px; height:38px; border:1px solid rgba(255,255,255,.24); border-radius:50%;
  display:grid; place-items:center; }
.social a:hover{ background:rgba(255,255,255,.12); }
.social svg{ width:16px; height:16px; }
.colophon{ padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  justify-content:space-between; font-size:.8rem; color:rgba(255,255,255,.45); }
.totop{ display:block; text-align:center; padding:1.1rem; background:rgba(255,255,255,.05);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; }