/* ==========================================================================
   SMAB public website
   Section layouts built on design-system.css. Logical properties throughout, so the
   Arabic RTL and English LTR versions share every rule below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header
   The logo sits at the start of the inline axis, which is the far right in Arabic
   and the far left in English. The menu flows from there in reading order.
   There is deliberately no "Home" item: the logo is the route home.
   -------------------------------------------------------------------------- */
.site-header {
  /* .site-shell is now a fixed-height flex column (see below) so it has something to
     scroll — but that means its flex children can be *shrunk* to fit it, and neither the
     header nor the footer has a flex-basis of its own to protect. Without flex-shrink: 0 the
     footer was compressed to zero height under any page tall enough to need real scrolling. */
  flex-shrink: 0;
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--c-surface);
  /* color-mix keeps the frosted look while following the theme; the line above is the
     fallback for a browser without it. */
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--c-border);
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
  background: var(--c-surface);
}

/* --------------------------------------------------------------------------
   The overlay header, on the homepage only.

   At the top the header is fully transparent and the hero runs underneath it;
   once the page scrolls it becomes solid. Two states, one element.

   `fixed` rather than `sticky` so the header takes no space in the flow and the
   hero really does start at the top of the page. Every other page keeps the
   sticky, solid header — there is no hero behind it to be readable against.
   -------------------------------------------------------------------------- */
.has-overlay-header .site-header {
  position: fixed;
  inset-inline: 0;
  background: transparent;
  backdrop-filter: none;
  border-block-end-color: transparent;
  box-shadow: none;

  /* Over photography the controls are light, so they need the same contrast-safe
     token the hero's own text uses rather than a hard-coded white. */
  color: var(--c-on-media);
}

/* Everything that carries its own colour has to be told, or it keeps the dark
   text it uses against a cream header and disappears into the picture. */
.has-overlay-header .site-header:not(.is-scrolled) .brand__name,
.has-overlay-header .site-header:not(.is-scrolled) .site-nav__link,
.has-overlay-header .site-header:not(.is-scrolled) .icon-button,
.has-overlay-header .site-header:not(.is-scrolled) .lang-switch__option,
.has-overlay-header .site-header:not(.is-scrolled) .btn--ghost {
  color: var(--c-on-media);
  border-color: rgb(255 252 247 / 42%);
}

/* A soft shadow so light text stays legible over a light part of the photograph. */
.has-overlay-header .site-header:not(.is-scrolled) .brand__name,
.has-overlay-header .site-header:not(.is-scrolled) .site-nav__link {
  text-shadow: 0 1px 3px rgb(38 12 16 / 55%);
}

.has-overlay-header .site-header:not(.is-scrolled) .lang-switch {
  background: rgb(38 12 16 / 28%);
  border-color: rgb(255 252 247 / 42%);
}

.has-overlay-header .site-header:not(.is-scrolled) .lang-switch__option.is-active {
  background: rgb(255 252 247 / 22%);
  color: var(--c-on-media);
}

.has-overlay-header .site-header:not(.is-scrolled) .icon-button:hover,
.has-overlay-header .site-header:not(.is-scrolled) .btn--ghost:hover {
  background: rgb(255 252 247 / 18%);
  color: var(--c-on-media);
}

/* Scrolled: solid, and back to the ordinary colours. */
.has-overlay-header .site-header.is-scrolled {
  background: var(--c-surface);
  border-block-end-color: var(--c-border);
  box-shadow: var(--shadow-md);
  color: var(--c-text);
}

/* The hero fills the space the fixed header no longer occupies. */
.has-overlay-header .hero {
  padding-block-start: var(--header-height);
}

/* Somebody who prefers less motion still gets both states, just without the fade. */
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-block-size: var(--header-height);
  gap: var(--sp-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  color: var(--c-emphasis);
}

.brand__logo {
  inline-size: 66px;
  block-size: 66px;
  /* The logo is square; contain guarantees it is never cropped or stretched. */
  object-fit: contain;
  flex: none;
}

.brand__name {
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1.3;
  /* Three lines, as in the approved design. */
  max-inline-size: 13ch;
}

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.site-nav__link {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-pill);
  color: var(--c-text);
  font-size: var(--fs-base);
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.site-nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 2px;
  inset-inline: 50%;
  block-size: 2px;
  background: var(--c-gold-600);
  border-radius: var(--radius-pill);
  transition: inset-inline var(--dur-base) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link[aria-current='page'] { color: var(--c-emphasis); }

.site-nav__link:hover::after,
.site-nav__link[aria-current='page']::after { inset-inline: 22%; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-brown-700);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.icon-button:hover { background: var(--c-surface-deep); color: var(--c-emphasis); }

/* Both languages side by side, the active one filled in. A visitor should be able to
   tell at a glance which language they are reading, not have to infer it from a code
   naming the language they are not. */
/* The language switch itself now lives in design-system.css, because the back office renders
   the same control and only loads that sheet. It was styled here alone, so the switch on the
   admin sign-in page came out as a browser default button — the same way .field__control once
   left thirteen admin screens with unstyled inputs. A control used in two places belongs in the
   sheet both of them load. */

.nav-toggle { display: none; }

/* The drawer's own copy of the sign-in/portal link — desktop already shows it inline in
   .header-actions, so this stays out of the way until the max-width:980px rule below swaps
   which copy is visible. */
.site-nav__account { display: none; }

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  /* Taller again on purpose: the photograph is the first thing a visitor sees, and it kept
     reading as a banner rather than a real presence even at the previous clamp. Driven by
     viewport width rather than height so it keeps its ratio instead of stretching on tall
     screens. */
  min-block-size: clamp(500px, 48vw, 720px);
  display: grid;
  align-items: center;
  overflow: hidden;
  color: var(--c-on-media);
}

.hero--compact { min-block-size: clamp(220px, 19vw, 300px); }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* The reference frames the nave low in the photograph, showing the pews rather than
     only the vaulting, so the crop is biased downwards. */
  object-position: center 68%;
  /* Slight over-scale gives the parallax translation room without exposing an edge. */
  scale: 1.02;
  will-change: transform;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgb(74 16 25 / 18%), rgb(74 16 25 / 34%)),
    radial-gradient(circle at 50% 45%, rgb(74 16 25 / 0%), rgb(74 16 25 / 44%));
}

.hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
  padding-block: var(--sp-7);
}

.hero__content { max-inline-size: 62ch; }

.hero__eyebrow {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--c-on-media);
  text-shadow: 0 2px 12px rgb(74 16 25 / 60%);
  margin-block-end: var(--sp-1);
}

.hero__ornament {
  display: block;
  color: var(--c-gold-300);
  font-size: var(--fs-2xl);
  line-height: 1;
  margin-block-end: var(--sp-2);
  text-shadow: 0 2px 10px rgb(74 16 25 / 55%);
}

.hero__title {
  font-size: var(--fs-4xl);
  color: var(--c-on-media);
  text-shadow: 0 2px 18px rgb(74 16 25 / 55%);
  margin-block-end: var(--sp-4);
}

.hero__scripture {
  font-size: var(--fs-lg);
  color: var(--c-on-media);
  margin-block-end: var(--sp-2);
}

.hero__reference {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-on-media);
  opacity: 0.82;
  text-shadow: 0 2px 10px rgb(74 16 25 / 60%);
}

.hero__pillars-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  /* Visually first, matching the reference, while the heading stays first in the document
     so a screen reader still announces the page title before the supporting phrases. */
  order: -1;
  /* The logo and the three lines beneath it drift together as one composition, not as two
     independently-timed animations — that reads as one gentle piece rather than a busier
     "everything is moving on its own" effect. Covered by the global prefers-reduced-motion
     rule (design-system.css), which flattens every animation's duration and iteration count
     to effectively nothing. */
  animation: hero-compose-float 7s ease-in-out infinite;
}

@keyframes hero-compose-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero__logo {
  inline-size: clamp(88px, 9.5vw, 136px);
  block-size: clamp(88px, 9.5vw, 136px);
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgb(74 16 25 / 45%));
}

.hero__pillars {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: center;
}

.hero__pillar {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: var(--lh-snug);
  color: var(--c-on-media);
  text-shadow: 0 2px 12px rgb(74 16 25 / 60%);
}

.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-block-start: var(--sp-5); }

/* --------------------------------------------------------------------------
   3. Quick links
   -------------------------------------------------------------------------- */
.quick-links {
  padding-block: var(--section-gap);
  background: var(--c-surface);
}

.quick-link {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-cream-50);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.quick-link:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.quick-link__media {
  /* The element is a <span>: without display:block the aspect-ratio is ignored and the
     photograph renders at its own height, leaving the row of tiles ragged. */
  display: block;
  aspect-ratio: 1.45 / 1;
  overflow: hidden;
  background: var(--c-cream-200);
}

.quick-link__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.quick-link:hover .quick-link__media img { transform: scale(1.07); }

.quick-link__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-block-size: 38px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, var(--c-burgundy-700), var(--c-burgundy-800));
  color: var(--c-on-media);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* The circular arrow badge sits at the inline end of the bar. */
.quick-link__badge {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  border-radius: var(--radius-pill);
  background: rgb(255 252 247 / 18%);
  border: 1px solid rgb(255 252 247 / 42%);
  font-size: var(--fs-xs);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   4. Card sections with an aside scripture panel
   -------------------------------------------------------------------------- */
.with-aside {
  display: grid;
  /* The aside spans both rows so it runs the full height of the band, as in the reference,
     with the heading and the cards stacked beside it. */
  grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-3) var(--card-gap);
  align-items: stretch;
}

.with-aside > .section-head { grid-column: 1; grid-row: 1; margin-block-end: 0; }
.with-aside > .grid { grid-column: 1; grid-row: 2; }
.with-aside > .scripture-panel { grid-column: 2; grid-row: 1 / span 2; }
.with-aside > .empty-state { grid-column: 1; grid-row: 2; }

/* The news section's verse card sits on the opposite side from the liturgy section above it
   — the same aside, mirrored, so two bands in a row do not repeat the same shape twice. */
#news .with-aside {
  grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
}
#news .with-aside > .section-head { grid-column: 2; }
#news .with-aside > .grid,
#news .with-aside > .empty-state { grid-column: 2; }
#news .with-aside > .scripture-panel { grid-column: 1; }

.scripture-panel {
  /* A wash of the active theme's own page surface over the photo — never a colour of its own —
     so the verse stays readable in the same ink the rest of the theme already uses, on
     whichever surface tone that theme has (light for the church's everyday theme, dark for a
     theme like Holy Week), and the photo stays visible rather than being read through a tinted
     window. color-mix() reads --c-surface at render time, so this needs no media query and no
     duplicate palette of its own: it is exactly as light or dark as the active theme already is. */
  --scripture-scrim: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c-surface) 70%, transparent),
    color-mix(in srgb, var(--c-surface) 88%, transparent));

  position: relative;
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-gold-300);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgb(227 200 122 / 22%), transparent 62%),
    var(--c-cream-100);
}

.scripture-panel__media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: 0;
}

/* A scrim between the photo and the text — the verse stays readable on any photo without
   needing to know its colours in advance. */
.scripture-panel--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--scripture-scrim);
}

.scripture-panel__text {
  position: relative;
  z-index: 1;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--c-emphasis);
}

.scripture-panel__reference {
  position: relative;
  z-index: 1;
  font-size: var(--fs-sm);
  color: var(--c-brown-500);
}

.scripture-panel__ornament {
  position: relative;
  z-index: 1;
  color: var(--c-gold-600);
  font-size: var(--fs-xl);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   5. Schedule cards
   -------------------------------------------------------------------------- */
.schedule-carousel {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.schedule-carousel__track {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: pan-x;
  flex: 1;
  min-inline-size: 0;
  /* Room for the card's own box-shadow / focus ring, clipped by overflow otherwise. */
  padding-block: var(--sp-1);
  margin-block: calc(var(--sp-1) * -1);
}

.schedule-carousel__track::-webkit-scrollbar { display: none; }

.schedule-carousel__track:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 4px;
}

.schedule-carousel__track > .card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  inline-size: min(78vw, 240px);
}

.schedule-carousel__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-emphasis);
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}

.schedule-carousel__arrow:hover:not(:disabled) { background: var(--c-cream-100); }
.schedule-carousel__arrow:disabled { opacity: 0.35; cursor: default; }

.schedule-carousel__arrow--prev svg { transform: scaleX(-1); }
[dir="rtl"] .schedule-carousel__arrow--prev svg { transform: none; }
[dir="rtl"] .schedule-carousel__arrow--next svg { transform: scaleX(-1); }

@media (min-width: 781px) {
  /* Four day cards fit beside the verse panel at desktop/laptop width — the same breakpoint the
     arrows below already treat as "desktop" — rather than a fixed 240px that only ever fit two
     cards beside the aside on a real laptop screen. A fifth or later day is still one swipe or
     arrow-tap away; the church's own maxItems setting still governs the total, this only governs
     how many show at once. */
  .schedule-carousel__track > .card { inline-size: calc((100% - 3 * var(--card-gap)) / 4); }
}

@media (max-width: 780px) {
  .schedule-carousel__arrow { display: none; }
}

/* --------------------------------------------------------------------------
   5b. Fathers carousel — the same carousel chrome as the schedule cards (arrows,
   native scroll-snap track), smaller and lighter cards, and a centre-active scale
   effect applied only here via [data-carousel-scale] in site.js.
   -------------------------------------------------------------------------- */
.father-carousel__track {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: pan-x;
  flex: 1;
  min-inline-size: 0;
  padding-block: var(--sp-4) var(--sp-2);
}

.father-carousel__track::-webkit-scrollbar { display: none; }

.father-carousel__track:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 4px;
}

.father-carousel__track > .father-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  inline-size: min(60vw, 190px);
  box-shadow: none;
  transition: transform var(--dur-base) var(--ease-out);
}

.father-card .card__body { padding: var(--sp-3); gap: 2px; text-align: center; }
.father-card .card__title { font-size: var(--fs-sm); }

@media (min-width: 1101px) {
  .father-carousel__track > .father-card { inline-size: 200px; }
}

.schedule-card__time {
  display: flex;
  align-items: center;
  /* Not space-between: on a card this narrow that stretched the icon and the
     hour to opposite edges for no reason — centered and pulled close together
     reads as one compact time, not two things sharing a row. */
  justify-content: center;
  gap: var(--sp-1);
  margin-block-start: auto;
  padding-block-start: var(--sp-1);
  color: var(--c-emphasis);
}

.schedule-card__hour { font-size: var(--fs-xl); font-weight: 700; color: var(--c-emphasis); }

.schedule-card__day {
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
  margin: 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Half-width feature panels (confession, livestream)
   -------------------------------------------------------------------------- */
.panel-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: stretch;
}

/*
 * A plain flex column — heading block, then an optional image, then an action row. Both
 * _CallToActionPanel (confession) and _VideoLivestreamPanel share this exact shape, so when
 * .panel-pair stretches them to the same height (below), .feature-panel__action's auto
 * top-margin pushes each one's button to the same bottom edge regardless of how much text or
 * how tall an image the other panel has.
 */
.feature-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--c-border);
  background: var(--c-cream-50);
  box-shadow: var(--shadow-sm);
}

.feature-panel__media {
  aspect-ratio: var(--panel-media-ratio, 16 / 10);
  max-block-size: var(--panel-media-max, 320px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-cream-200);
}

/* Matches .livestream__frame's own numbers exactly, so a paired confession image and the
   livestream frame beside it read as one matched pair rather than two different shapes. */
.panel-pair .feature-panel__media { --panel-media-ratio: 2.6 / 1; --panel-media-max: 225px; }

.feature-panel__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.feature-panel__quote {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-emphasis);
  line-height: var(--lh-snug);
}

.feature-panel__note { color: var(--c-text-soft); font-size: var(--fs-sm); }

.feature-panel__action { margin-block-start: auto; }

/* Livestream */
.livestream__frame {
  position: relative;
  /* The reference frame is a wide letterbox, roughly 2.6:1, not 16:9. */
  aspect-ratio: 2.6 / 1;
  max-block-size: 225px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-burgundy-900);
}

.livestream__frame img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.livestream__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--c-on-media);
}

.livestream__play-icon {
  display: grid;
  place-items: center;
  inline-size: 74px;
  block-size: 74px;
  border-radius: var(--radius-pill);
  background: rgb(255 252 247 / 22%);
  border: 2px solid rgb(255 252 247 / 70%);
  backdrop-filter: blur(6px);
  color: var(--c-on-media);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.livestream__frame:hover img { opacity: 0.85; transform: scale(1.03); }
.livestream__frame:hover .livestream__play-icon { transform: scale(1.08); background: rgb(255 252 247 / 34%); }

/* The play triangle points along the reading direction. */
[dir='rtl'] .livestream__play-icon svg { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   6b. CMS-controlled section backgrounds
   An administrator chooses one of six modes per section (SMAB.Domain.Enums.SectionBackgroundMode,
   docs/CMS.md) from the page editor — never a background tied to what kind of section it is, and
   never the section's own content/card image (its MediaId; see BackgroundMediaId instead, a
   completely separate field). SectionBackgroundHelper.CssClass maps the chosen mode to one of the
   classes below.

   Every mode but the uploaded photograph is built from the active theme's own tokens
   (docs/THEMING.md) with color-mix() — never a fixed hex value — so Holy Week and any other theme
   produce their own coherent dark or light set automatically, with no automatic OS-dark-mode
   override and no per-theme duplicate CSS. The parchment cross and the photo's own scrim both sit
   behind the section's own .container (z-index 0 under 1), so neither can ever sit over, let
   alone dim, any text — contrast is untouched by construction, not by tuning an opacity.
   -------------------------------------------------------------------------- */
:root {
  /* A real, tracked asset (docs/HOMEPAGE.md) — never an external URL, never one of the church's
     own photographs. Used only as a CSS mask (the mask's alpha channel), so its own fill colour
     is irrelevant; background-color below supplies the theme-derived tint. */
  --cross-pattern: url("/images/patterns/coptic-crosses.svg");
}

.section-bg--theme-surface { background: var(--c-surface); }

.section-bg--warm-beige { background: color-mix(in srgb, var(--c-surface-alt) 100%, var(--c-accent) 4%); }

.section-bg--accent-tint { background: color-mix(in srgb, var(--c-surface) 90%, var(--c-gold-300) 10%); }

/* Parchment (a watermark), an uploaded photo and a built-in preset (a scrim over each) all draw
   something behind the section's own content, so all three need that content lifted onto its own
   stacking layer. */
.section-bg--parchment,
.section-bg--image,
.section-bg--preset {
  position: relative;
}

.section-bg--parchment > .container,
.section-bg--image > .container,
.section-bg--preset > .container {
  position: relative;
  z-index: 1;
}

.section-bg--parchment { background: color-mix(in srgb, var(--c-surface-alt) 100%, var(--c-border) 15%); }

.section-bg--parchment::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--c-border-strong);
  -webkit-mask-image: var(--cross-pattern);
  mask-image: var(--cross-pattern);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 72px;
  mask-size: 72px;
  opacity: 0.05;
}

/* The church's own uploaded photograph, or one of its own approved built-in artwork presets
   (--section-bg-image, set inline per section by SectionBackgroundHelper either way) under a
   scrim built the same way the verse aside's own photo variant already reads --c-surface (see
   .scripture-panel above) — light for a light theme, dark for one like Holy Week — so a
   background image stays exactly as readable under any theme. The built-in presets are fixed,
   hand-tuned artwork (not theme-derived color-mix() like the modes above), so they get the same
   treatment as an uploaded photo rather than the parchment watermark's mask-based one. */
.section-bg--image,
.section-bg--preset {
  background-image: var(--section-bg-image);
  background-size: cover;
  background-position: center;
}

.section-bg--image::before,
.section-bg--preset::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c-surface) 78%, transparent),
    color-mix(in srgb, var(--c-surface) 90%, transparent));
}

/* --------------------------------------------------------------------------
   7. Service tiles
   -------------------------------------------------------------------------- */
.section--flush > .container { padding-inline: var(--sp-3); }

.service-tile {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-cream-50);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.service-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.service-tile__media {
  display: block;
  /* Measured from homepage.png: the tile image is landscape, roughly 1.55:1. */
  aspect-ratio: 1.6 / 1;
  overflow: hidden;
  background: var(--c-cream-200);
}

.service-tile__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.service-tile:hover .service-tile__media img { transform: scale(1.06); }

.service-tile__label {
  display: grid;
  place-items: center;
  min-block-size: 38px;
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(to bottom, var(--c-burgundy-700), var(--c-burgundy-800));
  color: var(--c-on-media);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. Timeline and history
   -------------------------------------------------------------------------- */
.history {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

/* Two rows at desktop width: the introductory copy spans the full width on its own row, then the
   photograph and the milestone timeline share a second row as two columns — the image never
   above or below the milestones, and never aligned with the paragraph's own top. Grid places
   grid-template-columns tracks from the inline-start edge, so this needs no [dir="rtl"] override
   of its own: the same two tracks read image then milestones in English, and mirror to
   milestones then image in Arabic automatically. Below this width everything simply stacks in
   document order (intro, then image, then milestones). align-items: stretch (the row's default,
   made explicit) is what keeps the image and the milestones panel starting and ending at exactly
   the same vertical position regardless of how much milestone text there is — see
   .history__media below, which gives up its own aspect-ratio at this width so it can actually
   fill that stretched height instead of leaving a gap under a fixed-ratio photo. */
@media (min-width: 981px) {
  .history {
    grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: stretch;
    gap: var(--sp-5) var(--sp-6);
  }

  .history__intro { grid-column: 1 / -1; grid-row: 1; }
  .history__media { grid-column: 1; grid-row: 2; aspect-ratio: auto; }
  .timeline--milestones { grid-column: 2; grid-row: 2; }
}

.history__media {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.history__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.timeline { display: flex; flex-direction: column; gap: var(--sp-2); }

.timeline__entry {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-1);
}

.timeline__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--c-gold-500);
  background: var(--c-cream-50);
  color: var(--c-gold-700);
  font-size: var(--fs-xs);
  flex: none;
}

.timeline__year { font-weight: 700; color: var(--c-emphasis); font-size: var(--fs-md); }

.timeline__label { color: var(--c-brown-700); font-size: var(--fs-sm); }

.timeline__description {
  margin: var(--sp-1) 0 0;
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* The home page's compact history: milestones in their own pale panel, threaded by a rail
   through every marker's centre. A second, animated copy of the rail is layered on top so it
   visibly moves rather than just sitting there — disabled, like every animation on the site,
   under reduced motion by the blanket rule in design-system.css. Each entry's year and title sit
   on one line with its marker, the full milestone description (Arabic/English, as long as an
   administrator wrote it) wrapping underneath — the same [marker, content] shape as the
   About page's own detailed timeline below, just its own compact spacing. */
.timeline--milestones {
  position: relative;
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--c-cream-50);
  border: 1px solid var(--c-border);
}

.timeline--milestones .timeline__entry {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.timeline--milestones::before,
.timeline--milestones::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline-start: calc(var(--sp-4) + 16px);
  top: var(--sp-4);
  bottom: var(--sp-4);
  inline-size: 2px;
}

.timeline--milestones::before { background: var(--c-border); }

.timeline--milestones::after {
  background: linear-gradient(
    180deg, transparent, var(--c-gold-500) 20%, var(--c-gold-600) 50%, var(--c-gold-500) 80%, transparent);
  background-size: 100% 220%;
  animation: timeline-flow 5s linear infinite;
}

@keyframes timeline-flow {
  from { background-position: 0 220%; }
  to { background-position: 0 -220%; }
}

/* The expanded timeline used on the About page. */
.timeline--detailed .timeline__entry {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--c-border);
}

.timeline--detailed .timeline__entry:last-child { border-block-end: 0; }

/* --------------------------------------------------------------------------
   9. Image and text block
   -------------------------------------------------------------------------- */
.image-text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);
  align-items: center;
}

.image-text__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.image-text__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.image-text__body p { color: var(--c-text-soft); }

/* --------------------------------------------------------------------------
   10. Contact and map
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--card-gap);
  align-items: stretch;
}

/* The identity panel that closes the contact band in the approved design. */
.identity-panel {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  text-align: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--c-burgundy-700), var(--c-burgundy-900));
  color: var(--c-on-media);
}

.identity-panel img {
  inline-size: 96px;
  block-size: 96px;
  object-fit: contain;
  padding: var(--sp-2);
  background: radial-gradient(circle, rgb(255 252 247 / 94%) 62%, rgb(255 252 247 / 0%) 100%);
  border-radius: var(--radius-pill);
}

.identity-panel__name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.45; }
.identity-panel__motto { font-size: var(--fs-xs); color: var(--c-gold-300); }

.contact-list { display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; }

.contact-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-brown-700);
}

.contact-row__icon {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--radius-pill);
  background: var(--c-burgundy-700);
  color: var(--c-on-media);
  flex: none;
}

.map-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background: var(--c-cream-50);
}

.map-panel__frame {
  aspect-ratio: 16 / 9;
  max-block-size: 158px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-cream-200);
}

.map-panel__frame iframe { inline-size: 100%; block-size: 100%; border: 0; }

.welcome-banner {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  min-block-size: 210px;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  color: var(--c-on-media);
  isolation: isolate;
}

.welcome-banner img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.welcome-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(74 16 25 / 55%), rgb(74 16 25 / 78%));
}

.welcome-banner__title { color: var(--c-on-media); font-size: var(--fs-xl); }

.social-links { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-2); }

.social-links a {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-pill);
  background: var(--c-burgundy-700);
  color: var(--c-on-media);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.social-links a:hover { background: var(--c-gold-600); color: var(--c-burgundy-900); transform: translateY(-2px); }

/* The member portal's own section tabs. */
.portal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-5);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--c-border);
}

.portal-tabs__link {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-soft);
}

.portal-tabs__link:hover { background: var(--c-surface-alt); color: var(--c-emphasis); }

.portal-tabs__link[aria-current="page"] {
  background: var(--c-burgundy-700);
  color: var(--c-on-media);
}

.consent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-block-end: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}

/* A liturgy card is a *date*, holding one or more liturgies. Two on the same Sunday are two
   entries inside one card, because two cards headed "Sunday" read as two Sundays. */
.schedule-card__entries {
  display: grid;
  gap: var(--sp-2);
  inline-size: 100%;
}

.schedule-entry {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding-block: var(--sp-1);
}

/* A hairline between entries, never above the first: a leading rule reads as a missing entry. */
.schedule-entry + .schedule-entry {
  border-block-start: 1px solid var(--c-border);
}

.schedule-entry__name { font-weight: 600; color: var(--c-text); }
.schedule-entry__where { font-size: var(--fs-xs); color: var(--c-text-soft); }

.schedule-card__count {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
}

/* Breadcrumbs. An ordered list so it reads as a sequence, with the separator drawn rather
   than written so a screen reader is not read a slash between every step. */
.crumbs { margin-block-end: var(--sp-4); }

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
}

.crumbs__list li + li::before {
  content: '/';
  margin-inline-end: var(--sp-2);
  color: var(--c-border);
}

.crumbs__list a { color: var(--c-link); }
.crumbs__list a:hover { color: var(--c-emphasis); }
.crumbs__list [aria-current="page"] { color: var(--c-text); font-weight: 600; }

/* A service card counts what is inside it, so the list says where the depth is. */
.service-card__counts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-3); }

.service-facts { margin-block: var(--sp-5); }

/* A meeting card leads with what, then when and where — the order somebody reads it in. */
.meeting-card__when,
.meeting-card__time,
.meeting-card__where {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  margin-block-start: var(--sp-2);
}

.meeting-card__time { color: var(--c-emphasis); font-weight: 600; }

.prose { line-height: 1.9; max-inline-size: 70ch; margin-block-end: var(--sp-5); }

/* Introductory paragraph and the callout used by the portal and account pages. */
.lede {
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--c-text-soft);
  max-inline-size: 68ch;
  margin-block-end: var(--sp-5);
}

.notice {
  padding: var(--sp-4);
  margin-block-end: var(--sp-4);
  border-inline-start: 3px solid var(--c-emphasis);
  border-radius: var(--radius-md);
  background: var(--c-surface-alt);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.notice--error {
  border-inline-start-color: var(--c-danger);
  background: rgb(155 44 44 / 8%);
}

/* --------------------------------------------------------------------------
   11. Footer

   One burgundy field carrying one continuous strip.

   The artwork has no gaps and no floating cards: the cream area holding the
   contact details and the map runs flush into the welcome photograph, which runs
   flush into the church's identity, and all three bleed to the edges of the page.
   The links, motto and copyright close it below on the same ground.

   An earlier version gave each of those a margin and a rounded corner. It read as
   three unrelated cards on a burgundy background, which is the opposite of the
   artwork. Hence: gap 0, no outer rounding, and the band full-bleed.

   Column order is DOM order, resolved by the document's direction: the brand is
   first, so it lands at the inline start — the right in Arabic, the left in
   English. Nothing here tests the direction, and nothing here should start.
   -------------------------------------------------------------------------- */
.site-footer {
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
  background: var(--c-footer-bg, linear-gradient(200deg, var(--c-burgundy-800), var(--c-burgundy-900)));
  color: var(--c-footer-fg, rgb(255 252 247 / 86%));
  overflow: hidden;
}

/* The faint damask in the artwork's burgundy. A CSS pattern rather than a photograph:
   it stays crisp at any size, costs no request, and cannot be mistaken for content. */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 25% 25%, rgb(255 252 247 / 5%) 0 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgb(255 252 247 / 5%) 0 2px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgb(255 252 247 / 3%) 0 10px, transparent 11px);
  background-size: 64px 64px, 64px 64px, 128px 128px;
}

.site-footer a:not(.btn) { color: inherit; }
.site-footer a:not(.btn):hover { color: var(--c-gold-300); }

/* Full-bleed, and flush: no gap, so the three areas read as one strip. */
.footer-band {
  display: grid;
  grid-template-columns:
    minmax(0, 0.58fr)   /* brand  */
    minmax(0, 0.72fr)   /* invite */
    minmax(0, 1.7fr);   /* sheet  */
  align-items: stretch;
  gap: 0;
}

/* ---- the identity, directly on the ground ---- */
.footer-brand {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--c-footer-fg, var(--c-on-media));

  /* Bleeds its burgundy over the photograph beside it, the way the artwork blends
     the two. A shadow rather than a gradient because a shadow has no direction to
     get wrong: it spreads to whichever side the column lands on. */
  box-shadow: 0 0 90px 60px var(--c-burgundy-900);
  position: relative;
  z-index: 1;
}

.footer-brand__logo {
  inline-size: clamp(92px, 7.5vw, 124px);
  block-size: clamp(92px, 7.5vw, 124px);
  object-fit: contain;
  /* The roundel is burgundy on transparent and would vanish against the burgundy
     ground. A soft light disc restores it without touching the artwork. */
  padding: var(--sp-2);
  background: radial-gradient(circle, rgb(255 252 247 / 94%) 62%, rgb(255 252 247 / 0%) 100%);
  border-radius: var(--radius-pill);
}

.footer-brand__name {
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1.65;
  /* Wide enough for the church's name to fall in three lines as the artwork has it,
     rather than breaking "بالتجمع الخامس" across two. */
  max-inline-size: 22ch;
  text-wrap: balance;
  color: inherit;
}

/* ---- the invitation, over a photograph ---- */
.footer-invite {
  position: relative;
  display: grid;
  place-content: center;
  padding: var(--sp-5) var(--sp-4);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
  color: var(--c-on-media);
}

.footer-invite__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.footer-invite::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(74 16 25 / 42%), rgb(74 16 25 / 70%));
}

.footer-invite__text { display: grid; gap: var(--sp-2); }
.footer-invite__title { font-size: var(--fs-xl); font-weight: 700; color: var(--c-gold-300); }
.footer-invite__note { font-size: var(--fs-base); color: var(--c-on-media); }

/* One continuous burgundy field, the same ground the brand and the invite sit on — not a
   fourth cream panel breaking up the composition. Only the map keeps its own light box
   (.footer-map, below): an embedded map reads as a window, and a burgundy one would not. */
.footer-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--sp-4);
  padding: var(--sp-5);
}

.footer-contact {
  display: grid;
  align-content: center;
  gap: var(--sp-3);
}

.footer-contact__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-gold-300);
}

.footer-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  /* Office hours read "10:00 ص - 8:00 م": without this the line can break between a
     time and its meridiem, which reads as a different time. */
  text-wrap: pretty;
}

.footer-row__icon,
.footer-socials a {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  flex: none;
  border-radius: var(--radius-pill);
  /* A translucent cream circle on the burgundy field — a solid burgundy one, right on the
     same burgundy the whole footer now shares, would simply not be there. */
  background: rgb(255 252 247 / 14%);
  color: var(--c-cream-50);
}

.footer-socials { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.footer-socials a:hover { background: rgb(255 252 247 / 26%); color: var(--c-gold-300); }

/* ---- the map, with its card and call to action floating over it ---- */
.footer-map {
  position: relative;
  min-block-size: 250px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-cream-200);
}

/* In normal flow, not absolutely positioned: an absolutely positioned embed loads
   but does not paint its tiles here, so the box came out blank. */
.footer-map__frame {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 250px;
  border: 0;
}

.footer-map__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--sp-3);
  /* Both the card and the button sit in the upper half, as the artwork has them,
     which also keeps them clear of the embed's attribution line along the bottom.
     The inline inset clears its zoom controls in whichever corner they land. */
  padding: var(--sp-3) 46px;
  /* Only the card and the button take pointer events, so the map underneath stays
     draggable everywhere else — including those controls. */
  pointer-events: none;
}

.footer-map__overlay > * { pointer-events: auto; }

.footer-map__card {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  max-inline-size: 26ch;
  font-size: var(--fs-sm);
  border-radius: var(--radius-md);
  background: rgb(255 252 247 / 95%);
  box-shadow: var(--shadow-sm);
}

.footer-map__card strong { line-height: 1.5; color: var(--c-emphasis); }

/* ---- the closing row, on the same ground ---- */
.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  padding-block: var(--sp-5);
}

.footer-motto {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-gold-300);
}

.footer-motto__sprig { display: inline-grid; place-items: center; flex: none; }
.footer-motto__sprig svg { inline-size: 28px; block-size: 28px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-sm);
}

/* Hairline separators between the links, as the artwork has them. The first item gets
   none: a leading rule would read as a link that is missing. */
.footer-links a { padding-inline: var(--sp-4); }
.footer-links a + a { border-inline-start: 1px solid rgb(255 252 247 / 24%); }

.footer-copy {
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: rgb(255 252 247 / 62%);
}

/* --------------------------------------------------------------------------
   12. Page header for inner pages
   -------------------------------------------------------------------------- */
.page-intro { padding-block: var(--sp-6) var(--sp-3); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  margin-block-end: var(--sp-3);
}

.breadcrumbs__separator { color: var(--c-brown-300); }

/* --------------------------------------------------------------------------
   13. Empty state
   -------------------------------------------------------------------------- */
.empty-state {
  padding: var(--sp-8);
  text-align: center;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius-lg);
  color: var(--c-text-soft);
  background: var(--c-cream-100);
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-banner { grid-column: 1 / -1; min-block-size: 200px; }
  /* The sheet needs the width more than the photograph does, so it takes the
     full row first and the brand and invite share the one above it. */
  .footer-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-sheet { grid-column: 1 / -1; }
}

/* .with-aside collapsing at the same 1100px breakpoint as the unrelated rules above put the
   verse panel and the cards into a plain stack — no longer beside each other at all — at
   1024px, a width the church explicitly checks expecting the cards to still sit beside the
   verse panel ("desktop/laptop"). Pushed down to the same 780px this file already treats as
   the mobile/desktop line everywhere else (the carousel arrows, the liturgy card width): the
   two stay side by side through every "desktop or laptop" width and only truly stack on a
   phone, where the carousel's own horizontal scroll already takes over regardless. */
@media (max-width: 780px) {
  .with-aside,
  /* #news .with-aside's own selector outweighs the plain class above on specificity alone, so
     the mirrored layout needs its own, equally-specific override to actually collapse here. */
  #news .with-aside { grid-template-columns: minmax(0, 1fr); }

  /* With one column left, the heading, the cards and the scripture aside all need a plain,
     non-overlapping stack — their row/column placement above only makes sense with the aside
     spanning a second column that no longer exists here. */
  .with-aside > .section-head,
  .with-aside > .grid,
  .with-aside > .empty-state,
  .with-aside > .scripture-panel,
  #news .with-aside > .section-head,
  #news .with-aside > .grid,
  #news .with-aside > .empty-state,
  #news .with-aside > .scripture-panel {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 980px) {
  .site-nav {
    position: fixed;
    /* Not inset-block-end: 0 — .site-header's own backdrop-filter gives it a containing
       block of its own, so a fixed descendant's "0 from the bottom" resolves against the
       73px-tall header box, not the viewport, and the drawer opened as a sliver. A height
       computed from the viewport is immune to that trap. */
    inset-block-start: var(--header-height);
    block-size: calc(100dvh - var(--header-height));
    inset-inline-end: 0;
    inline-size: min(84vw, 340px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-1);
    padding: var(--sp-5);
    background: var(--c-cream-50);
    border-inline-start: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(100%);
    /* Hidden from the accessibility tree and from tab order while closed, so a keyboard
       user does not tab into links parked off-screen. */
    visibility: hidden;
    transition:
      transform var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }

  /* The drawer slides in from the inline end, which mirrors with the document. */
  [dir='rtl'] .site-nav { transform: translateX(-100%); }

  .site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform var(--dur-base) var(--ease-out),
      visibility 0s;
  }

  .site-nav__link { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); }

  /* Named portal links do not fit the header row beside the logo, the language switch, search
     and the hamburger on a phone-width screen — that overflow used to push the hamburger
     itself off-screen, which is what actually made the menu unreachable. Its own copy inside
     the drawer (.site-nav__account) takes over instead. */
  .header-actions__account { display: none; }

  .site-nav__account {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--c-border);
  }

  .nav-toggle { display: inline-grid; }

  .site-header__inner { justify-content: space-between; }

  .panel-pair { grid-template-columns: minmax(0, 1fr); }

  .image-text { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

@media (max-width: 780px) {
  .hero__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

  /* The narrow measure exists to make the title wrap to three lines on a wide screen.
     On a phone it would wrap to five, so the constraint is lifted. */
  .hero__content { text-align: start; max-inline-size: none; }
  .hero__pillars { order: 0; flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); text-align: start; }
  .hero__pillar { font-size: var(--fs-base); }

  /* On a narrow, tall viewport the same crop point pushes the building's roofline out of
     frame — cover scales to fill the width, not the reference's wider aspect ratio. */
  .hero__media img { object-position: center 78%; }

  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-band { grid-template-columns: minmax(0, 1fr); }
  .footer-invite { min-block-size: 180px; }
  .footer-sheet { grid-template-columns: minmax(0, 1fr); }
  .footer-bar { justify-content: flex-start; }
  .footer-links { gap: var(--sp-1) 0; }
  .footer-links a { padding-inline: var(--sp-3); }
  .feature-panel { padding: var(--sp-5); }
  .feature-panel__media { aspect-ratio: 16 / 10; }
  .brand__name { display: none; }
  .lang-switch__option { padding-inline: var(--sp-2); font-size: 11px; }
}

/* --------------------------------------------------------------------------
   15. Theme support
   The active theme overrides the tokens above via an inline :root block.
   These rules consume the extra tokens a theme can introduce.
   -------------------------------------------------------------------------- */

/* A theme can mute or darken photography site-wide (Holy Week does both). */
.hero__media img,
.card__media img,
.quick-link__media img,
.service-tile__media img,
.feature-panel__media img,
.history__media img,
.image-text__media img,
.welcome-banner img,
.footer-invite__media,
.livestream__frame img {
  filter: var(--photo-filter, none);
}

/* The hero scrim is a theme token so a theme can go from a light veil to near-black. */
.hero__scrim {
  background: var(--hero-scrim,
    linear-gradient(to bottom, rgb(74 16 25 / 18%), rgb(74 16 25 / 34%)),
    radial-gradient(circle at 50% 45%, rgb(74 16 25 / 0%), rgb(74 16 25 / 44%)));
}

/* A theme recolours the identity block; the rest of the band follows the surface
   tokens, so a dark theme darkens it without a separate footer rule. */
.footer-invite__media { filter: var(--photo-filter, none); }

.btn {
  --btn-bg: var(--c-button-bg, var(--c-burgundy-700));
  --btn-fg: var(--c-button-fg, var(--c-cream-50));
}

.btn:hover { --btn-bg: var(--c-button-hover, var(--c-burgundy-600)); }

h1, h2, h3, h4, h5, h6 { color: var(--c-heading, var(--c-burgundy-800)); }

/* Preview banner: deliberately loud, so a preview is never mistaken for the live site. */
.theme-preview-bar {
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  background: repeating-linear-gradient(
    45deg, var(--c-gold-600), var(--c-gold-600) 12px,
    var(--c-gold-500) 12px, var(--c-gold-500) 24px);
  color: var(--c-burgundy-900);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}

/* --------------------------------------------------------------------------
   16. Public services calendar
   Day and week render as an agenda; month renders as a grid that collapses to
   the agenda below 780px, which is what actually works on a phone.
   -------------------------------------------------------------------------- */

.calendar-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
  align-items: end;
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--c-border);
}

.calendar-filters__actions { display: flex; gap: var(--sp-2); }

.calendar-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
}

.calendar-bar__nav,
.calendar-bar__views { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.calendar-bar__title { font-size: var(--fs-lg); margin: 0; text-align: center; }

/* Agenda ------------------------------------------------------------------ */

.agenda { display: flex; flex-direction: column; gap: var(--sp-3); }

.agenda__day {
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-cream-50);
}

.agenda__day--today { border-color: var(--c-gold-500); box-shadow: 0 0 0 1px var(--c-gold-500); }

.agenda__date {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-block-end: var(--sp-3);
  font-size: var(--fs-md);
}

.agenda__number { font-size: var(--fs-xl); color: var(--c-emphasis); }
.agenda__month { color: var(--c-text-soft); font-weight: 400; font-size: var(--fs-sm); }
.agenda__empty { color: var(--c-text-soft); font-size: var(--fs-sm); margin: 0; }

.agenda__list { display: flex; flex-direction: column; gap: var(--sp-2); }

.agenda-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--c-surface-alt);
}

.agenda-item--cancelled { opacity: 0.72; }

/* Struck through rather than hidden: somebody who was going to attend needs to see it. */
.agenda-item--cancelled .agenda-item__title { text-decoration: line-through; }

.agenda-item__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--c-cream-50);
  border: 1px solid var(--c-border);
}

.agenda-item__time strong { color: var(--c-emphasis); font-size: var(--fs-md); }
.agenda-item__time span { color: var(--c-text-soft); font-size: var(--fs-xs); }

.agenda-item__title { font-size: var(--fs-md); margin: 0 0 var(--sp-1); }

.agenda-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin: 0 0 var(--sp-1);
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
}

.agenda-item__text { color: var(--c-text-soft); font-size: var(--fs-sm); margin: 0; }

.agenda-item__notice {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-danger);
}

/* Month grid --------------------------------------------------------------- */

.month-grid__head,
.month-grid__body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }

.month-grid__head {
  margin-block-end: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-soft);
  text-align: center;
}

.month-cell {
  min-block-size: 116px;
  padding: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-cream-50);
  overflow: hidden;
}

.month-cell--outside { opacity: 0.45; }
.month-cell--today { border-color: var(--c-gold-500); box-shadow: inset 0 0 0 1px var(--c-gold-500); }

.month-cell__date { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-soft); }

/* Every entry is in the cell; a full day scrolls rather than being truncated. Nothing is
   dropped because the grid ran out of room — a feast day is exactly when somebody is looking. */
.month-cell__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: var(--sp-1);
  max-block-size: 7.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.month-cell__all {
  display: block;
  margin-block-start: 2px;
  font-size: var(--fs-xs);
  color: var(--c-accent);
}

.month-chip {
  display: flex;
  gap: var(--sp-1);
  padding: 2px var(--sp-1);
  border-radius: 4px;
  background: var(--c-surface-alt);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.month-chip__time { color: var(--c-emphasis); font-weight: 700; flex: none; }

.month-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.month-chip--cancelled { opacity: 0.6; }
.month-chip--cancelled .month-chip__name { text-decoration: line-through; }

.month-cell__more { font-size: var(--fs-xs); }

/* A liturgy is not a meeting, and the month grid is where the two are hardest to tell apart. */
.month-chip--liturgy { border-inline-start: 3px solid var(--c-accent); }

.agenda-item--liturgy .agenda-item__time { color: var(--c-accent); }

.agenda-item__kind {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-accent);
}

@media (max-width: 780px) {
  .agenda-item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .agenda-item__time { flex-direction: row; gap: var(--sp-2); justify-content: flex-start; }

  /* A seven-column grid is unreadable on a phone, so the month collapses to a list. */
  .month-grid__head { display: none; }
  .month-grid__body { grid-template-columns: minmax(0, 1fr); }
  .month-cell { min-block-size: 0; }
  .month-cell--outside { display: none; }
  .calendar-bar { justify-content: center; }
  .calendar-bar__title { inline-size: 100%; }
}

/* --------------------------------------------------------------------------
   17. Ceremonies
   -------------------------------------------------------------------------- */

.ceremony-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--card-gap); }

.ceremony-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-cream-50);
}

.ceremony-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ceremony-card__head h3 { font-size: var(--fs-md); margin: 0; }
.ceremony-card__text { color: var(--c-text-soft); font-size: var(--fs-sm); margin: 0; }
.ceremony-card__block h4 { font-size: var(--fs-sm); margin: 0 0 var(--sp-1); color: var(--c-emphasis); }
.ceremony-card__block p { color: var(--c-text-soft); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.ceremony-card__contact { font-size: var(--fs-xs); color: var(--c-text-soft); margin: 0; }

.ceremony-card__footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: var(--sp-3);
}

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }

/* Consent is a deliberate act, so it is given room rather than tucked under the button. */
.consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  background: var(--c-surface-alt);
  font-size: var(--fs-sm);
}

.consent input { margin-block-start: 3px; flex: none; inline-size: 20px; block-size: 20px; }

@media (max-width: 780px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   18. Search
   -------------------------------------------------------------------------- */

.search-form { display: flex; gap: var(--sp-2); }
.search-form .input { flex: 1; }
.search-count { color: var(--c-text-soft); font-size: var(--fs-sm); }

.search-group {
  font-size: var(--fs-md);
  margin-block: var(--sp-5) var(--sp-2);
  padding-block-end: var(--sp-2);
  border-block-end: 1px solid var(--c-border);
}

.search-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.search-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--c-surface-alt);
  color: inherit;
}

.search-list a:hover { background: var(--c-surface-deep); }
.search-list strong { color: var(--c-emphasis); }
.search-list span { color: var(--c-text-soft); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Searching and filtering the services
   -------------------------------------------------------------------------- */

/* Wraps rather than scrolls: four controls sit in a row on a laptop and stack on a phone,
   and the actions keep their own line so the button is never orphaned beside a half field. */
.service-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--sp-4);
  align-items: end;
  margin-block: var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-cream-50);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.service-filters__actions { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* A second-level heading inside a page that already has one, so search results and the full
   list read as two parts of one page rather than two pages. */
.section-head--sub { margin-block: var(--sp-7) var(--sp-4); }
.section-head--sub .section-head__title { font-size: var(--fs-xl); }


/* --------------------------------------------------------------------------
   The servants' and fathers' portals
   -------------------------------------------------------------------------- */

/* A row of counts at the top of a portal. Wraps rather than shrinking, so a number is never
   cut in half on a phone. */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}

.stat {
  flex: 1 1 8rem;
  padding: var(--sp-4);
  background: var(--c-cream-50);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.stat__value { display: block; font-size: var(--fs-2xl); font-weight: 700; color: var(--c-burgundy-700); }
.stat__label { display: block; font-size: var(--fs-xs); color: var(--c-text-soft); }

/* Something needing attention — an overdue task — without shouting. */
.stat--warn { border-color: var(--c-warning); }
.stat--warn .stat__value { color: var(--c-warning); }

/* One line of a working list: a name, then whatever qualifies it, wrapping on a phone. */
.task-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--c-border);
}

.task-row:last-child { border-block-end: 0; }
.task-row--overdue { color: var(--c-warning); }

/* A grouped block inside a portal page — one service and everything under it. */
.panel {
  margin-block: var(--sp-5);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.panel__title { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); color: var(--c-burgundy-700); }

.panel__subtitle {
  margin-block: var(--sp-4) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text-soft);
}

/* A row that no longer needs acting on, kept visible but receded. */
.admin-table tr.is-muted { opacity: 0.6; }

/* The footer sits at the bottom of a short page, not in the middle of it.
   A portal with nothing assigned yet, a search with no results, the 404 page: each is shorter
   than the screen, and without this the dark band floats with the page's background under it,
   which reads as a rendering fault rather than as the end of the page. */
body.site-shell {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  block-size: 100dvh;
  /* The document (html) no longer scrolls — see design-system.css — so body is the actual
     scrolling box, and its scrollbar is drawn on the correct side for the page's direction. */
  overflow-y: auto;
}

body.site-shell > main { flex: 1 0 auto; }

/* --------------------------------------------------------------------------
   Meetings agenda: a month to pick a day from, and what is on for it.
   -------------------------------------------------------------------------- */
.agenda-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.agenda-calendar {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--sp-4));
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}

.agenda-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--sp-3);
  font-size: var(--fs-sm);
}

.agenda-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.agenda-grid--head {
  margin-block-end: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-text-soft);
  text-align: center;
}

.agenda-day-cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.agenda-day-cell:hover { background: var(--c-surface); }

.agenda-day-cell.is-outside { color: var(--c-text-soft); opacity: 0.5; }

.agenda-day-cell.is-today { font-weight: 700; color: var(--c-emphasis); }

.agenda-day-cell.is-selected {
  background: var(--c-burgundy-700);
  color: var(--c-cream-50);
}

.agenda-day-cell__dot {
  position: absolute;
  inset-block-end: 4px;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.agenda-panel { min-inline-size: 0; }

.agenda-day__heading {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-lg);
  margin-block-end: var(--sp-4);
}

.agenda-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.agenda-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.agenda-card__time,
.agenda-card__where {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  margin-block-start: var(--sp-1);
}

@media (max-width: 980px) {
  .agenda-layout { grid-template-columns: minmax(0, 1fr); }
  .agenda-calendar { position: static; }
}

/* --------------------------------------------------------------------------
   Our Fathers
   -------------------------------------------------------------------------- */
.father-card--featured {
  border-color: var(--c-gold-300);
  box-shadow: var(--shadow-md);
}

/* The approved homepage artwork spans the browser width with a modest edge gutter. Inner pages
   retain the shared 1560px cap; only the homepage uses this wider canvas. */
body.has-overlay-header {
  --gutter: clamp(12px, 1.4vw, 28px);
}
body.has-overlay-header .container {
  inline-size: calc(100% - (2 * var(--gutter)));
  max-inline-size: none;
}

/* The two scripture cards use their own clean, text-free art. Their CMS content images can
   change without putting a photograph behind the verse or reducing its readability. */
#liturgies .scripture-panel--art,
#news .scripture-panel--art {
  border: 0;
  background-color: var(--c-cream-100);
  background-size: cover;
  background-position: center;
  min-block-size: 235px;
}
#liturgies .scripture-panel--art {
  background-image: linear-gradient(rgb(255 250 240 / 30%), rgb(255 250 240 / 30%)),
    url('/images/patterns/verse-liturgies.jpg');
}
#news .scripture-panel--art {
  background-image: linear-gradient(rgb(255 250 240 / 56%), rgb(255 250 240 / 56%)),
    url('/images/patterns/verse-news.jpg');
}
#liturgies .scripture-panel--art .scripture-panel__text,
#news .scripture-panel--art .scripture-panel__text {
  max-inline-size: 23ch;
  margin-inline: auto;
  color: #5a2028;
}
#liturgies .scripture-panel--art .scripture-panel__reference,
#news .scripture-panel--art .scripture-panel__reference {
  color: #75423f;
}

/* Six ministry tiles across, as in the approved strip, rather than four plus an orphan row. */
#services .grid--cards-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (min-width: 981px) {
  /* Artwork order: photo | introduction | milestones in both languages.
     Each item occupies the same row, so the band's bottom edge lines up. */
  #about .history {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(12px, 2vw, 32px);
    align-items: stretch;
  }
  #about .history__intro {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  #about .history__media {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: auto;
  }
  #about .timeline--milestones {
    grid-column: 3;
    grid-row: 1;
  }
  [dir="rtl"] #about .history__media { grid-column: 3; }
  [dir="rtl"] #about .timeline--milestones { grid-column: 1; }
}
@media (max-width: 1100px) {
  #services .grid--cards-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  #services .grid--cards-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  #services .grid--cards-compact { grid-template-columns: minmax(0, 1fr); }
}

/* Approved home composition: three distinct reading zones over the existing church photo. */
.hero--homepage {
  min-block-size: clamp(390px, 25vw, 560px);
}
.hero--homepage .hero__scrim {
  background: linear-gradient(90deg, rgb(42 17 21 / 55%), rgb(48 20 24 / 13%) 38%,
      rgb(49 20 24 / 15%) 64%, rgb(42 17 21 / 61%));
}
.hero--homepage .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
  min-block-size: clamp(390px, 25vw, 560px);
  gap: clamp(18px, 3vw, 70px);
  padding-block: clamp(28px, 3vw, 60px);
}
.hero--homepage .hero__pillars-group {
  grid-column: 1;
  order: 0;
  align-self: end;
  justify-self: start;
  animation: none;
}
.hero--homepage .hero__content {
  grid-column: 2;
  min-inline-size: 0;
  max-inline-size: none;
  text-align: center;
  align-self: center;
}
.hero--homepage .hero__invitation {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  max-inline-size: 23ch;
  text-align: center;
}
[dir="rtl"] .hero--homepage .hero__pillars-group { grid-column: 3; justify-self: end; }
[dir="rtl"] .hero--homepage .hero__invitation { grid-column: 1; justify-self: start; }
.hero--homepage .hero__pillars { text-align: start; gap: .35rem; }
.hero--homepage .hero__pillar {
  font-size: clamp(15px, 1.15vw, 23px);
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 2px 12px rgb(31 10 15 / 90%);
}
.hero--homepage .hero__eyebrow {
  margin: 0;
  font-size: clamp(20px, 1.45vw, 30px);
  font-weight: 700;
}
.hero--homepage .hero__title {
  max-inline-size: 18ch;
  margin: .1em auto .22em;
  font-size: clamp(30px, 2.7vw, 58px);
  line-height: 1.23;
  text-wrap: balance;
}
.hero__location {
  font-size: clamp(15px, 1.1vw, 22px);
  line-height: 1.35;
  text-shadow: 0 2px 12px rgb(31 10 15 / 75%);
}
.hero__motto {
  margin-block-start: clamp(32px, 3.2vw, 72px);
  font-size: clamp(17px, 1.3vw, 26px);
  font-weight: 700;
  text-shadow: 0 2px 12px rgb(31 10 15 / 85%);
}
.hero__invitation blockquote {
  font-size: clamp(18px, 1.35vw, 27px);
  font-weight: 700;
  line-height: 1.55;
  text-shadow: 0 2px 12px rgb(31 10 15 / 85%);
}
.hero__invitation cite {
  display: block;
  margin-block-start: .75rem;
  font-size: clamp(13px, .9vw, 18px);
  font-style: normal;
  text-shadow: 0 2px 12px rgb(31 10 15 / 85%);
}
@media (max-width: 900px) {
  .hero--homepage .hero__inner { gap: 12px; }
  .hero--homepage .hero__title { font-size: clamp(27px, 3.8vw, 38px); }
}
@media (max-width: 680px) {
  .hero--homepage .hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: 590px;
    gap: 20px;
    padding-block: 26px;
  }
  .hero--homepage .hero__content { order: 0; align-self: center; text-align: center; }
  .hero--homepage .hero__pillars-group { order: 1; align-self: center; }
  .hero--homepage .hero__invitation { order: 2; align-self: center; max-inline-size: 32ch; }
  .hero--homepage .hero__pillars { flex-direction: row; justify-content: center; text-align: center; gap: 10px; }
  .hero--homepage .hero__pillar { font-size: 12px; }
  .hero__motto { margin-block-start: 14px; }
  .hero__invitation blockquote { font-size: 14px; }
  .hero--homepage .hero__scrim { background: rgb(42 17 21 / 57%); }
}

/* The reference uses crisp burgundy rectangular actions throughout the public site. */
.site-shell .btn {
  --btn-bg: var(--c-button-bg, var(--c-burgundy-700));
  --btn-fg: var(--c-button-fg, var(--c-cream-50));
  --btn-border: color-mix(in srgb, var(--btn-bg) 82%, black);
  border-radius: 5px;
  min-block-size: 44px;
  padding: 10px 22px;
  background: linear-gradient(to bottom, var(--btn-bg), color-mix(in srgb, var(--btn-bg) 79%, black));
  color: var(--btn-fg);
  box-shadow: 0 2px 8px rgb(66 18 26 / 18%);
}
.site-shell .btn:hover {
  --btn-bg: var(--c-button-hover, var(--c-burgundy-600));
  color: var(--btn-fg);
  box-shadow: 0 5px 14px rgb(66 18 26 / 24%);
}
.site-shell .btn--sm { min-block-size: 38px; padding: 7px 16px; }
.site-shell .btn--lg { min-block-size: 50px; padding: 12px 26px; }
.site-shell .btn--on-dark {
  --btn-bg: var(--c-burgundy-700);
  --btn-fg: var(--c-cream-50);
}
.site-shell .btn:focus-visible { outline: 3px solid var(--c-gold-500); outline-offset: 3px; }
.site-shell .quick-link__label {
  margin: 0;
  min-block-size: 54px;
  padding: 8px 12px;
  border-radius: 0;
  background: var(--c-cream-50);
  color: var(--c-emphasis);
  text-shadow: none;
}
.site-shell .quick-link__badge {
  background: var(--c-cream-200);
  color: var(--c-emphasis);
}

/* A single fixed, text-free parchment scene sits behind both feature panels. */
.home-feature-band {
  background: #f4e7d3 url('/images/patterns/confession-livestream-art-v2.jpg') center / cover no-repeat;
  padding-block: clamp(18px, 2vw, 38px);
}
.home-feature-band::before { display: none; }
.home-feature-band .panel-pair { gap: clamp(10px, 1vw, 20px); }
.home-feature-band .feature-panel {
  min-inline-size: 0;
  padding: clamp(14px, 1.6vw, 30px);
  gap: 14px;
  border: 1px solid rgb(139 92 67 / 16%);
  border-radius: 6px;
  background: rgb(255 250 242 / 72%);
  box-shadow: 0 3px 15px rgb(77 43 26 / 11%);
  text-align: center;
}
.home-feature-band .feature-panel__heading {
  min-block-size: 90px;
  text-align: center;
}
.home-feature-band .section-head__title {
  margin: 0;
  font-size: clamp(22px, 1.8vw, 36px);
  color: #651f2b;
}
.home-feature-band .section-head__subtitle {
  margin-block-start: 4px;
  font-size: clamp(12px, .9vw, 17px);
  color: #60423b;
}
.home-feature-band .feature-panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, .9fr);
  gap: clamp(10px, 1.4vw, 26px);
  align-items: center;
  flex: 1;
}
.home-feature-band .feature-panel__primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-inline-size: 0;
}
.home-feature-band .feature-panel__media {
  inline-size: 100%;
  aspect-ratio: 1.95 / 1;
  max-block-size: 240px;
  border-radius: 4px;
}
.home-feature-band .feature-panel__verse {
  max-inline-size: 24ch;
  margin-inline: auto;
}
.home-feature-band .feature-panel__quote {
  font-size: clamp(17px, 1.2vw, 24px);
  line-height: 1.5;
  color: #651f2b;
}
.home-feature-band .scripture-panel__reference {
  display: block;
  margin-block-start: 10px;
  font-size: clamp(11px, .85vw, 16px);
  color: #75544c;
}
.home-feature-band .feature-panel__note {
  margin-block: 8px 10px;
  color: #60423b;
  line-height: 1.4;
}
.home-feature-band .feature-panel__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-block-start: auto;
}
.home-feature-band .feature-panel__action .btn { min-inline-size: min(100%, 245px); }
.home-feature-band .feature-panel__action .btn[aria-disabled="true"] {
  opacity: .92;
  cursor: not-allowed;
}
.home-feature-band .feature-panel__status { color: #75544c; font-size: 12px; }
.home-feature-band .livestream__frame {
  inline-size: min(100%, 720px);
  margin-inline: auto;
  aspect-ratio: 2.6 / 1;
  max-block-size: 240px;
  border-radius: 4px;
}
.home-feature-band .livestream__frame img { opacity: .9; }
.home-feature-band .livestream__badge {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 3px;
  background: #bb263a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.livestream__badge-dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: currentColor;
}
[dir="rtl"] .home-feature-band .feature-panel--confession .feature-panel__primary { grid-column: 2; grid-row: 1; }
[dir="rtl"] .home-feature-band .feature-panel--confession .feature-panel__verse { grid-column: 1; grid-row: 1; }
@media (max-width: 980px) {
  .home-feature-band .feature-panel__body { grid-template-columns: minmax(0, 1fr); }
  [dir="rtl"] .home-feature-band .feature-panel--confession .feature-panel__primary,
  [dir="rtl"] .home-feature-band .feature-panel--confession .feature-panel__verse { grid-column: auto; grid-row: auto; }
  .home-feature-band .feature-panel__heading { min-block-size: 0; }
  .home-feature-band .feature-panel__verse { max-inline-size: 34ch; }
}
@media (min-width: 781px) and (max-width: 980px) {
  .home-feature-band .panel-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-feature-band .feature-panel__media { aspect-ratio: 1.9 / 1; }
}
@media (max-width: 780px) {
  .home-feature-band .panel-pair { grid-template-columns: minmax(0, 1fr); }
}

/* The home History band groups the existing photograph, copy and timeline in one compact row. */
.history-section {
  background: linear-gradient(105deg, #f3e4ce, #fffaf2 40%, #f7ebdc);
  padding-block: clamp(20px, 2.5vw, 52px);
}
.history-section::before { display: none; }
.history-section .history {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(12px, 2vw, 38px);
  align-items: stretch;
}
.history-section .history__intro {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 22px);
  min-inline-size: 0;
  text-align: center;
}
.history-section .history__title {
  margin: 0;
  color: #651f2b;
  font-size: clamp(22px, 1.8vw, 35px);
  line-height: 1.3;
}
.history-section .history__intro p {
  margin: 0;
  color: #60423b;
  font-size: clamp(13px, 1vw, 19px);
  line-height: 1.55;
}
.history-section .history__cta { margin-block-start: 4px; }
.history-section .history__media {
  grid-column: 1;
  grid-row: 1;
  min-block-size: 295px;
  aspect-ratio: auto;
  border-radius: 5px;
  box-shadow: 0 3px 14px rgb(77 43 26 / 14%);
}
.history-section .history__media img { object-position: center 60%; }
.history-section .timeline--milestones {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, .55vw, 12px);
  padding: clamp(12px, 1.2vw, 22px);
  border-color: rgb(139 92 67 / 16%);
  border-radius: 5px;
  background: rgb(255 250 242 / 77%);
}
.history-section .timeline--milestones .timeline__entry {
  gap: clamp(6px, .8vw, 14px);
  padding-block: 2px;
}
.history-section .timeline--milestones .timeline__marker {
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid #b98c53;
  background: #fcf3e5;
  color: #945f35;
}
.history-section .timeline--milestones .timeline__year { color: #651f2b; }
.history-section .timeline--milestones .timeline__label,
.history-section .timeline--milestones .timeline__description { color: #60423b; }
.history-section .timeline--milestones::before,
.history-section .timeline--milestones::after {
  inset-inline-start: calc(clamp(12px, 1.2vw, 22px) + 13px);
}
[dir="rtl"] .history-section .history__media { grid-column: 3; }
[dir="rtl"] .history-section .timeline--milestones { grid-column: 1; }
.history-section .timeline--milestones.is-visible .timeline__entry {
  animation: history-milestone-enter .65s both;
}
.history-section .timeline--milestones.is-visible .timeline__entry:nth-child(2) { animation-delay: .13s; }
.history-section .timeline--milestones.is-visible .timeline__entry:nth-child(3) { animation-delay: .26s; }
.history-section .timeline--milestones.is-visible .timeline__entry:nth-child(4) { animation-delay: .39s; }
.history-section .timeline--milestones.is-visible .timeline__entry:nth-child(5) { animation-delay: .52s; }
.history-section .timeline--milestones .timeline__marker { animation: history-marker-glow 3.6s ease-in-out infinite; }
@keyframes history-milestone-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes history-marker-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgb(179 120 57 / 0%); }
  50% { box-shadow: 0 0 0 5px rgb(179 120 57 / 18%); }
}
@media (max-width: 980px) {
  .history-section .history { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .history-section .history__intro,
  .history-section .history__media,
  .history-section .timeline--milestones { grid-column: 1; grid-row: auto; }
  .history-section .history__media { min-block-size: 230px; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .history-section .timeline--milestones::after,
  .history-section .timeline--milestones .timeline__marker,
  .history-section .timeline--milestones.is-visible .timeline__entry { animation: none; }
}

/* Standalone feature panels retain a readable flow outside the homepage pair. */
.feature-panel__body { min-inline-size: 0; }
.feature-panel__primary { min-inline-size: 0; }
.feature-panel__verse { text-align: center; }

/* Reference refinements: the welcome is one floating unit, with the church crest at its center. */
.hero--homepage .hero__welcome-float {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: hero-compose-float 7s ease-in-out infinite;
}
.hero--homepage .hero__welcome-logo {
  inline-size: clamp(94px, 7.2vw, 148px);
  block-size: clamp(94px, 7.2vw, 148px);
  margin-block-end: clamp(8px, .9vw, 18px);
  object-fit: contain;
  filter: drop-shadow(0 5px 15px rgb(33 10 13 / 65%));
}
.hero--homepage .hero__pillars-group,
.hero--homepage .hero__invitation {
  align-self: center;
  justify-self: center;
}
.hero--homepage .hero__pillars { text-align: center; }
[dir="rtl"] .hero--homepage .hero__pillars-group,
[dir="rtl"] .hero--homepage .hero__invitation { justify-self: center; }
html[lang="en"] .hero--homepage .hero__title {
  max-inline-size: 13ch;
  font-size: clamp(34px, 2.85vw, 61px);
  line-height: 1.17;
}
@media (max-width: 900px) {
  html[lang="en"] .hero--homepage .hero__title {
    font-size: clamp(30px, 3.9vw, 40px);
  }
}
@media (max-width: 680px) {
  .hero--homepage .hero__welcome-logo { inline-size: 96px; block-size: 96px; }
  html[lang="en"] .hero--homepage .hero__title { max-inline-size: 16ch; }
}

/* The paired grid cells had equal heights while their nested articles did not. */
.home-feature-band .panel-pair > section {
  display: flex;
  align-items: stretch;
  min-inline-size: 0;
}
.home-feature-band .panel-pair > section > .feature-panel {
  flex: 1 1 auto;
  inline-size: 100%;
  min-block-size: 100%;
}
.home-feature-band .feature-panel--confession .feature-panel__body { flex: 1 1 auto; }
@media (max-width: 780px) {
  .home-feature-band .panel-pair > section > .feature-panel { min-block-size: 0; }
}

/* Existing church photo softens into the central History copy. */
.history-section .history { column-gap: 0; }
.history-section .history__media {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.history-section .history__media img {
  -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 100%);
  mask-image: linear-gradient(to right, #000 50%, transparent 100%);
}
.history-section .history__intro {
  position: relative;
  z-index: 1;
  padding-inline: clamp(12px, 2vw, 38px);
}

/* Reference milestone rows: ornament, year, then localized description. */
.history-section .timeline--milestones {
  direction: ltr;
  margin-inline-start: clamp(10px, 1.3vw, 24px);
}
.history-section .timeline--milestones .timeline__entry {
  grid-template-columns: 30px 62px minmax(0, 1fr);
  gap: clamp(6px, .7vw, 12px);
  align-items: center;
  min-block-size: 42px;
}
.history-section .timeline--milestones .timeline__marker {
  inline-size: 28px;
  block-size: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #a66d41;
  animation: history-marker-float 3.6s ease-in-out infinite;
}
.history-section .timeline--milestones .timeline__entry:nth-child(even) .timeline__marker {
  animation-delay: -1.8s;
}
.history-section .timeline--milestones .timeline__marker svg {
  inline-size: 23px;
  block-size: 23px;
}
.history-section .timeline--milestones .timeline__year {
  white-space: nowrap;
  font-size: clamp(14px, 1vw, 20px);
  font-weight: 700;
}
.history-section .timeline--milestones .timeline__copy {
  min-inline-size: 0;
  text-align: start;
}
[dir="rtl"] .history-section .timeline--milestones .timeline__copy { direction: rtl; }
.history-section .timeline--milestones .timeline__label {
  display: block;
  font-size: clamp(12px, .86vw, 17px);
  line-height: 1.35;
}
.history-section .timeline--milestones::before,
.history-section .timeline--milestones::after { display: none; }
@keyframes history-marker-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (max-width: 980px) {
  .history-section .history { column-gap: var(--sp-5); }
  .history-section .history__media img {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .history-section .timeline--milestones { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--homepage .hero__welcome-float,
  .history-section .timeline--milestones .timeline__marker { animation: none; }
}

/* Fill the first screen with the nave while keeping all three welcome zones level.
   In RTL, explicit columns otherwise auto-place the side panels on separate rows. */
.hero--homepage { min-block-size: max(680px, 100svh); }
.hero--homepage .hero__inner {
  grid-template-rows: 1fr;
  min-block-size: calc(max(680px, 100svh) - var(--header-height));
}
.hero--homepage .hero__pillars-group,
.hero--homepage .hero__content,
.hero--homepage .hero__invitation { grid-row: 1; align-self: center; }
.hero--homepage .hero__pillars-group,
.hero--homepage .hero__invitation { inline-size: min(100%, 330px); }
.hero--homepage .hero__invitation { max-inline-size: none; }
.hero--homepage .hero__pillars,
.hero--homepage .hero__invitation-float {
  animation: hero-compose-float 7s ease-in-out infinite;
}
.hero--homepage .hero__pillars { animation-delay: -1.5s; }
.hero--homepage .hero__invitation-float { animation-delay: -3s; }
.hero--homepage .hero__welcome-logo {
  inline-size: clamp(160px, 11vw, 230px);
  block-size: clamp(160px, 11vw, 230px);
}
@media (max-width: 900px) {
  .hero--homepage .hero__welcome-logo {
    inline-size: clamp(125px, 14vw, 170px);
    block-size: clamp(125px, 14vw, 170px);
  }
}
@media (max-width: 680px) {
  .hero--homepage { min-block-size: max(720px, 100svh); }
  .hero--homepage .hero__inner {
    min-block-size: calc(max(720px, 100svh) - var(--header-height));
  }
  .hero--homepage .hero__pillars-group,
  .hero--homepage .hero__content,
  .hero--homepage .hero__invitation { grid-row: auto; }
  .hero--homepage .hero__pillars-group,
  .hero--homepage .hero__invitation { inline-size: auto; }
  .hero--homepage .hero__welcome-logo { inline-size: 130px; block-size: 130px; }
}

/* Five stops on a fine rail beside the milestone icons. The illuminated bead pauses at
   every dot before moving to the next, then starts another journey. */
.history-section .timeline--milestones {
  --journey-pad: clamp(12px, 1.2vw, 22px);
  --journey-gap: clamp(6px, .7vw, 12px);
  display: grid;
  grid-template-rows: repeat(var(--milestone-count), minmax(42px, 1fr));
  gap: 0;
}
.history-section .timeline--milestones .timeline__entry {
  grid-template-columns: 30px 14px 62px minmax(0, 1fr);
  gap: var(--journey-gap);
  min-inline-size: 0;
}
.history-section .timeline--milestones .timeline__node {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  inline-size: 8px;
  block-size: 8px;
  border: 2px solid #a66d41;
  border-radius: 50%;
  background: #fffaf2;
  box-shadow: 0 0 0 2px rgb(255 250 242 / 80%);
}
.history-section .timeline--milestones::before,
.history-section .timeline--milestones::after {
  display: block;
  inset-inline-start: calc(var(--journey-pad) + 30px + var(--journey-gap) + 6px);
  bottom: auto;
}
.history-section .timeline--milestones::before {
  top: calc(var(--journey-pad) + (100% - 2 * var(--journey-pad)) * .1);
  block-size: calc((100% - 2 * var(--journey-pad)) * .8);
  inline-size: 2px;
  background: #c8a27a;
}
.history-section .timeline--milestones::after {
  z-index: 2;
  top: calc(var(--journey-pad) + (100% - 2 * var(--journey-pad)) * .1);
  inline-size: 14px;
  block-size: 14px;
  margin-inline-start: -6px;
  margin-block-start: -7px;
  border: 2px solid #fffaf2;
  border-radius: 50%;
  background: #8f4d32;
  box-shadow: 0 0 0 3px rgb(166 109 65 / 25%), 0 0 15px rgb(166 109 65 / 60%);
  animation: history-journey 12s ease-in-out infinite;
}
@keyframes history-journey {
  0%, 10% { top: calc(var(--journey-pad) + (100% - 2 * var(--journey-pad)) * .1); }
  20%, 30% { top: calc(var(--journey-pad) + (100% - 2 * var(--journey-pad)) * .3); }
  40%, 50% { top: calc(var(--journey-pad) + (100% - 2 * var(--journey-pad)) * .5); }
  60%, 70% { top: calc(var(--journey-pad) + (100% - 2 * var(--journey-pad)) * .7); }
  80%, 94% { top: calc(var(--journey-pad) + (100% - 2 * var(--journey-pad)) * .9); }
  100% { top: calc(var(--journey-pad) + (100% - 2 * var(--journey-pad)) * .1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--homepage .hero__pillars,
  .hero--homepage .hero__invitation-float,
  .history-section .timeline--milestones::after { animation: none; }
}

/* In English the grid's inherited justify-content:center centered the rows while the
   absolute journey rail stayed anchored to the panel edge, crossing the icons. Keep the
   rows full width and place the rail and bead clear of the icon column. Arabic already
   has the requested relationship and retains its existing layout. */
html[lang="en"] .history-section .timeline--milestones {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  padding-inline-start: clamp(28px, 2vw, 38px);
}
html[lang="en"] .history-section .timeline--milestones::before,
html[lang="en"] .history-section .timeline--milestones::after {
  inset-inline-start: auto;
  left: calc(clamp(28px, 2vw, 38px) - 16px);
  right: auto;
}