/* ==========================================================================
   Block editor compatibility for the Future Ancestor section.

   The microsite stylesheet is unchanged. Everything here exists only to undo
   what the block editor adds around the markup, so the original design renders
   exactly as it did while the content stays editable as ordinary blocks.
   ========================================================================== */

/* --------------------------------------------------------------- layout ---
   Core wraps the children of a Group block in an extra
   .wp-block-group__inner-container. That wrapper becomes the only child of the
   grid and flex containers, which collapses every multi-column layout into one
   column. Taking it out of the layout tree restores the original structure. */
.ms-page .wp-block-group__inner-container {
  display: contents;
}

/* Core's flow layout adds vertical margins between siblings, which double up
   against the microsite's own spacing scale. */
.ms-page .is-layout-flow > * + * {
  margin-block-start: 0;
}

/* ---------------------------------------------------------------- media ---
   Core wraps every image in a <figure class="wp-block-image">. The microsite
   components expect the <img> to be the direct child of the media box, so the
   figure has to fill that box for the image sizing to resolve. Note this must
   NOT set a height on images generally: five components below manage their own
   height and object-fit, and a blanket height:auto silently breaks them (it
   collapsed the full-bleed overlays). */
.ms-page .wp-block-image {
  margin: 0;
}

.ms-page .wp-block-image img {
  display: block;
  max-width: 100%;
}

.ms-page .ms-hero-split__media .wp-block-image,
.ms-page .ms-banner .wp-block-image,
.ms-page .ms-overlay__media .wp-block-image,
.ms-page .ms-card__media .wp-block-image,
.ms-page .ms-split__media .wp-block-image {
  height: 100%;
}

.ms-page .ms-hero-split__media img,
.ms-page .ms-banner img,
.ms-page .ms-overlay__media img,
.ms-page .ms-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-page .ms-split__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (min-width: 64em) {
  .ms-page .ms-split__media img {
    height: 100%;
  }
}

/* ---------------------------------------------------------------- chrome ---
   The site header is fixed and would sit over the top of the page. On these
   pages the section nav is the one that should follow the reader down, so the
   site header is returned to normal flow (it scrolls away) and the section nav
   takes over the sticky role, exactly as it behaved on the original site. */
/* If the site header is left switched on, it must not be fixed over the page,
   or it covers the section nav. In normal flow it scrolls away and the section
   nav takes over the sticky role. */
body.ms-page #header {
  position: static;
}

.ms-page .ms-header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-top: 0;
}

/* ------------------------------------------------------- child selectors ---
   The microsite constrains its lead text with direct-child selectors
   (.ms-overlay__inner > .ms-body). display: contents removes the block
   wrapper from the layout but not from the DOM, so those selectors no longer
   match and the text runs the full width of the section. These restate them
   without the direct-child requirement. */
.ms-page .ms-overlay__inner .ms-h1,
.ms-page .ms-overlay__inner .ms-body {
  max-width: 32.5rem;
}

/* The hero constrains its lead text only from the desktop breakpoint up, so
   this has to be scoped the same way or the text is narrow on tablets. */
@media (min-width: 64em) {
  .ms-page .ms-hero-split__text .ms-body {
    max-width: 32.5rem;
  }
}

/* ------------------------------------------------------------ typography ---
   The microsite was served standalone, so the main theme's stylesheet never
   loaded against it. Inside WordPress it does, and it adds bottom margins to
   headings and paragraphs (which the microsite zeroes) and overrides the type
   scale. Both change every section's height. These restate the microsite's own
   values, scoped to the section so nothing else on the site is affected. */
.ms-page .ms-main h1,
.ms-page .ms-main h2,
.ms-page .ms-main h3,
.ms-page .ms-main h4,
.ms-page .ms-main p,
.ms-page .ms-main figure {
  margin: 0;
}

.ms-page .ms-main {
  font-size: var(--ms-fs-body);
  line-height: var(--ms-lh-body);
}

.ms-page .ms-main .ms-h1 {
  font-size: var(--ms-fs-h1);
  line-height: var(--ms-lh-h1);
  font-weight: 500;
}

.ms-page .ms-main .ms-h2 {
  font-size: var(--ms-fs-h2);
  line-height: var(--ms-lh-h2);
  font-weight: 400;
}

.ms-page .ms-main .ms-h3 {
  font-size: var(--ms-fs-h3);
  line-height: var(--ms-lh-h3);
  font-weight: 600;
}

.ms-page .ms-main .ms-body {
  font-size: var(--ms-fs-body);
  line-height: var(--ms-lh-body);
}

.ms-page .ms-main .ms-eyebrow {
  font-size: var(--ms-fs-eyebrow);
  line-height: var(--ms-lh-eyebrow);
}

/* The theme's own heading and paragraph rules load after this file and match
   at the same weight, so these repeat the microsite values at a specificity
   the theme cannot outrank. Still scoped to the section only. */
body.ms-page main.ms-main .ms-h1,
body.ms-page main.ms-main .ms-h2,
body.ms-page main.ms-main .ms-h3,
body.ms-page main.ms-main .ms-body,
body.ms-page main.ms-main .ms-eyebrow,
body.ms-page main.ms-main p,
body.ms-page main.ms-main h1,
body.ms-page main.ms-main h2,
body.ms-page main.ms-main h3,
body.ms-page main.ms-main h4 {
  margin: 0;
}

body.ms-page main.ms-main .ms-h1 {
  font-size: var(--ms-fs-h1);
  line-height: var(--ms-lh-h1);
}

body.ms-page main.ms-main .ms-h2 {
  font-size: var(--ms-fs-h2);
  line-height: var(--ms-lh-h2);
}

body.ms-page main.ms-main .ms-body,
body.ms-page main.ms-main p {
  font-size: var(--ms-fs-body);
  line-height: var(--ms-lh-body);
}

/* The theme styles its headings and paragraphs through an ID (#front h2,
   #front p), which outranks any class-based rule. These match that weight so
   the microsite's own type scale wins back, and they stay scoped to the
   section by .ms-main so no other page is affected. */
#front .ms-main .ms-h1,
#front .ms-main .ms-h2,
#front .ms-main .ms-h3,
#front .ms-main .ms-body,
#front .ms-main .ms-eyebrow,
#front .ms-main p,
#front .ms-main h1,
#front .ms-main h2,
#front .ms-main h3,
#front .ms-main h4 {
  margin: 0;
}

#front .ms-main,
#front .ms-main p,
#front .ms-main .ms-body {
  font-size: var(--ms-fs-body);
  line-height: var(--ms-lh-body);
}

#front .ms-main .ms-h1 {
  font-size: var(--ms-fs-h1);
  line-height: var(--ms-lh-h1);
  font-weight: 500;
}

#front .ms-main .ms-h2 {
  font-size: var(--ms-fs-h2);
  line-height: var(--ms-lh-h2);
  font-weight: 400;
}

#front .ms-main .ms-h3 {
  font-size: var(--ms-fs-h3);
  line-height: var(--ms-lh-h3);
  font-weight: 600;
}

#front .ms-main .ms-eyebrow {
  font-size: var(--ms-fs-eyebrow);
  line-height: var(--ms-lh-eyebrow);
}

/* The generic paragraph rule above would also flatten the components that set
   their own type (a stat number is a paragraph in block markup, not a span),
   so each of those is restated here at the same weight. */
#front .ms-main .ms-stat__number {
  font-family: var(--ms-font-serif);
  font-size: var(--ms-fs-h1);
  line-height: var(--ms-lh-h1);
  font-weight: 500;
  color: var(--ms-color-secondary);
}

#front .ms-main .ms-stat__caption {
  font-size: var(--ms-fs-body);
  max-width: 18.75rem;
}

#front .ms-main .ms-pillar__number {
  font-family: var(--ms-font-serif);
  font-size: var(--ms-fs-h2);
  line-height: var(--ms-lh-h2);
  font-weight: 400;
  color: var(--ms-color-primary);
}

#front .ms-main .ms-pillar__subheading {
  font-family: var(--ms-font-sans);
  font-weight: 600;
}

#front .ms-main .ms-card__title {
  font-family: var(--ms-font-sans);
  font-size: var(--ms-fs-h3);
  line-height: var(--ms-lh-h3);
  font-weight: 600;
}

#front .ms-main .ms-card__date {
  font-size: var(--ms-fs-eyebrow);
}

/* Spacing the microsite sets on specific elements, which the blanket margin
   reset above would otherwise remove. */
#front .ms-main .ms-stats__heading {
  margin-bottom: var(--ms-space-l);
}

@media (min-width: 64em) {
  #front .ms-main .ms-stats__heading {
    margin-bottom: var(--ms-space-xl);
  }
}

#front .ms-main .ms-prose__heading {
  margin-bottom: var(--ms-space-l);
}

/* ----------------------------------------------------------------- fonts ---
   The theme registers its own @font-face for "Inter" with different metrics,
   so text set in the microsite's Inter wrapped onto extra lines and every
   section grew. The section's own faces are renamed (fonts.css) so the two
   cannot collide, and the tokens point at the renamed families here. */
.ms-page {
  --ms-font-sans: "MS Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ms-font-serif: "MS EB Garamond", Georgia, "Times New Roman", serif;
}

#front .ms-main,
#front .ms-main p,
#front .ms-main .ms-body,
#front .ms-main .ms-eyebrow,
#front .ms-main .ms-card__title,
#front .ms-main .ms-card__excerpt,
#front .ms-main .ms-card__date {
  font-family: var(--ms-font-sans);
}

#front .ms-main .ms-h1,
#front .ms-main .ms-h2,
#front .ms-main h1,
#front .ms-main h2,
#front .ms-main .ms-stat__number,
#front .ms-main .ms-pillar__number {
  font-family: var(--ms-font-serif);
}

/* ------------------------------------------------- colour and section nav ---
   The theme sets its own body colour, heading colour and heading
   letter-spacing, and its font stack reaches the section nav and wrappers
   (which sit outside .ms-main). These restore the microsite's own values.
   Component colours are restated afterwards so they still win: the overlays
   are white on photography, eyebrows use the accent, and so on. */
#front .ms-main,
.ms-page .ms-main,
.ms-page .ms-header,
.ms-page .ms-header .ms-wrapper,
.ms-page .ms-nav__list {
  font-family: var(--ms-font-sans);
  line-height: var(--ms-lh-body);
  color: var(--ms-color-text);
}

.ms-page .ms-header .ms-logo__name {
  font-family: var(--ms-font-serif);
}

.ms-page .ms-nav__list a,
.ms-page .ms-nav__get-involved {
  font-family: var(--ms-font-sans);
  line-height: var(--ms-lh-eyebrow);
  color: var(--ms-color-primary);
}

.ms-page .ms-nav__list a[aria-current="page"] {
  color: var(--ms-color-secondary);
}

#front .ms-main .ms-h1,
#front .ms-main .ms-h2,
#front .ms-main .ms-h3,
#front .ms-main h1,
#front .ms-main h2,
#front .ms-main h3,
#front .ms-main h4 {
  color: inherit;
  letter-spacing: normal;
}

/* Component colours, restated so they outrank the section default above. */
#front .ms-main .ms-overlay,
#front .ms-main .ms-overlay .ms-h1,
#front .ms-main .ms-overlay .ms-h2,
#front .ms-main .ms-overlay .ms-body,
#front .ms-main .ms-overlay .ms-eyebrow {
  color: var(--ms-color-white);
}

#front .ms-main .ms-eyebrow {
  color: var(--ms-color-secondary);
}

#front .ms-main .ms-overlay .ms-eyebrow {
  color: var(--ms-color-white);
}

#front .ms-main .ms-stat__number {
  color: var(--ms-color-secondary);
}

#front .ms-main .ms-pillar__number,
#front .ms-main .ms-card {
  color: var(--ms-color-primary);
}

#front .ms-main .ms-btn {
  color: var(--ms-color-white);
  font-family: var(--ms-font-sans);
}

#front .ms-main .ms-link-cta--accent {
  color: var(--ms-color-secondary);
}

/* The section nav and colophon sit outside .ms-main, so they need the same
   type treatment or they inherit the theme's 18px/27px instead of the
   microsite's 20px/30px. Nav links keep the unitless line-height so they
   scale from their own font-size, exactly as the original did. */
.ms-page .ms-header,
.ms-page .ms-header .ms-wrapper,
.ms-page .ms-nav__list,
.ms-page .ms-colophon,
.ms-page .ms-colophon .ms-wrapper {
  font-family: var(--ms-font-sans);
  font-size: var(--ms-fs-body);
  line-height: var(--ms-lh-body);
  color: var(--ms-color-text);
}

.ms-page .ms-nav__list a,
.ms-page .ms-nav__get-involved {
  font-size: var(--ms-fs-eyebrow);
  line-height: var(--ms-lh-body);
}

.ms-page .ms-colophon__inner {
  font-size: 0.875rem;
}

/* The theme wraps everything in #sb-site with overflow:hidden, which silently
   disables position:sticky for anything inside it, so the section nav scrolled
   away instead of following the reader. These pages have no horizontal
   overflow, so the clip is not needed here. */
body.ms-page #sb-site,
body.ms-page #sb-site-inner,
body.ms-page #page {
  /* The theme's slide-out menu script sets this inline, so it needs !important
     to be cleared. Scoped to the section, so the rest of the site keeps it. */
  overflow: visible !important;
}

.ms-page .ms-header {
  z-index: 30;
  position: sticky !important;
  top: 0;
}

/* Block markup needs a paragraph to hold a link, but the original had the
   button as a direct child of the flex column, so the wrapper is taken out of
   the layout to keep the spacing identical. */
.ms-page .ms-btn-wrap {
  display: contents;
}

/* The colophon sits outside .ms-main and was inheriting the theme's larger
   type, which made it taller than the original. */
.ms-page .ms-colophon__inner,
.ms-page .ms-colophon__inner p {
  font-size: 0.875rem;
  line-height: var(--ms-lh-body);
  margin: 0;
}

/* The nav list is a row of links on desktop; the theme's list styles were
   adding height to it. */
.ms-page .ms-nav__list,
.ms-page .ms-nav__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Spacing the microsite sets on the footer contact block, which the blanket
   margin reset above would otherwise remove. */
#front .ms-main .ms-cta-footer__contact,
.ms-page .ms-cta-footer__contact {
  margin-top: var(--ms-space-s);
  padding-top: var(--ms-space-m);
}

/* ----------------------------------------------------------------- video ---
   A media slot can hold a video instead of a photograph. The video block needs
   the same sizing the image gets, or it sits at its own natural size and
   breaks the split layout. */
.ms-page .ms-split__media .wp-block-video,
.ms-page .ms-hero-split__media .wp-block-video,
.ms-page .ms-overlay__media .wp-block-video,
.ms-page .ms-banner .wp-block-video {
  height: 100%;
  margin: 0;
}

.ms-page .ms-split__media video,
.ms-page .ms-hero-split__media video,
.ms-page .ms-overlay__media video,
.ms-page .ms-banner video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* An embedded video (YouTube or Vimeo) keeps a 16:9 shape in the slot.
   The consent plugin swaps the iframe for a placeholder and sets a height on
   it to match the surrounding box, which stretched the video out of shape.
   Pinning the aspect ratio here keeps it correct whether the real embed or the
   placeholder is showing. */
.ms-page .ms-split__media .wp-block-embed,
.ms-page .ms-split__media figure.wp-block-embed {
  margin: 0;
  width: 100%;
  align-self: center;
}

.ms-page .ms-split__media .wp-block-embed__wrapper {
  position: relative;
  padding-top: 0;
  aspect-ratio: 16 / 9;
  height: auto !important;
  overflow: hidden;
}

.ms-page .ms-split__media .wp-block-embed__wrapper > iframe,
.ms-page .ms-split__media .wp-block-embed__wrapper > .cmplz-placeholder-element {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* A media slot holding a video does not need the tall minimum a photograph
   uses, so the video sits at its natural shape rather than being stretched. */
.ms-page .ms-split__media:has(.wp-block-embed) {
  min-height: 0;
  align-self: center;
}

/* ----------------------------------------------------------------- brand ---
   The section name and the studio logo sit together at the top left. The name
   goes to the section home, the logo goes to the main site, which is what a
   visitor expects a logo to do. */
.ms-page .ms-brand {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.ms-page .ms-logo__studio {
  display: block;
  line-height: 0;
}

.ms-page .ms-logo__studio img {
  display: block;
  width: auto;
  height: 26px;
  max-width: 190px;
  object-fit: contain;
}

@media (min-width: 48em) {
  .ms-page .ms-logo__studio img {
    height: 32px;
    max-width: 230px;
  }
}