/*
Theme Name: Institute
Theme URI: https://israel.regent.edu
Author: Israel Institute, Robertson School of Government
Description: WordPress theme for the Israel Institute at Regent University. Built on the Regent brand system with a gold accent reserved for Institute moments.
Version: 1.8.6
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: israel-institute
*/

/* ============================================================
   1. TOKENS
   Brand colors are re-declared by inc/customizer.php in wp_head,
   so Customizer values override these defaults at runtime.
   ============================================================ */

:root {
  --regent-blue: #002F6C;
  --regent-green: #00833F;
  --regent-gold: #C4B684;
  --white: #FFFFFF;

  /* Derived ramp. These are computed from the three brand colors
     above, so a Customizer change carries through to hover states,
     the footer, and the pull-quote glyph instead of leaving them
     on the old hue. color-mix also keeps the Customizer's live
     preview working, which a PHP-computed value would not.
     Fallbacks below for anything predating color-mix. */
  --blue-900:  color-mix(in srgb, var(--regent-blue) 72%, #000);
  --blue-700:  color-mix(in srgb, var(--regent-blue) 82%, #fff);
  --blue-100:  color-mix(in srgb, var(--regent-blue) 14%, #fff);
  --blue-50:   color-mix(in srgb, var(--regent-blue) 7%,  #fff);

  --green-800: color-mix(in srgb, var(--regent-green) 78%, #000);
  --green-100: color-mix(in srgb, var(--regent-green) 16%, #fff);

  --gold-700:  color-mix(in srgb, var(--regent-gold) 76%, #000);
  --gold-500:  var(--regent-gold);
  --gold-200:  color-mix(in srgb, var(--regent-gold) 45%, #fff);

  --ink: #1A2330;
  --neutral-800: #33404F;
  --neutral-600: #5A6675;
  --neutral-400: #9099A6;
  --neutral-300: #C2C9D2;
  --neutral-200: #E2E6EC;
  --neutral-100: #F1F3F6;
  --paper: #FBFBF9;

  --surface: var(--white);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --fg2: var(--neutral-600);
  --link: var(--blue-700);

  /* Error red. FIXED, not Customizer-exposed: tied to the
     light-ground forms rule. 7.87:1 on paper, 8.15:1 on white,
     1.59:1 on navy. Forms never sit on navy grounds. */
  --error: #9B1C1C;
  --error-bg: #FDF2F2;

  --serif-display: "Libre Caslon Display", "Adobe Caslon Pro", "Libre Caslon Text", Georgia, serif;
  --serif-text: "Libre Caslon Text", "Adobe Caslon Pro", Georgia, serif;
  --sans: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --wide: min(1200px, 100%);
  --editorial: min(1000px, 100%);
  --measure: min(720px, 100%);
}

/* Fallback: static ramp for browsers without color-mix support.
   These match the Regent defaults; they will not track Customizer
   changes, but nothing renders unstyled. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --blue-900: #00204A;
    --blue-700: #0A3F86;
    --blue-100: #DCE6F2;
    --blue-50:  #EEF3F9;
    --green-800: #00632F;
    --green-100: #D6ECDD;
    --gold-700: #9A8A4F;
    --gold-200: #EAE3CE;
  }
}

/* ============================================================
   2. GLOBALS
   ============================================================ */

html, body { margin: 0; padding: 0; background: var(--paper); }
* { box-sizing: border-box; }

body {
  font-family: var(--sans);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--blue-900); text-decoration: underline; }

button {
  font: inherit; color: inherit; background: none; border: 0;
  margin: 0; padding: 0; text-align: inherit; cursor: pointer;
}

img { max-width: 100%; height: auto; }

.wide      { width: var(--wide);      margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.editorial { width: var(--editorial); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.measure   { width: var(--measure);   margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.eyebrow {
  font-size: 15px; letter-spacing: 0.17em; text-transform: uppercase;
  font-weight: 600; color: var(--regent-green);
}
.eyebrow-gold { color: var(--regent-gold); }  /* navy grounds only */

/* ============================================================
   3. ACCESSIBILITY
   Dual-tone focus ring: 2px white inside a 4px navy ring.
   Clears 3:1 on both paper and navy from one rule.
   ============================================================ */

:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--regent-blue);
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--regent-blue); color: #FFFFFF;
  padding: 14px 22px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; color: #FFFFFF; text-decoration: none; }

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute; white-space: nowrap; width: 1px;
}

/* ============================================================
   4. HEADER / LOCKUP / NAV
   ============================================================ */

.utility { background: var(--blue-900); color: #C7D3E4; font-size: 14px; }
.utility a { color: #C7D3E4; }
.utility-inner {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 20px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px;
}

.masthead {
  background: var(--white); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.masthead-inner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 14px;
}

/* Lockup never wraps; shield and wordmark scale together. */
.lockup {
  display: flex; align-items: center; gap: clamp(12px, 3vw, 20px);
  flex-wrap: nowrap; min-width: 0; padding: 4px 0;
}
.lockup:hover { text-decoration: none; }
.lockup img { height: clamp(42px, 9vw, 58px); width: auto; display: block; flex: 0 0 auto; }
.lockup-text { border-left: 1px solid var(--border-strong); padding-left: clamp(12px, 3vw, 20px); min-width: 0; }
.lockup-name {
  font-family: var(--serif-display); font-size: clamp(21px, 4.6vw, 31px);
  line-height: 1; color: var(--regent-blue);
}
.lockup-sub {
  font-size: clamp(10.5px, 1.8vw, 12.5px); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--neutral-600); margin-top: 8px;
}

.nav-wide { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; }
.nav-wide a {
  display: block; position: relative; padding: 15px 10px;
  font-size: 14.5px; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 600; color: var(--neutral-800);
}
.nav-wide a:hover { color: var(--regent-blue); text-decoration: none; }
.nav-wide a[aria-current="page"] { color: var(--regent-blue); }
.nav-wide a[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 3px; background: var(--regent-green);
}

.btn-give {
  background: var(--regent-green); color: #fff; padding: 12px 22px;
  border-radius: var(--radius-md); font-size: 14.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
}
.btn-give:hover { background: var(--green-800); color: #fff; text-decoration: none; }

.menu-toggle {
  margin-left: auto; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 11px 16px;
  display: none; align-items: center; gap: 10px; min-height: 46px;
}
.menu-toggle span.bars { display: flex; flex-direction: column; gap: 4px; }
.menu-toggle span.bars i { width: 20px; height: 2px; background: var(--regent-blue); display: block; }
.menu-toggle span.label {
  font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--regent-blue);
}

.menu-panel { border-top: 1px solid var(--border); background: var(--white); padding: 8px 24px 20px; display: none; }
.menu-panel.is-open { display: block; }
.menu-panel a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--border);
  min-height: 48px; font-size: 16px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; color: var(--neutral-800);
}
.menu-panel a[aria-current="page"] { color: var(--regent-blue); }
.menu-panel .btn-give {
  display: block; margin-top: 16px; text-align: center; padding: 15px;
  font-size: 15px; border-bottom: 0;
}

/* Nav collapse threshold is 1000px, separate from the 700px block below.
   Seven items plus Give stop fitting well before 700. */
@media (max-width: 1000px) {
  .nav-wide { display: none; }
  .menu-toggle { display: flex; }
}

/* ============================================================
   5. PROSE
   Authoritative spacing. Margins collapse to the larger value,
   so each element declares its own top margin and a 26px bottom.
   ============================================================ */

.prose { max-width: 720px; font-size: 18.5px; line-height: 1.78; color: var(--neutral-800); }
.prose > * { margin: 0 0 26px; }
.prose h2 {
  font-family: var(--serif-display); font-size: 32px; line-height: 1.15;
  color: var(--regent-blue); margin: 44px 0 26px; font-weight: 400;
}
.prose h3 {
  font-family: var(--serif-display); font-size: 24px; line-height: 1.2;
  color: var(--regent-blue); margin: 34px 0 26px; font-weight: 400;
}
.prose > *:first-child { margin-top: 0; }
.prose a { text-decoration: underline; }  /* never color alone */
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-bottom: 10px; }
.prose blockquote {
  border-left: 3px solid var(--regent-green); padding: 4px 0 4px 22px;
  font-family: var(--serif-text); font-size: 21px; line-height: 1.5; color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.prose th {
  background: var(--blue-50); text-align: left; font-weight: 700;
  padding: 12px 14px; border-bottom: 1px solid var(--border-strong);
}
.prose td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 44px 0; }
.prose figure { margin: 34px 0 26px; }
.prose figcaption { font-size: 15px; color: var(--fg2); margin-top: 10px; }

/* The designed pull quote — gold rules and glyph, Ink text.
   Distinct from .prose blockquote, which editors control. */
.pullquote { border-top: 2px solid var(--regent-gold); border-bottom: 2px solid var(--regent-gold); padding: 28px 0; margin: 12px 0 32px; }
.pullquote .glyph { font-family: var(--serif-display); font-size: 52px; color: var(--gold-700); line-height: 0.5; }
.pullquote p { font-family: var(--serif-text); font-size: clamp(21px, 3vw, 25px); line-height: 1.45; color: var(--ink); margin: 16px 0 0; }

/* ============================================================
   6. FORMS  —  light grounds only. On navy, put the form in a
   white card rather than on the band itself.
   ============================================================ */

.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 7px; }
.field .req { color: var(--error); font-weight: 700; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; padding: 13px 14px; font: inherit;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--white); color: var(--ink);
}
.field.has-error input, .field.has-error select, .field.has-error textarea {
  border: 2px solid var(--error);
}
.field-error { color: var(--error); font-size: 15px; margin-top: 7px; font-weight: 600; }
.field-error::before { content: "Error: "; font-weight: 700; }

.form-errors {
  border: 2px solid var(--error); background: var(--error-bg);
  border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 26px;
}
.form-errors h2 { font-size: 17px; margin: 0 0 10px; color: var(--error); }
.form-errors a { color: var(--error); text-decoration: underline; }

.form-success {
  border: 2px solid var(--green-800); background: var(--green-100);
  border-radius: var(--radius-md); padding: 18px 20px;
}

.btn {
  background: var(--regent-green); color: #fff; padding: 14px 26px;
  border-radius: var(--radius-md); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; font-size: 14.5px; display: inline-block;
}
.btn:hover { background: var(--green-800); color: #fff; text-decoration: none; }
.btn[disabled], .btn.is-busy { opacity: 0.6; cursor: not-allowed; }
.btn-secondary { background: var(--regent-blue); }
.btn-secondary:hover { background: var(--blue-900); }

/* ============================================================
   7. EMPTY STATES + NOTICES
   ============================================================ */

.empty-state {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); padding: 40px 28px; text-align: center;
}
.empty-state p { font-family: var(--serif-text); font-size: 20px; color: var(--ink); margin: 0 0 16px; }

.notice { border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 26px; border-left: 3px solid var(--regent-blue); background: var(--blue-50); }
.notice .notice-label { font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; font-size: 13.5px; }
/* Urgent survives grayscale: bold label plus a 3px rule, not color alone. */
.notice.is-urgent { border-left: 3px solid var(--error); background: var(--error-bg); }
.notice.is-urgent .notice-label { color: var(--error); }

/* ============================================================
   8. CARDS / GRIDS
   Intrinsic sizing does the reflow; no query needed.
   ============================================================ */

.grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.card-title { font-family: var(--serif-display); font-size: 23px; line-height: 1.2; color: var(--regent-blue); }
/* Stretched link: one hit area, one accessible name, one focus stop. */
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-meta { font-size: 15px; color: var(--fg2); margin-top: 8px; }

/* Upcoming event: a card, per the artboard — not a rule-separated row. */
.event-row {
	display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px 26px;
	margin-top: 16px;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.event-row:hover { border-color: var(--border-strong); box-shadow: 0 2px 10px rgba(0,32,74,0.08); }
.event-date {
	flex: 0 0 104px; text-align: center;
	border-right: 1px solid var(--border); padding-right: 20px;
}
/* These are spans; without display they sit on one line. */
.event-date .m {
	display: block;
	font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--regent-green); font-weight: 700;
}
.event-date .d {
	display: block;
	font-family: var(--serif-display); font-size: 40px; line-height: 1.05;
	color: var(--regent-blue);
}

/* ============================================================
   9. FOOTER
   ============================================================ */

.site-footer { background: var(--blue-900); color: #C7D3E4; margin-top: 80px; }
.site-footer a { color: #C7D3E4; }
.site-footer h2 { font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--regent-gold); font-weight: 700; margin: 0 0 14px; }
.footer-cols { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding-top: 64px; padding-bottom: 48px; }
.footer-base { border-top: 1px solid rgba(255,255,255,0.14); }
.footer-base-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; font-size: 14px; color: #A9BBD4; }

/* ============================================================
   10. THE SINGLE MEDIA BLOCK
   Four behaviors intrinsic CSS cannot express.
   ============================================================ */

@media (max-width: 700px) {
  [data-stack] { flex-direction: column; align-items: stretch; }
  [data-stack] [data-stack-lead] {
    flex: 1 1 auto; text-align: left; border-right: 0;
    border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 12px;
    display: flex; align-items: baseline; gap: 12px;
  }
  [data-fullwidth] { width: 100%; text-align: center; }
  [data-keyline] { padding: 28px 20px; }
}

/* ============================================================
   11. SPECIFICITY FIXES
   Descendant selectors like `.nav-wide a` (0,1,1) outrank a bare
   component class like `.btn-give` (0,1,0), so the button was
   inheriting nav link color and padding instead of its own.
   Same problem in the footer. Fixed by matching specificity
   rather than reaching for !important.
   ============================================================ */

/* Lockup: these are <span>s, so display:block is required for the
   two lines to stack — and margin-top does nothing on an inline
   element, which is why the sub-line sat on the same line. */
.lockup-name,
.lockup-sub { display: block; }

/* Give button, everywhere it appears. */
.nav-wide a.btn-give,
.menu-panel a.btn-give,
.site-footer a.btn-give,
a.btn-give {
	background: var(--regent-green);
	color: #FFFFFF;
	padding: 12px 22px;
	border-radius: var(--radius-md);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	display: inline-block;
}

.nav-wide a.btn-give:hover,
.menu-panel a.btn-give:hover,
.site-footer a.btn-give:hover,
a.btn-give:hover {
	background: var(--green-800);
	color: #FFFFFF;
	text-decoration: none;
}

/* The wide-nav underline rule targets `.nav-wide a[aria-current]`,
   which must never apply to the Give button. */
.nav-wide a.btn-give::after { content: none; }

/* Mobile panel: full width, no row divider. */
.menu-panel a.btn-give {
	display: block;
	width: 100%;
	text-align: center;
	padding: 15px;
	font-size: 15px;
	border-bottom: 0;
	margin-top: 16px;
}

/* Same class of problem for the standard buttons inside regions
   that style bare anchors. */
.site-footer a.btn,
.empty-state a.btn,
.prose a.btn {
	color: #FFFFFF;
	text-decoration: none;
	display: inline-block;
}
.site-footer a.btn-secondary,
.empty-state a.btn-secondary,
.prose a.btn-secondary { background: var(--regent-blue); }

/* ============================================================
   12. SYNTHETIC BOLD FIX
   Libre Caslon Display ships one weight (400). Headings default
   to bold, so the browser was faking it by smearing the glyphs —
   which is what made card titles look muddy. Every display-serif
   element gets an explicit 400.
   ============================================================ */

.lockup-name,
.card-title,
.event-date .d,
.pullquote p,
.pullquote .glyph,
.empty-state p,
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

/* Sans headings that genuinely need weight opt back in —
   Source Sans 3 has real 600/700 cuts, so no synthesis. */
.eyebrow,
.notice-label,
.form-errors h2,
.gform_wrapper .gform_validation_errors > h2,
.site-footer h2,
.field label,
.gform_wrapper .gfield_label { font-weight: 600; }

.form-errors h2,
.gform_wrapper .gform_validation_errors > h2 { font-weight: 700; }

/* Card media. The image link is aria-hidden and removed from tab
   order because the title link already covers the whole card —
   two focus stops to the same place is noise for keyboard users. */
.card.has-media { padding: 0; overflow: hidden; }
.card.has-media > *:not(.card-media) { padding-left: 24px; padding-right: 24px; }
.card.has-media > *:last-child { padding-bottom: 24px; }
.card-media { display: block; margin-bottom: 18px; }
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 19 / 12; object-fit: cover; }

/* ============================================================
   13. DESIGNED SCREENS
   ============================================================ */

/* Outline button, for use on navy grounds only. */
.btn-outline,
a.btn-outline {
	background: transparent;
	color: #FFFFFF;
	border: 1px solid rgba(255,255,255,0.5);
	padding: 13px 25px;
	border-radius: var(--radius-md);
	font-weight: 600; font-size: 14.5px;
	letter-spacing: 0.09em; text-transform: uppercase;
	display: inline-block; text-decoration: none;
}
.btn-outline:hover,
a.btn-outline:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; text-decoration: none; border-color: #FFFFFF; }

/* Filter chips. State is carried by a check glyph as well as color,
   so it survives grayscale and color-blindness. */
.chip {
	border: 1px solid var(--border-strong);
	background: var(--white);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 14.5px; font-weight: 600;
	color: var(--neutral-800);
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 40px;
}
.chip:hover { border-color: var(--regent-blue); color: var(--regent-blue); }
.chip .chip-check { opacity: 0; font-size: 12px; }
.chip.is-on,
.chip[aria-pressed="true"] {
	background: var(--regent-blue);
	border-color: var(--regent-blue);
	color: #FFFFFF;
}
.chip.is-on .chip-check,
.chip[aria-pressed="true"] .chip-check { opacity: 1; }

/* Give amount buttons */
/* Amount buttons: outlined in blue per the artboard, filling the row
   evenly rather than sitting at a fixed width. */
.give-amounts { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 16px; }
.give-amount {
	flex: 1 1 70px;
	min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--white);
	color: var(--regent-blue);
	font-size: 17px; font-weight: 600;
	padding: 14px 8px; text-decoration: none;
}
.give-amount:hover {
	border-color: var(--regent-blue);
	background: var(--blue-50);
	color: var(--regent-blue);
	text-decoration: none;
}

/* The give box is square-cornered and blue-ruled, distinct from the
   soft sidebar cards elsewhere. */
.side-box--give { border: 1px solid var(--regent-blue); border-radius: 0; padding: 28px 26px; }

.give-legal {
	margin-top: 28px; padding-top: 22px;
	border-top: 1px solid var(--border-strong);
	font-size: 16px; line-height: 1.7; color: var(--fg2);
}

/* Video */
.video-embed { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster {
	aspect-ratio: 16 / 9; background: var(--blue-50);
	border-bottom: 1px solid var(--border);
	display: flex; align-items: center; justify-content: center;
}
.video-poster span {
	font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--neutral-400); font-weight: 600;
}
.card.has-media .video-slot { margin-bottom: 18px; }

/* Graphic grid filtering */
.graphic-item[hidden] { display: none; }

/* Chips are used as links on the Publications topic browser as well
   as buttons on the graphics filter. */
a.chip { text-decoration: none; }
a.chip:hover { text-decoration: none; background: var(--regent-blue); border-color: var(--regent-blue); color: #FFFFFF; }
a.chip:hover span { color: rgba(255,255,255,0.75) !important; }

/* ============================================================
   14. HOMEPAGE
   ============================================================ */

.hero { background-size: cover; background-position: center right; }

/* Pillar cards: blue top edge, per the artboard. */
.pillar {
	background: var(--white);
	border: 1px solid var(--border);
	border-top: 3px solid var(--regent-blue);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	padding: 26px 24px 28px;
}

/* Section head with a rule and a right-aligned "all" link. */
.rail-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	border-bottom: 1px solid var(--border);
	padding-bottom: 14px; margin-bottom: 22px;
}
.rail-link {
	font-size: 13px; letter-spacing: 0.13em; text-transform: uppercase;
	font-weight: 600; color: var(--regent-blue); white-space: nowrap;
}

/* Two-column: publications list beside a sidebar. */
.split { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.pub-row {
	display: flex; gap: 20px; align-items: flex-start;
	padding: 18px 0; border-bottom: 1px solid var(--border);
}
.pub-row:last-child { border-bottom: 0; }
.pub-thumb { flex: 0 0 96px; }
.pub-thumb img {
	display: block; width: 96px; height: 72px;
	object-fit: cover; border-radius: var(--radius-sm);
}
@media (max-width: 560px) {
	.pub-row { flex-direction: column; gap: 12px; }
	.pub-thumb, .pub-thumb img { width: 100%; flex: 1 1 auto; height: auto; aspect-ratio: 19 / 12; }
}

.split-side { display: flex; flex-direction: column; gap: 20px; }
.side-box {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--white);
	padding: 24px 22px;
}
.side-box--navy { background: var(--regent-blue); border-color: var(--regent-blue); }
.side-box .ii-newsletter-stub { max-width: none; }
.side-box .ii-newsletter-stub > div { flex-direction: column; }
.side-box .ii-newsletter-stub input,
.side-box .ii-newsletter-stub .btn { width: 100%; }

/* News cards sit on a tinted ground, distinct from publication cards. */
.news-card {
	background: var(--blue-50);
	border: 1px solid var(--blue-100);
	border-radius: var(--radius-md);
	padding: 20px 22px;
}
.news-outlet {
	font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase;
	font-weight: 700; color: var(--regent-blue); margin: 0;
}
.news-card a:hover { text-decoration: underline; }

/* Summit: image beside a copy card. */
.summit-split {
	display: grid; gap: 0;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--white);
}
.summit-media { background-size: cover; background-position: center; min-height: 300px; }
.summit-copy { padding: clamp(28px, 4vw, 44px); }
@media (max-width: 820px) {
	.summit-split { grid-template-columns: 1fr; }
	.summit-media { min-height: 220px; }
}

/* Footer brand column */
.footer-brand { grid-column: span 1; }
.lockup--footer { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
.lockup--footer .lockup-text { border-left: 1px solid rgba(255,255,255,0.28); padding-left: 14px; }
.lockup--footer .lockup-sub { margin-top: 5px; }
.footer-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* ---- v0.5.1 corrections ---- */

/* Newsletter in the sidebar: inputs must not stretch in a column flex. */

/* The preview stub is inert, but shouldn't look broken. */


/* Quotation mark was clipped by a sub-1 line-height. */
.quote-mark {
	font-family: var(--serif-display);
	font-size: 64px;
	line-height: 1;
	color: var(--regent-gold);
	margin: 0 0 10px;
	display: block;
}

/* The give band already closes with a rule; the footer's own top
   margin was leaving a stray light strip above it. */
.site-footer { margin-top: 0; }
.site-footer .footer-cols { padding-top: clamp(48px, 6vw, 72px); }

/* Footer: brand column gets more room than the link columns. */
.footer-cols {
	display: grid;
	gap: 40px;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; } }

.lockup--footer .lockup-name { color: #fff; font-size: 21px; }
.lockup--footer .lockup-sub  { color: #8FA6C4; font-size: 10.5px; }

/* ---- Utility bar search ---- */

.utility-sep {
	width: 1px; height: 14px;
	background: rgba(255,255,255,0.28);
	display: inline-block;
}

.search-toggle {
	display: inline-flex; align-items: center; gap: 7px;
	color: #C7D3E4; font-size: 14px; line-height: 1;
	padding: 4px 2px;
}
.search-toggle:hover { color: #fff; }
.search-toggle .search-icon { display: inline-flex; }

.search-panel { background: var(--blue-900); border-top: 1px solid rgba(255,255,255,0.14); }
.search-panel[hidden] { display: none; }

.search-form {
	display: flex; gap: 10px; align-items: center;
	padding-top: 14px; padding-bottom: 14px;
}
.search-form input[type="search"] {
	flex: 1 1 auto; min-width: 0;
	padding: 12px 14px; font: inherit; font-size: 16px;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: var(--radius-md);
	background: rgba(255,255,255,0.08);
	color: #fff;
}
.search-form input[type="search"]::placeholder { color: #93A9C6; }
.search-close {
	color: #C7D3E4; font-size: 24px; line-height: 1;
	padding: 6px 10px; flex: 0 0 auto;
}
.search-close:hover { color: #fff; }

@media (max-width: 560px) {
	.search-form { flex-wrap: wrap; }
	.search-form input[type="search"] { flex: 1 1 100%; }
}

/* ---- Podcast ---- */
.podcast-player { line-height: 0; }
.podcast-player iframe { display: block; }
.podcast-embed + .podcast-embed { margin-top: 32px; }

/* ---- Newsletter placeholder ---- */

.ii-newsletter-stub { max-width: 460px; }
.ii-nl-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ii-nl-row input[type="email"] {
	flex: 1 1 220px; min-width: 0;
	padding: 13px 14px; font: inherit; font-size: 16px;
	color: var(--ink); background: var(--white);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
}
.ii-nl-row input[type="email"]::placeholder { color: var(--neutral-400); }
.ii-nl-note { font-size: 14px; color: var(--fg2); margin: 10px 0 0; }
.ii-nl-msg {
	font-size: 15px; line-height: 1.5; margin: 12px 0 0;
	padding: 12px 14px; border-radius: var(--radius-md);
	border: 2px solid var(--regent-blue); background: var(--blue-50);
	color: var(--ink);
}
.ii-nl-msg.is-error { border-color: var(--error); background: var(--error-bg); color: var(--error); font-weight: 600; }

/* Centered variant, used on the 40 Days page. */
.ii-newsletter-stub--center { margin-inline: auto; }

/* Sidebar variant: stacked, button left-aligned. */
.side-box .ii-newsletter-stub { max-width: none; }
.side-box .ii-nl-row { flex-direction: column; align-items: stretch; }
.side-box .ii-nl-row input[type="email"] { flex: 0 0 auto; width: 100%; }
.side-box .ii-nl-row .btn { width: auto; align-self: flex-start; }

/* Podcast platform links */
.podcast-platforms {
	display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: baseline;
	margin-top: 18px; font-size: 15px;
}
.podcast-platforms__label {
	font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase;
	font-weight: 700; color: var(--fg2);
}
.podcast-platforms a { font-weight: 600; }

/* Shows on the Media page */
.show-block { padding-top: 22px; }
.show-block--divided { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 36px; }

/* Sidebar show list, used when there is more than one show. */
.show-list { list-style: none; margin: 14px 0 0; padding: 0; }
.show-list li {
	padding: 12px 0;
	border-bottom: 1px solid rgba(255,255,255,0.16);
}
.show-list li:first-child { padding-top: 0; }
.show-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.show-list a {
	font-family: var(--serif-display);
	font-size: 19px; line-height: 1.25;
	color: #fff; display: block;
}
.show-list a:hover { color: var(--regent-gold); text-decoration: none; }
.show-list__tag {
	display: block; margin-top: 5px;
	font-size: 14px; line-height: 1.5; color: #A9BBD4;
}

/* Show block with cover art */
.podcast-show--art { display: grid; gap: 26px; grid-template-columns: 180px minmax(0, 1fr); align-items: start; }
.podcast-art img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
@media (max-width: 640px) {
	.podcast-show--art { grid-template-columns: 1fr; gap: 18px; }
	.podcast-art { max-width: 160px; }
}

/* Episodes pulled from a show's RSS feed */
.episode-list { margin-top: 32px; }
.episode-list__items { list-style: none; margin: 0; padding: 0; }
.episode-item { padding: 18px 0; border-bottom: 1px solid var(--border); }
.episode-item:first-child { padding-top: 0; }
.episode-item:last-child { border-bottom: 0; }
.episode-item__title {
	font-family: var(--serif-display); font-weight: 400;
	font-size: 20px; line-height: 1.3; margin: 0;
	color: var(--regent-blue);
}
.episode-item__meta { font-size: 14.5px; color: var(--fg2); margin: 6px 0 0; }
.episode-item__excerpt { font-size: 16px; line-height: 1.6; color: var(--neutral-800); margin: 8px 0 0; max-width: 640px; }

/* ============================================================
   15. PAGINATION
   WordPress emits this markup on every archive; without styling it
   renders as a bare row of numbers.
   ============================================================ */

.pagination,
.navigation.pagination {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--white);
	color: var(--neutral-800);
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
}

.pagination a.page-numbers:hover {
	border-color: var(--regent-blue);
	color: var(--regent-blue);
	text-decoration: none;
}

/* Current page: not color alone — it also loses its border and gains
   weight, so it stays identifiable in grayscale. */
.pagination .page-numbers.current {
	background: var(--regent-blue);
	border-color: var(--regent-blue);
	color: #FFFFFF;
	font-weight: 700;
}

.pagination .page-numbers.dots {
	border: 0;
	background: none;
	min-width: 24px;
	padding: 0 4px;
	color: var(--fg2);
}

.pagination .prev,
.pagination .next { white-space: nowrap; }

/* The screen-reader heading WordPress adds ("Posts navigation"). */
.pagination .screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; overflow: hidden;
	position: absolute; white-space: nowrap; width: 1px;
}

@media (max-width: 560px) {
	/* Numbers wrap badly on a phone; keep prev/next and the current
	   page, hide the rest. */
	.pagination .page-numbers:not(.current):not(.prev):not(.next):not(.dots) { display: none; }
}

/* ---- Episode thumbnails ---- */
.episode-item--art { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: start; }
.episode-item__art { display: block; }
.episode-item__art img {
	display: block; width: 88px; height: 88px;
	object-fit: cover; border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}
.episode-item__body { min-width: 0; }
@media (max-width: 520px) {
	.episode-item--art { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
	.episode-item__art img { width: 64px; height: 64px; }
}

/* Pagination needs room before the footer. */
.pagination,
.navigation.pagination { margin-bottom: clamp(40px, 6vw, 72px); }

/* ---- Featured recording ---- */
.featured-rec {
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: start;
	margin-top: 20px;
}
.featured-rec__media { min-width: 0; }
.video-poster--large { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.featured-rec .video-embed { border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 860px) {
	.featured-rec { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- Featured video band ---- */
.video-band {
	display: grid;
	gap: 34px;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	align-items: center;
}
.video-band__media { min-width: 0; }
.video-band .video-embed { border-radius: var(--radius-lg); overflow: hidden; }
.video-band__copy { min-width: 0; }
@media (max-width: 900px) {
	.video-band { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- Homepage intro: statement beside the film ---- */
.intro-band {
	display: grid;
	gap: clamp(28px, 4vw, 48px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}
.intro-band__copy { min-width: 0; }
.intro-band__text p {
	font-size: 17.5px;
	line-height: 1.75;
	color: var(--neutral-800);
	margin: 0 0 18px;
	max-width: 60ch;
}
.intro-band__text p:last-child { margin-bottom: 0; }
.intro-band__media { min-width: 0; }
.intro-band .video-embed { border-radius: var(--radius-md); overflow: hidden; }
@media (max-width: 880px) {
	.intro-band { grid-template-columns: 1fr; }
}

/* ---- Curated resource list ---- */
.resource-list { list-style: none; margin: 0; padding: 0; }
.resource-item {
	display: flex; gap: 20px; align-items: center; justify-content: space-between;
	flex-wrap: wrap;
	padding: 18px 0; border-bottom: 1px solid var(--border);
}
.resource-item:last-child { border-bottom: 0; }
.resource-item__title {
	font-family: var(--serif-display); font-weight: 400;
	font-size: 21px; line-height: 1.3; color: var(--regent-blue); margin: 0;
}
.resource-item__source { font-size: 14.5px; color: var(--fg2); margin: 5px 0 0; }
.resource-item__action {
	flex: 0 0 auto;
	font-size: 13px; letter-spacing: 0.11em; text-transform: uppercase;
	font-weight: 700; color: var(--regent-green);
	border: 1px solid var(--regent-green);
	border-radius: var(--radius-md);
	padding: 10px 16px; min-height: 40px;
	display: inline-flex; align-items: center;
}
.resource-item__action:hover {
	background: var(--regent-green); color: #fff; text-decoration: none;
}

/* Brightcove playlist gallery */
.recordings-gallery { position: relative; aspect-ratio: 16 / 10; background: var(--ink); border-radius: var(--radius-lg); overflow: hidden; }
.recordings-gallery iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .recordings-gallery { aspect-ratio: 3 / 4; } }

/* Pillar cards with imagery */
.pillar--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pillar:not(.pillar--media) .pillar__body { padding: 0; }
.pillar__img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 16 / 9; object-fit: cover;
	border-bottom: 1px solid var(--border);
}
.pillar__body { padding: 24px 24px 28px; }

/* ============================================================
   16. PAGE END SPACING
   Templates that finish with a plain content container ran straight
   into the footer, because only the ones ending in a colored band
   happened to set their own bottom padding. Rather than patching
   each template, close the gap here for anything that ends without
   a full-bleed section.

   Full-bleed <section> bands are excluded: they set their own
   padding and sit flush against the footer on purpose, so paper
   space beneath a navy band would read as a mistake.
   ============================================================ */

main > .wide:last-child,
main > .editorial:last-child,
main > .measure:last-child,
main > article:last-child,
main > .prose:last-child {
	padding-bottom: clamp(56px, 8vw, 96px);
}

/* Same for a page whose final section is plain rather than a band. */
main > section:last-child.section--plain > .wide,
main > section:last-child.section--plain > .editorial,
main > section:last-child.section--plain > .measure {
	padding-bottom: clamp(56px, 8vw, 96px);
}

/* ---- In the news: full-width link rows ---- */
.press-list { border-top: 1px solid var(--border); }
.press-row {
	display: block;
	padding: 22px 20px;
	margin: 0 -20px;
	border-bottom: 1px solid var(--border);
	color: inherit;
	text-decoration: none;
}
.press-row:hover { background: var(--blue-50); text-decoration: none; }
.press-row:hover .press-row__title { color: var(--blue-900); }
.press-row__meta {
	display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
	margin-bottom: 8px;
}
.press-row__outlet {
	font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase;
	font-weight: 700; color: var(--regent-green);
}
.press-row__date { font-size: 14px; color: var(--fg2); }
.press-row__title {
	display: block;
	font-family: var(--serif-display); font-weight: 400;
	font-size: clamp(20px, 2.6vw, 24px); line-height: 1.3;
	color: var(--regent-blue);
}
.press-row__arrow { font-size: 0.75em; margin-left: 4px; color: var(--fg2); }
.press-row__excerpt {
	display: block; margin-top: 8px;
	font-size: 16.5px; line-height: 1.6; color: var(--neutral-800);
	max-width: 68ch;
}

/* ---- The Institute Review ---- */
.review-meta {
	display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
	font-size: 14.5px; letter-spacing: 0.06em; color: var(--fg2); margin: 0;
}
.review-meta span[aria-hidden] { color: var(--neutral-300); }

.review-body {
	display: grid; gap: clamp(32px, 4vw, 52px);
	grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
	align-items: start;
}
@media (max-width: 900px) { .review-body { grid-template-columns: 1fr; } }

.review-main { min-width: 0; }
.review-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; }
@media (max-width: 900px) { .review-side { position: static; } }

.lead-essay { padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--border); }
.lead-essay__media { margin: 22px 0 0; }
.lead-essay__media img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md);
}
.lead-essay__stand {
	font-family: var(--serif-text); font-size: clamp(17px, 2.1vw, 20px);
	line-height: 1.6; color: var(--neutral-800); margin: 20px 0 0; max-width: 62ch;
}

.contents-list { list-style: none; margin: 14px 0 0; padding: 0; }
.contents-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.contents-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contents-list a {
	font-family: var(--serif-display); font-size: 17px; line-height: 1.32;
	color: var(--regent-blue);
}

/* ---- Media: recordings beside the podcast rail ---- */
.media-body {
	display: grid; gap: clamp(32px, 4vw, 48px);
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: start;
}
@media (max-width: 900px) { .media-body { grid-template-columns: 1fr; } }
.media-main { min-width: 0; }
.media-side { display: flex; flex-direction: column; gap: 20px; }

.mini-episodes { list-style: none; margin: 10px 0 0; padding: 0; }
.mini-episodes li {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 11px 0; border-bottom: 1px solid var(--border);
}
.mini-episodes li:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-episodes__mark { color: var(--regent-green); font-size: 11px; line-height: 1.7; flex: 0 0 auto; }
.mini-episodes a { font-size: 15.5px; line-height: 1.4; color: var(--regent-blue); font-weight: 600; }
.mini-episodes__meta { display: block; font-size: 13.5px; color: var(--fg2); margin-top: 3px; }

/* ============================================================
   17. SIDEBAR LAYOUT
   Several artboard screens put supporting material beside the main
   content rather than beneath it. One shared shell so they behave
   consistently and collapse the same way.
   ============================================================ */

.with-side {
	display: grid;
	gap: clamp(28px, 4vw, 48px);
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: start;
}
.with-side__main { min-width: 0; }
.with-side__aside {
	min-width: 0;
	display: flex; flex-direction: column; gap: 20px;
	position: sticky; top: 96px;
}
@media (max-width: 900px) {
	.with-side { grid-template-columns: 1fr; }
	.with-side__aside { position: static; }
}

.side-box__title {
	font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase;
	font-weight: 700; color: var(--regent-green); margin: 0 0 10px;
}
.side-box--navy .side-box__title { color: var(--regent-gold); }
.side-box p { font-size: 15.5px; line-height: 1.6; color: var(--neutral-800); margin: 0 0 16px; }
.side-box--navy p { color: #C7D3E4; }
.side-box img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.side-box--plain { border: 0; background: none; padding: 0; }

/* Compact amount buttons for the Give sidebar */

/* Prayer season dates */
.prayer-dates {
	margin-top: clamp(28px, 4vw, 40px);
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.prayer-dates__range {
	font-family: var(--serif-display);
	font-size: clamp(24px, 3.4vw, 32px);
	line-height: 1.1; color: var(--regent-blue); margin: 10px 0 0;
}

/* ---- 40 Days of Prayer ---- */
.prayer-facts {
	display: grid; gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	margin-top: clamp(28px, 4vw, 40px);
	padding-top: 26px;
	border-top: 1px solid var(--border);
}
.prayer-facts p { font-size: 16px; line-height: 1.65; color: var(--neutral-800); margin: 8px 0 0; }

.year-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.year-tab {
	border: 1px solid var(--border-strong); background: var(--white);
	border-radius: var(--radius-md);
	padding: 10px 20px; min-height: 44px;
	font-size: 15.5px; font-weight: 700; color: var(--neutral-800);
}
.year-tab:hover { border-color: var(--regent-blue); color: var(--regent-blue); }
/* Selected state is weight and fill, not color alone. */
.year-tab.is-on, .year-tab[aria-selected="true"] {
	background: var(--regent-blue); border-color: var(--regent-blue); color: #fff;
}
.year-panel[hidden] { display: none; }

.calendar-scroll { overflow-x: auto; }
.prayer-calendar { width: 100%; border-collapse: collapse; font-size: 16px; }
.prayer-calendar th, .prayer-calendar td {
	text-align: left; padding: 11px 14px; vertical-align: top;
	border-bottom: 1px solid var(--border);
}
.prayer-calendar thead th {
	background: var(--blue-50); font-weight: 700; font-size: 13.5px;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--regent-blue);
	border-bottom: 1px solid var(--border-strong);
}
.prayer-calendar tbody th { font-weight: 700; white-space: nowrap; color: var(--ink); }
.prayer-calendar__artist { display: block; font-size: 14.5px; color: var(--fg2); margin-top: 2px; }

/* Per-day recording link in the prayer calendar */
.day-watch {
	display: inline-flex; align-items: center; white-space: nowrap;
	font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase;
	font-weight: 700; color: var(--regent-green);
	border: 1px solid var(--regent-green); border-radius: var(--radius-sm);
	padding: 6px 12px; min-height: 34px;
}
.day-watch:hover { background: var(--regent-green); color: #fff; text-decoration: none; }

/* ---- Leadership ---- */
/* Headshots are supplied at 250px square, so the circle is capped
   there — scaling them up would just look soft. */
.person { text-align: center; }
.person__photo {
	display: block;
	width: 100%; max-width: 180px; height: auto;
	aspect-ratio: 1 / 1; object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--border);
	margin: 0 auto 18px;
}
.person__photo--empty {
	display: flex; align-items: center; justify-content: center;
	background: var(--blue-50);
}
.person__photo--empty span {
	font-family: var(--serif-display); font-size: 52px; color: var(--blue-100);
	line-height: 1;
}
.person__name {
	font-family: var(--serif-display); font-weight: 400;
	font-size: 21px; line-height: 1.25; color: var(--regent-blue); margin: 0;
}
.person__role { font-size: 13px; margin: 8px 0 12px; }
.person__bio {
	font-size: 15.5px; line-height: 1.65; color: var(--neutral-800);
	margin: 0 auto; max-width: 34ch;
}

/* Full-width call to action inside a sidebar box. */
.btn--block, a.btn--block { display: block; width: 100%; text-align: center; }