/* ==========================================================================
   Kanisa La Mennonite Segerea — public design system
   Hand-authored, dependency-free, no build step. Served locally.
   Admin / auth / error pages keep using base.css.

   1. Tokens          5. Site shell (masthead, mobile nav, footer)
   2. Base            6. Homepage sections
   3. Layout          7. Inner pages (about, leadership, ministries, media)
   4. Primitives      8. Motion & reduced motion
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */

:root {
  /* Palette: derived from the monochrome logo (ink on paper) with one earthy
     ochre accent and a quiet sage for calm sections. */
  --c-ink: #1b1a16;
  --c-ink-soft: #292721;
  --c-parchment: #f4efe4;
  --c-ivory: #faf7f0;
  --c-stone: #e8e0cf;
  --c-stone-deep: #d5cab4;
  --c-sage: #e4e5d6;

  --c-text: #22201b;
  --c-text-muted: #59534a;
  --c-text-pending: #6b6455;
  --c-accent: #9c6a2c;
  --c-accent-ink: #7a5020;

  --c-line: rgb(27 26 22 / 0.13);
  --c-line-strong: rgb(27 26 22 / 0.34);

  --c-on-dark: #eee7d8;
  --c-on-dark-muted: #b3aa98;
  --c-accent-light: #caa566;
  --c-line-dark: rgb(238 231 216 / 0.16);

  /* Live broadcast indicator: muted vermilion, always paired with text. */
  --c-live: #a3402a;
  --c-live-light: #e38667;

  --c-focus: var(--c-accent-ink);

  /* Typography: system serif and sans stacks — no font downloads. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    "URW Palladio L", P052, Georgia, "Noto Serif", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans",
    Arial, sans-serif;

  --fs-label: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.25rem, 1.08rem + 0.75vw, 1.625rem);
  --fs-h3: clamp(1.3rem, 1.16rem + 0.55vw, 1.625rem);
  --fs-h2: clamp(2.05rem, 1.45rem + 2.4vw, 3.5rem);
  --fs-display: clamp(3.1rem, 1.55rem + 6.3vw, 7rem);

  --lh-display: 0.98;
  --lh-heading: 1.1;
  --lh-body: 1.68;

  --tracking-label: 0.17em;
  --tracking-display: -0.025em;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --section-y: clamp(4.5rem, 2.6rem + 6.5vw, 9rem);

  /* Shape & depth: deliberately restrained. */
  --radius-sm: 2px;
  --radius-arch: 999px 999px 0 0;
  --shadow-lift: 0 18px 40px -28px rgb(27 26 22 / 0.45);

  /* Containers */
  --container: 76rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.55rem + 3vw, 3rem);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 700ms;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 2. Base ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-parchment);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-parchment);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

[id] {
  scroll-margin-top: var(--space-5);
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

::selection {
  background: var(--c-stone-deep);
  color: var(--c-ink);
}

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

.prewrap {
  white-space: pre-line;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -6rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--c-ink);
  color: var(--c-parchment);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}

/* 3. Layout --------------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

.tone-surface {
  background: var(--c-ivory);
}

.tone-stone {
  background: var(--c-stone);
}

.tone-sage {
  background: var(--c-sage);
}

.tone-dark {
  --c-focus: var(--c-accent-light);
  background: var(--c-ink);
  color: var(--c-on-dark);
}

/* 4. Primitives ----------------------------------------------------------- */

.eyebrow,
.label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.tone-dark .eyebrow {
  color: var(--c-accent-light);
}

.section-title {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-h2);
  letter-spacing: -0.012em;
  max-width: 17ch;
}

.section-lede {
  margin: var(--space-5) 0 0;
  max-width: 38ch;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

.lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--c-text);
}

.body-copy {
  margin: var(--space-5) 0 0;
  max-width: 60ch;
  color: var(--c-text-muted);
}

.tone-dark .body-copy {
  color: var(--c-on-dark-muted);
}

.note {
  margin: var(--space-5) 0 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--c-accent);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--c-text-pending);
  max-width: 40ch;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.plain-list {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.button--ink {
  background: var(--c-ink);
  color: var(--c-parchment);
}

.button--ink:hover {
  background: var(--c-ink-soft);
  color: #fff;
}

.button--outline {
  border-color: var(--c-line-strong);
  color: var(--c-text);
}

.button--outline:hover {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-parchment);
}

.button--compact {
  min-height: 2.625rem;
  padding: 0 1.15rem;
  font-size: var(--fs-label);
}

.tone-dark .button--ink {
  background: var(--c-on-dark);
  color: var(--c-ink);
}

/* Text link with travelling arrow */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text);
}

.text-link span {
  padding-bottom: 0.2rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--dur) var(--ease);
}

.text-link__arrow {
  width: 1.25rem;
  height: 0.625rem;
  transition: transform var(--dur) var(--ease);
}

.text-link:hover {
  color: var(--c-accent-ink);
}

.text-link:hover span {
  background-size: 35% 1px;
}

.text-link:hover .text-link__arrow {
  transform: translateX(4px);
}

/* Frames: aspect-ratio-aware image slots with quiet placeholders */

.frame {
  margin: 0;
}

.frame__media,
.frame__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 5);
}

.frame__media {
  height: auto;
  object-fit: cover;
  background: var(--c-stone);
}

.frame__placeholder {
  position: relative;
  display: grid;
  place-items: center;
  background-color: var(--c-stone);
  background-image: var(--grain);
  box-shadow: inset 0 0 0 1px var(--c-line);
  color: var(--c-text-muted);
}

.frame--portrait { --ratio: 4 / 5; }
.frame--landscape { --ratio: 3 / 2; }
.frame--wide { --ratio: 16 / 9; }
.frame--square { --ratio: 1 / 1; }
.frame--arch { --ratio: 3 / 4; }

.frame--arch .frame__media,
.frame--arch .frame__placeholder {
  border-radius: var(--radius-arch);
}

.frame--dark .frame__placeholder {
  background-color: var(--c-ink-soft);
  box-shadow: inset 0 0 0 1px var(--c-line-dark);
  color: var(--c-on-dark-muted);
}

.frame__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.frame__label::before {
  content: "";
  width: 1.25rem;
  height: 1px;
  background: currentColor;
}

.frame--dark .frame__label {
  color: var(--c-on-dark-muted);
}

.frame__index {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-text-pending);
}

.play-mark {
  width: clamp(3rem, 2.4rem + 2.5vw, 4.5rem);
  height: auto;
  opacity: 0.72;
}

/* Facts & pending values */

.fact__value {
  font-family: var(--font-display);
}

.fact__pending {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--c-text-pending);
}

/* Empty state */

.empty-state {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  align-items: baseline;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-line);
  max-width: 34rem;
}

.empty-state__mark {
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
}

.empty-state__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.45;
}

.empty-state__detail {
  grid-column: 2;
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  color: var(--c-text-muted);
}

.tone-dark .empty-state {
  border-top-color: var(--c-line-dark);
}

.tone-dark .empty-state__mark {
  border-color: var(--c-accent-light);
}

/* 5. Site shell ----------------------------------------------------------- */

.masthead {
  position: relative;
  z-index: 20;
  background: var(--c-parchment);
  border-bottom: 1px solid var(--c-line);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 4.75rem;
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  text-decoration: none;
  color: var(--c-text);
}

.brand__mark,
.logo-on-light {
  mix-blend-mode: multiply;
}

.brand__mark {
  width: 2.875rem;
  height: 2.875rem;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
}

.brand__place {
  margin-top: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.masthead__affiliation {
  display: none;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.masthead__affiliation span + span::before {
  content: "·";
  margin: 0 0.7em;
  color: var(--c-accent);
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.masthead__cta {
  display: none;
}

.menu-toggle,
.menu-fallback {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text);
  cursor: pointer;
}

.menu-toggle[hidden],
.js .menu-fallback {
  display: none;
}

.menu-toggle__icon {
  position: relative;
  display: block;
  width: 1.375rem;
  height: 0.625rem;
}

.menu-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}

.menu-toggle__icon span:first-child { top: 0; }
.menu-toggle__icon span:last-child { top: 100%; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child {
  top: 50%;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child {
  top: 50%;
  transform: rotate(-45deg);
}

/* Desktop primary navigation: a ruled masthead line */

.primary-nav {
  display: none;
  border-top: 1px solid var(--c-line);
}

.primary-nav__list {
  display: flex;
  justify-content: space-between;
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.primary-nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.95rem;
  font-size: 0.8125rem;
  letter-spacing: 0.035em;
  text-decoration: none;
  color: var(--c-text-muted);
  transition: color var(--dur-fast) var(--ease);
}

.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--c-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.primary-nav__link:hover {
  color: var(--c-text);
}

.primary-nav__link:hover::after {
  transform: scaleX(1);
}

.primary-nav__link[aria-current="page"] {
  color: var(--c-text);
}

.primary-nav__link[aria-current="page"]::after {
  background: var(--c-accent);
  height: 2px;
  transform: scaleX(1);
}

/* Mobile navigation sheet */

.mobile-nav {
  position: fixed;
  inset: var(--masthead-h, 4.75rem) 0 0 0;
  z-index: 30;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-parchment);
  border-top: 1px solid var(--c-line);
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav.is-open {
  opacity: 1;
  transform: none;
}

.mobile-nav__inner {
  padding-block: var(--space-5) var(--space-8);
}

.mobile-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav__link {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  min-height: 3.25rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.75rem);
  line-height: 1.2;
  text-decoration: none;
  color: var(--c-text);
}

.mobile-nav__index {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-accent-ink);
}

.mobile-nav__link[aria-current="page"] {
  color: var(--c-accent-ink);
}

.mobile-nav__foot {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.mobile-nav__affiliation {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-text-muted);
}

body.menu-open {
  overflow: hidden;
}

@media (min-width: 40em) {
  .masthead__cta {
    display: inline-flex;
  }

  .mobile-nav__foot .button {
    justify-self: start;
  }
}

@media (min-width: 64em) {
  .masthead__bar {
    min-height: 5.5rem;
  }

  .brand__mark {
    width: 3.375rem;
    height: 3.375rem;
  }

  .brand__name {
    font-size: 1.1875rem;
  }

  .masthead__affiliation,
  .primary-nav {
    display: block;
  }

  .menu-toggle,
  .menu-fallback,
  .mobile-nav {
    display: none !important;
  }
}

/* Footer */

.site-footer {
  padding-top: clamp(4rem, 2.8rem + 5vw, 6.5rem);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-8);
}

.site-footer__mark {
  width: 4.5rem;
  height: 4.5rem;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.site-footer__name {
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
}

.site-footer__affiliation {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--c-on-dark-muted);
}

.site-footer__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-light);
}

.site-footer__nav:focus {
  outline: none;
}

.site-footer__nav ul,
.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav ul {
  columns: 2;
  column-gap: var(--space-6);
}

.site-footer__nav li,
.site-footer__list li {
  break-inside: avoid;
  margin-bottom: var(--space-2);
}

.site-footer a {
  display: inline-block;
  padding-block: 0.15rem;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--c-on-dark);
  transition: color var(--dur-fast) var(--ease);
}

.site-footer a:hover {
  color: var(--c-accent-light);
}

.site-footer__pending {
  margin: 0;
  max-width: 24ch;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--c-on-dark-muted);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-block: var(--space-5) var(--space-6);
  border-top: 1px solid var(--c-line-dark);
  font-size: 0.8125rem;
  color: var(--c-on-dark-muted);
}

.site-footer__base p {
  margin: 0;
}

@media (min-width: 40em) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .site-footer__grid {
    grid-template-columns: 1.35fr 1.25fr 1fr 1fr;
    gap: var(--space-8);
  }
}

/* 6. Homepage sections ---------------------------------------------------- */

/* Hero */

.hero {
  overflow: clip;
  padding-block: clamp(3rem, 1.6rem + 5.5vw, 7rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}

.hero__grid {
  display: grid;
  gap: var(--space-8);
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.hero__rule {
  width: 2.5rem;
  height: 1px;
  flex: none;
  background: var(--c-accent);
}

.hero__title {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.hero__title-main {
  display: block;
  max-width: 9.5ch;
}

.hero__title-accent {
  display: block;
  margin-top: 0.06em;
  font-style: italic;
  color: var(--c-accent);
}

.hero__lede {
  margin: var(--space-6) 0 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--c-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-7);
}

.hero__visual {
  position: relative;
  justify-self: end;
  width: min(80%, 22rem);
}

.hero__ring {
  position: absolute;
  top: -9%;
  left: -26%;
  width: 116%;
  height: auto;
  color: var(--c-accent);
  opacity: 0.4;
  pointer-events: none;
}

.hero__frame {
  position: relative;
}

.hero__frame .frame__placeholder {
  align-content: center;
  gap: var(--space-5);
}

.hero__emblem {
  width: 46%;
  height: auto;
  opacity: 0.88;
}

.hero__inscription {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-text-pending);
}

@media (min-width: 56em) {
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .hero__title-accent {
    padding-left: 0.55em;
  }

  .hero__visual {
    width: 100%;
    max-width: 29rem;
  }
}

/* Service ledger */

.ledger-band {
  padding-bottom: clamp(1rem, 2vw, 2rem);
}

.ledger {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--c-line-strong);
  border-bottom: 1px solid var(--c-line);
}

.ledger__item {
  padding-block: var(--space-5);
}

.ledger__item + .ledger__item {
  border-top: 1px solid var(--c-line);
}

.ledger__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.ledger__value {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.45;
}

@media (min-width: 48em) {
  .ledger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ledger__item {
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
  }

  .ledger__item + .ledger__item {
    border-top: 0;
    border-left: 1px solid var(--c-line);
    padding-left: var(--space-6);
  }
}

/* About */

.about__grid {
  display: grid;
  gap: var(--space-7);
}

.facts {
  display: grid;
  margin: var(--space-8) 0 0;
  border-top: 1px solid var(--c-line-strong);
}

.facts__item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--c-line);
}

.facts dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.facts dd {
  margin: var(--space-2) 0 0;
  font-size: 1.125rem;
}

@media (min-width: 40em) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
  }
}

@media (min-width: 56em) {
  .about__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(3rem, 7vw, 8rem);
  }
}

/* Ministries: an editorial index rather than feature cards */

.ministries__grid {
  display: grid;
  gap: var(--space-8);
}

.ministries__frame {
  display: none;
}

.index-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line-strong);
}

.index-list__item {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--c-line);
}

.index-list__no {
  padding-top: 0.4rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-ink);
}

.index-list__title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.index-list__text {
  margin: var(--space-2) 0 0;
  max-width: 46ch;
  color: var(--c-text-muted);
}

@media (min-width: 40em) {
  .index-list__item {
    grid-template-columns: 4.5rem 1fr;
    padding-block: var(--space-7);
  }
}

@media (min-width: 60em) {
  .ministries__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 7rem);
  }

  .ministries__intro {
    position: sticky;
    top: var(--space-6);
  }

  .ministries__frame {
    display: block;
    max-width: 21rem;
    margin-top: var(--space-8);
  }
}

/* Sermons */

.sermons__grid {
  display: grid;
  gap: var(--space-7);
}

.sermons__copy {
  order: -1;
}

@media (min-width: 60em) {
  .sermons__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .sermons__copy {
    order: 0;
  }
}

/* Choir & music: the dark signature section */

.choir {
  position: relative;
  overflow: clip;
}

.choir__title-wrap {
  position: relative;
}

/* The staff runs in from the viewport edge and stops under the title;
   .choir clips the overhang. */
.choir__staff {
  position: absolute;
  top: 18%;
  left: -100vw;
  width: calc(100% + 100vw);
  max-width: none;
  height: 70%;
  color: var(--c-accent-light);
  opacity: 0.22;
  pointer-events: none;
}

.choir__title {
  position: relative;
}

.choir__head {
  display: grid;
  gap: var(--space-6);
}

.choir__title {
  margin: var(--space-4) 0 0;
  font-size: clamp(3.4rem, 1.4rem + 7.6vw, 8.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-on-dark);
}

.choir__title em {
  font-style: italic;
  color: var(--c-accent-light);
}

.choir__intro .body-copy {
  margin-top: 0;
}

.choir__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.choir__feature {
  grid-column: 1 / -1;
}

@media (min-width: 56em) {
  .choir__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: clamp(3rem, 6vw, 6rem);
  }

  /* 2fr at 16:9 and 1fr at 8:9 share one height, so the row stays level. */
  .choir__media {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-4);
  }

  .choir__feature {
    grid-column: auto;
  }

  .choir__side {
    --ratio: 8 / 9;
  }
}

/* Bulletin: events + news */

.bulletin__grid {
  display: grid;
  gap: var(--space-9);
}

.event-list {
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line-strong);
}

.event {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--c-line);
}

.event--empty {
  margin-top: var(--space-7);
  border-top: 1px solid var(--c-line-strong);
}

.event__date,
.event__date time {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1;
}

.event__day {
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
}

.event__month {
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.event--empty .event__day {
  color: var(--c-stone-deep);
}

.event__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.25;
}

.event__title a,
.news-item__title a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur) var(--ease);
}

.event__title a:hover,
.news-item__title a:hover {
  background-size: 100% 1px;
}

.event--empty .event__title {
  font-style: italic;
}

.event__excerpt {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  color: var(--c-text-muted);
}

.newsdesk {
  padding-bottom: var(--space-4);
  border-bottom: 3px double var(--c-line-strong);
}

.newsdesk__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
}

.newsdesk__dateline {
  margin: var(--space-2) 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.bulletin__news .empty-state {
  margin-top: var(--space-5);
  padding-top: 0;
  border-top: 0;
}

.news-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--c-line);
}

.news-item__title {
  margin: var(--space-2) 0 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.news-item--lead .news-item__title {
  font-size: var(--fs-h3);
}

.news-item__excerpt {
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  color: var(--c-text-muted);
}

@media (min-width: 60em) {
  .bulletin__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 0;
  }

  .bulletin__events {
    padding-right: clamp(2rem, 5vw, 5rem);
  }

  .bulletin__news {
    padding-left: clamp(2rem, 5vw, 5rem);
    border-left: 1px solid var(--c-line);
  }
}

/* Gallery */

.gallery {
  padding-top: 0;
}

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-7);
  border-top: 1px solid var(--c-line-strong);
}

.gallery .section-title {
  margin: 0;
}

.gallery .note {
  margin: 0;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 48em) {
  .gallery__grid {
    grid-template-columns: 1fr 1.45fr 1fr 0.8fr;
    gap: var(--space-4);
  }
}

/* Prayer */

.prayer__inner {
  max-width: var(--container-narrow);
  text-align: center;
}

.scripture {
  margin: var(--space-6) 0 0;
}

.scripture__text {
  margin: 0;
}

.scripture__text::before {
  content: "\201C";
  display: block;
  height: 2.25rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--c-accent);
}

.scripture__text p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.35rem);
  font-style: italic;
  line-height: 1.38;
  text-wrap: balance;
}

.scripture__ref {
  margin-top: var(--space-5);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.prayer__copy {
  margin: var(--space-7) auto 0;
  max-width: 36rem;
}

/* Visit & contact */

.visit__grid {
  display: grid;
  gap: var(--space-8);
}

.visit__title {
  margin: var(--space-4) 0 0;
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.visit__title em {
  font-style: italic;
  color: var(--c-accent);
}

.visit__contact {
  padding-top: var(--space-5);
  border-top: 2px solid var(--c-ink);
}

.visit__contact-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.contact-list {
  margin: var(--space-3) 0 0;
}

.contact-list > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-line);
}

.contact-list dt {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.contact-list dd {
  margin: 0;
  font-size: 1.125rem;
}

.contact-list__link {
  font-family: var(--font-display);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--c-accent);
  text-underline-offset: 0.25em;
}

@media (min-width: 30em) {
  .contact-list > div {
    grid-template-columns: 9.5rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}

@media (min-width: 60em) {
  .visit__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
  }

  .visit__contact {
    margin-top: var(--space-2);
  }
}

/* 7. Inner pages ---------------------------------------------------------- */

.about__more {
  margin: var(--space-6) 0 0;
}

/* Page introduction: typographic, never a full-bleed banner */

.page-intro {
  overflow: clip;
  padding-top: clamp(2.75rem, 1.5rem + 4.5vw, 6rem);
}

.page-intro__grid {
  display: grid;
  gap: var(--space-7);
  align-items: end;
}

.page-title {
  margin: var(--space-5) 0 0;
  font-size: clamp(3rem, 1.6rem + 5.6vw, 6.25rem);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.page-title em {
  font-style: italic;
  color: var(--c-accent);
}

.page-intro__name {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.3;
}

.page-intro__lede {
  margin: var(--space-6) 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--c-text-muted);
}

.page-intro__visual {
  width: 100%;
  max-width: 34rem;
}

.page-intro__emblem {
  width: 26%;
  height: auto;
  opacity: 0.5;
}

.page-ledger {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* Text-only intro (leadership): ruled aside instead of an image */

.page-intro--text .page-intro__grid {
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  border-bottom: 1px solid var(--c-line-strong);
}

.page-intro__aside {
  max-width: 32rem;
  padding-top: var(--space-5);
  border-top: 2px solid var(--c-ink);
}

.page-intro__aside .page-intro__lede {
  margin-top: 0;
}

@media (min-width: 48em) {
  .page-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-ledger .ledger__item:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .page-ledger .ledger__item:nth-child(n + 3) {
    border-top: 1px solid var(--c-line);
  }
}

@media (min-width: 56em) {
  .page-intro__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(3rem, 6vw, 6rem);
  }

  .page-intro__visual,
  .page-intro__aside {
    justify-self: end;
  }
}

@media (min-width: 64em) {
  .page-ledger {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }

  .page-ledger .ledger__item:nth-child(3) {
    padding-left: var(--space-6);
    border-left: 1px solid var(--c-line);
  }

  .page-ledger .ledger__item:nth-child(n + 3) {
    border-top: 0;
  }
}

/* History chapter */

.chapter__grid {
  display: grid;
  gap: var(--space-7);
}

.chapter__since {
  margin: var(--space-7) 0 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  line-height: 1;
  color: var(--c-accent);
}

.chapter__since-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.chapter__text .lead::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  font-size: 3.3em;
  line-height: 0.82;
  color: var(--c-accent);
}

.chapter__pending {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-style: italic;
  line-height: 1.3;
}

.chronicle {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line-strong);
}

.chronicle__item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--c-line);
}

.chronicle__year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: 0.18em;
  color: var(--c-stone-deep);
}

.chronicle__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.chronicle__text {
  margin: var(--space-1) 0 0;
  font-size: 0.9375rem;
  color: var(--c-text-muted);
}

@media (min-width: 40em) {
  .chronicle__item {
    grid-template-columns: 6rem 1fr;
  }
}

@media (min-width: 56em) {
  .chapter__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(3rem, 7vw, 8rem);
  }

  .chapter__aside {
    position: sticky;
    top: var(--space-6);
    align-self: start;
  }
}

/* Mennonite identity: the dark section */

.identity__grid {
  display: grid;
  gap: var(--space-8);
}

.identity__title {
  margin: var(--space-4) 0 0;
  max-width: 12ch;
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.identity__title em {
  font-style: italic;
  color: var(--c-accent-light);
}

.lineage {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--c-line-dark);
}

.lineage li {
  position: relative;
  padding: 0 0 var(--space-4) var(--space-5);
  font-size: var(--fs-small);
  color: var(--c-on-dark-muted);
}

.lineage li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--c-accent-light);
  border-radius: 50%;
  background: var(--c-ink);
}

.lineage .lineage__here {
  padding-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--c-on-dark);
}

.lineage .lineage__here::before {
  top: 0.6em;
  background: var(--c-accent-light);
}

.identity__body .lead {
  color: var(--c-on-dark);
}

.tradition {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-line-dark);
}

.tradition__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-light);
}

.tenets {
  margin: var(--space-6) 0 0;
  border-top: 1px solid var(--c-line-dark);
}

.tenets__item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-line-dark);
}

.tenets dt {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
}

.tenets dd {
  margin: 0;
  font-size: 0.9875rem;
  color: var(--c-on-dark-muted);
}

.tradition__note {
  margin: var(--space-6) 0 0;
  max-width: 52ch;
  padding-left: var(--space-4);
  border-left: 1px solid var(--c-accent-light);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--c-on-dark-muted);
}

@media (min-width: 56em) {
  .identity__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 7vw, 8rem);
  }

  .tenets__item {
    grid-template-columns: 8rem 1fr;
  }
}

/* Vision, mission, values: a ruled charter, not a card stack */

.charter__rows {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  border-top: 2px solid var(--c-ink);
}

.charter__row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--c-line);
}

.charter__no {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-ink);
}

.charter__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.charter__statement {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
}

.charter__text {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.75rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.charter__pending {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--c-text-pending);
}

.charter__values {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.charter__value-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.charter__value-text {
  margin: var(--space-1) 0 0;
  max-width: 50ch;
  color: var(--c-text-muted);
}

@media (min-width: 56em) {
  .charter__row {
    grid-template-columns: 4rem minmax(0, 3fr) minmax(0, 8fr);
    column-gap: var(--space-6);
    padding-block: var(--space-8);
  }

  .charter__statement {
    grid-column: auto;
    margin-top: 0;
  }

  .charter__values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-7);
  }
}

/* Archival mat: ivory passe-partout with a fine inner rule */

.frame--matted .frame__placeholder {
  box-shadow:
    inset 0 0 0 1px var(--c-line),
    inset 0 0 0 0.625rem var(--c-ivory),
    inset 0 0 0 calc(0.625rem + 1px) var(--c-line-strong);
}

/* Photo archive: text beside an offset contact sheet */

.archive__grid {
  display: grid;
  gap: var(--space-7);
}

.archive__intro .note {
  margin-top: var(--space-6);
}

.archive__sheet {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-4);
  align-items: start;
}

.archive__a { grid-column: 1; grid-row: 1; }
.archive__b { grid-column: 2; grid-row: 1 / span 2; margin-top: var(--space-8); }
.archive__c { grid-column: 1; grid-row: 2; }

@media (min-width: 56em) {
  .archive__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(3rem, 7vw, 8rem);
    align-items: start;
  }

  .archive__sheet {
    gap: var(--space-6) var(--space-5);
  }
}

/* Closing links */

.closing__grid {
  display: grid;
  gap: var(--space-7);
}

.closing__title {
  margin: var(--space-4) 0 0;
  max-width: 14ch;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.closing__title em {
  font-style: italic;
  color: var(--c-accent);
}

.closing__links {
  border-top: 1px solid var(--c-line-strong);
}

.page-link {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--c-line-strong);
  text-decoration: none;
  color: var(--c-text);
}

.page-link__label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.15;
  transition: color var(--dur-fast) var(--ease);
}

.page-link__detail {
  grid-column: 1;
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.page-link__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1.75rem;
  height: 0.875rem;
  transition: transform var(--dur) var(--ease);
}

.page-link:hover .page-link__label {
  color: var(--c-accent-ink);
}

.page-link:hover .page-link__arrow {
  transform: translateX(6px);
}

@media (min-width: 56em) {
  .closing__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: end;
    gap: clamp(3rem, 7vw, 7rem);
  }
}

/* Primary leadership */

.steward__grid {
  display: grid;
  gap: var(--space-7);
}

.steward__portrait {
  width: min(78%, 24rem);
}

.steward__emblem {
  width: 34%;
  height: auto;
  opacity: 0.35;
}

.steward__name {
  margin: var(--space-4) 0 0;
  max-width: 14ch;
  font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.steward__pending {
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.4;
  color: var(--c-text-pending);
}

.steward__bio {
  margin: var(--space-6) 0 0;
  max-width: 58ch;
  color: var(--c-text-muted);
}

.register {
  margin: var(--space-7) 0 0;
  border-top: 1px solid var(--c-line-strong);
}

.register__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-line);
}

.register dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.register dd {
  margin: 0;
}

@media (min-width: 30em) {
  .register__row {
    grid-template-columns: 9rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}

@media (min-width: 56em) {
  .steward__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
  }

  .steward__portrait {
    width: 100%;
    max-width: 27rem;
  }
}

/* Leadership groups */

.council__grid {
  display: grid;
  gap: var(--space-8);
}

.council__intro .body-copy {
  max-width: 40ch;
}

.council__body > .empty-state {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.roll {
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line-strong);
}

.roll__row {
  display: grid;
  grid-template-columns: 2.25rem 3.25rem 1fr;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-line);
}

.roll__no {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-ink);
}

.roll__portrait {
  aspect-ratio: 4 / 5;
  background-color: var(--c-stone);
  background-image: var(--grain);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

.roll__lines {
  display: grid;
  gap: var(--space-3);
}

.roll__lines span {
  display: block;
  width: 62%;
  height: 1px;
  background: var(--c-line-strong);
}

.roll__lines span + span {
  width: 36%;
  background: var(--c-line);
}

.roll__row:nth-child(2) .roll__lines span:first-child { width: 50%; }
.roll__row:nth-child(3) .roll__lines span:first-child { width: 70%; }
.roll__row:nth-child(4) .roll__lines span:first-child { width: 44%; }

.leader-group + .leader-group {
  margin-top: var(--space-9);
}

.leader-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--c-line-strong);
}

.leader-group__title {
  margin: 0;
  font-size: var(--fs-h3);
}

.leader-group__summary {
  margin: 0;
  max-width: 40ch;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.leader-list {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

/* Profile: portrait rectangle + vertical type, no avatar card */

.profile {
  display: grid;
  grid-template-columns: minmax(6rem, 34%) 1fr;
  gap: var(--space-5);
  align-items: end;
}

.profile__initial {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  font-style: italic;
  color: var(--c-text-pending);
  opacity: 0.6;
}

.profile__body {
  min-width: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-line);
}

.profile__role {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.profile__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  line-height: 1.15;
  overflow-wrap: break-word;
}

.profile__bio {
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  color: var(--c-text-muted);
}

.contact-links {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

.contact-links__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 0.2em;
}

.contact-links__link:hover {
  text-decoration-color: currentColor;
}

.profile__contact {
  margin-top: var(--space-3);
}

.steward__contact {
  margin-top: var(--space-6);
}

@media (min-width: 48em) {
  .leader-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
  }

  .leader-list > li:nth-child(even) {
    margin-top: var(--space-9);
  }

  .profile {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
  }

  .profile__body {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: 0;
    border-top: 1px solid var(--c-line-strong);
    border-bottom: 0;
  }
}

@media (min-width: 60em) {
  .council__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 8rem);
  }

  .council__intro {
    position: sticky;
    top: var(--space-6);
  }
}

/* Approved leadership-and-service statement */

.service__inner {
  max-width: var(--container-narrow);
}

.service__title {
  margin: var(--space-4) 0 var(--space-6);
  font-size: var(--fs-h2);
}

.service .lead {
  color: var(--c-on-dark);
}

/* Ghost register: decorative outline of rows awaiting confirmed content */

.ghost-register {
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line-strong);
}

.ghost-register__row {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--c-line);
}

.ghost-register__no {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-stone-deep);
}

.ghost-register__lines {
  display: grid;
  gap: var(--space-3);
}

.ghost-register__lines span {
  display: block;
  height: 1px;
  background: var(--c-line);
}

.ghost-register__lines span:first-child {
  width: 46%;
  height: 2px;
  background: var(--c-line-strong);
}

.ghost-register__lines span:nth-child(2) { width: 82%; }
.ghost-register__lines span:nth-child(3) { width: 64%; }

.ghost-register__row:nth-child(2) .ghost-register__lines span:first-child { width: 34%; }
.ghost-register__row:nth-child(3) .ghost-register__lines span:first-child { width: 56%; }
.ghost-register__row:nth-child(4) .ghost-register__lines span:first-child { width: 40%; }

.ghost-register__media {
  display: none;
  aspect-ratio: 3 / 2;
  background-color: var(--c-stone);
  background-image: var(--grain);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

@media (min-width: 40em) {
  .ghost-register__row {
    grid-template-columns: 4.5rem 1fr;
  }

  .ghost-register--media .ghost-register__row {
    grid-template-columns: 4.5rem 1fr 8rem;
    gap: var(--space-6);
  }

  .ghost-register__media {
    display: block;
  }
}

/* Homepage ministries preview */

.ministries__more {
  margin: var(--space-5) 0 0;
}

.ministries__list > .empty-state {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.index-list__title a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur) var(--ease);
}

.index-list__title a:hover {
  background-size: 100% 1px;
}

/* In-page contents (ministries intro) */

.contents__title {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.contents__list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.contents__link {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  min-height: 2.75rem;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  text-decoration: none;
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease);
}

.contents__link:hover {
  color: var(--c-accent-ink);
}

.contents__no {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-accent-ink);
}

/* Ministry directory: a ruled register */

.directory__grid {
  display: grid;
  gap: var(--space-8);
}

.directory__count {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.directory__count span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  line-height: 1;
  color: var(--c-accent);
}

.directory__frame {
  display: none;
}

.directory__pending {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-style: italic;
  line-height: 1.3;
}

.ministry-group + .ministry-group {
  margin-top: var(--space-9);
}

.ministry-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-bottom: var(--space-4);
}

.ministry-group__title {
  margin: 0;
  font-size: var(--fs-h3);
}

.ministry-group__summary {
  margin: 0;
  max-width: 40ch;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.ministry-list {
  border-top: 1px solid var(--c-line-strong);
}

.ministry {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--c-line);
}

.ministry__no {
  margin: 0;
  padding-top: 0.35rem;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-ink);
}

.ministry__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.2;
  overflow-wrap: break-word;
}

.ministry__summary {
  margin: var(--space-2) 0 0;
  max-width: 54ch;
  color: var(--c-text-muted);
}

.ministry__description {
  margin: var(--space-3) 0 0;
  max-width: 62ch;
  font-size: 0.9375rem;
  color: var(--c-text-muted);
}

.ministry__meta {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.ministry__meta div {
  display: grid;
  gap: var(--space-1);
}

.ministry__meta dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.ministry__meta dd {
  margin: 0;
  font-family: var(--font-display);
}

.ministry__media {
  grid-column: 2;
  max-width: 18rem;
  margin-top: var(--space-3);
}

@media (min-width: 40em) {
  .ministry {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    padding-block: var(--space-7);
  }

  .ministry__meta div {
    grid-template-columns: 9rem 1fr;
    gap: var(--space-4);
    align-items: baseline;
  }
}

@media (min-width: 60em) {
  .directory__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 8rem);
  }

  .directory__intro {
    position: sticky;
    top: var(--space-6);
  }

  .directory__frame {
    display: block;
    max-width: 19rem;
    margin-top: var(--space-8);
  }

  .ministry--media {
    grid-template-columns: 4.5rem minmax(0, 1fr) 11rem;
  }

  .ministry__media {
    grid-column: 3;
    grid-row: 1;
    max-width: none;
    margin-top: 0;
  }
}

/* Getting involved: the dark section */

.involve__grid {
  display: grid;
  gap: var(--space-7);
}

.involve__title {
  margin: var(--space-4) 0 0;
  max-width: 12ch;
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.involve__title em {
  font-style: italic;
  color: var(--c-accent-light);
}

.involve__body .lead {
  color: var(--c-on-dark);
}

.involve__contact {
  margin-top: var(--space-7);
  border-top: 1px solid var(--c-line-dark);
}

.tone-dark .contact-list > div {
  border-bottom-color: var(--c-line-dark);
}

.tone-dark .contact-list dt,
.tone-dark .fact__pending {
  color: var(--c-on-dark-muted);
}

.tone-dark .contact-list__link {
  text-decoration-color: var(--c-accent-light);
}

@media (min-width: 56em) {
  .involve__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 7vw, 8rem);
    align-items: end;
  }
}

/* Media: provider-hosted players, live worship, registers ------------------ */

.tone-dark .text-link,
.tone-dark .watch-link {
  color: var(--c-on-dark);
}

.tone-dark .text-link:hover,
.tone-dark .watch-link:hover {
  color: var(--c-accent-light);
}

.tone-dark .hero__kicker {
  color: var(--c-accent-light);
}

.tone-dark .hero__rule {
  background: var(--c-accent-light);
}

.ext-arrow {
  flex: none;
  width: 0.75em;
  height: 0.75em;
}

.watch-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text);
  transition: color var(--dur-fast) var(--ease);
}

.watch-link > span:first-child {
  padding-bottom: 0.15rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

.watch-link:hover {
  color: var(--c-accent-ink);
}

/* Player: a still with a restrained play control; the iframe arrives on click */

.player {
  position: relative;
}

.player__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--c-stone-deep);
  background-image: var(--grain);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

.player--dark .player__stage {
  background-color: var(--c-ink-soft);
  box-shadow: inset 0 0 0 1px var(--c-line-dark);
}

.player__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  font-style: italic;
  line-height: 1;
  text-align: center;
  color: var(--c-text-pending);
  opacity: 0.55;
}

.player--dark .player__glyph {
  color: var(--c-on-dark-muted);
  opacity: 0.4;
}

.player__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.02);
  transition: transform var(--dur-slow) var(--ease);
}

.player__thumb[hidden] {
  display: none;
}

.player__stage:hover .player__thumb {
  transform: scale(1.02);
}

.player__provider {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  padding: 0.3rem 0.55rem;
  background: rgb(244 239 228 / 0.92);
  color: var(--c-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.player__play {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3rem;
  max-width: calc(100% - 2 * var(--space-3));
  padding: 0.375rem 1.125rem 0.375rem 0.375rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--c-parchment);
  color: var(--c-ink);
  font: 600 0.8125rem / 1 var(--font-body);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.player__play[hidden] {
  display: none;
}

.player__play:focus-visible {
  outline: 2px solid var(--c-parchment);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--c-ink);
}

.player__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-parchment);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.player__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

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

.player__play:hover {
  background: var(--c-ink);
  color: var(--c-parchment);
}

.player__play:hover .player__icon {
  background: var(--c-accent-light);
  color: var(--c-ink);
}

.player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--c-ink);
}

.player__status {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--c-text-pending);
}

.player__status[hidden] {
  display: none;
}

.tone-dark .player__status {
  color: var(--c-on-dark-muted);
}

@media (min-width: 40em) {
  .player__provider {
    top: var(--space-4);
    left: var(--space-4);
  }

  .player__play {
    left: var(--space-4);
    bottom: var(--space-4);
  }
}

/* Metadata line: date · type · provider */

.media-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.media-meta > * + *::before {
  content: "·";
  margin-right: var(--space-3);
  color: var(--c-accent);
}

.tone-dark .media-meta {
  color: var(--c-on-dark-muted);
}

.tone-dark .media-meta > * + *::before {
  color: var(--c-accent-light);
}

/* Live worship */

.live-section {
  position: relative;
  overflow: clip;
}

.live {
  display: grid;
  gap: var(--space-8);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--c-line-dark);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}

.live-badge__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.live-badge--live {
  border-color: var(--c-live-light);
  background: rgb(227 134 103 / 0.12);
  color: var(--c-on-dark);
}

.live-badge--live .live-badge__dot {
  border-color: var(--c-live-light);
  background: var(--c-live-light);
  animation: live-pulse 2.2s var(--ease) infinite;
}

.live-badge--scheduled {
  border-color: rgb(202 165 102 / 0.5);
  color: var(--c-accent-light);
}

.live-badge--scheduled .live-badge__dot {
  background: currentColor;
}

.live-badge--ended {
  color: var(--c-on-dark);
}

.live__title {
  margin: var(--space-5) 0 0;
  max-width: 13ch;
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.live:not(.live--none) .live__title {
  max-width: 22ch;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem);
  line-height: 1.08;
}

.live__when {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.35;
}

.live__zone {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--c-on-dark-muted);
}

.live__person {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-light);
}

.live__actions {
  margin: var(--space-5) 0 0;
}

.live__schedule {
  margin-top: var(--space-6);
  border-top: 1px solid var(--c-line-dark);
}

.live-slate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--c-ink-soft);
  background-image: var(--grain);
  box-shadow: inset 0 0 0 1px var(--c-line-dark);
  color: var(--c-on-dark-muted);
}

.live-slate__rings {
  width: min(52%, 17rem);
  height: auto;
  color: var(--c-accent-light);
  opacity: 0.5;
}

.live-slate__label {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgb(227 134 103 / 0.55); }
  70% { box-shadow: 0 0 0 0.45rem rgb(227 134 103 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(227 134 103 / 0); }
}

@media (min-width: 60em) {
  .live {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }
}

/* Homepage live note and header flag (render only for real live/scheduled items) */

.live-note {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--c-live);
  background: rgb(250 247 240 / 0.6);
  color: var(--c-text);
  text-decoration: none;
}

.live-note .live-badge {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-live);
}

.live-note .live-badge--live .live-badge__dot {
  border-color: var(--c-live);
  background: var(--c-live);
}

.live-note .live-badge--scheduled {
  color: var(--c-accent-ink);
}

.live-note__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  overflow-wrap: break-word;
  transition: color var(--dur-fast) var(--ease);
}

.live-note__when {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.live-note:hover .live-note__title {
  color: var(--c-accent-ink);
}

.live-flag {
  --c-focus: var(--c-accent-light);
  display: block;
  background: var(--c-ink);
  color: var(--c-on-dark);
  text-decoration: none;
}

.live-flag__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  font-size: var(--fs-label);
}

.live-flag__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-live-light);
  animation: live-pulse 2.2s var(--ease) infinite;
}

.live-flag__label {
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.live-flag__detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-on-dark-muted);
}

.live-flag__arrow {
  flex: none;
  width: 1.25rem;
  height: 0.625rem;
  margin-left: auto;
  transition: transform var(--dur) var(--ease);
}

.live-flag:hover .live-flag__detail {
  color: var(--c-accent-light);
}

.live-flag:hover .live-flag__arrow {
  transform: translateX(4px);
}

/* Featured recording */

.feature__grid {
  display: grid;
  gap: var(--space-7);
}

.feature__title {
  margin: var(--space-4) 0 var(--space-4);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

.feature__person,
.media-entry__person {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
}

.feature__person span,
.media-entry__person span {
  margin-right: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.feature__actions {
  margin: var(--space-5) 0 0;
}

@media (min-width: 60em) {
  .feature__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }
}

/* Recent recordings: numbered editorial rows */

.recent__intro {
  margin-bottom: var(--space-8);
}

.media-list {
  border-top: 1px solid var(--c-line-strong);
}

.media-entry {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--c-line);
}

.media-entry__no {
  grid-row: 1 / span 2;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-ink);
}

.media-entry__player,
.media-entry__body {
  grid-column: 2;
}

.media-entry__title {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-h3);
  line-height: 1.2;
  overflow-wrap: break-word;
}

.media-entry__person {
  margin-top: var(--space-2);
  font-size: 1.0625rem;
}

.media-entry__summary {
  display: -webkit-box;
  margin: var(--space-3) 0 0;
  max-width: 52ch;
  overflow: hidden;
  color: var(--c-text-muted);
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.media-entry .watch-link {
  margin-top: var(--space-3);
}

@media (min-width: 48em) {
  .media-entry {
    grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-6);
    align-items: start;
  }

  .media-entry__no {
    grid-row: auto;
  }

  .media-entry__body {
    grid-column: 3;
  }
}

/* Archive register: a responsive, captioned table */

.archive-register__grid {
  display: grid;
  gap: var(--space-8);
}

.archive-register__intro .directory__count {
  margin-top: var(--space-5);
}

.register-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--c-line-strong);
}

.register-table thead th {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--c-line-strong);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-align: left;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.register-table td,
.register-table tbody th {
  padding: var(--space-5) var(--space-4) var(--space-5) 0;
  border-bottom: 1px solid var(--c-line);
  font-weight: 400;
  text-align: left;
  vertical-align: baseline;
}

.register-table__date {
  width: 11rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-ink);
}

.register-table__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.register-table__person {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.register-table__type,
.register-table__provider {
  white-space: nowrap;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.register-table .register-table__action {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}

.register-table__none {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--c-text-pending);
}

@media (max-width: 47.99em) {
  .register-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .register-table,
  .register-table tbody {
    display: block;
  }

  .register-table tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "date date action"
      "title title title"
      "type provider .";
    gap: var(--space-1) var(--space-4);
    align-items: baseline;
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--c-line);
  }

  .register-table td,
  .register-table tbody th {
    width: auto;
    padding: 0;
    border: 0;
  }

  .register-table__date { grid-area: date; }
  .register-table__title { grid-area: title; }
  .register-table__type { grid-area: type; }
  .register-table__provider { grid-area: provider; }
  .register-table .register-table__action { grid-area: action; }
}

@media (min-width: 60em) {
  .archive-register--empty .archive-register__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 8rem);
  }
}

/* Music: dark staff-lined introduction */

.music-intro {
  position: relative;
  overflow: clip;
  padding-block: clamp(3rem, 1.5rem + 5vw, 7rem) clamp(4rem, 2rem + 6vw, 8rem);
}

.music-intro__grid {
  display: grid;
  gap: var(--space-8);
  align-items: end;
}

.music-intro__title {
  position: relative;
  margin: var(--space-6) 0 0;
  font-size: clamp(3.2rem, 1.3rem + 7.4vw, 8.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-on-dark);
}

.music-intro__title em {
  font-style: italic;
  color: var(--c-accent-light);
}

.music-intro__lede {
  margin: var(--space-7) 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--c-on-dark-muted);
}

.music-intro__contents {
  max-width: 32rem;
  padding-top: var(--space-5);
  border-top: 2px solid var(--c-on-dark);
}

.tone-dark .contents__title {
  color: var(--c-on-dark-muted);
}

.tone-dark .contents__link {
  border-bottom-color: var(--c-line-dark);
  color: var(--c-on-dark);
}

.tone-dark .contents__link:hover {
  color: var(--c-accent-light);
}

.tone-dark .contents__no {
  color: var(--c-accent-light);
}

@media (min-width: 60em) {
  .music-intro__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

/* Music: featured song and latest cards */

.music-feature {
  padding-top: 0;
}

.music-feature__grid {
  display: grid;
  gap: var(--space-7);
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  border-top: 1px solid var(--c-line-dark);
}

.music-feature__title {
  margin: var(--space-4) 0 0;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

.music-feature__artist {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--c-accent-light);
}

@media (min-width: 60em) {
  .music-feature__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.music-latest__grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
  margin-top: var(--space-8);
}

.music-card {
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line-strong);
}

.music-card__player {
  margin-bottom: var(--space-4);
}

.music-card__no {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-ink);
}

.music-card__title {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-h3);
  line-height: 1.2;
  overflow-wrap: break-word;
}

.music-card__artist {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--c-text-muted);
}

@media (min-width: 48em) {
  .music-latest__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .music-latest__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Music: liner-notes tracklist */

.liner__grid {
  display: grid;
  gap: var(--space-8);
}

.tracklist {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px double var(--c-line-strong);
}

.track {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas:
    "no body link"
    "no meta link";
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-line);
}

.track__no {
  grid-area: no;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-ink);
}

.track__body {
  grid-area: body;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  min-width: 0;
}

.track__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  min-width: 0;
}

.track__artist {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.track__meta {
  grid-area: meta;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.track__link {
  grid-area: link;
}

@media (min-width: 48em) {
  .track {
    grid-template-columns: 3.5rem minmax(0, 1fr) 11rem auto;
    grid-template-areas: "no body meta link";
    padding-block: var(--space-5);
  }
}

@media (min-width: 60em) {
  .liner__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 8rem);
  }

  .liner__intro {
    position: sticky;
    top: var(--space-6);
  }
}

/* Music: official channel call to action */

.channel__grid {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}

.channel__title {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.channel__title em {
  font-style: italic;
  color: var(--c-accent-light);
}

.channel__button {
  justify-self: start;
}

@media (min-width: 56em) {
  .channel__grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.closing__cite {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Homepage media sections */

.sermons__more,
.choir__more {
  margin: var(--space-5) 0 0;
}

.sermons__list {
  margin-top: var(--space-6);
}

.sermons__list .index-list__item {
  padding-block: var(--space-4);
}

.sermons__list .index-list__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.choir__media--live {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.choir__caption {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
}

.choir__caption span {
  color: var(--c-on-dark-muted);
}

.choir__tracks {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line-dark);
}

.choir__tracks a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-line-dark);
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-decoration: none;
  color: var(--c-on-dark);
  overflow-wrap: break-word;
}

.choir__tracks a:hover {
  color: var(--c-accent-light);
}

.choir__tracks span {
  font-style: italic;
  color: var(--c-accent-light);
}

@media (min-width: 56em) {
  .choir__media--live {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* Events + news -------------------------------------------------------------
   Posters keep their own proportions (contain, never cropped); without one,
   a matted frame sets the date as type. */

.frame--poster .frame__media {
  aspect-ratio: var(--ratio);
  object-fit: contain;
  background-color: var(--c-stone);
}

.poster-glyph {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  color: var(--c-text-pending);
}

.poster-glyph__day {
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 5vw, 7.5rem);
  font-style: italic;
  line-height: 0.9;
  opacity: 0.7;
}

.poster-glyph__month {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.bulletin__more {
  margin: var(--space-5) 0 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-accent-ink);
}

.back-link__arrow {
  width: 1.25rem;
  height: 0.625rem;
  transition: transform var(--dur) var(--ease);
}

.back-link:hover .back-link__arrow {
  transform: translateX(-4px);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.event-feature__title a,
.event-row__title a,
.event-past__title a,
.post-feature__title a,
.post-entry__title a,
.post-register .register-table__name {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur) var(--ease);
}

.event-feature__title a:hover,
.event-row__title a:hover,
.event-past__title a:hover,
.post-feature__title a:hover,
.post-entry__title a:hover,
.post-register .register-table__name:hover {
  background-size: 100% 1px;
}

/* Featured event: the date set large, beside the poster */

.event-feature__grid {
  display: grid;
  gap: var(--space-8);
}

.event-feature__poster {
  width: 100%;
  max-width: 24rem;
}

.event-feature__date {
  margin: var(--space-5) 0 0;
}

.event-feature__date time {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "day month" "day weekday";
  align-items: end;
  column-gap: var(--space-4);
}

.event-feature__day {
  grid-area: day;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 3rem + 6vw, 8rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
}

.event-feature__month {
  grid-area: month;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.1;
}

.event-feature__weekday {
  grid-area: weekday;
  padding-bottom: 0.3rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.event-feature__title {
  margin: var(--space-6) 0 0;
  max-width: 20ch;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

.event-feature__actions {
  margin: var(--space-6) 0 0;
}

.event-facts {
  display: grid;
  margin: var(--space-6) 0 0;
  max-width: 34rem;
  border-top: 1px solid var(--c-line-strong);
}

.event-facts > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--c-line);
}

.event-facts dt {
  padding-top: 0.2rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.event-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  overflow-wrap: break-word;
}

.event-facts__note {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

@media (min-width: 60em) {
  .event-feature__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }
}

/* Upcoming register: ruled rows led by a large date */

.event-register {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line-strong);
}

.event-row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: var(--space-4) var(--space-5);
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--c-line);
}

.event-row__date {
  margin: 0;
}

.event-row__date time {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.event-row__day {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  line-height: 0.9;
}

.event-row__month {
  margin-top: var(--space-2);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

.event-row__weekday {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--c-text-muted);
}

.event-row__body {
  min-width: 0;
}

.event-row__title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.2;
  overflow-wrap: break-word;
}

.event-row__when,
.event-when {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  overflow-wrap: anywhere;
}

.event-row__summary {
  margin: var(--space-3) 0 0;
  max-width: 56ch;
  color: var(--c-text-muted);
}

.event-row__poster {
  grid-column: 2;
  width: 100%;
  max-width: 8rem;
}

.event-calendar__note {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--c-text-pending);
}

@media (min-width: 48em) {
  .event-row {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--space-6);
  }

  .event-row--poster {
    grid-template-columns: 6rem minmax(0, 1fr) 8rem;
  }

  .event-row__poster {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Past events: a compact ledger */

.event-past {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line-strong);
}

.event-past__item {
  display: grid;
  gap: var(--space-1) var(--space-5);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--c-line);
}

.event-past__date {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent-ink);
}

.event-past__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.event-past__place {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

@media (min-width: 48em) {
  .event-past__item {
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: baseline;
  }

  .event-past__place {
    grid-column: 2;
  }
}

@media (min-width: 60em) {
  .event-calendar .archive-register__grid,
  .event-past-section .archive-register__grid,
  .post-latest .archive-register__grid,
  .page-news .archive-register .archive-register__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 8rem);
  }
}

/* Detail pages */

.event-detail__grid {
  display: grid;
  gap: var(--space-8);
}

.event-detail__back {
  margin: 0;
}

.event-detail__status {
  display: inline-block;
  margin: var(--space-4) 0 0;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--c-line-strong);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.event-detail__title,
.post-detail__title {
  max-width: 18ch;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.75rem);
  overflow-wrap: break-word;
  hyphens: auto;
}

.event-detail__poster {
  width: 100%;
  max-width: 26rem;
}

@media (min-width: 60em) {
  .event-detail__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .event-detail__poster {
    justify-self: end;
  }
}

.article-body {
  max-width: 66ch;
}

.article-body > p {
  margin: var(--space-5) 0 0;
  color: var(--c-text-muted);
}

.article-body > .lead {
  margin-top: 0;
  color: var(--c-text);
}

.article-foot {
  padding-block: var(--space-7);
}

.post-detail__meta {
  margin-top: var(--space-6);
}

.post-detail__title {
  max-width: 22ch;
}

.post-detail__summary {
  margin: var(--space-6) 0 0;
  max-width: 48ch;
}

/* News: type labels are words, not colours */

.post-type {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid currentColor;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--c-text);
}

.post-type--announcement {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-ivory);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.post-feature__grid {
  display: grid;
  gap: var(--space-7);
}

.post-feature__title {
  margin: var(--space-5) 0 0;
  max-width: 22ch;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

.post-feature__summary {
  margin: var(--space-5) 0 0;
  max-width: 46ch;
}

.post-feature__actions {
  margin: var(--space-6) 0 0;
}

@media (min-width: 60em) {
  .post-feature__grid:not(.post-feature__grid--text) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .post-feature__grid--text .post-feature__body {
    max-width: 52rem;
  }
}

.post-list {
  border-top: 1px solid var(--c-line-strong);
}

.post-entry {
  display: grid;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--c-line);
}

.post-entry__body {
  min-width: 0;
}

.post-entry__title {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-h3);
  line-height: 1.2;
  overflow-wrap: break-word;
}

.post-entry__summary {
  margin: var(--space-3) 0 0;
  max-width: 60ch;
  color: var(--c-text-muted);
}

@media (min-width: 48em) {
  .post-entry--media {
    grid-template-columns: minmax(0, 1fr) 13rem;
    align-items: start;
  }
}

.post-register .register-table__type .post-type {
  white-space: nowrap;
}

/* 8. Motion --------------------------------------------------------------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__copy > * {
  animation: rise var(--dur-slow) var(--ease) both;
}

.hero__copy > :nth-child(2) { animation-delay: 80ms; }
.hero__copy > :nth-child(3) { animation-delay: 160ms; }
.hero__copy > :nth-child(4) { animation-delay: 240ms; }

.hero__visual {
  animation: rise 900ms var(--ease) 200ms both;
}

.page-intro__copy > * {
  animation: rise var(--dur-slow) var(--ease) both;
}

.page-intro__copy > :nth-child(2) { animation-delay: 80ms; }
.page-intro__copy > :nth-child(3) { animation-delay: 160ms; }
.page-intro__copy > :nth-child(4) { animation-delay: 240ms; }

.page-intro__visual,
.page-intro__aside {
  animation: rise 900ms var(--ease) 200ms both;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}