/* =========================================================================
   DON ORIONE KENYA — Delegation "Our Lady of the Rosary"
   Shared stylesheet. One file for the whole site.
   Sections:  1 Tokens · 2 Reset · 3 Typography · 4 Layout · 5 Header
              6 Footer · 7 Components · 8 Home · 9 Map · 10 Pages
              11 News · 12 Motion · 13 Responsive · 14 Print
   ========================================================================= */

/* ===== 1. TOKENS ======================================================== */
:root {
  /* Palette */
  --ivory:       #FAF7F0;
  --ivory-deep:  #F3EEE3;
  --gold:        #B8912A;
  --gold-dark:   #8F6F1E;
  --gold-pale:   #E8DCBF;
  --kenya-green: #1F6E43;
  --kenya-red:   #A6212C;
  --orione-red:  #C1272D;   /* the red of the "Instaurare omnia in Christo" emblem */
  --orione-red-soft: #D9555A; /* legible red on dark backgrounds */
  --ink:         #26211A;
  --ink-soft:    #5A5147;
  --rule:        rgba(184, 145, 42, 0.35);

  /* Type */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:    "Lora", Georgia, "Times New Roman", serif;
  --ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale */
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: 2.25rem;
  --step-5: 3rem;

  /* Space */
  --gap:      1rem;
  --gap-lg:   2rem;
  --section:  4.5rem;
  --measure:  68ch;
  --wrap:     1180px;
  --wrap-narrow: 760px;
}

/* ===== 2. RESET ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-dark); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--kenya-green); }
:focus-visible {
  outline: 2px solid var(--kenya-green);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--ivory); padding: .75rem 1.25rem;
  font-family: var(--ui); font-size: .85rem;
}
.skip-link:focus { left: 0; }

/* Hidden from sight, still read by screen readers. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ===== 3. TYPOGRAPHY ==================================================== */
h1, h2, h3, h4 {
  font-family: var(--display);
  /* 500, not 700: at display sizes Cormorant at 700 reads as a shout.
     Small headings (h4) keep 600 because at 1rem 500 goes thin. */
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 .6em;
  letter-spacing: .005em;
}
h1 { font-size: var(--step-5); font-weight: 500; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-weight: 600; }
p  { margin: 0 0 1.15em; max-width: var(--measure); }
strong { font-weight: 600; }
blockquote { margin: 0; }
ul, ol { max-width: var(--measure); padding-left: 1.2rem; }
li { margin-bottom: .45em; }

/* Eyebrow: letterspaced small caps label */
.eyebrow::before {
  content: ""; display: inline-block; width: 1.35rem; height: 2px;
  background: var(--orione-red); margin-right: .55rem; vertical-align: middle;
  transform: translateY(-1px);
}
.hero .eyebrow::before, .comhero .eyebrow::before, .pagehero .eyebrow::before { background: var(--orione-red-soft); }
.eyebrow {
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 .9rem;
  display: block;
}
.eyebrow--light { color: var(--gold-pale); }

/* ===== SIGNATURE: THE DOUBLE GOLD RULE =================================
   Two 1px gold lines, 4px apart. Used under every page title and section
   heading across the whole site. Do not change — it is the site's mark.  */
.rule-double {
  border: 0;
  height: 6px;
  width: 90px;
  margin: 0 0 1.6rem;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 100% 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 100% 1px no-repeat;
}
.rule-double--center { margin-left: auto; margin-right: auto; }
.rule-double--wide  { width: 100%; }
.rule-double--light {
  background:
    linear-gradient(var(--gold-pale), var(--gold-pale)) top left / 100% 1px no-repeat,
    linear-gradient(var(--gold-pale), var(--gold-pale)) bottom left / 100% 1px no-repeat;
}

/* ===== 4. LAYOUT ======================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding: var(--section) 0; }
.section--pale { background: var(--gold-pale); }
.section--deep { background: var(--ivory-deep); }
.section--ink  { background: var(--ink); color: var(--ivory); }
.section--ink h2, .section--ink h3 { color: var(--ivory); }
.section-head { margin-bottom: 2.5rem; }
.section-head p { color: var(--ink-soft); }
.lede { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.75; }

.grid { display: grid; gap: var(--gap-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ===== 5. HEADER ======================================================== */
.topbar {
  background: var(--ink);
  color: var(--gold-pale);
  text-align: center;
  padding: .55rem 1rem;
}
.topbar p {
  margin: 0; max-width: none;
  font-family: var(--display);
  font-style: italic;
  font-size: .95rem;
  color: var(--gold);
}
.topbar cite {
  font-family: var(--ui);
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  filter: brightness(1.6);
  margin-left: .6rem;
}

.masthead {
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 1.25rem;
  max-width: var(--wrap); margin: 0 auto;
}
.wordmark { display: flex; align-items: center; gap: .7rem; }
.wordmark:hover { color: inherit; }
.wordmark__mark { width: 38px; height: 38px; flex: none; }
/* The emblem "Perf. Instaurare omnia in Christo" used as the site logo */
img.wordmark__mark { width: auto; height: 46px; object-fit: contain; }
.wordmark__text { display: block; }
.wordmark__name {
  font-family: var(--display); font-weight: 700; font-size: 1.4rem;
  color: var(--ink); line-height: 1.05; display: block;
}
.wordmark__sub {
  font-family: var(--ui); font-size: .58rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dark); display: block; margin-top: .18rem;
}

.nav { font-family: var(--ui); font-size: .82rem; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; max-width: none; }
.nav__list li { margin: 0; position: relative; }
.nav__link {
  display: block; padding: .55rem .7rem; color: var(--ink);
  letter-spacing: .04em; border-bottom: 2px solid transparent;
  background: none; border-top: 0; border-left: 0; border-right: 0;
  font: inherit; cursor: pointer; text-decoration: none;
}
.nav__link:hover { color: var(--gold-dark); }
.nav__link[aria-current="page"], .nav__link.is-active {
  color: var(--gold-dark); border-bottom-color: var(--gold);
}
.nav__caret { font-size: .55em; margin-left: .3em; vertical-align: middle; }

.nav__sub {
  list-style: none; margin: 0; padding: .4rem 0;
  position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--ivory); border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  box-shadow: 0 12px 30px rgba(38,33,26,.10);
  display: none;
}
.nav__item.is-open .nav__sub { display: block; }
.nav__sub a { display: block; padding: .5rem .95rem; color: var(--ink); }
.nav__sub a:hover { background: var(--gold-pale); color: var(--gold-dark); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  padding: .5rem .7rem; cursor: pointer; font-family: var(--ui);
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
}

/* ===== 6. FOOTER ======================================================== */
.footer { background: var(--ink); color: #CFC6B6; margin-top: auto; }
.footer a { color: var(--gold-pale); }
.footer a:hover { color: var(--gold); }
.footer__inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2.5rem;
  padding: 3.5rem 1.25rem 2.5rem; max-width: var(--wrap); margin: 0 auto;
}
.footer h2 {
  font-size: 1.05rem; color: var(--gold-pale); font-family: var(--ui);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer p { font-size: .88rem; line-height: 1.65; }
.footer__motto { color: var(--orione-red-soft) !important; }
.footer__motto {
  font-family: var(--display); font-style: italic; font-size: 1.25rem;
  color: var(--gold);
}
.footer__list { list-style: none; margin: 0; padding: 0; font-family: var(--ui); font-size: .85rem; }
.footer__list li { margin-bottom: .5rem; }
.footer__red { color: var(--orione-red-soft); filter: brightness(1.45); font-style: italic; font-family: var(--display); font-size: 1rem; }
.footer__legal {
  border-top: 1px solid rgba(232,220,191,.18);
  padding: 1.2rem 1.25rem; text-align: center;
  font-family: var(--ui); font-size: .72rem; color: #9A9184;
}
.footer__legal--split {
  border-top: 0; max-width: var(--wrap); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; text-align: left; padding: 1.4rem 1.25rem 1.6rem;
}
.footer__legal--split p { margin: 0; }
@media (max-width: 620px) { .footer__legal--split { justify-content: center; text-align: center; } }
/* Kenya flag tricolor line — always the last thing on the page */
.flagline { height: 3px; display: flex; }
.flagline span { flex: 1; }
.flagline span:nth-child(1) { background: #000000; }
.flagline span:nth-child(2) { background: var(--kenya-red); }
.flagline span:nth-child(3) { background: var(--kenya-green); }

.footer__paren { font-weight: 400; opacity: .85; }

/* ===== 7. COMPONENTS =================================================== */
.btn {
  display: inline-block; font-family: var(--ui); font-size: .8rem;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: .85rem 1.6rem; border: 1px solid var(--gold); color: var(--gold-dark);
  background: transparent; cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover { background: var(--gold); color: var(--ivory); border-color: var(--gold); }
.btn--light { border-color: var(--gold); color: var(--gold-pale); }
.btn--light:hover { background: var(--gold); color: var(--ink); }
.btn--solid { background: var(--gold); color: #fff; }
.btn--solid:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }

.tag {
  display: inline-block; font-family: var(--ui); font-size: .62rem;
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: .3rem .6rem; border: 1px solid currentColor;
}
.tag--parish    { color: var(--gold-dark); }
.tag--formation { color: var(--kenya-green); }
.tag--project   { color: var(--kenya-red); }

.card {
  background: #fff; border: 1px solid var(--rule);
  display: flex; flex-direction: column; height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(38,33,26,.10); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gold-pale); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card__meta {
  font-family: var(--ui); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-dark); margin-bottom: .6rem;
}
.card__title { font-size: 1.4rem; margin-bottom: .5rem; }
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--gold-dark); }
.card__text { font-size: .92rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.card__more {
  font-family: var(--ui); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; margin-top: auto; align-self: flex-start;
}

.infobox {
  background: #fff; border-left: 3px solid var(--gold);
  padding: 1.6rem 1.8rem; margin: 2.5rem 0;
}
.infobox h3 { font-size: 1.3rem; }
.infobox dl { margin: 0; font-family: var(--ui); font-size: .88rem; }
.infobox dt { font-weight: 500; color: var(--gold-dark); letter-spacing: .06em; margin-top: .8rem; }
.infobox dd { margin: .15rem 0 0; color: var(--ink); }

.pullquote {
  margin: 3rem 0; padding: 2rem 0;
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  text-align: center;
}
.pullquote p {
  font-family: var(--display); font-style: italic; font-size: var(--step-3);
  line-height: 1.35; color: var(--gold-dark); max-width: 26ch; margin: 0 auto .6rem;
}
.pullquote cite {
  font-family: var(--ui); font-style: normal; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}

.storyquote {
  background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--kenya-green);
  padding: 2rem 2rem 1.6rem; margin: 2.5rem 0;
}
.storyquote h3 { font-size: 1.3rem; color: var(--kenya-green); }
.storyquote p:last-child { margin-bottom: 0; }

.prayerbox {
  border: 1px solid var(--gold); border-left-width: 4px;
  background: #fff; padding: 2rem 2rem 1.5rem; margin: 2.5rem 0;
}
.prayerbox p { font-family: var(--display); font-size: 1.3rem; line-height: 1.5; font-style: italic; }
.prayerbox p:last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin: 2rem 0; }
table { border-collapse: collapse; width: 100%; font-family: var(--ui); font-size: .9rem; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--rule); }
thead th {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dark); border-bottom: 2px solid var(--gold);
}
tbody tr:hover { background: var(--ivory-deep); }

/* Page hero band (all inner pages) */
.pagehero { background: var(--ivory-deep); border-bottom: 1px solid var(--rule); padding: 3.5rem 0 3rem; }
.pagehero h1 { margin-bottom: .5rem; }
.pagehero .lede { max-width: 62ch; margin-bottom: 0; }
.pagehero__meta {
  font-family: var(--ui); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0;
}

/* Community hero with image — fixed 3:1 banner (not viewport-based) */
.comhero { position: relative; background: var(--ink); }
.comhero__img {
  width: 100%; aspect-ratio: 3 / 1; height: auto; min-height: 220px;
  object-fit: cover; opacity: .8;
}
.comhero__body {
  position: absolute; inset: auto 0 0 0; padding: 2rem 0;
  background: linear-gradient(to top, rgba(38,33,26,.92), rgba(38,33,26,0));
}
.comhero h1 { color: var(--ivory); margin-bottom: .3rem; }
.comhero__meta {
  font-family: var(--ui); font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-pale); margin: 0;
}

/* Gallery grid — click a photo to open the lightbox viewer */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 2rem 0; }
.gallery img {
  aspect-ratio: 4/3; object-fit: cover; width: 100%; border: 1px solid var(--rule);
  cursor: zoom-in; transition: opacity .25s ease;
}
.gallery img:hover { opacity: .88; }

/* ===== LIGHTBOX (classic photo viewer: enlarge + side arrows) ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 17, 12, .93);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: min(92vw, 1400px); max-height: 84vh;
  width: auto; height: auto; object-fit: contain;
  border: 1px solid rgba(232,220,191,.35); box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.lightbox__caption {
  position: absolute; left: 0; right: 0; bottom: 1.4rem; text-align: center;
  font-family: var(--ui); font-size: .8rem; letter-spacing: .04em;
  color: var(--gold-pale); padding: 0 5rem;
}
.lightbox__btn {
  position: absolute; background: none; border: 1px solid rgba(232,220,191,.4);
  color: var(--gold-pale); cursor: pointer; font-family: var(--ui);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, border-color .25s ease;
}
.lightbox__btn:hover { background: rgba(184,145,42,.25); border-color: var(--gold); }
.lightbox__prev, .lightbox__next {
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
}
.lightbox__prev { left: 1.2rem; }
.lightbox__next { right: 1.2rem; }
.lightbox__close {
  top: 1.2rem; right: 1.2rem; width: 44px; height: 44px;
  border-radius: 50%; font-size: 1.15rem;
}
@media (max-width: 620px) {
  .lightbox__prev { left: .4rem; } .lightbox__next { right: .4rem; }
  .lightbox__prev, .lightbox__next { width: 42px; height: 42px; }
  .lightbox__caption { padding: 0 1rem; }
}

/* 16:9 video player (OCTC video etc.) */
.video-169 {
  width: 100%; aspect-ratio: 16 / 9; height: auto; display: block;
  background: #000; border: 1px solid var(--rule); margin: 1.5rem 0 2rem;
}

/* Prev / next navigation */
.pager {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 3rem;
  font-family: var(--ui); font-size: .8rem; letter-spacing: .06em;
}

/* Person card (leadership) */
.person { text-align: center; }
.person__photo {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border: 1px solid var(--rule); margin-bottom: 1rem;
}
.person h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.person p {
  font-family: var(--ui); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-dark); margin: 0 auto; max-width: none;
}

/* Timeline */
.timeline { list-style: none; padding: 0 0 0 2rem; margin: 2.5rem 0; position: relative; max-width: var(--measure); }
.timeline::before { content: ""; position: absolute; left: 4px; top: .4rem; bottom: .4rem; width: 1px; background: var(--gold); }
.timeline li { position: relative; margin-bottom: 2rem; }
.timeline li::before {
  content: ""; position: absolute; left: -2rem; top: .45rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ivory); border: 2px solid var(--gold);
}
.timeline__year {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  color: var(--gold-dark); display: block; line-height: 1;
}
.timeline p { margin: .4rem 0 0; font-size: .95rem; }

/* Contact cards */
.contactcard { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--gold); padding: 1.6rem; }
.contactcard h3 { font-size: 1.25rem; }
.contactcard p { font-size: .9rem; margin-bottom: .4rem; }
.contactcard .tag { margin-bottom: .8rem; }

/* ===== 8. HOME ========================================================== */
.hero { position: relative; height: 85vh; min-height: 520px; background: var(--ink); overflow: hidden; }
.hero--short { height: 58vh; min-height: 380px; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(38,33,26,.30), rgba(38,33,26,.72)),
    radial-gradient(ellipse at 50% 60%, rgba(184,145,42,.28), transparent 65%);
}
.hero__body {
  position: relative; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 1.25rem;
}
.hero h1 {
  color: var(--ivory); font-size: clamp(2.4rem, 7vw, 4.6rem);
  margin: 0 0 1rem; text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero__line {
  font-family: var(--body); font-size: var(--step-1); color: var(--gold-pale);
  max-width: 34ch; margin: 0 0 2rem;
}
.hero .eyebrow::before {
  content: ""; display: inline-block; width: 1.35rem; height: 2px;
  background: var(--orione-red); margin-right: .55rem; vertical-align: middle;
  transform: translateY(-1px);
}
.hero .eyebrow::before, .comhero .eyebrow::before, .pagehero .eyebrow::before { background: var(--orione-red-soft); }
/* Light eyebrow ONLY on dark heroes — a previous global rule here made
   labels on pale sections (e.g. "Prayer of the day") invisible. */
.hero .eyebrow, .comhero .eyebrow, .pagehero .eyebrow { color: var(--gold-pale); }

.stats { text-align: center; }
.stats__num {
  font-family: var(--display); font-weight: 600; font-size: 3.4rem;
  color: var(--gold); line-height: 1; display: block; margin-bottom: .4rem;
}
.stats p { font-size: .95rem; color: var(--ink-soft); margin: 0 auto; max-width: 30ch; }

.prayer { text-align: center; }
.prayer__verse {
  font-family: var(--display); font-style: italic; font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.4; color: var(--ink); max-width: 30ch; margin: 0 auto 1rem;
}
.prayer__by {
  font-family: var(--ui); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-dark); margin: 0 auto;
}

.callband { text-align: center; }
.callband blockquote p {
  font-family: var(--display); font-style: italic;
  font-size: clamp(2rem, 5vw, 3.2rem); color: var(--ivory);
  margin: 0 auto .5rem; max-width: 20ch;
}
.callband cite {
  font-family: var(--ui); font-style: normal; font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: 2rem;
}

/* ===== 9. MAP ===========================================================
   The pale, quiet map. The basemap is CARTO "Positron" — almost no colour,
   so the ten pins are the only thing the eye lands on. The places themselves
   live in assets/js/map.js.
   ======================================================================= */
.map-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; }
#map {
  height: 62vh; min-height: 420px;
  border: 1px solid var(--rule); background: var(--ivory-deep);
}
.leaflet-container { font-family: var(--body); background: var(--ivory-deep); }
/* A LAST TOUCH OF QUIET. The tiles are already grey; this only lifts them a
   little so the pins stand out. The pins and popups are in another layer and
   are NOT affected. Paler: lower the opacity. Stronger: raise it to 1. */
.leaflet-tile-pane { filter: grayscale(1) brightness(1.04) opacity(.9); }
.leaflet-control-attribution { font-size: 9px; background: rgba(253,251,246,.8); }
.leaflet-popup-content-wrapper { border-radius: 0; box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.leaflet-popup-content { margin: .9rem 1.1rem; line-height: 1.4; }
.pop__type { display: block; font-family: var(--ui); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }
.pop__name { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 600; margin: .15rem 0; }
.pop__place { display: block; font-size: .8rem; color: var(--ink-soft); }
.pop__link { display: inline-block; margin-top: .5rem; font-family: var(--ui); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .5rem; vertical-align: -1px; }
.dot--gold { background: var(--gold); }
.dot--green { background: var(--kenya-green); }
.dot--red { background: var(--kenya-red); }

.map-list h3 { font-size: 1rem; font-family: var(--ui); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .6rem; }
.map-list ul { list-style: none; padding: 0; margin: 0 0 1.8rem; font-size: .9rem; }
.map-list li { margin-bottom: .5rem; }

/* ===== 10. ARTICLE / PROSE ============================================= */
.prose h2 { font-size: var(--step-3); margin-top: 2.5rem; }
.prose h3 { font-size: var(--step-2); margin-top: 2rem; }
.prose > h2:first-child { margin-top: 0; }
.prose figure { margin: 2.5rem 0; }
.prose figcaption {
  font-family: var(--ui); font-size: .74rem; color: var(--ink-soft);
  margin-top: .6rem; letter-spacing: .02em;
}

/* ===== 11. NEWS ======================================================== */
.livedot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--kenya-red); margin-right: .45rem; vertical-align: 1px;
}
.article__date {
  font-family: var(--ui); font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-dark); margin-bottom: .8rem;
}
.article__hero { aspect-ratio: 16/9; object-fit: cover; width: 100%; margin-bottom: 2.5rem; border: 1px solid var(--rule); }
.backlink { font-family: var(--ui); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; display: inline-block; margin-top: 2.5rem; }

/* ===== 12. MOTION ====================================================== */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition-duration: .01ms !important; }
}

/* ===== 13. RESPONSIVE ================================================== */
@media (max-width: 900px) {
  :root { --section: 3.25rem; --step-5: 2.4rem; --step-4: 1.85rem; --step-3: 1.5rem; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .map-layout { grid-template-columns: 1fr; gap: 2rem; }
  #map { height: 55vh; min-height: 340px; }
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }

  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; background: var(--ivory); z-index: 60;
    padding: 5rem 1.5rem 2rem; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s ease; font-size: 1rem;
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: .9rem .2rem; border-bottom: 1px solid var(--rule); width: 100%; text-align: left; }
  .nav__link[aria-current="page"], .nav__link.is-active { border-bottom-color: var(--gold); }
  /* Sub-menus start CLOSED on mobile and open on tap (see main.js is-open) */
  .nav__sub { position: static; display: none; border: 0; box-shadow: none; background: transparent; padding: 0 0 .5rem 1rem; }
  .nav__item.is-open .nav__sub { display: block; }
  .nav__sub a { padding: .6rem .2rem; font-size: .92rem; color: var(--ink-soft); }
  .nav__caret { font-size: .6em; margin-left: .4rem; transition: transform .2s ease; display: inline-block; }
  .nav__item.is-open .nav__caret { transform: rotate(180deg); }
  .nav-close {
    position: absolute; top: 1.1rem; right: 1.25rem; background: none;
    border: 1px solid var(--rule); font-family: var(--ui); font-size: .75rem;
    letter-spacing: .12em; text-transform: uppercase; padding: .5rem .7rem; cursor: pointer;
  }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 901px) { .nav-close { display: none; } }
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .hero { height: 88vh; }
  .topbar cite { display: block; margin: .2rem 0 0; }
  .stats__num { font-size: 2.8rem; }
}

/* ===== 14. PRINT ======================================================= */
@media print {
  .masthead, .topbar, .footer, #map, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
}

/* ===== 15. HERO CAROUSEL ================================================
   Two or more full-bleed slides that cross-fade. The first slide is the
   Christian identity of the Delegation; the others point to the works.
   To add a slide: copy one <div class="heroslide"> block in index.html.
   ======================================================================= */
.hero--carousel { position: relative; }
.heroslide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility .9s ease;
}
.heroslide.is-active { opacity: 1; visibility: visible; }
.heroslide .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroslide .hero__body { position: relative; height: 100%; }

/* Arrows */
.heroctrl {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(38,33,26,.42); border: 1px solid rgba(232,220,191,.55);
  color: var(--ivory); font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .25s ease, border-color .25s ease;
}
.heroctrl:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.heroctrl--prev { left: 1.1rem; }
.heroctrl--next { right: 1.1rem; }

/* Dots */
.herodots {
  position: absolute; left: 0; right: 0; bottom: 1.6rem; z-index: 4;
  display: flex; gap: .55rem; justify-content: center;
}
.herodots button {
  width: 34px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(250,247,240,.38); transition: background .25s ease;
}
.herodots button.is-active { background: var(--gold); }

/* ===== 16. NEWS RAIL (horizontal news carousel on the home page) =========
   Three cards visible at a time on desktop, one on a phone. Scroll-snap
   does the work; the arrows just scroll by one screenful.
   ======================================================================= */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rail-head .section-head { margin-bottom: 1.6rem; }
.railctrls { display: flex; gap: .5rem; margin-bottom: 1.9rem; }
.railctrl {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent; color: var(--gold-dark);
  font-size: 1rem; cursor: pointer; display: grid; place-items: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.railctrl:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.railctrl[disabled] { opacity: .3; cursor: default; }
.railctrl[disabled]:hover { background: transparent; color: var(--gold-dark); border-color: var(--rule); }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap-lg)) / 3);
  gap: var(--gap-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .6rem;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > .card { scroll-snap-align: start; }

@media (max-width: 900px) {
  .rail { grid-auto-columns: 78%; }
  .heroctrl { width: 38px; height: 38px; }
  .heroctrl--prev { left: .5rem; }
  .heroctrl--next { right: .5rem; }
}
@media (max-width: 620px) {
  .rail { grid-auto-columns: 86%; }
}

/* ===== 17. WORKS GRID (Our projects and activities in Kenya) ============ */
.worknote {
  border-left: 3px solid var(--gold);
  padding: .2rem 0 .2rem 1.1rem;
  margin-top: 2.6rem;
}
.worknote p { margin-bottom: .4em; }
.worknote .eyebrow { margin-bottom: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .heroslide { transition: none; }
  .rail { scroll-behavior: auto; }
}

/* ===== 18. SPLIT HERO (home page + inner pages) =========================
   The new editorial hero: PHOTOGRAPH ON ONE SIDE, TEXT ON THE OTHER — never
   text printed over a photograph. On a phone it stacks: photo on top, words
   underneath. Two different photographs are used, one landscape (desktop)
   and one portrait (phone), through <picture> — see README.
   ======================================================================= */

/* -- the shared media frame ------------------------------------------- */
.splitmedia { position: relative; background: var(--ink); overflow: hidden; }
/* <picture> is an INLINE element by default, and an inline element sits on a
   text baseline: that leaves a few pixels of the dark frame showing under the
   photograph — the black strip that appeared under the hero on the phone.
   Making it a block removes the baseline, and the strip with it. */
.splitmedia picture { display: block; font-size: 0; line-height: 0; }
/* On a phone the frame is UPRIGHT (4:5) — that is why each hero has a
   second, portrait photograph. Where no portrait photograph exists, the
   frame is given the class splitmedia--wide and stays landscape (4:3). */
/* THE FRAME holds the proportion (upright, 4 by 5, on a phone) and the
   photograph fills it exactly. Doing it this way — frame first, photograph
   stretched inside it — is what removed the dark strip that used to show
   under the hero photographs on a phone. */
.splitmedia { aspect-ratio: 4 / 5; }
.splitmedia > picture { position: absolute; inset: 0; }
.splitmedia img {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.splitmedia--wide { aspect-ratio: 4 / 3; }
/* WHICH PART OF A PHOTOGRAPH IS KEPT when the frame crops it. By default the
   centre. Add one of these classes to a <div class="splitmedia"> to move the
   crop towards one side — useful when the person who matters is not in the
   middle of the picture. */
.splitmedia--right img  { object-position: 72% center; }
.splitmedia--left img   { object-position: 28% center; }
.splitmedia--top img    { object-position: center 22%; }
/* For ARTWORK rather than a photograph (the emblem on the home page): show it
   whole instead of cropping it, on the same ivory as the panel beside it. */
.splitmedia--emblem { background: var(--ivory-deep); }
.splitmedia--emblem { aspect-ratio: 3 / 4; }
.splitmedia--emblem img { object-fit: contain; }
.splitmedia--emblem::after { display: none; }
/* A hairline of gold along the inner edge — the only ornament. */
.splitmedia::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--gold); opacity: .9;
}

/* -- the text panel ---------------------------------------------------- */
.splitpanel {
  background: var(--ivory-deep);
  display: flex; flex-direction: column; justify-content: center;
  padding: 2.25rem 1.25rem 2.75rem;
}
.splitpanel__inner { max-width: 34rem; }
.splitpanel .eyebrow { color: var(--gold-dark); margin-bottom: .9rem; }
.splitpanel .eyebrow::before { background: var(--orione-red); }
.splitpanel h1, .splitpanel h2 {
  color: var(--ink); font-size: clamp(1.9rem, 5.2vw, 3.1rem);
  line-height: 1.12; margin: 0 0 .9rem;
}
.splitpanel__line {
  font-family: var(--body); font-size: var(--step-1); color: var(--ink-soft);
  line-height: 1.6; max-width: 40ch; margin: 0 0 1.6rem;
}
.splitpanel .btn { align-self: flex-start; }

/* ===== HOME: the split carousel ========================================
   Every slide sits in the SAME grid cell, so the section is as tall as the
   tallest slide and nothing jumps when they cross-fade.
   ======================================================================= */
.hero--split { display: block; height: auto; min-height: 0; background: var(--ivory-deep); overflow: visible; }
.hero--split .heroslides { display: grid; }
.hero--split .heroslide {
  position: static; grid-area: 1 / 1;
  display: grid; grid-template-columns: 1fr;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .7s ease, visibility .7s ease;
}
.hero--split .heroslide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

/* The bar of arrows and dots lives BELOW the hero, never on top of a face. */
.herobar {
  display: flex; align-items: center; justify-content: center; gap: 1.35rem;
  padding: 1.75rem 1.25rem 2.5rem;
}
.hero--split .heroctrl {
  position: static; transform: none; width: 48px; height: 48px;
  background: transparent; border: 1px solid var(--rule); color: var(--gold-dark);
  font-size: 1.05rem; line-height: 1;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.hero--split .heroctrl:hover,
.hero--split .heroctrl:focus-visible { background: var(--gold); border-color: var(--gold); color: #fff; }
.hero--split .herodots { position: static; gap: .5rem; }
.hero--split .herodots button {
  width: 30px; height: 2px; background: var(--rule);
  transition: background .25s ease, height .25s ease;
}
.hero--split .herodots button.is-active { background: var(--gold-dark); height: 3px; }

@media (min-width: 861px) {
  /* BIG, BUT NOT GLUED TO THE EDGE. The slide leaves the SAME margin on the
     left as on the right (that is the 7rem below, 3.5rem on each side), and
     the two halves are equal, so the dividing line falls on the middle of the
     block. Want a wider margin? Raise the 7rem. Want it to touch the screen
     edges again? Set width: 100%; max-width: none; margin: 0. */
  .hero--split .heroslide {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    max-width: 100rem; width: calc(100% - 7rem); margin: 0 auto;
  }
  /* HOW MUCH THE PHOTOGRAPH IS ZOOMED IN.
     object-fit: cover fills the frame, so the TALLER the frame the more the
     photograph is cropped. The middle value, 31vw, is roughly 16:10 against a
     half-screen-wide frame — a landscape shape, close to the shape of the
     photographs themselves, which is why they are no longer cut to pieces.
     Want them closer / more zoomed? Raise 31vw (e.g. 36vw).
     Want them further back? Lower it (e.g. 27vw). */
  .hero--split .splitmedia { aspect-ratio: auto; min-height: clamp(26rem, 34vw, 40rem); }
  .hero--split .splitmedia img,
  .hero--split .splitmedia picture { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .hero--split .splitmedia img { object-fit: cover; }
  /* The emblem is artwork, not a photograph: shown whole, but as large as the
     frame allows — hence the very small padding. */
  .hero--split .splitmedia--emblem img { object-fit: contain; padding: .4rem; }
  /* The words keep breathing room from the window edge without a hard box. */
  .splitpanel { padding: 3rem clamp(2rem, 3.6vw, 4.5rem); }
  .hero--split .splitpanel__inner { max-width: 36rem; }
  .splitmedia::after { inset: 0 0 0 auto; width: 3px; height: auto; }
  .herobar { justify-content: flex-end; max-width: none; margin: 0;
             padding-right: clamp(2rem, 3.6vw, 4.5rem); }
}

/* ===== INNER PAGES: the same idea, quieter ==============================
   Replaces the old 3:1 banner with the title printed over the photograph.
   ======================================================================= */
.comhero--split { display: grid; grid-template-columns: 1fr; background: var(--ivory-deep); }
.comhero--split .splitpanel { padding: 2rem 1.25rem 2.25rem; }
.comhero--split .splitpanel h1 { font-size: clamp(1.75rem, 4.6vw, 2.7rem); margin-bottom: 0; }
.comhero--split .comhero__meta { color: var(--gold-dark); margin: 0 0 .6rem; }

@media (min-width: 861px) {
  .comhero--split {
    grid-template-columns: 1.1fr .9fr; align-items: stretch;
    max-width: var(--wrap); margin: 0 auto;
  }
  .comhero--split .splitmedia { aspect-ratio: auto; min-height: 22rem; }
  .comhero--split .splitmedia img,
  .comhero--split .splitmedia picture { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .comhero--split .splitmedia img { object-fit: cover; }
  .comhero--split .splitpanel { padding: 2.5rem 2.5rem 2.5rem 3rem; }
}

/* ===== 19. IN PREPARATION — the call-out under the works ================
   Was a bare left rule with two buttons crammed into one paragraph; the rule
   ran straight through them. Now a proper panel with its own button row.
   ======================================================================= */
.worknote {
  border-left: 3px solid var(--gold);
  background: var(--ivory-deep);
  padding: 1.7rem 1.75rem 1.6rem;
  margin-top: 3rem;
  border-radius: 0;
}
.worknote p { max-width: 68ch; }
.worknote p { margin-bottom: .6em; }
.worknote p:last-of-type { margin-bottom: 0; }
.worknote .eyebrow { margin-bottom: .7rem; }
.worknote__actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 1.4rem;
}
.worknote__actions .btn { margin: 0; }
@media (max-width: 560px) {
  .worknote { padding: 1.3rem 1.1rem 1.2rem; }
  .worknote__actions .btn { width: 100%; text-align: center; }
}

/* ===== 20. EQUAL-HEIGHT CARD GRIDS =====================================
   News and Works now use the SAME four-card grid, so the two sections of
   the home page read as one family.
   ======================================================================= */
.grid--4 > .card, .grid--3 > .card, .grid--2 > .card { display: flex; flex-direction: column; }
.grid--4 > .card .card__body, .grid--3 > .card .card__body, .grid--2 > .card .card__body { display: flex; flex-direction: column; flex: 1; }
.grid--4 > .card .card__more, .grid--3 > .card .card__more, .grid--2 > .card .card__more { margin-top: auto; padding-top: .8rem; }

/* ===== 20b. WORK GROUPS (projects page) ================================
   A small heading that opens a family of works — disability, health,
   education — so the cards below it are read as one group and not as ten
   unrelated things in a row.
   TO ADD A GROUP: copy one .workgroup block in projects/index.html and put
   a grid of cards under it.
   ======================================================================= */
.workgroup { margin: 3.25rem 0 1.5rem; }
.workgroup:first-of-type { margin-top: .5rem; }
.workgroup__title {
  font-family: var(--ui); font-size: .78rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 .55rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center;
}
.workgroup__lede {
  font-size: .95rem; color: var(--ink-soft); max-width: 62ch; margin: 0;
}

@media (min-width: 621px) and (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 21. COMMUNITY PAGES — THE TWO BLOCKS =============================
   Every community page now tells the same story in the same two parts:

     1. PASTORAL ACTIVITY      — the parish: chapels, sacraments, groups,
                                 the patronal feast, the liturgical life.
     2. PROJECT & CHARITY MISSION — the works of that same place: school,
                                 dispensary, centre for disability, farm,
                                 technical training.

   They are deliberately different to look at — one ivory with a gold edge,
   one white with a red edge — so a visitor can tell at a glance which of
   the two they are reading. The axis of the site stays the PLACE: whoever
   opens the page of a community finds everything we do there, together but
   distinct.

   TO ADD A BLOCK TO A NEW PAGE: copy one whole <section class="combloc ...">
   from any community page and change the text inside.
   ======================================================================= */
.combloc {
  padding: 2rem 1.35rem 1.6rem;
  margin: 0 0 3rem;
  border-left: 4px solid var(--gold);
  background: var(--ivory-deep);
}
/* The mission block keeps the page background, so that the white cards,
   videos and story boxes inside it still stand out. */
.combloc--mission {
  border-left-color: var(--orione-red);
  background: transparent;
  border-top: 1px solid var(--rule);
}
.combloc__kicker {
  font-family: var(--ui); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-dark); margin: 0 0 .35rem;
}
.combloc--mission .combloc__kicker { color: var(--orione-red); }
.combloc > h2:first-of-type { margin-top: 0; }
.combloc > :last-child { margin-bottom: 0; }
.combloc__lede {
  font-family: var(--ui); font-size: .92rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule); padding-bottom: 1rem; margin-bottom: 1.6rem;
}
@media (min-width: 861px) {
  .combloc { padding: 2.4rem 2.2rem 1.9rem; }
}

/* ===== 22. WORKS AND PROJECTS IN PREPARATION ============================
   On the Projects page: what is already running, and — clearly apart —
   what is still being built and still looking for partners.
   ======================================================================= */
.tag--building { color: var(--kenya-green); }

.buildband { background: var(--ivory-deep); border-top: 3px solid var(--kenya-green); }

.buildcard {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: #fff; border: 1px solid var(--rule);
  margin: 0 auto 2.5rem; max-width: 52rem;
}
.buildcard__media { background: var(--gold-pale); overflow: hidden; }
.buildcard__media img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.buildcard__figure { font-size: .82rem; }
.buildcard__body { padding: 1.8rem 1.6rem 1.9rem; }
.buildcard__body > :first-child { margin-top: 0; }
.buildcard__body > :last-child { margin-bottom: 0; }
.buildcard h3 { font-size: var(--step-1); margin: .5rem 0 .6rem; line-height: 1.25; }
.buildcard__body p { font-size: .86rem; line-height: 1.6; }
.buildcard .btn { font-size: .64rem; padding: .55rem 1rem; }
.buildcard .eyebrow, .buildcard .tag { font-size: .58rem; }
.buildcard__figure {
  font-family: var(--ui); font-size: .9rem; color: var(--ink-soft);
  border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1.2rem;
}
.buildcard__figure strong { color: var(--orione-red); font-size: 1.05rem; }
@media (min-width: 861px) {
  /* THE SIZE OF THE WHOLE CARD. Picture and text shrink together: the card
     is held to a narrower width (see .buildcard below), the type is a step
     smaller, and the picture fills its half. Change the max-width on
     .buildcard to make the whole block bigger or smaller. */
  .buildcard { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .buildcard__media img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .buildcard__body { padding: 1.5rem 1.6rem 1.6rem; }
}

/* ===== 20. COMMENTS UNDER AN ARTICLE ====================================
   The list of published comments, and the form that sends a new one to the
   Delegation. See assets/js/comments.js for how a comment gets published.
   ======================================================================= */
.comments { background: var(--ivory-deep); }
.comments__title { font-size: var(--step-3); margin: 0 0 .2rem; }
.comments .rule-double { margin-bottom: 2rem; }
.comments__list { margin-bottom: 2.5rem; }
.comments__empty { font-family: var(--body); color: var(--ink-soft); font-style: italic; }

.comment {
  border-left: 2px solid var(--gold); padding: .2rem 0 .2rem 1.1rem;
  margin-bottom: 1.6rem;
}
.comment__head { margin: 0 0 .3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; }
.comment__name { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.comment__date { font-family: var(--ui); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.comment__text { font-family: var(--body); margin: 0; line-height: 1.65; }

.commentform { border-top: 1px solid var(--rule); padding-top: 2rem; }
.commentform__title { font-size: var(--step-2); margin: 0 0 .5rem; }
.commentform__note { font-family: var(--body); font-size: .88rem; color: var(--ink-soft); margin: 0 0 1.6rem; max-width: 52ch; }
/* the honeypot: a field only a robot would fill in, hidden from people */
.commentform__hp { position: absolute; left: -9999px; }
.commentform__row { display: grid; grid-template-columns: 1fr; gap: 0 1.2rem; }
.commentform p { margin: 0 0 1.1rem; }
.commentform label {
  display: block; font-family: var(--ui); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .4rem;
}
.commentform label span { text-transform: none; letter-spacing: .02em; opacity: .75; }
.commentform input,
.commentform textarea {
  width: 100%; font: inherit; font-family: var(--body); color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 0;
  padding: .7rem .8rem;
}
.commentform input:focus,
.commentform textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.commentform textarea { resize: vertical; min-height: 8rem; }

@media (min-width: 700px) {
  .commentform__row { grid-template-columns: 1fr 1fr; }
}
.commentform__status { font-family: var(--body); font-size: .9rem; margin-top: -.4rem; }
.commentform__status.is-ok { color: var(--kenya-green); }
.commentform__status.is-bad { color: var(--orione-red); }