/* ==========================================================================
   DATING WITH DISCERNMENT
   Stylesheet, v1
   Built to DWD_Brand_Codex v5. Light only. One block colour: Raspberry.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */

:root {
  /* Core palette */
  --charcoal:       #3F3F42;
  --alabaster:      #FCFCFA;
  --linen:          #E6DDD5;
  --blush:          #E8AE94;
  --rose:           #C89683;
  --slate:          #9EAEB4;

  /* The block colour. White type only. */
  --raspberry:      #B03A50;
  --raspberry-deep: #982F44;   /* hover only, never a fill in its own right */

  /* Text tints */
  --blush-deep:     #8E5E4E;
  --slate-deep:     #667175;

  /* Table / stripe */
  --stripe:         #F8F5F1;

  /* Type */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Measure and rhythm */
  --measure: 34rem;
  --measure-wide: 62rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(3.5rem, 9vw, 7rem);
}

/* --- 2. RESET ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--alabaster);
  color: var(--charcoal);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* --- 3. TYPE ------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--charcoal);
  margin: 0 0 .6em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-weight: 600; font-size: 40px; line-height: 1.2; }
h2 { font-weight: 600; font-size: 28px; line-height: 1.29; }
h3 { font-weight: 500; font-size: 20px; line-height: 1.4; }

/* Hero H1 only. The headline is the strongest asset on the page. */
.display {
  font-size: clamp(2.15rem, 5.4vw, 3.4rem);
  line-height: 1.13;
  font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 0;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blush-deep);
  margin: 0 0 1.1rem;
}

.lede { font-size: 19px; line-height: 1.6; }

.caption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate-deep);
}

strong, b { font-weight: 600; }

a {
  color: var(--blush-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--raspberry); }

/* --- 4. LAYOUT ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow { max-width: var(--measure); margin-inline: auto; }

section { padding-block: var(--section-y); }

.linen { background: var(--linen); }

.rule {
  border: 0;
  border-top: 1px solid var(--linen);
  margin: var(--section-y) 0;
}

.center { text-align: center; }

/* --- 5. BUTTONS ---------------------------------------------------------- */
/* One block colour. Raspberry, white type, everywhere. */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--raspberry);
  border-radius: 6px;
  background: var(--raspberry);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--raspberry-deep); border-color: var(--raspberry-deep); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--raspberry);
  border-color: var(--raspberry);
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--raspberry); color: #fff; }

/* On a Raspberry block, the button inverts so it stays visible. */
.block .btn {
  background: #fff;
  border-color: #fff;
  color: var(--raspberry);
}
.block .btn:hover, .block .btn:focus-visible { background: var(--linen); border-color: var(--linen); color: var(--raspberry); }

:focus-visible { outline: 2px solid var(--raspberry); outline-offset: 3px; }

/* --- 6. THE BLOCK -------------------------------------------------------- */
/* Raspberry fill, white type. The only coloured fill on any surface. */

.block {
  background: var(--raspberry);
  color: #fff;
}
.block h1, .block h2, .block h3, .block p { color: #fff; }
.block a { color: #fff; }
.block .eyebrow { color: rgba(255,255,255,.78); }

.band {
  background: var(--raspberry);
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
  text-align: center;
}
.band p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  line-height: 1.35;
  max-width: 30ch;
  margin-inline: auto;
  color: #fff;
  text-wrap: balance;
}

/* --- 7. HEADER ----------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(252,252,250,.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linen);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
  padding-block: .6rem;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(12.5px, 3.6vw, 17px);
  letter-spacing: -0.01em;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--charcoal); }
.wordmark .tm {
  font-size: .58em;
  vertical-align: .55em;
  letter-spacing: 0;
  margin-left: .06em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
}
.nav-links a:hover { color: var(--raspberry); }

/* The one action in the header. Raspberry fill, white type, so it reads as a
   button and not another link. */
.nav .btn {
  padding: .8rem 1.4rem;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--raspberry);
  border-color: var(--raspberry);
  box-shadow: 0 1px 2px rgba(63,63,66,.12);
}
.nav .btn:hover, .nav .btn:focus-visible { background: var(--raspberry-deep); border-color: var(--raspberry-deep); color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
  color: var(--charcoal);
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--alabaster);
    border-bottom: 1px solid var(--linen);
    padding: .5rem var(--gutter) 1.5rem;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--linen); }
  .nav-links li:last-child a { border-bottom: 0; }
  .nav-links .btn { margin-top: 1rem; width: 100%; text-align: center; }
}

/* --- 8. HERO, type-led (guide, workbook, 404) ---------------------------- */

.hero {
  padding-block: clamp(4rem, 11vw, 8rem);
  text-align: center;
}
.hero .display { max-width: 20ch; margin-inline: auto; }
.hero .sub {
  font-size: 19px;
  color: var(--slate-deep);
  max-width: 40ch;
  margin: 0 auto 2.4rem;
}
.hero .microcopy { margin-top: 1.1rem; }

/* --- 8b. HERO, full-bleed photograph (homepage) -------------------------- */
/* Neutral ground. The photograph carries the warmth and Rose Deep stays an
   accent, used on the button here and on the blocks further down the page. */

.hero-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--linen);
  padding-block: 0;
}
.hero-photo .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 12% 22%;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(101deg,
    rgba(252,252,250,0)   42%,
    rgba(252,252,250,.45) 51%,
    rgba(252,252,250,.90) 60%,
    rgba(252,252,250,1)   70%,
    var(--alabaster)      80%);
}
/* Wider than the rest of the page so the copy sits further right and the
   photograph keeps its breathing room. */
.hero-photo > .wrap { position: relative; z-index: 2; max-width: 78rem; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  min-height: clamp(26rem, 56vh, 33rem);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 3rem);
}
.hero-copy { grid-column: 2; }
.hero-photo .display { margin-bottom: .55em; }
.hero-photo .sub {
  font-size: 19px;
  color: var(--slate-deep);
  max-width: 32ch;
  margin-bottom: 2rem;
}

@media (max-width: 900px) {
  .hero-photo { overflow: visible; background: var(--linen); }
  .hero-photo .hero-bg { position: static; height: auto; aspect-ratio: 3 / 2; object-position: 22% 24%; }
  .hero-photo::after { display: none; }
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: clamp(2rem, 6vw, 3rem);
  }
  .hero-copy { grid-column: 1; }
}

/* --- 8c. ABOUT, two column with the credentials beneath ------------------ */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.about-figure { margin: 0; }
.about-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  background: #EFE9E4;
}
.about-figure figcaption {
  margin-top: .75rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-deep);
}

/* Training sits under the photograph, in the same column. */
.credentials {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(63,63,66,.16);
}
.credentials h3 { margin-bottom: .9rem; font-size: 18px; }
.credentials ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.credentials li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 15.5px;
  line-height: 1.5;
}
.credentials li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blush);
}
.credential-note {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(63,63,66,.16);
}

@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-figure { order: -1; max-width: 20rem; }
}

/* --- 9. CARDS ------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0;
  list-style: none;
  padding: 0;
}

.card {
  background: var(--alabaster);
  border: 1px solid var(--linen);
  border-radius: 8px;
  padding: 2rem 1.6rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  text-wrap: balance;
}
.linen .card { background: #fff; border-color: #EFE8E2; }

/* --- 10. PILLARS, on the block ------------------------------------------- */
/* The ten practices are the substance of the product, so this is the one
   teaching section that gets the block colour. Rose Deep, white type, and the
   heart motif marking each practice. */

.practices {
  background: var(--raspberry);
  color: #fff;
}
.practices h2,
.practices h3,
.practices p,
.practices dt,
.practices dd { color: #fff; }
.practices .eyebrow { color: rgba(255,255,255,.72); }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.pillar {
  border-top: 1px solid rgba(255,255,255,.42);
  padding-top: 1.5rem;
}
.pillar h3 { margin-bottom: .35rem; }
.pillar .answers {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  font-style: italic;
  margin-bottom: 1.4rem;
}
.pillar dl { margin: 0; }
/* The heart and the practice name share a flex line, so the heart is centred
   on the text rather than positioned against it and hoping. */
.pillar dt {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  margin-top: 1.4rem;
}
/* The brand's one ornament: a thin outline heart, Alabaster. */
.pillar dt::before {
  content: "";
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30' fill='none'%3E%3Cpath d='M16 27.2C16 27.2 2.6 19 2.6 10.4 2.6 6 6.2 2.4 10.6 2.4c2.4 0 4.6 1.2 5.4 3 .8-1.8 3-3 5.4-3 4.4 0 8 3.6 8 8 0 8.6-13.4 16.8-13.4 16.8z' stroke='%23FCFCFA' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.pillar dd {
  margin: .3rem 0 0 calc(1.1em + .55rem);
  font-size: 15.5px;
  line-height: 1.6;
}

.practices .pull {
  border-left-color: rgba(255,255,255,.55);
  color: #fff;
}

/* --- 11. LISTS ----------------------------------------------------------- */

.ticks { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .95rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--raspberry);
}
.ticks.open li::before { background: none; border: 1px solid var(--slate); }

/* Two lists that answer each other, side by side. */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.two-col > div > :first-child { margin-top: 0; }
.two-col .ticks { margin-bottom: 0; }
.two-col h2, .two-col h3 { font-size: 24px; margin-bottom: 1.4rem; }

/* --- 12. PULL QUOTE ------------------------------------------------------ */

.pull {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.42;
  border-left: 3px solid var(--blush);
  padding-left: 1.4rem;
  margin: 2.25rem 0;
  text-wrap: balance;
}

/* --- 13. FORMS ----------------------------------------------------------- */

.optin { max-width: 30rem; margin-inline: auto; }
.hero .optin { margin-top: 2rem; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.optin input[type="text"],
.optin input[type="email"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid var(--linen);
  border-radius: 6px;
  padding: .95rem 1rem;
}
.optin input::placeholder { color: #9A9A9E; }
.optin input:focus { border-color: var(--raspberry); outline: none; box-shadow: 0 0 0 3px rgba(176,58,80,.13); }

.optin .btn { width: 100%; margin-top: .7rem; padding-block: 1.05rem; }

.optin .microcopy {
  font-size: 13px;
  color: var(--slate-deep);
  margin: .9rem 0 0;
  text-align: center;
}

.form-msg {
  margin-top: 1rem;
  font-size: 15px;
  text-align: center;
  display: none;
}
.form-msg.show { display: block; }
.form-msg.ok { color: var(--raspberry); font-weight: 600; }
.form-msg.err { color: #8A3B3B; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 14. POPUP ----------------------------------------------------------- */

.popup-veil {
  position: fixed;
  inset: 0;
  background: rgba(63,63,66,.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 90;
}
.popup-veil.open { display: flex; }

.popup {
  position: relative;
  background: var(--alabaster);
  border-radius: 10px;
  max-width: 30rem;
  width: 100%;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  box-shadow: 0 24px 60px rgba(63,63,66,.22);
  max-height: 92vh;
  overflow-y: auto;
}
.popup h2 { font-size: 26px; }
.popup .dismiss {
  display: block;
  margin: 1rem auto 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--slate-deep);
  text-decoration: underline;
  cursor: pointer;
}
.popup-close {
  position: absolute;
  top: .6rem;
  right: .8rem;
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--slate-deep);
  cursor: pointer;
  padding: .35rem .5rem;
}

/* --- 15. OFFER BLOCK ----------------------------------------------------- */

.offer {
  border-radius: 10px;
  padding: clamp(2.25rem, 6vw, 3.5rem);
  text-align: center;
}
.offer h2 { font-size: clamp(1.75rem, 4vw, 2.35rem); margin-bottom: .25rem; }
.offer .sub {
  font-family: var(--sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  margin-bottom: 1.75rem;
}
.offer p { max-width: 38ch; margin-inline: auto; }
.offer .btn { margin-top: 1.75rem; }

/* --- 16. BLOG ------------------------------------------------------------ */

.posts { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.posts li { border-top: 1px solid var(--linen); padding: 1.75rem 0; }
.posts li:last-child { border-bottom: 1px solid var(--linen); }
.posts h2 { font-size: 22px; margin-bottom: .35rem; }
.posts h2 a { color: var(--charcoal); text-decoration: none; }
.posts h2 a:hover { color: var(--raspberry); }
.posts .meta { font-size: 13px; color: var(--slate-deep); margin: 0 0 .5rem; }

.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }

/* --- 17. FOOTER ---------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--linen);
  padding-block: 3rem;
  font-size: 14px;
  color: var(--slate-deep);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.site-footer .wordmark { font-size: clamp(13px, 3.4vw, 16px); display: block; margin-bottom: .4rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer a { color: var(--slate-deep); text-decoration: none; }
.site-footer a:hover { color: var(--raspberry); }
.site-footer .byline {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linen);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- 18. UTILITY --------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: .5rem;
  z-index: 100;
  background: var(--raspberry);
  color: #fff;
  padding: .75rem 1rem;
  border-radius: 6px;
}

.mt-0 { margin-top: 0; }
.mb-lg { margin-bottom: 2.5rem; }

/* --- 19. TRAINING YEARS -------------------------------------------------- */
/* Years are shown, but the list stays ordered by relevance rather than by
   date: coaching first, health second, the photography degree last. */
.yr {
  display: inline-block;
  margin-left: .15rem;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--slate-deep);
  white-space: nowrap;
}

/* --- 20. WIDE SECTION HEAD ----------------------------------------------- */
/* Used where the heading is meant to carry the full width of the section
   rather than sit in a narrow centred column. */

.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.section-title {
  font-size: clamp(1.85rem, 4.4vw, 2.9rem);
  line-height: 1.12;
  max-width: none;
  margin-bottom: 1.6rem;
  text-wrap: balance;
}

.lede-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 4vw, 3rem);
}
.lede-cols p { margin: 0; font-size: 17.5px; line-height: 1.6; }

/* --- 21. ABOUT CLOSE ----------------------------------------------------- */
/* The payoff line and the sign-off run full width beneath the two columns,
   so the story column can stop level with the photograph. */

.about-pull {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
}
.about-close { max-width: 46rem; margin-top: 1.5rem; }

/* ==========================================================================
   22. THE UNUSED HALF OF THE PALETTE
   Blush and Slate were in the codex from the start and had never been used on
   the site. That, not the choice of colours, is what made the page read flat.
   Blush carries small marks and rules on light grounds. Slate carries the
   science, and is the signal that a claim is being explained rather than
   asserted.
   ========================================================================== */

/* --- Blush: eyebrows get a rule, so the accent appears in every section --- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  background: var(--blush);
  max-width: 8rem;
}
.center .eyebrow { justify-content: center; }
.center .eyebrow::after { max-width: 4rem; }

/* --- Blush: the recognition cards get a top edge ------------------------- */
.card {
  border-top: 3px solid var(--blush);
  padding-top: 1.7rem;
}

/* --- Blush: the qualifying list marks ------------------------------------ */
.ticks li::before { background: var(--blush); }
.two-col .ticks li::before { background: var(--blush); }

/* --- Blush: a heart marks the pull quotes on light grounds --------------- */
.pull {
  position: relative;
  border-left-width: 3px;
}

/* --- Slate: the mechanism section ---------------------------------------- */
/* Section 3 is the biology. It now reads visually as the explained claim. */
.science { position: relative; }
.science .eyebrow { color: var(--slate-deep); }
.science .eyebrow::after { background: var(--slate); }
.science h2, .science h3 { color: var(--charcoal); }
.science .mechanism {
  margin: 2rem 0;
  padding: 1.35rem 1.5rem;
  background: #F2F4F5;
  border-left: 3px solid var(--slate);
  border-radius: 0 6px 6px 0;
  font-size: 16.5px;
  line-height: 1.6;
}
.science .mechanism strong { color: var(--slate-deep); }

/* --- Slate: the credential note reads as fine print, not as body --------- */
.credential-note { border-top-color: var(--slate); }

/* --- Blush: a hairline closes each light section head -------------------- */
.section-title { position: relative; }
.practices .section-title::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 2px;
  background: rgba(255,255,255,.55);
  margin-top: 1.4rem;
}

/* ==========================================================================
   23. THE SPLIT SECTIONS
   The three teaching sections run as two columns: the heading alone on one
   side, set in Fraunces italic, and the body on the other. The side alternates
   down the page so the eye crosses the spread rather than tracking one edge.
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
/* Top-aligned rather than centred: these bodies are long, and a heading
   floating at the vertical midpoint stops reading as a heading. */
.split-head { align-self: start; padding-top: .2rem; }
.split-body { max-width: 34rem; }

.split-head .eyebrow { margin-bottom: 1.2rem; }
.split-head h2 {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 2.85rem);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

/* Every other one turns around. */
.split.flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.split.flip .split-head { grid-column: 2; grid-row: 1; }
.split.flip .split-body { grid-column: 1; grid-row: 1; margin-left: auto; }

@media (max-width: 900px) {
  .split, .split.flip { grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
  .split.flip .split-head { grid-column: 1; grid-row: 1; }
  .split.flip .split-body { grid-column: 1; grid-row: 2; margin-left: 0; }
  .split-head h2 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .split-body { max-width: none; }
}