/* ============================================================
   North Adelaide / Prospect Parish
   Design system: Editorial (variation D)

   Derived from embacy.io and squarespace.com/circle, both read live
   on 2026-08-09 with their computed styles extracted, not recalled.

   FROM EMBACY:  oversized grotesque headline at weight 400 with tight
                 tracking; monochrome plus one accent; 0px corners with
                 pill buttons as the only exception; the ticker strip;
                 the news grid; #999 for all secondary text.
   FROM CIRCLE:  the hairline comparison table; alternating warm and
                 white section bands; sharp outline buttons; big left
                 headline against a right supporting column; full bleed
                 photographic hero with white text.
   NOT TAKEN:    Circle's uppercase eyebrow above the headline. Ruled
                 out by Andreas on 2026-08-09.
   ============================================================ */

:root{
  --white:#FFFFFF; --warm:#F1EDE6; --warm-2:#E7E1D6;
  --black:#0E0D0C; --grey:#706B66; --grey-2:#55514D; --grey-dark:#A8A39C;
  --line:#DAD4C9; --line-2:#E8E4DC;
  --accent:#C4472C; --accent-2:#A63A22;
  --gold:#B0801F;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  --shell:1280px;
  --pad:24px;          /* phone gutter. Text never sits against the edge. */
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--black);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
}
img{max-width:100%; display:block}
a{color:inherit}
p{margin:0}

/* Gutters step up with the viewport so text is never against the edge. */
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad)}
@media (min-width:560px){:root{--pad:32px}}
@media (min-width:900px){:root{--pad:40px}}

h1,h2,h3{font-weight:400; letter-spacing:-.028em; line-height:1.06; margin:0}
h1{font-size:clamp(34px,7.6vw,86px)}
h2{font-size:clamp(28px,5.2vw,56px)}
h3{font-size:20px; letter-spacing:-.015em; line-height:1.25}

:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------- Header ---------- */
.hdr{position:sticky; top:0; z-index:70; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2)}
.hdr__in{display:flex; align-items:center; gap:14px; min-height:64px}
.wm{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; min-width:0}
.wm img{width:28px; height:28px; object-fit:contain; flex:none}
.wm b{font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.15}
.hnav{display:none}
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:500; text-decoration:none; padding:11px 20px; min-height:44px;
  border-radius:1440px; background:var(--black); color:#fff; border:1px solid var(--black);
  white-space:nowrap; transition:.2s var(--ease);
}
.cta:hover{background:var(--accent); border-color:var(--accent)}
.cta--light{background:#fff; color:var(--black); border-color:#fff}
.cta--light:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.cta--ghost{background:transparent; color:var(--black)}
.cta--ghost:hover{background:var(--black); color:#fff}
.burger{background:none; border:1px solid var(--line); border-radius:1440px; padding:10px 12px; cursor:pointer; min-height:44px}
.burger span{display:block; width:17px; height:1.5px; background:var(--black); margin:3.5px 0}
.drawer{
  position:fixed; inset:64px 0 auto 0; background:var(--white); border-bottom:1px solid var(--line-2);
  padding:4px var(--pad) 20px; display:flex; flex-direction:column;
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:.22s var(--ease); z-index:69;
}
.drawer[data-open="true"]{transform:none; opacity:1; pointer-events:auto}
.drawer a{font-size:17px; text-decoration:none; padding:15px 0; border-bottom:1px solid var(--line-2); color:var(--black)}
.drawer a:last-child{border-bottom:none}
@media (max-width:620px){
  /* The CTA squeezed the wordmark onto three lines. Contact sits in the drawer. */
  .hdr__in .cta{display:none}
}
@media (min-width:1000px){
  .hdr__in{min-height:76px; gap:28px}
  .wm img{width:34px; height:34px}
  .wm b{font-size:16px}
  .burger,.drawer{display:none}
  .hnav{display:flex; align-items:center; gap:30px; margin-right:8px}
  .hnav a{font-size:14.5px; text-decoration:none; color:var(--black); position:relative; padding:4px 0}
  .hnav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .28s var(--ease)}
  .hnav a:hover::after,.hnav a[aria-current]::after{right:0}
}

/* ---------- Hero ---------- */
.hero{position:relative; isolation:isolate; min-height:420px; display:flex; align-items:flex-end; overflow:hidden; background:var(--black)}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.82}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(14,13,12,.34),rgba(14,13,12,.30) 40%,rgba(14,13,12,.86))}
.hero__in{padding-block:80px 36px; color:#fff}
.hero h1{color:#fff; max-width:15ch}
.hero p{margin-top:18px; max-width:46ch; font-size:17px; color:rgba(255,255,255,.82)}
.hero__row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px}
.hero__ln{font-size:14px; color:rgba(255,255,255,.7)}
.hero__ln a{color:#fff}
@media (min-width:900px){.hero{min-height:620px} .hero__in{padding-block:120px 52px}}

/* Page head, for interior pages that carry no photograph */
.phead{padding:44px 0 36px; border-bottom:1px solid var(--black)}
.phead p{margin-top:18px; max-width:56ch; color:var(--grey-2)}
@media (min-width:900px){.phead{padding:76px 0 52px}}

/* ---------- Info bar ----------
   Was a scrolling ticker. Andreas removed the scrolling banner on 2026-08-09,
   so the same live information sits still instead. No motion at all. */
.bar{background:var(--accent); color:#fff; border-block:1px solid var(--accent-2)}
.bar__in{display:flex; flex-direction:column; gap:10px; padding-block:16px}
.bar__k{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.bar__now{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.bar__t{font-size:24px; letter-spacing:-.02em}
.bar__w{font-size:15.5px; color:rgba(255,255,255,.9)}
.bar__today{font-size:15px; color:rgba(255,255,255,.9); line-height:1.6}
.bar__today b{font-weight:600; color:#fff}
@media (min-width:820px){
  .bar__in{flex-direction:row; align-items:center; justify-content:space-between; gap:44px; padding-block:18px}
  .bar__today{text-align:right}
}

/* ---------- Sections ---------- */
section{padding:56px 0}
@media (min-width:900px){section{padding:104px 0}}
.band{background:var(--warm)}
.split{display:grid; gap:20px}
@media (min-width:900px){.split{grid-template-columns:1.15fr .85fr; gap:64px; align-items:start}}
.split__aside p{color:var(--grey-2); font-size:17px}

/* ---------- Comparison table ---------- */
.cmp{margin-top:40px; border-top:1px solid var(--black)}
.cmp__hd,.cmp__r{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:18px 0; border-bottom:1px solid var(--line)}
.cmp__hd{border-bottom:1px solid var(--black); padding-bottom:14px}
.cmp__ch{display:flex; flex-direction:column; gap:5px}
.dot{width:11px; height:11px; border-radius:50%; background:var(--accent)}
.cmp__ch[data-i="2"] .dot{background:var(--gold)}
.cmp__ch b{font-size:16.5px; font-weight:600; letter-spacing:-.012em}
.cmp__ch span{font-size:13px; color:var(--grey)}
.cmp__lbl{font-size:14px; color:var(--grey-2); padding:16px 0 4px; grid-column:1 / -1; border-top:1px solid var(--line-2)}
.cmp__r:first-of-type .cmp__lbl{border-top:none; padding-top:0}
.cmp__v{font-size:17px}
.cmp__v em{font-style:normal; color:var(--grey); font-size:14px; display:block; margin-top:2px}
@media (min-width:820px){
  .cmp__hd,.cmp__r{grid-template-columns:minmax(230px,1fr) 1fr 1fr; gap:28px; align-items:baseline}
  .cmp__lbl{grid-column:auto; padding:0; border-top:none; font-size:16px; color:var(--black)}
}
.cmp__note{margin-top:22px; font-size:15.5px; color:var(--grey-2)}

/* ---------- Seasonal list ---------- */
.slist{margin-top:40px; border-top:1px solid var(--black)}
.srow{display:grid; gap:10px; padding:22px 0; border-bottom:1px solid var(--line)}
@media (min-width:820px){.srow{grid-template-columns:minmax(230px,1fr) 1.4fr auto; gap:28px; align-items:start}}
.srow__d{font-size:14px; color:var(--grey); margin-top:6px}
.srow h3{max-width:24ch}
.srow__b{font-size:16px; color:var(--grey-2)}
.srow__b b{display:block; font-weight:600; color:var(--black); font-size:14px}
.srow__t{display:grid; gap:10px}
@media (min-width:560px){.srow__t{grid-template-columns:1fr 1fr; gap:10px 26px}}
.badge{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border:1px solid currentColor; border-radius:1440px; white-space:nowrap; justify-self:start}
.badge[data-s="tbc"]{color:var(--gold)}
.badge[data-s="set"]{color:#3C6B3C}

/* ---------- Notice / card grid. Aligned, never staggered. ---------- */
.grid{display:grid; gap:40px; margin-top:44px; align-items:start}
@media (min-width:700px){.grid{grid-template-columns:1fr 1fr; gap:48px 40px}}
@media (min-width:1100px){.grid{grid-template-columns:repeat(3,1fr); gap:56px 40px}}
.grid--two{grid-template-columns:1fr}
@media (min-width:820px){.grid--two{grid-template-columns:1fr 1fr; gap:48px}}
.item{text-decoration:none; display:block}
.item__im{aspect-ratio:4/3; overflow:hidden; background:var(--warm-2); margin-bottom:18px}
.item__im img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.item:hover .item__im img{transform:scale(1.04)}
.item__d{font-size:13.5px; color:var(--grey); margin-bottom:7px}
.item h3{font-weight:600; margin-bottom:8px; transition:color .2s var(--ease)}
.item:hover h3{color:var(--accent)}
.item p{font-size:16px; color:var(--grey-2)}
.tlink{display:inline-flex; align-items:center; gap:9px; margin-top:40px; font-size:15px; text-decoration:none; color:var(--black); border-bottom:1px solid var(--black); padding-bottom:3px; transition:.2s var(--ease)}
.tlink:hover{color:var(--accent); border-bottom-color:var(--accent)}

/* ---------- Rows, used by the bulletin archive ---------- */
.rows{margin-top:36px; border-top:1px solid var(--black)}
.rowitem{display:grid; gap:6px; padding:20px 0; border-bottom:1px solid var(--line); text-decoration:none; transition:.2s var(--ease)}
@media (min-width:760px){.rowitem{grid-template-columns:150px 1fr auto; gap:28px; align-items:baseline}}
.rowitem:hover h3{color:var(--accent)}
.rowitem__d{font-size:14px; color:var(--grey)}
.rowitem h3{font-weight:600; transition:color .2s var(--ease)}
.rowitem p{font-size:15.5px; color:var(--grey-2); margin-top:4px}
.rowitem__pdf{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-2); border:1px solid var(--line); border-radius:1440px; padding:8px 14px; white-space:nowrap; justify-self:start; transition:.2s var(--ease)}
.rowitem:hover .rowitem__pdf{border-color:var(--accent); color:var(--accent)}
.yr{font-size:13px; color:var(--grey); margin:34px 0 6px}

/* ---------- Controls ---------- */
.ctrls{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:36px}
.search{flex:1 1 220px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:0 16px; min-height:48px; background:var(--white)}
.search input{border:0; outline:0; background:transparent; font-family:var(--sans); font-size:16px; width:100%; color:var(--black); padding:12px 0}
.search input::placeholder{color:#BDB8B0}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{font-family:var(--sans); font-size:14px; padding:12px 18px; min-height:48px; border:1px solid var(--line); background:transparent; border-radius:1440px; cursor:pointer; color:var(--grey-2); transition:.18s var(--ease)}
.chip:hover{border-color:var(--black); color:var(--black)}
.chip[aria-pressed="true"]{background:var(--black); border-color:var(--black); color:#fff}
.empty{display:none; padding:40px 0; color:var(--grey)}

/* ---------- Feature block ---------- */
.feat{display:grid; gap:0; border:1px solid var(--black); margin-top:40px}
@media (min-width:900px){.feat{grid-template-columns:1fr 1.1fr; align-items:stretch}}
.feat__im{min-height:240px}
.feat__im img{width:100%; height:100%; object-fit:cover; min-height:240px}
.feat__b{padding:28px var(--pad) 32px}
@media (min-width:900px){.feat__b{padding:48px 44px}}
.feat h2{font-size:clamp(26px,3.4vw,40px)}
.feat__d{font-size:14px; color:var(--grey); margin-top:14px}
.feat p.x{margin-top:16px; color:var(--grey-2); max-width:48ch}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}

/* ---------- Facts list ---------- */
.facts{margin-top:20px; border-top:1px solid var(--line)}
.facts div{display:grid; grid-template-columns:150px 1fr; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:15.5px}
.facts dt{color:var(--grey)}
.facts dd{margin:0}

/* ---------- Contact ---------- */
.cwrap{display:grid; gap:32px; margin-top:40px}
@media (min-width:900px){.cwrap{grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start}}
.cinfo dl{margin:0}
.cinfo .row{padding:15px 0; border-bottom:1px solid var(--line); display:grid; gap:3px}
.cinfo .row:first-child{border-top:1px solid var(--black)}
.cinfo dt{font-size:13.5px; color:var(--grey)}
.cinfo dd{margin:0; font-size:16.5px}
.cinfo a{color:var(--black); text-decoration:none; border-bottom:1px solid var(--line)}
.cinfo a:hover{border-bottom-color:var(--accent); color:var(--accent)}
form{border:1px solid var(--black); padding:24px; background:var(--white)}
@media (min-width:900px){form{padding:34px}}
.frow{display:grid; gap:16px}
@media (min-width:560px){.frow{grid-template-columns:1fr 1fr; gap:18px}}
.field{display:block; margin-bottom:18px}
.field span{display:block; font-size:13px; color:var(--grey-2); margin-bottom:7px}
.field span i{font-style:normal; color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--black); background:var(--white);
  border:0; border-bottom:1px solid var(--line); border-radius:0; padding:11px 0;
  transition:border-color .18s var(--ease);
}
.field textarea{min-height:122px; resize:vertical; line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#BDB8B0}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--accent); outline:none}
.fbtn{
  width:100%; font-family:var(--sans); font-size:15px; font-weight:500; padding:15px 30px; min-height:48px;
  border-radius:1440px; border:1px solid var(--black); background:var(--black); color:#fff; cursor:pointer;
  transition:.2s var(--ease);
}
.fbtn:hover{background:var(--accent); border-color:var(--accent)}
@media (min-width:560px){.fbtn{width:auto}}
.fnote{font-size:13.5px; color:var(--grey); margin-top:14px}
.fok{display:none; border:1px solid #B7CDB7; background:#EFF5EF; color:#2E4A2E; padding:14px 16px; font-size:14.5px; margin-bottom:18px}

/* ---------- Footer ---------- */
footer{background:var(--black); color:#fff; padding:54px 0 26px}
@media (min-width:900px){footer{padding:84px 0 32px}}
.fbig{font-size:clamp(26px,5.6vw,60px); font-weight:400; letter-spacing:-.03em; line-height:1.04; max-width:18ch; margin-bottom:44px}
.fgrid{display:grid; gap:26px}
/* Four columns since 2026-08-27, when confession times joined the footer so
   they sit on every page. Two-up first, because four across a tablet is thin. */
@media (min-width:760px){.fgrid{grid-template-columns:1fr 1fr; gap:40px 44px}}
@media (min-width:1080px){.fgrid{grid-template-columns:1.15fr 1fr 1fr 1fr; gap:44px}}
footer h4,footer .fh{font-size:14px; font-weight:400; letter-spacing:0; line-height:1.4; color:var(--grey-dark); margin:0 0 6px}
footer p{margin:0 0 6px; font-size:16px; color:rgba(255,255,255,.86); line-height:1.65}
footer .sp{margin-bottom:14px}
footer a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3)}
footer a:hover{border-bottom-color:var(--accent); color:var(--accent)}
.flegal{margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--grey-dark)}

/* No scroll-reveal animation. Andreas removed it on 2026-08-09.
   Content renders immediately, which is also one less thing that can hide it. */

/* ============================================================
   Added 2026-08-27
   1. Split hero. Both churches, one diagonal seam
   2. Dominican identity, above the fold on every page
   3. Life-event routes, and the confession panel
   ============================================================ */

/* ---------- 1. Split hero ----------
   The parish has two churches and the hero showed one of them.
   A diagonal seam carries both above the fold.

   Both photographs are 1600x500 panoramas from the parish media
   library, and in both the facade sits left of centre. Measured off
   the files, not guessed: the St Laurence's facade spans 25 to 60
   percent of its frame, Our Lady of the Rosary 17 to 55 percent.
   Each panel therefore sizes its image to its OWN half of the hero
   rather than to the full width, so object-position can hold each
   facade inside its own wedge instead of the two fighting over a
   single shared crop. */
.hero--split .pane{position:absolute; inset:0; margin:0; z-index:-2}
.hero--split .pane img{
  position:absolute; top:0; bottom:auto; height:100%; width:56%;
  object-fit:cover; opacity:.84; z-index:auto;
}
.pane--l{clip-path:polygon(0 0, 56% 0, 44% 100%, 0 100%)}
.pane--r{clip-path:polygon(56% 0, 100% 0, 100% 100%, 44% 100%)}
.pane--l img{left:0; right:auto; object-position:34% center}
.pane--r img{left:auto; right:0; object-position:27% center}

/* The seam. A hairline, brightest at the top where the photographs
   are lightest and the scrim over them is thinnest. */
.hero__seam{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(241,237,230,.85),rgba(241,237,230,.20));
  clip-path:polygon(56% 0, 56.26% 0, 44.26% 100%, 44% 100%);
}

/* Each church named on its own side, so the split reads as two
   buildings and not as one panorama with a line through it. */
.hero__marks{position:absolute; inset:0; z-index:2; pointer-events:none}
.hero__marks .shell{position:relative; height:100%}
.hero__mark{
  position:absolute; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.88);
  text-shadow:0 1px 14px rgba(14,13,12,.75);
}
.hero__mark--l{top:22px; left:var(--pad)}
.hero__mark--r{bottom:24px; right:var(--pad); text-align:right}
.hero--split .hero__in{position:relative; z-index:3}

/* Phone. Two side-by-side wedges are each about 220px wide, and these
   photographs are 3.2:1 panoramas, so a vertical split shows a fragment of
   each church and nothing recognisable. Worse, the copy fills a phone frame
   edge to edge, so anything behind it is lost.

   So on a phone the two churches get their own 300px band at the top, still
   divided by a diagonal seam but lying down, and the copy sits below it on
   solid black where every word is legible. Full-width bands also mean each
   photograph keeps about 70 percent of its width instead of 23 percent. */
@media (max-width:719px){
  .hero--split{min-height:0}
  .hero--split .pane{inset:0 0 auto 0; height:300px}
  .pane--l{clip-path:polygon(0 0, 100% 0, 100% 42%, 0 58%)}
  .pane--r{clip-path:polygon(0 58%, 100% 42%, 100% 100%, 0 100%)}
  /* These must outrank `.hero--split .pane img` above, which sets the
     desktop 56% width and full height. A bare `.pane--l img` loses to it
     and the phone hero comes back half black. */
  .hero--split .pane--l img{width:100%; height:58%; top:0; left:0; right:auto}
  .hero--split .pane--r img{width:100%; height:58%; top:42%; left:0; right:auto}
  .hero__seam{inset:0 0 auto 0; height:300px;
    clip-path:polygon(0 58%, 100% 42%, 100% 42.9%, 0 58.9%)}
  /* The scrim covers the photographs only. Below them the copy sits on the
     hero's own black, so it needs no wash at all. */
  .hero--split::after{inset:0 0 auto 0; height:300px;
    background:linear-gradient(180deg,rgba(14,13,12,.16),rgba(14,13,12,.30) 45%,rgba(14,13,12,.52))}
  .hero--split .hero__in{padding-block:324px 40px}
  .hero__marks{inset:0 0 auto 0; height:300px}
  .hero__mark--l{top:14px; left:var(--pad)}
  .hero__mark--r{top:auto; bottom:14px; right:var(--pad)}
  }

/* ---------- 2. Dominican identity, above the fold ----------
   The site carried "a Dominican Parish" in the footer only, and the
   word Catholic appeared nowhere on any page. Both now sit above the
   fold everywhere, with the crest of the Order carrying it. Sentence
   case, not the uppercase eyebrow Andreas ruled out on 2026-08-09. */
.idmark{display:flex; align-items:center; gap:13px; margin-bottom:22px}
.idmark img{width:44px; height:44px; object-fit:contain; flex:none}
/* The hero's own `.hero img` rule absolutely positions every image inside it,
   which is right for the two church photographs and wrong for the crest.
   Put the crest back in the flow. */
.hero .idmark img{position:static; inset:auto; opacity:1; z-index:auto}
.idmark span{font-size:15px; line-height:1.35; letter-spacing:-.005em}
.idmark b{font-weight:600}
.hero .idmark span{color:rgba(255,255,255,.9)}
.hero .idmark b{color:#fff}
.phead .idmark span{color:var(--grey-2)}
.phead .idmark b{color:var(--black)}
@media (min-width:900px){
  .idmark img{width:58px; height:58px}
  .idmark span{font-size:16px}
}

/* ---------- 3. Life-event routes ----------
   The five things people arrive looking for. One row each, saying
   what it is and what to do next, so nobody reads a page to find a
   phone number. */
.routes{margin-top:40px; border-top:1px solid var(--black)}
.route{
  display:grid; gap:8px; padding:24px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;
}
@media (min-width:820px){
  /* The action column is a fixed track, not auto. On auto the longest
     label ("Call (08) 8344 1347") widened its own row and every
     description started at a different x. */
  .route{grid-template-columns:minmax(210px,1fr) 1.7fr 190px; gap:30px; align-items:baseline}
  .route__go{text-align:right}
}
.route h3{font-weight:600; transition:color .2s var(--ease)}
.route:hover h3{color:var(--accent)}
.route p{font-size:16px; color:var(--grey-2); margin:0}
.route:last-of-type{border-bottom:none}
.route__go{font-size:14.5px; color:var(--grey); white-space:nowrap; transition:color .2s var(--ease)}
.route:hover .route__go{color:var(--accent)}

/* ---------- Confession panel ----------
   Times on one side, the two ways to arrange another time on the
   other. Both matter equally, so neither is a footnote. */
.conf{display:grid; gap:30px; margin-top:40px; padding-top:26px; border-top:1px solid var(--black)}
@media (min-width:820px){.conf{grid-template-columns:1fr 1fr; gap:60px}}
.conf h3{margin-bottom:16px}
.conf__row{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:14px 0; border-bottom:1px solid var(--line)}
.conf__row b{font-weight:400; color:var(--grey-2); font-size:16px}
.conf__row span{font-size:17px; text-align:right; white-space:nowrap}
.conf__row em{font-style:normal; display:block; font-size:13.5px; color:var(--grey); margin-top:3px; white-space:normal}
.conf__alt p{font-size:16px; color:var(--grey-2); margin:0 0 16px; max-width:44ch}
.conf__alt p:last-child{margin-bottom:0}
.conf__alt b{color:var(--black); font-weight:600}
.conf__alt a{color:var(--black); text-decoration:none; border-bottom:1px solid var(--line); transition:.2s var(--ease)}
.conf__alt a:hover{color:var(--accent); border-bottom-color:var(--accent)}