/* ============================================================
   components.css — SHIPS TO EVO.  Hand-edited source.

   Originally generated from a Claude Design import. That upstream
   link was cut on 2026-08-08; this file is now edited directly.
   The archived renderer is in tools/archive/ if the design is ever
   re-imported and someone needs to diff against it.

   Rules that must keep holding (checked by `npm run lint`):
     - No CSS reset, and no bare element selectors.
     - Every selector is a single .ntgoc-* class, so nothing can
       collide with the Bootstrap 4.1.3 template on the live site.
     - The responsive layer stays LAST so it wins on source order.
     - Image URLs are ../img/... — relative to THIS file, not the page.
   ============================================================ */

/* --- skip link ----------------------------------------------------- */
.ntgoc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #3a1414;
  color: #f6f1e8;
  padding: 12px 20px;
}
.ntgoc-skip-link:focus { left: 0; }

/* --- draft-preview banner ------------------------------------------
   Demo scaffolding, but styled here so it travels with its chunk.
   Remove this block if the draft ever becomes the real site.
   ------------------------------------------------------------------ */
.ntgoc-draft-banner {
  background: #7d2b2b;
  color: #fdf6e9;
  padding: 10px 20px;
  text-align: center;
  position: relative;
  z-index: 100;
}
.ntgoc-draft-banner__text {
  margin: 0 auto;
  max-width: 70rem;
  font-family: Karla, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
.ntgoc-draft-banner__link { color: #ffd98a; text-decoration: underline; }

/* --- link colour inheritance ----------------------------------------
   The design expressed most navigation as clickable <span>/<div> with no
   colour of their own; the renderer promotes them to real <a> for keyboard
   access. Without this rule they would pick up the ambient bare-element link
   colour — from this site's own reset, or from Bootstrap once inside EVO — and
   the top bar and footer links would sit at about 1.6:1 against their dark
   background. Inheriting restores them to roughly 8.7:1 and 11:1.

   Specificity is deliberately a single class (0,1,0) and this rule is placed
   BEFORE the generated rules, so any link that DOES declare its own colour
   still wins on source order, and :hover (0,1,1) always wins.
   ------------------------------------------------------------------ */
.ntgoc-inherit { color: inherit; }

/* The page measure and the page gutter. Both classes were carried on every
   section in the markup but only ever declared inside the media queries at the
   foot of this file — so at desktop width they did nothing, and all twenty
   -shell rules re-declared the same max-width, centring and 40px side padding
   for themselves. Declared once here, the -shell rules keep only what actually
   differs between sections: their vertical rhythm. */
.ntgoc-shell { max-width: 1240px; margin: 0 auto; }
.ntgoc-gutter { padding-left: 40px; padding-right: 40px; }

/* --- links inside running text --------------------------------------
   The design removes underlines everywhere. Inside a paragraph that leaves
   colour as the only signal that a word is a link, which fails for anyone who
   cannot distinguish it (axe: "link-in-text-block" — measured 1.24:1 against
   the surrounding text). Underline them in body copy only; standalone
   navigation links keep the design's clean look.

   Colour is included here too (issue #16). Many anchors carry no class of
   their own — only their containing paragraph does — so the demo-only
   reset stylesheet's `a { color: #7d2b2b }` was the only thing painting
   them brick. That reset is not imported into Evolution CMS, and nothing
   in this file set colour on a running-text link before, so on the live
   parish template Bootstrap 4.1.3's reboot would show its own blue
   (#007bff) instead. Declaring it here, scoped to these containers, keeps
   the brick colour in both places without classing every anchor by hand.
   ------------------------------------------------------------------ */
.ntgoc-body a,
.ntgoc-body-lg a,
.ntgoc-linked-text a,
.ntgoc-parish-text a,
.ntgoc-proposal__text a,
.ntgoc-proposal__note a,
.ntgoc-members__text a,
.ntgoc-committee-text a,
.ntgoc-fellowship-detail__value a,
.ntgoc-about-clergy-text-8 a,
.ntgoc-step-note a,
.ntgoc-welcome-intro__text a,
.ntgoc-welcome-hint a,
.ntgoc-question__preview a,
.ntgoc-stage__lede a,
.ntgoc-traditions-lede a,
.ntgoc-agape-source a,
.ntgoc-prose a {
  color: #7d2b2b;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ntgoc-body a:hover, .ntgoc-body a:focus-visible,
.ntgoc-body-lg a:hover, .ntgoc-body-lg a:focus-visible,
.ntgoc-linked-text a:hover, .ntgoc-linked-text a:focus-visible,
.ntgoc-parish-text a:hover, .ntgoc-parish-text a:focus-visible,
.ntgoc-proposal__text a:hover, .ntgoc-proposal__text a:focus-visible,
.ntgoc-proposal__note a:hover, .ntgoc-proposal__note a:focus-visible,
.ntgoc-members__text a:hover, .ntgoc-members__text a:focus-visible,
.ntgoc-committee-text a:hover, .ntgoc-committee-text a:focus-visible,
.ntgoc-fellowship-detail__value a:hover, .ntgoc-fellowship-detail__value a:focus-visible,
.ntgoc-about-clergy-text-8 a:hover, .ntgoc-about-clergy-text-8 a:focus-visible,
.ntgoc-step-note a:hover, .ntgoc-step-note a:focus-visible,
.ntgoc-welcome-intro__text a:hover, .ntgoc-welcome-intro__text a:focus-visible,
.ntgoc-welcome-hint a:hover, .ntgoc-welcome-hint a:focus-visible,
.ntgoc-question__preview a:hover, .ntgoc-question__preview a:focus-visible,
.ntgoc-stage__lede a:hover, .ntgoc-stage__lede a:focus-visible,
.ntgoc-traditions-lede a:hover, .ntgoc-traditions-lede a:focus-visible,
.ntgoc-agape-source a:hover, .ntgoc-agape-source a:focus-visible,
.ntgoc-prose a:hover, .ntgoc-prose a:focus-visible {
  color: #b08442;
}

/* --- standalone links that carry no class of their own ---------------
   A few unclassed anchors sit outside any of the running-text containers
   above: the seven parish-council contact cards on about.html, a "Follow"
   row of social links on contact.html, and the day's-reading row on the
   home page. None is embedded in a sentence, so the no-underline look
   above is correct for them too — but they still need brick, not
   Bootstrap blue, once the demo-only reset stylesheet is gone. Scoped to
   their existing container class; no new class needed on the anchors
   themselves.
   ------------------------------------------------------------------ */
.ntgoc-about-parish-council-small a,
.ntgoc-contact-card-row a,
.ntgoc-home-upcoming-services-row a {
  color: #7d2b2b;
}
.ntgoc-about-parish-council-small a:hover, .ntgoc-about-parish-council-small a:focus-visible,
.ntgoc-contact-card-row a:hover, .ntgoc-contact-card-row a:focus-visible,
.ntgoc-home-upcoming-services-row a:hover, .ntgoc-home-upcoming-services-row a:focus-visible {
  color: #b08442;
}

/* --- Our Faith topic cards ------------------------------------------
   Each card is a whole link, the same pattern the home page uses for its
   ministry cards. The destinations are the parish's own Our Faith pages,
   which already exist on nativity.va.goarch.org — see IMPORT.md: they should
   become internal resource links once the site is in Evolution CMS.
   -------------------------------------------------------------------- */
/* A column, so the "read more" can be pushed to the bottom. Grid items already
   stretch to the tallest card in the row, so pinning the link to the foot of
   each card lines every link in a row up with the others regardless of how
   much text sits above it. align-self keeps the link shrink-wrapped: as a
   flex item it would otherwise stretch and drag its underline the full width
   of the card. The gap above it is padding rather than margin because
   margin-top is doing the pushing. */
.ntgoc-faith-card { display: flex; flex-direction: column; }
.ntgoc-faith-card > .ntgoc-faith-card__more { margin-top: auto; padding-top: 18px; align-self: flex-start; }
/* The expansion is the heading and the acronym sits under it, so a reader who
   does not already know what GOYA or JOY stands for is not asked to. It lives
   INSIDE the <h2> so the two are one heading to a screen reader rather than a
   heading and a loose line beside it. Sans, because it is a label, and the
   card heading itself is Newsreader and would otherwise be inherited. */
.ntgoc-faith-card__acronym { display:block; margin-top:7px; font-family:Karla, system-ui, sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#7f5f30; }
.ntgoc-faith-card__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7d2b2b;
  border-bottom: 1px solid #d9c6a8;
  padding-bottom: 3px;
}
.ntgoc-faith-card:hover .ntgoc-faith-card__more,
.ntgoc-faith-card:focus-visible .ntgoc-faith-card__more { border-color: #7d2b2b; }
.ntgoc-faith-card:hover { background: #f1e9dc; }

/* The last cell spans the row: an invitation to talk to someone, not another
   topic to read about, so it is deliberately not a whole-card link — it offers
   two different next steps. */
.ntgoc-faith-invite { grid-column: 1 / -1; }
.ntgoc-faith-invite__links { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 18px; }
.ntgoc-faith-invite__links .ntgoc-faith-card__more { margin-top: 0; }
a.ntgoc-faith-card__more:hover,
a.ntgoc-faith-card__more:focus-visible { border-color: #7d2b2b; }

/* --- Events page ----------------------------------------------------- */
.ntgoc-events-note { margin-top: 56px; max-width: 62ch; }
.ntgoc-events-note__link { margin: 18px 0 0; }

/* --- Visit page hero and essentials ----------------------------------
   The hero used to be a title alone in a large parchment band, and the
   practical facts a visitor needs — when, where, which door — were spread
   between a paragraph, a note card and the directions block at the very
   bottom. The lede and the two actions now sit in the hero, and the three
   facts sit directly under it, so the answers are visible before anything
   has to be opened.
   -------------------------------------------------------------------- */

.ntgoc-essentials__grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 40px 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  align-items: start;
}
.ntgoc-essentials__label {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #736249;
  margin-bottom: 16px;
}
.ntgoc-essentials__value {
  font-family: Newsreader, serif;
  font-size: 23px;
  line-height: 1.45;
  color: #3a1414;
}
.ntgoc-essentials__note {
  font-size: 14.5px;
  line-height: 1.65;
  color: #6c6458;
  margin: 12px 0 0;
  max-width: 34ch;
  text-wrap: pretty;
}

/* --- Visit page accordion -------------------------------------------
   Eight sections, each a question a visitor actually asks, collapsed by
   default so the page is scannable rather than 23 screens of prose. Plain
   <details>/<summary>: no JavaScript, keyboard-operable and announced as
   expandable by the browser itself, and it survives the move into EVO.

   The alternating parchment bands are dropped here — a band behind every
   other row fights the rows themselves. One hairline per row instead.
   -------------------------------------------------------------------- */
.ntgoc-accordion-section { border-top: 1px solid #ded2be; }
.ntgoc-accordion-section:last-of-type { border-bottom: 1px solid #ded2be; }

.ntgoc-accordion__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 0;
}
.ntgoc-accordion__summary::-webkit-details-marker { display: none; }

.ntgoc-accordion__title {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.25;
  margin: 0;
  color: #3a1414;
}

/* The marker is drawn rather than typed: a + that loses its upright stroke
   when the row opens, so the state reads at a glance. Shared byte-for-byte
   with the Welcome page's question groups (.ntgoc-welcome-group__summary) —
   grouped here rather than duplicated under both names. The two components
   keep separate border colour, summary padding and title size, which do
   genuinely differ, so only the marker and the hover title colour are
   shared. */
.ntgoc-accordion__summary::after,
.ntgoc-welcome-group__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(#7d2b2b, #7d2b2b) center/16px 1px no-repeat,
    linear-gradient(#7d2b2b, #7d2b2b) center/1px 16px no-repeat;
}
.ntgoc-accordion[open] .ntgoc-accordion__summary::after,
.ntgoc-welcome-group[open] .ntgoc-welcome-group__summary::after {
  background: linear-gradient(#7d2b2b, #7d2b2b) center/16px 1px no-repeat;
}
.ntgoc-accordion__summary:hover .ntgoc-accordion__title,
.ntgoc-welcome-group__summary:hover .ntgoc-welcome-group__title,
.ntgoc-question__summary:hover .ntgoc-question__title { color: #7d2b2b; }

.ntgoc-accordion__body { padding: 6px 0 52px; }

/* The header is sticky, so an anchor jump would otherwise land with the
   section's first line tucked underneath it. */
.ntgoc-page section[id] { scroll-margin-top: 96px; }

/* --- interactive bits ---------------------------------------------- */
/* Expandable text (the Creed, the Lord's Prayer). Works with no JavaScript;
   the arrow is the only thing the browser's default marker gave us, and it
   sits inconsistently across browsers, so it is replaced with a + / −. */
.ntgoc-disclosure > summary { list-style: none; }
.ntgoc-disclosure > summary::-webkit-details-marker { display: none; }
.ntgoc-disclosure > summary::after { content: "  +"; white-space: pre; }
.ntgoc-disclosure[open] > summary::after { content: "  −"; white-space: pre; }


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

/* --- generated component rules (437 rules) --------------------- */
.ntgoc-topbar-row { display:flex; justify-content:space-between; align-items:center; gap:24px; height:38px; background:#3a1414; color:#e8d8bd; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; }
.ntgoc-topbar-metropolis { opacity:.75; }
.ntgoc-header { position:sticky; top:0; z-index:40; background:rgba(246,241,232,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid #ded2be; }
.ntgoc-header-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; height:84px; max-width:1440px; }
.ntgoc-logo { display:flex; align-items:center; gap:16px; }
/* The Archdiocese seal, from the live parish site. The 196px favicon art is
   used here rather than the full logo: the ring text on the full logo is
   unreadable below about 90px and just reads as noise at header size. */
.ntgoc-site-mark { width:44px; height:44px; flex:none; }
.ntgoc-logo-text { line-height:1.15; }
.ntgoc-logo-name { font-family:Newsreader, serif; font-size:20px; font-weight:500; color:#3a1414; letter-spacing:.01em; }
.ntgoc-logo-sub { font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#6c6458; margin-top:3px; }
/* Split out so the phone header can drop the jurisdiction and keep the town.
   The mobile design shows "Fredericksburg, VA" under the parish name, and it
   is the half a visitor is actually checking. */
.ntgoc-logo-sub__jurisdiction { white-space:nowrap; }
.ntgoc-nav { display:flex; align-items:center; gap:24px; font-size:13.5px; letter-spacing:.05em; white-space:nowrap; }
.ntgoc-nav-link { padding-bottom:3px; border-bottom:2px solid transparent; white-space:nowrap; }
.ntgoc-nav-link:hover, .ntgoc-nav-link:focus-visible { color:#7d2b2b; }
/* Nine top-level items rather than six. Above 1180px they sit at the
   design's 24px rhythm; below it the gap closes rather than the row
   wrapping under the logo, which is what it did at 1024px before this. */
@media (max-width: 1180px) {
  .ntgoc-nav { gap:16px; font-size:12.5px; }
}
.ntgoc-btn-primary { background:#7d2b2b; color:#f6f1e8; padding:11px 22px; border-radius:2px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.ntgoc-btn-primary:hover,
.ntgoc-btn-primary:focus-visible,
.ntgoc-drawer__cta:hover,
.ntgoc-drawer__cta:focus-visible,
.ntgoc-visitor-directions-eyebrow:hover,
.ntgoc-visitor-directions-eyebrow:focus-visible,
.ntgoc-calendar-hero-small-caps:hover,
.ntgoc-calendar-hero-small-caps:focus-visible,
.ntgoc-ministries-grid-small-caps:hover,
.ntgoc-ministries-grid-small-caps:focus-visible,
.ntgoc-contact-card-button:hover,
.ntgoc-contact-card-button:focus-visible {
  background:#5e1f1f;
}

/* --- the Parish Life dropdown ---------------------------------------
   Authored here, not transcribed: the design carries "Parish Life" as a
   flat nav item and has no submenu of its own.

   It opens on :hover for pointers and on :focus-within for keyboards, so
   it needs no JavaScript — which is the only version that survives the
   move into Evolution CMS. The keyboard path works because the parent
   link sits INSIDE .ntgoc-navgroup and before the panel: focusing it
   matches :focus-within, which reveals the panel, which is what makes
   the links inside it tabbable. Moving the parent link out of the group,
   or the panel above it, silently strips the submenu from the tab order.

   Below 900px the whole nav is hidden and the drawer takes over, so this
   never has to work on a touch screen — see the responsive layer at the
   foot of this file.
   ------------------------------------------------------------------ */
.ntgoc-navgroup { position:relative; display:flex; align-items:center; }
.ntgoc-navgroup__top { display:inline-flex; align-items:center; gap:7px; }
.ntgoc-navgroup__caret { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid currentColor; opacity:.55; }
.ntgoc-navgroup__menu { position:absolute; top:100%; left:-16px; z-index:50; display:none; min-width:212px; padding:8px 0; background:#faf5ec; border:1px solid #ded2be; border-top:2px solid #7d2b2b; box-shadow:0 10px 26px rgba(58,20,20,.16); }
.ntgoc-navgroup:hover .ntgoc-navgroup__menu,
.ntgoc-navgroup:focus-within .ntgoc-navgroup__menu { display:block; }
.ntgoc-navgroup__item { display:block; padding:10px 20px; color:#3a1414; white-space:nowrap; }
.ntgoc-navgroup__item:hover, .ntgoc-navgroup__item:focus-visible { background:#ece3d5; color:#7d2b2b; }

/* The phone navigation drawer. A native <details>, so it opens and closes with
   no JavaScript at all — here, and in Evolution CMS, whose template loads
   Bootstrap and jQuery that this deliberately does not depend on (they are
   absent from this demo, so anything built on them would look broken in the
   very preview the Parish Council is shown). ntgoc-enhance.js adds Escape,
   outside-click and scroll lock on top, and is optional.
   Hidden above 900px — see the responsive layer at the end of this file. */
.ntgoc-drawer { display:none; position:relative; }
.ntgoc-drawer__toggle { display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-10px; cursor:pointer; list-style:none; color:#3a1414; }
.ntgoc-drawer__toggle::-webkit-details-marker { display:none; }
.ntgoc-drawer__bars { position:relative; width:24px; height:2px; background:currentColor; }
.ntgoc-drawer__bars::before, .ntgoc-drawer__bars::after { content:""; position:absolute; left:0; width:24px; height:2px; background:currentColor; transition:transform .18s ease, top .18s ease; }
.ntgoc-drawer__bars::before { top:-7px; }
.ntgoc-drawer__bars::after { top:7px; }
.ntgoc-drawer[open] .ntgoc-drawer__bars { background:transparent; }
.ntgoc-drawer[open] .ntgoc-drawer__bars::before { top:0; transform:rotate(45deg); }
.ntgoc-drawer[open] .ntgoc-drawer__bars::after { top:0; transform:rotate(-45deg); }
/* Once open, the hamburger is the ✕ on the full-screen panel, so it has to
   float above it — z-index one higher than the panel, aligned with the title
   row inside. Being the <summary>, it still closes the panel with no script. */
.ntgoc-drawer[open] .ntgoc-drawer__toggle { position:fixed; top:10px; right:14px; z-index:71; margin-right:0; }
/* Full screen, fixed to the viewport rather than hung off the header. The
   header is sticky, so on an unscrolled page it sits about 220px down, below
   the draft banner and the top bar — a panel anchored to it either falls off
   the bottom of the screen or has to be capped short to avoid it. Covering
   the viewport removes the question. 100dvh, not 100vh, so a phone's URL bar
   does not clip the last row. */
.ntgoc-drawer__panel {
  position:fixed; inset:0; z-index:70;
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
  overflow:hidden;
  background:#f6f1e8;
}
/* Browsers hide a closed <details> by their own means — Chrome skips painting
   the content rather than removing its box, which left this fixed panel with a
   34x844 phantom box down the side of every page. Not painted and not
   clickable, but not something to leave to engine behaviour either. */
.ntgoc-drawer:not([open]) .ntgoc-drawer__panel { display:none; }
/* The panel covers the site header, so it carries its own: the parish name,
   and the ✕ — which is the <summary>, floated over this row when open, so
   that closing needs no JavaScript. */
.ntgoc-drawer__head { display:flex; align-items:center; flex:none; height:64px; padding:0 20px; border-bottom:1px solid #ded2be; font-family:Newsreader, serif; font-size:17px; color:#3a1414; }
/* Only the links scroll. The Give row and the service card stay put against
   the bottom edge, the way the two buttons do on the site this follows. */
.ntgoc-drawer__list { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ntgoc-drawer__utility { flex:none; border-top:1px solid #ded2be; }
.ntgoc-drawer__cta { display:block; padding:18px 20px; background:#7d2b2b; color:#f6f1e8; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.ntgoc-drawer__link { display:block; padding:17px 20px; border-bottom:1px solid #e4dac8; font-family:Newsreader, serif; font-size:22px; color:#3a1414; }
.ntgoc-drawer__sub { display:block; padding:14px 20px 14px 38px; border-bottom:1px solid #e4dac8; font-family:Newsreader, serif; font-size:19px; color:#5b5449; }
.ntgoc-drawer__link:hover, .ntgoc-drawer__link:focus-visible,
.ntgoc-drawer__sub:hover, .ntgoc-drawer__sub:focus-visible { background:#ece3d5; color:#7d2b2b; }
.ntgoc-drawer__utility-link { display:block; padding:17px 20px; border-bottom:1px solid #e4dac8; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#6c6458; }
.ntgoc-drawer__utility-link:hover, .ntgoc-drawer__utility-link:focus-visible { color:#7d2b2b; }
.ntgoc-drawer__service { padding:20px; background:#7d2b2b; color:#f6ece0; }
.ntgoc-drawer__service-label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.72; margin-bottom:6px; }
.ntgoc-drawer__service-time { font-family:Newsreader, serif; font-size:19px; line-height:1.4; }

/* Set on <body> by ntgoc-enhance.js while the drawer is open, so the page
   behind it does not scroll. Nothing references it in the markup; lint knows
   it is real because the JS names it. */
.ntgoc-scroll-locked { overflow:hidden; }

.ntgoc-page-hero__action--primary { background:#e0b673; color:#3a1414; padding:16px 30px; border-radius:2px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.ntgoc-page-hero__action--primary:hover, .ntgoc-page-hero__action--primary:focus-visible { background:#f0cd91; }
.ntgoc-page-hero__action--secondary { border:1px solid rgba(232,217,196,.5); color:#f0e6d6; padding:16px 30px; border-radius:2px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }
.ntgoc-page-hero__action--secondary:hover, .ntgoc-page-hero__action--secondary:focus-visible { border-color:#e0b673; color:#e0b673; }
.ntgoc-home-service-times-on-brick { background:#7d2b2b; color:#f6ece0; }
.ntgoc-home-service-times-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:rgba(246,241,232,.18); }
.ntgoc-home-service-times-card { background:#7d2b2b; padding:30px 28px; }
.ntgoc-home-service-times-eyebrow { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.7; margin-bottom:10px; }
.ntgoc-home-service-times-lede { font-family:Newsreader, serif; font-size:25px; font-weight:400; }
.ntgoc-home-service-times-text { font-size:13.5px; opacity:.85; margin-top:4px; }
/* Phone-only. On a phone the address is something you act on — a visitor is
   standing outside, or in a car. On desktop the hero already carries
   "Directions & contact" a few hundred pixels above, so this stays hidden
   rather than repeating it. Shown by the responsive layer. */
.ntgoc-home-service-times-actions { display:none; gap:10px; margin-top:16px; }
.ntgoc-home-service-times-action { display:block; flex:1; padding:13px 10px; border:1px solid rgba(246,241,232,.4); text-align:center; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.ntgoc-home-service-times-action:hover, .ntgoc-home-service-times-action:focus-visible { border-color:#e6b96a; color:#e6b96a; }
.ntgoc-home-welcome-shell { padding-top:104px; padding-bottom:88px; }
.ntgoc-home-welcome-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:88px; align-items:start; }
.ntgoc-home-welcome-micro-caps { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#736249; margin-bottom:26px; }
.ntgoc-home-welcome-quote { font-family:Newsreader, serif; font-size:34px; line-height:1.34; font-weight:300; font-style:italic; color:#3a1414; margin:0 0 22px; text-wrap:pretty; }
.ntgoc-home-welcome-eyebrow { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#6c6458; }
.ntgoc-home-welcome-text { font-size:17px; line-height:1.75; color:#4a443c; }
.ntgoc-home-welcome-text-3 { margin:0 0 20px; text-wrap:pretty; }
.ntgoc-about-clergy-text-8 { margin:0; text-wrap:pretty; }
.ntgoc-home-welcome-row { display:flex; gap:28px; margin-top:34px; flex-wrap:wrap; }
.ntgoc-home-welcome-link { font-size:13.5px; letter-spacing:.06em; color:#7d2b2b; border-bottom:1px solid #d9c6a8; padding-bottom:3px; }
.ntgoc-home-welcome-link:hover,
.ntgoc-home-welcome-link:focus-visible,
.ntgoc-home-upcoming-services-small-caps:hover,
.ntgoc-home-upcoming-services-small-caps:focus-visible,
.ntgoc-visitor-what-to-eyebrow:hover,
.ntgoc-visitor-what-to-eyebrow:focus-visible,
.ntgoc-parish-life-card__link:hover,
.ntgoc-parish-life-card__link:focus-visible,
.ntgoc-parish-link:hover,
.ntgoc-parish-link:focus-visible {
  border-color:#7d2b2b;
}
.ntgoc-band { background:#ece3d5; border-top:1px solid #ded2be; border-bottom:1px solid #ded2be; }
.ntgoc-visitor-directions-shell { padding-top:88px; padding-bottom:88px; }
.ntgoc-festival-details-eyebrow,
.ntgoc-announce__kind { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#7f5f30; margin-bottom:12px; }
.ntgoc-step-heading { font-family:Newsreader, serif; font-weight:500; font-size:23px; margin:0 0 14px; color:#3a1414; }
.ntgoc-body { font-size:15px; line-height:1.7; color:#5b5449; margin:0; }
.ntgoc-newsletter-archive-row { display:flex; gap:12px; flex-wrap:wrap; }
.ntgoc-home-upcoming-services-shell { padding-top:96px; padding-bottom:96px; }
.ntgoc-home-upcoming-services-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:80px; }
.ntgoc-home-upcoming-services-heading { font-family:Newsreader, serif; font-weight:400; font-size:40px; margin:0 0 8px; color:#3a1414; }
.ntgoc-home-upcoming-services-small-grey-2 { font-size:13px; color:#6c6458; margin-bottom:36px; }
.ntgoc-service-row { display:grid; grid-template-columns:130px 1fr auto; gap:20px; align-items:baseline; padding:22px 0; border-bottom:1px solid #ded2be; }
.ntgoc-service-date { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#7f5f30; }
.ntgoc-h4 { font-family:Newsreader, serif; font-size:20px; color:#3a1414; }
.ntgoc-home-upcoming-services-text { font-size:14px; color:#5b5449; }
.ntgoc-home-upcoming-services-small-grey { font-size:14px; color:#6c6458; margin-top:4px; }
.ntgoc-home-upcoming-services-small-caps { display:inline-block; margin-top:30px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#7d2b2b; border-bottom:1px solid #d9c6a8; padding-bottom:4px; }
.ntgoc-home-upcoming-services-ruled { border:1px solid #ded2be; background:#fbf8f2; }
.ntgoc-home-upcoming-services-media { height:380px; margin-top:30px; background-image:url('../img/feast-transfiguration.jpg'); background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#fbf8f2; }
.ntgoc-home-upcoming-services-box { padding:30px 30px 34px; }
.ntgoc-festival-details-micro-caps { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#7f5f30; margin-bottom:14px; }
.ntgoc-home-upcoming-services-subheading { font-family:Newsreader, serif; font-weight:400; font-size:23px; margin:0 0 6px; color:#3a1414; }
.ntgoc-home-upcoming-services-row { display:flex; flex-direction:column; gap:7px; font-size:15px; line-height:1.5; }
.ntgoc-home-ministries-promo-text { font-size:14.5px; line-height:1.65; color:#5b5449; margin:0; }
.ntgoc-band-dark { background:#3a1414; color:#f0e6d6; }
.ntgoc-home-festival-promo-grid { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:70px; align-items:center; min-height:400px; padding:70px 0; }
.ntgoc-home-festival-promo-micro-caps { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#e0b673; margin-bottom:22px; }
.ntgoc-home-festival-promo-heading { font-family:Newsreader, serif; font-weight:300; font-size:48px; line-height:1.12; margin:0 0 20px; color:#faf5ec; }
.ntgoc-home-festival-promo-text { font-size:17px; line-height:1.7; color:#dcccb4; margin:0 0 32px; max-width:520px; text-wrap:pretty; }
/* The promo's two buttons sat on the home hero's row class, which went when the
   hero moved onto .ntgoc-page-hero. Same declarations, its own name — and not a
   reuse of either look-alike, which is the first thing to check here. Both
   .ntgoc-proposal__row matches on the base declarations and then turns into a
   grid at 900px, which would stack these two buttons on mobile;
   .ntgoc-page-hero__actions adds a 34px top margin and belongs to a hero. That is why lint's duplicate-rule check compares media queries too. */
.ntgoc-home-festival-promo-row { display:flex; gap:14px; flex-wrap:wrap; }
.ntgoc-home-festival-promo-eyebrow { background:#e0b673; color:#3a1414; padding:15px 28px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; border-radius:2px; }
.ntgoc-home-festival-promo-eyebrow:hover, .ntgoc-home-festival-promo-eyebrow:focus-visible { background:#f0cd91; }
.ntgoc-home-festival-promo-small-caps { border:1px solid rgba(240,230,214,.45); color:#f0e6d6; padding:15px 28px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; border-radius:2px; }
.ntgoc-home-festival-promo-small-caps:hover, .ntgoc-home-festival-promo-small-caps:focus-visible { border-color:#e0b673; color:#e0b673; }
.ntgoc-home-ministries-promo-row { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap; }
.ntgoc-home-ministries-promo-heading { font-family:Newsreader, serif; font-weight:400; font-size:40px; margin:0; color:#3a1414; }
.ntgoc-home-ministries-promo-eyebrow { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#7d2b2b; }
.ntgoc-home-ministries-promo-eyebrow:hover, .ntgoc-home-ministries-promo-eyebrow:focus-visible { color:#7f5f30; }
.ntgoc-home-ministries-promo-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:#ded2be; border:1px solid #ded2be; }
.ntgoc-home-ministries-promo-link { background:#f6f1e8; padding:32px 26px; }
.ntgoc-home-ministries-promo-link:hover, .ntgoc-home-ministries-promo-link:focus-visible { background:#fbf8f2; }
.ntgoc-h3-sm { font-family:Newsreader, serif; font-weight:500; font-size:21px; margin:0 0 10px; color:#3a1414; }
.ntgoc-footer { background:#3a1414; color:#ded2be; }
.ntgoc-footer-inner { padding-top:70px; padding-bottom:34px; }
/* Brand column plus four link columns, one per group in the navigation.
   It was 1.4fr + three columns while the markup had four link lists, so the
   fourth wrapped onto a row of its own under the address. */
.ntgoc-footer-grid { display:grid; grid-template-columns:minmax(0,1.3fr) repeat(4, minmax(0,1fr)); gap:40px; }
.ntgoc-footer-title { font-family:Newsreader, serif; font-size:22px; color:#faf5ec; line-height:1.3; margin-bottom:14px; }
.ntgoc-footer-address { font-size:15px; line-height:1.7; opacity:.8; }
.ntgoc-footer-social-row { display:flex; gap:18px; margin-top:20px; font-size:14px; }
.ntgoc-footer-social { color:#e0b673; }
.ntgoc-footer-heading { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.59; margin-bottom:16px; }
.ntgoc-stack { display:grid; gap:10px; font-size:14.5px; }
.ntgoc-footer-link { opacity:.85; }
.ntgoc-footer-link:hover, .ntgoc-footer-link:focus-visible { color:#e0b673; opacity:1; }
.ntgoc-footer-divider { height:1px; background:rgba(224,182,115,.22); margin:44px 0 22px; }
.ntgoc-colophon { display:flex; align-items:center; gap:22px; }
/* The full ring-text logo. The PNG has a transparent background and its ring
   text is dark maroon, which all but vanishes against this footer — so the
   seal sits on a cream disc, which is how it is set on the live site. */
.ntgoc-colophon__seal { width:80px; height:80px; flex:none; box-sizing:border-box; padding:6px; background:#faf5ec; border-radius:50%; }
.ntgoc-footer-colophon-row { flex:1; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:12px; letter-spacing:.08em; opacity:.6; }
.ntgoc-hero-band { background:#ece3d5; border-bottom:1px solid #ded2be; }
.ntgoc-visitor-first-sunday-micro-caps { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:20px 0; border-top:1px solid #ded2be; border-bottom:1px solid #ded2be; margin-bottom:12px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#6c6458; }
.ntgoc-visitor-first-sunday-brick { color:#7d2b2b; }
.ntgoc-visitor-first-sunday-text { color:#c9b795; }
.ntgoc-visitor-first-sunday-grid { display:grid; grid-template-columns:190px minmax(0,1fr); gap:44px; padding:44px 0; border-bottom:1px solid #ded2be; }
.ntgoc-step-number { font-family:Newsreader, serif; font-size:15px; color:#7f5f30; letter-spacing:.2em; margin-bottom:14px; }
.ntgoc-visitor-first-sunday-display-brick { font-family:Newsreader, serif; font-size:26px; color:#7d2b2b; line-height:1.2; }
.ntgoc-visitor-first-sunday-display-ink { font-family:Newsreader, serif; font-weight:500; font-size:28px; margin:0 0 6px; color:#3a1414; }
.ntgoc-visitor-first-sunday-body-italic { font-family:Newsreader, serif; font-style:italic; font-size:17px; color:#6c6458; margin-bottom:18px; }
.ntgoc-prose { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0 0 18px; max-width:62ch; text-wrap:pretty; }
.ntgoc-step-note { font-size:16px; line-height:1.75; color:#5b5449; margin:0; max-width:62ch; border-left:2px solid #d9c6a8; padding-left:20px; text-wrap:pretty; }
.ntgoc-visitor-first-sunday-eyebrow { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#6c6458; }
.ntgoc-visitor-first-sunday-body-muted { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0 0 22px; max-width:62ch; text-wrap:pretty; }
.ntgoc-clergy-grid { display:grid; grid-template-columns:380px minmax(0,1fr); gap:70px; align-items:start; }
.ntgoc-visitor-language-text { font-family:Newsreader, serif; font-weight:300; font-size:30px; line-height:1.45; color:#3a1414; margin:0; max-width:24ch; text-wrap:pretty; }
.ntgoc-visitor-language-subheading { font-family:Newsreader, serif; font-weight:500; font-size:23px; margin:34px 0 14px; color:#3a1414; }
.ntgoc-visitor-language-note { font-size:16px; line-height:1.75; color:#5b5449; margin:0 0 34px; max-width:62ch; border-left:2px solid #d9c6a8; padding-left:20px; text-wrap:pretty; }
.ntgoc-visitor-language-card { border:1px solid #ccbda4; background:#ece3d5; padding:30px 28px; max-width:62ch; margin:0 0 18px; }
.ntgoc-visitor-language-display-brick { font-family:Newsreader, serif; font-size:26px; color:#7d2b2b; line-height:1.3; margin:0 0 8px; }
.ntgoc-visitor-language-body-italic { font-family:Newsreader, serif; font-style:italic; font-size:17px; color:#6c6458; margin:0 0 14px; }
.ntgoc-visitor-language-body-muted-2 { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0 0 26px; max-width:62ch; text-wrap:pretty; }
.ntgoc-visitor-language-box-3 { max-width:62ch; }
.ntgoc-visitor-language-rule { border-top:1px solid #ded2be; padding:20px 0; }
.ntgoc-visitor-language-eyebrow { cursor:pointer; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#7d2b2b; }
.ntgoc-visitor-language-box { padding-top:18px; }
.ntgoc-visitor-language-body-muted { font-size:15px; line-height:1.7; color:#5b5449; margin:0 0 20px; }
.ntgoc-visitor-language-body-ink-2 { font-family:Newsreader, serif; font-size:16.5px; line-height:1.85; color:#3a1414; margin:0 0 14px; }
.ntgoc-visitor-language-body-ink { font-family:Newsreader, serif; font-size:16.5px; line-height:1.85; color:#3a1414; margin:0; }
.ntgoc-visitor-language-ruled { border-top:1px solid #ded2be; border-bottom:1px solid #ded2be; padding:20px 0; }
.ntgoc-visitor-language-body-ink-3 { font-family:Newsreader, serif; font-size:16.5px; line-height:1.85; color:#3a1414; margin:0 0 20px; }
.ntgoc-visitor-language-body-muted-3 { font-family:Newsreader, serif; font-size:16.5px; line-height:1.85; color:#5b5449; margin:0; }
.ntgoc-visitor-language-body-muted-4 { font-size:16.5px; line-height:1.75; color:#5b5449; margin:34px 0 0; max-width:62ch; text-wrap:pretty; }
.ntgoc-visitor-what-to-body-muted { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0 0 34px; max-width:62ch; text-wrap:pretty; }
.ntgoc-visitor-what-to-note { font-size:16px; line-height:1.75; color:#5b5449; margin:0 0 18px; max-width:62ch; border-left:2px solid #d9c6a8; padding-left:20px; text-wrap:pretty; }
.ntgoc-visitor-what-to-text { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0; max-width:62ch; text-wrap:pretty; }
.ntgoc-visitor-what-to-text-4 { margin:0 0 34px; }
.ntgoc-visitor-what-to-eyebrow { cursor:pointer; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#7d2b2b; border-bottom:1px solid #d9c6a8; padding-bottom:4px; }
.ntgoc-visitor-children-card { border:1px solid #ccbda4; background:#f6f1e8; padding:30px 28px; max-width:62ch; margin:0 0 34px; }
.ntgoc-person-bio { font-size:15px; line-height:1.7; color:#5b5449; margin:0 0 16px; }
.ntgoc-visitor-greeters-figure { margin:0; }
.ntgoc-visitor-greeters-box-3 { max-width:62ch; margin:0 0 46px; }
.ntgoc-visitor-greeters-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; }
.ntgoc-visitor-greeters-eyebrow { height:230px; display:flex; align-items:center; justify-content:center; background:#ece3d5; border:1px solid #ccbda4; color:#6c6458; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.ntgoc-visitor-greeters-box { padding-top:16px; }
.ntgoc-visitor-greeters-lede { font-family:Newsreader, serif; font-size:22px; color:#3a1414; line-height:1.2; margin-bottom:6px; }
.ntgoc-visitor-greeters-micro-caps { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#736249; }
.ntgoc-visitor-greeters-text { font-family:Newsreader, serif; font-style:italic; font-size:15.5px; line-height:1.6; color:#6c6458; margin:10px 0 0; }
.ntgoc-visitor-greeters-card { border:1px solid #ccbda4; background:#ece3d5; padding:30px 28px; margin-top:46px; max-width:62ch; }
.ntgoc-visitor-when-you-text { font-family:Newsreader, serif; font-style:italic; font-size:21px; line-height:1.5; color:#3a1414; margin:0; max-width:40ch; text-wrap:pretty; }
.ntgoc-visitor-directions-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:70px; align-items:center; }
.ntgoc-page-eyebrow { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#736249; margin-bottom:20px; }
.ntgoc-visitor-directions-heading { font-family:Newsreader, serif; font-weight:400; font-size:36px; margin:0 0 20px; color:#3a1414; }
.ntgoc-visitor-directions-text { font-size:17px; line-height:1.7; color:#5b5449; margin:0 0 28px; }
.ntgoc-visitor-directions-body-grid { display:grid; gap:16px; font-size:15.5px; line-height:1.6; color:#5b5449; border-top:1px solid #e4dac8; padding-top:26px; }
.ntgoc-ink { color:#3a1414; }
.ntgoc-visitor-directions-eyebrow { display:inline-block; margin-top:32px; background:#7d2b2b; color:#f6f1e8; padding:15px 28px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; border-radius:2px; }
.ntgoc-visitor-directions-media { height:400px; border:1px solid #ded2be; background-color:#e6ddcd; background-image:url('../img/directions-map.jpg'); background-size:contain; background-repeat:no-repeat; background-position:center; }
.ntgoc-faith-intro-shell { padding-top:84px; padding-bottom:60px; }
.ntgoc-faith-intro-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; }
.ntgoc-faith-intro-text { font-family:Newsreader, serif; font-size:27px; line-height:1.5; font-weight:300; color:#3a1414; margin:0; text-wrap:pretty; }
.ntgoc-about-clergy-body-muted { font-size:16.5px; line-height:1.75; color:#5b5449; }
.ntgoc-about-clergy-text { margin:0 0 18px; text-wrap:pretty; }
.ntgoc-events-list-shell { padding-top:20px; padding-bottom:96px; }
/* On Events the same block sits directly under the photograph hero, with no
   intro section between, so it needs the full gap the other pages use. */
.ntgoc-events-list-shell--under-hero { padding-top: 84px; }
.ntgoc-events-list-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:#ded2be; border:1px solid #ded2be; }
/* Two cards, not three. The base grid is a fixed three-column track, so a
   section with two cards leaves the third column showing as a solid block of
   the grid background, which reads as a card that failed to load. Deliberately
   defined ABOVE the blanket `.ntgoc-grid { grid-template-columns: 1fr }` in the
   900px media query, so mobile still collapses to one column. */
.ntgoc-events-list-grid--pair { grid-template-columns:repeat(2, 1fr); }
.ntgoc-card { background:#f6f1e8; padding:36px 30px; }
.ntgoc-h3 { font-family:Newsreader, serif; font-weight:500; font-size:23px; margin:0 0 12px; color:#3a1414; }

/* A heading that opens a new part of one continuous article, rather than one
   that opens a section of its own. .ntgoc-h3 carries no top margin because it
   almost always sits first inside a block that is already padded; when it
   follows body copy instead, it needs the space the padding would have given
   it. Applies only where prose and heading are siblings, so nothing that sits
   at the top of its own section moves. */
.ntgoc-prose + .ntgoc-h3 { margin-top:44px; }
/* A long read centred in the page. .ntgoc-prose caps the measure at 62ch but
   leaves the column hard against the left edge, which on a wide screen strands
   a narrow ribbon of text beside half a page of nothing. Wrap a whole article
   in this and the column sits in the middle instead. Text stays left-aligned:
   centred body copy is hard to read at this length. */
.ntgoc-article { max-width:62ch; margin-left:auto; margin-right:auto; }
.ntgoc-band-rule-top { background:#ece3d5; border-top:1px solid #ded2be; }
.ntgoc-faith-watch-read-shell,
.ntgoc-parish-section { padding-top:76px; padding-bottom:76px; }
.ntgoc-faith-watch-read-heading { font-family:Newsreader, serif; font-weight:400; font-size:34px; margin:0 0 34px; color:#3a1414; }
.ntgoc-faith-watch-read-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:26px; }
.ntgoc-faith-watch-read-link { display:block; border:1px solid #ded2be; background:#f6f1e8; }
.ntgoc-faith-watch-read-row { height:150px; background:#3a1414; display:flex; flex-direction:column; justify-content:center; padding:24px; }
.ntgoc-faith-watch-read-eyebrow { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#e0b673; margin-bottom:10px; }
.ntgoc-faith-watch-read-lede { font-family:Newsreader, serif; font-weight:300; font-size:22px; line-height:1.25; color:#faf5ec; }
.ntgoc-faith-watch-read-box { padding:24px; }
.ntgoc-faith-watch-read-text { font-size:13px; color:#6c6458; margin-top:8px; }
.ntgoc-faith-watch-read-media { height:150px; background-image:url('../img/faith-ascension.jpg'); background-size:cover; background-position:center; }
.ntgoc-faith-watch-read-media-4 { height:150px; background-image:url('../img/faith-holy-sites.jpg'); background-size:cover; background-position:center; }
.ntgoc-faith-watch-read-media-5 { height:150px; background-image:url('../img/faith-elders.jpg'); background-size:cover; background-position:center; }
.ntgoc-calendar-hero-row-3 { display:flex; gap:10px; }
.ntgoc-calendar-hero-eyebrow { cursor:pointer; border:1px solid #ccbda4; padding:11px 20px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#5b5449; }
.ntgoc-calendar-hero-small-caps { cursor:pointer; background:#7d2b2b; color:#f6f1e8; padding:11px 20px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.ntgoc-calendar-grid-shell { padding-top:70px; padding-bottom:96px; }
.ntgoc-calendar-grid-grid-4 { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:70px; align-items:start; }
.ntgoc-calendar-grid-grid-ruled { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:1px; background:#ded2be; border:1px solid #ded2be; }
.ntgoc-calendar-weekday { background:#ece3d5; padding:12px 10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6c6458; text-align:center; }
.ntgoc-calendar-day { background:#f6f1e8; min-height:104px; padding:9px 10px; min-width:0; overflow:hidden; }
.ntgoc-calendar-daynum { font-size:13px; color:#6c6458; margin-bottom:6px; }
.ntgoc-calendar-event { background:#f2e5dd; border-left:2px solid #7d2b2b; padding:5px 7px; font-size:11.5px; line-height:1.35; color:#5e1f1f; }
/* A day can hold more than one entry now that Sunday shows both Orthros and the
   Liturgy, so they need separating. */
.ntgoc-calendar-day__events { display:grid; gap:4px; }
/* Divine service or other parish activity. Styled off the data attribute the
   build writes, rather than a modifier class, so adding the parish's first
   meeting or class to data/parish-calendar.json needs no CSS at all. In the
   grid the colour is a hint; the week list on for-our-parish.html carries the
   written label, and a parish entry here also announces itself to a screen
   reader, so nothing is said by colour alone. */
.ntgoc-calendar-event[data-ntgoc-kind="parish"] { background:#f3ecdc; border-left-color:#b08442; color:#5d4a20; }
.ntgoc-calendar-grid-micro-caps { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#7f5f30; margin-bottom:18px; }
.ntgoc-calendar-grid-grid { display:grid; gap:0; border-top:1px solid #ded2be; }
.ntgoc-calendar-grid-rule { padding:16px 0; border-bottom:1px solid #ded2be; }
.ntgoc-calendar-grid-lede { font-family:Newsreader, serif; font-size:19px; color:#3a1414; }
.ntgoc-calendar-grid-text { font-size:14.5px; color:#5b5449; margin-top:4px; }
.ntgoc-calendar-grid-card { margin-top:34px; background:#ece3d5; border:1px solid #ded2be; padding:26px 24px; }
.ntgoc-calendar-grid-lede-ink { font-family:Newsreader, serif; font-size:20px; color:#3a1414; margin-bottom:10px; }
.ntgoc-calendar-grid-small-muted { font-size:14.5px; line-height:1.65; color:#5b5449; margin:0 0 14px; }
.ntgoc-calendar-grid-body-brick { font-size:15px; color:#7d2b2b; }
.ntgoc-hero-band__shell { padding-top:76px; padding-bottom:66px; }
.ntgoc-hero-band__title { font-family:Newsreader, serif; font-weight:300; font-size:54px; line-height:1.1; margin:0 0 20px; color:#3a1414; max-width:18ch; }
.ntgoc-committees-hero-text { font-size:17.5px; line-height:1.7; color:#4a443c; margin:0; max-width:640px; text-wrap:pretty; }
.ntgoc-committees-list-shell { padding-top:80px; padding-bottom:96px; }
.ntgoc-ministries-grid-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#ded2be; border:1px solid #ded2be; }
.ntgoc-card-lg { background:#f6f1e8; padding:40px 32px; }
.ntgoc-ministry-eyebrow { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#7f5f30; margin-bottom:14px; }
.ntgoc-h3-lg { font-family:Newsreader, serif; font-weight:500; font-size:24px; margin:0 0 12px; color:#3a1414; }
.ntgoc-ministries-grid-row { background:#ece3d5; padding:40px 32px; display:flex; flex-direction:column; justify-content:center; }
.ntgoc-ministries-grid-small-caps { align-self:flex-start; background:#7d2b2b; color:#f6f1e8; padding:13px 24px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.ntgoc-section-shell { padding-top:84px; padding-bottom:90px; }
/* The photograph is 190x315 and the slot is 380x420, so `cover` scales it 2x and
   crops 210px off the height. 52% is where that 210px window holds the whole
   head with a little air above it. It also survives the mobile rule below, where
   .ntgoc-tall goes full-width and the window narrows to about 148 source pixels
   — barely more than the head itself. Re-measure this if the photograph
   changes; the old 20% was framed for a different, wider picture. */
.ntgoc-about-clergy-media { height:420px; background-image:url('../img/clergy-fr-john.jpg'); background-size:cover; background-position:center 52%; border:1px solid #ded2be; background-color:#e6ddcd; }
.ntgoc-about-clergy-box { margin-top:22px; }
.ntgoc-about-clergy-lede { font-family:Newsreader, serif; font-size:24px; color:#3a1414; line-height:1.25; }
.ntgoc-about-clergy-eyebrow { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#7f5f30; margin-top:8px; }
.ntgoc-about-clergy-body-muted-2 { font-size:15px; color:#5b5449; margin-top:14px; line-height:1.7; }
.ntgoc-display-lede { font-family:Newsreader, serif; font-size:26px; line-height:1.5; font-weight:300; color:#3a1414; margin:0 0 28px; text-wrap:pretty; }
.ntgoc-about-clergy-grid-ruled { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#ded2be; border:1px solid #ded2be; margin-top:44px; }
.ntgoc-about-clergy-card { background:#f6f1e8; padding:26px 22px; }
.ntgoc-about-clergy-display { font-family:Newsreader, serif; font-size:30px; color:#7d2b2b; }
.ntgoc-about-clergy-small-grey { font-size:13.5px; color:#6c6458; margin-top:6px; }
.ntgoc-about-clergy-small-italic { font-size:12.5px; color:#6c6458; margin-top:14px; font-style:italic; }
.ntgoc-about-parish-council-shell { padding-top:80px; padding-bottom:80px; }
.ntgoc-about-parish-council-box-3 { max-width:70ch; margin-bottom:50px; }
.ntgoc-about-parish-council-display-ink { font-family:Newsreader, serif; font-weight:300; font-size:44px; line-height:1.12; margin:0 0 20px; color:#3a1414; }
.ntgoc-about-parish-council-body-loose { font-size:17px; line-height:1.75; color:#4a443c; margin:0; text-wrap:pretty; }
.ntgoc-person-grid,
.ntgoc-directory { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; border-top:1px solid #ded2be; border-left:1px solid #ded2be; }
.ntgoc-person-card { background:#f6f1e8; padding:32px 28px; border-right:1px solid #ded2be; border-bottom:1px solid #ded2be; }
.ntgoc-person-name { font-family:Newsreader, serif; font-weight:500; font-size:22px; margin:0 0 6px; color:#3a1414; }
.ntgoc-person-role { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#7f5f30; margin-bottom:14px; }
.ntgoc-about-parish-council-small { font-size:14px; }
.ntgoc-newsletter-archive-text { font-size:12.5px; color:#6c6458; margin-top:16px; font-style:italic; }
.ntgoc-committee-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:44px; padding:30px 0; border-bottom:1px solid #ded2be; }
.ntgoc-committee-name { font-family:Newsreader, serif; font-weight:500; font-size:23px; margin:0 0 8px; color:#3a1414; }
.ntgoc-leads-line { font-size:14px; color:#6c6458; }
.ntgoc-committee-text { font-size:16px; line-height:1.75; color:#5b5449; margin:0; text-wrap:pretty; }
/* Outreach is the one committee whose mandate needs two paragraphs. */
.ntgoc-committee-text + .ntgoc-committee-text { margin-top:14px; }
.ntgoc-give-projects-shell { padding-top:70px; padding-bottom:70px; }
.ntgoc-newsletter-archive-link { border:1px solid #ccbda4; padding:14px 24px; font-size:14px; color:#5b5449; }
.ntgoc-give-ways-shell { padding-top:84px; padding-bottom:70px; }
.ntgoc-give-ways-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; align-items:start; }
.ntgoc-give-ways-title { font-family:Newsreader, serif; font-weight:300; font-size:50px; line-height:1.12; margin:0 0 24px; color:#3a1414; }
.ntgoc-give-ways-body-muted { font-size:17px; line-height:1.75; color:#5b5449; margin:0 0 18px; text-wrap:pretty; }
.ntgoc-give-ways-body-muted-2 { font-size:17px; line-height:1.75; color:#5b5449; margin:0; text-wrap:pretty; }
.ntgoc-give-ways-card { border:1px solid #ded2be; background:#fbf8f2; padding:38px 34px; }
.ntgoc-give-ways-heading { font-family:Newsreader, serif; font-weight:500; font-size:26px; margin:0 0 22px; color:#3a1414; }
.ntgoc-give-ways-grid-3 { display:grid; gap:14px; }
.ntgoc-give-ways-small-caps { display:block; background:#7d2b2b; color:#f6f1e8; padding:16px 22px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-align:center; }
.ntgoc-give-ways-eyebrow { display:block; border:1px solid #ccbda4; color:#5b5449; padding:16px 22px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-align:center; }
.ntgoc-give-ways-rule { height:1px; background:#e4dac8; margin:26px 0; }
.ntgoc-give-ways-text { font-size:14.5px; line-height:1.7; color:#5b5449; margin:0; }
.ntgoc-give-projects-heading { font-family:Newsreader, serif; font-weight:400; font-size:32px; margin:0 0 34px; color:#3a1414; }
.ntgoc-give-projects-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:60px; align-items:center; }
.ntgoc-give-projects-text { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0; text-wrap:pretty; }
.ntgoc-give-projects-media { display:block; height:180px; background-image:url('../img/give-building-projects.png'); background-size:cover; background-position:center; border:1px solid #ded2be; background-color:#e6ddcd; }
.ntgoc-contact-card-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:80px; align-items:start; }
.ntgoc-contact-card-grid-ruled { display:grid; gap:26px; border-top:1px solid #ded2be; padding-top:28px; }
.ntgoc-contact-card-micro-caps { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#7f5f30; margin-bottom:8px; }
.ntgoc-contact-card-body-ink { font-size:17px; line-height:1.6; color:#3a1414; }
.ntgoc-contact-card-text { font-size:17px; color:#3a1414; }
.ntgoc-contact-card-row { font-size:16px; display:flex; gap:20px; }
.ntgoc-contact-card-media { margin-top:40px; height:260px; border:1px solid #ded2be; background-color:#e6ddcd; background-image:url('../img/directions-map.jpg'); background-size:contain; background-repeat:no-repeat; background-position:center; }
.ntgoc-contact-card-ruled { border:1px solid #ded2be; background:#fbf8f2; padding:40px 36px; }
.ntgoc-contact-card-heading { font-family:Newsreader, serif; font-weight:500; font-size:26px; margin:0 0 8px; color:#3a1414; }
.ntgoc-contact-card-small-grey { font-size:14.5px; line-height:1.65; color:#6c6458; margin:0 0 28px; }
.ntgoc-contact-form { display:grid; gap:18px; }
.ntgoc-contact-card-note { font-size:13px; line-height:1.6; color:#6c6458; margin:0; border-left:2px solid #b08442; padding-left:12px; }
.ntgoc-contact-card-eyebrow,
.ntgoc-demoform__label { display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#6c6458; margin-bottom:7px; }
.ntgoc-contact-card-card,
.ntgoc-demoform__field { border:1px solid #d5c8b1; background:#f6f1e8; height:46px; width:100%; padding:0 14px; font-family:inherit; font-size:15px; color:#5b5449; }
.ntgoc-contact-card-body-ruled { border:1px solid #d5c8b1; background:#f6f1e8; height:130px; width:100%; padding:12px 14px; font-family:inherit; font-size:15px; color:#5b5449; resize:vertical; }
.ntgoc-contact-card-button { background:#7d2b2b; color:#f6f1e8; padding:16px; text-align:center; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; width:100%; border:0; font-family:inherit; }
.ntgoc-festival-details-shell { padding-top:84px; padding-bottom:84px; }
.ntgoc-festival-details-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#ded2be; border:1px solid #ded2be; margin-bottom:60px; }
.ntgoc-festival-details-card { background:#f6f1e8; padding:34px 28px; }
.ntgoc-body-lg { font-size:15.5px; line-height:1.7; color:#5b5449; margin:0; }
.ntgoc-festival-details-grid-3 { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:70px; align-items:start; }
.ntgoc-festival-details-heading { font-family:Newsreader, serif; font-weight:400; font-size:34px; margin:0 0 20px; color:#3a1414; }
.ntgoc-festival-details-text { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0 0 16px; text-wrap:pretty; }
.ntgoc-festival-details-body-muted { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0; }
.ntgoc-festival-details-ruled { border:1px solid #ded2be; background:#fbf8f2; padding:32px 28px; }
.ntgoc-festival-details-body-muted-2 { font-size:15.5px; line-height:1.7; color:#5b5449; margin:0 0 20px; }
.ntgoc-festival-details-small-caps { display:block; background:#7d2b2b; color:#f6f1e8; padding:15px 22px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; text-align:center; }
.ntgoc-hall-rental-grid-3 { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:70px; align-items:start; }
.ntgoc-hall-rental-grid { display:grid; grid-template-columns:1fr auto; padding:16px 0; border-bottom:1px solid #ded2be; }
/* Prose immediately after a spec table would otherwise start hard against the
   last row's rule. */
.ntgoc-calendar-grid-grid + .ntgoc-prose { margin-top:28px; }
.ntgoc-hall-rental-card { border:1px solid #ded2be; background:#fbf8f2; padding:34px 30px; }
/* Payment links live inside the booking card, under a rule — read the agreement,
   contact the office, then pay, in that order and in one column. */
.ntgoc-hall-payments { display:grid; gap:10px; margin-top:26px; padding-top:22px; border-top:1px solid #ded2be; }
.ntgoc-hall-payments__label { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#736249; }
/* A second heading inside one section needs the space the section padding would
   have given it, without paying for a whole extra band. */
.ntgoc-connected-next { margin-top:64px; }
.ntgoc-hall-rental-heading { font-family:Newsreader, serif; font-weight:500; font-size:24px; margin:0 0 14px; color:#3a1414; }
.ntgoc-hall-rental-body-muted { font-size:15px; line-height:1.7; color:#5b5449; margin:0 0 22px; }
.ntgoc-hall-rental-eyebrow { display:block; background:#7d2b2b; color:#f6f1e8; padding:15px 22px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; text-align:center; }
.ntgoc-hall-rental-eyebrow:hover, .ntgoc-hall-rental-eyebrow:focus-visible { background:#5e1f1f; }
.ntgoc-hall-rental-text { font-size:15px; color:#5b5449; margin-top:18px; text-align:center; }
.ntgoc-calendar-hero-eyebrow:hover,
.ntgoc-calendar-hero-eyebrow:focus-visible,
.ntgoc-nextsteps__link:hover,
.ntgoc-nextsteps__link:focus-visible,
.ntgoc-parish-cta--quiet:hover,
.ntgoc-parish-cta--quiet:focus-visible,
.ntgoc-welcome-jump__link:hover,
.ntgoc-welcome-jump__link:focus-visible {
  border-color:#7d2b2b; color:#7d2b2b;
}

/* --- Parish Life ----------------------------------------------------
   Transcribed from the Parish Life page of the Claude Design file. That
   page is built almost entirely from image slots, so nearly every frame
   here is a .ntgoc-photoslot: a labelled placeholder naming the
   photograph the parish still has to supply. They are meant to be seen —
   an empty frame on a draft the Parish Council is reviewing is a request
   for a photograph, which is the honest version of a stock image.
   ------------------------------------------------------------------ */
.ntgoc-photoslot { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:100%; padding:18px; text-align:center; background:#efe7d9; background-image:repeating-linear-gradient(135deg, transparent 0 11px, rgba(176,132,66,.10) 11px 22px); }
.ntgoc-photoslot__label { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#7f5f30; }
.ntgoc-photoslot__hint { font-size:13px; line-height:1.6; color:#6c6458; max-width:34ch; }

/* The three hierarch cards on clergy.html. A fixed portrait ratio is the whole
   point: the official photographs come from three different sources and will
   not arrive the same size, and three cards of different heights would read as
   a ranking rather than a hierarchy. The frame crops them to one shape whether
   it holds a photograph or the placeholder that stands in for one. */
.ntgoc-hierarch__frame { aspect-ratio:3/4; margin-bottom:20px; background:#efe7d9; overflow:hidden; }
.ntgoc-hierarch__frame img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.ntgoc-hierarch__link { margin:14px 0 0; }
/* The ntgoc-photoslot--dark modifier lived here: the placeholder restyled for
   the one frame that sits in a dark band, on Parish Events & Traditions. That
   frame now has its photograph, no other placeholder is in a dark band, and
   lint warns about CSS no page uses. Removed rather than left to rot — `git
   log` has it if a dark band ever needs an empty frame again. Do not put a
   plain photoslot in a dark band without restoring it; the placeholder's ink is
   set for a light background and will be close to unreadable on one.

   Written without leading dots on purpose: lint builds its set of defined
   classes with a regex over this file's raw text, comments included, so a
   dotted class name in a comment reads as a definition and warns forever. */

/* When a photograph does arrive, the .ntgoc-photoslot inside the frame is
   replaced by an <img class="ntgoc-photo">, and nothing else changes: the frame
   keeps its border and its grid cell, and this fills it the same way the
   placeholder did.

   An <img> rather than a background-image, which is how every photograph on the
   rest of the site works. Background images cannot carry alt text, cannot be
   lazy-loaded, and would need a bespoke class per photograph — twenty-odd more
   near-identical rules in here, which is exactly what lint's duplicate-rule
   check exists to complain about. One class covers every frame instead.

   The frames are letterboxed and their aspect ratio moves a long way with the
   viewport — a wide mosaic frame is 548x200 on a desktop and 860x170 at
   the 900px breakpoint — so `cover` is doing real cropping at every size. Give
   the file a generous horizontal margin and keep the subject central. */
.ntgoc-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

/* For a photograph whose subject sits in the upper part of the frame — faces,
   usually. A centred crop beheads a group shot at the 900px breakpoint, where
   this frame is 860x320 and only about 44% of the picture's height survives.
   A modifier rather than a rule per photograph: it says what the picture needs,
   not which picture it is, so the next group shot can reuse it. */
.ntgoc-photo--top { object-position:center 25%; }

/* The hero is on .ntgoc-page-hero. This eyebrow is not part of it, and is not
   dead: the "Coming up at Nativity" block further down the page is now its only
   user. Gold on a dark band, so it is not the same thing as .ntgoc-page-eyebrow,
   which is muted brown for light ones. */
.ntgoc-parish-life-eyebrow { font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#e0b673; margin-bottom:22px; }

.ntgoc-parish-life-section { max-width:1240px; margin:0 auto; padding:88px 40px; }
.ntgoc-parish-life-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.ntgoc-parish-life-split--left { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
.ntgoc-parish-life-split--right { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
.ntgoc-parish-life-split--top { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; }
.ntgoc-parish-life-h2 { font-family:Newsreader, serif; font-weight:300; font-size:46px; line-height:1.12; margin:0 0 22px; color:#3a1414; }
.ntgoc-parish-life-h2--light { color:#faf5ec; }
.ntgoc-parish-life-body { font-size:17.5px; line-height:1.75; color:#4a443c; margin:0; text-wrap:pretty; }
.ntgoc-parish-life-body--light { color:#dcccb4; }
.ntgoc-parish-life-body + .ntgoc-parish-life-h2 { margin-top:34px; }
.ntgoc-parish-life-ctarow { margin-top:30px; }
.ntgoc-parish-life-note { margin-top:28px; padding-top:22px; border-top:1px solid #ded2be; font-size:15px; line-height:1.7; color:#5b5449; }
.ntgoc-parish-life-frame { border:1px solid #ded2be; }
.ntgoc-parish-life-frame--dark { border:1px solid rgba(224,182,115,.35); }
.ntgoc-parish-life-frame--sand { border:1px solid #ccbda4; }
.ntgoc-parish-life-h520 { height:520px; }
.ntgoc-parish-life-h460 { height:460px; }
.ntgoc-parish-life-h440 { height:440px; }
.ntgoc-parish-life-h420 { height:420px; }
.ntgoc-parish-life-h230 { height:230px; }
.ntgoc-parish-life-pair { display:flex; gap:14px; margin-top:26px; }
.ntgoc-parish-life-pair > * { flex:1; min-width:0; height:150px; }
.ntgoc-parish-life-mosaic { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-auto-rows:210px; gap:14px; }
.ntgoc-parish-life-mosaic > * { min-width:0; }
.ntgoc-parish-life-mosaic__wide { grid-column:span 2; }

.ntgoc-parish-life-galleryhead { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:34px; }
.ntgoc-parish-life-gallery { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); grid-auto-rows:190px; grid-auto-flow:dense; gap:14px; }
.ntgoc-parish-life-gallery > * { min-width:0; border:1px solid #ccbda4; }
.ntgoc-parish-life-gallery__w2 { grid-column:span 2; }
.ntgoc-parish-life-gallery__w3 { grid-column:span 3; }
.ntgoc-parish-life-gallery__h2 { grid-row:span 2; }

/* Three photographs across, on a content page rather than in the Parish Life
   mosaics. Deliberately NOT .ntgoc-parish-life-gallery: that grid drops to
   three columns at 900px, where three .__w2 children would each span two of
   them \u2014 one photograph per row with a hole beside it. This one holds three
   columns until the phone breakpoint and then goes to one, so it never shows
   a gap where a photograph should be. Spacing matches .ntgoc-events-note,
   which it follows. */
.ntgoc-photorow { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:56px; }
.ntgoc-photorow > * { min-width:0; }
.ntgoc-parish-life-permission { display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; margin-top:34px; padding-top:22px; border-top:1px solid #ccbda4; align-items:start; }
.ntgoc-parish-life-label { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#7f5f30; }
.ntgoc-parish-life-permission__text { font-size:14.5px; line-height:1.7; color:#5b5449; margin:0; max-width:80ch; }

.ntgoc-parish-life-card__link { align-self:flex-start; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#7d2b2b; border-bottom:1px solid #d9c6a8; padding-bottom:4px; }

.ntgoc-parish-life-cta { display:inline-block; border:1px solid rgba(240,230,214,.45); color:#f0e6d6; padding:15px 28px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; border-radius:2px; }
.ntgoc-parish-life-cta:hover, .ntgoc-parish-life-cta:focus-visible { border-color:#e0b673; color:#e0b673; }
.ntgoc-parish-life-cta--solid { display:inline-block; background:#7d2b2b; color:#f6f1e8; border:0; padding:15px 28px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; border-radius:2px; }
.ntgoc-parish-life-cta--solid:hover, .ntgoc-parish-life-cta--solid:focus-visible { background:#5e1f1f; color:#f6f1e8; }
.ntgoc-parish-life-cta--quiet { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#e0b673; border-bottom:1px solid rgba(224,182,115,.5); padding-bottom:4px; }
.ntgoc-parish-life-cta--quiet:hover, .ntgoc-parish-life-cta--quiet:focus-visible { color:#f0cd91; }

.ntgoc-parish-life-agenda { border-top:1px solid rgba(224,182,115,.28); }
.ntgoc-parish-life-agenda__row { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid rgba(224,182,115,.28); }
.ntgoc-parish-life-agenda__when { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#e0b673; }
.ntgoc-parish-life-agenda__name { font-family:Newsreader, serif; font-size:21px; color:#faf5ec; }
.ntgoc-parish-life-agenda__note { font-size:14px; color:#c3b299; margin-top:4px; }
.ntgoc-parish-life-agenda__time { font-size:14.5px; color:#dcccb4; }

/* --- "Already part of our parish family?" ---------------------------
   The existing-member doorway at the foot of the home page. Deliberately
   quieter than the visitor invitation above it: parchment band, no
   photograph, one link. A parishioner is looking for it; a first-time
   visitor should be able to scroll past it without being recruited.
   ------------------------------------------------------------------ */
.ntgoc-members-shell { padding-top:64px; padding-bottom:64px; }
.ntgoc-members { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:56px; align-items:start; }
.ntgoc-members__heading { font-family:Newsreader, serif; font-weight:400; font-size:34px; line-height:1.15; margin:0 0 10px; color:#3a1414; }
.ntgoc-members__lede { font-family:Newsreader, serif; font-style:italic; font-size:20px; line-height:1.5; color:#6c6458; margin:0; }
.ntgoc-members__text { font-size:16.5px; line-height:1.75; color:#4a443c; margin:0 0 24px; max-width:56ch; text-wrap:pretty; }
.ntgoc-members__cta { display:inline-block; background:#7d2b2b; color:#f6f1e8; padding:14px 26px; border-radius:2px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.ntgoc-members__cta:hover, .ntgoc-members__cta:focus-visible { background:#5e1f1f; color:#f6f1e8; }

/* --- proposed, not existing -----------------------------------------
   The single most important distinction on this draft. Several blocks
   below — visitor follow-up, a trained Welcome Ministry, a parish
   community, a welcome from Fr. John — describe things the parish does
   NOT do today. They are shown because the Council is being asked to
   consider them, and they have to look considered rather than unfinished.

   So: a gold rule down the left, a small labelled tag, and otherwise the
   page's own typography. The label is real text, not a decorative
   ::before, so it is read out and it survives being pasted into EVO.
   Nothing inside one of these blocks may be phrased as current practice.
   ------------------------------------------------------------------ */
.ntgoc-proposal { border:1px solid #d9c6a8; border-left:3px solid #b08442; background:#fbf8f2; padding:30px 32px; }
.ntgoc-proposal--spaced { margin-top:26px; }
.ntgoc-proposal__tag { display:inline-block; margin-bottom:14px; padding:5px 10px; background:#efe2c8; color:#6d5220; font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.ntgoc-proposal__heading { font-family:Newsreader, serif; font-weight:500; font-size:24px; margin:0 0 6px; color:#3a1414; }
.ntgoc-proposal__lede { font-family:Newsreader, serif; font-style:italic; font-size:18px; line-height:1.5; color:#6c6458; margin:0 0 16px; }
.ntgoc-proposal__text { font-size:16px; line-height:1.75; color:#5b5449; margin:0 0 18px; max-width:62ch; text-wrap:pretty; }
.ntgoc-proposal__text:last-child { margin-bottom:0; }
.ntgoc-proposal__note { font-size:13.5px; line-height:1.65; color:#6c6458; margin:18px 0 0; font-style:italic; }
.ntgoc-proposal__row { display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; }
.ntgoc-proposal__cta { display:inline-block; border:1px solid #b08442; color:#6d5220; padding:14px 26px; border-radius:2px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.ntgoc-proposal__cta:hover, .ntgoc-proposal__cta:focus-visible { background:#efe2c8; color:#4a3714; }

/* The demo visitor form. It has no action and no submit handler: nothing
   is collected, which is the point — see the note printed above it. */
.ntgoc-demoform { display:grid; gap:16px; max-width:520px; margin-top:22px; }
.ntgoc-demoform__group { border:0; margin:0; padding:0; }
.ntgoc-demoform__legend { padding:0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#6c6458; margin-bottom:10px; }
.ntgoc-demoform__check { display:flex; gap:10px; align-items:flex-start; font-size:15.5px; line-height:1.6; color:#5b5449; margin-bottom:9px; }
.ntgoc-demoform__check input { margin-top:4px; flex:none; }
.ntgoc-demoform__button { background:#7d2b2b; color:#f6f1e8; padding:16px; text-align:center; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; width:100%; border:0; font-family:inherit; }
.ntgoc-demoform__button:disabled { background:#a08a7a; cursor:not-allowed; }

/* --- Visit page: journey stages -------------------------------------
   The page is now ordered as the visitor's own Sunday rather than as a
   list of questions: before you come, when you arrive, the service
   itself, afterwards. Each stage opens with one of these headers so the
   accordions beneath it read as steps rather than as a flat FAQ.
   ------------------------------------------------------------------ */
.ntgoc-stage { max-width:1240px; margin:0 auto; padding:64px 40px 26px; }
.ntgoc-stage__step { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#7f5f30; margin-bottom:14px; }
.ntgoc-stage__heading { font-family:Newsreader, serif; font-weight:300; font-size:40px; line-height:1.14; margin:0 0 14px; color:#3a1414; }
.ntgoc-stage__lede { font-size:17px; line-height:1.7; color:#4a443c; margin:0; max-width:62ch; text-wrap:pretty; }
/* Every earlier use was a single lede, so the zero margin never showed. The
   catechumen page's patron-saint section runs two, and without this they set
   as one block of text. */
.ntgoc-stage__lede + .ntgoc-stage__lede { margin-top:14px; }

/* --- Visit page: after the first visit ------------------------------- */
.ntgoc-nextsteps__link { display:inline-block; border:1px solid #ccbda4; color:#5b5449; padding:15px 28px; border-radius:2px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }

/* --- For Our Parish --------------------------------------------------
   A parishioner's dashboard, not another marketing page: dense, ruled,
   scannable, and built so that a section which has no content yet reads
   as a shape waiting to be filled rather than as an empty page.
   ------------------------------------------------------------------ */
.ntgoc-parish-section--tight { padding-top:56px; padding-bottom:56px; }
.ntgoc-parish-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:32px; }
.ntgoc-parish-h2 { font-family:Newsreader, serif; font-weight:400; font-size:36px; line-height:1.15; margin:0; color:#3a1414; }
/* The bare heading carries no bottom margin because most of the places it is
   used follow it with a lede that brings its own top margin. Where the next
   thing is body copy, it needs one. */
.ntgoc-parish-h2--spaced { margin-bottom: 20px; }
.ntgoc-parish-sub { font-size:15px; line-height:1.65; color:#6c6458; margin:8px 0 0; max-width:62ch; }
.ntgoc-parish-link { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#7d2b2b; border-bottom:1px solid #d9c6a8; padding-bottom:4px; white-space:nowrap; }

/* This Week at Nativity. Same row shape as the home page's upcoming list,
   because it is the same calendar — see the comment in the markup. */
.ntgoc-week { border-top:1px solid #ded2be; }
.ntgoc-week__row { display:grid; grid-template-columns:170px minmax(0,1fr) auto; gap:24px; align-items:baseline; padding:20px 0; border-bottom:1px solid #ded2be; }
.ntgoc-week__note { font-size:14px; line-height:1.6; color:#6c6458; margin-top:4px; }
.ntgoc-week__time { font-size:14.5px; color:#5b5449; white-space:nowrap; }

/* Announcement cards. Shipped empty on purpose: the shape is what is being
   proposed, and inventing three fake notices would be the one thing on this
   page a parishioner could catch out. --urgent is the variant the parish
   would use for a closure or a schedule change. */
/* auto-fit, not repeat(3): the cards are rendered from
   data/parish-announcements.json now, so there may be one of them or seven.
   A fixed three-column track leaves the container's hairline colour showing
   through as a bare grey block wherever a card is missing. auto-fit collapses
   the empty tracks instead, so two announcements fill the row. */
.ntgoc-announce { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:1px; background:#ded2be; border:1px solid #ded2be; }
.ntgoc-announce__card { background:#f6f1e8; padding:30px 26px; display:flex; flex-direction:column; }
.ntgoc-announce__card--urgent { border-top:3px solid #7d2b2b; }
.ntgoc-announce__kind--urgent { color:#7d2b2b; }
.ntgoc-announce__text { font-size:14.5px; line-height:1.7; color:#5b5449; margin:0 0 16px; }
.ntgoc-announce__meta { margin-top:auto; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#736249; }
/* The parish news category filter.
   These five will report as class-unused until data/parish-news.json has a
   post in it: the filter bar is GENERATED, and the build renders nothing
   when there is nothing to filter. That is deliberate — the alternative was
   shipping an invented parish news post to keep a linter quiet. The active
   state is carried by aria-pressed rather than a second class, so the button
   that looks chosen is the one a screen reader announces as chosen. */
.ntgoc-newsfilter { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:28px; }
.ntgoc-newsfilter__label { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#7f5f30; margin-right:4px; }
.ntgoc-newsfilter__button { font-family:Karla, system-ui, sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#5b5449; background:#fbf8f2; border:1px solid #ccbda4; border-radius:2px; padding:9px 16px; cursor:pointer; }
.ntgoc-newsfilter__button:hover, .ntgoc-newsfilter__button:focus-visible { background:#f1e9dc; }
.ntgoc-newsfilter__button[aria-pressed="true"] { background:#7d2b2b; border-color:#7d2b2b; color:#f6f1e8; }
.ntgoc-newsfilter__status { width:100%; margin:4px 0 0; font-size:13px; color:#6c6458; }

/* The resource directory. Plain ruled links — the point is finding one
   quickly, not admiring the cards. */
.ntgoc-directory__item { display:block; background:#f6f1e8; padding:24px 24px 26px; border-right:1px solid #ded2be; border-bottom:1px solid #ded2be; }
.ntgoc-directory__item:hover, .ntgoc-directory__item:focus-visible { background:#fbf8f2; }
.ntgoc-directory__name { font-family:Newsreader, serif; font-size:20px; color:#3a1414; margin-bottom:6px; }
.ntgoc-directory__note { font-size:14px; line-height:1.6; color:#6c6458; }
/* An even two columns, for a directory whose item count is not a multiple of
   three. The base grid is a fixed three-column track, so ten items leave a
   lone tile with two blank cells beside it. Declared above the 900px rule
   that thins the base grid, so the phone breakpoints still win. */
.ntgoc-directory--pair { grid-template-columns:repeat(2, minmax(0,1fr)); }
.ntgoc-directory__soon { display:block; background:#f1ece1; padding:24px 24px 26px; border-right:1px solid #ded2be; border-bottom:1px solid #ded2be; }
.ntgoc-directory__tag { display:inline-block; margin-top:10px; padding:4px 9px; background:#efe2c8; color:#6d5220; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; }

.ntgoc-parish-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; }
.ntgoc-parish-text { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0 0 20px; max-width:62ch; text-wrap:pretty; }
/* A standfirst centred over the columns below it. The base rule caps the
   measure at 62ch and leaves it flush left, so centring needs the auto
   margins as well as the text alignment. */
.ntgoc-parish-text--centred { margin-left:auto; margin-right:auto; text-align:center; }
/* A short bulleted list in body prose. Deliberately NOT .ntgoc-doc__list,
   whose marker is an empty square for ticking off on a printed document. */
.ntgoc-bullets { list-style:none; margin:0 0 20px; padding:0; max-width:62ch; }
.ntgoc-bullets__item { position:relative; padding:0 0 10px 22px; font-size:16.5px; line-height:1.75; color:#5b5449; text-wrap:pretty; }
.ntgoc-bullets__item::before { content:""; position:absolute; left:2px; top:11px; width:6px; height:6px; border-radius:50%; background:#b08442; }
.ntgoc-parish-card { border:1px solid #ded2be; background:#fbf8f2; padding:34px 32px; }
.ntgoc-parish-card__row { display:grid; gap:12px; margin-top:20px; }
/* A second .ntgoc-parish-card stacked directly beneath the first. */
.ntgoc-parish-card--stacked { margin-top:16px; }
.ntgoc-parish-cta { display:block; background:#7d2b2b; color:#f6f1e8; padding:15px 22px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; text-align:center; border-radius:2px; }
.ntgoc-parish-cta:hover, .ntgoc-parish-cta:focus-visible { background:#5e1f1f; color:#f6f1e8; }
.ntgoc-parish-cta--quiet { display:block; border:1px solid #ccbda4; color:#5b5449; padding:15px 22px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; text-align:center; border-radius:2px; }

.ntgoc-resources { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 56px; }
.ntgoc-resource { border-top:1px solid #ded2be; padding-top:20px; }
.ntgoc-resource__name { font-family:Newsreader, serif; font-size:21px; color:#3a1414; margin:0 0 8px; }
.ntgoc-resource__text { font-size:15px; line-height:1.7; color:#5b5449; margin:0 0 14px; }

/* --- Fellowship & Care ----------------------------------------------
   Built almost entirely from parts that already existed — the shared
   photograph hero, the parish sections and cards, the ruled directory,
   the proposal block, the accordion, the demo form and the closing panel.
   Three things are authored here, and only three.

   The band modifier is the "care for one another" section. That block is
   a different kind of thing from the two above it: it is not an
   invitation to an event, and somebody reading it may be having a hard
   week. It is set apart by a slightly deeper parchment and a firmer rule
   rather than by anything louder, which is as far as "visually distinct"
   should go on a page about asking for help.
   ------------------------------------------------------------------ */
.ntgoc-band--warm { background:#f1e9dc; border-color:#ccbda4; }

/* The next parish meal: date, theme, and what is still needed. A ruled
   label/value pair rather than the essentials grid, which is a page-wide
   three-column band and sets its value at 23px — too large inside a card,
   and it puts 16px between a label and the line it labels. */
.ntgoc-fellowship-detail { display:grid; grid-template-columns:150px minmax(0,1fr); gap:6px 20px; align-items:baseline; padding:13px 0; border-bottom:1px solid #e4dac8; }
.ntgoc-fellowship-detail__label { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#7f5f30; }
.ntgoc-fellowship-detail__value { font-family:Newsreader, serif; font-size:20px; line-height:1.4; color:#3a1414; }

/* The monthly Agape Meal. It has to read as more substantial than the coffee
   hour section above it without becoming a different website, so the weight
   comes from proportion rather than from new colour: a long low photograph
   across the full measure, one dark panel, and more air between the parts.

   The table is the motif, so the frame that opens the section is wide and
   short — the shape of a table seen down its length, not a portrait. */
.ntgoc-agape-table { height:280px; margin-bottom:44px; }

/* The one dark element on a parchment page, which is what makes it the thing
   the eye lands on. Gold rule, serif, and the attribution set small underneath
   rather than beside it — a two-line source next to a two-line quote reads as
   a caption competing with the words. */
.ntgoc-agape-quote { background:#3a1414; border-left:3px solid #b08442; padding:34px 32px; margin:0 0 26px; }
.ntgoc-agape-quote__text { font-family:Newsreader, serif; font-weight:300; font-style:italic; font-size:26px; line-height:1.45; color:#faf5ec; margin:0 0 20px; text-wrap:pretty; }
.ntgoc-agape-quote__cite { font-size:13.5px; line-height:1.6; color:#e0b673; font-style:normal; }
.ntgoc-agape-quote__where { display:block; color:#c3b299; margin-top:5px; }

/* Scripture set on the page rather than in a dark block. .ntgoc-agape-quote
   above is the dark treatment, and it is the loudest thing on the page it sits
   on — right for a single pull quote on Get Involved, wrong for the first thing
   a visitor reads on Welcome, where the words after it are the point. Gold rule
   and a wider measure, so it reads as an epigraph and not as a callout. */
.ntgoc-scripture { margin:0 0 34px; padding:4px 0 4px 24px; border-left:3px solid #b08442; }
.ntgoc-scripture__text { font-family:Newsreader, serif; font-weight:300; font-style:italic; font-size:23px; line-height:1.5; color:#3a1414; margin:0 0 12px; text-wrap:pretty; }
.ntgoc-scripture__cite { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#736249; font-style:normal; }

/* "Bring a favourite dish. Bring your family." Five short lines that are a
   list in everything but markup — they are sentences, so they stay paragraphs
   and take their rhythm from a gold rule and a tighter measure instead. */
.ntgoc-agape-invite { margin:26px 0; padding-left:22px; border-left:2px solid #b08442; }
.ntgoc-agape-invite__line { font-family:Newsreader, serif; font-size:21px; line-height:1.5; color:#3a1414; margin:0 0 6px; }
.ntgoc-agape-invite__line:last-child { margin-bottom:0; }

/* The sign-up block, set apart from the explanation above it by a rule rather
   than by another card: there are already two cards in this section and a
   third would flatten all three. */
.ntgoc-agape-next { margin-top:48px; padding-top:40px; border-top:1px solid #ccbda4; }
.ntgoc-agape-open { font-family:Newsreader, serif; font-style:italic; font-size:22px; line-height:1.4; color:#7d2b2b; margin:24px 0 0; }

/* What the sheet will ask for. Chips rather than a bulleted column: nine
   bullets read as a rota to be filled, and the point of the paragraph beneath
   is that none of it is owed by anyone. */
.ntgoc-agape-bring { display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0 0 22px; padding:0; }
.ntgoc-agape-bring__item { border:1px solid #ccbda4; background:#fbf8f2; border-radius:2px; padding:9px 15px; font-size:13.5px; color:#5b5449; }

.ntgoc-agape-note { font-size:15.5px; line-height:1.7; color:#5b5449; margin:0 0 14px; max-width:52ch; }

/* Attribution without a footnote apparatus. The sources are named in a
   sentence, small and quiet, because two academic citations in the middle of
   an invitation to supper would be the wrong register entirely. */
.ntgoc-agape-source { font-size:13.5px; line-height:1.7; color:#6c6458; margin:22px 0 0; max-width:62ch; }
.ntgoc-agape-source__key { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; color:#5b5449; }

/* --- Welcome — the page behind the QR code ---------------------------
   Reached from the "Understanding the Divine Liturgy" pew card, almost
   always on a phone and often while still sitting in church. So it is
   built as short cards rather than prose: the answer to each question is
   readable without opening anything, and opening one is a 100px-tall tap
   target rather than a 16px chevron.

   It borrows the page's existing parts wherever they fit — the shared
   photograph hero, the stage headers, the ruled directory, the proposal
   block, the demo form — and authors only what is genuinely new: the
   question tiles, the jump row, and the closing panel.
   ------------------------------------------------------------------ */
.ntgoc-welcome-hero__lede {
  font-family: Newsreader, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  line-height: 1.45;
  color: #e0b673;
  margin: 22px 0 0;
}

.ntgoc-welcome-intro { max-width: 1240px; margin: 0 auto; padding: 64px 40px 34px; }
.ntgoc-welcome-intro__text {
  font-size: 17.5px;
  line-height: 1.75;
  color: #4a443c;
  margin: 0 0 20px;
  max-width: 62ch;
  text-wrap: pretty;
}
/* "Come and see." — the invitation the whole page is built around, so it is
   set as a line of its own rather than tucked into a paragraph. Brick rather
   than gold: gold at this size sits at about 3.5:1 on parchment. */
.ntgoc-welcome-motif {
  font-family: Newsreader, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.4;
  color: #7d2b2b;
  margin: 30px 0 0;
  padding-left: 22px;
  border-left: 2px solid #b08442;
}

/* The section switcher. A phone reaches this page cold, part-way through a
   Sunday, and the page is long by nature — eighteen questions, three forms and a
   reading list. So the switcher sticks: wherever you are, every section is one
   tap away and you can never be stranded in the middle.

   It sticks BELOW the sticky site header on a pointer (the header is 84px and
   sits at z-index 40), and at the very top on a phone, where the responsive
   layer makes the header static so it has scrolled away by then.

   One row that scrolls sideways inside itself, rather than three wrapped rows:
   six chips wrapped would eat 150px of a 640px-tall screen, permanently. The
   row scrolls, the page does not — which is also what keeps the 320px reflow
   check passing. */
.ntgoc-welcome-jump {
  position: sticky;
  top: 84px;
  z-index: 30;
  background: rgba(246,241,232,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #ded2be;
}
.ntgoc-welcome-jump__row {
  display: flex;
  gap: 10px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 11px 40px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ntgoc-welcome-jump__row::-webkit-scrollbar { display: none; }
.ntgoc-welcome-jump__link {
  flex: 0 0 auto;
  display: inline-block;
  border: 1px solid #ccbda4;
  border-radius: 2px;
  padding: 12px 16px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5b5449;
  background: #fbf8f2;
  white-space: nowrap;
}
/* An anchor jump has to clear the site header AND the switcher, so this is
   larger than the site-wide 96px. Scoped to the sections that follow the
   switcher, which is exactly the ones it can cover. */
.ntgoc-welcome-jump ~ section[id] { scroll-margin-top: 150px; }

/* A long optional thing, folded away. The survey is ten questions of radio
   buttons — the single longest block on the site — and the page says in its own
   words that answering is optional, so it opens on a tap rather than standing
   between the visitor and everything below it. The summary is styled as the
   button it behaves like. */
.ntgoc-welcome-open { margin-top: 22px; }
.ntgoc-welcome-open__summary {
  list-style: none;
  cursor: pointer;
  display: block;
  background: #7d2b2b;
  color: #f6f1e8;
  padding: 16px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ntgoc-welcome-open__summary::-webkit-details-marker { display: none; }
.ntgoc-welcome-open__summary:hover { background: #5e1f1f; }
.ntgoc-welcome-open[open] .ntgoc-welcome-open__summary { background: #5e1f1f; }
.ntgoc-welcome-open__body { padding-top: 4px; }
/* The reading list folds the same way but asks more quietly: it is not a form,
   and a second solid brick button here would compete with the one thing on the
   page that should look like a button — "Plan your next visit". */
.ntgoc-welcome-open--plain .ntgoc-welcome-open__summary { background: transparent; border: 1px solid #ccbda4; color: #5b5449; }
.ntgoc-welcome-open--plain .ntgoc-welcome-open__summary:hover { background: #f1e9dc; border-color: #7d2b2b; color: #7d2b2b; }
.ntgoc-welcome-open--plain[open] .ntgoc-welcome-open__summary { background: #f1e9dc; color: #7d2b2b; }
.ntgoc-welcome-open--plain .ntgoc-welcome-open__body { padding-top: 26px; }

/* The five groups fold too. Nineteen open cards were five screens of a phone
   before anything else on the page could be reached; folded, the whole of "What
   did I just experience?" is one screen.

   The cost is that the previews — the thing that made the list scannable — are
   no longer visible, so each closed group carries its topics on its own line
   instead. You can still find "why did they kiss the icons" without opening
   anything; you just read four words rather than a sentence.

   Ruled rows rather than boxes, matching the Visit page accordion, because the
   cards inside are boxes already and a box inside a box reads as clutter. */
.ntgoc-welcome-group { border-top: 1px solid #ccbda4; }
.ntgoc-welcome-group:last-of-type { border-bottom: 1px solid #ccbda4; }
.ntgoc-welcome-group__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
}
.ntgoc-welcome-group__summary::-webkit-details-marker { display: none; }
.ntgoc-welcome-group__title {
  font-family: Newsreader, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  margin: 0;
  color: #3a1414;
}
.ntgoc-welcome-group__topics { font-size: 13.5px; line-height: 1.6; color: #6c6458; margin: 7px 0 0; text-wrap: pretty; }
/* The drawn marker and the hover title colour are the same rule as the Visit
   page accordion — see .ntgoc-accordion__summary::after above, which this
   selector list is grouped into rather than duplicated. */
.ntgoc-welcome-group[open] .ntgoc-questions { padding-bottom: 30px; }

/* The question tiles. Plain <details>: no JavaScript, keyboard-operable, and
   announced as expandable by the browser itself — the same reasoning as the
   Visit page accordion, and the same thing survives the move into EVO. */
.ntgoc-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
/* A card can be an anchor target in its own right — "The Great Entrance →"
   points at one — so it needs the same clearance from the header and the sticky
   switcher that the sections get, or it lands underneath them. */
.ntgoc-question { background: #f6f1e8; border: 1px solid #ded2be; border-left: 3px solid #b08442; scroll-margin-top: 148px; }
.ntgoc-question[open] { background: #fbf8f2; border-left-color: #7d2b2b; }
.ntgoc-question__summary { list-style: none; cursor: pointer; padding: 20px 22px; }
.ntgoc-question__summary::-webkit-details-marker { display: none; }
.ntgoc-question__title {
  font-family: Newsreader, serif;
  font-weight: 500;
  font-size: 19.5px;
  line-height: 1.32;
  margin: 0 0 9px;
  color: #3a1414;
  text-wrap: pretty;
}
.ntgoc-question__preview { font-size: 14.5px; line-height: 1.65; color: #5b5449; margin: 0; text-wrap: pretty; }
/* Decorative: <details> already announces its own state, so this is only the
   visible affordance that the card opens. */
.ntgoc-question__summary::after {
  content: "Read more  +";
  display: block;
  margin-top: 13px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7d2b2b;
}
.ntgoc-question[open] .ntgoc-question__summary::after { content: "Close  −"; }
/* Hover title colour grouped with .ntgoc-accordion__summary:hover above. */
.ntgoc-question__body { padding: 0 22px 24px; }
.ntgoc-question__body .ntgoc-body { margin-bottom: 14px; }
.ntgoc-question__term { font-family: Newsreader, serif; font-size: 20px; color: #7d2b2b; margin-bottom: 12px; }
.ntgoc-question__more { margin: 4px 0 0; }

/* The pew card itself, given a card of its own at the foot of the section. */
.ntgoc-welcome-card { display: block; background: #3a1414; padding: 34px 32px; border-left: 3px solid #b08442; }
.ntgoc-welcome-card:hover, .ntgoc-welcome-card:focus-visible { background: #4a1c1c; }
.ntgoc-welcome-card__label { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #e0b673; margin-bottom: 14px; }
.ntgoc-welcome-card__name { font-family: Newsreader, serif; font-weight: 300; font-size: 32px; line-height: 1.15; color: #faf5ec; }
.ntgoc-welcome-card__text { font-size: 16px; line-height: 1.7; color: #dcccb4; margin: 10px 0 20px; max-width: 52ch; }
.ntgoc-welcome-card .ntgoc-faith-card__more { color: #e0b673; border-bottom-color: rgba(224,182,115,.5); margin-top: 0; }
.ntgoc-welcome-card:hover .ntgoc-faith-card__more { border-bottom-color: #e0b673; }

.ntgoc-welcome-lede {
  font-family: Newsreader, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  color: #6c6458;
  margin: 0 0 20px;
  max-width: 40ch;
}

/* --- the three forms ------------------------------------------------
   Kept separate on purpose: asking a question and answering the survey
   must never subscribe anyone to anything, so there are three <form>
   elements, three submit buttons and one consent tick — on the mailing
   list only. None of the three has a handler behind it; each says so.

   .ntgoc-welcome-form only scopes the touch-target and rule treatment to
   this page, so the Visit page's demo form is left exactly as it was.
   ------------------------------------------------------------------ */
.ntgoc-welcome-form { margin-top: 20px; }
.ntgoc-welcome-form .ntgoc-demoform__group { border-top: 1px solid #e4dac8; padding-top: 18px; }
/* A finger, on a phone, in a pew. 8px either side takes each choice past the
   44px target the rest of the page already clears. */
.ntgoc-welcome-form .ntgoc-demoform__check { padding: 8px 0; margin-bottom: 0; }
.ntgoc-welcome-hint { font-size: 13px; line-height: 1.6; color: #6c6458; margin: 7px 0 0; }
.ntgoc-welcome-reveal { display: grid; gap: 16px; border-top: 1px solid #e4dac8; padding-top: 18px; }
/* The script hides this panel by setting the `hidden` property, but `hidden` is
   only display:none in the USER-AGENT stylesheet, and any author rule beats it.
   The declaration above was therefore keeping the panel on screen whatever the
   script did: the Welcome survey has been asking every visitor for their name,
   email and phone number from the moment the page loaded, which is the opposite
   of what both that page and this one say they do. Restore the intent. */
.ntgoc-welcome-reveal[hidden] { display: none; }

.ntgoc-welcome-status {
  font-size: 15px;
  line-height: 1.7;
  color: #3a1414;
  margin: 0;
  background: #efe2c8;
  border-left: 3px solid #b08442;
  padding: 16px 18px;
}
.ntgoc-welcome-status--error { background: #f2e5dd; border-left-color: #7d2b2b; color: #5e1f1f; }

.ntgoc-welcome-schedule { border: 1px solid #ccbda4; background: #fbf8f2; padding: 30px 28px; margin-bottom: 26px; }
.ntgoc-welcome-schedule__label { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #7f5f30; margin-bottom: 18px; }
.ntgoc-welcome-schedule__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  font-family: Newsreader, serif;
  font-size: 23px;
  color: #3a1414;
  padding: 10px 0;
  border-bottom: 1px solid #e4dac8;
  margin-bottom: 0;
}
.ntgoc-welcome-schedule .ntgoc-body { margin-top: 18px; }

/* The last thing on the page, and the one people photograph. */
.ntgoc-welcome-closing { max-width: 1240px; margin: 0 auto; padding: 96px 40px; }
.ntgoc-welcome-closing__display {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: 52px;
  line-height: 1.12;
  color: #faf5ec;
  margin: 0 0 28px;
  max-width: 20ch;
  text-wrap: pretty;
}
.ntgoc-welcome-closing__text { font-size: 17.5px; line-height: 1.8; color: #dcccb4; margin: 0 0 34px; max-width: 60ch; text-wrap: pretty; }
.ntgoc-welcome-closing__call {
  font-family: Newsreader, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 40px;
  line-height: 1.25;
  color: #e0b673;
  margin: 0 0 40px;
}
.ntgoc-welcome-closing__row { display: flex; gap: 14px; flex-wrap: wrap; }
.ntgoc-welcome-closing__cta {
  display: inline-block;
  background: #e0b673;
  color: #3a1414;
  padding: 16px 30px;
  border-radius: 2px;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.ntgoc-welcome-closing__cta:hover, .ntgoc-welcome-closing__cta:focus-visible { background: #f0cd91; color: #3a1414; }

/* --- For catechumens & inquirers -------------------------------------
   The page reuses the Welcome page's question cards wholesale — same
   .ntgoc-question markup, same behaviour, no second accordion to keep in
   step. What is added here is only what that component does not have: the
   note at the top of the page, the search field, the two states a card can
   be in that a Welcome card never is (waiting on Fr. John, and carrying a
   review date), and the two full-width callouts.
   ------------------------------------------------------------------ */

/* The note at the top. Burgundy rule rather than the gold one .ntgoc-proposal
   carries, because this is not a proposal to the Council — it is the sentence
   the whole page depends on, and it should not read as demo scaffolding. */
.ntgoc-pastoral { border:1px solid #d9c6a8; border-left:3px solid #7d2b2b; background:#fbf8f2; padding:28px 32px; margin-top:36px; max-width:66ch; }
.ntgoc-pastoral__label { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#7d2b2b; margin-bottom:14px; }
.ntgoc-pastoral__text { font-family:Newsreader, serif; font-size:19px; line-height:1.65; color:#4a443c; margin:0 0 12px; text-wrap:pretty; }
.ntgoc-pastoral__text:last-child { margin-bottom:0; }

/* Search. Hidden in the markup and revealed by ntgoc-enhance.js, so these
   rules only ever apply once the script that makes the field work has run. */
.ntgoc-faqsearch { margin-top:30px; max-width:34rem; }
.ntgoc-faqsearch__label { display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#7f5f30; margin-bottom:10px; }
.ntgoc-faqsearch__field { width:100%; box-sizing:border-box; font-family:Karla, system-ui, sans-serif; font-size:16px; color:#3a1414; background:#fbf8f2; border:1px solid #ccbda4; border-radius:2px; padding:14px 16px; }
.ntgoc-faqsearch__field::placeholder { color:#6c6458; }
.ntgoc-faqsearch__field:focus-visible { outline:2px solid #7d2b2b; outline-offset:1px; }
.ntgoc-faqsearch__status { font-size:13.5px; line-height:1.6; color:#6c6458; margin:12px 0 0; min-height:1.3em; }

/* A question the parish has not answered yet. It is deliberately conspicuous:
   the point of the page is that a reader can tell at a glance which answers
   are Fr. John's and which are still missing. */
.ntgoc-question__preview--pending { font-style:italic; color:#6c6458; }
.ntgoc-question__pending { font-size:15px; line-height:1.7; color:#5b5449; margin:0 0 14px; background:#f1e9dc; border-left:3px solid #b08442; padding:16px 18px; text-wrap:pretty; }
.ntgoc-question__tag { display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#6d5220; margin-bottom:8px; }
.ntgoc-question__ask { font-size:14.5px; line-height:1.65; color:#5b5449; margin:0 0 10px; }
.ntgoc-question__reviewed { font-size:12px; line-height:1.6; color:#6c6458; margin:16px 0 0; font-style:italic; }

/* The two callouts: "I don't know who to ask", and the questions that belong
   in a conversation. Both are full-width bands rather than cards, because
   both are the answer to something a card would make look small. */
.ntgoc-catechumen-callout { padding-top:76px; padding-bottom:76px; }
.ntgoc-catechumen-callout__title { font-family:Newsreader, serif; font-weight:300; font-size:38px; line-height:1.16; margin:0 0 16px; color:#3a1414; max-width:24ch; }
.ntgoc-catechumen-callout__lede { font-family:Newsreader, serif; font-style:italic; font-size:22px; line-height:1.5; color:#7d2b2b; margin:0 0 18px; }
.ntgoc-catechumen-callout__text { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0 0 16px; max-width:62ch; text-wrap:pretty; }
.ntgoc-catechumen-callout__row { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

/* --- The resource register -------------------------------------------
   Cards that stand for documents rather than for reading matter, so each one
   leads with the state it is in. A reader has to be able to tell at a glance
   which of these is Fr. John's current instruction and which is an empty shell
   waiting for him, and that distinction is more important than the design.
   ------------------------------------------------------------------ */
.ntgoc-resources { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:start; margin:0 0 44px; }
.ntgoc-resources__heading { font-family:Newsreader, serif; font-weight:400; font-size:28px; line-height:1.2; margin:0 0 12px; color:#3a1414; }
.ntgoc-resources__lede { font-size:15.5px; line-height:1.7; color:#5b5449; margin:0 0 18px; max-width:62ch; text-wrap:pretty; }

.ntgoc-resource { background:#f6f1e8; border:1px solid #ded2be; border-top:3px solid #b08442; padding:24px 24px 22px; }
.ntgoc-resource__status { display:inline-block; margin-bottom:14px; padding:5px 10px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.ntgoc-resource__status--awaiting { background:#f1e9dc; color:#6d5220; }
.ntgoc-resource__status--outline { background:#efe2c8; color:#6d5220; }
/* Defined before anything uses it, on purpose: the moment Fr. John's wording
   goes into the register a card flips to this class, and a class the markup
   asks for but the stylesheet does not define is a lint ERROR. A warning now is
   cheaper than a broken page then. Same for .ntgoc-doc__list/__item below. */
.ntgoc-resource__status--published { background:#7d2b2b; color:#f6f1e8; }
.ntgoc-resource__warning { font-size:14.5px; line-height:1.65; color:#7d2b2b; margin:0 0 12px; border-left:2px solid #7d2b2b; padding-left:14px; text-wrap:pretty; }
.ntgoc-resource__note { font-size:14px; line-height:1.65; color:#6c6458; margin:12px 0 0; text-wrap:pretty; }
.ntgoc-resource__row { display:flex; gap:10px 20px; flex-wrap:wrap; margin-top:18px; }
.ntgoc-resource__cta { display:inline-block; background:#7d2b2b; color:#f6f1e8; padding:12px 20px; border-radius:2px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; }
.ntgoc-resource__cta:hover, .ntgoc-resource__cta:focus-visible { background:#5e1f1f; color:#f6f1e8; }
.ntgoc-resource__quiet { display:inline-block; align-self:center; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#7d2b2b; border-bottom:1px solid #d9c6a8; padding-bottom:3px; }
.ntgoc-resource__quiet:hover, .ntgoc-resource__quiet:focus-visible { color:#6d5220; border-color:#b08442; }
.ntgoc-resource__print { font-size:13px; line-height:1.6; color:#6c6458; margin:16px 0 0; }
.ntgoc-resource__meta { margin-top:16px; padding-top:14px; border-top:1px solid #ded2be; font-size:12px; letter-spacing:.06em; color:#6c6458; }

/* The documents that do not exist. A plain ruled list, deliberately not cards:
   nothing here is a thing you can open, and making it look like one would be
   the same lie as a PDF that is three revisions old. */
.ntgoc-doclist { list-style:none; margin:18px 0 0; padding:0; max-width:74ch; }
.ntgoc-doclist__item { border-top:1px solid #ded2be; padding:14px 0; font-size:14.5px; line-height:1.7; color:#6c6458; text-wrap:pretty; }
.ntgoc-doclist__item:last-child { border-bottom:1px solid #ded2be; }
.ntgoc-doclist__name { color:#3a1414; font-family:Newsreader, serif; font-size:18px; }

/* --- A document page --------------------------------------------------
   Set as a sheet of paper rather than as a web page: one column, numbered
   sections, and a masthead that appears only when it is printed.

   The hero is the text band four other pages already use — .ntgoc-hero-band
   with .ntgoc-hero-band__shell inside it — rather than a fifth version of
   the same thing under a new name. Only the row of actions beneath it is new,
   because no other page has one.
   ------------------------------------------------------------------ */
.ntgoc-docbar { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:26px; }
.ntgoc-docbar__back { font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#7d2b2b; border-bottom:1px solid #d9c6a8; padding-bottom:3px; }
.ntgoc-docbar__back:hover, .ntgoc-docbar__back:focus-visible { color:#6d5220; border-color:#b08442; }
.ntgoc-docbar__print { font-family:Karla, system-ui, sans-serif; background:#7d2b2b; color:#f6f1e8; border:0; border-radius:2px; padding:13px 22px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.ntgoc-docbar__print:hover, .ntgoc-docbar__print:focus-visible { background:#5e1f1f; }
.ntgoc-docbar__hint { font-size:13px; line-height:1.65; color:#6c6458; margin:16px 0 0; max-width:64ch; text-wrap:pretty; }

.ntgoc-doc { background:#fbf8f2; }
.ntgoc-doc__inner { padding-top:56px; padding-bottom:80px; max-width:820px; }
/* Screen-hidden, print-visible. aria-hidden in the markup as well, because on
   screen it is duplicate information the page already carries in its heading. */
.ntgoc-doc__masthead { display:none; }
.ntgoc-doc__parish { font-family:Newsreader, serif; font-size:15px; color:#3a1414; }
.ntgoc-doc__printtitle { font-family:Newsreader, serif; font-size:22px; color:#3a1414; margin-top:4px; }
.ntgoc-doc__printmeta { font-size:12px; color:#5b5449; margin-top:4px; }
.ntgoc-doc__audience { font-family:Newsreader, serif; font-style:italic; font-size:19px; line-height:1.5; color:#7d2b2b; margin:0 0 16px; text-wrap:pretty; }
.ntgoc-doc__intro { font-size:16.5px; line-height:1.75; color:#5b5449; margin:0 0 22px; text-wrap:pretty; }
.ntgoc-doc__status { background:#f1e9dc; border-left:3px solid #b08442; padding:16px 18px; font-size:14.5px; line-height:1.7; color:#5b5449; margin-bottom:34px; text-wrap:pretty; }
.ntgoc-doc__section { border-top:1px solid #ded2be; padding:26px 0 4px; }
.ntgoc-doc__heading { font-family:Newsreader, serif; font-weight:400; font-size:25px; line-height:1.25; margin:0 0 14px; color:#3a1414; display:flex; gap:14px; align-items:baseline; }
.ntgoc-doc__number { font-family:Karla, system-ui, sans-serif; font-size:12px; letter-spacing:.1em; color:#7f5f30; }
.ntgoc-doc__list { list-style:none; margin:0 0 18px; padding:0; }
.ntgoc-doc__item { position:relative; padding:0 0 12px 34px; font-size:16px; line-height:1.7; color:#5b5449; text-wrap:pretty; }
.ntgoc-doc__item::before { content:""; position:absolute; left:0; top:4px; width:15px; height:15px; border:1px solid #7d2b2b; }
.ntgoc-doc__pending { font-size:15px; line-height:1.7; color:#5b5449; margin:0 0 18px; background:#f6f1e8; border:1px solid #ded2be; padding:16px 18px; text-wrap:pretty; }
/* The same "nobody has written this yet" note as .ntgoc-doc__pending, for
   the cards and sections outside the catechumen documents. It is meant to
   be conspicuous: a card that looks finished but is not is worse than an
   obviously empty one. */
.ntgoc-pending-note { font-size:14px; line-height:1.65; color:#5b5449; margin:14px 0 0; background:#f6f1e8; border:1px solid #ded2be; padding:14px 16px; text-wrap:pretty; }
.ntgoc-doc__foot { font-size:13.5px; line-height:1.7; color:#6c6458; margin:34px 0 0; padding-top:20px; border-top:1px solid #ded2be; text-wrap:pretty; }
.ntgoc-doc__foot--screen { border-top:0; padding-top:0; margin-top:10px; font-style:italic; }

/* --- responsive layer ----------------------------------------------
   The design is fixed-desktop and carries no media queries of its own,
   so this layer is the ONE place where layout was authored rather than
   transcribed from the design. It stays last to win on source order.
   ------------------------------------------------------------------ */
/* --- Card carousel (home page) ---------------------------------------
   The whole card slides, not a box of pictures inside it: each slide is a
   complete promo — its own heading, copy, links and artwork.

   No JavaScript, like the rest of the site. A scroll-snap track with an
   anchor per slide: it moves by trackpad, by dragging, by clicking a name
   underneath, and by Tab, because every slide contains real links. That
   last point is why the track needs no tab stop of its own, unlike the
   greeter row, which holds nothing focusable.
   -------------------------------------------------------------------- */
.ntgoc-carousel { display: flex; flex-direction: column; gap: 26px; }
.ntgoc-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ntgoc-carousel__track::-webkit-scrollbar { display: none; }
/* min-width:0 matters: without it a flex item refuses to shrink below the
   min-content width of the grid inside, each slide ends up wider than the
   track, and the snap positions drift so slide two lands half-way. */
.ntgoc-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }

.ntgoc-carousel__media {
  height: 300px;
  border: 1px solid rgba(224,182,115,.35);
  background-size: cover;
  background-position: center;
}
/* Both pictures are artwork, not photographs: a mark on a white ground and a
   poster with lettering. `cover` slices through both, so each is contained on
   a panel that suits its own ground — the treatment the hand-drawn directions
   map already uses. */
.ntgoc-carousel__media--emblem {
  background-color: #f6f1e8;
  background-image: url('../img/festival-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.ntgoc-carousel__media--banquet {
  background-color: #2a1414;
  background-image: url('../img/festival-banquet.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.ntgoc-carousel__nav { display: flex; align-items: center; gap: 4px; }
/* The dot is drawn by ::before so the clickable box can stay 24px — a 10px
   target is too small to hit reliably, especially on a phone. */
.ntgoc-carousel__dot { width: 24px; height: 24px; display: grid; place-items: center; }
.ntgoc-carousel__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(224,182,115,.65);
}
.ntgoc-carousel__dot[aria-current="true"]::before { background: #e0b673; border-color: #e0b673; }
.ntgoc-carousel__dot:hover::before, .ntgoc-carousel__dot:focus-visible::before { border-color: #e0b673; }

.ntgoc-carousel__pause {
  margin-left: 10px;
  padding: 4px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e0b673;
  cursor: pointer;
}
.ntgoc-carousel__pause:hover, .ntgoc-carousel__pause:focus-visible { text-decoration: underline; }

/* A jump to a slide must not drag the page sideways or land under the sticky
   header. */
.ntgoc-carousel__slide { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  .ntgoc-carousel__track { scroll-behavior: auto; }
}

/* --- The photograph hero ---------------------------------------------
   All ten pages that open on a photograph use this one component. Four
   near-copies became one, so the scrim — the thing the text's legibility
   depends on — is defined and measured once.

   The scrim is two passes. The 75deg pass grades the picture from the
   text side; the `to top` pass darkens the foot of the frame. The two
   together are why the content bottom-aligns rather than centres: at full
   photo strength the gold eyebrow measures 4.32:1 over the middle of this
   picture and 7.47:1 over the foot of it, and it takes both the second
   pass and the lower position to get there. Alignment is a legibility
   requirement here, not a preference. The table is in ACCESSIBILITY.md.

   Heights are min-height, never height. Three of these heroes used a
   fixed height, put their words in a height:100% column, and lost their
   alignment entirely below 900px where the height became auto — a
   percentage height against an auto parent is auto. min-height cannot
   have that bug.
   -------------------------------------------------------------------- */
.ntgoc-page-hero { position: relative; min-height: 420px; display: flex; background: #3a1414; overflow: hidden; }
.ntgoc-page-hero--tall { min-height: 560px; }
.ntgoc-page-hero__photo {
  position: absolute;
  inset: 0;
  background-image: url('../img/parish-nave-aisle.jpg');
  background-size: cover;
  background-position: center;
}
/* The Festival is the one hero that is not the nave. */
.ntgoc-page-hero__photo--festival { background-image: url('../img/festival-banquet.png'); }
.ntgoc-page-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(58,20,20,.45) 0%, rgba(58,20,20,0) 45%),
    linear-gradient(75deg, rgba(58,20,20,.94) 0%, rgba(58,20,20,.86) 45%, rgba(58,20,20,.55) 72%, rgba(58,20,20,.25) 100%);
  pointer-events: none;
}
/* The measure and the side padding come from .ntgoc-shell and .ntgoc-gutter,
   which every hero inner carries. Only the vertical rhythm is this block's. */
.ntgoc-page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 96px;
  padding-bottom: 76px;
  align-self: flex-end;
}
.ntgoc-page-hero__body { max-width: 660px; }
.ntgoc-page-hero__eyebrow {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #e0b673;
  margin-bottom: 22px;
}
.ntgoc-page-hero__title {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: 54px;
  line-height: 1.08;
  margin: 0;
  color: #f6f1e8;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.ntgoc-page-hero--tall .ntgoc-page-hero__title { font-size: 66px; }
.ntgoc-page-hero__lede {
  font-size: 17.5px;
  line-height: 1.7;
  color: #ece3d5;
  margin: 24px 0 0;
  text-wrap: pretty;
}
/* Parish Life closes its hero with a second, quieter line. */
.ntgoc-page-hero__lede--serif {
  font-family: Newsreader, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.5;
  color: #e0b673;
  margin: 18px 0 0;
  text-wrap: pretty;
}
.ntgoc-page-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* The scrim is re-weighted below 900px, and the reason is geometry, not taste.
   Do not "simplify" this back into the one gradient above: the two look like
   duplicates and are not.

   The stops in `linear-gradient(75deg, …)` are percentages along the GRADIENT
   LINE, and that line's length is W·sin75 + H·cos75 — it depends on the box's
   aspect ratio. On a 1440x560 hero the line is about 1500px long, the text
   column ends around x=800, and the words therefore sit in the first half of
   it, under the dense .94-.86 end. Narrow the same hero to 390px and the line
   is only ~505px long while the text still runs to x=375: the identical words
   are now 75-85% of the way along, out in the light .55-.25 end. Narrowing the
   viewport drags the text INTO the bright part of the scrim rather than out of
   it, which is the opposite of what the stops read as. Measured with
   `npm run measure:hero`, that put eight strings below WCAG at 390px — the
   Home eyebrow at 1.47:1 against a 4.5 bar — while all 27 desktop strings
   passed. Three of those failures pre-date the shared component; nothing could
   see them because axe declines to judge text over a background image.

   So mobile gets its own weights, and the horizontal pass is `to right`, not an
   angle: on a horizontal gradient the line is exactly the box width, so a stop
   percentage means the same fraction of the text column at every viewport and
   cannot rotate out from under the words again. The stops are nearly flat
   because on a 390px hero the text really is the whole frame — the eyebrow
   alone reaches 81% of the width — so there is no room left to grade across.
   What remains of the grade lives in the last ~15%, which is the sliver of
   picture the design opens up on the far side, and in the `to top` foot pass,
   which is unchanged.

   900px, not 640px: heroes keep the desktop 40px gutter and desktop type down
   to 641px, so at 720px the lede runs to x=677 on an 804px gradient line —
   85% along, further into the light end than 390px manages. Sampled at 720 and
   899 with the old scrim, three ledes failed there (Home 4.25, Plan a visit
   4.06 and 4.13). That band is the worst case, not the narrowest one, and
   `npm run measure:hero` only samples 390 and 1440, so nothing in CI would
   have caught it. Capping this at 640px would have left those three failing.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ntgoc-page-hero__scrim {
    background:
      linear-gradient(to top, rgba(58,20,20,.45) 0%, rgba(58,20,20,0) 45%),
      linear-gradient(to right, rgba(58,20,20,.94) 0%, rgba(58,20,20,.88) 50%, rgba(58,20,20,.86) 86%, rgba(58,20,20,.72) 100%);
  }
}

/* The calendar's month controls sat inside its hero; they stay on parchment
   now that the hero is a photograph. */
.ntgoc-calendar-controls { max-width: 1240px; margin: 0 auto; padding: 24px 40px; }

/* --- Get Involved ----------------------------------------------------
   Six new components, all of them small. The page reuses .ntgoc-directory,
   .ntgoc-parish-card, .ntgoc-fellowship-detail and .ntgoc-proposal for
   everything else, so what is declared here is only what did not already
   exist: the invitation, the four-step cycle, the pathway cards, a heading
   one level below .ntgoc-parish-h2, the two-action row, and the empty
   baking rota.
   -------------------------------------------------------------------- */

/* "You don't have to already know how." The whole page turns on this
   sentence, so it is set as a statement rather than as body copy. Two
   variants, because it appears once over the hero photograph and once on
   parchment further down. */
.ntgoc-invitation { margin: 30px 0 0; padding-left: 22px; border-left: 2px solid #e0b673; }
.ntgoc-invitation__claim {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-size: 27px;
  line-height: 1.3;
  color: #f6f1e8;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.ntgoc-invitation__text { font-size: 16px; line-height: 1.7; color: #ece3d5; margin: 0; }
.ntgoc-invitation--light { border-left-color: #b08442; margin: 26px 0 0; }
.ntgoc-invitation--light .ntgoc-invitation__claim { color: #3a1414; }
.ntgoc-invitation--light .ntgoc-invitation__text { color: #5b5449; }

/* Learn → Participate → Serve → Teach. An <ol> because the order is the
   point; the arrows are drawn by CSS so they are not read out twice. */
.ntgoc-cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}
.ntgoc-cycle__step {
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #e0b673;
}
.ntgoc-cycle__step + .ntgoc-cycle__step::before {
  content: "→";
  margin-right: 16px;
  color: rgba(224,182,115,.55);
  letter-spacing: 0;
}
.ntgoc-cycle--closing { margin: 30px 0 26px; }

/* Six doors, in a ruled grid rather than a row of buttons: each one carries a
   line of explanation, and a label alone ("Make an offering") does not tell a
   newcomer what is behind it. */
.ntgoc-pathways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ntgoc-pathway {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fbf8f2;
  border: 1px solid #e2d7c3;
  border-left: 3px solid #b08442;
  padding: 22px 24px 24px;
}
.ntgoc-pathway:hover, .ntgoc-pathway:focus-visible { background: #f1e9dc; border-left-color: #7d2b2b; }
.ntgoc-pathway__name { font-family: Newsreader, serif; font-size: 21px; line-height: 1.25; color: #3a1414; }
.ntgoc-pathway__note { font-size: 14px; line-height: 1.6; color: #6c6458; }

/* One step below .ntgoc-parish-h2, for the sections that now nest — coffee
   hour and the Agape Meal both sit under "Gather together". */
.ntgoc-parish-h3 { font-family: Newsreader, serif; font-weight: 400; font-size: 29px; line-height: 1.2; margin: 0; color: #3a1414; }

/* Giving and doing, side by side and equally weighted. Carries .ntgoc-grid so
   it stacks on a phone, where two half-width buttons would be unreadable. */
.ntgoc-twoway { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.ntgoc-twoway .ntgoc-proposal__cta { text-align: center; }

.ntgoc-prepare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.ntgoc-offerings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }

/* .ntgoc-fellowship-detail sets its label in a 150px column beside the value,
   which reads well across the width of the Agape Meal panel and badly inside a
   card a third that wide — "To be confirmed by the parish" wrapped to two lines
   against a one-word label. Inside these two grids the label sits above. */
.ntgoc-prepare-grid .ntgoc-fellowship-detail,
.ntgoc-offerings .ntgoc-fellowship-detail { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 11px 0; }
.ntgoc-prepare-grid .ntgoc-fellowship-detail__value,
.ntgoc-offerings .ntgoc-fellowship-detail__value { font-size: 17px; }

/* The baking rota, empty on purpose. It is styled as a table that is waiting
   for rows rather than as a notice, so that what it will become is obvious —
   and so that nobody is tempted to paste a specimen row in to "show" it. */
.ntgoc-rota { margin-top: 52px; padding-top: 40px; border-top: 1px solid #ccbda4; }
.ntgoc-rota__head {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  padding: 0 0 12px;
  border-bottom: 1px solid #ccbda4;
}
.ntgoc-rota__col { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #7f5f30; }
.ntgoc-rota__empty {
  font-size: 15.5px;
  line-height: 1.7;
  color: #6c6458;
  font-style: italic;
  margin: 0;
  padding: 26px 0 0;
  max-width: 62ch;
}

.ntgoc-closing-coda {
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 1.7;
  color: #c3b299;
  margin: 0 0 34px;
  max-width: 52ch;
}

/* --- Living the Traditions -------------------------------------------
   An interest survey: twenty-four possible classes, each one a card with
   two independent ticks — would attend, could help teach. Nothing here is
   a schedule, so nothing is styled to look like one; there are no dates,
   no times and no booking affordances anywhere on the page.

   The card is the only genuinely new component. Everything else borrows
   what the Welcome page already established for a proposed form
   (.ntgoc-proposal, .ntgoc-demoform, .ntgoc-welcome-open), because a
   parishioner should recognise "this is an idea, not an announcement"
   from the same visual language wherever it appears.
   -------------------------------------------------------------------- */

/* The guiding idea, set once under the hero. The gold rule above it is the
   only ornament on the page — restraint is the house style, and a quotation
   about standing beside someone does not want decorating. */
.ntgoc-traditions-idea { padding-top: 56px; padding-bottom: 56px; }
.ntgoc-traditions-idea__quote {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 29px;
  line-height: 1.42;
  color: #3a1414;
  margin: 0 auto;
  max-width: 34ch;
  text-align: center;
  text-wrap: pretty;
}
.ntgoc-traditions-idea__quote::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: #b08442;
  margin: 0 auto 26px;
}

.ntgoc-traditions-quote { margin: 0 0 30px; padding-left: 22px; border-left: 2px solid #b08442; }
.ntgoc-traditions-quote__text {
  font-family: Newsreader, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 25px;
  line-height: 1.45;
  color: #3a1414;
  margin: 0;
  text-wrap: pretty;
}
.ntgoc-traditions-quote--band { margin: 0; }
.ntgoc-traditions-quote--band .ntgoc-traditions-quote__text { font-size: 27px; }

.ntgoc-traditions-lede { font-size: 17px; line-height: 1.7; color: #4a443c; margin: 18px 0 0; max-width: 64ch; text-wrap: pretty; }
.ntgoc-traditions-lede--note { font-size: 15px; color: #6c6458; margin-top: 12px; }

/* .ntgoc-demoform caps itself at 520px, which is right for a column of
   fields and wrong for a form that contains the whole class grid. */
.ntgoc-traditions-form { max-width: none; gap: 0; margin-top: 8px; }

.ntgoc-traditions-group { margin-top: 52px; border-top: 1px solid #ded2be; padding-top: 26px; }
.ntgoc-traditions-group__heading { font-family: Newsreader, serif; font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0; color: #3a1414; }
.ntgoc-traditions-group__note { font-size: 14.5px; line-height: 1.65; color: #6c6458; margin: 8px 0 24px; max-width: 62ch; }

.ntgoc-traditions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* The card is a flex column so that the two ticks sit on the bottom edge of
   every card in a row, however long the description above them runs. A row
   of ticks at four different heights reads as four different kinds of thing. */
.ntgoc-traditions-card {
  display: flex;
  flex-direction: column;
  background: #fbf8f2;
  border: 1px solid #e2d7c3;
  border-top: 2px solid #b08442;
  padding: 26px 24px 22px;
}
.ntgoc-traditions-card__title { font-family: Newsreader, serif; font-weight: 500; font-size: 21px; line-height: 1.25; margin: 0 0 10px; color: #3a1414; }
.ntgoc-traditions-card__text { font-size: 15px; line-height: 1.65; color: #5b5449; margin: 0; }
.ntgoc-traditions-card__when { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #7f5f30; margin: 14px 0 0; }
.ntgoc-traditions-card__note { font-size: 13.5px; line-height: 1.6; font-style: italic; color: #6c6458; margin: 12px 0 0; }
.ntgoc-traditions-card__choices { display: grid; gap: 8px; margin-top: auto; padding-top: 20px; }

.ntgoc-traditions-choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #ded2be;
  background: #f6f1e8;
  padding: 10px 12px;
  cursor: pointer;
}
.ntgoc-traditions-choice input { margin-top: 3px; flex: none; }
.ntgoc-traditions-choice__label { font-size: 13px; line-height: 1.45; color: #5b5449; }
.ntgoc-traditions-choice:hover { border-color: #b08442; background: #f1e9dc; }
/* Ticked state carries on the whole chip, not just the box: on a phone the
   box is small and the answer to "what have I already chosen?" should be
   readable at arm's length. */
.ntgoc-traditions-choice:has(input:checked) { border-color: #7d2b2b; background: #f2e6da; }
.ntgoc-traditions-choice input:checked + .ntgoc-traditions-choice__label { color: #5e1f1f; }

.ntgoc-traditions-summary { margin-top: 56px; border-top: 1px solid #ded2be; padding-top: 34px; max-width: 620px; display: grid; gap: 22px; }
/* The shared legend is a field label in small caps, which is right above a row
   of radio buttons and wrong above three questions someone is being asked. Set
   the questions in the body serif so they read as questions; the small caps
   stay on the labels underneath them, where they mark the fields. */
.ntgoc-traditions-summary .ntgoc-demoform__legend {
  font-family: Newsreader, serif;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: #3a1414;
  margin-bottom: 14px;
}
.ntgoc-traditions-summary__heading { font-family: Newsreader, serif; font-weight: 400; font-size: 30px; line-height: 1.2; margin: 0; color: #3a1414; }
.ntgoc-traditions-summary__text { font-size: 16px; line-height: 1.7; color: #5b5449; margin: 0; max-width: 62ch; }
.ntgoc-traditions-picks { display: grid; gap: 14px; }
.ntgoc-traditions-teachlist { margin-top: 4px; }

.ntgoc-traditions-passing {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 76px;
}
.ntgoc-traditions-passing__body { max-width: 62ch; }

.ntgoc-traditions-guidance { border: 1px solid #d9c6a8; border-left: 3px solid #b08442; background: #fbf8f2; padding: 34px 36px; max-width: 76ch; }

.ntgoc-traditions-closing { border-top: 1px solid #5e2a2a; }
.ntgoc-traditions-closing__inner { padding-top: 84px; padding-bottom: 84px; }
.ntgoc-traditions-closing__display { font-family: Newsreader, serif; font-weight: 300; font-size: 44px; line-height: 1.12; margin: 0; color: #f6f1e8; max-width: 20ch; text-wrap: pretty; }
.ntgoc-traditions-closing__text { font-size: 17px; line-height: 1.75; color: #e6d8c2; margin: 22px 0 0; max-width: 60ch; text-wrap: pretty; }
.ntgoc-traditions-closing__call { font-family: Newsreader, serif; font-weight: 300; font-style: italic; font-size: 32px; line-height: 1.3; color: #e0b673; margin: 34px 0 0; }
.ntgoc-traditions-closing__row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 36px; }
.ntgoc-traditions-closing__cta { display: inline-block; background: #e0b673; color: #3a1414; padding: 16px 30px; border-radius: 2px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.ntgoc-traditions-closing__cta:hover, .ntgoc-traditions-closing__cta:focus-visible { background: #f0cd91; color: #2a1010; }
.ntgoc-traditions-closing__link { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #e6d8c2; border-bottom: 1px solid rgba(224,182,115,.5); padding-bottom: 4px; }
.ntgoc-traditions-closing__link:hover, .ntgoc-traditions-closing__link:focus-visible { color: #e0b673; border-color: #e0b673; }

@media (max-width: 900px) {
  .ntgoc-grid { grid-template-columns: 1fr; }
  /* The footer is the one grid that should not go straight to a single column:
     five lists stacked is a very long scroll past on a tablet. Two columns to
     640px, one below that. Declared after the blanket rule so it wins. */
  .ntgoc-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
  .ntgoc-gutter { padding-left: 20px; padding-right: 20px; }
  .ntgoc-tall { height: auto; min-height: 60vh; }
  .ntgoc-shell { max-width: 100%; }
}
@media (max-width: 640px) {
  .ntgoc-flex { flex-wrap: wrap; }
  .ntgoc-gutter { padding-left: 16px; padding-right: 16px; }
  .ntgoc-tall { min-height: 50vh; }

  /* The top bar is a fixed-height 38px row in the design; let it grow so the
     Metropolis line can take a second line rather than be clipped. */
  .ntgoc-topbar {
    height: auto;
    padding: 10px 16px;
    line-height: 1.5;
  }
}

/* The two authored grids on the Visit page. These come last so they win over
   the blanket .ntgoc-grid { grid-template-columns: 1fr } rule above: a column
   of four full-width portraits is a long scroll past the thing they are meant
   to make easier, and a stack of them is worse. */
@media (max-width: 900px) {
  .ntgoc-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Portraits become a swipeable row rather than a stack. */
  .ntgoc-faces {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .ntgoc-faces > figure {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
}

/* Parish Life. The two-column splits carry .ntgoc-grid and stack on the
   blanket rule above; what is left is the photo mosaics, which want to
   thin out by degrees rather than drop straight to one column, and the
   fixed frame heights, which are far too tall once stacked. */
@media (max-width: 900px) {
  .ntgoc-parish-life-section { padding-top: 64px; padding-bottom: 64px; }
  .ntgoc-parish-life-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 170px; }
  .ntgoc-parish-life-gallery__w3 { grid-column: span 2; }
  .ntgoc-parish-life-h520, .ntgoc-parish-life-h460, .ntgoc-parish-life-h440, .ntgoc-parish-life-h420 { height: 320px; }
  .ntgoc-parish-life-mosaic { grid-auto-rows: 170px; }
}
@media (max-width: 640px) {
  .ntgoc-photoslot { padding: 12px; gap: 6px; }
  .ntgoc-parish-life-h2 { font-size: clamp(28px, 8vw, 38px); }
  .ntgoc-parish-life-body { font-size: 16.5px; }
  .ntgoc-parish-life-split { gap: 34px; }
  .ntgoc-parish-life-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .ntgoc-parish-life-gallery__w2, .ntgoc-parish-life-gallery__w3 { grid-column: span 2; }
  .ntgoc-parish-life-gallery__h2 { grid-row: span 1; }
  .ntgoc-parish-life-mosaic { grid-template-columns: 1fr; grid-auto-rows: 190px; }
  .ntgoc-parish-life-mosaic__wide { grid-column: span 1; }
  .ntgoc-footer-grid { grid-template-columns: 1fr; }
  .ntgoc-photorow { grid-template-columns: 1fr; }
  .ntgoc-parish-life-permission { grid-template-columns: 1fr; gap: 12px; }
  .ntgoc-parish-life-agenda__row { grid-template-columns: 1fr; gap: 6px; }
  .ntgoc-parish-life-h520, .ntgoc-parish-life-h460, .ntgoc-parish-life-h440, .ntgoc-parish-life-h420 { height: 240px; }
}

/* --- accessibility floor ------------------------------------------ */
/* summary and the form controls were relying on whatever ring the browser
   happens to draw, which on some is a 1px dotted line that all but vanishes on
   parchment. The Welcome page is eighteen <summary> elements and three forms,
   so they are named here alongside the links. */
.ntgoc-page a:focus-visible,
.ntgoc-page button:focus-visible,
.ntgoc-page summary:focus-visible,
.ntgoc-page input:focus-visible,
.ntgoc-page select:focus-visible,
.ntgoc-page textarea:focus-visible,
.ntgoc-page [tabindex]:focus-visible {
  outline: 3px solid #b08442;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ntgoc-page *, .ntgoc-page *::before, .ntgoc-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The three essentials stack rather than squeeze. */
@media (max-width: 900px) {
  .ntgoc-essentials__grid { grid-template-columns: 1fr; gap: 30px; padding-top: 32px; padding-bottom: 34px; }
}

@media (max-width: 640px) {
  .ntgoc-page-hero { min-height: 320px; }
  .ntgoc-page-hero--tall { min-height: 400px; }
  .ntgoc-page-hero__inner { padding-top: 52px; padding-bottom: 44px; }
  .ntgoc-page-hero__title { font-size: 38px; }
  .ntgoc-page-hero--tall .ntgoc-page-hero__title { font-size: 44px; }
  .ntgoc-page-hero__lede { font-size: 16.5px; }
  .ntgoc-page-hero__lede--serif { font-size: 20px; }
}

/* For Our Parish and the new Visit blocks. The two-column splits carry
   .ntgoc-grid and stack on the blanket rule above; what needs authoring is
   the card grids, which should thin out by a column rather than drop
   straight to one, and the display type, which is set in fixed px. */
@media (max-width: 900px) {
  .ntgoc-members-shell,
  .ntgoc-parish-section { padding-top: 52px; padding-bottom: 52px; }
  .ntgoc-stage { padding-top: 48px; }

  .ntgoc-announce,
  .ntgoc-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The directions map is a 721x387 background image drawn with
     background-size:contain, so at 390px it paints about 209px tall — inside a
     box .ntgoc-tall has just given a 50-60vh min-height. That is two hundred
     pixels of empty parchment wrapped around the map. Give the box the shape of
     the picture it holds instead. */
  .ntgoc-visitor-directions-media { min-height: 0; aspect-ratio: 721 / 387; }

  .ntgoc-stage__heading { font-size: clamp(28px, 6vw, 40px); }
  .ntgoc-parish-h2 { font-size: clamp(27px, 5.5vw, 36px); }
  .ntgoc-members__heading { font-size: clamp(26px, 5.5vw, 34px); }
}
@media (max-width: 640px) {
  .ntgoc-announce,
  .ntgoc-directory { grid-template-columns: 1fr; }

  /* Date, service and time on three lines rather than three squeezed
     columns — the time is what a parishioner is scanning for, so it keeps
     its own line rather than being pushed to a wrapped fragment. */
  .ntgoc-week__row { grid-template-columns: 1fr; gap: 6px; }

  .ntgoc-proposal { padding: 24px 22px; }
  .ntgoc-parish-card { padding: 26px 22px; }
  .ntgoc-directory__item,
  .ntgoc-directory__soon { padding: 20px; }

  /* Buttons go full width so they clear the 44px touch target and stop
     forming a ragged two-per-row block. */
  .ntgoc-nextsteps__link,
  .ntgoc-proposal__cta,
  .ntgoc-members__cta { display: block; text-align: center; }
  .ntgoc-proposal__row { display: grid; gap: 12px; }
}

/* The drawer takes over from the horizontal nav. Seven top-level links plus a
   button do not fit a tablet, and the hover-opened groups are unusable on a
   touch screen, so the switch happens at 900px rather than 640 — close to the
   live parish template, whose own toggler appears below Bootstrap's md. */
@media (max-width: 900px) {
  .ntgoc-nav { display: none; }
  .ntgoc-drawer { display: block; }
  /* Two things about the header have to give way for a full-screen panel that
     lives inside it.

     A backdrop-filter makes an element the containing block for any fixed
     descendant, so the blur was quietly anchoring the panel to the header
     rather than the viewport — it opened 155px down the screen. The header's
     background is rgba(...,.94), all but opaque, so the blur is no loss here.

     And z-index:40 opens a stacking context, which caps everything inside it
     — panel and ✕ included — below the draft banner's deliberate z-index:100.
     The banner stayed on top of the open menu and swallowed taps meant for
     the ✕. Raising the header above it also means the header now passes over
     the banner as the page scrolls, rather than under it, which is what a
     sticky header should do anyway. The banner is untouched and returns the
     moment the menu closes. */
  .ntgoc-header { -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 110; }
  /* The header stays one row: seal, name, hamburger. .ntgoc-header-inner also
     carries .ntgoc-flex, which wraps below 640px — that drops the hamburger
     onto a second line at the LEFT of the header, and the panel's right:0
     anchor goes with it, so the drawer opens off the side of the screen. */
  .ntgoc-header-inner { gap: 16px; flex-wrap: nowrap; }
  /* .ntgoc-logo carries .ntgoc-flex as well, and it is the same trap one level
     down. At 390px the seal and the name still fit on a line so nothing wraps;
     at 320px they do not, the name drops below the seal, and the logo becomes
     98px of content inside an 84px header. The overflow is not clipped and the
     header is sticky and translucent, so "Fredericksburg, VA" then sits on top
     of the page text on all seventeen pages, at every scroll position. */
  .ntgoc-logo { flex-wrap: nowrap; }
  /* Two lines of logo text overflow the 84px header once the row cannot wrap.
     Drop the jurisdiction rather than the whole line: the top bar carries the
     Metropolis, not this, and the mobile design keeps the town under the name. */
  .ntgoc-logo-sub__jurisdiction { display: none; }
  .ntgoc-home-service-times-actions { display: flex; }
}

/* The month grid. .ntgoc-calendar-grid-grid-ruled carries .ntgoc-grid, so the
   blanket one-column rule flattened August into forty-two stacked full-width
   boxes — the first six of them the blank cells that pad the week before the
   1st — and made a single month seven thousand pixels tall. Seven columns still
   read down to about 640px. Below that a cell is fifty pixels wide, which will
   not hold "Orthros 9a · Liturgy 10a" at any size worth reading, so the month
   becomes a list of days. */
@media (max-width: 900px) {
  .ntgoc-calendar-grid-grid-ruled { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ntgoc-calendar-day { min-height: 86px; padding: 7px 6px; }
  .ntgoc-calendar-event { font-size: 10.5px; padding: 4px 5px; }
}
@media (max-width: 640px) {
  .ntgoc-calendar-grid-grid-ruled { grid-template-columns: 1fr; }
  .ntgoc-calendar-weekday { display: none; }
  /* The blank cells carry an empty day number. They are the padding a
     seven-column month needs and a list of days does not. */
  .ntgoc-calendar-day:has(.ntgoc-calendar-daynum:empty) { display: none; }
  .ntgoc-calendar-day {
    min-height: 0;
    display: grid;
    grid-template-columns: 2.75em 1fr;
    gap: 4px 10px;
    padding: 11px 12px;
  }
  .ntgoc-calendar-daynum { font-size: 14px; margin-bottom: 0; }
  .ntgoc-calendar-event { grid-column: 2; font-size: 13px; padding: 5px 8px; }
}

/* Fellowship & Care. Everything on the page stacks on the blanket rules above;
   what needs authoring is the label column of the next-meal card, which at
   150px leaves "What we still need" about a third of the card's width. */
@media (max-width: 900px) {
  /* The long table keeps its shape but not its desktop height — 280px of
     placeholder above the words is most of a phone screen spent on a frame
     that has no photograph in it yet. */
  .ntgoc-agape-table { height: 200px; margin-bottom: 32px; }
  .ntgoc-agape-next { margin-top: 36px; padding-top: 32px; }
}
@media (max-width: 640px) {
  .ntgoc-fellowship-detail { grid-template-columns: 1fr; gap: 4px; }
  .ntgoc-agape-table { height: 160px; }
  .ntgoc-agape-quote { padding: 26px 22px; }
  .ntgoc-agape-quote__text { font-size: 22px; }
  .ntgoc-agape-invite__line { font-size: 19px; }
  .ntgoc-agape-open { font-size: 20px; }
}

/* Welcome. Almost every visitor arrives here from a QR code, on a phone, so
   this is the page whose small-screen layout matters most. The question tiles
   drop to a single column, the display type is set in fixed px and has to
   scale, and the closing panel loses its desktop padding.

   The sticky switcher needs no breakpoint of its own: the header is 84px at
   every width now that the drawer keeps it to one row, so `top: 84px` in the
   base rule holds all the way down, and so does the anchor offset under it. */
@media (max-width: 900px) {
  .ntgoc-welcome-intro { padding-top: 48px; }
  .ntgoc-questions { grid-template-columns: 1fr; }
  .ntgoc-welcome-closing { padding-top: 68px; padding-bottom: 68px; }
  .ntgoc-welcome-closing__display { font-size: clamp(32px, 7vw, 52px); }
  .ntgoc-welcome-closing__call { font-size: clamp(28px, 6vw, 40px); }
  .ntgoc-welcome-card__name { font-size: clamp(25px, 5vw, 32px); }
  .ntgoc-welcome-group__title { font-size: clamp(22px, 4.5vw, 26px); }
}
@media (max-width: 640px) {
  .ntgoc-welcome-hero__lede { font-size: 22px; }
  .ntgoc-welcome-intro__text { font-size: 16.5px; }
  .ntgoc-welcome-motif { font-size: 25px; padding-left: 16px; margin-top: 24px; }
  .ntgoc-welcome-jump__row { gap: 8px; padding-top: 9px; padding-bottom: 9px; }
  .ntgoc-welcome-jump__link { font-size: 11.5px; letter-spacing: .06em; padding: 12px 14px; }
  /* Nineteen cards, so a few px saved on each one is most of a screen saved
     overall. Trimmed to the point just before the card stops feeling like a
     comfortable thing to tap. */
  .ntgoc-questions { gap: 12px; }
  .ntgoc-question__summary { padding: 16px 18px; }
  .ntgoc-question__title { font-size: 18.5px; margin-bottom: 7px; }
  .ntgoc-question__preview { line-height: 1.55; }
  .ntgoc-question__summary::after { margin-top: 10px; }
  .ntgoc-question__body { padding: 0 18px 20px; }
  .ntgoc-welcome-card { padding: 26px 22px; }
  .ntgoc-welcome-schedule { padding: 24px 22px; }
  .ntgoc-welcome-schedule__row { font-size: 20px; }
  .ntgoc-welcome-closing__cta { display: block; }
  .ntgoc-welcome-closing__row { display: grid; gap: 12px; text-align: center; }

  /* Nine sections of desktop breathing room is most of a phone screen wasted per
     section. Scoped to the sections after the switcher, so no other page moves. */
  .ntgoc-welcome-jump ~ section .ntgoc-parish-section,
  .ntgoc-welcome-jump ~ section.ntgoc-parish-section { padding-top: 42px; padding-bottom: 42px; }
  .ntgoc-welcome-jump ~ section .ntgoc-stage { padding-top: 40px; padding-bottom: 14px; }
  .ntgoc-welcome-group__summary { padding: 18px 0; gap: 16px; }
  .ntgoc-welcome-intro { padding-top: 44px; padding-bottom: 28px; }
  .ntgoc-welcome-closing { padding-top: 58px; padding-bottom: 58px; }
}

/* Living the Traditions. The class grid thins by degrees rather than dropping
   from three columns straight to one — a card is small enough that two fit
   comfortably at tablet width, and twenty-four of them in a single column is a
   very long scroll. Below 900px the blanket .ntgoc-grid rule should take over
   instead, which is why the two-column step is written as a min-width band
   rather than a plain max-width one: it comes later in the file than the
   blanket rule, so without the floor it would keep winning by source order
   all the way down past 900px. */

   The closing band's display type is set in fixed px, like every other display
   string in this file, so it needs a clamp of its own on a phone. */
@media (min-width: 901px) and (max-width: 1120px) {
  .ntgoc-traditions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ntgoc-traditions-idea { padding-top: 44px; padding-bottom: 44px; }
  .ntgoc-traditions-idea__quote { font-size: clamp(21px, 5vw, 29px); }
  .ntgoc-traditions-quote__text { font-size: clamp(20px, 4.6vw, 25px); }
  .ntgoc-traditions-quote--band .ntgoc-traditions-quote__text { font-size: clamp(21px, 5vw, 27px); }
  .ntgoc-traditions-passing { padding-top: 56px; padding-bottom: 56px; gap: 34px; }
  .ntgoc-traditions-summary__heading { font-size: clamp(24px, 5.5vw, 30px); }
  .ntgoc-traditions-closing__inner { padding-top: 62px; padding-bottom: 62px; }
  .ntgoc-traditions-closing__display { font-size: clamp(28px, 6.5vw, 44px); }
  .ntgoc-traditions-closing__call { font-size: clamp(24px, 5.5vw, 32px); }
}
@media (max-width: 640px) {
  .ntgoc-traditions-group { margin-top: 40px; padding-top: 22px; }
  .ntgoc-traditions-group__heading { font-size: 23px; }
  .ntgoc-traditions-card { padding: 22px 18px 20px; }
  .ntgoc-traditions-card__choices { padding-top: 16px; }
  .ntgoc-traditions-guidance { padding: 26px 22px; }
  .ntgoc-traditions-summary { margin-top: 42px; padding-top: 28px; }
  .ntgoc-traditions-closing__row { display: grid; gap: 12px; }
  .ntgoc-traditions-closing__cta { text-align: center; }
}

/* Get Involved. The three authored grids thin by degrees; .ntgoc-twoway and
   .ntgoc-prepare-grid carry .ntgoc-grid and drop to one column on the blanket
   rule, so only the intermediate steps need writing. The hero gained an
   invitation and the cycle beneath its lede, which is a lot of fixed-px type
   to fit above the fold on a phone. */
@media (min-width: 901px) and (max-width: 1120px) {
  .ntgoc-pathways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ntgoc-offerings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ntgoc-pathways { grid-template-columns: 1fr; }
  .ntgoc-offerings { grid-template-columns: 1fr; }
  .ntgoc-invitation { margin-top: 24px; padding-left: 16px; }
  .ntgoc-invitation__claim { font-size: clamp(21px, 5.4vw, 27px); }
  .ntgoc-cycle { gap: 8px 12px; margin-top: 24px; }
  .ntgoc-cycle__step { font-size: 10.5px; letter-spacing: .18em; }
  .ntgoc-cycle__step + .ntgoc-cycle__step::before { margin-right: 12px; }
  .ntgoc-parish-h3 { font-size: clamp(24px, 5.6vw, 29px); }
  .ntgoc-rota { margin-top: 40px; padding-top: 30px; }
  .ntgoc-rota__head { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .ntgoc-pathway { padding: 18px 18px 20px; }
  .ntgoc-pathway__name { font-size: 19px; }
  .ntgoc-prepare-grid { margin-top: 32px; gap: 16px; }
  .ntgoc-offerings { margin-top: 28px; gap: 16px; }
  .ntgoc-closing-coda { font-size: 14px; }
}

/* For catechumens & inquirers. The question cards themselves are already
   handled — they are the Welcome page's, which drop to one column at 900px
   and tighten at 640px. Only this page's own blocks need writing, and the
   search field has to reach full width or it looks like a stray box. */
@media (max-width: 900px) {
  .ntgoc-catechumen-callout { padding-top: 56px; padding-bottom: 56px; }
  .ntgoc-catechumen-callout__title { font-size: clamp(26px, 6vw, 32px); }
  .ntgoc-catechumen-callout__lede { font-size: 20px; }
  .ntgoc-faqsearch { max-width: none; }
  .ntgoc-pastoral { margin-top: 28px; padding: 24px 22px; }
  .ntgoc-pastoral__text { font-size: 17.5px; }
}
@media (max-width: 640px) {
  .ntgoc-catechumen-callout { padding-top: 44px; padding-bottom: 44px; }
  .ntgoc-catechumen-callout__text { font-size: 16px; }
  .ntgoc-catechumen-callout__row { margin-top: 24px; }
  .ntgoc-pastoral { padding: 20px 18px; }
  .ntgoc-question__pending { padding: 14px 16px; }
}

/* The resource register and the document pages. */
@media (max-width: 900px) {
  .ntgoc-resources { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; }
  .ntgoc-resources__heading { font-size: clamp(22px, 5vw, 26px); }
  .ntgoc-docbar { margin-top: 20px; }
  .ntgoc-doc__inner { padding-top: 40px; padding-bottom: 56px; }
  .ntgoc-doc__heading { font-size: clamp(21px, 5vw, 24px); }
}
@media (max-width: 640px) {
  .ntgoc-resource { padding: 20px 18px 18px; }
  .ntgoc-resource__cta { display: block; text-align: center; }
  .ntgoc-resource__quiet { align-self: flex-start; }
  .ntgoc-doc__section { padding-top: 22px; }
  .ntgoc-doc__heading { gap: 10px; }
  .ntgoc-doc__pending, .ntgoc-doc__status { padding: 14px 16px; }
  .ntgoc-doclist__name { display: block; }
}

/* --- print -------------------------------------------------------------
   The checklists leave the building on paper, so the printed sheet has to be
   the document and nothing else: no navigation, no footer, no "back to" link.

   This is why there are no PDFs in this project. A PDF is a second copy that
   starts going out of date the moment it is saved, and the parish's existing
   baptism checklist is what that looks like after a few years. Printing the
   page cannot drift from the page.

   The draft banner deliberately survives printing, in a quieter form. A sheet
   headed "Adult Baptism & Chrismation checklist" with the parish's name on it
   would otherwise read as an official parish document the moment it left the
   printer — which is the exact thing this repository must not produce.
   ------------------------------------------------------------------ */
@media print {
  .ntgoc-topbar, .ntgoc-header, .ntgoc-footer, .ntgoc-hero-band,
  .ntgoc-skip-link, .ntgoc-doc__foot--screen { display: none; }

  .ntgoc-draft-banner { background: none; color: #000; border-bottom: 1px solid #999; padding: 0 0 6px; text-align: left; }
  .ntgoc-draft-banner__text { font-size: 9pt; max-width: none; }
  .ntgoc-draft-banner__link { color: #000; }

  .ntgoc-doc { background: #fff; }
  .ntgoc-doc__masthead { display: block; margin: 14pt 0 18pt; padding-bottom: 8pt; border-bottom: 1px solid #000; }
  .ntgoc-doc__inner { padding: 0; max-width: none; }
  .ntgoc-doc__status, .ntgoc-doc__pending { background: none; border: 1px solid #999; }
  .ntgoc-doc__section { break-inside: avoid; page-break-inside: avoid; }
  .ntgoc-doc__item { break-inside: avoid; page-break-inside: avoid; }
  .ntgoc-doc__item::before { border-color: #000; }
  .ntgoc-doc__audience { color: #000; }
  .ntgoc-doc__foot { border-top: 1px solid #999; }
}