/* The Branch, the Noir version.

   A second composition layer, parallel to landing.css and loaded after
   tokens.css and system.css. Same tokens, same components, opposite
   ground: ink carries the page, gold carries the interludes, and paper
   appears once per page at most. The direction revives the energy of
   Direction B, Green House, that the first build set aside: dark
   ground, Archivo 800 uppercase display, one accent doing the work.

   Every page here is short on purpose. The landing says one thing per
   screen and hands the detail to its own page.

   Class prefix n-. Nothing in here reaches into landing.css, and the
   only system components used are the primitives: btn, badge, eyebrow,
   dot, eq, field, input, textarea, select, check. */

body.noir {
  /* The dark ground, derived from Accent Blue #182A7D. The green ink
     reads muddy across a whole viewport; navy carries gold better and
     blue is already the brand's second colour. */
  --n-ink:   #0B1233;   /* the ground */
  --n-line:  #26305C;   /* hairlines on it */
  --n-faint: #8A93B8;   /* tertiary text on it */

  background: var(--n-ink);
  color: var(--paper);
}

/* On ink, ambient links read gold, not blue. The whole selector sits
   inside :where(), because an ancestor class outside it still counts:
   .noir :where(a) is 0-1-0 and beats .btn--gold by load order, which
   painted gold text on a gold button. :where(.noir a) is truly zero. */
:where(.noir a) { color: var(--gold); }
:where(.noir a:hover) { color: var(--gold-hover); }

.noir ::selection { background: var(--gold); color: var(--n-ink); }

/* ---------------------------------------------------------------
   Type
   --------------------------------------------------------------- */

.n-display {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}
.n-display--xl { font-size: clamp(42px, 7.4vw, 96px); }
.n-display--l  { font-size: clamp(32px, 4.6vw, 60px); }
.n-display--m  { font-size: clamp(24px, 3vw, 38px); }

/* The serif holds one italic line inside a block of Archivo: the same
   counterpoint the brand already owns, pointed the other way. */
.n-display i,
.n-display em {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

.n-lede {
  font-size: var(--size-body);
  line-height: var(--lh-body);
  max-width: 58ch;
  margin: 0;
}

.n-eyebrow {
  font-family: "Archivo", var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------------------------------------------------------------
   Bands: the page is a stack of full-width colour blocks
   --------------------------------------------------------------- */

.n-band { padding: clamp(56px, 9vw, 110px) 0; }
.n-band--gold  { background: var(--gold);  color: var(--n-ink); }
.n-band--paper { background: var(--paper); color: var(--ink); }
.n-band--ink   { background: var(--n-ink); color: var(--paper); }
.n-band--green { background: var(--green); color: var(--paper); }

.n-band--gold  .n-eyebrow { color: var(--gold-ink-strong); }
.n-band--paper .n-eyebrow { color: var(--green-700); }
.n-band--gold  .n-lede { color: var(--gold-ink-strong); }
.n-band--ink   .n-lede { color: var(--n-faint); }
.n-band--paper .n-lede { color: var(--body); }
.n-band--green .n-lede { color: var(--on-green); }

.n-wrap {
  max-width: var(--l-max, 1216px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}

/* Two column band body: heading left, copy and action right. */
.n-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}
@media (max-width: 860px) {
  .n-split { grid-template-columns: 1fr; align-items: start; }
}

/* ---------------------------------------------------------------
   Header: logo left, one action and the menu right
   --------------------------------------------------------------- */

.n-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  transition: background var(--considered) var(--ease);
}
/* Transparent over the hero; navy once the page is moving under it. */
.n-head.is-scrolled {
  background: rgba(11, 18, 51, 0.94);
  border-bottom: 1px solid var(--n-line);
}
@supports (backdrop-filter: blur(1px)) {
  .n-head.is-scrolled { background: rgba(11, 18, 51, 0.8); backdrop-filter: blur(10px); }
}
.n-head__in {
  max-width: var(--l-max, 1216px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.n-head__logo { width: 140px; display: block; }
@media (max-width: 620px) { .n-head__logo { width: 118px; } }

.n-head__actions { display: flex; align-items: center; gap: 10px; }

/* The primary links, inline in the bar. On a narrow screen they fold
   behind the menu button, which lists the same pages. */
.n-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; margin-right: 18px; }
.n-nav a {
  font-family: "Archivo", var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  transition: color var(--instant) var(--ease);
}
.n-nav a:hover,
.n-nav a[aria-current="page"] { color: var(--gold); }
/* Six links now ride in the bar; below full width they close ranks
   before folding behind the menu button. */
@media (max-width: 1120px) { .n-nav { gap: 18px; } }
@media (max-width: 960px) { .n-nav { display: none; } }

.n-menu-btn {
  font-family: "Archivo", var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(251, 250, 247, 0.4);
  border-radius: var(--radius);
  height: 44px;
  padding: 0 18px;
  cursor: pointer;
  transition: border-color var(--instant) var(--ease), color var(--instant) var(--ease);
}
.n-menu-btn:hover { border-color: var(--gold); color: var(--gold); }

/* The overlay. Ink wall, big links, one per line. */
.n-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--n-ink);
  display: flex;
  flex-direction: column;
  padding: 24px clamp(20px, 4vw, 32px) 48px;
  overflow-y: auto;
}
.n-menu[hidden] { display: none; }
.n-menu__top { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.n-menu__links {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.n-menu__links a {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  font-size: clamp(30px, 6vw, 58px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--paper);
  line-height: 1.15;
  width: fit-content;
  transition: color var(--instant) var(--ease);
}
.n-menu__links a:hover,
.n-menu__links a[aria-current="page"] { color: var(--gold); }
.n-menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--n-faint);
  font-size: var(--size-fine);
}
.n-menu__foot a { color: var(--n-faint); }
.n-menu__foot a:hover { color: var(--gold); }

/* ---------------------------------------------------------------
   Hero: a full-bleed photograph carrying one line
   --------------------------------------------------------------- */

.n-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.n-hero--band { min-height: 62svh; }   /* subpages get a shorter one */

.n-hero__media,
.n-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Ink from below and above, so the headline and the header both read. */
.n-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 18, 51, 0.55) 0%, rgba(11, 18, 51, 0.15) 34%, rgba(11, 18, 51, 0.72) 82%, var(--n-ink) 100%);
}

.n-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--l-max, 1216px);
  margin: 0 auto;
  /* The top padding clears the fixed bar. On a short viewport the hero
     grows from this edge instead of sliding the headline under the
     logo, which is what happened on the gatherings page. */
  padding: 104px clamp(20px, 4vw, 32px) clamp(40px, 7vh, 80px);
  color: var(--paper);
}
.n-hero__body .n-lede { color: rgba(251, 250, 247, 0.82); margin-top: 18px; }
.n-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* A label never breaks inside a button; the buttons wrap as whole
   units instead. On a phone they stretch to share the row, and a pair
   that will not fit side by side stacks, one full row each. */
.noir .btn { white-space: nowrap; }
@media (max-width: 620px) {
  .n-hero__cta .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------
   Buttons on ink. The base .btn comes from the system; these two
   variants belong to this ground.
   --------------------------------------------------------------- */

.n-btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(251, 250, 247, 0.45);
}
.n-btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }

.n-band--gold .n-btn-ink,
.n-btn-ink {
  background: var(--n-ink);
  color: var(--paper);
  border: 1px solid var(--n-ink);
}
.n-btn-ink:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); }

/* Green is the action colour: the primary move on a page wears it,
   whatever ground it sits on. Gold stays with the display layer. */
.n-btn-green,
.n-band--gold .n-btn-green,
.n-band--paper .n-btn-green {
  background: var(--green);
  color: var(--paper);
  border: 1px solid var(--green);
}
.n-btn-green:hover { background: var(--green-700); border-color: var(--green-700); color: var(--paper); }

/* ---------------------------------------------------------------
   The strip: four gatherings in one row, borrowed rhythm
   --------------------------------------------------------------- */

.n-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--n-line);
  margin-top: clamp(36px, 6vw, 64px);
}
.n-strip__cell {
  padding: 22px 20px 22px 0;
  border-bottom: 1px solid var(--n-line);
}
.n-strip__name {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 17px;
}
.n-strip__when { margin-top: 6px; font-size: var(--size-fine); color: var(--n-faint); }
@media (max-width: 860px) {
  .n-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .n-strip { grid-template-columns: 1fr; }
  .n-strip__cell { padding-block: 16px; }
}

/* ---------------------------------------------------------------
   Rail of event artwork. Same behaviour contract as the landing
   rail: data-rail, a scroll-snap track, two arrows.
   --------------------------------------------------------------- */

.n-rail { position: relative; margin-top: clamp(32px, 5vw, 56px); }
.n-rail__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  outline-offset: 4px;
  scrollbar-width: none;
}
.n-rail__track::-webkit-scrollbar { display: none; }

.n-card {
  flex: 0 0 calc((100% - 28px) / 3);
  scroll-snap-align: start;
  display: block;
  color: inherit;
  background: transparent;
}
.n-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--blue);
}
.n-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-card__eyebrow { margin-top: 14px; }
.n-card__title {
  font-family: "Archivo", var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin-top: 6px;
}
.n-card__meta { margin-top: 6px; font-size: var(--size-fine); color: var(--n-faint); }
.n-band--gold .n-card__meta { color: var(--gold-ink-strong); }
@media (max-width: 860px) { .n-card { flex-basis: 72%; } }

.n-rail__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.n-rail__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--n-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: border-color var(--considered) var(--ease), color var(--considered) var(--ease);
}
.n-rail__btn:hover { border-color: var(--gold); color: var(--gold); }
.n-rail__btn[disabled] { opacity: 0.35; cursor: default; }
.n-band--gold .n-rail__btn { border-color: rgba(11, 18, 51, 0.35); color: var(--n-ink); }
.n-band--gold .n-rail__btn:hover { border-color: var(--n-ink); }

/* ---------------------------------------------------------------
   Teaching feature: one episode, not a shelf
   --------------------------------------------------------------- */

.n-sermon {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.n-sermon__art {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--blue);
}
.n-sermon__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-sermon__meta { margin-top: 14px; font-size: var(--size-fine); color: var(--n-faint); }
@media (max-width: 860px) {
  .n-sermon { grid-template-columns: 1fr; }
  .n-sermon__art { max-width: 340px; }
}

/* ---------------------------------------------------------------
   Simple episode list, for the listen page
   --------------------------------------------------------------- */

.n-eps { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--n-line); }
.n-ep {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--n-line);
}
.n-ep__title { font-weight: 600; }
.n-ep__sub { grid-column: 1; font-size: var(--size-fine); color: var(--n-faint); }
.n-ep__dur {
  grid-row: 1 / span 2;
  align-self: center;
  font-variant-numeric: tabular-nums;
  color: var(--n-faint);
  font-size: var(--size-fine);
}

/* ---------------------------------------------------------------
   Gathering cards, the detail version on the gatherings page
   --------------------------------------------------------------- */

.n-gather {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: clamp(32px, 5vw, 56px);
}
.n-gather__card {
  border: 1px solid var(--n-line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
}
.n-gather__name {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 28px);
}
.n-gather__when { color: var(--gold); margin-top: 8px; font-weight: 600; }
.n-gather__where { margin-top: 12px; color: var(--n-faint); line-height: 1.55; }
@media (max-width: 720px) { .n-gather { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Giving: two accounts, each a card with a number you can copy
   --------------------------------------------------------------- */

.n-give {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: clamp(32px, 5vw, 56px);
}
@media (max-width: 720px) { .n-give { grid-template-columns: 1fr; } }

.n-give__card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
}
.n-give__bank {
  font-family: "Archivo", var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
}
.n-give__name { margin-top: 10px; font-weight: 600; }
.n-give__num {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.n-give__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.n-copy {
  font-family: "Archivo", var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
  background: transparent;
  border: 1px solid var(--green-400);
  border-radius: var(--radius);
  height: 40px;
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--instant) var(--ease), color var(--instant) var(--ease);
}
.n-copy:hover { background: var(--green); border-color: var(--green); color: var(--paper); }
.n-copy.is-done { background: var(--green-700); border-color: var(--green-700); color: var(--paper); }

/* ---------------------------------------------------------------
   Panel: the one paper moment a page is allowed
   --------------------------------------------------------------- */

.n-panel {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 48px);
}

/* ---------------------------------------------------------------
   Back to the top
   --------------------------------------------------------------- */

.n-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 50;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--n-ink);
  cursor: pointer;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--considered) var(--ease),
              transform var(--considered) var(--ease),
              background var(--instant) var(--ease);
}
.n-top:hover { background: var(--gold-hover); }
.n-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.n-foot { background: var(--n-ink); border-top: 1px solid var(--n-line); padding: clamp(44px, 6vw, 72px) 0 36px; }
.n-foot__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
.n-foot__logo { width: 150px; display: block; }
.n-foot__addr { margin-top: 18px; color: var(--n-faint); line-height: 1.6; max-width: 32ch; }
.n-foot__h {
  font-family: "Archivo", var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.n-foot__links { display: flex; flex-direction: column; }
.n-foot__links a { color: var(--paper); padding: 7px 0; font-size: 15px; }
.n-foot__links a:hover { color: var(--gold); }
.n-foot__base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--n-line);
  color: var(--n-faint);
  font-size: var(--size-fine);
}
@media (max-width: 860px) {
  .n-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .n-foot__grid { grid-template-columns: 1fr; gap: 24px; }
  .n-foot__links a { padding: 10px 0; }
}

/* ===============================================================
   Second round, September 2026: the Resting Place content carried
   into Noir. One colour for every action, the Greek behind each
   gathering, Basileia, five accounts, and the new copy's shapes:
   pillars, facts, scripture.
   =============================================================== */

/* Every action is white: paper on navy, navy text. On the one paper
   band a white button keeps an ink outline so it does not vanish.
   The Menu and rail arrows are controls, not actions, and stay. */
.noir .btn,
.noir .btn--primary,
.noir .btn--gold,
.noir .n-btn-green,
.noir .n-btn-ink,
.noir .n-band--gold .n-btn-ink,
.noir .n-band--gold .n-btn-green,
.noir .n-band--paper .n-btn-green {
  background: var(--paper);
  color: var(--n-ink);
  border: 1px solid var(--paper);
  font-weight: 600;
}
.noir .btn:hover,
.noir .n-btn-green:hover,
.noir .n-btn-ghost:hover,
.noir .n-btn-ink:hover,
.noir .btn--gold:hover {
  background: var(--line);
  border-color: var(--line);
  color: var(--n-ink);
}
/* The second of a pair is the same white, as an outline. */
.noir .n-btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
  font-weight: 600;
}
.noir .n-btn-ghost:hover { background: var(--paper); color: var(--n-ink); border-color: var(--paper); }
.noir .n-band--paper .n-btn-ghost,
.noir .n-band--gold .n-btn-ghost { color: var(--n-ink); border-color: var(--n-ink); }
.noir .n-band--paper .n-btn-ghost:hover,
.noir .n-band--gold .n-btn-ghost:hover { background: var(--n-ink); color: var(--paper); }
.noir .n-band--paper .btn,
.noir .n-panel .btn { border-color: var(--n-ink); }
.noir .n-band--paper .btn:hover,
.noir .n-panel .btn:hover { background: var(--n-ink); color: var(--paper); border-color: var(--n-ink); }

/* The serif line under the uppercase headline. */
.n-hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 38px);
  line-height: 1.1;
  margin: 14px 0 0;
  color: rgba(251, 250, 247, 0.88);
}

/* The Greek behind each name, in EB Garamond, gold on ink. */
.n-greek {
  font-family: "EB Garamond", Georgia, serif;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: 19px;
  line-height: 1.2;
  color: var(--gold);
}
.n-band--paper .n-greek,
.n-band--gold .n-greek { color: var(--n-ink); }
.n-meaning {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--n-faint);
  margin-top: 4px;
}
.n-band--paper .n-meaning { color: var(--muted); }
.n-band--gold .n-meaning { color: var(--gold-ink-strong); }

/* The meander, the Greek key, as the rule above the gatherings. Gold
   on ink; ink on paper. */
.n-meander {
  border-top: 0 !important;
  padding-top: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 7.5H16M2.5 7.5V.5H13.5V5.5H6.5V3H10.5' fill='none' stroke='%23E7BC00' stroke-width='1'/%3E%3C/svg%3E") repeat-x left top;
}
.n-band--paper .n-meander {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 7.5H16M2.5 7.5V.5H13.5V5.5H6.5V3H10.5' fill='none' stroke='%230B1233' stroke-width='1'/%3E%3C/svg%3E");
}

/* Five in the strip now. */
.n-strip { grid-template-columns: repeat(5, 1fr); }
.n-strip__cell + .n-strip__cell { padding-left: 20px; border-left: 1px solid var(--n-line); }
.n-band--paper .n-strip__cell { border-color: var(--line); }
.n-strip__greek { margin-top: 2px; }
.n-strip__start { color: var(--green-700); font-weight: 700; margin-left: 8px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; vertical-align: 2px; }
@media (max-width: 1100px) { .n-strip { grid-template-columns: repeat(3, 1fr); } .n-strip__cell:nth-child(3n + 1) { padding-left: 0; border-left: 0; } }
@media (max-width: 720px) { .n-strip { grid-template-columns: 1fr 1fr; } .n-strip__cell:nth-child(3n + 1) { padding-left: 20px; border-left: 1px solid var(--n-line); } .n-strip__cell:nth-child(2n + 1) { padding-left: 0; border-left: 0; } }
@media (max-width: 480px) { .n-strip { grid-template-columns: 1fr; } .n-strip__cell + .n-strip__cell { padding-left: 0; border-left: 0; } }

/* Presence, Oneness, Glory. */
.n-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px clamp(20px, 3vw, 40px);
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid rgba(11, 18, 51, 0.25);
}
.n-pillar { padding-top: 18px; }
.n-pillar__word {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.01em;
}
.n-pillar__title { margin-top: 10px; font-weight: 700; font-size: var(--size-small); }
.n-pillar__text { margin-top: 8px; font-size: var(--size-small); line-height: 1.55; }
.n-pillar__say {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(11, 18, 51, 0.25);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
}
.n-band--ink .n-pillars, .n-band--ink .n-pillar__say { border-color: var(--n-line); }
.n-band--ink .n-pillar__text { color: var(--n-faint); }
@media (max-width: 760px) { .n-pillars { grid-template-columns: 1fr; gap: 0; } .n-pillar { padding: 18px 0 20px; border-bottom: 1px solid rgba(11, 18, 51, 0.25); } .n-pillar:last-child { border-bottom: 0; } }

/* The quotation with its author. */
.n-quote { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; margin-top: clamp(32px, 5vw, 56px); }
.n-quote img { width: 72px; height: 90px; object-fit: cover; object-position: 50% 15%; display: block; border-radius: var(--radius); }
.n-quote blockquote { margin: 0; }
.n-quote__by { margin-top: 10px; font-size: var(--size-fine); }
.n-quote--large { grid-template-columns: 240px 1fr; gap: clamp(24px, 3vw, 40px); align-items: end; }
.n-quote--large img { width: 240px; height: 300px; object-position: 50% 20%; }
@media (max-width: 640px) { .n-quote--large { grid-template-columns: 1fr; } .n-quote--large img { width: 200px; height: 250px; } }

/* One photograph beside the opening paragraphs, no taller than the text needs. */
.n-aside-photo { width: 100%; max-height: 420px; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); display: block; }

/* Facts: a numbered list on hairlines. */
.n-facts { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--n-line); }
.n-facts li { display: grid; grid-template-columns: 2em 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--n-line); line-height: 1.5; }
.n-facts li > span:first-child { font-family: var(--font-display); color: var(--gold); }
.n-facts strong { font-weight: 700; }
.n-band--green .n-facts, .n-band--green .n-facts li { border-color: rgba(251, 250, 247, 0.28); }
.n-band--green .n-facts { color: var(--on-green); }
.n-band--green .n-facts strong { color: var(--paper); }
.n-band--paper .n-facts, .n-band--paper .n-facts li { border-color: var(--line); }
.n-band--paper .n-facts li > span:first-child { color: var(--green-700); }

/* Scripture: serif italic on a gold rule. */
.n-scripture {
  margin: 28px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
  max-width: 58ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
}
.n-scripture cite { display: block; margin-top: 10px; font-family: "Archivo", var(--font-sans); font-style: normal; font-size: var(--size-fine); color: var(--n-faint); }
.n-band--gold .n-scripture { border-color: var(--n-ink); }
.n-band--gold .n-scripture cite { color: var(--gold-ink-strong); }

/* Gathering cards: the Greek and the meaning under the name. */
.n-gather__body { margin-top: 12px; line-height: 1.55; color: var(--paper); }

/* Giving: five accounts as rows on the green band, each led by its
   bank's mark and its currency. */
.n-give { display: block; border-top: 1px solid rgba(251, 250, 247, 0.35); }
.n-give__row {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1.2fr) minmax(0, 1.3fr) auto;
  gap: 8px 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(251, 250, 247, 0.22);
}
.n-give__sym { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1; color: var(--on-green); }
.n-give__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.n-give__logo { width: 32px; height: 32px; flex: 0 0 auto; object-fit: contain; border-radius: 6px; background: var(--paper); }
.n-give__group { margin-top: 28px; }
.n-give__group + .n-give__group { margin-top: 40px; }
.n-give__bank { font-weight: 700; }
.n-give__name { margin-top: 0; font-size: var(--size-fine); color: var(--on-green); }
.n-give__num { font-size: clamp(22px, 2.4vw, 30px); margin-top: 0; }
.n-copy { background: var(--paper); border-color: var(--paper); color: var(--n-ink); }
.n-copy:hover { background: var(--line); border-color: var(--line); color: var(--n-ink); }
.n-copy.is-done { background: var(--gold); border-color: var(--gold); color: var(--n-ink); }
@media (max-width: 600px) {
  .n-give__row { grid-template-columns: 2.2em 1fr auto; }
  .n-give__num { grid-column: 2 / -1; }
}

/* Two-column body with room for a heading each side. */
.n-half { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(28px, 5vw, 72px); }
@media (max-width: 720px) { .n-half { grid-template-columns: 1fr; } }
.n-form-note { font-size: var(--size-fine); color: var(--muted); margin: 0 0 12px; }

/* Corrections after the first capture. The bank name used to be a
   small green label on a paper card; on the green band it is paper
   text. And the schedule's time belongs in the second column: with a
   row span but no column, the grid placed it first. */
.n-give__bank {
  font-family: "Archivo", var(--font-sans);
  font-size: var(--size-small);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
}
.n-ep__dur { grid-column: 2; }

/* ===============================================================
   Fourth round, September 2026. The hero becomes a set of slides,
   the homepage gatherings band becomes a gallery, the events page
   becomes a calendar, the listen page becomes three doors, and the
   giving rows learn to stack on a phone.
   =============================================================== */

/* ---------------------------------------------------------------
   Hero slides. Every slide is a full hero, stacked in one grid cell
   and crossfaded; the container takes the height of the tallest, so
   a long caption on a phone never gets clipped.
   --------------------------------------------------------------- */

.n-slides { display: grid; position: relative; }
.n-slides > .n-slide {
  grid-area: 1 / 1;
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms var(--ease), visibility 0s linear 700ms;
}
.n-slides > .n-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms var(--ease), visibility 0s;
  z-index: 1;
}
/* Room under the buttons for the slide controls. */
.n-slides .n-hero__body { padding-bottom: calc(clamp(40px, 7vh, 80px) + 64px); }

.n-slides__bar {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(22px, 4vh, 40px);
  z-index: 3;
  pointer-events: none;
}
.n-slides__bar .n-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.n-slides__dots { display: flex; gap: 8px; pointer-events: auto; }
.n-slides__dot {
  width: 34px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.n-slides__dot::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(251, 250, 247, 0.35);
  transition: background var(--considered) var(--ease);
}
.n-slides__dot:hover::before { background: rgba(251, 250, 247, 0.7); }
.n-slides__dot[aria-current="true"]::before { background: var(--gold); }
.n-slides__arrows { display: flex; gap: 8px; pointer-events: auto; }
.n-slides__arrows .n-rail__btn { border-color: rgba(251, 250, 247, 0.4); }

/* ---------------------------------------------------------------
   Gallery: photographs in the rail, on paper
   --------------------------------------------------------------- */

.n-gcard {
  flex: 0 0 calc((100% - 28px) / 3);
  scroll-snap-align: start;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line);
}
.n-gcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .n-gcard { flex-basis: 82%; } }
.n-band--paper .n-rail__btn { border-color: var(--line); color: var(--ink); }
.n-band--paper .n-rail__btn:hover { border-color: var(--ink); color: var(--ink); }

/* ---------------------------------------------------------------
   Calendar. A month at a time; a day is a button; the chosen day's
   gatherings list underneath. Recurring gatherings are computed,
   dated events come from /data/events.json when they carry a date.
   --------------------------------------------------------------- */

.n-cal { margin-top: clamp(28px, 4vw, 44px); }
.n-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--n-line);
}
.n-cal__month {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.01em;
}
.n-cal__nav { display: flex; gap: 8px; }
.n-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 14px;
}
.n-cal__dow {
  font-family: "Archivo", var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--n-faint);
  text-align: center;
  padding: 6px 0 10px;
}
.n-cal__day {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--paper);
  font-family: "Archivo", var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--instant) var(--ease), border-color var(--instant) var(--ease);
}
.n-cal__day:hover { background: rgba(251, 250, 247, 0.06); }
.n-cal__day[aria-pressed="true"] { border-color: var(--gold); background: rgba(231, 188, 0, 0.1); }
.n-cal__day.is-today { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.n-cal__day.is-pad { color: var(--n-faint); opacity: 0.45; }
.n-cal__day.is-past { color: var(--n-faint); }
.n-cal__marks { display: flex; gap: 3px; height: 6px; }
.n-cal__mark { width: 6px; height: 6px; border-radius: 50%; }
.n-cal__mark--aletheia   { background: var(--gold); }
.n-cal__mark--paraklesis { background: var(--paper); }
.n-cal__mark--anapausis  { background: var(--green-400); }
.n-cal__mark--event      { background: var(--gold-hover); outline: 1px solid var(--n-ink); }

.n-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 18px;
  font-size: var(--size-fine);
  color: var(--n-faint);
}
.n-cal__legend span { display: inline-flex; align-items: center; gap: 8px; }

.n-cal__panel { margin-top: clamp(24px, 4vw, 40px); border-top: 1px solid var(--n-line); }
.n-cal__date {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 18px 0 6px;
}
.n-cal__empty { padding: 10px 0 18px; color: var(--n-faint); }
.n-cal__item {
  display: grid;
  grid-template-columns: 5.5em 1fr auto;
  gap: 6px 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--n-line);
}
.n-cal__time { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; }
.n-cal__name { font-weight: 700; }
.n-cal__where { grid-column: 2; font-size: var(--size-fine); color: var(--n-faint); }
.n-cal__go { grid-row: 1 / span 2; align-self: center; font-size: var(--size-fine); white-space: nowrap; }
@media (max-width: 560px) {
  .n-cal__grid { gap: 2px; }
  .n-cal__day { font-size: 13px; min-height: 40px; }
  .n-cal__item { grid-template-columns: 5em 1fr; }
  .n-cal__go { grid-row: auto; grid-column: 2; }
}

/* The next few, as a plain list, for people who read rather than browse. */
.n-next { margin-top: clamp(28px, 4vw, 44px); }
.n-next .n-ep__title { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

/* The Kingdom Conference, coming soon, on its own band. */
.n-conf {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.n-conf__year {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  font-size: clamp(72px, 14vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--n-ink);
  opacity: 0.18;
}
.n-conf__soon {
  display: inline-block;
  font-family: "Archivo", var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--n-ink);
  border-radius: var(--radius);
  padding: 7px 12px;
  margin-top: 16px;
}
@media (max-width: 760px) { .n-conf { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Listen: three ways in. Each card is one destination.
   --------------------------------------------------------------- */

.n-ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: clamp(28px, 4vw, 44px);
}
.n-way {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--n-line);
  border-radius: var(--radius);
  color: inherit;
  transition: border-color var(--considered) var(--ease), background var(--considered) var(--ease);
}
.n-way:hover { border-color: var(--gold); background: rgba(251, 250, 247, 0.03); color: inherit; }
.n-way__icon { width: 40px; height: 40px; color: var(--gold); }
.n-way__icon svg { width: 100%; height: 100%; display: block; }
.n-way__name {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.01em;
}
.n-way__text { color: var(--n-faint); line-height: 1.55; flex: 1; }
.n-way__go { font-family: "Archivo", var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.n-way__live { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 860px) { .n-ways { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Giving rows on a phone. The third column collapsed to nothing and
   crushed the Copy button to a 35px stub with its label spilling
   out. Below 600px each row stacks: bank, number, then the button
   on its own full-width line.
   --------------------------------------------------------------- */

@media (max-width: 600px) {
  .n-give__row { grid-template-columns: 2.2em minmax(0, 1fr); }
  .n-give__num { grid-column: 2; }
  .n-give__row .n-copy { grid-column: 1 / -1; width: 100%; height: 44px; margin-top: 4px; }
}

/* ===============================================================
   Fifth round, September 2026. The hero grid stretches again, and
   the calendar goes the way of a calendar app: chips in the cells,
   a popover for the day, a Coming up list beside it, no legend.
   =============================================================== */

/* .n-hero sets justify-content: flex-end for its flex column. On the
   slides, a grid container, that same declaration means "pack the
   column track to the end and stop stretching it", which is why the
   photograph stopped reaching both edges. Say what we mean. */
.n-slides {
  justify-content: normal;
  grid-template-columns: minmax(0, 1fr);
}

.n-cal--compact {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.n-cal__main { position: relative; }
.n-cal--compact .n-cal__grid { gap: 2px; margin-top: 10px; }
.n-cal--compact .n-cal__day {
  aspect-ratio: auto;
  min-height: 66px;
  align-items: stretch;
  justify-content: flex-start;
  padding: 6px 6px 5px;
  gap: 4px;
  text-decoration: none;
}
.n-cal--compact .n-cal__day.is-past { color: var(--n-faint); }
.n-cal__num {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
}
.n-cal__day.is-today .n-cal__num { background: var(--gold); color: var(--n-ink); }
.n-cal__chips { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; }
.n-cal__chip {
  font-family: "Archivo", var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 3px 5px;
  border-radius: 3px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.n-cal__chip--aletheia   { background: var(--gold);  color: var(--n-ink); }
.n-cal__chip--paraklesis { background: rgba(251, 250, 247, 0.16); color: var(--paper); }
.n-cal__chip--anapausis  { background: var(--green); color: var(--paper); }
.n-cal__chip--event      { background: var(--blue);  color: var(--paper); }
.n-cal--compact .n-cal__day.is-past .n-cal__chip { opacity: 0.55; }

.n-cal__todaybtn {
  font-family: "Archivo", var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--n-line);
  border-radius: var(--radius);
  height: 44px;
  padding: 0 14px;
  margin-right: 6px;
  cursor: pointer;
  transition: border-color var(--instant) var(--ease), color var(--instant) var(--ease);
}
.n-cal__todaybtn:hover { border-color: var(--gold); color: var(--gold); }

/* The popover. Paper, so it reads as a card lifted off the grid. */
.n-cal__pop {
  position: absolute;
  z-index: 20;
  width: min(320px, 100%);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.6);
  padding: 14px 16px 16px;
}
.n-cal__pop[hidden] { display: none; }
.n-cal__pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.n-cal__pop .n-cal__date { padding: 0; font-size: 13px; }
.n-cal__pop-close {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.n-cal__pop-close:hover { background: var(--line); }
.n-cal__pop .n-cal__item { grid-template-columns: 4.6em 1fr; gap: 2px 14px; padding: 10px 0; border-color: var(--line); }
.n-cal__pop .n-cal__item:last-child { border-bottom: 0; padding-bottom: 2px; }
.n-cal__pop .n-cal__time { color: var(--green-700); }
.n-cal__pop .n-cal__where { color: var(--muted); }
.n-cal__pop .n-cal__go { grid-row: auto; grid-column: 2; color: var(--green-700); font-weight: 700; }
.n-cal__pop .n-cal__empty { padding: 6px 0 2px; color: var(--muted); }

.n-cal__side { padding-top: 6px; }
.n-eps--tight { margin-top: 12px; }
.n-eps--tight .n-ep { padding: 12px 0; }
.n-cal__note { margin: 14px 0 0; font-size: var(--size-fine); color: var(--n-faint); }

@media (max-width: 720px) {
  .n-cal--compact { grid-template-columns: 1fr; }
  .n-cal--compact .n-cal__day { min-height: 46px; padding: 4px 2px; align-items: center; justify-content: center; }
  /* Chips become dots; the button's label still names the gatherings. */
  .n-cal__chips { flex-direction: row; justify-content: center; width: auto; gap: 3px; }
  .n-cal__chip { width: 6px; height: 6px; padding: 0; border-radius: 50%; font-size: 0; }
  .n-cal__pop { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto !important; width: auto; z-index: 70; }
  .n-cal__todaybtn { padding: 0 10px; }
}

/* ---------------------------------------------------------
   Round six. Three titled points on About, the venue photograph
   on Gatherings, a Mixlr link on the on-air cards, the map and
   the nations behind "A city without walls", the Missions
   Conference band on paper, and the lead pastor.
   --------------------------------------------------------- */

.n-points { display: grid; gap: 22px; }
.n-point__title {
  font-family: "Archivo", var(--font-sans);
  font-weight: 800;
  font-size: clamp(17px, 1.6vw, 20px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.n-venue { margin: clamp(28px, 4vw, 44px) 0 0; }
.n-venue img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

.n-gather__go {
  display: inline-block;
  margin-top: 14px;
  font-family: "Archivo", var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.n-gather__go:hover { color: var(--paper); }
.n-cal__note-in, .n-ep__note { font-weight: 400; opacity: 0.7; }

/* A city without walls: the world, faintly, behind the copy. */
.n-band--map { position: relative; overflow: hidden; }
.n-band--map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/world-dots.svg") center / min(1400px, 130%) no-repeat;
  opacity: 0.22;
  pointer-events: none;
}
.n-band--map > * { position: relative; }
.n-band--map.n-band { padding-bottom: 0; }
.n-flags {
  margin-top: clamp(40px, 6vw, 72px);
  padding: 18px 0;
  border-top: 1px solid var(--n-line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.n-flags__track { display: flex; width: max-content; animation: n-marquee 180s linear infinite; }
.n-flags__run { display: flex; gap: 14px; padding-right: 14px; font-size: 26px; line-height: 1; }
.n-flags__run span { display: inline-block; }
.n-flags.is-still .n-flags__track { animation: none; width: auto; }
.n-flags.is-still .n-flags__run { flex-wrap: wrap; row-gap: 10px; }
@keyframes n-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .n-flags__track { animation: none; } }

.n-conf--paper .n-conf__year { color: var(--ink); opacity: 0.1; }
.n-conf--paper .n-conf__soon { border-color: var(--ink); color: var(--ink); }

/* Our lead pastor: the photograph carries the band, the copy sits on the right. */
.n-pastor {
  position: relative;
  background: var(--n-ink);
  color: var(--paper);
  overflow: hidden;
}
.n-pastor__media { position: absolute; inset: 0; }
.n-pastor__media img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 30%; display: block; }
.n-pastor__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,18,51,.15) 0%, rgba(11,18,51,.55) 45%, rgba(11,18,51,.92) 70%),
    linear-gradient(0deg, rgba(11,18,51,.6), transparent 40%);
}
.n-pastor__body {
  position: relative;
  min-height: clamp(520px, 60vw, 720px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding-top: clamp(56px, 9vw, 110px);
  padding-bottom: clamp(56px, 9vw, 110px);
}
.n-pastor__copy { max-width: 520px; }
.n-pastor__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 760px) {
  .n-pastor__media { position: relative; height: 72vw; }
  .n-pastor__media img { object-position: 50% 20%; }
  .n-pastor__media::after { background: linear-gradient(0deg, var(--n-ink), transparent 45%); }
  .n-pastor__body { min-height: 0; padding-top: 0; align-items: stretch; margin-top: -40px; }
  .n-band--map::before { opacity: 0.12; background-size: 170%; }
}