/* =============================================================
   Aquinas Center — AACSA-inspired academic rebrand
   Design tokens & typography lifted from aacsa.avemaria.edu.
   Navy + gold on warm paper, no maroon — Thomistic / scholarly tone.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  /* Academic palette — AACSA-inspired, no maroon */
  /* AMU athletics-section navy (#0C2340) applied to all navy fields. */
  --navy:         #0C2340;
  --navy-web:     #0C2340;
  --navy-deep:    #0C2340;
  /* Aquinas Center logo gold (#ffb200) unified across the site. */
  --gold-web:     #ffb200;
  --gold:         var(--gold-web);
  --gold-soft:    var(--gold-web);

  /* Paper / neutrals (AACSA palette) */
  --paper:        #faf7f0;
  --paper-deep:   #f1ead9;
  --ivory:        #fdfbf5;
  --rule:         #d9cfb6;
  --ink:          #14141a;
  --ink-soft:     #3a3a42;
  --ink-muted:    #6a6a74;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Tracking signature */
  --tr-wide:   0.18em;
  --tr-wider:  0.28em;
  --tr-widest: 0.42em;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  400ms;
}

/* ---------- Base typography ---------- */

body {
  font-family: var(--sans) !important;
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-main {
  background-color: var(--paper) !important;
  padding-top: 0 !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--serif) !important;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
}
em, .italic { font-style: italic; }

/* ---------- Buttons (AACSA pill) ---------- */

.panel-pane .btn,
.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tr-wider) !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: all var(--dur) var(--ease) !important;
  white-space: nowrap !important;
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }

/* Map the legacy Bootstrap btn variants to AACSA-style fills.
   No maroon anywhere — navy is the new primary brand color. */
.btn-warning,
.btn-warning:focus {
  background: var(--gold-web) !important;
  color: #fff !important;
  border-color: var(--gold-web) !important;
}
.btn-warning:hover {
  background: var(--navy) !important;
  color: var(--paper) !important;
  border-color: var(--navy) !important;
}
.btn-danger,
.btn-danger:focus {
  background: var(--navy) !important;
  color: var(--paper) !important;
  border-color: var(--navy) !important;
}
.btn-danger:hover {
  background: var(--gold-web) !important;
  color: #fff !important;
  border-color: var(--gold-web) !important;
}
.btn-primary,
.btn-primary:focus {
  background: var(--navy) !important;
  color: var(--paper) !important;
  border-color: var(--navy) !important;
}
.btn-primary:hover {
  background: var(--gold-web) !important;
  color: #fff !important;
  border-color: var(--gold-web) !important;
}
.btn-default,
.btn-default:focus {
  background: transparent !important;
  color: var(--navy) !important;
  border-color: var(--navy) !important;
}
.btn-default:hover {
  background: var(--navy) !important;
  color: var(--paper) !important;
}

/* ---------- Header structure ---------- */

.page-header {
  border-bottom: 1px solid rgba(232, 190, 74, 0.18) !important;
  box-shadow: none !important;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--navy-deep) !important;
  color: var(--paper);
}
/* Vertically center the brand + nav columns inside the header row.
   Default flex `stretch` was leaving the nav anchored at the top
   while the logo determined the row height. */
.page-header .page-header-cols {
  align-items: center !important;
}
.page-header .page-nav {
  display: flex !important;
  align-items: center !important;
}

/* Logo reduced 10% (300px -> 270px), same orientation/position. Overrides
   the per-page inline #logo img{max-width:300px}. */
.page-header #logo img {
  max-width: 270px !important;
}
/* Shift logo ~2in left, with safe fallback on narrow viewports */
.page-header .page-brand {
  margin-left: -2in;
  width: 30% !important;
}
.page-header .page-nav {
  width: 70% !important;
}
@media (max-width: 1100px) {
  .page-header .page-brand { margin-left: 0; }
}

/* ---------- Header nav links ---------- */

.page-header .pane-superfish-1 .pane-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.page-header #superfish-1.sf-horizontal {
  float: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center;
  padding-left: 0;
  margin: 0 !important;
  border-top: 0 !important;
}
.page-header #superfish-1.sf-horizontal > li.sf-depth-1 {
  float: none !important;
  white-space: nowrap;
  position: relative;
  /* Override the upstream desktop rule which adds an asymmetric
     `border-top: 10px solid transparent; padding-top: 20px` to each
     top-level <li>. That pushed the link visually below true vertical
     center of the header bar. Zero both so the link sits in the
     geometric middle of its row. */
  border-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Shift nav block right (position:relative+left, not transform, so
   dropdowns still anchor to their parent <li>). At wide viewports the
   nav was already offset 4in for visual balance with the smaller logo
   block; the +0.5in is layered on top of that. At narrow viewports the
   4in shift collapses but the 0.5in baseline remains. */
.page-header .pane-superfish-1 {
  position: relative;
  left: 4.5in;
}
@media (max-width: 1400px) {
  .page-header .pane-superfish-1 { left: 0.5in; }
}

/* Top-level nav-link typography (AACSA-style) — paper on navy */
.page-header #superfish-1.sf-horizontal a.sf-depth-1,
.page-header #superfish-1.sf-horizontal span.sf-depth-1 {
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: var(--tr-wide) !important;
  text-transform: uppercase !important;
  color: var(--paper) !important;
  padding: 10px 16px !important;
  border-radius: 999px;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.page-header #superfish-1.sf-horizontal > li.sf-depth-1:hover > a.sf-depth-1,
.page-header #superfish-1.sf-horizontal > li.sf-depth-1:hover > span.sf-depth-1,
.page-header #superfish-1.sf-horizontal > li.sf-depth-1.sfHover > a.sf-depth-1,
.page-header #superfish-1.sf-horizontal > li.sf-depth-1.sfHover > span.sf-depth-1 {
  color: var(--navy-deep) !important;
  background: var(--gold-soft) !important;
}

/* Hide the superfish dropdown-indicator triangles/chevrons under each
   top-level nav label (sf-sub-indicator sprite, glyphicon :after carat,
   and any other pseudo-content the upstream theme adds). */
.page-header #superfish-1.sf-horizontal .sf-sub-indicator,
.page-header #superfish-1.sf-horizontal > li.sf-depth-1 > a::after,
.page-header #superfish-1.sf-horizontal > li.sf-depth-1 > a::before,
.page-header #superfish-1.sf-horizontal > li.sf-depth-1 > span::after,
.page-header #superfish-1.sf-horizontal > li.sf-depth-1 > span::before {
  display: none !important;
  content: none !important;
}

/* ---------- Header dropdowns (modern cream card) ---------- */

.page-header .pane-superfish-1 .pane-content .sf-horizontal li.sf-depth-1 > ul {
  background: var(--paper) !important;
  list-style: none;
  margin: 0;
  padding: 10px 0 !important;
  min-width: 280px;
  width: auto;
  border-radius: 10px;
  box-shadow:
    0 20px 48px rgba(0, 11, 38, 0.18),
    0 4px 12px rgba(0, 11, 38, 0.08) !important;
  border: 1px solid var(--rule);
  z-index: 500;
}
.page-header .pane-superfish-1 .pane-content .sf-horizontal li.sf-depth-1:hover > ul,
.page-header .pane-superfish-1 .pane-content .sf-horizontal li.sf-depth-1.sfHover > ul {
  top: calc(100% + 6px) !important;
  left: 0 !important;
}
.page-header .pane-superfish-1 .pane-content .sf-horizontal li.sf-depth-1 > ul li {
  display: block;
  width: 100%;
  float: none;
}
.page-header .pane-superfish-1 .pane-content .sf-horizontal li.sf-depth-1 > ul li a {
  display: block;
  padding: 12px 24px !important;
  border-bottom: none !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--ink) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tr-wide) !important;
  background: transparent !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
}
.page-header .pane-superfish-1 .pane-content .sf-horizontal li.sf-depth-1 > ul li a:hover,
.page-header .pane-superfish-1 .pane-content .sf-horizontal li.sf-depth-1 > ul li a:focus,
.page-header .pane-superfish-1 .pane-content .sf-horizontal li.sf-depth-1 > ul li.sfHover > a {
  background: var(--navy) !important;
  color: var(--paper) !important;
  padding-left: 30px !important;
}
.page-header .pane-superfish-1 .pane-content .sf-horizontal li.sf-depth-1 > ul li + li > a {
  border-top: 1px solid var(--rule) !important;
}

/* Invert the Sapientia Press logo (currently white-on-black) so it renders
   black-on-light, matching the other partner logos on the cream background. */
img[src="sites/ac/files/sapientia-press-logo.png"] {
  filter: invert(1);
}

/* Kill any residual maroon (#a40000 / #710000) from the upstream CSS bundle:
   mobile accordion, collapsible panel headings, page-title bar, etc. */
.page-header .pane-superfish-1 .pane-content .sf-accordion a,
.page-header .pane-superfish-1 .pane-content .sf-accordion ul a,
.page-header .pane-superfish-1 .pane-content .sf-accordion ul ul a,
.panel--collapsible > .panel-heading,
.panel--collapsible > .panel-heading a:hover {
  background-color: var(--navy) !important;
}
.page-title {
  background-color: var(--navy-deep) !important;
  color: var(--gold-soft) !important;
}

/* ===========================================================================
   PHASE 2 — Session 2: /about/ family modernization
   Scoped to body.page-node-8 (Overview), page-node-22 (Leadership),
   page-node-15 (Fellows). No global rules; nothing here can leak to other
   pages. Header / footer / nav / logo are not touched.
   =========================================================================== */

/* -- Body typography: Cormorant Garamond on prose, slightly larger ---------- */
body.page-node-8 .page-content .filter-wysiwyg p,
body.page-node-22 .page-content .filter-wysiwyg p,
body.page-node-15 .page-content .filter-wysiwyg p {
  font-family: var(--serif) !important;
  font-size: 1.075em;
  line-height: 1.55;
  color: var(--ink);
}
/* h1/h2/h3/h4 inside body content keep the global serif but get a tighter
   tracking + dark color so they feel editorial. */
body.page-node-8 .page-content .filter-wysiwyg :is(h1, h2, h3, h4),
body.page-node-22 .page-content .filter-wysiwyg :is(h1, h2, h3, h4),
body.page-node-15 .page-content .filter-wysiwyg :is(h1, h2, h3, h4) {
  font-family: var(--serif) !important;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* Drop-cap removed per request — the first letter of the About paragraph
   now renders as a normal first letter (same font + size + color as the
   surrounding body text). Selector must out-rank the upstream rule at
   `#two-column-images .filter-wysiwyg p:first-child::first-letter` which
   carries an id (1,2,3 spec); adding body.page-node-8 + repeating the
   id gives this rule 1,3,3 + matches both p:first-child and
   p:first-of-type for safety. */
body.page-node-8 #two-column-images .filter-wysiwyg p:first-child::first-letter,
body.page-node-8 #two-column-images .filter-wysiwyg p:first-of-type::first-letter {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  float: none !important;
  line-height: inherit !important;
  margin: 0 !important;
  color: inherit !important;
}

/* -- Page-title bar (the navy band with "ABOUT" / "Leadership" / "FELLOWS")
   -- Hidden on /about/ (page-node-8), /about/leadership/ (page-node-22),
      and /about/fellows/ (page-node-15). */
body.page-node-8 .page-title,
body.page-node-22 .page-title,
body.page-node-15 .page-title {
  display: none !important;
}

/* -- Hide just the navy "ABOUT" page-title strip; keep the banner image ----
   On /about/ the page begins with the large .page-image banner (the
   "friend-aquinas" landscape that stretches across the page), then "About"
   sits a couple inches below it. The small portrait inside #mini-panel-7
   column-2 is hidden separately (further down in this block). */
body.page-node-8 .page-title {
  display: none !important;
}
body.page-node-8 #mini-panel-7 .radix-layouts-column2 {
  display: none !important;
}

/* Banner: hard, clean bottom edge stretching full width, no overlap with
   the About section below it. Explicit height ensures the bg-image renders
   as a definite rectangle; the page-content below starts on a fresh line. */
body.page-node-8 .page-image {
  display: block !important;
  width: 100%;
  height: 300px !important;
  min-height: 300px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat;
  border: none !important;
  box-shadow: none !important;
}
body.page-node-8 .page-main {
  padding-top: 0 !important;
}
body.page-node-8 .page-content {
  padding-top: 0 !important;
}
/* Push the About section below the banner with the same gap that exists
   between the About body and the Why-Aquinas? heading (≈104px = the
   trailing 20px on the last About paragraph + 84px of #pane-83 padding). */
body.page-node-8 #two-column-images {
  margin-top: 24px !important;
}

/* -- "Who We Are" first section: stack vertically with image on top -------
   Original Drupal layout is a 2-col row (text left, image right). User
   wants the image to sit at top (just under the page-title bar) and the
   text to flow below it. Achieved with flex-direction: column-reverse —
   the image is col2 in DOM, so reversing puts it first visually. */
body.page-node-8 #mini-panel-7 .row {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  margin: 0;
}
body.page-node-8 #mini-panel-7 .row > .col-sm-6 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
/* (column-2 image hidden above — these margins are now no-ops, retained
   purely for clarity if the image is ever re-enabled.) */
body.page-node-8 #mini-panel-7 .radix-layouts-column2 > div[style*="padding-left"] {
  padding: 0 !important;
}
body.page-node-8 #mini-panel-7 .radix-layouts-column2 img {
  display: block;
  margin: 0 auto;
  max-width: 320px;
  width: 100%;
}
/* About-section body copy — centered within the section, font sized to
   match the Why Aquinas? body (1.89rem). */
body.page-node-8 #mini-panel-7 .radix-layouts-column1 {
  text-align: center;
}
body.page-node-8 #mini-panel-7 .radix-layouts-column1 .pane-content,
body.page-node-8 #mini-panel-7 .radix-layouts-column1 .fieldable-panels-pane,
body.page-node-8 #mini-panel-7 .radix-layouts-column1 .field,
body.page-node-8 #mini-panel-7 .radix-layouts-column1 .field-items,
body.page-node-8 #mini-panel-7 .radix-layouts-column1 .field-item,
body.page-node-8 #mini-panel-7 .radix-layouts-column1 .filter-wysiwyg {
  text-align: center;
}
body.page-node-8 #mini-panel-7 .radix-layouts-column1 .filter-wysiwyg p {
  max-width: 920px !important;
  margin: 0 auto 20px !important;
  text-align: center !important;
  font-family: var(--serif) !important;
  font-size: 1.89rem !important;
  line-height: 1.55 !important;
  color: var(--ink);
}
/* "About" pane-title — serif, sized to match the Why Aquinas? h1
   (clamp 2.3rem → 3.45rem), gold hairline via .pane-title:before.
   Generous top margin so the heading sits well below the banner. */
body.page-node-8 #mini-panel-7 .radix-layouts-column1 .pane-title {
  text-align: center;
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  font-size: clamp(2.3rem, 4.6vw, 3.45rem) !important;
  margin: 61px 0 36px !important;
  padding-bottom: 18px !important;
  color: var(--ink) !important;
}

/* -- "Don't miss out" CTA band (#pane-98) → navy with paper text ----------
   Originally a maroon (#8f1016) breakout. Override to navy-deep, recolor
   the inline-white text spans to paper-cream for legibility, and let the
   .btn-warning swap (now in the HTML) carry the gold pill style. */
body.page-node-8 #pane-98:before {
  background-color: var(--navy-deep) !important;
}
body.page-node-8 #pane-98 h1,
body.page-node-8 #pane-98 h1 span,
body.page-node-8 #pane-98 p span,
body.page-node-8 #pane-98 p strong span {
  color: var(--paper) !important;
  font-family: var(--serif) !important;
}
body.page-node-8 #pane-98 h1 {
  font-weight: 500 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: -0.005em;
  margin: 0 0 28px !important;
  position: relative;
  padding-bottom: 18px;
}
body.page-node-8 #pane-98 h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  margin-left: -32px;
  border-bottom: 1px solid var(--gold-web);
}
body.page-node-8 #pane-98 p {
  font-family: var(--sans) !important;
  font-size: 1.05rem;
  margin: 0 0 22px;
}

/* -- "Our Resources" 3 cards (#mini-panel-16) → paper bg matching the
   surrounding section. Cards are distinguished from the section bg by a
   light gold-tinted border + soft shadow. Each card is a vertical flex
   column so the CTA button always anchors to the bottom regardless of
   how much body copy each card carries. Card images use a fixed height
   with object-fit:cover so the three crops stay uniform. */
body.page-node-8 #mini-panel-16 .col-sm-4 {
  display: flex;
}
body.page-node-8 #mini-panel-16 .col-sm-4 .panel-panel-inner,
body.page-node-8 #mini-panel-16 .col-sm-4 .panel-pane {
  width: 100%;
  display: flex;
  flex-direction: column;
}
body.page-node-8 #mini-panel-16 .pane-style-style-attention {
  background-color: var(--paper) !important;
  border: 1px solid rgba(255, 178, 0, 0.35) !important;
  color: var(--ink) !important;
  padding: 24px 22px 26px !important;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 11, 38, 0.06);
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
}
body.page-node-8 #mini-panel-16 .pane-style-style-attention .pane-title,
body.page-node-8 #mini-panel-16 .pane-style-style-attention h1,
body.page-node-8 #mini-panel-16 .pane-style-style-attention h2,
body.page-node-8 #mini-panel-16 .pane-style-style-attention h3 {
  color: var(--ink) !important;
}
body.page-node-8 #mini-panel-16 .pane-style-style-attention .pane-title:before {
  border-bottom-color: var(--gold-web) !important;
}
body.page-node-8 #mini-panel-16 .pane-style-style-attention .pane-content,
body.page-node-8 #mini-panel-16 .pane-style-style-attention .fieldable-panels-pane,
body.page-node-8 #mini-panel-16 .pane-style-style-attention .field,
body.page-node-8 #mini-panel-16 .pane-style-style-attention .field-items,
body.page-node-8 #mini-panel-16 .pane-style-style-attention .field-item,
body.page-node-8 #mini-panel-16 .pane-style-style-attention .filter-wysiwyg {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body.page-node-8 #mini-panel-16 .pane-style-style-attention .filter-wysiwyg p {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
}
/* Card image — uniform height across all three cards via object-fit:cover. */
body.page-node-8 #mini-panel-16 .pane-style-style-attention .filter-wysiwyg p.img-center {
  margin: 0 0 16px !important;
}
body.page-node-8 #mini-panel-16 .pane-style-style-attention .filter-wysiwyg img {
  display: block;
  width: 100% !important;
  height: 220px !important;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  max-width: none !important;
}
/* The last paragraph holds the CTA button. Push it to the bottom of the
   card so all three button rows align horizontally. */
body.page-node-8 #mini-panel-16 .pane-style-style-attention .filter-wysiwyg p:last-child {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 14px;
}
/* -- "Why Aquinas?" band (#pane-83) → navy with paper-cream text ----------
   The inline <style> on the HTML paints the :before #000; override to
   navy-deep. The h1 + paragraph carry inline color:#ffb200 (gold) which
   we override to var(--paper) to match the Podcasts card text. Heading
   is 15% larger than baseline, body text 80% larger; the section's max
   container width is widened to keep the line lengths comfortable. */
body.page-node-8 #pane-83 {
  padding-top: 84px !important;
  padding-bottom: 84px !important;
}
body.page-node-8 #pane-83:before {
  background-color: var(--navy-deep) !important;
}
body.page-node-8 #pane-83 h1,
body.page-node-8 #pane-83 h1 span,
body.page-node-8 #pane-83 p,
body.page-node-8 #pane-83 p span {
  color: var(--paper) !important;
  font-family: var(--serif) !important;
}
body.page-node-8 #pane-83 h1 {
  font-weight: 500 !important;
  font-size: clamp(2.3rem, 4.6vw, 3.45rem) !important;
  letter-spacing: -0.005em;
  margin: 0 0 36px !important;
  position: relative;
  padding-bottom: 18px;
}
body.page-node-8 #pane-83 h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  margin-left: -32px;
  border-bottom: 1px solid var(--gold-web);
}
body.page-node-8 #pane-83 p {
  font-size: 1.89rem !important;
  line-height: 1.55;
  max-width: 920px !important;
}

/* -- "Our Resources" wrapper (#pane-117) → swap beige bg for paper ---------
   The inline :before paints #f2ebe4; override to var(--paper) so the
   section matches the "What you get when you join our community" band
   on the home page. */
body.page-node-8 #pane-117:before {
  background-color: var(--paper) !important;
}

/* -- "Our Resources" heading wrapper (#pane-38) → strip the translucent
   dark overlay from .pane-style-style-subdued so this matches the cards
   section directly below it (both render as paper). */
body.page-node-8 #pane-38,
body.page-node-8 #pane-38.pane-style-style-subdued,
body.page-node-8 .pane-fpid-22.pane-style-style-subdued {
  background-color: var(--paper) !important;
  padding: 35px 0 0 !important;
}

/* -- "Our Resources" h1 → centred section title with gold hairline --------
   The heading is a plain <h1>, not a .pane-title, so add the hairline
   manually via ::after to match the rest of the section titles. Top
   margin reduced ~0.75in from the prior 96px stack. */
body.page-node-8 .pane-fpid-22 .filter-wysiwyg h1 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;
  font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
  color: var(--ink) !important;
  position: relative;
  padding-bottom: 18px;
  margin: 24px 0 40px !important;
}
body.page-node-8 .pane-fpid-22 .filter-wysiwyg h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  margin-left: -32px;
  border-bottom: 1px solid var(--gold-web);
}

/* -- "Don't miss out" subhead — bump the helper line 50% larger ----------- */
body.page-node-8 #pane-98 p strong span {
  font-size: 1.5em !important;
  line-height: 1.4;
}

/* -- Leadership banner — use the friend-aquinas2 (Guercino St. Thomas) image
   at the standard 300px banner height, top-anchored to keep his face in
   view (replaces the all-saints fresco). */
body.page-node-22 .page-image {
  background-image: url('/sites/ac/files/styles/hosted_core_wide_3x1_1400_2x/public/uploads/images/friend-aquinas2__itok_ADvzFHRm.jpg') !important;
  height: 300px !important;
  min-height: 300px !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

/* -- Leadership portraits (square 1:1 → circular crop) --------------------- */
body.page-node-22 .field-name-field-image-image img.img-responsive,
body.page-node-22 picture.img-responsive img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  max-width: 280px;
  width: 100%;
  height: auto !important;
  margin: 0 auto 24px;
  display: block;
  box-shadow:
    0 8px 24px rgba(0, 11, 38, 0.18),
    0 2px 6px rgba(0, 11, 38, 0.08);
}
/* Name (pane-title under the portrait) — gold hairline below. */
body.page-node-22 .pane-title,
body.page-node-15 .pane-title {
  text-align: center;
  position: relative;
  padding-bottom: 18px !important;
  margin-bottom: 16px !important;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;
}
body.page-node-22 .pane-title:after,
body.page-node-15 .pane-title:after {
  content: "";
  position: absolute;
  width: 64px;
  height: 1px;
  bottom: 0;
  left: 50%;
  margin-left: -32px;
  background: var(--gold-web);
}
/* Eat the upstream pane-title:before underline (the original generic 50px
   dark-rule line) so we don't get two hairlines. */
body.page-node-22 .pane-title:before,
body.page-node-15 .pane-title:before {
  display: none !important;
}
/* h4 sub-titles under each leader's name (PROVOST… / CHAIR OF…). Centered,
   smaller, ink-soft. */
body.page-node-22 .filter-wysiwyg h4 {
  text-align: center !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: var(--tr-wider) !important;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 6px 0;
}
body.page-node-22 .filter-wysiwyg h4 em {
  font-style: italic;
  color: var(--ink-soft);
}

/* -- Fellows portraits (3:4 tall → circular crop, smaller grid size) ------ */
body.page-node-15 .field-name-field-person-image img.img-responsive,
body.page-node-15 picture.img-responsive img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  max-width: 220px;
  width: 100%;
  height: auto !important;
  margin: 0 auto 20px;
  display: block;
  box-shadow:
    0 8px 24px rgba(0, 11, 38, 0.18),
    0 2px 6px rgba(0, 11, 38, 0.08);
}
/* Fellow name in the modal-title <h4>. 100% larger than before (1.45 →
   2.9rem), serif, centered in the modal header with a gold hairline. */
body.page-node-15 .modal-header {
  text-align: center;
  position: relative;
}
body.page-node-15 .modal-title {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 2.9rem !important;
  text-align: center;
  color: var(--ink);
  letter-spacing: -0.005em;
  position: relative;
  padding-bottom: 16px;
  margin: 8px auto 14px;
  display: block;
  width: 100%;
}
body.page-node-15 .modal-title:after {
  content: "";
  position: absolute;
  width: 64px;
  height: 1px;
  bottom: 0;
  left: 50%;
  margin-left: -32px;
  background: var(--gold-web);
}

/* Modal bio body copy — Cormorant Garamond, matching the /about page,
   enlarged 50% (1.15 → 1.725rem). */
body.page-node-15 .modal-body,
body.page-node-15 .modal-body .filter-simple,
body.page-node-15 .modal-body .filter-simple p {
  font-family: var(--serif) !important;
  font-size: 1.725rem;
  line-height: 1.55;
  color: var(--ink);
}

/* -- "Who Are the Fellows?" intro + "Our Current Fellows" headings ------- */
body.page-node-15 .filter-wysiwyg h1 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  text-align: center;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
  color: var(--ink);
  position: relative;
  padding-bottom: 18px;
  margin: 24px auto 28px;
}
body.page-node-15 .filter-wysiwyg h1:after {
  content: "";
  position: absolute;
  width: 64px;
  height: 1px;
  bottom: 0;
  left: 50%;
  margin-left: -32px;
  background: var(--gold-web);
}

/* "Our Current Fellows" heading band (#pane-90) + the fellows grid band
   (#pane-91) are both navy (header color), forming one continuous deep
   field. The heading is white and sized to match the /about "Our
   Resources" section heading; the cards read as light islands on it. */
body.page-node-15 #pane-90:before {
  background-color: var(--navy-deep) !important;
}
body.page-node-15 #pane-90 .filter-wysiwyg h1 {
  font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
  color: var(--paper) !important;
}
body.page-node-15 #pane-91:before {
  background-color: var(--navy-deep) !important;
}
body.page-node-15 #pane-91 {
  padding-top: 24px;
  padding-bottom: 72px;
}

/* -- Fellows as 3 clean cards (image on top, white text body below) ------
   Rebuilt with fresh .fellow-card markup that carries none of the upstream
   .person float/margin baggage, so the image reliably stacks ABOVE the
   text. Each column stretches to equal height; the View-Bio button anchors
   to the bottom of every card. */
body.page-node-15 #mini-panel-15 .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 -12px;
}
body.page-node-15 #mini-panel-15 .fellows-card-col {
  display: flex;
  padding: 0 12px;
  margin-bottom: 24px;
}
body.page-node-15 #mini-panel-15 .fellows-card-col > .panel-panel-inner,
body.page-node-15 #mini-panel-15 .panel-pane,
body.page-node-15 #mini-panel-15 .pane-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
/* Card shell — paper bg, rounded, soft shadow, vertical stack. */
body.page-node-15 #mini-panel-15 .fellow-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--paper);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 12px 28px rgba(0, 11, 38, 0.22),
    0 4px 10px rgba(0, 11, 38, 0.12);
}
/* Image — on top, full width, sized to the portraits' native 3:4 ratio so
   the whole face fits with no crop (the source files are tall_3x4). */
body.page-node-15 #mini-panel-15 .fellow-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  margin: 0;
}
/* White body — sits below the image, centered, grows to fit the bio.
   Padding lengthened ~20% for more breathing room. */
body.page-node-15 #mini-panel-15 .fellow-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 29px 28px 31px;
  text-align: center;
}
body.page-node-15 #mini-panel-15 .fellow-card__name {
  font-family: var(--serif) !important;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 16px;
}
body.page-node-15 #mini-panel-15 .fellow-card__bio {
  font-family: var(--serif) !important;
  font-size: 1.26rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 22px;
}
body.page-node-15 #mini-panel-15 .fellow-card__btn {
  margin-top: auto !important;
  align-self: center;
}

/* The bottom conference banner (#pane-88) had its text removed, which
   collapsed the band to ~200px and over-cropped its cover background.
   Restore a min-height so the image shows at roughly its prior extent. */
body.page-node-15 #pane-88 {
  min-height: 480px;
}

/* Top banner — use the friend-aquinas2 (Guercino St. Thomas) image at the
   standard 300px banner height, top-anchored to keep his face in view
   (replaces the Raphael Disputation fresco). */
body.page-node-15 .page-image {
  background-image: url('/sites/ac/files/styles/hosted_core_wide_3x1_1400_2x/public/uploads/images/friend-aquinas2__itok_ADvzFHRm.jpg') !important;
  height: 300px !important;
  min-height: 300px !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}


/* "Who Are the Fellows?" intro — the right-hand "Are you interested"
   sidebar was removed, so let the remaining content column span full width
   and center its heading + paragraph. */
body.page-node-15 #mini-panel-14 .row {
  display: block;
}
body.page-node-15 #mini-panel-14 .col-md-7 {
  width: 100% !important;
  float: none !important;
  text-align: center;
}
/* Match the /about "About" section sizing: heading at clamp(2.3→3.45rem),
   body copy at 1.89rem. Extra vertical padding so the section grows
   proportionately with the larger type. */
body.page-node-15 #mini-panel-14 {
  padding-top: 5px;
  padding-bottom: 24px;
}
body.page-node-15 #mini-panel-14 .col-md-7 .filter-wysiwyg h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.45rem) !important;
  font-weight: 500 !important;
  margin: 24px auto 28px;
}
body.page-node-15 #mini-panel-14 .col-md-7 .filter-wysiwyg p {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: var(--serif) !important;
  font-size: 1.89rem !important;
  line-height: 1.55 !important;
  color: var(--ink);
}

/* "Are you interested in becoming a Fellow?" — its own navy band below the
   fellows grid (mirrors the /about "Don't miss out" treatment): navy bg,
   paper heading with gold hairline, gold pill button. */
body.page-node-15 #become-fellow:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 1;
}
body.page-node-15 #become-fellow h1 {
  color: var(--ink) !important;
  margin-top: 0 !important;
}
body.page-node-15 #become-fellow h1:after {
  background: var(--gold-web);
}

/* -- Kill any residual maroon (covered by the sweep, but explicit here) --- */

/* ===========================================================================
   PHASE 2 — Session 3: /speakers/ family modernization
   Scoped to body.page-node-9 (Dr. Dauphinais), page-node-10 (Dr. Nutt),
   page-node-23 (/speakers/ landing). Header / footer / nav / logo are not
   touched.
   =========================================================================== */

/* --- Two-column bio header (portrait circle | name + summary) ----------- */
body.page-node-9 .person--with-image,
body.page-node-10 .person--with-image {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
  margin: 48px 0 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 768px) {
  body.page-node-9 .person--with-image,
  body.page-node-10 .person--with-image {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
    text-align: center;
  }
}

/* Portrait — tall 3:4 source cropped to a 320px circle */
body.page-node-9 .person__left-col img.img-responsive,
body.page-node-10 .person__left-col img.img-responsive,
body.page-node-9 .person__left-col picture img,
body.page-node-10 .person__left-col picture img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  width: 320px !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0;
  display: block;
  box-shadow:
    0 12px 32px rgba(0, 11, 38, 0.22),
    0 3px 8px rgba(0, 11, 38, 0.10);
}
body.page-node-9 .person__left-col,
body.page-node-10 .person__left-col {
  display: flex;
  justify-content: center;
}

/* Speaker name — hero-scale serif with gold hairline beneath */
body.page-node-9 .person__name,
body.page-node-10 .person__name {
  font-family: var(--serif) !important;
  font-weight: 500;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  padding: 0 0 20px;
  margin: 0 0 24px;
  position: relative;
}
body.page-node-9 .person__name::after,
body.page-node-10 .person__name::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 1px;
  bottom: 0;
  left: 0;
  background: var(--gold-web);
}
@media (max-width: 768px) {
  body.page-node-9 .person__name::after,
  body.page-node-10 .person__name::after {
    left: 50%;
    margin-left: -32px;
  }
}

/* Speaker title — Outfit body-sized eyebrow under name */
body.page-node-9 .person__title,
body.page-node-10 .person__title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 28px;
  font-style: italic;
}

/* Person summary — serif body with generous line-height, plus a left
   gold rule */
body.page-node-9 .person__summary,
body.page-node-10 .person__summary {
  font-family: var(--serif) !important;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  border-left: 2px solid var(--gold-web);
  padding-left: 22px;
}
body.page-node-9 .person__summary p,
body.page-node-10 .person__summary p {
  font-family: var(--serif) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  margin: 0 0 10px;
}
body.page-node-9 .person__summary strong,
body.page-node-10 .person__summary strong {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--gold-web);
  margin-right: 4px;
}
body.page-node-9 .person__summary a,
body.page-node-10 .person__summary a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-web);
  transition: color var(--dur) var(--ease);
}
body.page-node-9 .person__summary a:hover,
body.page-node-10 .person__summary a:hover {
  color: var(--gold-web);
}

/* ABOUT section heading — serif, gold hairline (uses existing .pane-title
   pattern with our own anchor) */
body.page-node-9 .pane-fpid-114 > .pane-title,
body.page-node-10 .pane-fpid-115 > .pane-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: center;
  position: relative;
  padding-bottom: 18px !important;
  margin: 48px 0 28px !important;
}
body.page-node-9 .pane-fpid-114 > .pane-title:before,
body.page-node-10 .pane-fpid-115 > .pane-title:before {
  border-bottom-color: var(--gold-web) !important;
  width: 64px !important;
  margin-left: -32px !important;
}

/* Bio body prose — Cormorant Garamond, generous line-height */
body.page-node-9 .pane-fpid-114 .filter-wysiwyg p,
body.page-node-10 .pane-fpid-115 .filter-wysiwyg p {
  font-family: var(--serif) !important;
  font-size: 1.1em;
  line-height: 1.7;
  color: var(--ink);
  max-width: 760px;
  margin: 0 auto 18px;
}
body.page-node-9 .pane-fpid-114 .filter-wysiwyg p em,
body.page-node-10 .pane-fpid-115 .filter-wysiwyg p em {
  font-style: italic;
  color: var(--ink);
}
body.page-node-9 .pane-fpid-114 .filter-wysiwyg p a,
body.page-node-10 .pane-fpid-115 .filter-wysiwyg p a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-web);
}
body.page-node-9 .pane-fpid-114 .filter-wysiwyg p a:hover,
body.page-node-10 .pane-fpid-115 .filter-wysiwyg p a:hover {
  color: var(--gold-web);
}

/* --- Books list → plain bulleted list (cards removed) --------------------
   The co-edited books simply read as a normal list after "including:". */
body.page-node-9 .pane-fpid-114 .filter-wysiwyg ul {
  list-style: disc;
  display: block;
  padding: 0 0 0 1.4em;
  margin: 8px auto 22px;
  max-width: none;
  gap: 0;
}
body.page-node-9 .pane-fpid-114 .filter-wysiwyg ul li {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  font-family: var(--serif) !important;
  font-size: 1.89rem !important;
  line-height: 1.5 !important;
  color: var(--ink);
  margin: 0 0 10px;
  list-style: disc;
  display: list-item;
  transition: none;
}
body.page-node-9 .pane-fpid-114 .filter-wysiwyg ul li:hover {
  transform: none;
  box-shadow: none;
}
body.page-node-9 .pane-fpid-114 .filter-wysiwyg ul li em {
  display: inline;
  font-style: italic;
  font-weight: 400;
  font-size: inherit;
  color: var(--ink);
  margin-bottom: 0;
  line-height: inherit;
}

/* --- Sidebar (col-sm-4) refinements -------------------------------------- */
/* SPEAKERS submenu in sidebar — vertical link list, no dropdown styling */
body.page-node-9 .pane-submenu,
body.page-node-10 .pane-submenu {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 32px;
}
body.page-node-9 .pane-submenu .pane-title,
body.page-node-10 .pane-submenu .pane-title {
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tr-wider) !important;
  text-transform: uppercase;
  color: var(--gold-web) !important;
  text-align: left !important;
  padding-bottom: 0 !important;
  margin-bottom: 14px !important;
}
body.page-node-9 .pane-submenu .pane-title:before,
body.page-node-10 .pane-submenu .pane-title:before {
  display: none !important;
}
body.page-node-9 .pane-submenu ul,
body.page-node-10 .pane-submenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.page-node-9 .pane-submenu ul li,
body.page-node-10 .pane-submenu ul li {
  padding: 0;
  margin: 0;
}
body.page-node-9 .pane-submenu ul li a,
body.page-node-10 .pane-submenu ul li a {
  display: block;
  font-family: var(--serif) !important;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
body.page-node-9 .pane-submenu ul li a:hover,
body.page-node-10 .pane-submenu ul li a:hover {
  color: var(--gold-web);
  padding-left: 8px;
}
body.page-node-9 .pane-submenu ul li a.active,
body.page-node-10 .pane-submenu ul li a.active,
body.page-node-9 .pane-submenu ul li.active a,
body.page-node-10 .pane-submenu ul li.active a {
  color: var(--gold-web);
  font-weight: 500;
}

/* "Listen to Podcast" + similar sidebar buttons get full-width treatment */
body.page-node-9 .radix-layouts-sidebar .btn,
body.page-node-10 .radix-layouts-sidebar .btn {
  display: block !important;
  width: 100%;
  text-align: center;
}

/* Podcast cover image in sidebar — slight radius + drop-shadow */
body.page-node-9 .radix-layouts-sidebar .filter-wysiwyg img,
body.page-node-10 .radix-layouts-sidebar .filter-wysiwyg img {
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 11, 38, 0.15);
  margin-bottom: 16px;
}

/* --- "Request to Speak" webform — clean, modern form styling ------------ */
body.page-node-9 .webform-client-form,
body.page-node-10 .webform-client-form {
  background: var(--paper-deep);
  padding: 32px;
  border-radius: 8px;
  margin-top: 24px;
}
body.page-node-9 .webform-client-form .control-label,
body.page-node-10 .webform-client-form .control-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
body.page-node-9 .webform-client-form .form-control,
body.page-node-10 .webform-client-form .form-control {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  margin-bottom: 18px;
}
body.page-node-9 .webform-client-form .form-control:focus,
body.page-node-10 .webform-client-form .form-control:focus {
  border-color: var(--gold-web);
  outline: none;
}

/* "Request Dr. X to Speak" heading */
body.page-node-9 .pane-webform-client-block-11 > .pane-title,
body.page-node-10 .pane-webform-client-block-12 > .pane-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--ink);
  text-align: center;
  position: relative;
  padding-bottom: 18px !important;
  margin: 48px 0 20px !important;
}
body.page-node-9 .pane-webform-client-block-11 > .pane-title:before,
body.page-node-10 .pane-webform-client-block-12 > .pane-title:before {
  border-bottom-color: var(--gold-web) !important;
  width: 64px !important;
  margin-left: -32px !important;
}

/* --- Dr. Dauphinais page (page-node-9) — full-width text + video grid ----
   With the promo panes removed from the sidebar, let the main content span
   the full page width and size the bio prose to match the /about top text.
   Scoped to page-node-9 so Dr. Nutt's page is untouched. */
body.page-node-9 .col-sm-8.radix-layouts-content,
body.page-node-9 .col-sm-4.radix-layouts-sidebar {
  width: 100% !important;
  float: none !important;
}
/* Bio prose stretches across the page at the /about body size. */
body.page-node-9 .pane-fpid-114 .filter-wysiwyg p {
  font-size: 1.89rem !important;
  line-height: 1.55 !important;
  max-width: none !important;
}
/* Top bio reformatted to read like the page body text: a single full-width
   column (no side-by-side grid), no gold side-rule, with the portrait
   stacked on top, then name -> title -> info flowing as normal prose at the
   body size. */
/* First section = full-width WHITE band sitting on the paper page; the
   colour change to paper happens at the bottom of the band (where the old
   divider line was). The band lives on the pane wrapper so it stays
   full-width; the card content itself is shifted left. */
body.page-node-9 .pane-fpid-27 {
  background: #ffffff;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Pull the band up to swallow the 40px paper gap above it (the wrapper's
     margin-top) so the white starts flush under the header; padding-top
     keeps the content in place. */
  margin-top: -40px;
  padding-top: 40px;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-bottom: 56px;
}
body.page-node-9 .person--with-image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  position: relative;
  left: -1.75in;
  border-bottom: 0 !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}
body.page-node-9 .person__left-col {
  justify-content: flex-start;
  margin-bottom: 28px;
}
body.page-node-9 .person__right-col {
  width: 100%;
}
/* Drop the gold left-rule + indent; let the info span the full width. */
body.page-node-9 .person__summary {
  width: 100%;
  border-left: 0 !important;
  padding-left: 0 !important;
}
body.page-node-9 .person__summary,
body.page-node-9 .person__summary p {
  font-size: 1.89rem !important;
  line-height: 1.55 !important;
}
/* Field labels (Programs:/Email:/…) read as normal bold prose, not the
   tiny gold eyebrow, so the block matches the body text. */
body.page-node-9 .person__summary strong {
  font-family: var(--serif) !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin-right: 0;
}
/* Title line ("Chair of the Theology Department…") at body-text size,
   keeping its sans font + italic. */
body.page-node-9 .person__title {
  font-size: 1.89rem !important;
  line-height: 1.4 !important;
}
/* "Watch … Lenten Mission Talks Here" — section heading + gold hairline,
   matching the other section titles on the page. */
body.page-node-9 .dauph-lenten-heading {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: center;
  position: relative;
  padding-bottom: 18px;
  margin: 48px 0 14px !important;
}
body.page-node-9 .dauph-lenten-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 1px;
  margin-left: -32px;
  background: var(--gold-web);
}
/* Three Lenten-talk videos side by side, responsive 16:9. */
body.page-node-9 .dauph-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0 8px;
  max-width: none;
}
body.page-node-9 .dauph-video-grid > div[data-oembed-url] {
  margin: 0;
}
body.page-node-9 .dauph-video-grid iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 8px;
}
@media (max-width: 767px) {
  body.page-node-9 .dauph-video-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Dr. Nutt page (page-node-10) — same makeover as Dr. Dauphinais ------
   Promo CTAs moved out of the sidebar into a card grid below the About
   section; full-width content; bio reformatted to body-text style; first
   section as a full-width white band. Scoped to page-node-10. */
body.page-node-10 .col-sm-8.radix-layouts-content,
body.page-node-10 .col-sm-4.radix-layouts-sidebar {
  width: 100% !important;
  float: none !important;
}
body.page-node-10 .pane-fpid-115 .filter-wysiwyg p {
  font-size: 1.89rem !important;
  line-height: 1.55 !important;
  max-width: none !important;
}
/* First section = full-width white band (on the person pane wrapper). */
body.page-node-10 .pane-fpid-28 {
  background: #ffffff;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -40px;
  padding-top: 40px;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-bottom: 56px;
}
body.page-node-10 .person--with-image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  position: relative;
  left: -1.75in;
  border-bottom: 0 !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}
body.page-node-10 .person__left-col {
  justify-content: flex-start;
  margin-bottom: 28px;
}
body.page-node-10 .person__right-col {
  width: 100%;
}
body.page-node-10 .person__summary {
  width: 100%;
  border-left: 0 !important;
  padding-left: 0 !important;
}
body.page-node-10 .person__summary,
body.page-node-10 .person__summary p {
  font-size: 1.89rem !important;
  line-height: 1.55 !important;
}
body.page-node-10 .person__summary strong {
  font-family: var(--serif) !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin-right: 0;
}
body.page-node-10 .person__title {
  font-size: 1.89rem !important;
  line-height: 1.4 !important;
}

/* The five promo cards: image on top, title + gold button below, five
   across, stretching the full content width. */
/* Five equal cards on a single, centered row spanning the full page width. */
body.page-node-10 .nutt-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: stretch;
  justify-content: center;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 8px 28px 16px;
  box-sizing: border-box;
}
body.page-node-10 .nutt-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(255, 178, 0, 0.35);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 11, 38, 0.08);
}
body.page-node-10 .nutt-card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* The "Called to Catholic Education" (6th) card — stretch the square image
   to fill the 3:2 box so the full "Called to…" art shows (slight squish OK). */
body.page-node-10 .nutt-card__img[style*="screenshot_555"] {
  background-size: 100% 100%;
}
body.page-node-10 .nutt-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 14px 16px;
  text-align: center;
}
body.page-node-10 .nutt-card__title {
  font-family: var(--serif) !important;
  font-size: 1.485rem;   /* +10% */
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 16px;
}
/* Gold button sized + wrapped to fit inside the card. */
body.page-node-10 .nutt-card__btn {
  margin-top: auto !important;
  align-self: stretch;
  max-width: 100%;
  white-space: normal !important;
  font-size: 0.78rem !important;
  padding: 9px 12px !important;
  line-height: 1.25 !important;
  border-radius: 14px;
}
@media (max-width: 1100px) {
  body.page-node-10 .nutt-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  body.page-node-10 .nutt-card-grid { grid-template-columns: 1fr; }
}

/* --- /speakers/ landing page (page-node-23) — directory grid ------------- */
body.page-node-23 .speakers-landing {
  padding: 64px 24px 96px;
}
body.page-node-23 .speakers-landing .intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
body.page-node-23 .speakers-landing .intro h2 {
  font-family: var(--serif) !important;
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  position: relative;
  padding-bottom: 18px;
}
body.page-node-23 .speakers-landing .intro h2:after {
  content: "";
  position: absolute;
  width: 64px;
  height: 1px;
  bottom: 0;
  left: 50%;
  margin-left: -32px;
  background: var(--gold-web);
}
body.page-node-23 .speakers-landing .intro p {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
body.page-node-23 .speakers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  max-width: 880px;
  margin: 0 auto;
}
body.page-node-23 .speakers-card {
  display: block;
  text-decoration: none;
  text-align: center;
  color: var(--ink);
  transition: transform var(--dur) var(--ease);
}
body.page-node-23 .speakers-card:hover {
  transform: translateY(-4px);
}
body.page-node-23 .speakers-card__photo {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto 24px;
  display: block;
  box-shadow:
    0 12px 32px rgba(0, 11, 38, 0.22),
    0 3px 8px rgba(0, 11, 38, 0.10);
  transition: box-shadow var(--dur) var(--ease);
}
body.page-node-23 .speakers-card:hover .speakers-card__photo {
  box-shadow:
    0 20px 44px rgba(0, 11, 38, 0.28),
    0 6px 14px rgba(0, 11, 38, 0.14);
}
body.page-node-23 .speakers-card__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
body.page-node-23 .speakers-card__title {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
}

/* ===========================================================================
   PHASE 2 — Session 4: /events/ family modernization
   Scoped to body.page-node-14 (Prizes & Medals), page-node-27 (Past
   Conferences), page-node-32 (2027 Aquinas Conference). Header / footer /
   nav / logo are not touched.
   =========================================================================== */

/* --- Body content typography (all three pages) --------------------------- */
body.page-node-14 .page-content .filter-wysiwyg p,
body.page-node-27 .page-content .filter-wysiwyg p,
body.page-node-32 .page-content .filter-wysiwyg p {
  font-family: var(--serif) !important;
  font-size: 1.075em;
  line-height: 1.6;
  color: var(--ink);
}

/* ============ PRIZES & MEDALS (page-node-14) ============================ */

/* Top-level section heading "Awards & Prizes" */
body.page-node-14 > main .pane-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  text-align: center;
  font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
  color: var(--ink);
  position: relative;
  padding-bottom: 18px !important;
  margin: 40px 0 32px !important;
}
body.page-node-14 > main .pane-title:before {
  border-bottom-color: var(--gold-web) !important;
  width: 64px !important;
  margin-left: -32px !important;
}

/* Accordion panels — restyle as clean cream cards, drop the maroon */
body.page-node-14 .panel-group {
  margin: 0 0 32px;
}
body.page-node-14 .panel-default.panel--collapsible {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: none;
}
body.page-node-14 .panel-default.panel--collapsible > .panel-heading {
  background-color: var(--navy-deep) !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}
body.page-node-14 .panel-default.panel--collapsible > .panel-heading a,
body.page-node-14 .panel-default.panel--collapsible > .panel-heading a:hover {
  display: block;
  padding: 18px 24px !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tr-wide) !important;
  text-transform: uppercase;
  color: var(--gold-soft) !important;
  text-decoration: none !important;
  background-color: transparent !important;
}
body.page-node-14 .panel-default.panel--collapsible > .panel-heading a:hover {
  background-color: rgba(255, 178, 0, 0.05) !important;
}
body.page-node-14 .panel-default.panel--collapsible .panel-body {
  padding: 32px 36px;
  background: var(--paper);
}
/* Breathing room below the last awards panel (#panel--4) before the footer.
   The +60px offsets the footer's -60px margin-top pull, so the net visible
   gap is ~0.4in. */
body.page-node-14 #panel--4 {
  margin-bottom: calc(0.4in + 60px);
}
/* The H3 inside each panel (e.g. "The Dissertation Prize") */
body.page-node-14 .panel-body h3 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 1.65rem !important;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}

/* Award entries: the prose pattern is <p><strong>NAME</strong></p> then
   <p><strong>YEAR RECIPIENT</strong></p> then <p>bio</p>, repeated and
   separated by <hr/>. Style each <strong> all-caps line as a serif h2 with
   the year line below as an Outfit uppercase eyebrow. Style <hr> as a
   gold hairline. */
body.page-node-14 .panel-body .filter-wysiwyg p {
  font-family: var(--serif) !important;
  font-size: 1.025em !important;
  line-height: 1.65 !important;
  color: var(--ink);
  margin: 0 0 12px;
}
/* Recipient name: a <p> whose ONLY content is a <strong>NAME</strong>.
   Match those via :has() (modern browsers) — falls back gracefully. */
body.page-node-14 .panel-body .filter-wysiwyg p:has(> strong:only-child),
body.page-node-14 .panel-body .filter-wysiwyg p:has(> b:only-child) {
  font-family: var(--serif) !important;
  font-size: 1.45rem !important;
  font-weight: 500 !important;
  font-style: normal;
  margin: 22px 0 4px;
  line-height: 1.25 !important;
}
body.page-node-14 .panel-body .filter-wysiwyg p strong,
body.page-node-14 .panel-body .filter-wysiwyg p b {
  font-weight: 500;
}
/* "YYYY RECIPIENT" / "YYYY HONORABLE MENTION" eyebrow — Outfit uppercase
   gold. These <strong> lines contain digits (year). Style any <p><strong>
   that has "RECIPIENT" or "HONORABLE" text via attribute-ish selectors
   doesn't work, so we restyle ALL second-position strong-only <p>'s as
   eyebrows using adjacent-sibling combinator. */
body.page-node-14 .panel-body .filter-wysiwyg p:has(> strong:only-child) + p:has(> strong:only-child),
body.page-node-14 .panel-body .filter-wysiwyg p:has(> b:only-child) + p:has(> strong:only-child) {
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tr-wider) !important;
  text-transform: uppercase;
  color: var(--gold-web) !important;
  margin: 0 0 14px !important;
  line-height: 1.4 !important;
}
body.page-node-14 .panel-body .filter-wysiwyg hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 28px 0;
}
/* Award photos centered */
body.page-node-14 .panel-body .filter-wysiwyg .img-center img {
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 11, 38, 0.15);
  margin: 18px auto;
}

/* ============ PAST CONFERENCES (page-node-27) =========================== */

/* Hide the navy PAST CONFERENCES banner strip + let the content span full
   width now that the sidebar (submenu/speakers/books) is gone. */
body.page-node-27 .page-title {
  display: none !important;
}
body.page-node-27 .col-sm-8.radix-layouts-content,
body.page-node-27 .col-sm-4.radix-layouts-sidebar {
  width: 100% !important;
  float: none !important;
}
/* Top banner — friend-aquinas2 (Guercino St. Thomas) at the standard 300px
   banner height, top-anchored to keep his face in view. */
body.page-node-27 .page-image {
  display: block !important;
  width: 100%;
  height: 300px !important;
  min-height: 300px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-image: url('/sites/ac/files/styles/hosted_core_wide_3x1_1400_2x/public/uploads/images/friend-aquinas2__itok_ADvzFHRm.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: var(--navy-deep);
}
body.page-node-27 .pane-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  text-align: center;
  font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
  color: var(--ink);
  position: relative;
  padding-bottom: 18px !important;
  margin: 40px 0 32px !important;
}
body.page-node-27 .pane-title:before {
  border-bottom-color: var(--gold-web) !important;
  width: 64px !important;
  margin-left: -32px !important;
}

/* Convert the <h4> list of past conferences to a card grid. After the
   HTML rewrite below, each conference is a <a class="conference-card">
   with title + year + Read more pill. */
/* 10 conferences as two rows of five, enlarged and stretched full width on
   the paper section. Cards are navy (matching the heading), white text, no
   gold outline, with a gold "Read more" pill. */
body.page-node-27 .conference-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 0 0 56px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 28px;
  list-style: none;
}
body.page-node-27 .conference-card {
  display: flex;
  flex-direction: column;
  background: var(--navy-deep);
  border: 0;
  border-radius: 8px;
  padding: 32px 26px 28px;
  text-decoration: none;
  color: var(--paper);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
}
body.page-node-27 .conference-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 11, 38, 0.30);
}
body.page-node-27 .conference-card__year {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--gold-web);
  margin-bottom: 10px;
}
body.page-node-27 .conference-card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--paper);
  flex: 1 0 auto;
  margin: 0 0 24px;
}
body.page-node-27 .conference-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--gold-web);
  border: 1px solid var(--gold-web);
  color: var(--navy-deep);
  transition: filter var(--dur) var(--ease);
}
body.page-node-27 .conference-card:hover .conference-card__cta {
  filter: brightness(1.08);
}

/* Photo gallery: five per row, full-width, two rows shown until "Show More". */
body.page-node-27 #pc-gallery .row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 28px;
}
body.page-node-27 #pc-gallery .row > div {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
/* Hide everything past the first 10 (two rows) until expanded. */
body.page-node-27 #pc-gallery .row > div:nth-child(n+11) {
  display: none;
}
body.page-node-27 #pc-gallery.pc-gallery--expanded .row > div:nth-child(n+11) {
  display: block;
}
body.page-node-27 #pc-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  transition: transform var(--dur) var(--ease);
}
body.page-node-27 #pc-gallery a:hover img {
  transform: scale(1.03);
}
body.page-node-27 .pc-gallery__more {
  text-align: center;
  /* 1in of space under the button before the footer; +60px offsets the
     footer's -60px margin-top pull. */
  margin: 28px 0 calc(1in + 60px);
}

/* ============ 2027 AQUINAS CONFERENCE (page-node-32) ==================== */

/* Remove the navy "2027 Aquinas Conference" page-title band under the header —
   the hero already carries the title. */
body.page-node-32 .page-title {
  display: none !important;
}
/* Sidebar emptied (submenu/Call-for-Papers/back-of-head image removed,
   Visiting Priest moved to the end) — let the content span full width so
   the hero + Augustine section centre on the whole page. */
body.page-node-32 .col-sm-8.radix-layouts-content,
body.page-node-32 .col-sm-4.radix-layouts-sidebar {
  width: 100% !important;
  float: none !important;
}

/* Hero treatment for the Augustine + Thomas image */
body.page-node-32 .pane-vid-988 {
  position: relative;
  margin: 0 calc(50% - 50vw) 48px !important;  /* breakout */
}
body.page-node-32 .pane-vid-988 .pane-content,
body.page-node-32 .pane-vid-988 .fieldable-panels-pane,
body.page-node-32 .pane-vid-988 .field,
body.page-node-32 .pane-vid-988 .field-items,
body.page-node-32 .pane-vid-988 .field-item {
  margin: 0 !important;
  padding: 0 !important;
}
body.page-node-32 .pane-vid-988 picture {
  display: block;
  width: 100vw;
  height: 100vh;            /* match the /index hero */
  overflow: hidden;         /* clip the cropped inch top + bottom */
  margin: 0 !important;
}
body.page-node-32 .pane-vid-988 picture img {
  display: block;
  width: 100vw;
  height: calc(100vh + 192px);  /* +1in (96px) top & bottom, then clipped */
  object-fit: cover;
  object-position: center 30%;
  margin-top: -96px !important; /* crop 1in off the top; bottom clipped by picture */
  margin-bottom: 0 !important;
}
body.page-node-32 .pane-vid-988::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(12, 35, 64, 0.55) 0%,
    rgba(12, 35, 64, 0.30) 40%,
    rgba(12, 35, 64, 0.85) 100%);
  pointer-events: none;
}
body.page-node-32 .pane-vid-988 .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: var(--paper);
}
body.page-node-32 .hero-overlay__eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 18px;
}
body.page-node-32 .hero-overlay__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 10.5vw, 8.75rem);  /* ~+75% over the prior 5rem max */
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--paper);
  margin: 0 0 14px;
  max-width: 16ch;
}
body.page-node-32 .hero-overlay__venue {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.61rem;          /* +40% over 1.15rem */
  color: var(--paper);
  opacity: 0.92;
  margin: 0 0 32px;
}
body.page-node-32 .hero-overlay__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 999px;
  background: var(--gold-web);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--gold-web);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.page-node-32 .hero-overlay__cta:hover {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}
body.page-node-32 .hero-overlay__note {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.7);
}

/* ---- Alternating full-bleed section bands: white · paper · navy ----
   Order under the hero: Augustine(white) · Speakers(paper) ·
   Visiting Priest(navy) · Carousel(white).
   Each band is painted by a 100vw ::before so the content stays centred. */
body.page-node-32 .pane-vid-988 {
  margin-bottom: 0 !important;          /* hero flush to the first band */
}
body.page-node-32 .pane-vid-989,
body.page-node-32 .pane-vid-1033,
body.page-node-32 .pane-vid-1037,
body.page-node-32 .pane-vid-1045 {
  position: relative;
  margin: 0 !important;
  padding-top: 56px;
  padding-bottom: 56px;
}
body.page-node-32 .pane-vid-989::before,
body.page-node-32 .pane-vid-1033::before,
body.page-node-32 .pane-vid-1037::before,
body.page-node-32 .pane-vid-1045::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: 0;
}
body.page-node-32 .pane-vid-989 > *,
body.page-node-32 .pane-vid-1033 > *,
body.page-node-32 .pane-vid-1037 > *,
body.page-node-32 .pane-vid-1045 > * {
  position: relative;
  z-index: 1;
}
body.page-node-32 .pane-vid-989::before  { background: #ffffff; }          /* white */
body.page-node-32 .pane-vid-1033::before { background: var(--paper); }     /* paper */
body.page-node-32 .pane-vid-1037::before { background: var(--navy-deep); } /* navy  */
body.page-node-32 .pane-vid-1045::before { background: #ffffff; }          /* white */

/* "Our Speakers" (paper band): match the space below the last name to the
   space above the title (band pad 56 + title margin-top 48 = 104px above;
   104 − last-line margin-bottom 6 = 98px padding-bottom). */
body.page-node-32 .pane-vid-1033 { padding-bottom: 98px; }
/* Visiting Priest — extra room for the longer copy */
body.page-node-32 .pane-vid-1037 { padding-bottom: 72px; }

/* navy band → flip text to light */
body.page-node-32 .pane-vid-1037 .pane-title,
body.page-node-32 .pane-vid-1037 .filter-wysiwyg,
body.page-node-32 .pane-vid-1037 .filter-wysiwyg p,
body.page-node-32 .pane-vid-1037 .filter-wysiwyg a {
  color: var(--paper) !important;
}

/* The body sections under the hero — clean editorial typography */
body.page-node-32 .pane-vid-989 .pane-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  text-align: center;
  font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
  color: var(--ink);
  position: relative;
  padding-bottom: 18px !important;
  margin: 32px 0 28px !important;
}
body.page-node-32 .pane-vid-989 .pane-title:before {
  border-bottom-color: var(--gold-web) !important;
  width: 64px !important;
  margin-left: -32px !important;
}
body.page-node-32 .pane-vid-989 .filter-wysiwyg p {
  font-family: var(--serif) !important;
  font-size: 1.15em;
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto 18px;
  color: var(--ink);
}

/* Override the green "bg-success" Registration banner — turn it into a
   refined gold-bordered pill instead of a Bootstrap success block */
body.page-node-32 .pane-vid-1051 .filter-wysiwyg h1.bg-success {
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tr-widest) !important;
  text-transform: uppercase;
  display: inline-flex !important;
  align-items: center;
  padding: 14px 30px !important;
  border: 1.5px solid var(--gold-web) !important;
  border-radius: 999px;
  margin: 24px auto !important;
}
body.page-node-32 .pane-vid-1051 .filter-wysiwyg {
  text-align: center;
}

/* "Our Speakers" name list — render as a serif grid */
body.page-node-32 .pane-vid-1033 .pane-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  text-align: center;
  font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
  color: var(--ink);
  position: relative;
  padding-bottom: 18px !important;
  margin: 48px 0 28px !important;
}
body.page-node-32 .pane-vid-1033 .pane-title:before {
  border-bottom-color: var(--gold-web) !important;
  width: 64px !important;
  margin-left: -32px !important;
}
body.page-node-32 .pane-vid-1033 .filter-wysiwyg p.bigger {
  font-family: var(--serif) !important;
  font-size: 1.89rem !important;   /* match /about body copy */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink);
  text-align: center;
  margin: 6px 0;
}
body.page-node-32 .pane-vid-1033 .filter-wysiwyg p.bigger:first-of-type {
  margin-top: 16px;
}

/* Conference photo carousel (replaces the swiper slideshow) — auto-scrolling
   marquee, 4 across on desktop / 2 on mobile, pauses on hover. Mirrors the
   /podcasts carousel. Cards are duplicated in HTML for a seamless loop. */
body.page-node-32 .conf-carousel {
  overflow: hidden;
  margin: 0 calc(50% - 50vw);
  padding: 8px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
body.page-node-32 .conf-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  width: max-content;
  animation: conf-marquee 70s linear infinite;
  will-change: transform;
}
body.page-node-32 .conf-carousel:hover .conf-carousel__track {
  animation-play-state: paused;
}
@keyframes conf-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
body.page-node-32 .conf-carousel__item {
  flex: 0 0 calc(25vw - 22px);
}
body.page-node-32 .conf-carousel__item img {
  display: block;
  width: 100%;
  height: auto;            /* natural ratio — show the full photo, no crop */
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 11, 38, 0.18);
}
@media (max-width: 768px) {
  body.page-node-32 .conf-carousel__item {
    flex: 0 0 calc(50vw - 22px);
  }
}

/* ===========================================================================
   PHASE 2 — Session 5: /blog/ article reading-room
   Scoped via body.node-type-blog-post (works for any current/future post)
   plus body.page-node-31 for this specific article. Header / footer / nav /
   logo are not touched.
   =========================================================================== */

/* BLOG · DATE eyebrow above the article title */
body.node-type-blog-post .blog-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--gold-web);
  text-align: center;
  margin: 32px auto 14px;
  display: block;
}

/* Page-title bar — make it serif hero-scale, less of a chrome bar */
body.node-type-blog-post .page-title {
  background-color: transparent !important;
  padding: 0 !important;
}
body.node-type-blog-post .page-title h1 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink) !important;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 12px !important;
  padding: 0 24px !important;
}

/* Decorative gold rule under the title */
body.node-type-blog-post .pane-page-title {
  position: relative;
  padding-bottom: 32px;
}
body.node-type-blog-post .pane-page-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold-web);
  margin: 28px auto 0;
}

/* --- Reading-room layout ------------------------------------------------- */
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg {
  max-width: 720px;
  margin: 24px auto 64px;
  padding: 0 24px;
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg p {
  font-family: var(--serif) !important;
  font-size: 1.125rem !important;
  line-height: 1.65 !important;
  color: var(--ink);
  margin: 0 0 22px;
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-web);
  transition: color var(--dur) var(--ease);
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg a:hover {
  color: var(--gold-web);
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg strong {
  font-weight: 600;
  color: var(--ink);
}

/* In-article headings — serif scale-down from the article title */
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg h1,
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg h2 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
  line-height: 1.25;
  color: var(--ink);
  margin: 36px 0 14px;
  letter-spacing: -0.005em;
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg h3 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 1.35rem !important;
  line-height: 1.3;
  color: var(--ink);
  margin: 28px 0 10px;
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg h4 {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tr-wider) !important;
  text-transform: uppercase;
  color: var(--gold-web);
  margin: 28px 0 10px;
}

/* Drop-cap on the lead paragraph (first <p> in the body) */
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 3.6em;
  font-weight: 500;
  float: left;
  line-height: 0.86;
  margin: 0.05em 0.14em -0.05em 0;
  color: var(--gold-web);
}

/* Pull-quote band — any <blockquote> in the article body renders as a
   paper-deep editorial band with serif italic text and a gold left rule */
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg blockquote {
  background: var(--paper-deep);
  border-left: 3px solid var(--gold-web);
  padding: 28px 32px 24px 36px;
  margin: 32px -24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.55;
  color: var(--ink);
  position: relative;
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg blockquote::before {
  content: "\201C";  /* curly opening quote */
  position: absolute;
  top: 6px;
  left: 12px;
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--gold-web);
  opacity: 0.6;
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg blockquote p {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 1.35rem !important;
  margin: 0 !important;
  color: var(--ink) !important;
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg blockquote cite,
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg blockquote footer {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 14px;
}

/* In-article images — pleasant defaults */
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg img {
  max-width: 100%;
  height: auto !important;
  border-radius: 6px;
  margin: 8px 0;
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg .img-right {
  margin: 4px 0 16px 24px !important;
  border-radius: 6px;
  max-width: 320px;
}
body.node-type-blog-post .field-name-field-blog-post-body .filter-wysiwyg p > img {
  display: block;
  margin: 24px auto;
}

/* --- /blog/ three-section rebuild (page-node-31) ------------------------
   Three full-width breakout bands: Simple Truth intro (paper), host split
   (white, image left + bio right), Catholic Theology Show (navy/white).
   Proportions echo the /index + /about full-bleed sections. */
body.page-node-31 .blog-section {
  padding: 88px 0;
}
/* First section starts just under the page-title's gold line: that line
   sits 32px above the content (pane-page-title padding-bottom) and the
   page-content top padding is 0, so 11px here puts the body ~0.45in below
   the gold line. */
body.page-node-31 #blog-simple-truth {
  padding-top: 11px;
}
body.page-node-31 .blog-section--paper { background-color: var(--paper); }
body.page-node-31 .blog-section--white { background-color: #ffffff; }
body.page-node-31 .blog-section--navy  { background-color: var(--navy-deep); }

/* Centered reading column inside the paper + navy bands. */
body.page-node-31 .blog-section__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

/* Shared typography */
body.page-node-31 .blog-section h1,
body.page-node-31 .blog-section h2,
body.page-node-31 .blog-section h3,
body.page-node-31 .blog-section h4 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
}
body.page-node-31 .blog-section h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 18px; }
body.page-node-31 .blog-section h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin: 0 0 20px; }
body.page-node-31 .blog-section h3 { font-size: 1.25rem; margin: 0 0 18px; font-weight: 400 !important; }
body.page-node-31 .blog-section h4 { font-size: 1.4rem; margin: 0 0 14px; }
body.page-node-31 .blog-section p {
  font-family: var(--serif) !important;
  font-size: 1.89rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 22px;
}
body.page-node-31 .blog-section a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-web);
}
body.page-node-31 .blog-section a:hover { color: var(--gold-web); }

/* Host split — image left, About-Your-Host text right. */
body.page-node-31 .blog-host__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
body.page-node-31 .blog-host__img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 11, 38, 0.18);
}
body.page-node-31 .blog-host__text { text-align: left; }
@media (max-width: 767px) {
  body.page-node-31 .blog-host__grid { grid-template-columns: 1fr; gap: 28px; }
  body.page-node-31 .blog-host__text { text-align: center; }
}

/* Catholic Theology Show — navy band, paper-cream text. */
body.page-node-31 .blog-section--navy h1,
body.page-node-31 .blog-section--navy h2,
body.page-node-31 .blog-section--navy h3,
body.page-node-31 .blog-section--navy h4,
body.page-node-31 .blog-section--navy p,
body.page-node-31 .blog-section--navy a {
  color: var(--paper) !important;
}
body.page-node-31 .blog-section--navy a { border-bottom-color: var(--gold-web); }
body.page-node-31 .blog-section--navy a:hover { color: var(--gold-web) !important; }
body.page-node-31 .blog-cts__img {
  margin: 0 0 24px;
}
body.page-node-31 .blog-cts__img img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* The three section titles — uniform size + the /about gold hairline.
   Targets: Simple Truth <h1>, About-Your-Host <h4>, Catholic-Theology <h2>. */
body.page-node-31 #blog-simple-truth .blog-section__inner > h1,
body.page-node-31 #blog-host .blog-host__text > h4,
body.page-node-31 #blog-cts .blog-section__inner > h2 {
  font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
  font-weight: 500 !important;
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 28px;
}
/* Centered hairline under the centered titles (paper + navy bands). */
body.page-node-31 #blog-simple-truth .blog-section__inner > h1::after,
body.page-node-31 #blog-cts .blog-section__inner > h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 1px;
  margin-left: -32px;
  background: var(--gold-web);
}
/* Left-aligned hairline under the host title (left-aligned column). */
body.page-node-31 #blog-host .blog-host__text > h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 1px;
  background: var(--gold-web);
}

/* Catholic Theology title: the heading is a link, which otherwise gets a
   full-width gold underline (the "long line"). Drop that underline and pull
   the 64px hairline up closer to the text so it sits where the long line
   was. */
body.page-node-31 #blog-cts .blog-section__inner > h2 a {
  border-bottom: 0 !important;
}
body.page-node-31 #blog-cts .blog-section__inner > h2 {
  padding-bottom: 8px;
}

/* --- Header nav links — +5% font-size and +5% farther apart (Session 5) - */
.page-header #superfish-1.sf-horizontal a.sf-depth-1,
.page-header #superfish-1.sf-horizontal span.sf-depth-1 {
  font-size: 13.125px !important;   /* was 12.5px, +5% */
  padding: 10px 16.8px !important;  /* was 10px 16px, horizontal +5% */
}

/* ===========================================================================
   /contact-us/ (formerly /stay-touch/) — body class page-node-19.
   Hide the navy STAY-IN-TOUCH page-title strip; force the intro copy into
   the same serif used by the Contact-Us heading; recolor the newsletter
   band (#pane-99) to navy/paper to match /about/ #pane-98.
   =========================================================================== */
body.page-node-19 .page-title {
  display: none !important;
}

/* Intro heading + paragraph use the same serif as the Contact-Us pane-title
   (.pane-title is already Cormorant Garamond via the global rule). */
body.page-node-19 .pane-fpid-63 .filter-wysiwyg h1,
body.page-node-19 .pane-fpid-63 .filter-wysiwyg p {
  font-family: var(--serif) !important;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* The "Don't miss out" CTA band (#pane-99) was a maroon (#8f1016) breakout
   on the live site. Override the inline :before color to navy-deep and
   recolor the inline-white text spans to paper-cream, matching the /about/
   page #pane-98 treatment exactly. Equal padding top/bottom centres the
   content block vertically inside the navy field (the inline style was
   asymmetric 100/75). */
body.page-node-19 #pane-99 {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}
body.page-node-19 #pane-99 > .container {
  text-align: center;
}
body.page-node-19 #pane-99:before {
  background-color: var(--navy-deep) !important;
}
body.page-node-19 #pane-99 h1,
body.page-node-19 #pane-99 h1 span,
body.page-node-19 #pane-99 p,
body.page-node-19 #pane-99 p span,
body.page-node-19 #pane-99 p strong span {
  color: var(--paper) !important;
  font-family: var(--serif) !important;
}
body.page-node-19 #pane-99 h1 {
  font-weight: 500 !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: -0.005em;
  margin: 0 0 28px !important;
  position: relative;
  padding-bottom: 18px;
}
body.page-node-19 #pane-99 h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  margin-left: -32px;
  height: 1px;
  background-color: var(--gold-web);
  border: 0;
}
body.page-node-19 #pane-99 p {
  font-family: var(--sans) !important;
  font-size: 1.05rem;
}
body.page-node-19 #pane-99 p strong span {
  font-size: 1.5em !important;
  line-height: 1.4;
}

/* ===========================================================================
   PHASE 2 — Session 6: /podcasts/ listing
   Scoped to body.page-node-21. Replaces the 190 Apple-Podcasts <iframe>
   embeds with square cards laid out in rows of 5. Each card carries the
   show's cover art as thumbnail, an "EP. NN" eyebrow, the episode title,
   and a gold "PLAY" pill that links out to Apple Podcasts.
   =========================================================================== */

/* Hide the navy "Podcasts" strip; full-width content; import the /about
   friend-aquinas2 banner at the top (300px, top-anchored). */
body.page-node-21 .page-title {
  display: none !important;
}
body.page-node-21 .col-sm-8.radix-layouts-content,
body.page-node-21 .col-sm-4.radix-layouts-sidebar {
  width: 100% !important;
  float: none !important;
}
body.page-node-21 .page-image {
  display: block !important;
  width: 100%;
  height: 300px !important;
  min-height: 300px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-image: url('/sites/ac/files/styles/hosted_core_wide_3x1_1400_2x/public/uploads/images/friend-aquinas2__itok_ADvzFHRm.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: var(--navy-deep);
}

/* Show intro paragraph at the top */
body.page-node-21 .pane-vid-973 .pane-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  text-align: center;
  font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
  color: var(--ink);
  position: relative;
  padding-bottom: 18px !important;
  margin: 40px 0 24px !important;
}
body.page-node-21 .pane-vid-973 .pane-title:before {
  border-bottom-color: var(--gold-web) !important;
  width: 64px !important;
  margin-left: -32px !important;
}
body.page-node-21 .pane-vid-973 .filter-wysiwyg p {
  font-family: var(--serif) !important;
  font-size: 1.15em !important;
  line-height: 1.7 !important;
  max-width: 760px;
  margin: 0 auto 32px;
  color: var(--ink);
  text-align: center;
}

/* Section header above the carousel — matched to the /about section-heading
   size (same as the "Catholic Theology Show" heading above the intro). */
body.page-node-21 .podcast-section-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  text-align: center;
  color: var(--ink);
  position: relative;
  padding-bottom: 18px;
  margin: 56px 0 32px;
  letter-spacing: -0.005em;
}
body.page-node-21 .podcast-section-head::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 1px;
  bottom: 0;
  left: 50%;
  margin-left: -32px;
  background: var(--gold-web);
}

/* --- Auto-scrolling carousel: ~4 cards visible, slow continuous drift,
   pauses on hover. Cards are duplicated in the track so translateX(-50%)
   loops seamlessly. ----------------------------------------------------- */
body.page-node-21 .podcast-carousel {
  overflow: hidden;
  margin: 24px calc(50% - 50vw) 28px;
  padding: 8px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
body.page-node-21 .podcast-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 26px;
  width: max-content;
  animation: pc-marquee 600s linear infinite;
  will-change: transform;
}
body.page-node-21 .podcast-carousel:hover .podcast-carousel__track {
  animation-play-state: paused;
}
@keyframes pc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Carousel cards: 4 across on desktop, 2 across on mobile; content-height
   (not square) so the picture + number + title all show. */
body.page-node-21 .podcast-carousel .podcast-card {
  flex: 0 0 calc(22.5vw - 26px);
  aspect-ratio: auto !important;
  height: auto;
}
@media (max-width: 768px) {
  body.page-node-21 .podcast-carousel .podcast-card {
    flex: 0 0 calc(45vw - 26px);
  }
}

/* Listen buttons row below the carousel — gold, evenly spaced, wrap on mobile. */
body.page-node-21 .podcast-listen-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 1000px;
  margin: 8px auto 80px;
}
body.page-node-21 .podcast-listen-row p {
  margin: 0;
}

/* Each card: square, paper background, gold-bordered on hover */
body.page-node-21 .podcast-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  padding: 14px;
  text-decoration: none;
  color: var(--ink);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  overflow: hidden;
}
body.page-node-21 .podcast-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 11, 38, 0.16);
  border-color: var(--gold-web);
}
body.page-node-21 .podcast-card__thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
  display: block;
}
body.page-node-21 .podcast-card__epnum {
  font-family: var(--sans);
  font-size: 15px;            /* +50% */
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--gold-web);
  margin: 0 0 6px;
  line-height: 1;
}
body.page-node-21 .podcast-card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.31rem;         /* reduced 30% from 3.3rem */
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  /* Keep the text inside the card's text box (no overflow). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Mobile: scale the title down so it stays readable + contained in the
   2-across cards. */
@media (max-width: 768px) {
  body.page-node-21 .podcast-card__epnum { font-size: 13px; }
  body.page-node-21 .podcast-card__title { font-size: 1.05rem; -webkit-line-clamp: 3; }
}
body.page-node-21 .podcast-card__play {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gold-web);
  color: #fff;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.page-node-21 .podcast-card:hover .podcast-card__play {
  background: var(--navy);
  color: var(--paper);
}
body.page-node-21 .podcast-card__play::after {
  content: "▸";
  font-size: 11px;
  line-height: 1;
}

/* The show's cover image floating in the sidebar (existing markup) */
body.page-node-21 .radix-layouts-sidebar .filter-wysiwyg img {
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 11, 38, 0.15);
  margin-bottom: 16px;
}

/* --- Inner-page maroon sweep ----------------------------------------------
   The upstream CSS bundle still contains nine maroon-ish hexes
   (#a40000 #710000 #8f1016 #780d12 #8b0000 #843534 #941928 #a94442 #c7254e)
   spread across Bootstrap "-danger" classes and Drupal panel defaults.
   None of those classes appear on subsidiary pages today, but we override
   them all preventively so any new content can never reintroduce maroon.
   Header / footer / nav / logo are NOT touched. */
.label-danger,
.progress-bar-danger,
.panel-default > .panel-heading,
.pane-submenu,
.alert-danger,
.bg-danger {
  background-color: var(--navy-deep) !important;
  color: var(--paper) !important;
  border-color: var(--navy-deep) !important;
}
.text-danger,
a.text-danger {
  color: var(--navy-deep) !important;
}
a.text-danger:hover,
a.text-danger:focus {
  color: var(--gold-web) !important;
}
.panel-default > .panel-heading .badge,
.btn-danger .badge {
  color: var(--paper) !important;
  background-color: var(--navy-deep) !important;
}
/* btn-danger disabled / focus states (the upstream rules ship the maroons
   in #8f1016 + #780d12 borders) — already mapped my .btn-danger fills to
   navy, but the disabled/focus rules cascaded behind them. */
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger,
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus,
.btn-danger[disabled].focus,
fieldset[disabled] .btn-danger.focus {
  background-color: var(--navy-deep) !important;
  border-color: var(--navy-deep) !important;
  color: var(--paper) !important;
}

/* ---------- Hero (Santa Maria Maggiore ceiling) ---------- */

#pane-9 {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-image: url('/local-assets/hero-ecce-panis.jpg') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-color: var(--navy-deep) !important;
}
/* Light, even scrim: just enough to settle the painting's brightest spots
   (St. Thomas's white habit, the open book) and darken the edges. The
   centred frosted plate below carries the real text contrast. */
#pane-9:before {
  display: block !important;
  background:
    linear-gradient(180deg,
      rgba(0, 11, 38, 0.30) 0%,
      rgba(0, 11, 38, 0.22) 50%,
      rgba(0, 11, 38, 0.42) 100%) !important;
}
#pane-9 > .container {
  width: 100%;
  position: relative;
  z-index: 2;
  max-width: 1280px;
  /* Push the centred text block down so it sits below St. Thomas's face
     (which renders in the upper portion of the painting). */
  top: calc(16vh - 1in);
  transform: none;
}
/* No plate — the headline + button sit directly on the painting. The text
   block is pushed down so it sits below St. Thomas's face. */
#pane-9 .filter-wysiwyg > div[style*="max-width:700px"],
#pane-9 .filter-wysiwyg > div[style*="max-width: 700px"] {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hero text — large serif display, paper color, gold italic accent
   (matches AACSA's hero treatment). */
#pane-9 h2 {
  /* Cormorant Garamond, doubled (~+100%) and sitting directly on the
     painting; a strong shadow keeps it legible without a plate. */
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  color: var(--paper) !important;
  font-size: clamp(4.5rem, 8.4vw, 7.2rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  max-width: 100%;
  width: 100%;
  margin: 0 auto 34px !important;
  text-align: center;
  text-shadow:
    0 2px 18px rgba(0, 11, 38, 0.85),
    0 1px 4px rgba(0, 0, 0, 0.7);
  white-space: normal;
}
/* Hero <em> renders upright (no italics) in the AC logo gold so a single
   word — currently "Thomistic" — can be accented without italicizing. */
#pane-9 em,
#pane-9 .gold {
  font-family: var(--serif) !important;
  font-style: normal !important;
  color: var(--gold-web) !important;
  font-weight: inherit;
}

/* The hero CTA pill: enlarge and refine for hero scale. */
#pane-9 .btn {
  font-size: 11.7px !important;
  padding: 16.2px 32.4px !important;
  letter-spacing: var(--tr-widest) !important;
}

/* ---------- "What you get when you join our community" cards ----------- */

#benefits {
  background-color: var(--paper);
}
#benefits .pane-style-style-alternate {
  min-height: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
}
#benefits .pane-style-style-alternate .pane-content,
#benefits .fieldable-panels-pane,
#benefits .field,
#benefits .field-items,
#benefits .field-item,
#benefits .filter-wysiwyg {
  padding: 0 !important;
  margin: 0 !important;
}
#benefits .filter-wysiwyg.clearfix:before,
#benefits .filter-wysiwyg.clearfix:after {
  display: none;
}

#benefits .benefit-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--ink);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 12px 28px rgba(0, 11, 38, 0.18),
    0 4px 8px rgba(0, 11, 38, 0.08);
  cursor: default;
  isolation: isolate;
}
/* (hover lift/scale removed per request) */

#benefits .radix-layouts-column2 .benefit-card {
  background-size: 112% auto;
}
/* Card 3 — match the visible image rectangle of cards 1 & 2 in BOTH width
   and height. Width: 112% scale → image fills 100% of card width (sides
   cropped) like cards 1 & 2. Height: the new source is nearly square so
   112% auto alone would extend ~79% of card depth; a card-3-only ::after
   paints solid --ink over the bottom 47% to mask the lower portion of the
   image, leaving the visible image area at 100% × 53% of the card — the
   same rectangle as card 2 (cards 1 & 2 land at 59% and 53% naturally). */
#benefits .radix-layouts-column3 .benefit-card {
  background-size: 112% auto;
  background-position: center top;
}
#benefits .radix-layouts-column3 .benefit-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 53%;
  bottom: 0;
  background: var(--ink);
  z-index: 0;
}
#benefits .radix-layouts-column3 .benefit-card__label {
  margin-bottom: 1lh;
}
/* Card 2's text — center the label inside the dark band below the image
   so it sits visually centered like the longer labels of cards 1 and 3.
   Absolute-positioned at 75% of card height (the vertical middle of the
   dark area, since the image occupies the top ~50%). Scoped to card 2
   only; cards 1 and 3 keep their existing rules. The image itself is
   untouched. */
#benefits .radix-layouts-column2 .benefit-card__label {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-self: auto;
  margin: 0;
  padding: 0 28px;
  width: 100%;
  box-sizing: border-box;
}

#benefits .benefit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0, 11, 38, 0.05) 0%,
      rgba(0, 11, 38, 0.25) 40%,
      rgba(0, 11, 38, 0.82) 100%);
  z-index: 1;
}

#benefits .benefit-card__label {
  position: relative;
  z-index: 2;
  font-family: var(--serif) !important;
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 30px);
  line-height: 1.18;
  color: var(--gold-soft);
  text-align: center;
  padding: 0 28px 36px;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.65);
  align-self: flex-end;
}

#benefits .row + .row { gap: 24px 0; }
#benefits .col-sm-4 { padding-left: 14px; padding-right: 14px; }

#benefits h1 {
  font-family: var(--serif) !important;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin-bottom: 36px !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  position: relative;
  padding-bottom: 18px;
  text-align: center;
}
#benefits h1 strong { font-weight: 400; }
#benefits h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  margin-left: -32px;
  height: 1px;
  background-color: var(--gold-web);
  border: 0;
}

/* ---------- About section ---------- */

#two-column-images {
  margin-top: -1in !important;
  background-color: var(--paper) !important;
}
#two-column-images:before {
  background-color: var(--paper) !important;
}
#two-column-images .filter-wysiwyg p {
  font-family: var(--serif) !important;
  font-size: 1.2em;
  color: var(--ink);
  line-height: 1.45;
}
#two-column-images h2.pane-title {
  font-family: var(--serif) !important;
  font-weight: 400;
}

/* ---------- Quote band ("Better to Illuminate than Merely to Shine") ---- */

#pane-25 h1 {
  font-family: var(--serif) !important;
  font-weight: 300;
  font-style: italic;
  color: var(--gold-soft) !important;
  font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
}
#pane-25:before {
  background-color: var(--navy-deep) !important;
}

/* ---------- Mission band — standalone navy section between About and Books ---------- */

#mission-band {
  margin-top: 0;
  /* Equal top/bottom padding (138px each) centers the text inside the
     navy field without changing the field's total height (90+186=276). */
  padding: 138px 0;
}
/* Override the inline #000b26 baked into the HTML so Mission uses the
   same AMU athletics navy as the header/footer/etc. */
#mission-band:before {
  background-color: var(--navy-deep) !important;
}
#mission-band .mission-band__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
#mission-band .mission-band__title {
  font-family: var(--serif) !important;
  font-weight: 400;
  font-size: clamp(2.53rem, 4.554vw, 3.479rem);  /* +15% from previous */
  color: var(--paper) !important;
  margin: 0 0 22px;
  letter-spacing: -0.005em;
  position: relative;
  padding-bottom: 18px;
}
#mission-band .mission-band__title::after {
  content: "";
  position: absolute;
  width: 64px !important;
  height: 1px !important;
  bottom: 0;
  left: 50%;
  margin-left: -32px !important;
  background-color: var(--gold-web) !important;
  background: var(--gold-web) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  box-sizing: content-box !important;
}
#mission-band .mission-band__body {
  font-family: var(--serif) !important;
  font-weight: 400;
  font-size: 1.455em;  /* +15% from previous 1.265em */
  line-height: 1.55;
  color: var(--paper);
}

/* ---------- Co-Edited Books carousel ---------- */

.pane-current-122 {
  padding-top: 60px;
  position: relative;
}
/* Cream extension pseudo dropped — reduces books visual area by 1 inch. */
.pane-current-122::before {
  content: none !important;
}
.pane-current-122 h2.pane-title {
  font-family: var(--serif) !important;
  font-weight: 400;
}
.swiper-caption .filter-wysiwyg p:not(:first-child) {
  font-family: var(--serif) !important;
  font-size: 1.1em;
  color: var(--ink) !important;
  line-height: 1.5;
}

/* ---------- "For the Love of Truth..." section ---------- */

/* Drop the inline max-width:700px wrapper so the section spans the full
   container width (same as the books section above). */
.pane-fpid-13 .filter-wysiwyg > div[style*="700px"] {
  max-width: none !important;
  margin: 0 !important;
}

/* Clearly delineate the section with thin antique rules above and below,
   plus generous internal padding for a refined editorial block. */
.pane-fpid-13 {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 48px 24px !important;
}

.pane-fpid-13 .filter-wysiwyg h2 {
  font-family: var(--serif) !important;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
  text-align: center;
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 28px;
}
.pane-fpid-13 .filter-wysiwyg h2::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 1px;
  bottom: 0;
  left: 50%;
  margin-left: -32px;
  background-color: var(--gold-web);
  border: 0;
}
.pane-fpid-13 .filter-wysiwyg p {
  font-family: var(--serif) !important;
  font-size: 1.1em;
  color: var(--ink);
  line-height: 1.55;
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- "What We Do" cards ---------- */

#mini-panel-6 h2 {
  font-family: var(--serif) !important;
  font-weight: 400;
}
#mini-panel-6 h4 {
  font-family: var(--serif) !important;
  font-weight: 400;
  color: var(--paper);
  line-height: 1.4;
}
#mini-panel-6 .img-caption {
  font-family: var(--serif) !important;
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 18px 0 22px;
}
#mini-panel-6 .pane-style-style-alternate {
  background-color: transparent !important;
  min-height: 0 !important;
}
/* Force the left card's image to the same aspect ratio as the right card's
   natural source (1456 × 1138), so both render at identical dimensions.
   object-fit: cover + object-position: top then crops the Sapientia image
   from the bottom — the star's bottom point becomes the new lower edge. */
img[src="/local-assets/what-we-do-1.webp"] {
  aspect-ratio: 1456 / 1138 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: top !important;
}

/* ---------- Pane titles / section headings — academic refinement -------- */

.pane-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  font-size: clamp(2rem, 3.6vw, 2.75rem) !important;
  letter-spacing: -0.005em;
  padding-bottom: 18px !important;
  margin-bottom: 28px !important;
}
.pane-title:before {
  width: 64px !important;
  margin-left: -32px !important;
  height: 1px !important;
  background-color: var(--gold-web) !important;
  border: 0 !important;
}

/* ---------- About — drop cap, scholarly feel ---------- */

#two-column-images .filter-wysiwyg p:first-child::first-letter {
  font-family: var(--serif);
  font-size: 3.6em;
  font-weight: 500;
  float: left;
  line-height: 0.86;
  margin: 0.05em 0.12em -0.05em 0;
  color: var(--gold-web);
}


/* ---------- "Don't miss out" newsletter band (#pane-103) ---------- */

/* White band (alternation cycle). */
#pane-103:before {
  background-color: #ffffff !important;
}

#pane-103 {
  margin-bottom: 0 !important;
  padding-bottom: 50px !important;
}
.page-content {
  padding-bottom: 0 !important;
}
.page-footer {
  margin-top: 0 !important;
}
#pane-103 h1,
#pane-103 h1 span {
  font-family: var(--serif) !important;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  letter-spacing: -0.005em;
  color: var(--ink) !important;
}
#pane-103 p,
#pane-103 p span,
#pane-103 p strong,
#pane-103 p strong span {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  color: var(--ink-soft) !important;
}

/* ---------- "Our Partners" — white ---------- */
#partners:before {
  background-color: #ffffff !important;
}
#partners h2.pane-title,
#partners .pane-title {
  color: var(--ink) !important;
}
#partners .pane-title:before {
  border-bottom-color: var(--gold-web) !important;
}

/* ---------- Section bg alternation (navy/cream/white 3-cycle) ----------
   Default content area = cream; explicit white/navy bands applied per
   section. Non-breakout sections get a viewport-wide pseudo-element so
   their bg bleeds to the page edges, matching the .breakout sections. */

.page-content {
  background-color: var(--paper) !important;
}

/* About — WHITE (was paper) */
#two-column-images:before {
  background-color: #ffffff !important;
}

/* Books — CREAM (inherits .page-content default; no override needed) */

/* Love of Truth — WHITE via viewport-wide pseudo-element. */
.pane-fpid-13 {
  position: relative;
  isolation: isolate;
}
.pane-fpid-13::before {
  content: "";
  position: absolute;
  top: -60px;
  bottom: -60px;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: #ffffff;
  z-index: -1;
}

/* What We Do — navy (matches header/footer), full-width via direct bg on
   the wrapper and breakout-style negative margins.
   Negative top/bottom margins absorb the cream-paper page-content sliver
   that the upstream theme paints between Love-of-Truth and Partners. */
#mini-panel-6 {
  position: relative;
  background-color: var(--navy-deep) !important;
  margin-top: -36px !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: -36px !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  padding-top: 90px;
  padding-bottom: 90px;
}
#mini-panel-6::before { content: none !important; }
#mini-panel-6 .pane-title,
#mini-panel-6 h2,
#mini-panel-6 .img-caption,
#mini-panel-6 h4 {
  color: var(--paper) !important;
}
#mini-panel-6 .pane-title:before {
  width: 64px !important;
  height: 1px !important;
  background-color: var(--gold-web) !important;
  background: var(--gold-web) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  box-sizing: content-box !important;
  margin-left: -32px !important;
  left: 50%;
}

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

.page-footer {
  background-color: var(--navy-deep) !important;
  color: var(--paper);
  /* Pull the footer up 60px and pad the top equally so visual content
     position is unchanged but the navy bg overlaps any sliver of paper
     that the upstream theme paints between #pane-103 and the footer. */
  margin-top: -60px !important;
  padding-top: 100px !important;
  padding-bottom: 30px;
  border-top: 0 !important;
  position: relative;
  z-index: 1;
}
.page-footer .pane-title,
.page-footer .pane-content,
.page-footer .pane-content p {
  color: var(--paper) !important;
}
.page-footer .pane-title {
  text-align: center;
}
.page-footer .pane-title:before {
  border-bottom-color: var(--gold-web) !important;
}

/* Footer row: three columns vertically centered together, equal heights. */
.page-footer .row {
  display: flex;
  align-items: center;
}
.page-footer .panel-panel-inner {
  height: 100%;
}

/* Column 2 — the central logo (replaced FB embed) */
.page-footer .radix-layouts-column2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-footer .footer-logo-pane {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.page-footer .footer-logo-pane .pane-content {
  display: flex;
  justify-content: center;
  width: 100%;
}
.page-footer .footer-logo {
  max-width: 100%;
  width: 336px;   /* 20% larger than the prior 280px */
  height: auto;
}

/* ---- Footer "Address" eyebrow + tidier address column ---- */
.page-footer .footer-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--gold-web);
  margin: 0 0 14px;
  text-align: center;
}
.page-footer .radix-layouts-column1 .filter-wysiwyg {
  display: inline-block;
  text-align: left;
  border-left: 1px solid rgba(232, 190, 74, 0.30);
  padding-left: 20px;
}
.page-footer .radix-layouts-column1 .footer-eyebrow {
  text-align: left;
}
.page-footer .radix-layouts-column1 .filter-wysiwyg p {
  text-align: left !important;
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--paper);
}

/* ---- Footer grid — AACSA-inspired flat 5-column layout ----
     Col 1 (2fr, wide): brand stack — logo on top, address below.
     Cols 2-5 (1fr each): directory in order About, Events, Media, Speakers.
*/
.page-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 60px;
  padding: 0;
  align-items: start;
}

/* Brand column (logo + address stacked vertically). Shifted 1in left. */
.page-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: flex-start;
  transform: translateX(-1in);
}
.page-footer .footer-brand .footer-logo {
  width: 336px;          /* unchanged — current logo size kept */
  max-width: 100%;
  height: auto;
  display: block;
}
.page-footer .footer-brand .footer-address {
  display: block;
}
.page-footer .footer-brand .footer-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--gold-web);
  margin: 0 0 12px;
  text-align: left;
}
.page-footer .footer-brand .footer-address p {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--paper);
  margin: 0 0 4px;
  text-align: left;
  line-height: 1.5;
}

/* ---- Directory columns (Cormorant Garamond serif, +50% sizes, hover line).
       Each directory column shifted 2in to the right. ---- */
.page-footer .footer-directory__col {
  padding: 0;
  margin: 0;
  width: auto;
  transform: translateX(2in);
}
.page-footer .footer-directory__head {
  font-family: var(--serif) !important;
  font-weight: 500;
  font-size: 2.7225rem;    /* +10% from 2.475rem */
  color: var(--gold-soft);
  margin: 0 0 22px;
  letter-spacing: 0.005em;
  line-height: 1.1;
}
.page-footer .footer-directory__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-footer .footer-directory__list li {
  margin: 0 0 14px;
}
.page-footer .footer-directory__list a {
  display: inline-block;
  font-family: var(--serif) !important;
  font-weight: 400;
  font-size: 2.0625rem;    /* +10% from 1.875rem */
  color: rgba(250, 247, 240, 0.85);
  /* No underline by default. Hover toggles it on. */
  text-decoration: none !important;
  text-underline-offset: 4px;
  border-bottom: 0 !important;
  line-height: 1.3;
  transition: color var(--dur) var(--ease);
  white-space: normal;
  word-wrap: break-word;
}
.page-footer .footer-directory__list a:hover,
.page-footer .footer-directory__list a:focus {
  color: var(--gold-soft);
  text-decoration: underline !important;
}

@media (max-width: 1100px) {
  .page-footer .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
  }
  .page-footer .footer-brand { grid-column: 1; }
}
@media (max-width: 720px) {
  .page-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .page-footer .footer-brand { grid-column: 1 / -1; }
}

/* Column 3 — mission, centered, enlarged 6.5%, shifted 1.5in right. */
.page-footer .radix-layouts-column3 {
  text-align: center;
  transform: translateX(1.5in);
}
.page-footer .radix-layouts-column3 .pane-title {
  text-align: center;
  font-size: clamp(2.13rem, 3.83vw, 2.93rem) !important;
}
.page-footer .radix-layouts-column3 .filter-wysiwyg,
.page-footer .radix-layouts-column3 .filter-wysiwyg p,
.page-footer .radix-layouts-column3 .filter-wysiwyg p small {
  text-align: center !important;
  font-size: 1.065em !important;
}

/* Column 1 — address positioned so it's roughly equidistant from the
   viewport's left edge and the AC logo's left edge in column 2. On a
   typical ~1920px viewport the column's natural center sits at ~580px,
   the logo's left edge sits at ~820px, and the midpoint we want is at
   ~410px — i.e. shift the column ~170px (~1.75in) left of its natural
   position. */
.page-footer .radix-layouts-column1 {
  transform: translateX(-1.75in);
}
.page-footer .radix-layouts-column1 .filter-wysiwyg p {
  text-align: center;
}

/* Eliminate any residual white sliver between the navy CTA band and the
   navy footer (covers .page-main padding, page-content padding-bottom,
   any wrapper margins, .page-credit's 40px top margin, etc.). */
.page-main,
.page-content,
.panel-display.hosted-bernadette {
  padding-bottom: 0 !important;
}
.page-credit {
  margin-top: 0 !important;
  background-color: var(--navy-deep) !important;
}
.page-credit .pane-content {
  color: var(--paper) !important;
  opacity: 0.5;
}

/* The hamburger toggle + button are mobile-only UI. Hidden by default so the
   desktop / PC header is completely unchanged; revealed in the mobile layer. */
.mobile-nav-toggle,
.mobile-nav-burger { display: none; }

/* ===========================================================================
   MOBILE LAYER — phones & small tablets (max-width: 767px) ONLY
   ---------------------------------------------------------------------------
   Everything below is ADDITIVE and lives entirely inside this single media
   query, so the desktop / PC site (>=768px) renders byte-for-byte as before.
   Purpose: stack columns, collapse multi-column card grids, undo the inch-
   based desktop position shifts that would otherwise push content off-screen,
   and give the footer a clean modern stacked layout.
   NOTE: header menu collapse is left to the theme (no hamburger added here);
   the header-dropdown idea is pending a separate decision.
   =========================================================================== */
@media (max-width: 767px) {

  /* 0 — overflow safety net (full-bleed 100vw breakouts can sub-pixel spill) */
  html, body { overflow-x: hidden !important; }
  img, picture, iframe, svg, video, table { max-width: 100% !important; }

  /* 1 — HEADER: collapse to logo + hamburger only; the burger toggles a
         full-width navy dropdown of the nav links. Pure CSS (checkbox + ~),
         no JS. The toggle markup is display:none on desktop, so PC is intact. */
  .page-header .page-header-cols {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .page-header .page-brand       { flex: 0 1 auto !important; width: auto !important; margin: 0 !important; }
  .page-header #logo img         { max-width: 178px !important; }
  .page-header .pane-superfish-1 { left: 0 !important; }

  /* the hidden checkbox that drives the menu */
  .mobile-nav-toggle {
    position: absolute !important;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none; margin: 0;
  }
  /* the hamburger button */
  .mobile-nav-burger {
    order: 2;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 46px; height: 46px;
    padding: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-burger span {
    display: block;
    width: 26px; height: 2px;
    border-radius: 2px;
    background: var(--paper);
    transition: transform .25s ease, opacity .2s ease;
  }
  /* the menu container: full-width, hidden until the burger is tapped */
  .page-header .page-nav {
    order: 3;
    flex: 1 1 100% !important;
    width: 100% !important;
    position: static !important;
    display: none !important;
  }
  #mobile-nav-toggle:checked ~ .page-nav {
    display: block !important;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
  }
  /* override the theme's mobile `display:none` on the menu list when open */
  #mobile-nav-toggle:checked ~ .page-nav .pane-superfish-1,
  #mobile-nav-toggle:checked ~ .page-nav .pane-content,
  #mobile-nav-toggle:checked ~ .page-nav .sf-menu,
  #mobile-nav-toggle:checked ~ .page-nav .sf-horizontal {
    display: block !important;
  }
  /* burger morphs into an X when open */
  #mobile-nav-toggle:checked ~ .mobile-nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #mobile-nav-toggle:checked ~ .mobile-nav-burger span:nth-child(2) { opacity: 0; }
  #mobile-nav-toggle:checked ~ .mobile-nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* dropdown list styling — stacked, tappable, navy panel, links wrap */
  .page-header .page-nav .pane-superfish-1 .pane-content { display: block; height: auto; }
  .page-header .page-nav .sf-menu {
    display: block;
    margin: 6px 0 4px !important;
    padding: 0 !important;
    border-top: 1px solid rgba(250, 247, 240, 0.16);
  }
  .page-header .page-nav .sf-menu li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    white-space: normal !important;
    border-bottom: 1px solid rgba(250, 247, 240, 0.10);
  }
  .page-header .page-nav .sf-menu a,
  .page-header .page-nav .sf-menu .nolink {
    display: block !important;
    float: none !important;        /* defeat the desktop Superfish float */
    width: 100% !important;
    padding: 14px 18px !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--paper) !important;
    text-align: left !important;
    border: 0 !important;
  }
  .page-header .page-nav .sf-menu ul {        /* submenus expanded inline */
    display: block !important;
    float: none !important;
    clear: both !important;
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.18);
    /* defeat the desktop sf-megamenu CSS columns so submenu items stack */
    -webkit-column-count: 1 !important;
    column-count: 1 !important;
    -webkit-column-width: auto !important;
    column-width: auto !important;
  }
  .page-header .page-nav .sf-menu ul a {
    padding-left: 36px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(250, 247, 240, 0.82) !important;
  }
  .page-header .page-nav .sf-menu a:hover,
  .page-header .page-nav .sf-menu a:focus { color: var(--gold-soft) !important; }

  /* 2 — undo desktop inch-shifts that move content off the viewport edge */
  body.page-node-8 #two-column-images { margin-top: 0 !important; }

  /* 2b — Speaker bios (Dauphinais / Nutt): on desktop the top bio is a
         full-bleed white band shifted -1.75in. On phones, drop the breakout
         AND the white background so the bio just flows on the page's paper
         colour — no visible box, content centres with the column / image. */
  body.page-node-9  .pane-fpid-27,
  body.page-node-10 .pane-fpid-28 {
    background: transparent !important;
    margin: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    padding: 26px 0 40px !important;
  }
  body.page-node-9  .person--with-image,
  body.page-node-10 .person--with-image {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    /* text first, portrait below — phone-only reorder */
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    gap: 28px !important;
  }
  /* Cap the portrait at a sensible phone size and make sure the image
     itself doesn't push past the gutters. */
  body.page-node-9  .person__left-col,
  body.page-node-10 .person__left-col {
    width: 100% !important;
    max-width: 240px !important;
  }
  body.page-node-9  .person__left-col img,
  body.page-node-10 .person__left-col img,
  body.page-node-9  .person__left-col picture img,
  body.page-node-10 .person__left-col picture img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  body.page-node-9  .person__right-col,
  body.page-node-10 .person__right-col,
  body.page-node-9  .person__summary,
  body.page-node-10 .person__summary {
    width: 100% !important;
    max-width: 320px !important;          /* tight column near the photo width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-wrap: anywhere;
  }
  /* Force the panes & their inner wrappers themselves to centre on the page,
     and zero out any inherited side margins that could push content off-axis. */
  body.page-node-9  .pane-fpid-27,
  body.page-node-9  .pane-fpid-114,
  body.page-node-10 .pane-fpid-28,
  body.page-node-10 .pane-fpid-115,
  body.page-node-9  .pane-fpid-27 .pane-content,
  body.page-node-9  .pane-fpid-114 .pane-content,
  body.page-node-10 .pane-fpid-28 .pane-content,
  body.page-node-10 .pane-fpid-115 .pane-content,
  body.page-node-9  .pane-fpid-114 .filter-wysiwyg,
  body.page-node-10 .pane-fpid-115 .filter-wysiwyg {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Long "About" prose pane uses the full column width on mobile so the
     bumped 1.89rem body copy has room to wrap without each line breaking
     into 2-3 words. */
  body.page-node-9  .pane-fpid-114 .filter-wysiwyg,
  body.page-node-10 .pane-fpid-115 .filter-wysiwyg {
    max-width: 100% !important;
  }
  /* Scale the bio typography down so long lines fit phone widths
     (desktop sizing was 1.89rem ≈ 30px — too big to fit). */
  body.page-node-9  .person__name,
  body.page-node-10 .person__name { font-size: clamp(1.6rem, 6vw, 2.25rem) !important; }
  /* Bio info card (name, title, summary fields) — compact 1.18rem */
  body.page-node-9  .person__title,
  body.page-node-10 .person__title,
  body.page-node-9  .person__summary,
  body.page-node-10 .person__summary,
  body.page-node-9  .person__summary p,
  body.page-node-10 .person__summary p {
    font-size: 1.18rem !important;
    line-height: 1.55 !important;
  }
  /* "About" prose pane (paragraphs + list items) — same 1.89rem as the
     books list, so the body copy and the publications list read at the
     same scale. The section grows taller to fit; that's expected. */
  body.page-node-9  .pane-fpid-114 .filter-wysiwyg p,
  body.page-node-10 .pane-fpid-115 .filter-wysiwyg p,
  body.page-node-9  .pane-fpid-114 .filter-wysiwyg li,
  body.page-node-10 .pane-fpid-115 .filter-wysiwyg li {
    font-size: 1.89rem !important;
    line-height: 1.55 !important;
  }

  /* Centre every line of bio copy across BOTH panes (the person card AND
     the longer prose pane below it), and harden against any long token
     (book title, email, URL) pushing past the viewport edge. */
  body.page-node-9  .pane-fpid-27,
  body.page-node-9  .pane-fpid-27 *,
  body.page-node-9  .pane-fpid-114,
  body.page-node-9  .pane-fpid-114 *,
  body.page-node-10 .pane-fpid-28,
  body.page-node-10 .pane-fpid-28 *,
  body.page-node-10 .pane-fpid-115,
  body.page-node-10 .pane-fpid-115 * {
    text-align: center !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  /* Lists: pull the bullets inside so the centred line doesn't sit on a
     left indent, and centre the items themselves. */
  body.page-node-9  .pane-fpid-114 .filter-wysiwyg ul,
  body.page-node-10 .pane-fpid-115 .filter-wysiwyg ul {
    list-style-position: inside !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  /* Restore the gold underline beneath the speaker's name (it was a left-
     anchored ::after; under the centred layout we re-centre it). */
  body.page-node-9  .person__name::after,
  body.page-node-10 .person__name::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Force every descendant of the bio panes to inherit the centered
     alignment from its pane (bypassing any per-element text-align defaults
     the base theme might apply). The full-bleed band on these panes was
     removed above, so no overflow-x guard is needed. */
  body.page-node-9  .pane-fpid-27  *,
  body.page-node-9  .pane-fpid-114 *,
  body.page-node-10 .pane-fpid-28  *,
  body.page-node-10 .pane-fpid-115 * {
    text-align: inherit !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* 2c — Home page (page-node-1): hide the Aquinas portrait, neutralise the
         drop-cap "W", centre the About copy, and hide the "What you get
         when you join our community" benefits band (mobile-only — these
         remain on desktop / PC).
         The portrait lives in #two-column-images > column2 (pane-fpid-4),
         a SIBLING of the About text pane — that's why scoping the hide to
         pane-fpid-5 didn't work. Hide column2 to remove the image cleanly. */
  body.page-node-1 #two-column-images .radix-layouts-column2 { display: none !important; }
  body.page-node-1 .pane-fpid-5 .filter-wysiwyg,
  body.page-node-1 .pane-fpid-5 .filter-wysiwyg p,
  body.page-node-1 .pane-fpid-5 .filter-wysiwyg h1,
  body.page-node-1 .pane-fpid-5 .filter-wysiwyg h2,
  body.page-node-1 .pane-fpid-5 .filter-wysiwyg h3 { text-align: center !important; }
  /* Drop-cap "W" → render as a regular letter on phones */
  body.page-node-1 #two-column-images .filter-wysiwyg p:first-child::first-letter,
  body.page-node-1 #two-column-images .filter-wysiwyg p:first-of-type::first-letter {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    float: none !important;
    margin: 0 !important;
  }
  body.page-node-1 #benefits { display: none !important; }

  /* 3 — collapse multi-column grids so cards stop squishing / overlapping */
  body.page-node-9  .dauph-video-grid,
  body.page-node-10 .person--with-image,
  body.page-node-10 .nutt-card-grid,
  body.page-node-23 .speakers-grid,
  body.page-node-27 .conference-grid,
  body.page-node-31 .blog-host__grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  body.page-node-27 #pc-gallery .row {           /* gallery thumbnails: 2-up */
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* 2d — Speaker pages: post-info sections font floor. The "edited with
         Matthew Levering" list items render at 1.89rem on mobile (the
         desktop rule's higher specificity survives the mobile reduction),
         so all post-info text must be at least that size. Cards are
         allowed to expand vertically to fit the larger type. */
  body.page-node-9 .dauph-lenten-heading {
    font-size: clamp(1.89rem, 5.5vw, 2.5rem) !important;
  }
  body.page-node-10 .nutt-card__title {
    font-size: 1.89rem !important;
    line-height: 1.3 !important;
    margin: 0 0 18px !important;
  }
  body.page-node-10 .nutt-card__btn {
    font-size: 1.89rem !important;
    line-height: 1.3 !important;
    padding: 16px 18px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    border-radius: 8px !important;
  }
  body.page-node-10 .nutt-card__body {
    padding: 22px 16px 22px !important;     /* roomier card so larger text doesn't crowd */
  }

  /* 4 — FOOTER: modern stacked layout. Brand (logo + address) centred on top,
         the four link groups in a tidy 2-up grid below. Reset the desktop
         translateX(in) shifts and scale the serif down to phone sizes. */
  .page-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 38px 28px !important;            /* roomier between rows + columns */
    padding: 8px 0 0 !important;
  }
  .page-footer .footer-brand {
    grid-column: 1 / -1 !important;
    transform: none !important;
    align-items: center !important;
    text-align: center !important;
    gap: 18px !important;
    margin-bottom: 4px;
  }
  .page-footer .footer-brand .footer-logo {
    width: 210px !important;
    margin: 0 auto !important;
  }
  .page-footer .footer-brand .footer-eyebrow,
  .page-footer .footer-brand .footer-address p { text-align: center !important; }
  .page-footer .footer-directory__col  { transform: none !important; text-align: left !important; }
  .page-footer .footer-directory__head { font-size: 2.7rem !important; margin: 0 0 18px !important; }
  .page-footer .footer-directory__list li { margin: 0 0 14px !important; }
  .page-footer .footer-directory__list a  {
    font-size: 2rem !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  /* legacy radix footer columns (if rendered) — also un-shift & centre */
  .page-footer [class*="radix-layouts-column"] { transform: none !important; text-align: center !important; }

  /* 5 — comfortable side gutters on small screens */
  .page-content .container,
  .page-footer  .container { padding-left: 18px !important; padding-right: 18px !important; }
}