/* Site shell. Colours, type and shape come only from tokens.css. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font: var(--md-sys-typescale-body-large);
}

main {
  flex: 1;
}

a {
  color: var(--app-color-link);
}

:focus-visible {
  outline: 3px solid var(--md-sys-color-tertiary);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 10;
  padding: 8px 16px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

.skip-link:focus {
  top: 8px;
}

/* Hero: slides under the header, which starts transparent. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: calc(-1 * var(--app-bar-height));
  min-height: calc(160px + var(--app-bar-height));
  /* Anchored at the top, so the transparent header's navy text sits on the bright sky, as on Home. */
  background: url("/images/hero.jpg") center top / cover no-repeat;
}

/* Inner pages: a slim banner with the title on the photo. The altar photo has no bright sky at the top,
   so a light wash sits behind the transparent header to keep its navy text readable (measured with
   Measure-HeroContrast.ps1), then fades out to show the photo. */
.hero:not(.hero--full)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--md-sys-color-surface) 86%, transparent) 0,
      color-mix(in srgb, var(--md-sys-color-surface) 86%, transparent) var(--app-bar-height),
      transparent calc(var(--app-bar-height) + 48px)),
    linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--md-sys-color-secondary) 78%, transparent) 100%);
}

/* The header's height is kept clear, so a long title (an album name, R4-T3) makes the banner taller
   instead of running under the transparent header. Short titles are unchanged: border-box keeps the minimum height. */
.hero:not(.hero--full) {
  padding-top: var(--app-bar-height);
}

.hero__banner {
  padding: 0 16px 20px;
  color: var(--md-sys-color-on-secondary);
  text-align: center;
  overflow-wrap: anywhere;
}

.hero__banner .page-title {
  margin: 0;
}

/* Album pages (R4-T3): a long album name can reach the bright sky, where white text measured 1.2:1.
   A navy band behind the title keeps it readable whatever its length; phones use a smaller size. */
.hero--album .hero__banner {
  padding-top: 32px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--md-sys-color-secondary) 82%, transparent) 28px);
}

.hero--album .hero__banner .page-title {
  font-size: 1.5rem;
  line-height: 1.25;
}

@media (min-width: 721px) {
  .hero--album .hero__banner .page-title {
    font-size: 2rem;
  }
}

.hero__banner .page-title::after {
  margin-top: 8px;
}

/*
  Home hero: the church's own Holy Qurbana, drifting slowly. The photo files are replaceable:
  keep their names, then re-measure the text with scripts/Measure-HeroContrast.ps1.
  On phones the photo fills the top and the text sits on navy beneath it.
*/
/* clip, not hidden: hidden would make the hero a scroll container and freeze the portrait's scroll-driven rise. */
.hero--full {
  overflow: clip;
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

.hero--full::after {
  content: "";
  position: absolute;
  /* Runs up behind the transparent header, whose navy text sits on the bright sky (director's choice). */
  inset: 0 0 auto;
  z-index: -2;
  height: calc(380px + var(--app-bar-height));
  background: url("/images/home-hero-phone.jpg") 25% top / cover no-repeat;
  transform-origin: 30% 40%;
  animation: hero-drift 16s ease-in-out infinite alternate;
  will-change: transform;
}

.hero--full::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 300px, var(--md-sys-color-secondary) 450px);
}

/* A gentle zoom anchored on the cross, so the cross stays in view at both ends. */
@keyframes hero-drift {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

.home-hero {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 380px 16px 32px;
}

/* White, not gold: gold measured 3.5:1 on the brightest parts of the drift (R2-S3-AC2). */
.home-hero__eyebrow {
  margin: 0 0 12px;
  color: var(--md-sys-color-on-secondary);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-hero__title {
  margin: 0;
  font: var(--md-sys-typescale-display-small);
}

.home-hero__lead {
  margin: 12px 0 22px;
  font-size: 1.125rem;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home-hero__actions .button-large {
  flex: 1 1 100%;
}

/* Upcoming: borderless text in the desktop hero, a navy band on phones. */
.home-upcoming--hero {
  display: none;
}

.home-upcoming--phone {
  padding: 8px 16px 44px;
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

/* Semi-bold rather than bold, so Upcoming sits as lightly as the welcome beside it (director's choice). */
.home-upcoming__title {
  margin: 0 0 6px;
  font: var(--md-sys-typescale-title-large);
  font-size: 1.375rem;
  font-weight: 600;
}

.home-events {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-event {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-on-secondary) 24%, transparent);
}

.home-event__date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 60px;
  padding: 8px 0;
  border-radius: var(--md-sys-shape-corner-medium);
  background: color-mix(in srgb, var(--md-sys-color-on-secondary) 8%, var(--md-sys-color-secondary));
  color: var(--md-sys-color-on-secondary);
}

.home-event__date--all-day {
  background: var(--md-sys-color-crimson);
  color: var(--md-sys-color-on-crimson);
}

.home-event__day {
  font: 700 1.25rem/1 var(--md-ref-typeface-heading);
}

.home-event__month {
  color: var(--md-sys-color-primary-container);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-event__body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-event__title {
  margin: 0;
  font: 600 1.0625rem/1.35 var(--md-ref-typeface-heading);
}

.home-event__when {
  margin: 2px 0 0;
  font: var(--md-sys-typescale-body-medium);
}

.home-upcoming__empty {
  margin: 8px 0 0;
  font: var(--md-sys-typescale-body-medium);
}

.home-upcoming__all {
  display: inline-block;
  margin-top: 12px;
  color: var(--md-sys-color-primary);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.home-upcoming__all:hover {
  text-decoration: underline;
}

/* On the photo, gold fell to 3.8:1 over the brightest clouds, so it is white with an underline (R2-S3-AC2). */
.home-upcoming--hero .home-upcoming__all {
  color: var(--md-sys-color-on-secondary);
  text-decoration: underline;
}

/* Service card: inside the hero block, below the welcome. */
.visit {
  position: relative;
  scroll-margin-top: calc(var(--app-bar-height) + 16px);
  padding: 0 16px 28px;
}

.visit__card {
  display: grid;
  gap: 20px;
  max-width: 1112px;
  margin: 0 auto;
  padding: 24px 20px;
  border-top: 5px solid var(--md-sys-color-primary);
  border-radius: 20px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--md-sys-color-secondary) 16%, transparent);
}

.visit__info {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.visit__info p {
  margin: 0;
}

.visit__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.visit__label {
  color: var(--app-color-link);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visit__value {
  color: var(--md-sys-color-secondary);
  font: 600 1.25rem/1.3 var(--md-ref-typeface-heading);
}

.visit__detail {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
  font-size: 0.9375rem;
}

/*
  Photo bands below the hero. Each photo sits on ::after, which drifts gently as the band scrolls
  past in browsers that support scroll-driven animation, under a navy veil on ::before.
  Re-measure with scripts/Measure-HeroContrast.ps1 (see docs/DECISIONS.md) when a photo changes.
*/
.home-family {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

.home-family::after {
  content: "";
  position: absolute;
  inset: -22% 0;
  z-index: -2;
  background: var(--band-photo) var(--band-position, center) / cover no-repeat;
}

.home-family::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--band-veil);
}

/*
  Holy Father's Message: inside the hero block, on the same drifting cross photo as the welcome.
  His portrait rises into view; no glow behind him (director's choice).
*/
.home-message {
  position: relative;
  color: var(--md-sys-color-on-secondary);
  padding: 60px 16px 0;
}

.home-message__inner {
  display: grid;
  justify-items: center;
  gap: 32px;
  max-width: 1112px;
  margin: 0 auto;
}

.home-message__text {
  justify-self: stretch;
}

.home-message__title {
  margin: 0 0 20px;
  color: var(--md-sys-color-primary);
  font: var(--md-sys-typescale-headline-medium);
}

.home-message__quote {
  margin: 0;
  font: 400 1.125rem/1.6 var(--md-ref-typeface-heading);
}

.home-message__quote p {
  margin: 0;
}

.home-message__cite {
  margin: 24px 0 0;
}

.home-message__cite span {
  display: block;
  color: var(--md-sys-color-primary-container);
  font-size: 1rem;
}

.home-message__cite strong {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
}

.home-message__portrait {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
}

/* Be part of our family: three photo cards. */
.home-family {
  --band-photo: url("/images/home-family.jpg");
  --band-position: center 70%;
  --band-veil: linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-secondary) 74%, transparent), color-mix(in srgb, var(--md-sys-color-secondary) 62%, transparent));

  padding: 60px 16px;
}

.home-family__inner {
  max-width: 1112px;
  margin: 0 auto;
}

.section-title--ornament::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
}

/* Scoped so it outranks .section-title, which comes later in this file. */
.home-family .home-family__title {
  color: var(--md-sys-color-on-secondary);
  text-shadow: 0 2px 16px color-mix(in srgb, var(--md-sys-color-secondary) 55%, transparent);
}

.home-cards {
  display: grid;
  gap: 16px;
}

.home-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
  text-decoration: none;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--md-sys-color-secondary) 60%, transparent);
}

.home-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
}

/* The text fades up over the bottom of the photo. */
.home-card__body {
  position: relative;
  flex: 1;
  margin-top: -64px;
  padding: 64px 20px 22px;
  background: linear-gradient(180deg, transparent, var(--md-sys-color-secondary) 60px);
  overflow-wrap: anywhere;
}

.home-card__title {
  margin: 0;
  font: 600 1.375rem/1.2 var(--md-ref-typeface-heading);
}

.home-card__text {
  margin: 6px 0 10px;
  font: var(--md-sys-typescale-body-medium);
  font-size: 1rem;
}

.home-card__more {
  margin: 0;
  color: var(--md-sys-color-primary);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.9375rem;
  font-weight: 600;
}

.home-card:hover .home-card__more {
  text-decoration: underline;
}

/* Latest notices on calm ivory. */
.home-notices {
  padding-top: 60px;
  padding-bottom: 60px;
}

.home-notices .notice-item {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent);
}

/* About: the parish history in readable sections, with the key dates first. */
/* Scoped so it outranks .page-section, which comes later in this file. */
.page-section.prose {
  max-width: 760px;
}

.prose h2 {
  margin: 40px 0 12px;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-title-large);
  font-size: 1.5625rem;
}

.prose p {
  margin: 0 0 16px;
}

/* Privacy (R2-T21): a plain list and the date the page last changed. */
.prose ul {
  margin: 0 0 16px;
  padding-left: 1.5em;
}

.prose li + li {
  margin-top: 6px;
}

.prose .privacy__updated {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
}

.key-dates {
  padding: 20px 24px;
  border-left: 5px solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-1);
}

.prose .key-dates__title {
  margin: 0 0 12px;
  font-size: 1.1875rem;
}

.key-dates__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.key-dates__list time {
  display: block;
  color: var(--app-color-link);
  font: var(--md-sys-typescale-label-large);
  font-weight: 600;
}

/* Contact: details beside a self-hosted map that opens directions. */
.contact__intro {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

.contact__grid {
  display: grid;
  align-items: start;
  gap: 24px;
}

.contact__card {
  min-width: 0;
  padding: 24px 20px;
  border-top: 5px solid var(--md-sys-color-primary);
  border-radius: 20px;
  background: var(--md-sys-color-surface);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--md-sys-color-secondary) 16%, transparent);
}

.contact__name {
  margin: 0 0 20px;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-title-large);
}

.contact__list {
  display: grid;
  gap: 18px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.contact__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.contact__label {
  margin: 0;
  color: var(--app-color-link);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact__value {
  margin: 2px 0 0;
  font-style: normal;
}

.contact__value a {
  display: inline-block;
  padding: 4px 0;
}

/* Scoped so it outranks .button-large, which comes later in this file. */
.contact__card .contact__directions {
  display: flex;
}

.contact__map {
  margin: 0;
}

.contact__map img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--md-sys-elevation-1);
}

.contact__map figcaption {
  margin-top: 8px;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
  font-size: 0.8125rem;
}

/* Join Us: the Infoodle membership form, with a fallback shown until the form reports that it has loaded. */
.join__verse {
  max-width: 640px;
  margin: 0 auto 20px;
  padding: 8px 0 8px 20px;
  border-left: 4px solid var(--md-sys-color-primary);
  color: var(--md-sys-color-secondary);
  font: 400 1.125rem/1.6 var(--md-ref-typeface-heading);
}

.join__verse p {
  margin: 0 0 4px;
}

.join__verse cite {
  color: var(--app-color-link);
  font: var(--md-sys-typescale-label-large);
  font-style: normal;
}

.join__intro {
  max-width: 640px;
  margin: 0 auto 32px;
}

/* Planned donation (R2-T22): the same layout as Join Us, with how donations are used before the form. */
.donation__uses {
  max-width: 640px;
  margin: 0 auto 24px;
  padding: 20px 24px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-1);
}

.donation__uses-title {
  margin: 0 0 8px;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-title-medium);
}

.donation__uses p {
  margin: 0 0 12px;
}

.donation__uses ul {
  margin: 0;
  padding-left: 1.25em;
}

.donation__uses li + li {
  margin-top: 6px;
}

.infoodle-form {
  display: grid;
}

/* Laid out but invisible, so the form can measure itself before site.js shows it. */
.infoodle-form__frame {
  display: block;
  width: 100%;
  height: 0;
  border: 0;
  visibility: hidden;
  scroll-margin-top: calc(var(--app-bar-height) + 16px);
}

/* Once shown, the form sits in the site's card; its own page is transparent (docs/infoodle/form-style.css). */
.infoodle-form[data-loaded] {
  padding: 20px 16px;
  border-top: 5px solid var(--md-sys-color-primary);
  border-radius: 20px;
  background: var(--md-sys-color-surface);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--md-sys-color-secondary) 16%, transparent);
}

.infoodle-form[data-loaded] .infoodle-form__frame {
  visibility: visible;
}

@media (min-width: 600px) {
  .infoodle-form[data-loaded] {
    padding: 32px 28px;
  }
}

.infoodle-form[data-loaded] .infoodle-form__fallback {
  display: none;
}

/* The icon sits above the text on phones, so the text keeps the full width. */
.infoodle-form__fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 24px 20px;
  border-top: 5px solid var(--md-sys-color-primary);
  border-radius: 20px;
  background: var(--md-sys-color-surface);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--md-sys-color-secondary) 16%, transparent);
  overflow-wrap: anywhere;
}

@media (min-width: 600px) {
  .infoodle-form__fallback {
    flex-direction: row;
    gap: 16px;
  }
}

.infoodle-form__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.infoodle-form__body {
  min-width: 0;
}

.infoodle-form__body p {
  margin: 0 0 16px;
}

.infoodle-form__title {
  margin: 6px 0 12px;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-title-large);
}

/* Scoped so it outranks .button-large, which comes later in this file. */
.infoodle-form__body .infoodle-form__open {
  white-space: normal;
  text-align: center;
}

.infoodle-form__contacts {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.infoodle-form__contacts li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.infoodle-form__contacts .icon {
  flex: none;
  color: var(--app-color-link);
}

.infoodle-form__contacts a {
  display: inline-block;
  min-width: 0;
  padding: 6px 0;
}

/* Prayer Request: the public form (R3-T1). */
.prayer {
  max-width: 680px;
}

.prayer__intro {
  margin: 0 auto 24px;
}

.prayer__notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  text-align: left;
}

.prayer__notice .icon {
  flex: none;
}

.prayer__form {
  padding: 24px 20px;
  border-top: 5px solid var(--md-sys-color-primary);
  border-radius: 20px;
  background: var(--md-sys-color-surface);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--md-sys-color-secondary) 16%, transparent);
}

.field__optional {
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 400;
}

.field__input--area {
  min-height: 144px;
  resize: vertical;
  font: var(--md-sys-typescale-body-large);
  line-height: 1.5;
}

.field__input[aria-invalid="true"] {
  border: 2px solid var(--md-sys-color-error);
}

.field__error:empty {
  display: none;
}

/* The privacy note under the send button (R2-T21). */
.prayer__privacy {
  margin: 12px 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
  text-align: center;
}

/* Off-screen rather than display:none, which some bots skip. */
.prayer__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 600px) {
  .prayer__form {
    padding: 32px 28px;
  }
}

/* Admin: home cards and the prayer request list (R3-T2). A table on wide screens, stacked cards on phones. */
.admin-cards {
  display: grid;
  gap: 16px;
  margin: 0 0 8px;
}

.admin-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-top: 5px solid var(--md-sys-color-primary);
  border-radius: 20px;
  background: var(--md-sys-color-surface);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--md-sys-color-secondary) 12%, transparent);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
}

.admin-card:hover .admin-card__title {
  text-decoration: underline;
}

.admin-card__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.admin-card__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-card__title {
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-title-large);
}

.admin-card__detail {
  color: var(--md-sys-color-on-surface-variant);
}

.admin-prayers__back {
  margin: 0 0 16px;
}

.admin-prayers__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin: 0 0 8px;
  padding: 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
}

.admin-prayers__filter .field {
  flex: 1 1 150px;
}

.admin-prayers__show {
  min-height: 48px;
}

.admin-prayers__summary {
  margin: 16px 0;
  color: var(--md-sys-color-on-surface-variant);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.admin-table tr {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 16px;
  border-left: 5px solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-1);
}

.admin-table td {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-table td::before {
  content: attr(data-label);
  color: var(--app-color-link);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.8125rem;
  font-weight: 600;
}

.admin-table__name {
  color: var(--md-sys-color-secondary);
  font-weight: 600;
}

.admin-table__contact {
  display: block;
  padding: 2px 0;
}

.admin-table__none {
  color: var(--md-sys-color-on-surface-variant);
}

.admin-table__text {
  white-space: pre-line;
}

.admin-table__request details p {
  margin: 8px 0 0;
}

.admin-table__request details[open] summary .admin-table__text {
  display: none;
}

.admin-table__more {
  color: var(--app-color-link);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.admin-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 24px 0 0;
}

.admin-pager__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
}

@media (min-width: 900px) {
  .admin-table thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .admin-table tr {
    display: table-row;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .admin-table th,
  .admin-table td {
    display: table-cell;
    padding: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 35%, transparent);
    text-align: left;
    vertical-align: top;
  }

  .admin-table th {
    color: var(--md-sys-color-secondary);
    font: var(--md-sys-typescale-label-large);
    font-weight: 600;
  }

  .admin-table td::before {
    content: none;
  }

  .admin-table td {
    overflow-wrap: break-word;
  }

  .admin-table td:first-child,
  .admin-table__phone {
    white-space: nowrap;
  }

  .admin-table__request {
    width: 36%;
  }

  /*
    Who the prayer is for: wide enough for a full name, because anywhere (below) would otherwise let the column shrink
    to a letter. Table cells ignore min-width, so it sits on a block inside the cell.
  */
  .admin-table__for-text {
    display: block;
    min-width: 10rem;
  }

  /*
    Visitors can type long unbroken text in a request, such as a web address. break-word doesn't let the table shrink
    that column, so the table grew past the page; anywhere does (R3-T3). Contacts keep break-word, so emails stay whole.
  */
  .admin-table td.admin-table__request,
  .admin-table td.admin-table__for {
    overflow-wrap: anywhere;
  }

  .admin-table td.admin-table__actions {
    width: 1%;
    white-space: nowrap;
  }
}

/* Prayer requests: downloads, delete and bulk delete (R3-T3). Scoped to admin classes, so shared buttons are untouched. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--md-sys-color-secondary);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-label-large);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.admin-button:hover {
  box-shadow: var(--md-sys-elevation-1);
}

.admin-button .icon {
  width: 20px;
  height: 20px;
}

.admin-button--quiet {
  min-height: 40px;
  padding: 0 14px;
  border-color: color-mix(in srgb, var(--md-sys-color-outline) 60%, transparent);
  color: var(--md-sys-color-error);
}

.admin-button--danger {
  border-color: var(--md-sys-color-error);
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

.admin-prayers__status {
  margin: 0 0 16px;
}

.admin-prayers__downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

.admin-prayers__downloads-note {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
}

.admin-prayers__bulk {
  margin: 32px 0 0;
  text-align: center;
}

.admin-prayers__bulk a {
  color: var(--md-sys-color-error);
  font-weight: 600;
}

/*
  On phones the row's Delete sits at the end of its card, not in the label column. Limited to phone widths, because
  this rule comes after the desktop table rules and would otherwise turn the cell out of the table (R3-T3).
*/
@media (max-width: 899px) {
  .admin-table td.admin-table__actions {
    display: flex;
    justify-content: flex-end;
  }
}

.admin-confirm {
  width: min(480px, calc(100vw - 32px));
  padding: 24px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  box-shadow: var(--md-sys-elevation-2);
  white-space: normal;
}

.admin-confirm::backdrop {
  background: color-mix(in srgb, var(--md-sys-color-secondary) 50%, transparent);
}

.admin-confirm__title {
  margin: 0 0 12px;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-title-large);
}

.admin-confirm p {
  margin: 0 0 20px;
  overflow-wrap: anywhere;
}

.admin-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.delete-range .field__input {
  max-width: 160px;
}

/* Sign in with Google above the password form (R3-T5). The Google "G" keeps Google's own colours, as its brand rules require. */
.sign-in__password {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sign-in__google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-label-large);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.sign-in__google:hover {
  box-shadow: var(--md-sys-elevation-1);
}

.sign-in__google-logo {
  width: 20px;
  height: 20px;
  flex: none;
}

.sign-in__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
}

.sign-in__or::before,
.sign-in__or::after {
  content: "";
  flex: 1;
  border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 50%, transparent);
}

/* Admin users (R3-T4). */
.admin-users__add {
  margin: 0 0 32px;
}

.admin-users__hint {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
  overflow-wrap: anywhere;
}

.admin-users__fields {
  display: grid;
  gap: 16px;
}

.admin-users__submit {
  justify-self: start;
  min-height: 48px;
}

.admin-users__you {
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 400;
}

.admin-users__role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-users__role .field__input {
  width: auto;
  min-width: 170px;
}

.admin-users__table .admin-table__name {
  overflow-wrap: anywhere;
}

/* The account ID the logs use (R6-T4): small, on its own line, easy to search for. */
.admin-users__table .admin-users__id {
  display: block;
  margin-top: 2px;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
  font-size: 0.8125rem;
  font-weight: 400;
}

.admin-users__id-value {
  font-variant-numeric: tabular-nums;
  user-select: all;
}

/* Logs (R6-T4). */
.admin-logs .admin-logs__hint {
  margin: 0 0 16px;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
}

.admin-logs .admin-logs__table .admin-button {
  white-space: nowrap;
}

@media (min-width: 720px) {
  .admin-users__fields {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    align-items: start;
  }

  .admin-users__submit {
    margin-top: 28px;
  }
}

@media (min-width: 900px) {
  /* Scoped to this table, so the prayer list keeps its top-aligned rows. */
  .admin-users__table th,
  .admin-users__table td {
    vertical-align: middle;
  }
}

.delete-range .form-card p,
.delete-range .admin-confirm__title {
  margin: 0;
}

.delete-range__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Our Committee: the Managing Committee from the database, then the Sunday School and Youth Association. */
.committee__jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 32px;
}

.committee__jump a {
  padding: 8px 16px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font: var(--md-sys-typescale-label-large);
  text-decoration: none;
}

.committee__jump a:hover {
  text-decoration: underline;
}

.committee__section {
  min-width: 0;
  padding: 24px 20px;
  border-top: 5px solid var(--md-sys-color-primary);
  border-radius: 20px;
  background: var(--md-sys-color-surface);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--md-sys-color-secondary) 12%, transparent);
  overflow-wrap: anywhere;
  scroll-margin-top: calc(var(--app-bar-height) + 16px);
}

.committee__section p {
  margin: 0 0 16px;
}

.committee__title {
  margin: 0 0 20px;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-headline-medium);
  font-size: 1.75rem;
}

.committee__subtitle {
  margin: 24px 0 12px;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-title-large);
}

/* Capped and centred on wide screens, so the names stay near the top of the card. */
.committee__photo {
  max-width: 760px;
  margin: 0 auto 24px;
}

.committee__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-1);
}

.committee__roles {
  display: grid;
  gap: 12px;
  margin: 0;
}

.committee__role {
  min-width: 0;
  padding: 14px 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
}

.committee__role dt {
  color: var(--app-color-link);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.committee__role dd {
  margin: 2px 0 0;
  color: var(--md-sys-color-secondary);
  font: 600 1.125rem/1.35 var(--md-ref-typeface-heading);
}

.committee__members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.committee__members li {
  min-width: 0;
  padding: 6px 14px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.committee__groups {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.committee__verse {
  margin: 0 0 16px;
  padding: 8px 0 8px 20px;
  border-left: 4px solid var(--md-sys-color-primary);
  color: var(--md-sys-color-secondary);
  font: 400 1.125rem/1.6 var(--md-ref-typeface-heading);
}

.committee__section .committee__verse p {
  margin: 0 0 4px;
}

.committee__verse cite {
  color: var(--app-color-link);
  font: var(--md-sys-typescale-label-large);
  font-style: normal;
}

.committee__mission {
  margin: 0 0 16px;
  padding-left: 20px;
}

.committee__mission li {
  margin-bottom: 8px;
}

.committee__contact span {
  display: block;
  color: var(--app-color-link);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@supports (animation-timeline: view()) {
  .home-family::after {
    animation: band-drift linear both;
    animation-timeline: view();
  }

  .home-message__portrait {
    animation: portrait-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
}

@keyframes band-drift {
  from {
    transform: translateY(-15%);
  }

  to {
    transform: translateY(15%);
  }
}

@keyframes portrait-rise {
  from {
    opacity: 0;
    transform: translateY(90px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Top app bar: solid by default, transparent over the hero while site.js says so. */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--app-bar-height);
  padding: 0 max(12px, calc((100% - 1160px) / 2));
  border-bottom: 3px solid var(--md-sys-color-primary);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  box-shadow: var(--md-sys-elevation-2);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/*
  Over the photo, on every page and at every width: no band behind the header, and navy text with a faint light glow
  on the bright sky (director's choice).
*/
.app-bar--over-hero {
  border-bottom-color: transparent;
  background-color: transparent;
  color: var(--md-sys-color-secondary);
  box-shadow: none;
}

.app-bar--over-hero :is(.brand__name, .brand__tagline, .brand__affiliation, .app-nav__link) {
  text-shadow: var(--app-text-glow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}

.brand__logo {
  flex: none;
  width: 50px;
  height: 50px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Wraps the name and tagline; an <h1> on Home only, styled to look the same as on every other page. */
.brand__heading {
  display: flex;
  flex-direction: column;
  margin: 0;
  font: inherit;
}

.brand__name {
  font: var(--md-sys-typescale-title-large);
  font-size: 1.0625rem;
  line-height: 1.15;
}

.brand__tagline {
  font: var(--md-sys-typescale-label-large);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

/* The Patriarchate and charity number: header only, smaller than the tagline (director's request, 2026-11-11). */
.brand__affiliation {
  font: var(--md-sys-typescale-label-large);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

.app-bar:has(.app-bar__form) :is(.brand__tagline, .brand__affiliation) {
  display: none;
}

.app-nav {
  display: none;
  align-items: center;
  gap: 2px;
}

.app-nav__link {
  display: block;
  padding: 8px 14px;
  border-radius: var(--md-sys-shape-corner-full);
  color: inherit;
  font: var(--md-sys-typescale-label-large);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.app-nav__link:hover,
.drawer__link:hover,
.app-nav__sublink:hover,
.icon-button:hover:not(:disabled) {
  background: color-mix(in srgb, currentColor var(--md-sys-state-hover-opacity), transparent);
}

.app-nav__link[aria-current="page"],
.app-nav__link[data-active="true"],
.app-nav__sublink[aria-current="page"],
.drawer__link[aria-current="page"] {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.app-bar--over-hero .app-nav__link[aria-current="page"],
.app-bar--over-hero .app-nav__link[data-active="true"] {
  background: color-mix(in srgb, var(--md-sys-color-secondary) 10%, transparent);
  color: inherit;
}

.nav-menu {
  position: relative;
}

.nav-menu summary {
  list-style: none;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: "";
  display: inline-block;
  margin-left: 8px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  vertical-align: middle;
}

.nav-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 8px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-2);
}

.app-nav__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--md-sys-shape-corner-small);
  color: inherit;
  font: var(--md-sys-typescale-label-large);
  font-size: 0.9375rem;
  text-decoration: none;
}

.app-bar .app-bar__cta {
  display: none;
  margin-left: 12px;
  white-space: nowrap;
}

.icon-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.drawer .icon-button {
  color: var(--md-sys-color-on-surface);
}

/* Navigation drawer */
.drawer {
  inset: 0 0 0 auto;
  width: min(320px, 85vw);
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--md-sys-shape-corner-large) 0 0 var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-2);
}

.drawer:popover-open {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer::backdrop {
  background: color-mix(in srgb, var(--md-sys-color-secondary) 40%, transparent);
}

.drawer__close {
  align-self: flex-end;
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-label-large);
  text-decoration: none;
}

/* Page content */
.page-section {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 16px;
}

.page-title {
  margin: 0 0 32px;
  font: var(--md-sys-typescale-headline-medium);
  text-align: center;
}

.page-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
}

.notice-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
}

.notice-card p {
  margin: 0;
}

/* The error page's reference (R6-S2): easy to read out on the phone. */
.error-reference {
  margin: 16px 0 0;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.error-reference__code {
  color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.section-title {
  margin: 0 0 24px;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-headline-medium);
  text-align: center;
}

.notice-list {
  display: grid;
  align-items: start;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-item {
  min-width: 0;
  padding: 20px 24px;
  border-left: 5px solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-1);
  overflow-wrap: anywhere;
}

.notice-item p {
  margin: 0;
}

.notice-item__until {
  color: var(--app-color-link);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.8125rem;
}

.notice-item__head {
  margin: 2px 0 4px;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-title-large);
}

.notice-item__message {
  color: var(--md-sys-color-on-surface-variant);
  white-space: pre-line;
}

.bell {
  position: relative;
}

.bell__count {
  position: absolute;
  top: 4px;
  right: 2px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-crimson);
  color: var(--md-sys-color-on-crimson);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.6875rem;
  line-height: 1;
}

.notice-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: 80dvh;
  padding: 16px;
  overflow-y: auto;
  border: 0;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  box-shadow: var(--md-sys-elevation-2);
}

.notice-dialog::backdrop {
  background: color-mix(in srgb, var(--md-sys-color-secondary) 50%, transparent);
}

.notice-dialog__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.notice-dialog__title {
  margin: 0;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-title-large);
}

.page-section--narrow {
  max-width: 480px;
}

.form-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
}

.form-error {
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  font: var(--md-sys-typescale-body-medium);
}

.form-error ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.form-success {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  font: var(--md-sys-typescale-body-medium);
  text-align: center;
}

.validation-summary-valid {
  display: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font: var(--md-sys-typescale-label-large);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-large);
}

.field__input.input-validation-error {
  border: 2px solid var(--md-sys-color-error);
}

.field__hint {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
}

.field__error {
  color: var(--md-sys-color-error);
  font: var(--md-sys-typescale-body-medium);
}

.page-actions {
  margin: 24px 0 0;
  text-align: center;
}

.button-filled {
  display: inline-block;
  padding: 10px 24px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font: var(--md-sys-typescale-label-large);
  text-decoration: none;
}

button.button-filled {
  border: 0;
  cursor: pointer;
}

.button-outline-light,
.button-navy {
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large);
  text-decoration: none;
}

.button-outline-light {
  border: 2px solid var(--md-sys-color-on-secondary);
  color: var(--md-sys-color-on-secondary);
}

.button-navy {
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

/* Large pill buttons for the home page. Declared after the colour classes so it sets the size. */
.button-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.button-navy:hover,
.button-outline-light:hover {
  box-shadow: var(--md-sys-elevation-1);
}

.button-filled--block {
  width: 100%;
  min-height: 48px;
}

.app-bar__form {
  display: contents;
}

/* Events: an upcoming list on phones, a month calendar on larger screens. */
.page-section--wide {
  max-width: 1160px;
}

.calendar-view {
  display: none;
}

.event-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-item {
  display: flex;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-1);
}

.event-item__date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  width: 60px;
  padding: 8px 4px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font: var(--md-sys-typescale-label-large);
  font-size: 0.75rem;
}

.event-item__day {
  font: var(--md-sys-typescale-title-large);
}

.event-item__body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-item__body p {
  margin: 0;
}

.event-item__title {
  margin: 0 0 2px;
  color: var(--md-sys-color-secondary);
  font: var(--md-sys-typescale-title-large);
}

.event-item__when,
.event-item__where {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  color: var(--md-sys-color-secondary);
}

.calendar-nav__month {
  margin: 0;
  font: var(--md-sys-typescale-headline-medium);
}

.calendar-nav__end {
  visibility: hidden;
}

.calendar__empty {
  margin: 0 0 16px;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
}

.calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-1);
}

.calendar th {
  padding: 10px 4px;
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
  font: var(--md-sys-typescale-label-large);
}

.calendar__cell {
  height: 112px;
  padding: 6px;
  border: 1px solid var(--md-sys-color-surface-variant);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.calendar__cell--outside {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
}

.calendar__day {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large);
}

.calendar__cell[aria-current="date"] .calendar__day {
  background: var(--md-sys-color-crimson);
  color: var(--md-sys-color-on-crimson);
}

.calendar__events {
  display: grid;
  gap: 4px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.calendar__event {
  padding: 4px 6px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font: var(--md-sys-typescale-body-medium);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.calendar__event--all-day {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.calendar__time {
  display: block;
  font-weight: 500;
}

/* Footer */
.site-footer {
  padding: 48px 16px 24px;
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
  font: var(--md-sys-typescale-body-medium);
}

.site-footer a {
  color: var(--md-sys-color-on-secondary);
}

.site-footer p {
  margin: 0 0 8px;
}

.site-footer__grid {
  display: grid;
  gap: 32px;
  max-width: 1160px;
  margin: 0 auto;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  align-self: start;
  gap: 10px;
}

.site-footer__heading {
  margin: 0 0 12px;
  color: var(--md-sys-color-primary);
  font: var(--md-sys-typescale-title-large);
}

#service-times {
  scroll-margin-top: calc(var(--app-bar-height) + 16px);
}

.site-footer .site-footer__legal {
  max-width: 1160px;
  margin: 32px auto 0;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--md-sys-color-on-secondary) 22%, transparent);
}

/* Phone quick actions, always within reach. */
.quick-bar {
  display: none;
}

@media (max-width: 720px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .quick-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 15;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--md-sys-color-secondary);
    box-shadow: var(--md-sys-elevation-2);
  }

  .quick-bar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    color: var(--md-sys-color-on-secondary);
    font: var(--md-sys-typescale-label-large);
    font-size: 0.8125rem;
    text-decoration: none;
  }

  .quick-bar__link--main {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
  }
}

@media (min-width: 721px) {
  main .notice-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .notice-dialog .notice-list {
    grid-template-columns: 1fr;
  }

  .calendar-view {
    display: block;
  }

  .upcoming-view {
    display: none;
  }

  .hero {
    min-height: calc(240px + var(--app-bar-height));
  }

  .hero__banner {
    padding-bottom: 32px;
  }


  /* Tablets: like phones, the photo across the top and white text on navy below it. */
  .hero--full::after {
    height: calc(460px + var(--app-bar-height));
    background-image: url("/images/home-hero.jpg");
  }

  .hero--full::before {
    background: linear-gradient(180deg, transparent 360px, var(--md-sys-color-secondary) 540px);
  }

  .home-hero {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 480px 24px 48px;
  }

  .home-hero__lead {
    margin: 18px 0 30px;
    font-size: 1.25rem;
  }

  .home-hero__actions .button-large {
    flex: none;
  }

  .home-upcoming--hero {
    display: block;
    width: min(560px, 100%);
    padding: 22px 26px 18px;
  }

  /* 24 px, so the semi-bold heading counts as large text over the photo (WCAG 3:1). */
  .home-upcoming--hero .home-upcoming__title {
    font-size: 1.5rem;
  }
  .home-upcoming--phone {
    display: none;
  }

  .visit {
    padding: 0 24px;
  }

  .visit__card {
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    padding: 28px 36px;
  }

  .visit__directions {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .home-message {
    padding: 88px 24px 0;
  }


  .home-message__inner {
    grid-template-columns: 1.5fr 1fr;
    align-items: end;
    gap: 64px;
  }

  .home-message__text {
    align-self: center;
    padding-bottom: 88px;
  }

  .home-message__quote {
    font-size: 1.3125rem;
  }

  .home-message__portrait {
    width: 380px;
  }

  .home-family {
    padding: 88px 24px;
  }

  .home-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .home-card__title {
    font-size: 1.625rem;
  }

  .home-notices {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .key-dates__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .committee__section {
    padding: 32px;
  }

  .committee__roles {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact__grid {
    grid-template-columns: 1fr 1.25fr;
    gap: 32px;
  }

  .contact__card {
    padding: 32px;
  }

  .contact__item {
    gap: 16px;
  }

  .contact__icon {
    width: 48px;
    height: 48px;
  }

  .contact__card .contact__directions {
    display: inline-flex;
  }

  .contact__map img {
    height: auto;
    aspect-ratio: 1200 / 640;
  }

  .site-footer {
    padding: 64px 24px 28px;
  }

  .site-footer__grid {
    grid-template-columns: 1.4fr 1.4fr 1fr 1fr;
    gap: 48px;
  }

  .brand__logo {
    width: 60px;
    height: 60px;
  }

  .brand__name {
    font-size: 1.1875rem;
  }

  .brand__tagline {
    font-size: 0.8125rem;
  }

  .brand__affiliation {
    font-size: 0.6875rem;
  }
}

/*
  Phones and tablets, where the menu button replaces the navigation: no brand block in the footer, since the header
  already shows the logo and name (director's request, 2026-11-11). Tablets keep three footer columns, not four.
*/
@media (max-width: 1039px) {
  .site-footer .site-footer__brand {
    display: none;
  }
}

@media (min-width: 721px) and (max-width: 1039px) {
  .site-footer .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (min-width: 1040px) {
  .app-nav {
    display: flex;
  }

  .app-bar .app-bar__cta {
    display: inline-block;
  }

  .menu-button {
    display: none;
  }

  /*
    Desktop: the photo fills the hero behind the welcome and Upcoming at full brightness, and fades to navy
    behind the service card. It is always at least tall enough to reach past the card, so there is no hard edge.
  */
  .hero--full::after {
    inset: 0;
    height: auto;
    background-position: center top;
    background-size: max(100%, calc((var(--app-bar-height) + 820px) * 1.43)) auto;
    transform-origin: 32% 300px;
    mask-image: linear-gradient(180deg, #000 calc(var(--app-bar-height) + 560px), transparent calc(var(--app-bar-height) + 800px));
  }

  .hero--full::before {
    background: none;
  }

  .home-hero {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    min-height: calc(640px + var(--app-bar-height));
    padding: calc(var(--app-bar-height) + 96px) 24px 48px;
  }

  /*
    Dark text on the bright photo (director's choice): no shading behind the welcome or Upcoming (the header's
    rule applies at every width, above). A faint light glow keeps navy letters crisp where the photo is mid-toned.
    Smaller screens keep the welcome in white text on navy.
  */
  .home-hero__copy,
  .home-hero__copy .home-hero__eyebrow,
  .home-upcoming--hero,
  .home-upcoming--hero .home-upcoming__all {
    color: var(--md-sys-color-secondary);
  }

  .home-hero__copy :is(.home-hero__eyebrow, .home-hero__title, .home-hero__lead),
  .home-upcoming--hero :is(.home-upcoming__title, .home-event__title, .home-event__when, .home-upcoming__empty, .home-upcoming__all) {
    text-shadow: var(--app-text-glow);
  }

  .home-hero .button-outline-light {
    border-color: var(--md-sys-color-secondary);
    color: var(--md-sys-color-secondary);
  }

  /* The event times are small text, so they need the full 4.5:1: one extra layer of glow close to the letters. */
  /* Semi-bold event lines are not large text, so they need 4.5:1 over the birds: two extra glow layers close to the letters. */
  .home-upcoming--hero :is(.home-event__title, .home-event__when) {
    text-shadow: var(--app-text-glow), 0 0 2px var(--md-sys-color-background), 0 0 5px var(--md-sys-color-background);
  }

  /* Over the ridge, small link text cannot reach 4.5:1 without shading, so on desktop it is a small gold button. */
  .home-upcoming--hero .home-upcoming__all {
    padding: 8px 18px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
    text-shadow: none;
  }
  .home-hero__copy {
    width: min(540px, 100%);
  }

  .home-upcoming--hero {
    flex: none;
    width: 440px;
  }

  .visit__card {
    grid-template-columns: 1.1fr 1.1fr auto;
    align-items: center;
  }

  .visit__directions {
    grid-column: auto;
  }

  .committee__roles {
    grid-template-columns: repeat(4, 1fr);
  }

  .committee__groups {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

/*
  Wide screens: the photo grows and the first event lands on the birds, where semi-bold titles fall to 4.1–4.5:1
  from about 1440 px. Bold at 19 px is large text (WCAG 3:1), so the titles are bold here only (director's choice).
*/
@media (min-width: 1400px) {
  .home-upcoming--hero .home-event__title {
    font-size: 1.1875rem;
    font-weight: 700;
  }
}

/* Gallery (R4-T2): the newest Facebook albums as photo cards, one column on phones and up to three on desktop. */
.gallery .gallery__intro {
  max-width: 640px;
  margin: 0 auto 32px;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-large);
  text-align: center;
}

.gallery .gallery__notice {
  max-width: 640px;
  margin: 0 auto;
}

.gallery-albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery-album {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--md-sys-color-secondary) 12%, transparent);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.gallery-album:hover,
.gallery-album:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--md-sys-color-secondary) 22%, transparent);
}

.gallery-album__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--md-sys-color-surface-container);
}

.gallery-album__cover--none {
  display: grid;
  place-items: center;
  color: var(--md-sys-color-on-surface-variant);
}

.gallery-album__cover--none .icon {
  width: 48px;
  height: 48px;
}

.gallery-album__body {
  flex: 1;
  padding: 18px 20px 20px;
  border-top: 4px solid var(--md-sys-color-primary);
  overflow-wrap: anywhere;
}

.gallery-album__title {
  margin: 0;
  color: var(--md-sys-color-secondary);
  font: 600 1.25rem/1.3 var(--md-ref-typeface-heading);
}

.gallery-album:hover .gallery-album__title {
  text-decoration: underline;
}

.gallery-album__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 6px 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
}

.gallery .gallery__more {
  margin: 32px 0 0;
  text-align: center;
}

.gallery .gallery__more a {
  color: var(--app-color-link);
  font-weight: 600;
}

/* Album page (R4-T3): a back link, the album's details and a grid of square photos, two across on phones. */
.album .album__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.album .album__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  color: var(--app-color-link);
  font: var(--md-sys-typescale-label-large);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.album .album__back:hover span {
  text-decoration: underline;
}

.album .album__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-large);
}

.album-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.album-photo {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--md-sys-color-surface-container);
}

.album-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 300ms ease;
}

.album-photo:hover img,
.album-photo:focus-visible img {
  transform: scale(1.04);
}

@media (min-width: 900px) {
  .album-photos {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }
}

/* Photo viewer (R4-T4): a full-screen dialog on navy, with a swipeable strip of photos. */
html:has(.viewer[open]) {
  overflow: hidden;
}

.viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
}

.viewer[open] {
  display: flex;
  flex-direction: column;
}

.viewer::backdrop {
  background: var(--md-sys-color-secondary);
}

.viewer__top {
  display: flex;
  justify-content: flex-end;
  padding: 8px;
}

.viewer__button {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: color-mix(in srgb, var(--md-sys-color-on-secondary) 14%, transparent);
  color: var(--md-sys-color-on-secondary);
  cursor: pointer;
}

.viewer__button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary) 26%, transparent);
}

.viewer__button:disabled {
  opacity: 0.35;
  cursor: default;
}

.viewer__button .icon {
  width: 28px;
  height: 28px;
}

.viewer__track {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.viewer__track::-webkit-scrollbar {
  display: none;
}

.viewer__slide {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0 16px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Sized to the photo, so a caption sits right under it and the two are centred together. */
.viewer__image {
  flex: 0 1 auto;
  min-height: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.viewer__caption {
  max-width: 720px;
  margin: 0;
  font: var(--md-sys-typescale-body-large);
  text-align: center;
  overflow-wrap: anywhere;
}

.viewer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 12px 16px 16px;
}

.viewer__counter {
  min-width: 5.5em;
  margin: 0;
  font: var(--md-sys-typescale-label-large);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .app-bar {
    transition: none;
  }

  .album-photo img {
    transition: none;
  }

  .album-photo:hover img,
  .album-photo:focus-visible img {
    transform: none;
  }

  .gallery-album {
    transition: none;
  }

  .gallery-album:hover,
  .gallery-album:focus-visible {
    transform: none;
  }

  .hero--full::after,
  .home-family::after,
  .home-message__portrait {
    animation: none;
    transform: none;
  }
}