/* ─── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Surfaces: vellum */
  --bg:           #FAF6EC;
  --surface:      #F3ECDC;

  /* Wheat (flourishes, rules, ornaments). Variable name kept for internal continuity. */
  --neutral:      #C9A96B;
  --neutral-40:   #E6DAC0;
  --neutral-20:   #EFE6D2;
  --neutral-10:   #F5EFE0;
  --wheat:        var(--neutral);

  /* Text: velvet */
  --text:         #2B1E1A;
  --meta:         #5E4A3F;
  --meta-60:      #8F7E70;

  /* Accent family. Names kept from the old blue theme so every rule keeps working.
     Umbrella default = velvet. Each masthead overrides this family below. */
  --blue:         #3B2C26;
  --blue-80:      #6B5A4F;
  --blue-40:      #CBBBA0;
  --blue-20:      #E2D6BF;
  --blue-10:      #F0E8D6;
  --blue-tint:    #F5EEDD;

  /* Large banded areas (top band, verse banner, CTA, quote card, footer).
     Umbrella = light vellum band. Mastheads = full jewel band. */
  --band:           #EFE6D0;
  --on-band:        #2B1E1A;
  --on-band-muted:  #5E4A3F;
  --on-band-faint:  #8F7E70;
  --band-rule:      #C9A96B;
  --hero-from:      #F3ECDC;
  --ink-shadow:     43,30,26;

  /* Strand colors: used only in the three-star signature mark and masthead sections */
  --strand-da:    #284268;
  --strand-msim:  #8C2818;
  --strand-fm:    #3A5E22;

  /* Category accents */
  --podcast:      #8C2818;
  --scripture:    #C4920C;
  --essays:       #284268;
  --books:        #3A5E22;

  --podcast-10:   #F4EAE8;
  --scripture-10: #F9F4E7;
  --essays-10:    #EAECF0;
  --books-10:     #EBEFE9;

  /* Typography */
  --serif: 'kepler-std', 'Cormorant Garamond', Georgia, serif;
  --display: 'jana-thork', 'kepler-std', 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, sans-serif;

  /* Layout */
  --max-w:   1140px;
  --col-gap: 2rem;
}

/* ─── MASTHEAD SECTIONS ──────────────────────────────────────────────
   body gets masthead-{slug} on any page or post assigned to a masthead,
   and on the masthead archive. Only the accent family and band change.   */
body.masthead-domus-aurea {
  --blue:#284268; --blue-80:#536080; --blue-40:#A9B3C3; --blue-20:#D4D9E1; --blue-10:#EAECF0; --blue-tint:#F0F2F6;
  --band:#284268; --on-band:#F2ECD8; --on-band-muted:#D5D9E2; --on-band-faint:#A9B3C3; --band-rule:#C9A96B;
  --hero-from:#EDF0F5; --ink-shadow:40,66,104;
}
body.masthead-secretum-meum-mihi {
  --blue:#8C2818; --blue-80:#A5524A; --blue-40:#D9B0A9; --blue-20:#EBD2CE; --blue-10:#F6E9E6; --blue-tint:#F9F0EE;
  --band:#8C2818; --on-band:#F6EBDD; --on-band-muted:#EBCFC8; --on-band-faint:#D9B0A9; --band-rule:#C9A96B;
  --hero-from:#F6EBE7; --ink-shadow:140,40,24;
}
body.masthead-fiat-mihi {
  --blue:#3A5E22; --blue-80:#5C7A47; --blue-40:#B4C4A8; --blue-20:#D8E2D0; --blue-10:#EBEFE9; --blue-tint:#F1F4EE;
  --band:#3A5E22; --on-band:#F2EEDC; --on-band-muted:#D8E2D0; --on-band-faint:#B4C4A8; --band-rule:#C9A96B;
  --hero-from:#EDF1E8; --ink-shadow:58,94,34;
}

/* ─── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ─── LAYOUT ─────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 2rem;
}

/* ─── MARIAN TOP BAND ────────────────────────────────────────────── */
.marian-band {
  background: var(--band);
  border-bottom: 1px solid var(--band-rule);
  padding: 0.45rem 0;
  text-align: center;
}
.marian-band p {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 300;
  font-style: italic;
  color: var(--on-band-muted);
  letter-spacing: 0.04em;
}
.marian-band .stars {
  letter-spacing: 0.3em;
  opacity: 0.55;
  font-style: normal;
  font-size: 0.55rem;
  vertical-align: middle;
  margin: 0 0.6rem;
}

/* ─── SITE HEADER / NAV ──────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--neutral-40);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 2rem;
}
.site-logo {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
}
.site-logo__mark {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
}
.site-logo__divider {
  width: 1px;
  height: 14px;
  background: var(--neutral);
  display: inline-block;
  vertical-align: middle;
  opacity: 0.6;
}
.site-logo__sub {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-80);
}

/* WordPress nav menu output */
.site-nav {
  display: flex;
  align-items: center;
}
.site-nav .menu,
.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.site-nav .menu li { position: relative; }
.site-nav .menu li a,
.site-nav ul li a {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  transition: color 0.15s;
  white-space: nowrap;
}
.site-nav .menu li a:hover { color: var(--blue); }

/* "Subscribe" nav item — styled as CTA button */
.site-nav .menu-item-subscribe a,
.site-nav .nav-cta {
  color: var(--blue) !important;
  border: 1px solid var(--blue-40);
  padding: 0.4rem 1.1rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.site-nav .menu-item-subscribe a:hover,
.site-nav .nav-cta:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--bg) !important;
}

/* Mobile toggle — hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  color: var(--meta);
  font-size: 1.2rem;
}
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--neutral-40); padding: 1rem 2rem; }
  .site-nav.is-open { display: block; }
  .site-nav .menu, .site-nav ul { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ─── BUTTONS ────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.8rem 2rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  border: none;
}
.btn--primary {
  background: var(--blue);
  color: var(--bg);
  border: 1px solid var(--blue);
}
/* Force white text — overrides WP reset and any plugin styles */
a.btn--primary,
a.btn--primary:visited,
a.btn--primary:hover,
a.btn--primary:focus { color: var(--bg) !important; }
.btn--primary:hover {
  background: var(--blue-80);
  border-color: var(--blue-80);
}
.btn--ghost {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue-40);
}
.btn--ghost:hover { background: var(--blue-10); }

/* ─── HERO ───────────────────────────────────────────────────────── */
.hero {
  /* Full-width gradient — the wrap inside constrains the content */
  background: linear-gradient(180deg, var(--hero-from) 0%, var(--bg) 60%);
  border-bottom: 1px solid var(--neutral-40);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '✦  ✦  ✦';
  position: absolute;
  top: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.45rem;
  letter-spacing: 0.5rem;
  color: var(--wheat);
  opacity: 0.9;
  white-space: nowrap;
}

/* Two-column grid inside the constrained wrap */
.hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__image { order: -1; }
}

/* Left column */
.hero__content { /* inherits wrap padding */ }

.hero__eyebrow {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue-80);
  margin-bottom: 1.4rem;
}
.hero__title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 1.3rem;
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--blue);
}
.hero__sub {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 300;
  font-style: italic;
  color: var(--meta);
  margin-bottom: 2.5rem;
  line-height: 1.75;
}
.hero__actions {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Right column */
.hero__image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__image img,
.hero__img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  border: 1px solid var(--neutral-40);
}
.hero__image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--blue-10);
  border: 1px dashed var(--blue-40);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-40);
  line-height: 1.8;
}

/* ─── MARIAN VERSE BANNER ────────────────────────────────────────── */
.marian-verse {
  background: var(--band);
  padding: 2.75rem 0;
  text-align: center;
}
.marian-verse__rule {
  width: 36px;
  height: 1px;
  background: var(--neutral-40);
  margin: 0 auto 1.4rem;
  opacity: 0.5;
}
.marian-verse__text {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 300;
  font-style: italic;
  color: var(--on-band);
  max-width: 580px;
  margin: 0 auto 0.75rem;
  line-height: 1.55;
}
.marian-verse__ref {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-band-muted);
}

/* ─── SECTION HEADER ─────────────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--neutral-40);
}
.section-head__label {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--meta);
}
.section-head__link {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-80);
  text-decoration: underline;
  text-decoration-color: var(--blue-20);
}
.section-head__link:hover { color: var(--blue); }

/* ─── MAIN CONTENT GRID ──────────────────────────────────────────── */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--col-gap);
  padding: 3.5rem 0;
}
@media (max-width: 900px) {
  .main-grid { grid-template-columns: 1fr; }
}

/* ─── FEATURED POST ──────────────────────────────────────────────── */
.post-card--featured {
  background: var(--blue-10);
  border: 1px solid var(--blue-20);
  border-left: 3px solid var(--blue);
  padding: 1.75rem;
  margin-bottom: 2rem;
}
.featured-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.53rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--blue);
  color: rgba(234,224,196,0.9);
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.8rem;
}
.post-card--featured .post-card__category {
  display: block;
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-80);
  margin-bottom: 0.4rem;
}
.post-card--featured .post-card__title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.post-card--featured .post-card__title a { color: inherit; }
.post-card--featured .post-card__title a:hover { color: var(--blue); }
.post-card--featured .post-card__excerpt {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 300;
  font-style: italic;
  color: var(--meta);
  line-height: 1.65;
  margin-bottom: 0.6rem;
}
.post-card--featured .post-card__meta {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meta-60);
}

/* ─── POST LIST ──────────────────────────────────────────────────── */
.post-list { display: flex; flex-direction: column; }
.post-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--neutral-40);
}
.post-card:first-child { padding-top: 0; }
.post-card__category {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  color: var(--meta);
}
.post-card__title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}
.post-card__title a {
  color: var(--text);
  transition: color 0.15s;
}
.post-card:hover .post-card__title a { color: var(--blue); }
.post-card__excerpt {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 300;
  font-style: italic;
  color: var(--meta);
  line-height: 1.65;
  margin-bottom: 0.5rem;
}
.post-card__meta {
  font-family: var(--sans);
  font-size: 0.57rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--meta-60);
  text-transform: uppercase;
}
.post-card__thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid var(--neutral-40);
  flex-shrink: 0;
}
.post-card__thumb--placeholder {
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  opacity: 0.4;
}

/* Category colour tokens */
.cat--podcast   { color: var(--podcast); }
.cat--scripture { color: var(--scripture); }
.cat--essays    { color: var(--essays); }
.cat--books     { color: var(--books); }
.cat--pray      { color: var(--blue-80); }

/* ─── SIDEBAR ────────────────────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: 1.75rem; }

.widget {
  background: var(--surface);
  border: 1px solid var(--neutral-40);
  padding: 1.35rem;
}
.widget--blue {
  background: var(--blue-10);
  border-color: var(--blue-20);
}
.widget__title {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--neutral-40);
}
.widget--blue .widget__title {
  color: var(--blue-80);
  border-bottom-color: var(--blue-20);
}

/* Newsletter widget */
.widget--newsletter p {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 300;
  font-style: italic;
  color: var(--meta);
  line-height: 1.65;
  margin-bottom: 1rem;
}

/* Marian quote card */
.marian-card {
  background: var(--band);
  border: none;
  padding: 1.5rem;
  text-align: center;
}
.marian-card__stars {
  font-size: 0.5rem;
  letter-spacing: 0.4rem;
  color: var(--on-band-muted);
  margin-bottom: 0.8rem;
}
.marian-card__text {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 300;
  font-style: italic;
  color: var(--on-band);
  line-height: 1.7;
  margin-bottom: 0.6rem;
}
.marian-card__attribution {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-band-muted);
}

/* WordPress built-in widget overrides */
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--neutral-40);
  font-family: var(--serif);
  font-size: 0.9rem;
}
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--text); transition: color 0.15s; }
.widget ul li a:hover { color: var(--blue); }

/* Category list with post counts */
.widget_categories ul li,
.widget_archive ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.widget_categories .cat-item a,
.widget_archive li a {
  font-family: var(--sans);
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ─── COMMUNITY SECTION ──────────────────────────────────────────── */
.community-section {
  background: var(--surface);
  border-top: 1px solid var(--neutral);
  border-bottom: 1px solid var(--neutral);
  padding: 3.5rem 0;
}
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 700px) { .community-grid { grid-template-columns: 1fr; } }
.community-card {
  background: var(--bg);
  border: 1px solid var(--neutral-40);
  padding: 1.5rem;
  transition: border-color 0.2s;
}
.community-card:hover { border-color: var(--blue-40); }
.community-card__icon {
  font-size: 1.3rem;
  color: var(--blue);
  margin-bottom: 0.75rem;
  opacity: 0.7;
}
.community-card__label {
  font-family: var(--sans);
  font-size: 0.57rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-80);
  margin-bottom: 0.3rem;
}
.community-card__title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.community-card__desc {
  font-family: var(--serif);
  font-size: 0.86rem;
  font-weight: 300;
  font-style: italic;
  color: var(--meta);
  line-height: 1.65;
}

/* ─── SCRIPTURE STRIP ────────────────────────────────────────────── */
.scripture-strip {
  padding: 4rem 0;
  text-align: center;
}
.scripture-strip__ornament {
  font-size: 0.5rem;
  letter-spacing: 0.5rem;
  color: var(--neutral);
  margin-bottom: 1.4rem;
  opacity: 0.8;
}
.scripture-strip__verse {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  max-width: 760px;
  margin: 0 auto 0.75rem;
  line-height: 1.55;
}
.scripture-strip__ref {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--meta-60);
}

/* ─── SINGLE POST ────────────────────────────────────────────────── */
.single-wrap {
  max-width: 740px;
  margin-inline: auto;
  padding: 3.5rem 2rem;
}
.post-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--neutral-40); }
.post-header .post-card__category { margin-bottom: 0.75rem; }
.post-header h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 1rem;
}
.post-header__meta {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta-60);
}
.post-content {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
}
.post-content h2 { font-size: 1.6rem; font-weight: 400; margin: 2rem 0 0.75rem; color: var(--blue); }
.post-content h3 { font-size: 1.3rem; font-weight: 500; margin: 1.75rem 0 0.6rem; }
.post-content p { margin-bottom: 1.35rem; }
.post-content blockquote {
  border-left: 3px solid var(--blue);
  padding-left: 1.5rem;
  margin: 1.75rem 0;
  font-style: italic;
  color: var(--meta);
}
.post-content a { color: var(--blue); text-decoration: underline; text-decoration-color: var(--blue-20); }
.post-content a:hover { text-decoration-color: var(--blue); }
.post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: 1.35rem; }
.post-content li { margin-bottom: 0.4rem; }
.post-content img { margin: 2rem auto; border: 1px solid var(--neutral-40); }
.post-content hr { border: none; border-top: 1px solid var(--neutral-40); margin: 2.5rem 0; }

/* ─── STANDARD PAGE CONTENT ──────────────────────────────────────── */
.page-wrap {
  max-width: 740px;
  margin-inline: auto;
  padding: 3.5rem 2rem;
}
.page-wrap h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  color: var(--text);
}
.page-wrap .entry-content {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.8;
}
.page-wrap .entry-content p { margin-bottom: 1.35rem; }
.page-wrap .entry-content a { color: var(--blue); text-decoration: underline; }
.page-wrap .entry-content h2 { font-size: 1.6rem; font-weight: 400; margin: 2rem 0 0.75rem; }
.page-wrap .entry-content h3 { font-size: 1.3rem; font-weight: 500; margin: 1.75rem 0 0.6rem; }

/* ─── PAGINATION ─────────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--neutral-40);
}
.pagination a,
.pagination span {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--neutral-40);
  color: var(--meta);
  transition: all 0.15s;
}
.pagination a:hover { border-color: var(--blue); color: var(--blue); }
.pagination .current { background: var(--blue); border-color: var(--blue); color: var(--bg); }

/* ─── 404 ────────────────────────────────────────────────────────── */
.error-404 {
  text-align: center;
  padding: 6rem 2rem;
}
.error-404 h1 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  color: var(--blue);
  margin-bottom: 1rem;
}
.error-404 p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--meta);
  margin-bottom: 2rem;
}

/* ─── FOOTER ─────────────────────────────────────────────────────── */
.site-footer {
  background: var(--band);
  color: var(--on-band);
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--on-band);
  margin-bottom: 0.45rem;
}
.footer-brand__tagline {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 300;
  font-style: italic;
  color: var(--on-band-muted);
  line-height: 1.65;
  max-width: 280px;
  margin-bottom: 1.25rem;
}
.footer-brand__stars {
  font-size: 0.45rem;
  letter-spacing: 0.45rem;
  color: var(--on-band-muted);
  opacity: 0.7;
}
.footer-nav__label {
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-band-muted);
  margin-bottom: 0.9rem;
}

/* Footer nav menu output */
.footer-nav .menu,
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.footer-nav .menu li a,
.footer-nav ul li a {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--on-band-muted);
  transition: color 0.15s;
}
.footer-nav .menu li a:hover,
.footer-nav ul li a:hover { color: var(--on-band); }

.footer-bottom {
  border-top: 1px solid var(--band-rule);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom p {
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--on-band-faint);
  text-transform: uppercase;
}
.footer-bottom a {
  color: var(--on-band-faint);
  transition: color 0.15s;
}
.footer-bottom a:hover { color: var(--on-band-muted); }

/* ─── GUTENBERG BUTTON OVERRIDES ────────────────────────────────── */
/* Applied via className in patterns — avoids inline style conflicts */
.wp-block-button.hog-btn-primary .wp-block-button__link {
  background: var(--blue);
  color: var(--bg);
  border: 1px solid var(--blue);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 0.8rem 2rem;
  transition: background 0.2s, border-color 0.2s;
}
.wp-block-button.hog-btn-primary .wp-block-button__link:hover {
  background: var(--blue-80);
  border-color: var(--blue-80);
}
.wp-block-button.hog-btn-ghost .wp-block-button__link,
.wp-block-button.is-style-outline.hog-btn-ghost .wp-block-button__link {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue-40);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 0.8rem 2rem;
  transition: background 0.2s;
}
.wp-block-button.hog-btn-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-outline.hog-btn-ghost .wp-block-button__link:hover {
  background: var(--blue-10);
}

/* ─── TEAM GRID ──────────────────────────────────────────────────── */
.team-intro {
  max-width: 560px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.team-intro h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 0.75rem;
}
.team-intro p {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--meta);
  line-height: 1.75;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 650px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .team-grid { grid-template-columns: 1fr; } }

/* Individual card */
.team-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.team-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--blue-10);
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}
.team-card:hover .team-card__photo img { transform: scale(1.04); }

/* Placeholder for when no photo is set */
.team-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 300;
  color: var(--blue-40);
  background: var(--blue-10);
}

/* Hover overlay — slides up from bottom */
.team-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--blue);
  padding: 1rem 1rem 0.9rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.team-card:hover .team-card__overlay { transform: translateY(0); }
.team-card__overlay-name {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(242,236,216,0.95);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.team-card__overlay-role {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-40);
}

/* ─── TEAM MODAL ─────────────────────────────────────────────────── */
.team-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.team-modal.is-open { display: flex; }

.team-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-shadow),0.72);
  backdrop-filter: blur(3px);
  cursor: pointer;
}
.team-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--bg);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  animation: modalIn 0.25s ease;
}
@media (max-width: 600px) {
  .team-modal__panel { grid-template-columns: 1fr; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.team-modal__photo {
  background: var(--blue-10);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.team-modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.team-modal__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 4rem;
  color: var(--blue-40);
}

.team-modal__content {
  padding: 2rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.team-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--meta-60);
  line-height: 1;
  padding: 0.25rem;
  z-index: 2;
}
.team-modal__close:hover { color: var(--text); }
.team-modal__name {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.team-modal__role {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-80);
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--neutral-40);
}
.team-modal__bio {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--meta);
  margin-bottom: 1.5rem;
}
.team-modal__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: auto;
}
.team-modal__social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--blue-40);
  padding: 0.4rem 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.team-modal__social-link:hover {
  background: var(--blue);
  color: var(--bg) !important;
  border-color: var(--blue);
}

/* ─── WORDPRESS ALIGNMENT HELPERS ────────────────────────────────── */
.alignleft  { float: left; margin: 0.5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 1.5rem auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text {
  font-family: var(--sans);
  font-size: 0.65rem;
  color: var(--meta-60);
  text-align: center;
  padding-top: 0.4rem;
}

/* ─── GOLD BUTTON VARIANT ────────────────────────────────────────── */
.btn--gold {
  background: var(--neutral);
  color: var(--text);
  border: 1px solid var(--neutral);
}
a.btn--gold,
a.btn--gold:visited,
a.btn--gold:hover,
a.btn--gold:focus { color: var(--text) !important; }
.btn--gold:hover { opacity: 0.88; }

/* ─── SHARED EYEBROW ─────────────────────────────────────────────── */
.section-eyebrow {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.1rem;
}

/* ─── ABOUT BLOCK ────────────────────────────────────────────────── */
.about-block { padding: 5rem 0; }
.about-block__inner { max-width: 680px; margin: 0 auto; }
.about-block .section-eyebrow { color: var(--blue-80); }
.about-block h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--text);
}
.about-block__rule { width: 3rem; height: 1px; background: var(--neutral); margin: 1.5rem 0; }
.about-block p { font-family: var(--serif); font-size: 1.05rem; font-weight: 300; line-height: 1.85; color: var(--meta); }
.about-block p + p { margin-top: 1.2rem; }
.about-block em { font-style: italic; color: var(--text); }

/* ─── NOVENA CTA ─────────────────────────────────────────────────── */
.novena-cta { background: var(--band); padding: 5rem 0; text-align: center; }
.novena-cta__inner { max-width: 580px; margin: 0 auto; }
.novena-cta .section-eyebrow { color: var(--on-band-muted); }
.novena-cta h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 300;
  color: var(--on-band);
  line-height: 1.2;
}
.novena-cta__inner--quote { max-width: 760px; }
.novena-cta__inner--quote .novena-cta__subtitle { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.7; }
.novena-cta__rule { width: 3rem; height: 1px; background: var(--band-rule); margin: 1.5rem auto; }
.novena-cta__subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  color: var(--on-band-muted);
  margin-bottom: 1.25rem;
}
.novena-cta p { font-family: var(--serif); font-size: 1rem; font-weight: 300; line-height: 1.8; color: var(--on-band-muted); }
.novena-cta p + p { margin-top: 1rem; }
.novena-cta__actions { margin-top: 2rem; }
.novena-cta__note { margin-top: 1.1rem; font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-band-faint); }

/* ─── NEWSLETTER BLOCK ───────────────────────────────────────────── */
.newsletter-block { padding: 5rem 0; background: var(--surface); border-top: 1px solid var(--neutral-40); border-bottom: 1px solid var(--neutral-40); }
.newsletter-block__inner { max-width: 680px; margin: 0 auto; }
.newsletter-block .section-eyebrow { color: var(--blue-80); }
.newsletter-block__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--blue);
}
.newsletter-block__rule { width: 3rem; height: 1px; background: var(--neutral); margin: 1.35rem 0; }
.newsletter-block p { font-family: var(--serif); font-size: 1.05rem; font-weight: 300; line-height: 1.85; color: var(--meta); }
.newsletter-block p + p { margin-top: 1rem; }
.newsletter-block em { font-style: italic; }
.newsletter-block__actions { margin-top: 2rem; }

/* ─── INSTAGRAM BLOCK ────────────────────────────────────────────── */
.instagram-block { padding: 5rem 0; text-align: center; }
.instagram-block__inner { max-width: 540px; margin: 0 auto; }
.instagram-block .section-eyebrow { color: var(--blue-80); }
.instagram-block h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.2;
}
.instagram-block__rule { width: 3rem; height: 1px; background: var(--neutral); margin: 1.5rem auto; }
.instagram-block p { font-family: var(--serif); font-size: 1.05rem; font-weight: 300; font-style: italic; color: var(--meta); line-height: 1.8; margin-bottom: 2rem; }

/* ─── BOOKS SECTION ──────────────────────────────────────────────── */
.books-section {
  padding: 4rem 0;
}
.books-section__inner {
  max-width: 780px;
  margin: 0 auto;
}

/* ─── BOOK CARD ──────────────────────────────────────────────────── */
.book-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 2.25rem;
  align-items: start;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--neutral-40);
}
.book-card:first-child { padding-top: 0; }
.book-card:last-child { border-bottom: none; }

@media (max-width: 580px) {
  .book-card {
    grid-template-columns: 1fr;
  }
  .book-card__cover { max-width: 160px; }
}

.book-card__cover img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--neutral-40);
  box-shadow: 0 4px 16px rgba(var(--ink-shadow),0.10);
}
.book-card__cover-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--blue-10);
  border: 1px dashed var(--blue-40);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-40);
}
.book-card__badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--blue);
  color: rgba(234,224,196,0.9);
  padding: 0.18rem 0.5rem;
  margin-bottom: 0.75rem;
}
.book-card__badge--coming {
  background: var(--neutral);
  color: var(--text);
}
.book-card__title {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.book-card__author {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-80);
  margin-bottom: 1rem;
}
.book-card__desc {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  color: var(--meta);
  margin-bottom: 1.5rem;
}
.book-card__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   EPISODE CARDS  (podcast page listing)
   ═══════════════════════════════════════════════════════════════════ */

.episodes-section {
  padding: 4rem 0 5rem;
}

.episode-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}
.episode-card:first-of-type { border-top: 1px solid var(--rule); }

.episode-card__thumb {
  flex: 0 0 96px;
}
.episode-card__thumb img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 4px;
}

.episode-card__body {
  flex: 1;
}

.episode-card__meta {
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  margin: 0 0 0.4rem;
  display: flex;
  gap: 1rem;
}

.episode-card__title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.25rem;
  line-height: 1.25;
}
.episode-card__title a {
  color: inherit;
  text-decoration: none;
}
.episode-card__title a:hover { color: var(--blue); }

.episode-card__guest {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--meta);
  margin: 0 0 0.6rem;
  font-style: italic;
}

.episode-card__desc {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 1rem;
}

.episode-card__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn--sm {
  padding: 0.35rem 0.9rem;
  font-size: 0.6rem;
}

.episode-card__more {
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
}
.episode-card__more:hover { text-decoration: underline; }

/* ── Single Episode ───────────────────────────────────────────────── */

.single-episode .wrap { padding-top: 4rem; padding-bottom: 4rem; }

.episode-single {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 640px) {
  .episode-single { grid-template-columns: 1fr; }
}

.episode-single__art img {
  width: 100%;
  border-radius: 6px;
}

.episode-single__title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0.5rem 0 0.5rem;
  line-height: 1.2;
}

.episode-single__listen {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.episode-single__notes { margin-top: 1.5rem; }

.episode-single__back,
.book-single__back {
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2rem;
}
.episode-single__back a,
.book-single__back a {
  color: var(--blue);
  text-decoration: none;
}
.episode-single__back a:hover,
.book-single__back a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   BOOK SINGLE PAGE
   ═══════════════════════════════════════════════════════════════════ */

.single-book .wrap { padding-top: 4rem; padding-bottom: 4rem; }

.book-single {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 640px) {
  .book-single { grid-template-columns: 1fr; }
}

.book-single__cover img {
  width: 100%;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  border-radius: 3px;
}

.book-single__title {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0.5rem 0 0.5rem;
  line-height: 1.15;
}

.book-single__author {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--meta);
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.book-single__content { margin: 1.5rem 0 2rem; }

/* ═══════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════════ */

.contact-section {
  padding: 4rem 0 5rem;
}

.contact-section__inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 768px) {
  .contact-section__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ── Reason cards ─────────────────────────────────────────────────── */

.contact-reasons {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-reason {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.contact-reason:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contact-reason__icon {
  font-size: 1.4rem;
  flex: 0 0 auto;
  line-height: 1;
  padding-top: 0.15rem;
}

.contact-reason__title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.contact-reason__desc {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.65;
  margin: 0;
}
.contact-reason__desc a {
  color: var(--blue);
  text-decoration: underline;
}

/* ── Direct contact sidebar ───────────────────────────────────────── */

.contact-direct {
  background: var(--cream, #faf8f4);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2rem;
}

.contact-direct .section-eyebrow {
  display: block;
  margin-bottom: 0.75rem;
}

.contact-direct__rule {
  height: 1px;
  background: var(--neutral);
  width: 2.5rem;
  margin-bottom: 1.25rem;
}

.contact-direct p {
  margin: 0 0 0.6rem;
}
.contact-direct p:last-child { margin-bottom: 0; }

.contact-direct__link {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--blue);
  text-decoration: none;
  word-break: break-all;
}
.contact-direct__link:hover { text-decoration: underline; }

/* ── Publishing note ──────────────────────────────────────────────── */

.contact-note {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}

.contact-note p {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--meta);
  line-height: 1.7;
  margin: 0;
}


/* ─── SIGNATURE MARK (three stars, one rule) ─────────────────────── */
.sig-mark { display: inline-block; line-height: 0; }
.sig-mark svg { width: 196px; max-width: 60vw; height: 14px; display: block; }
.sig-mark .rule { stroke: var(--wheat); stroke-width: 1; }
.sig-mark--sm svg { width: 140px; height: 10px; }
.marian-band .sig-mark svg { margin: 0 auto; }
.marian-band { padding: 0.55rem 0; }
.footer-brand__mark { margin-bottom: 0.25rem; }

/* ─── MASTHEAD ARCHIVE ───────────────────────────────────────────── */
.masthead-hero .hero__title em { color: var(--blue); }
.masthead-switch {
  display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center;
  padding: 0.9rem 0; border-bottom: 1px solid var(--neutral-40); background: var(--bg);
}
.masthead-switch a {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--meta); padding-bottom: 0.2rem; border-bottom: 1px solid transparent;
}
.masthead-switch a:hover { color: var(--text); border-bottom-color: var(--wheat); }
.masthead-switch a.is-current { color: var(--blue); border-bottom-color: var(--blue); }
.masthead-tag {
  display: inline-block; font-family: var(--sans); font-size: 0.52rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue-80); margin-left: 0.6rem;
}

/* Light bands in the umbrella get wheat rules so they read as flourishes, not blocks */
.site-footer { border-top: 1px solid var(--band-rule); }
.marian-verse, .novena-cta { border-top: 1px solid var(--band-rule); border-bottom: 1px solid var(--band-rule); }
.marian-card { border: 1px solid var(--band-rule); }

/* Masthead bands are jewel-colored, so the mark there uses all-gold stars (no plate). */
.marian-verse__rule { background: var(--band-rule); opacity: 1; }


/* ─── DISPLAY TYPE: Jana Thork (wordmarks and titles only) ───────── */
.site-logo__mark,
.hero__title,
.footer-brand__name,
.novena-cta h2,
.team-intro h1,
.page-wrap h1 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
.hero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ─── PODCAST PICKER (three squares) ─────────────────────────────── */
.podcast-picker { padding: 3rem 0 5rem; }
.podcast-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 760px) { .podcast-picker__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.podcast-tile { display: block; text-align: center; color: var(--text); }
.podcast-tile--da   { --tile: var(--strand-da); }
.podcast-tile--msim { --tile: var(--strand-msim); }
.podcast-tile--fm   { --tile: var(--strand-fm); }
.podcast-tile__art {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--neutral-40);
  box-shadow: 0 4px 16px rgba(var(--ink-shadow),0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.podcast-tile__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.podcast-tile:hover .podcast-tile__art,
.podcast-tile:focus-visible .podcast-tile__art {
  transform: translateY(-4px);
  border-color: var(--tile);
  box-shadow: 0 10px 28px rgba(var(--ink-shadow),0.18);
}
.podcast-tile__name { display: block; margin-top: 1.1rem; font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.podcast-tile__blurb { display: block; margin-top: 0.4rem; font-style: italic; font-weight: 300; color: var(--meta); font-size: 0.95rem; }
.podcast-tile__cta {
  display: inline-block; margin-top: 0.8rem; padding-bottom: 0.2rem;
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tile); border-bottom: 1px solid var(--wheat);
}

/* ─── MASTHEAD PAGE: NEWS, SUBSTACK, PODCAST ─────────────────────── */
.masthead-news { padding: 3rem 0 0.5rem; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.news-card { background: var(--bg); border: 1px solid var(--neutral-40); display: flex; flex-direction: column; }
.news-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--blue-10); }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.news-card__date { font-family: var(--sans); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-80); margin-bottom: 0.5rem; }
.news-card__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.25; margin-bottom: 0.5rem; }
.news-card__title a:hover { color: var(--blue); }
.news-card__excerpt { font-style: italic; font-weight: 300; color: var(--meta); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; }
.news-card__cta { margin-top: auto; align-self: flex-start; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); border-bottom: 1px solid var(--wheat); padding-bottom: 0.15rem; }

.masthead-feeds { padding: 3rem 0 5rem; }
.masthead-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.masthead-empty { font-style: italic; color: var(--meta); padding: 1rem 0; }
.masthead-empty a { color: var(--blue); text-decoration: underline; }
.masthead-col .post-card:first-child { padding-top: 0; }

@media (max-width: 900px) {
  .news-grid { grid-template-columns: 1fr; }
  .masthead-cols { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ─── COURSE PAGE: Under Mary's Mantle (classes prefixed c-) ──────── */
.c-wrap--narrow { max-width: 760px; margin-inline: auto; padding-inline: 2rem; }

/* ── Utility type ───────────────────────────────────────────── */
.c-eyebrow {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue-80);
}
.c-rule {
  width: 36px; height: 1px;
  background: var(--neutral);
  margin: 0 0 1.6rem;
}
.c-rule--center { margin-inline: auto; }

/* ── Hero ───────────────────────────────────────────────────── */
.c-hero {
  background: linear-gradient(180deg, var(--hero-from) 0%, var(--bg) 65%);
  border-bottom: 1px solid var(--neutral-40);
  padding: 5rem 0 4.5rem;
  position: relative; overflow: hidden;
}
.c-hero::before {
  content: '\2726  \2726  \2726';
  position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%);
  font-size: 0.45rem; letter-spacing: 0.5rem;
  color: var(--wheat); opacity: 0.9; white-space: nowrap;
}
.c-hero .wrap {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.5rem; align-items: center;
}
.c-hero__eyebrow { margin-bottom: 0.9rem; }
/* The course name in text, not only inside the cover image, so screen readers
   and search engines can find it. */
.c-hero__coursename {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 400; font-style: italic;
  letter-spacing: 0.01em; line-height: 1.4;
  color: var(--meta); margin-bottom: 1.3rem;
}
.c-hero__coursename span { font-style: normal; font-weight: 500; letter-spacing: 0.02em; }
.c-hero__title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 300; line-height: 1.1; letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.c-hero__title em { font-style: italic; font-weight: 300; color: var(--blue); }
.c-hero__sub {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 300;
  color: var(--meta); line-height: 1.75; margin-bottom: 2rem;
}
.c-hero__sub strong { font-weight: 500; color: var(--text); }
.c-hero__meta {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 300;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta-60);
  margin-bottom: 2rem; line-height: 2;
}
.c-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.c-hero__image { display: flex; align-items: center; justify-content: center; }
.c-hero__image img { width: 100%; max-width: 420px; border: 1px solid var(--neutral-40); }
.c-hero__image-placeholder {
  width: 100%; max-width: 420px; aspect-ratio: 4 / 5;
  background: var(--blue-10); border: 1px dashed var(--blue-40);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue-40); line-height: 1.8;
}
.c-hero__caption {
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--meta-60);
  text-align: center; margin-top: 0.8rem;
}

/* ── Generic section ────────────────────────────────────────── */
.c-section { padding: 4.5rem 0; }
.c-section--surface { background: var(--surface); border-block: 1px solid var(--neutral-40); }
.c-section--tint { background: var(--neutral-10); border-block: 1px solid var(--neutral-40); }
.c-section__title {
  font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 300; line-height: 1.2; margin-bottom: 1.5rem;
}
.c-section__title em { font-style: italic; color: var(--blue); }
.c-prose p {
  font-family: var(--serif); font-size: 1.08rem; font-weight: 400;
  line-height: 1.78; color: var(--text); margin-bottom: 1.25rem;
}
.c-prose p:last-child { margin-bottom: 0; }
.c-prose p.c-lead {
  font-size: 1.22rem; font-weight: 300; font-style: italic; color: var(--blue);
  line-height: 1.65;
}
.c-prose strong { font-weight: 600; }

/* ── Session list ───────────────────────────────────────────── */
.c-sessions { display: flex; flex-direction: column; margin-top: 2.5rem; }
.c-session {
  display: grid; grid-template-columns: 68px 1fr; gap: 1.75rem;
  padding: 2rem 0; border-top: 1px solid var(--neutral-40); align-items: start;
}
.c-session:last-child { border-bottom: 1px solid var(--neutral-40); }
.c-session__num {
  font-family: var(--serif); font-size: 2.5rem; font-weight: 300;
  color: var(--neutral); line-height: 1;
}
.c-session__label {
  font-family: var(--sans); font-size: 0.56rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue-80); margin-bottom: 0.5rem;
}
.c-session__title {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 400;
  line-height: 1.25; margin-bottom: 0.6rem;
}
.c-session__desc {
  font-family: var(--serif); font-size: 1rem; font-weight: 300;
  font-style: italic; color: var(--meta); line-height: 1.7; margin-bottom: 0.9rem;
}
.c-session__points { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.c-session__points li {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--meta); background: var(--neutral-20);
  border: 1px solid var(--neutral-40); padding: 0.32rem 0.7rem;
}
/* Jost draws its typographic quotes as straight vertical wedges, so a correct
   “ still reads as a typewriter quote inside these chips. Setting just
   the marks in Cormorant restores the curl; the words keep the sans treatment. */
.c-session__points .c-q {
  font-family: var(--serif);
  font-size: 1.25em;
  letter-spacing: 0;
  line-height: 0;
  vertical-align: -0.02em;
}

/* ── For-you list ───────────────────────────────────────────── */
.c-foryou { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2.5rem; }
.c-foryou__col h3 {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding-bottom: 0.6rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--neutral-40);
}
.c-foryou__col--yes h3 { color: var(--blue); }
.c-foryou__col--no h3 { color: var(--strand-msim); }
.c-foryou__col ul { list-style: none; }
.c-foryou__col li {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 400;
  line-height: 1.55; color: var(--text);
  padding: 0.7rem 0 0.7rem 1.5rem; position: relative;
}
.c-foryou__col--yes li::before {
  content: '\2726'; position: absolute; left: 0; top: 0.85rem;
  font-size: 0.5rem; color: var(--neutral);
}
.c-foryou__col--no li { color: var(--meta); }
.c-foryou__col--no li::before {
  content: '\2022'; position: absolute; left: 0.2rem; top: 0.6rem;
  color: var(--meta-60);
}

/* ── Teacher card ───────────────────────────────────────────── */
.c-teacher { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: start; }

/* The photograph pins while the bio scrolls past it, then releases at the
   end of .c-teacher so the next section takes over. The offset clears the
   sticky site header (64px) plus breathing room. Note: no ancestor of
   .c-teacher may set overflow, or sticky silently stops working. */
.c-teacher__photo {
  position: sticky;
  top: calc(64px + 1.75rem);
  align-self: start;
}
.c-teacher__photo img { width: 100%; border: 1px solid var(--neutral-40); }
.c-teacher__photo-placeholder {
  width: 100%; aspect-ratio: 4 / 5; background: var(--blue-10);
  border: 1px dashed var(--blue-40);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue-40); line-height: 1.8;
}
.c-teacher__name {
  font-family: var(--serif); font-size: 2rem; font-weight: 300; margin-bottom: 0.3rem;
}
.c-teacher__role {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue-80); margin-bottom: 1.4rem;
}
.c-credentials { list-style: none; margin-top: 1.6rem; }
.c-credentials li {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 300;
  letter-spacing: 0.03em; color: var(--meta);
  padding: 0.55rem 0; border-top: 1px solid var(--neutral-40);
}

/* ── Details panel ──────────────────────────────────────────── */
.c-details {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--neutral-40);
  border: 1px solid var(--neutral-40); margin-top: 2.5rem;
}
.c-details__item { background: var(--bg); padding: 1.75rem 1.5rem; text-align: center; }
.c-details__label {
  font-family: var(--sans); font-size: 0.55rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--meta-60); margin-bottom: 0.6rem;
}
.c-details__value {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 400;
  line-height: 1.3; color: var(--text);
}
.c-details__note {
  font-family: var(--sans); font-size: 0.58rem; font-weight: 300;
  letter-spacing: 0.06em; color: var(--meta-60); margin-top: 0.4rem;
}

/* ── Signup ─────────────────────────────────────────────────── */
.c-signup { background: var(--band); padding: 5rem 0; text-align: center; }
.c-signup__eyebrow {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 300;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--on-band-muted); margin-bottom: 1.3rem;
}
.c-signup__title {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 300; color: var(--on-band);
  line-height: 1.2; margin-bottom: 1.1rem;
}
.c-signup__title em { font-style: italic; color: var(--neutral); }
.c-signup__sub {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 300; font-style: italic;
  color: var(--on-band-muted); max-width: 520px;
  margin: 0 auto 2.5rem; line-height: 1.7;
}
.c-signup__fine {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 300;
  letter-spacing: 0.05em; color: var(--on-band-muted);
  margin-top: 1.5rem; line-height: 1.8;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .c-details { grid-template-columns: repeat(2, 1fr); }
  .c-teacher { grid-template-columns: 1fr; gap: 2rem; }
  /* Single column on small screens, so there is nothing to pin against */
  .c-teacher__photo { max-width: 260px; position: static; }
}
@media (max-width: 760px) {
  .c-hero { padding: 3.5rem 0 3rem; }
  .c-hero .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .c-hero__image { order: -1; }
  .c-foryou { grid-template-columns: 1fr; gap: 2.5rem; }
  .c-session { grid-template-columns: 46px 1fr; gap: 1.1rem; }
  .c-session__num { font-size: 1.9rem; }
  .c-section { padding: 3.25rem 0; }
  .c-wrap--narrow { padding-inline: 1.5rem; }
  .c-signup .btn { width: 100%; }
}

/* ── Reveal on scroll ────────────────────────────────────────
   Elements marked .reveal start slightly low and transparent, then settle
   when they scroll into view. Everything is gated behind .js so the page
   renders complete with JavaScript off, and behind the reduced-motion
   query so it stays still for anyone who has asked for that. */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
/* will-change is dropped once the reveal is done: leaving it on a sticky
   element keeps a compositor layer alive for no reason. */
.js .reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* Gold rules draw outward from the left rather than fading */
.js .c-rule.reveal {
  transform: none;
  transform-origin: left center;
  transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .c-rule.reveal:not(.is-in) { transform: scaleX(0); opacity: 1; }
.js .c-rule--center.reveal { transform-origin: center; }

/* The teacher photograph settles in rather than sliding */
.js .c-teacher__photo.reveal { transform: translateY(18px) scale(0.985); }
.js .c-teacher__photo.reveal.is-in { transform: none; }
.js .c-teacher__photo.reveal img {
  transition: filter 1.1s ease;
  filter: saturate(0.82);
}
.js .c-teacher__photo.reveal.is-in img { filter: none; }

/* Stagger: set per element by the script below */
.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
.js .reveal[data-delay="4"] { transition-delay: 0.32s; }
.js .reveal[data-delay="5"] { transition-delay: 0.40s; }
.js .reveal[data-delay="6"] { transition-delay: 0.48s; }

/* Hero settles on load, not on scroll */
.js .c-hero__content > *,
.js .c-hero__image { opacity: 0; transform: translateY(14px); }
.js .c-hero.is-in .c-hero__content > *,
.js .c-hero.is-in .c-hero__image {
  opacity: 1; transform: none;
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .c-hero.is-in .c-hero__image { transition-delay: 0.10s; }
.js .c-hero.is-in .c-hero__content > *:nth-child(1) { transition-delay: 0.00s; }
.js .c-hero.is-in .c-hero__content > *:nth-child(2) { transition-delay: 0.07s; }
.js .c-hero.is-in .c-hero__content > *:nth-child(3) { transition-delay: 0.14s; }
.js .c-hero.is-in .c-hero__content > *:nth-child(4) { transition-delay: 0.21s; }
.js .c-hero.is-in .c-hero__content > *:nth-child(5) { transition-delay: 0.28s; }

/* Buttons and links get a quieter hover now that the page moves */
.btn { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.c-session { transition: background 0.4s ease; }
.c-session:hover { background: rgba(208,170,90,0.045); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-in,
  .js .c-rule.reveal:not(.is-in),
  .js .c-teacher__photo.reveal,
  .js .c-hero__content > *,
  .js .c-hero__image {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .c-session:hover { background: none; }
}


/* ─── DARK ACCENT BANDS (v2.10.1) ─────────────────────────────────────
   The top band, header, verse band and footer stay vellum. Only the front-page
   hero and one lower section (the free download) use the warm velvet.     */
.hero--dark,
.band--dark {
  --band:           #211713;
  --on-band:        #F3ECDC;
  --on-band-muted:  #D2C4AB;
  --on-band-faint:  #A39480;
  --band-rule:      #C9A96B;
}

/* Hero: the artwork is a background on the right, fading into the velvet.
   Text stays on the plain left side, never over the figures. */
.hero--dark {
  background: var(--band);
  border-bottom: 1px solid rgba(201,169,107,0.45);
  padding: 5.5rem 0 4.5rem;
}
.hero--art::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 54%;
  background: var(--hero-art) center 20% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 55%);
          mask-image: linear-gradient(90deg, transparent 0, #000 55%);
  z-index: 0;
}
.hero--art .wrap { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hero--art .hero__content { padding-right: 1rem; }
@media (max-width: 760px) {
  .hero--art { padding-top: 0; }
  .hero--art::after {
    bottom: auto; left: 0; width: 100%; height: 280px;
    background-position: center 22%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .hero--art .wrap { grid-template-columns: 1fr; padding-top: 300px; }
}
.hero--dark .hero__eyebrow { color: var(--wheat); }
.hero--dark .hero__title { color: var(--on-band); }
.hero--dark .hero__title em { color: #DCC48C; }
.hero--dark .hero__sub { color: var(--on-band-muted); }
.hero--dark .btn--primary { background: var(--wheat); border-color: var(--wheat); color: var(--band); }
.hero--dark a.btn--primary,
.hero--dark a.btn--primary:visited,
.hero--dark a.btn--primary:hover,
.hero--dark a.btn--primary:focus { color: var(--band) !important; }
.hero--dark .btn--primary:hover { background: #DCC48C; border-color: #DCC48C; }
.hero--dark .btn--ghost { color: var(--on-band); border-color: rgba(243,236,220,0.45); }
.hero--dark .btn--ghost:hover { background: rgba(243,236,220,0.08); }


/* ─── THE THREE SECTIONS (v2.11.0) ────────────────────────────────────
   Solid jewel panels directly under the hero. Titles in Jana Thork
   (--display); everything else in Kepler Std (--serif).                  */
.sections-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--band-rule);
}
.section-panel {
  --panel-text:  #F3ECDC;
  --panel-muted: rgba(243,236,220,0.82);
  --panel-gold:  #DCC48C;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-height: 340px;
  padding: 3.25rem 2.75rem 2.75rem;
  color: var(--panel-text);
  text-decoration: none;
  transition: filter 0.25s;
}
.section-panel + .section-panel { border-left: 1px solid rgba(201,169,107,0.45); }
.section-panel--da   { background: var(--strand-da); }
.section-panel--msim { background: var(--strand-msim); }
.section-panel--fm   { background: var(--strand-fm); }
.section-panel:hover { filter: brightness(1.12); }
.section-panel:focus-visible { outline: 2px solid var(--panel-gold); outline-offset: -6px; }
.section-panel__star { fill: var(--panel-gold); margin-bottom: 1.1rem; }
.section-panel__by {
  font-family: var(--serif);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--panel-gold);
}
.section-panel__title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--panel-text);
  margin: 0.15rem 0 0;
}
.section-panel__sub {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--panel-muted);
}
.section-panel__desc {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--panel-muted);
  margin: 0.9rem 0 0;
  max-width: 24rem;
}
.section-panel__cta {
  margin-top: auto;
  padding-top: 1.75rem;
  font-family: var(--serif);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--panel-gold);
  border-bottom: 1px solid transparent;
}
.section-panel:hover .section-panel__cta { text-decoration: underline; text-underline-offset: 0.35em; }
@media (max-width: 820px) {
  .sections-row { grid-template-columns: 1fr; }
  .section-panel { min-height: 0; padding: 2.5rem 1.75rem 2.25rem; }
  .section-panel + .section-panel { border-left: 0; border-top: 1px solid rgba(201,169,107,0.45); }
}
.section-panel__cite {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--serif);
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--panel-gold);
}

/* Section artwork (v2.13.0): each panel shows its whole icon at the top, then
   the text below it. Text never sits over the picture. */
.section-panel { --pad-x: 2.75rem; position: relative; overflow: hidden; padding-top: 0; }
.section-panel::before {
  content: '';
  display: block;
  align-self: stretch;
  flex: none;
  width: calc(100% + (var(--pad-x) * 2));
  margin: 0 calc(var(--pad-x) * -1) 1.25rem;
  aspect-ratio: 3 / 4;
  background: var(--panel-art) center top / cover no-repeat;
  /* soft melt into the panel color: long fade at the bottom */
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
}
@media (min-width: 821px) and (max-width: 1100px) {
  .section-panel { --pad-x: 1.75rem; padding-left: 1.75rem; padding-right: 1.75rem; }
}
@media (max-width: 820px) {
  .section-panel::before { aspect-ratio: 4 / 5; max-width: 30rem; align-self: center; width: 100%; margin-left: 0; margin-right: 0; }
}
}

.footer-brand__tagline { text-wrap: balance; }


/* ─── COURSE FEATURE (front page): Under Mary's Mantle ───────────── */
.course-feature { padding: 5.5rem 0; background: var(--bg); border-top: 1px solid var(--band-rule); }
.course-feature__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: center; }
.course-feature__art { display: block; line-height: 0; box-shadow: 0 18px 40px rgba(33, 23, 19, 0.22); transition: transform 0.25s; }
.course-feature__art:hover { transform: translateY(-3px); }
.course-feature__art img { width: 100%; height: auto; display: block; }
.course-feature .section-eyebrow { color: var(--strand-da); }
.course-feature__title { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.12; margin: 0.4rem 0 1rem; color: var(--text); }
.course-feature__title em { display: block; font-family: var(--serif); font-size: 0.55em; font-style: italic; margin-top: 0.5rem; color: var(--strand-da); }
.course-feature__lead { font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.6; color: var(--text); margin-bottom: 1rem; }
.course-feature p { font-family: var(--serif); font-size: 1.05rem; font-weight: 300; line-height: 1.8; color: var(--meta); }
.course-feature__list { list-style: none; margin: 1.5rem 0; padding: 0; columns: 2; column-gap: 2rem; }
.course-feature__list li { font-family: var(--serif); font-size: 1rem; line-height: 1.5; color: var(--text); padding: 0.35rem 0 0.35rem 1.4rem; position: relative; break-inside: avoid; }
.course-feature__list li::before { content: '\2726'; position: absolute; left: 0; top: 0.4rem; color: var(--wheat); font-size: 0.8rem; }
.course-feature .course-feature__meta { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); margin-bottom: 1.75rem; }
/* Secretum Meum Mihi (crimson) variant, used for the O Antiphons feature */
.course-feature--msim .section-eyebrow,
.course-feature--msim .course-feature__title em { color: var(--strand-msim); }
.course-feature--msim .btn--primary { background: var(--strand-msim); border-color: var(--strand-msim); }
.course-feature--msim .btn--primary:hover { background: #A5524A; border-color: #A5524A; }
@media (max-width: 820px) {
  .course-feature { padding: 3.5rem 0; }
  .course-feature__grid { grid-template-columns: 1fr; gap: 2rem; }
  .course-feature__art { max-width: 22rem; margin: 0 auto; }
  .course-feature__list { columns: 1; }
}


/* ─── MASTHEAD HERO (v2.16.0): jewel color, artwork fades in from the right ── */
.masthead-hero--jewel {
  background: var(--band);
  border-bottom: 1px solid rgba(201,169,107,0.45);
  padding: 5.5rem 0 4.5rem;
  text-align: left;
}
.masthead-hero--jewel::before { display: none; }
.masthead-hero--jewel .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); text-align: left; }
.masthead-hero--jewel .hero__content { max-width: 34rem; }
.masthead-hero--jewel .hero__eyebrow { color: var(--wheat); }
.masthead-hero--jewel .hero__title { color: var(--on-band); }
.masthead-hero--jewel .hero__sub { color: var(--on-band-muted); }
.masthead-hero--jewel .hero__actions { justify-content: flex-start; }
.masthead-hero--jewel .btn--primary { background: var(--wheat); border-color: var(--wheat); color: var(--band); }
.masthead-hero--jewel a.btn--primary,
.masthead-hero--jewel a.btn--primary:visited,
.masthead-hero--jewel a.btn--primary:hover,
.masthead-hero--jewel a.btn--primary:focus { color: var(--band) !important; }
.masthead-hero--jewel .btn--primary:hover { background: #DCC48C; border-color: #DCC48C; }
.masthead-hero--jewel .btn--ghost { color: var(--on-band); border-color: rgba(243,236,220,0.45); }
.masthead-hero--jewel .btn--ghost:hover { background: rgba(243,236,220,0.08); }
.masthead-hero--jewel.hero--art::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60%);
          mask-image: linear-gradient(90deg, transparent 0, #000 60%);
}
@media (max-width: 760px) {
  .masthead-hero--jewel { padding-top: 0; }
  .masthead-hero--jewel .wrap { grid-template-columns: 1fr; padding-top: 300px; }
}

.about-block__sub { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; font-style: italic; color: var(--text); margin: 2rem 0 0.6rem; line-height: 1.3; }

/* Books hero: the artwork is a square, so keep the face and dove in view */
.hero--books.hero--art::after { background-position: center 8%; }
.hero--books::before { display: none; }
.hero--books.hero--art::after {
  width: 64%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0, #000 42%);
}
@media (max-width: 760px) {
  .hero--books.hero--art::after { width: 100%; background-position: center 8%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
}

/* ─── INSTAGRAM BAND: deep gold until the photo carousel arrives ───── */
.instagram-block { background: #8A6A2C; color: #FAF6EC; }
.instagram-block .section-eyebrow { color: #EFE2BC; }
.instagram-block h2 { color: #FAF6EC; }
.instagram-block__rule { background: #E2CC91; }
.instagram-block p { color: #F3E9CF; }
.instagram-block .btn--ghost { color: #FAF6EC; border-color: #E2CC91; background: transparent; }
.instagram-block .btn--ghost:hover { background: #FAF6EC; color: #5E4619; border-color: #FAF6EC; }

/* ─── BOOKS PAGE: press imprint ────────────────────────────────────── */
.imprint-band { padding: 3rem 0 4rem; text-align: center; }
.imprint-band__logo { width: 150px; height: 150px; margin: 0 auto; display: block; }

/* ─── COURSES PAGE ───────────────────────────────────────────────── */
.courses-page { padding: 4.5rem 0 5.5rem; background: var(--bg); }
.courses-intro { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; }
.courses-intro h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.1; color: var(--text); }
.courses-intro__rule { width: 3rem; height: 1px; background: var(--band-rule); margin: 1.5rem auto; }
.courses-intro p { font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.7; color: var(--meta); }
.courses-intro .courses-intro__benefit { margin-top: 1rem; font-style: normal; font-size: 1.05rem; }
.courses-group { margin-top: 3.5rem; }
.courses-group__title { font-family: var(--sans); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--meta); padding-bottom: 0.9rem; margin-bottom: 2rem; border-bottom: 1px solid var(--neutral-40); }
.courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 2.5rem; }
.course-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: start; }
.course-card__art { display: block; line-height: 0; box-shadow: 0 14px 30px rgba(33, 23, 19, 0.2); transition: transform 0.25s; }
.course-card__art:hover { transform: translateY(-3px); }
.course-card__art img { width: 100%; height: auto; display: block; }
.course-card__status { display: inline-block; font-family: var(--sans); font-size: 0.56rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--strand-da); border: 1px solid currentColor; padding: 0.25rem 0.6rem; margin-bottom: 0.9rem; }
.course-card--msim .course-card__status { color: var(--strand-msim); }
.course-card__title { font-family: var(--display); font-weight: 400; font-size: 1.55rem; line-height: 1.2; color: var(--text); margin-bottom: 0.6rem; }
.course-card__title em { display: block; font-family: var(--serif); font-size: 0.7em; font-style: italic; margin-top: 0.3rem; color: var(--meta); }
.course-card__teacher { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); margin-bottom: 0.3rem; }
.course-card__dates { font-family: var(--serif); font-size: 1rem; color: var(--text); margin-bottom: 0.8rem; }
.course-card__blurb { font-family: var(--serif); font-size: 1rem; font-weight: 300; line-height: 1.7; color: var(--meta); margin-bottom: 1.25rem; }
.course-card--msim .btn--primary { background: var(--strand-msim); border-color: var(--strand-msim); }
.course-card--msim .btn--primary:hover { background: #A5524A; border-color: #A5524A; }
@media (max-width: 560px) {
  .course-card { grid-template-columns: 1fr; }
  .course-card__art { max-width: 18rem; }
}


/* ─── CONTACT PAGE v2 (Annunciation hero, editorial list) ─────────────
   The art is a pre-cropped band of the Annunciation. Position 51% keeps both
   faces and the spoken words (AVE GRATIA PLENA, ECCE ANCILLA DOMINI) in view. */
.contact-hero {
  position: relative;
  background: var(--band);
  border-bottom: 1px solid rgba(201,169,107,0.45);
  padding: 0 0 3.5rem;
  overflow: hidden;
}
.contact-hero__art {
  height: clamp(260px, 34vw, 560px);
  background: var(--contact-art) center 51% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
}
.contact-hero__text {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-top: -1.5rem;
  text-align: center;
}
.contact-hero__text::before {
  content: '✦  ✦  ✦';
  display: block;
  font-size: 0.45rem;
  letter-spacing: 0.5rem;
  color: var(--wheat);
  margin-bottom: 1.4rem;
}
.contact-hero .hero__actions { justify-content: center; }
.contact-hero .hero__sub { margin-bottom: 2rem; }
.contact-hero__credit {
  margin: 2.25rem 0 0;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-band-faint);
}
.contact-hero__credit em { font-style: italic; }

.contact-list { max-width: 860px; margin: 0 auto; padding: 1.5rem 0 5rem; }
.contact-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--neutral-40);
}
.contact-item:last-child { border-bottom: 0; }
.contact-item__label {
  margin: 0;
  padding-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}
.contact-item__body p {
  margin: 0 0 0.9rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text);
}
.contact-item__body p:last-child { margin-bottom: 0; }
.contact-item__body a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--neutral);
  text-underline-offset: 3px;
}
.contact-masts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.contact-mast { border-top: 2px solid var(--neutral); padding-top: 0.9rem; }
.contact-item__body .contact-mast__name {
  margin: 0 0 0.15rem;
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.25;
}
.contact-item__body .contact-mast__by {
  margin: 0 0 0.6rem;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--meta);
}
.contact-mast a { word-break: break-word; font-size: 0.95rem; }
@media (max-width: 760px) {
  .contact-hero__art { background-size: 150% auto; background-position: 52% 51%; }
  .contact-item { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.75rem 0; }
  .contact-item__label { padding-top: 0; }
  .contact-masts { grid-template-columns: 1fr; gap: 1.25rem; }
}


/* ─── COURSES HERO (velvet band, painting on the right) ───────────────
   Art on the right fades into the velvet; text stays on the plain left side. */
.courses-hero {
  position: relative;
  overflow: hidden;
  background: var(--band);
  border-bottom: 1px solid rgba(201,169,107,0.45);
  padding: 5rem 0 4.5rem;
}
.courses-hero__art {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 54%;
  background: var(--hero-art) center 20% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%);
          mask-image: linear-gradient(90deg, transparent 0, #000 35%);
}
.courses-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.courses-hero__text::before {
  content: '✦  ✦  ✦';
  display: block;
  font-size: 0.45rem;
  letter-spacing: 0.5rem;
  color: var(--wheat);
  margin-bottom: 1.4rem;
}
.courses-hero .hero__sub { margin-bottom: 1.1rem; }
.courses-hero__benefit {
  margin: 0;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--on-band-muted);
}
@media (max-width: 760px) {
  .courses-hero { padding: 0 0 3rem; }
  .courses-hero__art {
    position: relative;
    width: 100%;
    height: 280px;
    bottom: auto;
    background-position: center 20%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .courses-hero__inner { grid-template-columns: 1fr; margin-top: -1rem; }
}

/* Podcasts hero: same build as the home page. The file is about 1,090 px wide and
   landscape, so the art box is wider than the home one to keep both faces clear of the fade. */
.hero--podcasts.hero--art::after {
  width: 64%;
  background-position: center 12%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40%);
}
.hero--podcasts .contact-hero__credit { margin-top: 2rem; max-width: 22rem; }
@media (max-width: 760px) {
  .hero--podcasts.hero--art::after { width: 100%; background-position: center 12%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
}


/* Meet the Team hero: same band as Contact. The picture is pre-cropped to the women's
   faces and fades to velvet at its right edge, so only the bottom needs a mask. */
.contact-hero--team .contact-hero__art {
  background-position: center 38%;
  -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
}
@media (max-width: 760px) {
  .contact-hero--team .contact-hero__art { background-size: cover; background-position: center 38%; }
}