/*
Theme Name: RabbiEgerTheme
Theme URI: https://rabbiegersite.com
Author: Eger Leadership & Advisory
Description: Block theme for Eger Leadership & Advisory, built from the approved design comp (reference/pages/eger_leadership_website.html). Colors, typography, and fonts are defined in theme.json; this stylesheet consumes the resulting presets.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rabbiegertheme
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Heading scale (EB Garamond has a low x-height, so steps are generous). */
  --fs-h2: clamp(1.6rem, 2.3vw, 2rem);
  --fs-h3: 1.4rem;
  /* Brand palette — theme.json is the source of truth (five colors) */
  --sapphire:  var(--wp--preset--color--royal-sapphire);
  --midnight:  var(--wp--preset--color--midnight);
  --gold:      var(--wp--preset--color--estate-gold);
  --champagne: var(--wp--preset--color--champagne);
  --ivory:     var(--wp--preset--color--ivory);
  /* Derived tints (not palette colors) */
  --ink-soft:   rgba(20, 39, 75, 0.62);
  --ivory-soft: rgba(247, 243, 235, 0.78);
  /* Legacy aliases kept so existing rules resolve to brand values */
  --royal:      var(--sapphire);
  --royal-mid:  var(--sapphire);
  --royal-lt:   var(--sapphire);
  --royal-deep: var(--midnight);
  --slate:      var(--midnight);
  --gold-lt:    var(--champagne);
  --cream:      var(--ivory);
  --white:      #FFFFFF;
  --mist:       var(--ivory-soft);
  --text:       var(--midnight);
  --footer-navy: var(--midnight);
  --serif: var(--wp--preset--font-family--eb-garamond);
  --sans:  var(--wp--preset--font-family--inter);
  --label: var(--wp--preset--font-family--jost);
}
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* NAV */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 48px;
  min-height: 60px;
  background: var(--sapphire);
  border-bottom: 1px solid var(--gold);
}
body.admin-bar nav.site-nav { top: var(--wp-admin--admin-bar--height, 32px); }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-mark { width: 48px; height: 48px; display: block; }
.nav-wordmark { height: 30px; width: auto; display: block; }
.nav-descriptor { font-family: var(--label); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory); opacity: 0.85; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ivory); margin: 5px 0; transition: transform 0.2s, opacity 0.2s; }
.site-nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-menu-cta { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ks-drop { animation: re-keystone-drop 0.5s ease-out; }
  @keyframes re-keystone-drop { from { transform: translateY(-10px); } to { transform: translateY(0); } }
}
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a, .nav-sub-toggle { white-space: nowrap; }
.nav-sub-toggle { background: none; border: none; cursor: pointer; padding: 0; color: var(--mist); font-family: var(--label); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; }
.nav-sub-toggle span { font-size: 0.7em; margin-left: 3px; }
.nav-sub-toggle:hover, .nav-has-sub.sub-open .nav-sub-toggle { color: var(--gold); }
.nav-has-sub { position: relative; }
.nav-sub { display: none; position: absolute; top: 100%; right: -18px; list-style: none; min-width: 190px; padding: 14px 0 10px; background: var(--sapphire); border: 1px solid var(--gold); border-top: none; }
.nav-has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.nav-has-sub:hover .nav-sub, .nav-has-sub:focus-within .nav-sub, .nav-has-sub.sub-open .nav-sub { display: block; }
.nav-sub li a { display: block; padding: 8px 18px; }
.nav-links a { color: var(--mist); text-decoration: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s; font-family: var(--label); }
.nav-links a:hover { color: var(--gold); }
.nav-cta { background: transparent; border: 1px solid var(--ivory); color: var(--ivory); white-space: nowrap; font-family: var(--label); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 22px; text-decoration: none; transition: all 0.2s; }
.nav-cta:hover { background: var(--ivory); color: var(--sapphire); }

/* HERO */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--royal-deep) 0%, var(--royal) 55%, var(--royal-mid) 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 64px;
  padding: 130px 60px 80px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--gold);
}
.hero-text { max-width: 640px; justify-self: end; }
.hero h1 { text-wrap: balance; }
.hero-portrait { position: relative; justify-self: start; width: 100%; max-width: 440px; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--champagne); }
.hero-portrait-img, .hero-portrait-img img { margin: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.hero-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(31,58,110,0.22), rgba(31,58,110,0) 60%); pointer-events: none; }
.hero-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; font-family: var(--label); }
.hero h1 { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 400; color: var(--white); line-height: 1.12; margin-bottom: 28px; }
.hero h1 em { font-style: italic; color: inherit; }
.hero-kicker { font-family: var(--label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); margin-bottom: 40px; }
.hero-sub { font-size: 1.05rem; color: var(--mist); line-height: 1.8; margin-bottom: 44px; font-weight: 300; }
.hero-sub strong { color: var(--white); font-weight: 500; }
.hero-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.btn-primary { background: var(--sapphire); color: var(--ivory); border: 1px solid var(--sapphire); font-family: var(--label); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 15px 32px; text-decoration: none; transition: background 0.2s; display: inline-block; cursor: pointer; }
.btn-primary:hover { background: var(--midnight); border-color: var(--midnight); color: var(--ivory); }
.btn-ghost { color: var(--mist); text-decoration: none; font-size: 0.82rem; font-weight: 500; border-bottom: 1px solid transparent; transition: all 0.2s; padding-bottom: 2px; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--label); display: inline-block; letter-spacing: 0.04em; }
.btn-ghost:hover { color: var(--white); border-bottom-color: var(--white); }

/* On dark fields, primary buttons are ivory outlines (brand: gold leaves buttons) */
.hero-actions .btn-primary, .cta-actions .btn-primary { background: transparent; border: 1px solid var(--ivory); color: var(--ivory); }
.hero-actions .btn-primary:hover, .cta-actions .btn-primary:hover { background: var(--ivory); color: var(--sapphire); }

/* Editor-inserted Button blocks: brand primary (gold stays off buttons) */
.wp-block-button .wp-block-button__link { background: var(--sapphire); color: var(--ivory); border: 1px solid var(--sapphire); border-radius: 0; font-family: var(--label); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 15px 32px; text-decoration: none; }
.wp-block-button .wp-block-button__link:hover { background: var(--midnight); border-color: var(--midnight); color: var(--ivory); }
.cta-section .wp-block-button .wp-block-button__link { background: transparent; border-color: var(--ivory); color: var(--ivory); }
.cta-section .wp-block-button .wp-block-button__link:hover { background: var(--ivory); color: var(--sapphire); }


/* TENSION */
.tension { background: var(--cream); padding: 72px 60px; }
.tension-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.tension h2 { font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 500; color: var(--royal); line-height: 1.3; margin-bottom: 24px; }
.tension p { color: var(--slate); font-size: 1.05rem; max-width: 660px; margin: 0 auto 14px; }
.tension-rule { width: 48px; height: 2px; background: var(--gold); margin: 32px auto 0; }

/* SHARED SECTION */
section.band { padding: 90px 60px; }
.section-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-family: var(--label); }
.section-title { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin-bottom: 20px; }
.section-body { font-size: 1.05rem; color: var(--slate); max-width: 640px; line-height: 1.8; }

/* FRAMEWORK */
.framework { background: linear-gradient(160deg, var(--royal-deep) 0%, var(--royal) 60%, var(--royal-mid) 100%); }
.framework-inner { max-width: 1140px; margin: 0 auto; }
.framework .section-title { color: var(--white); max-width: 700px; }
.framework .section-body { color: var(--mist); margin-bottom: 56px; }
.pillars { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin-top: 56px; }
.pillar { background: rgba(255,255,255,0.06); padding: 44px 32px 48px; border-top: 3px solid transparent; transition: border-color 0.3s, background 0.3s; }
.pillar:hover { border-color: var(--gold); background: rgba(255,255,255,0.11); }
.pillar-letter { font-family: var(--serif); font-size: 3.5rem; font-weight: 500; color: rgba(190,154,78,0.2); line-height: 1; margin-bottom: 20px; display: block; transition: color 0.3s; }
.pillar:hover .pillar-letter { color: rgba(190,154,78,0.5); }
.pillar-title { font-family: var(--label); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory); margin-bottom: 14px; }
.pillar-question { font-size: 0.875rem; font-weight: 500; color: var(--gold-lt); letter-spacing: 0.03em; margin-bottom: 10px; font-style: italic; }
.pillar-question-2 { font-size: 0.875rem; font-weight: 500; color: var(--gold-lt); letter-spacing: 0.03em; margin-bottom: 16px; font-style: italic; opacity: 0.85; }
.framework-download { margin-top: 40px; font-size: 0.875rem; color: var(--ivory-soft); }
.framework-download a { color: var(--champagne); text-decoration: none; border-bottom: 1px solid var(--champagne); }
.framework-download a:hover { color: var(--ivory); }
.pillar-body { font-size: 0.875rem; color: var(--ivory-soft); line-height: 1.7; }

/* WHO — stage blocks */
.stage { padding: 24px 0; border-bottom: 1px solid rgba(190,154,78,0.45); }
.stage:first-of-type { border-top: 1px solid rgba(190,154,78,0.45); margin-top: 36px; }
.stage h3 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500; font-style: italic; color: var(--sapphire); line-height: 1.5; margin-bottom: 8px; }
.stage h3 strong { font-style: normal; font-weight: 700; color: var(--sapphire); }
.stage p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; margin: 0; }
.who-close { margin-top: 28px; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--sapphire); }

/* EXPERIENCE & CREDENTIALS */
.credentials { background: var(--ivory); }
.credentials-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 5fr 4fr; gap: 72px; align-items: center; }
.credentials-copy .section-body { max-width: 600px; }
.credentials-copy .section-body + .section-body { margin-top: 16px; }
.credentials-cta { margin-top: 32px; }
.credentials-panel { background: linear-gradient(160deg, var(--royal-deep) 0%, var(--royal) 100%); padding: 44px 40px; }
.aside-label { font-family: var(--label); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; }
.aside-statement { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ivory); line-height: 1.5; margin-bottom: 22px; }
.aside-rule { width: 40px; height: 1px; background: var(--champagne); margin-bottom: 18px; }
.credentials-list { list-style: none; }
.credentials-list li { font-size: 0.875rem; color: var(--ivory-soft); line-height: 1.6; padding: 9px 0; border-bottom: 1px solid rgba(214,188,133,0.25); }
.credentials-list li:last-child { border-bottom: none; }

/* KEYSTONE SECTION */
.keystone { background: var(--ivory); }
.keystone-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 5fr 4fr; gap: 72px; align-items: center; }
.keystone-art svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.keystone-copy .section-title { max-width: 480px; }
.keystone-close { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--sapphire); margin-top: 24px; }
.keystone-link { margin-top: 32px; }
/* Keystone loop (owner's and Denise's request): when the arch comes on
   screen the stone drops in (0.9s), rests (2.6s), lifts out (0.9s), pauses,
   and repeats — three drops, then it settles in place (2.5 cycles of 4.8s,
   ending mid-rest), so the motion stops on its own within ~12s. Scrolling
   away and back replays it (assets/site.js). Hovering pauses it.
   Reduced-motion visitors, and anyone without JavaScript, see the stone in
   place. */
@media (prefers-reduced-motion: no-preference) {
  .keystone-art.ks-ready .ks-stone { transform: translateY(-180px); opacity: 0; }
  .keystone-art.ks-ready.ks-loop .ks-stone { animation: re-ks-loop 4.8s 2.5 forwards; }
  .keystone-art.ks-loop:hover .ks-stone { animation-play-state: paused; }
  @keyframes re-ks-loop {
    0%     { transform: translateY(-180px); opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
    7%     { opacity: 1; }
    18.75% { transform: translateY(0); }
    72.92% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
    80%    { opacity: 1; }
    91.67% { transform: translateY(-180px); opacity: 0; }
    100%   { transform: translateY(-180px); opacity: 0; }
  }
}

/* SPLIT SECTION — photo + copy */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.split-img { position: relative; min-height: 480px; overflow: hidden; }
.split-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.split-img-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(31,58,110,0.28), rgba(31,58,110,0.05)); }
.split-content { background: var(--cream); padding: 72px 60px; display: flex; flex-direction: column; justify-content: center; }

/* WHO */
.who { background: var(--white); }
.who-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.who-list { list-style: none; margin-top: 36px; }
.who-list li { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid rgba(20,39,75,0.1); font-size: 0.95rem; color: var(--slate); line-height: 1.6; }
.who-list li:first-child { border-top: 1px solid rgba(20,39,75,0.1); }
.who-marker { flex-shrink: 0; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; margin-top: 9px; }
.who-pullquote { background: linear-gradient(160deg, var(--royal-deep) 0%, var(--royal) 100%); padding: 48px; position: sticky; top: 100px; }
.who-pullquote blockquote { font-family: var(--serif); font-size: 1.2rem; color: var(--white); line-height: 1.7; font-style: italic; margin-bottom: 24px; border: none; padding: 0; }
.who-pullquote blockquote cite { display: block; line-height: calc(0.95rem * 1.7); }
.who-pullquote blockquote > p { margin-bottom: 24px; }
.who-pullquote blockquote { margin-bottom: 0; }
.who-pullquote cite { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-style: normal; font-family: var(--label); }

/* CLIENTS */
.clients { background: var(--royal); padding: 64px 60px; }
.clients-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.clients-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 36px; font-family: var(--label); }
.clients-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.clients-grid { list-style: none; }
.client-tag, .clients-grid li { background: rgba(255,255,255,0.08); border: 1px solid rgba(190,154,78,0.3); color: rgba(255,255,255,0.85); font-size: 0.82rem; font-weight: 400; letter-spacing: 0.04em; padding: 9px 20px; font-family: var(--label); }

/* PRINCIPLES */
.principles { background: var(--ivory); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); padding: 56px 60px; }
.principles-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.principles-inner p { font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 500; color: var(--royal); line-height: 1.5; }
.principles-inner p span, .principles-inner p.principles-attr { display: block; opacity: 0.6; font-size: 0.75em; font-weight: 400; font-style: italic; margin-top: 10px; }
.principles-inner p.principles-attr { font-size: calc(0.75 * clamp(1.3rem, 2.5vw, 1.9rem)); }

/* PROCESS */
.process { background: var(--white); }
.process-inner { max-width: 1140px; margin: 0 auto; }
.work-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 52px; }
.work-group-head { font-family: var(--label); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sapphire); border-bottom: 1px solid var(--gold); padding-bottom: 10px; margin-bottom: 3px; }
.work-group .process-step { margin-top: 3px; }
.process-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 3px; margin-top: 52px; }
.process-step { background: #FFFFFF; border: 1px solid rgba(20,39,75,0.08); padding: 32px 30px; }
.step-num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; color: var(--gold); text-transform: uppercase; margin-bottom: 16px; font-family: var(--label); }
.step-title { margin-top: 0; font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500; color: var(--midnight); margin-bottom: 12px; }
.step-body { font-size: 0.875rem; color: var(--slate); line-height: 1.75; }

.work-fees { margin-top: 40px; font-size: 0.95rem; color: var(--ink-soft); }
.work-fees a { color: var(--sapphire); text-decoration: none; border-bottom: 1px solid var(--gold); }

/* CTA */
.cta-section { background: linear-gradient(135deg, var(--royal-deep) 0%, var(--royal) 60%, var(--royal-mid) 100%); padding: 110px 60px; text-align: center; }
.cta-section h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); color: var(--white); font-weight: 400; line-height: 1.2; max-width: 600px; margin: 0 auto 20px; }
.cta-section h2 em { font-style: italic; color: inherit; }
.cta-section p { color: var(--mist); font-size: 1.05rem; max-width: 460px; margin: 0 auto 44px; }
/* Homepage closing invitation with Denise's desk photograph: the same frame
   as the hero portrait (4:5, champagne hairline, sapphire scrim toward the
   text), mirrored — photo left, words right. */
.cta-with-photo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; text-align: left; }
.cta-portrait { position: relative; justify-self: end; width: 100%; max-width: 440px; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--champagne); }
.cta-portrait-img, .cta-portrait-img img { margin: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.cta-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(31,58,110,0.22), rgba(31,58,110,0) 60%); pointer-events: none; }
.cta-copy { max-width: 600px; }
.cta-with-photo h2 { margin: 0 0 20px; text-wrap: balance; }
.cta-with-photo p { margin: 0 0 44px; }
.cta-with-photo .cta-actions { justify-content: flex-start; }
.cta-actions { display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cta-section p.cta-actions { max-width: none; margin: 0; }
.cta-section .btn-ghost:hover, .split-content .btn-ghost:hover { color: var(--royal); border-bottom-color: var(--royal); }

/* BIO PAGE */
.bio-hero {
  background: linear-gradient(135deg, var(--royal-deep) 0%, var(--royal) 55%, var(--royal-mid) 100%);
  padding: 160px 60px 80px;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 72px;
  align-items: start;
}
.bio-photo-wrap { position: sticky; top: 100px; }
.wp-block-image.bio-photo { margin: 0; }
.bio-photo img { width: 100%; border-radius: 2px; display: block; border: 3px solid rgba(190,154,78,0.4); }
.bio-sub { opacity: 0.7; font-size: 0.76rem; }
.bio-cta { margin-top: 36px; }
.bio-photo-caption { margin-top: 20px; }
.bio-photo-caption h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--white); margin-bottom: 4px; }
.bio-photo-caption p { font-size: 0.8rem; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; font-family: var(--label); }
.bio-content { padding-top: 8px; }
.bio-content .section-eyebrow { margin-bottom: 16px; }
.bio-content :is(h1, h2) { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; color: var(--white); line-height: 1.2; margin-bottom: 36px; }
.bio-para { font-size: 1.05rem; color: rgba(255,255,255,0.82); line-height: 1.85; margin-bottom: 24px; font-weight: 300; }
.bio-para strong { color: var(--white); font-weight: 500; }

.bio-body-section { background: var(--white); padding: 72px 60px; }
.bio-body-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 64px; align-items: start; }
.bio-full-text .bio-para { color: var(--slate); }
.bio-full-text .bio-para strong { color: var(--royal); }
.bio-sidebar-block { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--gold); }
.bio-sidebar-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.bio-sidebar-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-family: var(--label); }
.bio-sidebar-item { font-size: 0.875rem; color: var(--slate); line-height: 1.6; padding: 8px 0; border-bottom: 1px solid rgba(190,154,78,0.3); }
.bio-sidebar-item:last-child { border-bottom: none; }
.bio-sidebar-item em { font-style: italic; }
/* About page links match the Press page: sapphire text, gold hairline
   beneath, gold on hover (champagne/ivory on the dark hero). */
.bio-body-section a:not(.btn-primary) { color: var(--sapphire); text-decoration: none; border-bottom: 1px solid var(--gold); transition: color 0.2s; }
.bio-body-section a:not(.btn-primary):hover { color: var(--gold); }
.bio-hero a:not(.btn-primary) { color: var(--ivory); text-decoration: none; border-bottom: 1px solid var(--champagne); transition: color 0.2s; }
.bio-hero a:not(.btn-primary):hover { color: var(--champagne); }

/* BEGIN PAGE — "a quiet room" */
/* The opening is the home page's sapphire hero (.hero), with the desk
   photograph beside the headline; it sizes to its content, not the screen. */
.begin-hero, .speaking-hero { min-height: 0; }
.begin-hero .hero-sub { margin-bottom: 0; }
.speaking-hero h1 { margin-bottom: 0; }
.begin-hero .hero-portrait-img img { object-position: center top; }
.speaking-hero .hero-portrait-img img { object-position: 20% top; }
.begin-page { background: var(--cream); padding: 80px 60px 90px; }
.begin-inner { max-width: 1080px; margin: 0 auto; }
.begin-grid { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; }
.begin-copy h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; color: var(--royal); margin: 38px 0 12px; }
.begin-copy p { font-size: 0.95rem; color: var(--slate); line-height: 1.8; margin-bottom: 14px; }
.begin-copy a { color: var(--royal); text-decoration: none; border-bottom: 1px solid var(--gold); transition: color 0.2s; }
.begin-copy a:hover { color: var(--gold); }
.begin-note { margin-top: 44px; padding: 18px 22px; border-left: 3px solid var(--gold); background: rgba(255,255,255,0.75); }
.begin-note p { margin: 0; font-size: 0.875rem; }

.begin-card { background: var(--white); border: 1px solid rgba(20,39,75,0.12); border-top: 3px solid var(--gold); padding: 36px 32px; position: sticky; top: 110px; }
.begin-book { display: block; text-align: center; }
.begin-reassure { margin-top: 16px; text-align: center; font-size: 0.8rem; font-weight: 500; letter-spacing: 0; color: var(--sapphire); white-space: nowrap; font-family: var(--label); }
.begin-or { margin: 28px 0 4px; text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); font-family: var(--label); }
.begin-form label { display: block; margin: 14px 0 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); font-family: var(--label); }
.begin-form input[type="text"],
.begin-form input[type="email"],
.begin-form textarea { width: 100%; padding: 11px 12px; border: 1px solid rgba(20,39,75,0.25); border-radius: 0; background: var(--white); font-family: var(--sans); font-size: 0.95rem; color: var(--text); }
.begin-form input:focus,
.begin-form textarea:focus { outline: none; border-color: var(--gold); }
.begin-form textarea { min-height: 120px; resize: vertical; }
.begin-form button { width: 100%; margin-top: 18px; }
.re-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.begin-notice { padding: 13px 16px; margin-bottom: 22px; font-size: 0.875rem; line-height: 1.5; }
.begin-notice.ok { background: rgba(190,154,78,0.12); border-left: 3px solid var(--gold); color: var(--slate); }
.begin-notice.err { background: rgba(140,60,40,0.08); border-left: 3px solid #A04A2E; color: var(--slate); }

.begin-close { max-width: 920px; margin: 100px auto 0; text-align: center; }
.begin-close p { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 400; font-style: italic; color: var(--royal); line-height: 1.25; text-wrap: balance; margin-bottom: 18px; }
.begin-close p:last-child { margin-bottom: 0; }

/* CONFIDENTIALITY & PRIVACY PAGE */
.conf-page { background: var(--cream); padding: 150px 60px 90px; }
.conf-inner { max-width: 720px; margin: 0 auto; }
.conf-head h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin: 0 0 32px; }
.conf-inner p { font-size: 0.95rem; color: var(--slate); line-height: 1.85; margin-bottom: 16px; }
.conf-inner h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; color: var(--royal); margin: 44px 0 14px; }
.conf-inner strong { color: var(--royal); font-weight: 600; }
.conf-inner a { color: var(--royal); text-decoration: none; border-bottom: 1px solid var(--gold); transition: color 0.2s; overflow-wrap: anywhere; }
.conf-inner a:hover { color: var(--gold); }
/* "Discretion isn't my policy..." as display text, sized like the About creed. */
.conf-inner p.conf-creed { margin: 52px 0 8px; padding: 30px 0; border-top: 1px solid rgba(190,154,78,0.5); border-bottom: 1px solid rgba(190,154,78,0.5); text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.1vw, 1.75rem); color: var(--royal); line-height: 1.4; }
.privacy-page .policy h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin: 0 0 18px; }
.policy .policy-meta { font-size: 0.875rem; opacity: 0.7; margin-bottom: 22px; }
.policy p, .policy li { font-size: 0.875rem; }
.policy h2 { font-size: 1.3rem; margin: 36px 0 12px; }
.policy ul { list-style: none; margin: 0 0 16px; }
.policy li { padding: 10px 0 10px 18px; border-left: 2px solid rgba(190,154,78,0.4); margin-bottom: 8px; line-height: 1.7; color: var(--slate); }

/* FOR BOARDS PAGE */
.boards-page { background: var(--cream); padding: 150px 60px 90px; }
.boards-inner { max-width: 720px; margin: 0 auto; }
.boards-head h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin: 0 0 32px; }
.boards-inner p { font-size: 0.95rem; color: var(--slate); line-height: 1.85; margin-bottom: 16px; }
.boards-inner h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; color: var(--royal); margin: 48px 0 14px; }
.boards-inner strong { color: var(--royal); font-weight: 600; }
.boards-inner a { color: var(--royal); text-decoration: none; border-bottom: 1px solid var(--gold); transition: color 0.2s; }
.boards-inner a:hover { color: var(--gold); }
.boards-arch { margin: 40px auto; max-width: 600px; }
.boards-arch svg { width: 100%; height: auto; display: block; }
.boards-rule { border: none; border-top: 2px solid var(--gold); width: 48px; margin: 56px 0; }
.boards-q { font-family: var(--serif); font-weight: 500; color: var(--royal); font-size: 1.2rem; margin: 26px 0 6px; }
.boards-hold { margin: 56px 0; padding: 36px 0 20px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.boards-hold h2 { margin-top: 0; }
.boards-engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 28px 0 24px; }
.boards-engagement { background: var(--white); padding: 28px 24px; border-top: 3px solid var(--gold); }
.boards-engagement h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; color: var(--royal); margin-bottom: 10px; line-height: 1.35; }
.boards-engagement p { font-size: 0.875rem; line-height: 1.7; margin-bottom: 0; }
.boards-sig { margin: 44px 0 0; text-align: center; }
.boards-sig-line { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--royal); margin-bottom: 6px; }
.boards-sig-name { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-family: var(--label); }
.boards-cta { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.boards-cta-block { background: var(--white); padding: 32px 28px; border-top: 3px solid var(--gold); }
.boards-cta-block h2 { margin: 0 0 12px; font-size: 1.5rem; }
.boards-cta-block p { font-size: 0.875rem; }
.boards-cta-action { margin-top: 20px; margin-bottom: 0; }
.boards-download { font-weight: 600; }
.boards-cta-block .btn-primary { border-bottom: none; }

/* FOR CONGREGATIONS AND CLERGY PAGE — reads like a letter */
.cong-page { background: var(--cream); padding: 150px 60px 90px; }
.cong-inner { max-width: 760px; margin: 0 auto; }
.cong-head h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin: 0 0 36px; }
.cong-inner p { font-size: 0.95rem; color: var(--slate); line-height: 1.9; margin-bottom: 18px; }
.cong-inner strong { color: var(--royal); font-weight: 600; }
.cong-inner a { color: var(--royal); text-decoration: none; border-bottom: 1px solid var(--gold); transition: color 0.2s; }
.cong-inner a:hover { color: var(--gold); }
/* The four audiences (Congregation, Boards, Clergy, You privately): each a
   section under a gold rule, headed alike, with sub-heads one size down. */
.cong-section { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--gold); }
.cong-section .cong-h-md { margin-top: 0; }
.cong-section .cong-h-md + h3 { margin-top: 8px; }
.cong-h-lg { font-family: var(--serif); font-size: 2.3rem; font-weight: 400; color: var(--royal); margin: 72px 0 10px; }
.cong-h-md { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; color: var(--royal); margin: 64px 0 14px; }
.cong-h-sm { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--royal); margin: 56px 0 10px; }
.cong-tagline { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--royal-deep); margin-bottom: 20px; }
.cong-tagline-sm { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--royal-deep); margin-bottom: 16px; }
.cong-lead { font-weight: 600; color: var(--royal); margin-top: 28px; }
.cong-residencies h3, .cong-inner h3 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500; color: var(--royal); margin: 34px 0 8px; }
.cong-cta { margin-top: 56px; }
.cong-cta-line { font-size: 0.875rem; opacity: 0.8; margin-top: 14px; }
.cong-cta .btn-primary { border-bottom: none; }

/* THE WORK PAGE */
.work-page { background: var(--cream); padding: 150px 60px 90px; }
.work-inner { max-width: 720px; margin: 0 auto; }
.work-head h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin: 0 0 32px; }
.work-inner p { font-size: 0.95rem; color: var(--slate); line-height: 1.85; margin-bottom: 16px; }
.work-inner h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; color: var(--royal); margin: 48px 0 10px; }
.work-inner strong { color: var(--royal); font-weight: 600; }
.work-inner a { color: var(--royal); text-decoration: none; border-bottom: 1px solid var(--gold); transition: color 0.2s; }
.work-inner a:hover { color: var(--gold); }
.work-part { margin: 72px 0 8px; padding-top: 44px; border-top: 2px solid var(--gold); text-align: center; }
/* The page's two parts ("One · one on one", "Two · With your board") are
   headed in Garamond one step above the offer headings, with an italic
   Garamond note beneath. */
.work-inner p.work-part-label { font-family: var(--serif); font-size: clamp(1.75rem, 2.8vw, 2.3rem); font-weight: 500; line-height: 1.2; color: var(--royal); margin-bottom: 16px; }
.work-inner p.work-part-note { font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.55; color: var(--royal-deep); max-width: 600px; margin: 0 auto 8px; }
.work-keystone { width: 64px; height: auto; display: block; margin: 0 auto 18px; }
.work-offer { margin: 40px 0; }
.work-offer h2 { margin-bottom: 6px; }
.work-inner p.work-hook { font-family: var(--serif); font-style: italic; font-size: 1.375rem; font-weight: 500; color: var(--royal-deep); line-height: 1.4; margin-bottom: 16px; }
.work-inner p.work-creed { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; color: var(--royal); line-height: 1.3; margin: 28px 0 0; }
.work-which { margin-top: 64px; padding: 36px 0 16px; border-top: 1px solid var(--gold); }
.work-which h2 { margin-top: 0; }
.work-which p { margin-bottom: 14px; }
.work-cta { margin-top: 56px; }
.work-cta-action { margin-top: 20px; }
.work-cta-boards { font-size: 0.875rem; margin-top: 18px; }
.work-cta .btn-primary { border-bottom: none; }

/* PRESS PAGE */
.press-page { background: var(--cream); padding: 150px 60px 90px; }
.press-inner { max-width: 760px; margin: 0 auto; }
.press-head h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin: 0 0 32px; }
.press-inner p { font-size: 0.95rem; color: var(--slate); line-height: 1.8; margin-bottom: 16px; }
.press-inner h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; color: var(--royal); margin: 54px 0 12px; }
.press-inner h3 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500; color: var(--royal); margin: 36px 0 12px; }
.press-inner strong { color: var(--royal); font-weight: 600; }
.press-inner a { color: var(--royal); text-decoration: none; border-bottom: 1px solid var(--gold); transition: color 0.2s; }
.press-inner a:hover { color: var(--gold); }
.press-contact { background: var(--white); border: 1px solid rgba(20,39,75,0.12); border-top: 3px solid var(--gold); padding: 30px 32px; margin: 36px 0 12px; }
.press-contact h2 { margin: 0 0 10px; font-size: 1.5rem; }
.press-contact p { font-size: 0.875rem; margin-bottom: 10px; }
.press-contact-email { font-size: 1.05rem !important; font-weight: 600; }
.press-contact-email a { border-bottom-width: 2px; }
.press-contact p.press-contact-action { margin: 20px 0 0; }
.press-index { margin: 28px 0 8px; padding: 16px 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); font-size: 0.875rem !important; line-height: 2 !important; }
.press-index a { white-space: nowrap; }
.press-index-label { display: block; font-family: var(--label); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); line-height: 1.6; margin-bottom: 4px; }
.press-inner h2[id], .press-inner h3[id] { scroll-margin-top: 90px; }
.press-kicker { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: -4px 0 20px; font-family: var(--label); }
.press-cites p { padding-left: 18px; border-left: 2px solid rgba(190,154,78,0.35); margin-bottom: 12px; font-size: 0.95rem; }
.press-date { color: var(--ink-soft); font-size: 0.875rem; white-space: nowrap; }
.press-honors { line-height: 2; }

/* WRITING PAGE — hierarchy is the design problem: three books large, lists below */
.writing-page { background: var(--cream); padding: 150px 60px 90px; }
.writing-inner { max-width: 1000px; margin: 0 auto; }
.writing-head h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin: 0 0 32px; }
.writing-inner > p, .writing-inner .book p { font-size: 0.95rem; color: var(--slate); line-height: 1.8; margin-bottom: 16px; max-width: 720px; }
.writing-inner h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; color: var(--royal); margin: 60px 0 16px; }
.writing-inner strong { color: var(--royal); font-weight: 600; }
.writing-inner a { color: var(--royal); text-decoration: none; border-bottom: 1px solid var(--gold); transition: color 0.2s; }
.writing-inner a:hover { color: var(--gold); }
.books-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 32px; }
.book p { font-size: 0.875rem !important; line-height: 1.7 !important; }
.wp-block-image.book-cover { max-width: 280px; margin: 0 0 22px; }
.book-cover img { display: block; width: 100%; height: auto; border: 1px solid rgba(20,39,75,0.15); border-radius: 0; box-shadow: none; }
.book-title { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500; color: var(--royal); line-height: 1.3; margin-bottom: 4px; }
.book-subtitle { font-family: var(--serif); font-style: italic; font-size: 0.95rem !important; color: var(--slate); margin-bottom: 10px !important; }
.book-meta { font-size: 0.875rem !important; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 18px !important; }
.book-role { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-size: 0.78rem; font-family: var(--label); }
/* Recent Writing stays hidden until the first post exists. */
.recent-writing:not(:has(.writing-posts li)) { display: none; }
.writing-posts { margin: 8px 0 24px; list-style: none; }
.writing-posts li { padding-left: 18px; border-left: 2px solid rgba(190,154,78,0.35); margin-bottom: 12px; font-size: 0.95rem; color: var(--slate); }
.writing-posts .wp-block-latest-posts__post-date { display: inline; color: var(--ink-soft); font-size: 0.875rem; white-space: nowrap; }
.writing-posts .wp-block-latest-posts__post-date::before { content: " · "; }
.writing-post { padding-left: 18px; border-left: 2px solid rgba(190,154,78,0.35); margin-bottom: 12px; font-size: 0.95rem; }
.writing-post-date { color: var(--ink-soft); font-size: 0.875rem; white-space: nowrap; }

/* SPEAKING PAGE */
.speaking-page { background: var(--cream); padding: 80px 60px 90px; }
.speaking-inner { max-width: 720px; margin: 0 auto; }
.speaking-head h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin: 0 0 32px; }
.speaking-inner p { font-size: 0.95rem; color: var(--slate); line-height: 1.85; margin-bottom: 16px; }
.speaking-inner h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 500; color: var(--royal); margin: 54px 0 14px; }
.speaking-inner strong { color: var(--royal); font-weight: 600; }
.speaking-inner a { color: var(--royal); text-decoration: none; border-bottom: 1px solid var(--gold); transition: color 0.2s; }
.speaking-inner a:hover { color: var(--gold); }
.talk-overview-title { margin-top: 44px !important; }
.wp-block-table.talk-overview { margin: 8px 0 24px; }
.wp-block-table.talk-overview table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.875rem; color: var(--slate); line-height: 1.55; }
.wp-block-table.talk-overview thead { border-bottom: none; }
.wp-block-table.talk-overview :is(th, td) { border: none; border-bottom: 1px solid rgba(190,154,78,0.35); padding: 14px 16px 14px 0; vertical-align: top; text-align: left; }
.wp-block-table.talk-overview th { font-family: var(--label); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); padding-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--gold); }
.wp-block-table.talk-overview :is(th, td):nth-child(1) { width: 27%; }
.wp-block-table.talk-overview :is(th, td):nth-child(2) { width: 29%; }
.wp-block-table.talk-overview :is(th, td):nth-child(3) { width: 29%; }
.wp-block-table.talk-overview :is(th, td):nth-child(4) { width: 15%; padding-right: 0; }
.wp-block-table.talk-overview td:first-child { font-family: var(--serif); font-size: 1.02rem; line-height: 1.35; }
/* Group rows ("Leadership", "Identity and community"): a Garamond italic
   label across the full width, set off from the talks beneath it. */
.wp-block-table.talk-overview tbody th[colspan] { width: auto; padding: 26px 0 8px; font-family: var(--serif); font-size: 1.15rem; font-style: italic; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--royal); border-bottom: 1px solid var(--gold); }
.wp-block-table.talk-overview td:nth-child(3) { font-family: var(--serif); font-style: italic; font-size: 0.98rem; line-height: 1.45; }
.talk { margin: 48px 0; }
.talk h2 { margin-bottom: 12px; }
.talk-pull { font-size: 1.05rem; font-weight: 700; }
.talk-meta { margin: 22px 0; padding: 4px 0 4px 18px; border-left: 2px solid rgba(190,154,78,0.4); }
.talk-meta p { font-size: 0.875rem; margin-bottom: 10px; }
.talk-label { display: inline-block; min-width: 92px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-right: 8px; font-family: var(--label); }
.talk-video { aspect-ratio: 16 / 9; background: #F7F3EB; border: 1px solid rgba(190,154,78,0.3); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
.talk-video-keystone { width: 46px; height: auto; opacity: 0.22; }
.talk-video-caption { font-size: 0.76rem !important; color: var(--ink-soft) !important; letter-spacing: 0.04em; margin: 0 !important; }
.talk-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.speaking-cta { margin-top: 20px; }
/* Closing invitation buttons on Speaking, For Boards, The Work, and For
   Congregations (owner's request): midnight with gold lettering at rest;
   on hover, sapphire with ivory lettering. */
:is(.speaking-cta, .boards-cta-action, .work-cta-action, .cong-cta, .press-contact-action) .btn-primary { background: var(--midnight); border: 1px solid var(--midnight); color: var(--gold); }
:is(.speaking-cta, .boards-cta-action, .work-cta-action, .cong-cta, .press-contact-action) .btn-primary:hover { background: var(--sapphire); border-color: var(--sapphire); color: var(--ivory); }

/* TESTIMONIALS PAGE */
.testi-page { background: var(--cream); padding: 150px 60px 90px; }
.testi-inner { max-width: 720px; margin: 0 auto; }
.testi-head h1 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin: 0 0 20px; }
.testi-intro { font-style: italic; font-size: 0.95rem; color: var(--slate); line-height: 1.8; max-width: 620px; }
.testi-quote { margin: 72px 0; }
.testi-quote { border: none; padding: 0; }
.testi-quote p { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 500; color: var(--royal); line-height: 1.55; margin: 0 0 18px; }
.testi-quote cite { display: block; font-style: normal; font-size: 0.875rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.testi-close { margin-top: 90px; text-align: center; }
.testi-close p { font-size: 0.95rem; color: var(--slate); margin-bottom: 24px; }
.testi-close .btn-primary { border-bottom: none; }

/* GENERIC PAGE (non-designed pages, e.g. Privacy) */
.generic-page { background: var(--white); padding: 160px 60px 90px; }
.generic-page-inner { max-width: 860px; margin: 0 auto; }
.generic-page-inner h1 { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; color: var(--royal); line-height: 1.2; margin-bottom: 28px; }
.generic-page-inner p { margin-bottom: 16px; color: var(--slate); }

.bio-creed { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(190,154,78,0.4); }
.bio-creed p { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: rgba(247,243,235,0.92); line-height: 1.7; margin-bottom: 10px; }
/* On About, the two creed lines run the full width of the blue hero, under
   the photograph and the introduction, at the size Denise chose (28px). */
.bio-hero { row-gap: 56px; }
.bio-hero > .bio-creed { grid-column: 1 / -1; margin-top: 0; padding-top: 40px; text-align: center; }
.bio-hero > .bio-creed p { font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.5; margin-bottom: 12px; }
.bio-hero > .bio-creed p:last-child { margin-bottom: 0; }

/* FOOTER */
footer.site-footer { border-top: 1px solid var(--gold); background: var(--footer-navy); padding: 40px 60px 32px; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 48px; row-gap: 26px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-mark { width: 34px; height: 34px; display: block; }
.footer-name { font-family: var(--label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-soft); white-space: nowrap; }
.footer-copy { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(190,154,78,0.3); font-size: 0.76rem; color: rgba(247,243,235,0.45); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 24px; row-gap: 10px; }
.footer-links a { font-size: 0.72rem; color: rgba(247,243,235,0.65); text-decoration: none; transition: color 0.2s; cursor: pointer; font-family: var(--label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-links a:hover { color: var(--gold); }

/* NAV — breakpoints sized to the menu, not the page: the descriptor drops
   first, then below laptop width the menu becomes the toggle panel instead
   of wrapping. */
@media (max-width: 1520px) {
  .nav-descriptor { display: none; }
}
@media (max-width: 1180px) {
  nav.site-nav { padding: 10px 20px; flex-wrap: wrap; }
  .nav-toggle { display: block; order: 3; }
  .nav-cta { display: none; }
  .nav-menu-cta { display: block; }
  .nav-links { display: none; width: 100%; order: 4; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0 16px; }
  .site-nav.nav-open .nav-links { display: flex; }
  .nav-links li { border-top: 1px solid rgba(247,243,235,0.12); }
  .nav-links a { display: block; padding: 13px 4px; font-size: 0.875rem; }
  .nav-menu-cta a { color: var(--champagne); }
  .nav-sub-toggle { display: none; }
  .nav-has-sub { border-top: none !important; }
  .nav-has-sub::after { display: none; }
  .nav-sub, .nav-has-sub:hover .nav-sub { display: block; position: static; min-width: 0; padding: 0; background: none; border: none; }
  .nav-sub li a { padding: 13px 4px; }
}

/* RESPONSIVE */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 100px 24px 60px; text-align: center; }
  .hero-text { justify-self: center; }
  .hero-portrait { order: -1; justify-self: center; max-width: 260px; aspect-ratio: 1 / 1; }
  .hero-actions { justify-content: center; }
  section.band, .tension, .principles, .cta-section, .clients, .bio-hero, .bio-body-section, .generic-page, .begin-page, .conf-page, .boards-page, .cong-page, .work-page, .press-page, .writing-page, .speaking-page, .testi-page { padding-left: 24px; padding-right: 24px; }
  .books-grid { grid-template-columns: 1fr; }
  .wp-block-table.talk-overview :is(table, thead, tbody, tr, th, td) { display: block; width: auto !important; }
  .wp-block-table.talk-overview tr:has(th[colspan]) { padding-bottom: 0; border-bottom: none; }
  .wp-block-table.talk-overview thead { display: none; }
  .wp-block-table.talk-overview tr { padding: 14px 0; border-bottom: 1px solid rgba(190,154,78,0.35); }
  .wp-block-table.talk-overview td { border: none; padding: 2px 0; }
  .boards-engagements, .boards-cta { grid-template-columns: 1fr; }
  .begin-grid { grid-template-columns: 1fr; gap: 44px; }
  .begin-card { position: static; order: -1; }
  /* Too wide for a phone's card on one line: the separators become line
     breaks and the three phrases stack. */
  .begin-reassure { line-height: 1.7; }
  .begin-reassure .rs-dot { display: block; height: 0; overflow: hidden; }
  .begin-hero .hero-portrait-img img { object-position: 38% 22%; }
  .speaking-hero .hero-portrait-img img { object-position: 30% 12%; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .cta-with-photo { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .cta-portrait { justify-self: center; max-width: 260px; aspect-ratio: 1 / 1; }
  .cta-portrait-img img { object-position: 38% 22%; }
  .cta-copy { justify-self: center; }
  .cta-with-photo .cta-actions { justify-content: center; }
  .who-inner, .process-grid, .bio-body-inner, .work-groups, .keystone-inner, .credentials-inner { grid-template-columns: 1fr; gap: 44px; }
  .who-pullquote, .bio-photo-wrap { position: static; }
  .split { grid-template-columns: 1fr; }
  .split-img { min-height: 300px; }
  .bio-hero { grid-template-columns: 1fr; padding-top: 120px; }
  .bio-photo { max-width: 280px; }
  footer.site-footer { display: flex; flex-direction: column; gap: 18px; text-align: center; padding: 36px 24px 28px; }
  .footer-brand { justify-content: center; }
  .footer-links { justify-content: center; flex-wrap: wrap; }
}

/* [re_email]: the reveal control reads as a link; the revealed address is plain text. */
.re-email-reveal { background: none; border: none; border-bottom: 1px solid var(--gold); padding: 0; font: inherit; color: var(--sapphire); cursor: pointer; }
.re-email-reveal:hover { color: var(--gold); }
.re-email-text { user-select: all; }

/* BRAND — small labels are gold everywhere (Brand Identity Program p.9):
   Estate Gold on ivory, Champagne where gold sits on sapphire. Kept last so
   it overrides the per-page paragraph colors. */
body :is(.section-eyebrow, .hero-eyebrow, .clients-label, .aside-label, .bio-sidebar-label, .step-num, .talk-label, .work-group-head, .begin-or, .press-kicker, .book-role, .bio-photo-caption p, .who-pullquote cite) { color: var(--gold); }
body :is(.hero, .framework, .cta-section, .bio-hero, .clients, .who-pullquote, .split-content.dark, .credentials-panel) :is(.section-eyebrow, .hero-eyebrow, .clients-label, .aside-label, .bio-photo-caption p, cite) { color: var(--champagne); }

/* Skip link (WordPress core): stays visually hidden until keyboard focus,
   then appears on brand above the fixed header. */
body .skip-link.screen-reader-text { color: var(--ivory); font-family: var(--label); }
body .skip-link.screen-reader-text:focus { background: var(--sapphire); color: var(--ivory); border: 1px solid var(--gold); font-family: var(--label); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 20px; top: 10px; left: 10px; z-index: 100001; text-decoration: none; }