/* ==========================================================================
   blocks.css — every section type the page builder can place.

   One file, loaded on every page, because a block can now be moved to any
   page. It is the old css/pages/*.css files merged in the order they used to
   load, plus the blocks that came with the page builder. Each block's rules
   stay in their own section below; nothing was rewritten in the move.

   Shared furniture — header, mobile menu, footer, buttons — is still in
   style.css. Tokens, type and layout primitives are still in base.css.
   ========================================================================== */


/* ==========================================================================
   Hero, service strip, sermon series, Q&A grid and the call-to-action band.
   ========================================================================== */

/* --- Hero — the only full-bleed photograph on the site ------------------ */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:min(760px,100svh);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:var(--white);
  background:var(--navy-deep);
}

/* The photograph, on its own layer so it can hang back as the page scrolls
   (js/modules/parallax.js). Inset past the hero top and bottom: that margin
   is the room the drift travels into, so no edge is ever exposed. Sits behind
   the hero's content but in front of its background — z-index:-1 is safe here
   because .hero isolates its own stacking context. */
.hero__layer{
  position:absolute;
  inset:-20% 0;
  z-index:-1;
  background:var(--navy-deep);
  will-change:transform;
}
/* The photograph is an <img> rather than a background image, so the church can
   swap it from CloudCannon: a background would have to be an inline style, and
   the Content-Security-Policy forbids those. srcset still hands a phone the
   44KB file instead of the 102KB one. */
.hero__layer img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 32%;
}
@media (prefers-reduced-motion:reduce){
  .hero__layer{transform:none!important}
}
.hero::before,
.hero::after{content:"";position:absolute;inset:0;z-index:0}
.hero::before{
  background:linear-gradient(180deg,
    rgba(11,26,44,.6) 0%,rgba(11,26,44,.32) 34%,
    rgba(11,26,44,.8) 78%,rgba(11,26,44,.94) 100%);
}
.hero::after{background:linear-gradient(96deg,rgba(13,75,96,.5) 0%,rgba(13,75,96,0) 62%)}

.hero__inner{
  position:relative;
  z-index:1;
  width:var(--wrap);
  margin-inline:auto;
  /* Clears the slab, which hangs over the top-left of the photograph. */
  padding-block:calc(var(--header-clear) + clamp(40px,5vw,74px)) clamp(36px,4.4vw,50px);
}
.hero h1{max-width:15ch}
.hero__text{
  max-width:50ch;
  margin-top:clamp(18px,2.6vw,26px);
  font-size:clamp(16px,2vw,18.5px);
  line-height:1.66;
  font-weight:500;
  color:rgba(255,255,255,.82);
  text-wrap:pretty;
}
.hero .btn{min-height:56px}

/* --- Service strip — countdown, or a live banner during the service ----- */
.service-strip{
  position:relative;
  z-index:1;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(9,22,38,.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.service-strip__inner{
  width:var(--wrap);
  margin-inline:auto;
  min-height:98px;
  padding-block:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(18px,3vw,34px);
  flex-wrap:wrap;
}
.service-strip [hidden]{display:none!important}

.countdown{display:flex;align-items:center;gap:clamp(16px,3vw,30px);flex-wrap:wrap}
.countdown__label{
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:800;
  color:rgba(255,255,255,.52);
}
.countdown__clock{display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:clamp(14px,2.6vw,22px)}
.countdown__num{
  display:block;
  font-size:clamp(25px,4vw,31px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.countdown__unit{
  display:block;
  margin-top:7px;
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:rgba(255,255,255,.5);
}
.countdown__clock > div:last-child .countdown__num{color:var(--aqua)}

.service-strip__link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding-bottom:5px;
  border-bottom:2px solid rgba(236,114,90,.9);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--white);
}
.service-strip__link:hover{color:var(--coral)}

.live{display:flex;align-items:center;gap:16px}
.live__dot{
  width:11px;height:11px;
  border-radius:50%;
  background:var(--coral);
  flex:0 0 auto;
  animation:pulse 2s ease-out infinite;
}
.live__kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--aqua)}
.live__title{margin-top:5px;font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.035em}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(236,114,90,.7)}
  70%{box-shadow:0 0 0 11px rgba(236,114,90,0)}
  100%{box-shadow:0 0 0 0 rgba(236,114,90,0)}
}

/* --- Current series ----------------------------------------------------- */
.series__art{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.44);
}
.series__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.series__tagline{
  margin-top:14px;
  font-size:clamp(16px,2vw,18px);
  font-weight:600;
  color:var(--aqua);
}
.series__dates{
  margin-top:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--coral);
}

/* --- "What to expect" cards --------------------------------------------- */
.qa{
  margin-top:clamp(36px,5vw,56px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.2vw,24px);
}
.qa__item{
  min-width:0;
  background:var(--white);
  border-radius:var(--radius);
  padding:clamp(24px,3vw,32px) clamp(20px,2.6vw,26px);
  box-shadow:var(--shadow-sm);
}
.qa__q{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--faint)}
.qa__a{
  margin-top:14px;
  font-size:clamp(28px,3.6vw,35px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:800;
}
.qa__text{margin-top:14px;font-size:14.5px;line-height:1.64;font-weight:500;color:rgba(23,44,77,.62)}
.qa__item:nth-child(1) .qa__a{color:var(--teal)}
.qa__item:nth-child(2) .qa__a{color:var(--aqua)}
.qa__item:nth-child(3) .qa__a{color:var(--coral)}
.qa__item:nth-child(4) .qa__a{color:var(--navy)}
@media (max-width:1000px){.qa{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.qa{grid-template-columns:minmax(0,1fr)}}

/* --- Give band ---------------------------------------------------------- */
.give{padding-block:clamp(60px,8vw,96px);background:var(--aqua);color:var(--white)}
.give__inner{
  width:var(--wrap);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(28px,4vw,48px);
  flex-wrap:wrap;
}
.give h2{max-width:20ch}
.give__text{
  margin-top:16px;
  max-width:46ch;
  font-size:clamp(15.5px,1.9vw,16.5px);
  line-height:1.7;
  font-weight:500;
  color:rgba(255,255,255,.86);
}
.give .btn{min-height:58px}

/* ==========================================================================
   Beliefs — the numbered articles list and the leadership notice.
   ========================================================================== */

/* Two columns of flat, ruled articles — no cards. The homepage uses boxes,
   so this page deliberately does not. */
.beliefs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));
  column-gap:clamp(32px,5vw,72px);
  row-gap:clamp(28px,3.4vw,44px);
}

.belief{
  display:grid;
  gap:10px;
  padding-top:clamp(18px,2.2vw,24px);
  border-top:2px solid rgba(23,44,77,.16);
  transition:border-color var(--t)}
.belief:hover{border-top-color:var(--aqua)}

.belief__num{
  font-size:clamp(30px,4vw,46px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:800;
  color:var(--aqua);
  font-variant-numeric:tabular-nums;
}
.belief h2{
  font-size:clamp(20px,2.6vw,25px);
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:800;
}
.belief__text{margin-top:11px;font-size:15.5px;line-height:1.72;font-weight:500;color:var(--muted);max-width:44ch}

/* --- Page header ------------------------------------------------------- */
.page-header--index{
  padding-block:calc(var(--header-clear) + clamp(34px,4.4vw,62px)) clamp(44px,5vw,68px);
}
.page-header--index .page-header__inner{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,72px);
  align-items:end;
}
.page-header--index .h1{font-size:clamp(38px,5.4vw,84px);line-height:.9}
.page-header--index .lead{margin-top:0;padding-bottom:8px;max-width:40ch}
/* A rule down the inside edge, so the lead reads as a note against the
   headline rather than a second column of body copy. */
@media (min-width:821px){
  .page-header--index .lead{padding-left:30px;border-left:2px solid rgba(102,186,186,.5)}
}
@media (max-width:820px){
  .page-header--index .page-header__inner{grid-template-columns:minmax(0,1fr);align-items:start}
  .page-header--index .lead{margin-top:22px;padding-bottom:0}
}

/* ==========================================================================
   Staff — a portrait beside a biography.
   ========================================================================== */

.staff__person{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,4vw,46px);
  align-items:center;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.staff__person img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.staff__copy{padding:clamp(22px,3vw,36px) clamp(24px,3.2vw,42px) clamp(22px,3vw,36px) 0}
.staff__role{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--coral);
}
.staff__copy h2{
  margin-top:9px;
  font-size:clamp(26px,3.6vw,38px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:800;
}
.staff__bio{margin-top:14px;font-size:15.5px;line-height:1.72;font-weight:500;color:var(--muted)}

.chip{
  display:inline-block;
  margin-top:15px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(236,114,90,.12);
  color:#b64c37;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

@media (max-width:800px){
  .staff__person{grid-template-columns:minmax(0,1fr)}
  .staff__copy{padding:0 clamp(22px,5vw,32px) clamp(26px,5vw,34px)}
}

/* Both pastors share one entry. Deliberately not a card — a tall framed
   portrait beside a narrow column of type. Must come after the base rules:
   same specificity, so source order decides. */
.staff__person--pair{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,72px);
  align-items:center;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
.staff__person--pair img{
  height:auto;
  aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.staff__person--pair .staff__copy{padding:0;max-width:46ch}
.staff__person--pair .staff__copy h2{margin-top:12px;font-size:clamp(30px,4.4vw,50px)}
.staff__person--pair .staff__bio + .staff__bio{margin-top:14px}

@media (max-width:800px){
  .staff__person--pair{grid-template-columns:minmax(0,1fr);gap:26px}
  .staff__person--pair img{aspect-ratio:4/3}
  .staff__person--pair .staff__copy{padding:0}
}

/* --- Page header ------------------------------------------------------- */
.page-header--portrait{
  padding-block:calc(var(--header-clear) + clamp(26px,3.2vw,44px)) clamp(40px,5vw,64px);
}
.page-header--portrait .h1{max-width:22ch;font-size:clamp(40px,6.4vw,78px);line-height:.9}
.page-header--portrait .lead{max-width:52ch}

/* ==========================================================================
   Contact — the navy band, the three details, and the form card
   that lifts over the join between them.
   ========================================================================== */

/* --- The band the header sits on ---------------------------------------
   No headline and no lead paragraph: the form is the page, so nothing gets
   between a visitor and it. The details rule clears the slab's bottom edge
   by --details-air; the rule runs under the slab for most of its length, so
   it needs the daylight to read as its own thing. */
.contact-band{
  --details-air:34px;
  background:linear-gradient(158deg,var(--navy-deep),var(--navy) 48%,var(--teal));
  color:var(--white);
  padding:calc(var(--header-clear) + var(--details-air)) 0 92px;
}

.contact-details{
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.18);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
}

.contact-detail{color:var(--white)}
.contact-detail__label{
  display:block;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--aqua);
}
.contact-detail__value{
  display:block;
  margin-top:12px;
  font-size:20px;
  line-height:1.35;
  letter-spacing:-.02em;
  font-weight:800;
  text-wrap:pretty;
  transition:color var(--t);
}
.contact-detail:hover{color:var(--white)}
.contact-detail:hover .contact-detail__value{color:var(--aqua)}

/* --- The form card ------------------------------------------------------
   Pulled up over the bottom edge of the band so the two read as one move. */
.contact-form{background:var(--mist);padding:0 0 88px}
.form-card{
  position:relative;
  z-index:2;
  width:min(900px,100%);
  margin:-56px auto 0;
  padding:44px 52px 48px;
  background:var(--white);
  border-radius:24px;
  box-shadow:0 34px 74px rgba(23,44,77,.2);
}

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

/* The fields are their own list so the church can add and reorder them. It
   spans the form's grid and repeats it, which is what keeps a half-width
   field half-width and .field--full spanning, exactly as before. */
.form__fields{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.field{display:grid;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  color:rgba(23,44,77,.5);
}
.field input,
.field select,
.field textarea{
  width:100%;
  min-height:54px;
  padding:14px 16px;
  border:1.5px solid rgba(23,44,77,.14);
  border-radius:13px;
  background:var(--mist);
  color:var(--ink);
  font-family:inherit;
  font-size:15.5px;
  font-weight:500;
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.field textarea{min-height:160px;resize:vertical;line-height:1.6}
.field input::placeholder,
.field textarea::placeholder{color:rgba(23,44,77,.38)}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:var(--white);
  border-color:var(--aqua);
  box-shadow:0 0 0 4px rgba(102,186,186,.2);
}
.field input:user-invalid,
.field textarea:user-invalid{
  border-color:var(--coral);
  box-shadow:0 0 0 4px rgba(236,114,90,.16);
}

/* Honeypot. Positioned off-screen rather than display:none, because some
   bots skip hidden inputs but happily fill an off-screen one. */
.honeypot{
  position:absolute!important;
  left:-9999px!important;
  width:1px;height:1px;
  overflow:hidden;
}

.form__actions{
  grid-column:1/-1;
  margin-top:6px;
  display:flex;
  justify-content:flex-end;
}
.form__send{min-height:56px;padding-inline:34px}

.form__status{
  grid-column:1/-1;
  padding:15px 19px;
  border-radius:13px;
  font-size:14px;
  font-weight:700;
  line-height:1.6;
}
.form__status[hidden]{display:none}
.form__status--ok{background:rgba(102,186,186,.16);color:#0b4a4a}
.form__status--error{background:rgba(236,114,90,.14);color:#a8402a}

/* --- Mobile -------------------------------------------------------------
   The band is header only and the card is the first thing on the page. The
   address, phone and email are in the footer, so the details row would only
   be saying it twice. */
@media (max-width:1023px){
  .contact-band{
    background:linear-gradient(160deg,var(--navy-deep),var(--navy) 50%,var(--teal));
    padding:var(--header-clear) 0 78px;
  }
  .contact-details{display:none}

  .contact-form{padding:0 18px 40px}
  .form-card{
    margin-top:-48px;
    padding:26px 22px 28px;
    border-radius:22px;
    box-shadow:0 26px 56px rgba(23,44,77,.22);
  }
  .form{grid-template-columns:minmax(0,1fr);gap:16px}
  .field label{font-size:10.5px}
  .field textarea{min-height:132px}

  .form__send{width:100%}
}

/* ==========================================================================
   Error — 404. Typographic, no photograph: the numeral takes its
   own column and the copy sits beside it.
   ========================================================================== */

.error-page{
  padding-block:calc(var(--header-clear) + clamp(30px,3.6vw,56px)) clamp(56px,7vw,100px);
  background:linear-gradient(158deg,var(--navy-deep),var(--navy) 48%,var(--teal));
  color:var(--white);
}
.error-page__inner{
  width:var(--wrap);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(32px,4vw,56px);
  align-items:center;
}
.error-page__code{
  font-size:clamp(120px,17vw,260px);
  line-height:.78;
  letter-spacing:-.075em;
  font-weight:900;
  color:rgba(255,255,255,.1);
}
.error-page .eyebrow{color:var(--aqua)}
.error-page h1{
  font-size:clamp(34px,4.6vw,54px);
  line-height:.98;
  letter-spacing:-.045em;
}
.error-page .lead{max-width:46ch;color:rgba(255,255,255,.76)}


/* ==========================================================================
   Page-builder additions.

   Everything below arrived with the block library: the shapes a block needs
   when it can be placed on any page, in any order, by someone who is not
   editing CSS.
   ========================================================================== */

/* --- Rich text ---------------------------------------------------------- */
/* Body copy typed in CloudCannon comes back as paragraphs, lists and links
   rather than a single <p class="lead">. This gives that markup the same
   measure and rhythm the hand-written copy had. */
.rich > p{
  margin-top:22px;
  max-width:56ch;
  font-size:clamp(16px,1.9vw,17.5px);
  line-height:1.72;
  font-weight:500;
  color:var(--muted);
  text-wrap:pretty;
}
.rich > p + p{margin-top:16px}
.rich > p:first-child{margin-top:22px}
.rich > ul,
.rich > ol{
  margin-top:16px;
  padding-left:1.15em;
  max-width:56ch;
  font-size:clamp(16px,1.9vw,17.5px);
  line-height:1.72;
  font-weight:500;
  color:var(--muted);
}
.rich > ul li + li,
.rich > ol li + li{margin-top:8px}
.rich a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.rich strong{font-weight:800;color:var(--ink)}
/* Inside a belief and a biography the surrounding rule already sets the type,
   so the paragraphs only need their spacing. */
.belief__text.rich > p,
.staff__bio.rich > p{margin-top:0;font-size:inherit;line-height:inherit;color:inherit;max-width:none}
.belief__text.rich > p + p,
.staff__bio.rich > p + p{margin-top:14px}
.rich--prose{margin-top:clamp(20px,3vw,30px)}

/* --- Split, either way round -------------------------------------------- */
/* The photo half is first in the markup so it reads first without CSS; this
   is what puts it on the right when the block asks for it. */
.split--reverse > :first-child{order:2}

/* --- Several people ------------------------------------------------------ */
.staff__people{display:grid;gap:clamp(26px,4vw,44px)}

/* --- Gallery ------------------------------------------------------------- */
.gallery{
  display:grid;
  gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(26px,3.6vw,44px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:760px){
  .gallery--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.gallery--1{grid-template-columns:minmax(0,1fr)}
.gallery__item{
  margin:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--mist);
  box-shadow:var(--shadow-sm);
}
/* One picture allowed to take the full width of the row it lands in. */
.gallery__item--wide{grid-column:span 2}
.gallery__item img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.gallery__item figcaption{
  padding:12px 16px 14px;
  font-size:13.5px;
  line-height:1.5;
  font-weight:600;
  color:var(--muted);
}

/* --- Video --------------------------------------------------------------- */
.video{
  position:relative;
  margin-top:clamp(26px,3.6vw,44px);
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--navy-deep);
  box-shadow:var(--shadow-sm);
}
.video__player,
.video__frame{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
}
/* The link-out card: a poster, a play badge, and the reason to click. */
.video__link{display:block;position:relative;color:var(--white);text-decoration:none}
.video__link img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.72;transition:opacity var(--t)}
.video__link:hover img,
.video__link:focus-visible img{opacity:.86}
.video__play{
  position:absolute;
  inset:0;
  margin:auto;
  width:clamp(58px,7vw,78px);
  height:clamp(58px,7vw,78px);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow-sm);
}
/* The triangle, drawn rather than shipped as an asset. */
.video__play::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:0;
  height:0;
  border-style:solid;
  border-width:12px 0 12px 19px;
  border-color:transparent transparent transparent var(--navy-deep);
  transform:translateX(3px);
}
.video__link-text{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:clamp(16px,2.4vw,26px);
  font-size:clamp(15px,1.8vw,17px);
  font-weight:800;
  letter-spacing:-.01em;
  background:linear-gradient(180deg,rgba(11,26,44,0),rgba(11,26,44,.72));
}
.video__caption{
  margin-top:14px;
  font-size:14px;
  line-height:1.6;
  font-weight:600;
  color:var(--muted);
}

/* --- Rich text and captions on a dark ground ---------------------------- */
/* base.css lightens .lead when it sits on a navy section. Rich text renders
   its own paragraphs rather than a .lead, and the gallery and video captions
   arrived with the block library, so each needs the same treatment — without
   it they are dark grey on navy, which is to say invisible. */
.section--navy .rich > p,
.section--navy .rich > ul,
.section--navy .rich > ol,
.section--navy .video__caption{color:rgba(255,255,255,.72)}
.section--navy .rich strong{color:var(--white)}
.section--navy .rich a{color:var(--aqua)}

/* Two blocks are cards — the people entry and the gallery keep their own pale
   ground whatever the section behind them is doing. Their type has to keep its
   own colour with it, or it inherits the white meant for the navy outside the
   card and vanishes into the card instead. */
.section--navy .staff__person:not(.staff__person--pair){color:var(--ink)}
.section--navy .staff__person:not(.staff__person--pair) .staff__bio{color:var(--muted)}
/* The pair layout is deliberately uncarded, so it does sit on the navy and
   takes the light copy like everything else there. */
.section--navy .staff__person--pair .staff__bio{color:rgba(255,255,255,.72)}

/* --- Photo shapes -------------------------------------------------------- */
/* base.css defines figure--4x3, which is the default. These are the other
   shapes the Photo and text block offers, so the crop is an editor's choice
   rather than a constant in the markup. */
.figure--1x1{aspect-ratio:1/1}
.figure--3x2{aspect-ratio:3/2}
.figure--16x9{aspect-ratio:16/9}
.figure--4x5{aspect-ratio:4/5}
.figure--free{aspect-ratio:auto}
.figure--free img{height:auto}