/* The Whitby Foundation | shared header and typography consistency
 * 2026-10-15. Existing colors, core fonts and site layouts remain unchanged.
 * Added after page-specific CSS to keep typography identical on every page.
 */

/* Every Foundation header uses the same single-line wordmark. */
body .site-header .brand.wf-text-brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  color: var(--ink, #1c1c1b);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
body .site-header .brand.wf-text-brand .wf-full-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .32em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 1.8vw, 29px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .025em;
  white-space: nowrap;
  color: inherit;
}
body .site-header .brand.wf-text-brand .wf-small-the {
  position: relative;
  top: -.43em;
  align-self: baseline;
  font-family: inherit;
  font-size: .52em;
  font-weight: 500;
  letter-spacing: .15em;
  line-height: 1;
}
body .site-header .brand.wf-text-brand .wf-large-name {
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
}
/* Match the header's horizontal position on the homepage and inner pages. */
body .site-header:has(.mainnav) {
  padding-left: clamp(20px, 2.4vw, 40px);
  padding-right: clamp(20px, 2.4vw, 40px);
}
@media (max-width: 820px) {
  body .site-header:has(.mainnav) {padding-left:20px;padding-right:20px;}
}
@media (max-width: 470px) {
  body .site-header:has(.mainnav) {padding-left:17px;padding-right:17px;}
}
/* Same wordmark rhythm on every Foundation page, independent of legacy CSS load order. */
@media (max-width: 1280px) and (min-width: 821px) {
  body .site-header .brand.wf-text-brand .wf-full-wordmark {font-size: clamp(20px, 1.7vw, 24px);}
}
@media (max-width: 820px) {
  body .site-header .brand.wf-text-brand .wf-full-wordmark {font-size: 24px;}
}
@media (max-width: 470px) {
  body .site-header .brand.wf-text-brand .wf-full-wordmark {font-size: 20px; gap: .26em;}
  body .site-header .brand.wf-text-brand .wf-large-name {letter-spacing: .018em;}
}
@media (max-width: 365px) {
  body .site-header .brand.wf-text-brand .wf-full-wordmark {font-size: 18px; gap: .24em;}
}

/* Marriage & Family: make the dark safety statement look like other site headings. */
body .use-section .guardrail {
  background: var(--charcoal, #232322);
  color: var(--paper, #f7f3ec);
}
body .use-section .guardrail h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(29px, 2.1vw, 34px);
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.07;
  color: var(--paper, #f7f3ec);
  margin: 0;
}
body .use-section .guardrail p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.36;
  color: var(--paper, #f7f3ec);
  margin: 0;
}
@media (max-width: 820px) {
  body .use-section .guardrail h3 {font-size: 30px;}
  body .use-section .guardrail p {font-size: 18px;}
}


/* 2026-10-16 | Whitby Foundation approved compact header lockup.
   Only Foundation headers with .mainnav are affected; Creative Group retains
   its separate brand and header layout. No brand artwork is resampled. */
body .topbar:has(+ .site-header .mainnav) {
  min-height: 46px;
  height: 46px;
  box-sizing: border-box;
}
body .site-header:has(.mainnav) {
  height: 100px;
  min-height: 100px;
  gap: clamp(12px, 1.5vw, 24px);
  padding-left: clamp(22px, 2.5vw, 46px);
  padding-right: clamp(22px, 2.5vw, 46px);
}
body .site-header:has(.mainnav) .brand.wf-text-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}
body .site-header:has(.mainnav) .wf-monogram-frame {
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  height: 50px;
  width: 50px;
  padding: 5px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--gold, #9a7444);
}
body .site-header:has(.mainnav) .wf-monogram-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: none;
}
body .site-header:has(.mainnav) .brand.wf-text-brand .wf-full-wordmark {
  font-size: clamp(19px, 1.25vw, 22px);
  gap: .36em;
  line-height: 1;
  letter-spacing: .015em;
}
body .site-header:has(.mainnav) .brand.wf-text-brand .wf-small-the {
  position: relative;
  top: -.36em;
  font-size: .54em;
  letter-spacing: .15em;
}
body .site-header:has(.mainnav) .brand.wf-text-brand .wf-large-name {
  letter-spacing: .025em;
}
body .site-header:has(.mainnav) .mainnav {
  column-gap: clamp(10px, 1.35vw, 22px);
  row-gap: 0;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (min-width: 1101px) {
  body .site-header:has(.mainnav) .mainnav {flex-wrap: nowrap;}
}
@media (max-width: 1100px) and (min-width: 821px) {
  body .site-header:has(.mainnav) .mainnav {
    font-size: 10px;
    column-gap: 12px;
    row-gap: 0;
  }
}
@media (max-width: 820px) {
  body .topbar:has(+ .site-header .mainnav) {
    min-height: 46px;
    height: auto;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  body .site-header:has(.mainnav) {
    height: 78px;
    min-height: 78px;
    gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }
  body .site-header:has(.mainnav) .brand.wf-text-brand {gap: 10px;}
  body .site-header:has(.mainnav) .wf-monogram-frame {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    padding: 4px;
  }
  body .site-header:has(.mainnav) .brand.wf-text-brand .wf-full-wordmark {
    font-size: 18px;
    gap: .3em;
  }
  body .site-header:has(.mainnav) .brand.wf-text-brand .wf-large-name {
    letter-spacing: .012em;
  }
  body .site-header:has(.mainnav) .mainnav {
    top: 100%;
    gap: 0;
    justify-content: flex-start;
  }
}
@media (max-width: 470px) {
  body .site-header:has(.mainnav) {padding-left: 17px; padding-right: 17px;}
  body .site-header:has(.mainnav) .brand.wf-text-brand .wf-full-wordmark {
    font-size: clamp(15px, 3.9vw, 18px);
    gap: .25em;
  }
}
@media (max-width: 365px) {
  body .site-header:has(.mainnav) .wf-monogram-frame {
    width: 36px; height: 36px; flex-basis: 36px;
  }
  body .site-header:has(.mainnav) .brand.wf-text-brand {gap: 8px;}
}

/* 2026-10-16 | Approved final reduction: shared Foundation header only.
   Preserves original near-black monogram art, cream background, thin gold frame,
   and the smaller, raised THE. No changes to the Creative Group header. */
@media (min-width: 821px) {
  body .site-header:has(.mainnav) {
    height: 88px;
    min-height: 88px;
  }
  body .site-header:has(.mainnav) .wf-monogram-frame {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    padding: 4.5px;
  }
  body .site-header:has(.mainnav) .brand.wf-text-brand { gap: 12px; }
  body .site-header:has(.mainnav) .brand.wf-text-brand .wf-full-wordmark {
    font-size: clamp(17.5px, 1.16vw, 20.4px);
  }
}
@media (max-width: 820px) {
  body .site-header:has(.mainnav) {height: 72px;min-height: 72px;}
  body .site-header:has(.mainnav) .wf-monogram-frame {
    width: 37px; height: 37px; flex-basis: 37px;
  }
  body .site-header:has(.mainnav) .brand.wf-text-brand .wf-full-wordmark { font-size: 17px; }
}
@media (max-width: 470px) {
  body .site-header:has(.mainnav) .brand.wf-text-brand .wf-full-wordmark {
    font-size: clamp(14.5px, 3.7vw, 17px);
  }
}

/* Fine reduction of the sticky Foundation navigation, from 88 to 80 px.
   Preserve the original 46px WF frame and serif wordmark sizing on desktop. */
@media (min-width:821px) {
 body .site-header:has(.mainnav) {height:80px; min-height:80px;}
}

/* Whitby Foundation | restoration of approved quieter header lockup.
   Brand artwork, colors, letterforms and raised THE are unchanged.
   Fixes the earlier accidental enlargement in the deployment render. */
@media (min-width: 821px) {
 body .site-header:has(.mainnav) { height:80px; min-height:80px; }
 body .site-header:has(.mainnav) .wf-monogram-frame {
  width:42px; height:42px; flex-basis:42px; padding:4px;
 }
 body .site-header:has(.mainnav) .brand.wf-text-brand {gap:11px;}
 body .site-header:has(.mainnav) .brand.wf-text-brand .wf-full-wordmark {
  font-size:clamp(16.7px,1.05vw,18px);
 }
}

/* Approved Whitby Foundation wordmark detail: underline only the already-raised THE.
   No change to the wordmark font, position, scale, or monogram. */
body .site-header .brand.wf-text-brand .wf-small-the::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25em;
  border-bottom: 1px solid #b18b52;
  pointer-events: none;
}

/* Optical centering only: retain WF frame location, size, stroke, and wordmark.
   The original monogram has more visual mass above its geometric center. */
body .site-header:has(.mainnav) .wf-monogram-frame img {
  transform: translateY(1px);
}