/* ==========================================================================
   Martin & Maurizio — motion and art direction
   Scroll-driven CSS. No JavaScript, no library, no page-weight cost.
   Everything degrades to a static page where unsupported, and is
   switched off entirely for prefers-reduced-motion.
   ========================================================================== */

/* Site title is printed by Kadence's header; the Logo Layout control that
   would hide it does not render in this build, so it is hidden here. */
.site-branding .site-title-wrap { display: none; }

/* --------------------------------------------------------------------------
   1. Reveal on entry
   Sections rise and fade as they come into view, then settle.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .mm-reveal {
      animation: mm-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }

    @keyframes mm-rise {
      from { opacity: 0; transform: translateY(46px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ----------------------------------------------------------------------
       2. Parallax on the cut-out figures
       The figures drift upward slightly faster than the page, so they
       lift out of the type as you scroll — the Norris/Kalkbrenner feel.
       ---------------------------------------------------------------------- */
    .mm-parallax {
      animation: mm-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    @keyframes mm-drift {
      from { transform: translateY(58px) scale(1.015); }
      to   { transform: translateY(-58px) scale(1.015); }
    }

    /* Slower counter-drift for the name behind them, so the two layers
       separate as you scroll. */
    .mm-parallax-slow {
      animation: mm-drift-slow linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    @keyframes mm-drift-slow {
      from { transform: translateY(-22px); }
      to   { transform: translateY(22px); }
    }
  }
}

/* --------------------------------------------------------------------------
   3. Colour plates — the figure lifts on hover
   -------------------------------------------------------------------------- */
.mm-plate { overflow: hidden; }

.mm-plate .kt-inside-inner-col { will-change: transform; }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .mm-plate {
    transition: background-color .5s cubic-bezier(.22,.61,.36,1);
  }
  .mm-plate,
  .mm-plate > .kt-inside-inner-col {
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .mm-plate:hover {
    background-size: auto 104% !important;
    background-position: center bottom !important;
  }
}

/* --------------------------------------------------------------------------
   4. Type — the hero name
   Tighter tracking, no orphan gaps, and it holds together down to phone.
   -------------------------------------------------------------------------- */
.mm-hero-name .kt-adv-heading-inner,
.mm-hero-name { text-wrap: balance; }

/* --------------------------------------------------------------------------
   5. Retire the template tells
   Rounded corners and drop shadows read as stock; the art direction is
   hard-edged throughout.
   -------------------------------------------------------------------------- */
.mm-flat img,
.mm-flat .kadence-column,
.mm-flat .wp-block-kadence-image { border-radius: 0 !important; box-shadow: none !important; }

/* --------------------------------------------------------------------------
   6. Focus states — visible, and in the brand accent
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.wp-block-kadence-advancedheading a:focus-visible {
  outline: 2px solid #C98F3F;
  outline-offset: 3px;
  border-radius: 0;
}


/* --------------------------------------------------------------------------
   8. Page transitions — native View Transitions API
   Replaces the Kadence Page Transitions plugin, which forced 1.6s of
   animation plus a spinner on every click. This is browser-native:
   no JavaScript, no plugin, and it never delays the navigation itself.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: mm-vt-out .22s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: mm-vt-in .30s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes mm-vt-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mm-vt-in  { from { opacity: 0; transform: translateY(10px); }
                       to   { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --------------------------------------------------------------------------
   9. Hero stage — pinned while the photograph clears and the name rises
   The row is 280vh tall and supplies a scroll timeline; its inner wrapper
   sticks to the top for 100vh, so everything below happens in place while
   the visitor scrolls. Falls back to a normal static hero where
   scroll-driven animation is unsupported, and under reduced-motion.
   -------------------------------------------------------------------------- */
.mm-hero-copy .w { display: inline-block; will-change: transform, opacity; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .mm-stage {
      height: 190vh;
      view-timeline-name: --stage;
      view-timeline-axis: block;
      position: relative;
    }
    .mm-stage > .kt-row-column-wrap {
      position: sticky; top: 0;
      height: 100vh;
      overflow: clip;
      display: flex;
    }
    .mm-hero { height: 100vh; width: 100%; position: relative; }
    .mm-hero > .kt-inside-inner-col { height: 100%; position: relative; }

    .mm-hero-media {
      position: absolute; inset: 0;
      padding: 0 !important; margin: 0 !important;
      animation: mm-photo-clear linear both;
      animation-timeline: --stage;
      animation-range: contain 2% contain 38%;
    }
    @keyframes mm-photo-clear {
      from { opacity: 1; transform: scale(1); }
      to   { opacity: 0; transform: scale(1.14); }
    }

    .mm-hero-copy {
      position: absolute; left: 0; right: 0; bottom: 9vh;
      margin: 0 !important;
    }

    /* Words rise one after another, driven by the same scroll. */
    .mm-hero-copy .w {
      animation: mm-word-rise linear both;
      animation-timeline: --stage;
    }
    @keyframes mm-word-rise {
      from { opacity: 0; transform: translateY(.85em); filter: blur(4px); }
      to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
    }

    .mm-hero-copy .w-0 { animation-range: contain 18% contain 30%; }
    .mm-hero-copy .w-1 { animation-range: contain 21% contain 33%; }
    .mm-hero-copy .w-2 { animation-range: contain 24% contain 36%; }
    .mm-hero-copy .w-3 { animation-range: contain 27% contain 39%; }
    .mm-hero-copy .w-4 { animation-range: contain 30% contain 42%; }
    .mm-hero-copy .w-5 { animation-range: contain 33% contain 45%; }
    .mm-hero-copy .w-6 { animation-range: contain 36% contain 48%; }
    .mm-hero-copy .w-7 { animation-range: contain 39% contain 51%; }
    .mm-hero-copy .w-8 { animation-range: contain 42% contain 54%; }
    .mm-hero-copy .w-9 { animation-range: contain 45% contain 57%; }

    /* The scrim is only wanted once the photograph is gone. */
    .mm-hero-media::after {
      animation: mm-scrim-out linear both;
      animation-timeline: --stage;
      animation-range: contain 2% contain 30%;
    }
    @keyframes mm-scrim-out { from { opacity: 1; } to { opacity: .2; } }
  }
}

@media (max-width: 767px) {
  @supports (animation-timeline: view()) { .mm-stage { height: 165vh; } }
}

/* --------------------------------------------------------------------------
   10. Transparent header — the hero reads as one uninterrupted image
   Kadence clears #masthead itself, but the inner row containers keep their
   own background; those have to go too, on transparent-header pages only.
   Pages with pale heroes (Agenda, Gallery) keep the solid header.
   -------------------------------------------------------------------------- */
body.transparent-header #masthead,
body.transparent-header #masthead .site-header-row-container,
body.transparent-header #masthead .site-header-row-container-inner,
body.transparent-header #masthead .site-header-main-section-left,
body.transparent-header #masthead .site-top-header-wrap,
body.transparent-header #masthead .site-main-header-wrap {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Kadence reserves the header's height on .content-area. On transparent-header
   pages that gap shows the page background through the header, so the hero
   never reaches the top. Reclaim it, and pad the hero copy back down so the
   name never sits under the navigation. */
body.mm-hero-page .content-area { margin-top: 0 !important; }
body.mm-hero-page .mm-hero > .kt-inside-inner-col { padding-top: 0; }

/* Nav sits over photography, so give it a little lift for legibility. */
body.transparent-header #masthead .header-navigation a,
body.transparent-header #masthead .site-branding img {
  text-shadow: 0 1px 14px rgba(18,16,15,.45);
}
body.transparent-header #masthead .site-branding img {
  filter: drop-shadow(0 2px 10px rgba(18,16,15,.35));
}

/* Once stuck, the header takes a solid ground again so it stays readable. */
body.transparent-header #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start)
  > .site-header-row-container-inner {
  background: rgba(18,16,15,.92) !important;
  backdrop-filter: saturate(140%) blur(8px);
}

/* --------------------------------------------------------------------------
   11. Film — pinned; the title rises, then the frame opens out
   Same scroll-driven language as the hero, deliberately a different move,
   so the page does not repeat one trick.
   -------------------------------------------------------------------------- */
.mm-film-copy .w { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .mm-film {
      height: 210vh;
      view-timeline-name: --film;
      view-timeline-axis: block;
      position: relative;
    }
    .mm-film > .kt-row-column-wrap {
      position: sticky; top: 0;
      min-height: 100vh;
      align-content: center;   /* centres the grid rows; does NOT replace the grid */
      overflow: clip;
    }

    .mm-film-copy .w {
      animation: mm-word-rise linear both;
      animation-timeline: --film;
    }

    /* The frame opens from the centre once the words have landed. */
    .mm-film-frame .wp-block-kadence-videopopup {
      animation: mm-frame-open linear both;
      animation-timeline: --film;
      animation-range: contain 12% contain 48%;
      will-change: clip-path, transform, opacity;
    }
    @keyframes mm-frame-open {
      from { opacity: 0; transform: translateY(28px) scale(.94); clip-path: inset(14% 18% 14% 18%); }
      to   { opacity: 1; transform: translateY(0)    scale(1);   clip-path: inset(0 0 0 0); }
    }
  }
}

@media (max-width: 767px) {
  @supports (animation-timeline: view()) { .mm-film { height: 180vh; } }
}

/* Copy column sits with the frame, not above it; stacks under it on phones. */
@media (max-width: 767px) {
  .mm-film-copy .kt-inside-inner-col { text-align: center; }
}

/* --------------------------------------------------------------------------
   11. Film — the title arrives large and centred, then the film opens
   beneath it. Both sit in the middle of a pinned stage; the type lifts a
   little as the frame comes in so the pair stays optically centred.
   -------------------------------------------------------------------------- */
.mm-film-copy .w { display: inline-block; }
.mm-film > .kt-row-column-wrap { align-content: center; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .mm-film {
      height: 175vh;
      view-timeline-name: --film;
      view-timeline-axis: block;
      position: relative;
    }
    .mm-film > .kt-row-column-wrap {
      position: sticky; top: 0;
      min-height: 100vh;
      align-content: center;
      overflow: clip;
    }

    /* 1 — the words arrive, one after another */
    .mm-film-copy .w {
      animation: mm-word-rise linear both;
      animation-timeline: --film;
    }

    .mm-film-copy .w-0 { animation-range: contain 0% contain 11%; }
    .mm-film-copy .w-1 { animation-range: contain 2% contain 13%; }
    .mm-film-copy .w-2 { animation-range: contain 4% contain 15%; }
    .mm-film-copy .w-3 { animation-range: contain 6% contain 17%; }
    .mm-film-copy .w-4 { animation-range: contain 8% contain 19%; }
    .mm-film-copy .w-5 { animation-range: contain 10% contain 21%; }
    .mm-film-copy .w-6 { animation-range: contain 12% contain 23%; }
    .mm-film-copy .w-7 { animation-range: contain 14% contain 25%; }
    .mm-film-copy .w-8 { animation-range: contain 16% contain 27%; }
    .mm-film-copy .w-9 { animation-range: contain 18% contain 29%; }
    .mm-film-copy .w-10 { animation-range: contain 20% contain 31%; }
    .mm-film-copy .w-11 { animation-range: contain 22% contain 33%; }

    /* 2 — the whole title lifts to make room, once the words have landed */
    .mm-film-copy {
      animation: mm-title-lift linear both;
      animation-timeline: --film;
      animation-range: contain 22% contain 40%;
    }
    @keyframes mm-title-lift {
      from { transform: translateY(11vh); }
      to   { transform: translateY(0); }
    }

    /* 3 — the film opens beneath it */
    .mm-film-frame {
      animation: mm-frame-open linear both;
      animation-timeline: --film;
      animation-range: contain 26% contain 52%;
      will-change: clip-path, transform, opacity;
    }
    @keyframes mm-frame-open {
      from { opacity: 0; transform: translateY(34px) scale(.95); clip-path: inset(16% 20% 16% 20%); }
      to   { opacity: 1; transform: translateY(0)    scale(1);   clip-path: inset(0 0 0 0); }
    }
  }
}

@media (max-width: 767px) {
  @supports (animation-timeline: view()) { .mm-film { height: 150vh; } }
}

/* --------------------------------------------------------------------------
   12. Their own words — pinned, revealed a line at a time
   -------------------------------------------------------------------------- */
.mm-words-copy .ln { display: inline-block; }
.mm-words > .kt-row-column-wrap { align-content: center; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mm-words {
      height: 185vh;
      view-timeline-name: --words;
      view-timeline-axis: block;
      position: relative;
    }
    .mm-words > .kt-row-column-wrap {
      position: sticky; top: 0;
      min-height: 100vh;
      align-content: center;
      overflow: clip;
    }
    .mm-words-media {
      animation: mm-words-drift linear both;
      animation-timeline: --words;
      animation-range: entry 0% exit 100%;
    }
    @keyframes mm-words-drift {
      from { transform: scale(1.10) translateY(3%); }
      to   { transform: scale(1.10) translateY(-3%); }
    }
    .mm-words-copy .ln {
      animation: mm-line-rise linear both;
      animation-timeline: --words;
    }
    @keyframes mm-line-rise {
      from { opacity: 0; transform: translateY(.5em); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .mm-words-copy .ln-0 { animation-range: contain  6% contain 20%; }
    .mm-words-copy .ln-1 { animation-range: contain 13% contain 27%; }
    .mm-words-copy .ln-2 { animation-range: contain 20% contain 34%; }
    .mm-words-copy .ln-3 { animation-range: contain 27% contain 41%; }
    .mm-words-copy .ln-4 { animation-range: contain 34% contain 48%; }
    .mm-words-copy .ln-5 { animation-range: contain 41% contain 55%; }
  }
}

/* --------------------------------------------------------------------------
   13. Selected work — photographs travel sideways as the page scrolls down
   The one genuinely different axis in the motion language.
   -------------------------------------------------------------------------- */
/* Kadence sets flex-direction:column on every .kt-inside-inner-col, and paints
   a column's background image on that inner element rather than on the column
   itself. So the track must be forced to a row, and each shot's inner element
   must fill its column or the photograph has nowhere to show. */
.mm-strip-track > .kt-inside-inner-col {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 20px;
  width: max-content;
}
.mm-shot > .kt-inside-inner-col {
  width: 100%;
  height: 100%;
}
.mm-shot {
  flex: 0 0 auto;
  width: 30vw;
  aspect-ratio: 3 / 4;
}
.mm-shot:nth-child(even) { width: 38vw; aspect-ratio: 4 / 3; }

@media (max-width: 767px) {
  .mm-shot { width: 68vw; }
  .mm-shot:nth-child(even) { width: 78vw; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mm-strip {
      height: 300vh;
      view-timeline-name: --strip;
      view-timeline-axis: block;
      position: relative;
    }
    .mm-strip > .kt-row-column-wrap {
      position: sticky; top: 0;
      min-height: 100vh;
      align-content: center;
      overflow: clip;
    }
    .mm-strip-track > .kt-inside-inner-col {
      animation: mm-pan linear both;
      animation-timeline: --strip;
      animation-range: contain 0% contain 100%;
      will-change: transform;
    }
    @keyframes mm-pan {
      from { transform: translateX(4vw); }
      to   { transform: translateX(calc(-100% + 88vw)); }
    }
  }
}

/* Without scroll-timeline support the strip simply scrolls sideways by hand. */
@supports not (animation-timeline: view()) {
  .mm-strip > .kt-row-column-wrap { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   14. Season and contact
   -------------------------------------------------------------------------- */
.mm-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(201,143,63,.5); }
.mm-contact a:hover { color: #C98F3F; border-bottom-color: #C98F3F; }

/* --------------------------------------------------------------------------
   15. Footer — Navigate / The 2026 season / Booking, on ink
   Authored as HTML widgets so the type is controlled here rather than by
   Kadence's widget styling. Mobile-first: single column, then three.
   -------------------------------------------------------------------------- */
.mmf { display: flex; flex-direction: column; gap: 14px; }

.mmf-h {
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: #C98F3F;
  margin: 0 0 2px;
}

.mmf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mmf-list a { color: #EFE9DF; text-decoration: none; font-size: 15px; }
.mmf-list a:hover { color: #C98F3F; }

.mmf-cities { margin: 0; color: #C2B8AD; font-size: 14px; line-height: 1.75; }

.mmf-small { margin: 4px 0 0; font-size: 13px; }
.mmf-small a { color: #9A9088; text-decoration: none; border-bottom: 1px solid rgba(154,144,136,.4); }
.mmf-small a:hover { color: #C98F3F; border-bottom-color: #C98F3F; }

.mmf-mail { margin: 0; }
.mmf-mail a {
  color: #EFE9DF; text-decoration: none;
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.35;
  border-bottom: 1px solid rgba(201,143,63,.5);
  word-break: break-word;          /* never overflows a narrow column */
}
.mmf-mail a:hover { color: #C98F3F; border-bottom-color: #C98F3F; }

/* Kadence's own footer chrome, brought onto the ink ground */
.site-footer .site-footer-wrap,
.site-middle-footer-inner-wrap,
.site-bottom-footer-inner-wrap { background: transparent; }
.site-footer .widget-title { display: none; }   /* titles live inside .mmf */
.site-bottom-footer-inner-wrap { font-size: 13px; color: #9A9088; }

/* --- responsive ------------------------------------------------------- */
/* Kadence stacks the three columns itself below its tablet breakpoint;
   these rules keep the rhythm sane at each size rather than relying on it. */
@media (max-width: 1024px) {
  .mmf-cities { font-size: 13.5px; }
}
@media (max-width: 767px) {
  .site-middle-footer-inner-wrap { text-align: left; }
  .mmf { gap: 12px; }
  .mmf-mail a { font-size: 17px; }
  .mmf-cities { line-height: 1.8; }
  /* the bottom bar reads as two stacked lines, centred, on a phone */
  .site-bottom-footer-inner-wrap { text-align: center; }
}

/* ==========================================================================
   16. Responsive corrections
   Verified at a true 390 / 768 / 1440 viewport (CDP device-metrics override,
   not --window-size, which macOS clamps to a 500px minimum).
   Three of these are defects at every width, not only on a phone.
   ========================================================================== */

/* --- 16.1 The hero photograph fills the viewport at every width -----------
   Kadence paints a column's background image on .kt-inside-inner-col, and the
   height of that element was being set by a padding-top fixed in pixels
   (540px). Inside a 100vh stage that leaves a black strip under the photo:
   ~90px at 1440, but 36% of the first screen on a phone. The painting element
   should simply fill the box it sits in — the same fix already used on
   .mm-shot in section 13. */
.mm-hero-media > .kt-inside-inner-col {
  padding: 0 !important;
  height: 100% !important;
  width: 100%;
  align-self: stretch;
}

/* --- 16.2 No pale band between the content and the footer -----------------
   Kadence puts margin-bottom: 80px on .content-area. On a near-black page the
   body's pale ground (#EFF5F5) shows through it as a light stripe. Scoped to
   transparent-header pages so the pale pages (Agenda, Gallery) are untouched. */
body.mm-hero-page .content-area { margin-bottom: 0 !important; }
body.mm-hero-page,
body.mm-hero-page .site.wp-site-blocks { background-color: #12100F; }

/* --- 16.3 Selected work reads at phone size -------------------------------
   At 68vw a photograph is 265px wide inside an 844px panel — mostly air.
   The strip is the one section where the image should dominate. */
@media (max-width: 767px) {
  .mm-shot { width: 82vw; }
  .mm-shot:nth-child(even) { width: 90vw; }
  .mm-strip-track > .kt-inside-inner-col { gap: 14px; }
}

/* --- 16.4 The quotation reads as sentences on a phone ---------------------
   Each .ln is an authored line that drives its own animation range. At 390
   most of them wrap, and without separation a wrapped line is indistinguishable
   from the next sentence. Give the lines air and hang the continuation. */
@media (max-width: 767px) {
  .mm-words-copy .ln {
    display: block;
    margin-bottom: .5em;
    padding-left: 1em;
    text-indent: -1em;   /* wrapped lines indent, so sentence starts stay flush */
  }
}

/* --- 16.5 The footer keeps its designed alignment below the desktop --------
   Kadence's footer sections are flex containers whose own alignment setting
   centres their content; text-align alone cannot override that. Left is the
   designed reading, and 768px still has room for the three columns. */
@media (max-width: 1023px) {
  .site-middle-footer-inner-wrap .footer-widget-area,
  .site-middle-footer-inner-wrap .footer-widget-area-inner,
  .site-middle-footer-inner-wrap .widget {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .site-middle-footer-inner-wrap {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0 32px !important;
  }
}

/* --- 16.6 Footer list items align with their heading ----------------------
   Kadence's widget styling indents list items; in a three-column footer that
   8px break between "NAVIGATE" and "Home" is visible as a misalignment. */
.site-footer .mmf-list,
.site-footer .mmf-list li { padding-left: 0 !important; margin-left: 0 !important; }

/* ==========================================================================
   17. Gallery — photographer bands
   The page is four photographers, each on its own ground: ink for the dark
   theatrical sets, cream for the pale studio ones, gold for the one band
   that asks the visitor to do something.
   ========================================================================== */

/* Nothing in the art direction is rounded or shadowed; Kadence's gallery
   applies both by default. */
.wp-block-kadence-advancedgallery img,
.wp-block-kadence-advancedgallery .kadence-blocks-gallery-item {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The booking link on the gold band. The site's other links underline in
   gold, which is invisible here, so it underlines in the dark ink instead. */
.mm-book a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 26, 12, .45);
  word-break: break-word;
}
.mm-book a:hover { border-bottom-color: #231A0C; }
.mm-book a:focus-visible { outline-color: #231A0C; }

/* ==========================================================================
   18. Transparent header — legibility scrim
   The transparent header is now a global setting: every page gets it, and
   pages inherit it with no per-page meta at all. That means the navigation
   prints #F7F1E6 over whatever the page starts with — a light ochre
   photograph on Home, and a pale ground on Agenda, Privacy and the two
   social pages. Bone on either fails 4.5:1 badly.

   A short gradient gives the type something to sit on without putting a
   solid bar back. It fades out well before any content, so on a dark hero
   it is invisible and on a pale page it reads as a soft vignette.
   ========================================================================== */

/* NB: do NOT set position on #masthead here. Kadence's transparent header
   takes the header out of the flow (position: absolute) so the hero can reach
   the top of the viewport. Forcing position: relative puts it back in the
   flow and pushes every hero down by the header's height. The ::before below
   anchors to #masthead correctly without it. */

body.transparent-header #masthead::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  background: linear-gradient(
    to bottom,
    rgba(18, 16, 15, .60) 0%,
    rgba(18, 16, 15, .34) 42%,
    rgba(18, 16, 15, 0)  100%
  );
  pointer-events: none;
  z-index: 0;
}

/* The header's own rows must sit above the scrim. */
body.transparent-header #masthead .site-header-row-container,
body.transparent-header #masthead .site-header-upper-wrap,
body.transparent-header #masthead .site-header-inner-wrap {
  position: relative;
  z-index: 1;
}

/* Nothing is needed for the stuck header. Kadence's sticky class lands on
   .site-main-header-wrap, never on #masthead, and the header is set to reveal
   on scroll-up only — so by the time it returns, #masthead and its scrim have
   scrolled away entirely. Verified 11 Sep: at scrollY 1500 #masthead sits at
   top -1500, wholly off screen. */


/* --------------------------------------------------------------------------
   19. Ordinary content pages under a global transparent header
   The header is transparent everywhere now. A page with no hero has nothing
   for it to be transparent over, so it gets a solid ink band of exactly the
   header's height. The navigation then looks identical on every page, and the
   page's own content starts cleanly below it instead of sliding underneath.
   -------------------------------------------------------------------------- */

body.transparent-header:not(.mm-hero-page) .site.wp-site-blocks { position: relative; }

body.transparent-header:not(.mm-hero-page) .site.wp-site-blocks::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--mm-header-h, 80px);
  background: #12100F;
  z-index: 0;
}

/* Push the page's own content clear of that band. */
body.transparent-header:not(.mm-hero-page) .content-area {
  margin-top: 0 !important;
  padding-top: var(--mm-header-h, 80px);
  position: relative;
  z-index: 1;
}

/* The scrim is only wanted where the header sits on a photograph. Over the
   solid band it would just darken one edge of it. */
body.transparent-header:not(.mm-hero-page) #masthead::before { display: none; }

/* ---------------------------------------------------------------------------
   20. Agenda — an empty section takes its heading with it

   Logic spec L13: a section with nothing to show removes itself entirely,
   heading included. The plugin decides WHICH events belong in each list; what a
   list with nothing in it should look like is appearance, so it is settled here.

   Kadence always prints the list's wrapper, even with no results, so an empty
   archive would otherwise leave "Archived events" standing over nothing.

   :has() is the whole mechanism, so it is guarded — a browser without it shows
   the empty heading rather than hiding the wrong thing.
   --------------------------------------------------------------------------- */
@supports selector(:has(*)) {
  /* Kadence writes data-max-num-pages="0" on a list that found nothing — a
     plain fact about the list, already in the markup, so nothing has to be
     added to the page to make this work. Note that :has() cannot be nested
     inside :has(), which is why this reads the attribute rather than asking
     whether any items are present. */
  .wp-block-kadence-query:has(.wp-block-kadence-query-card[data-max-num-pages="0"]),
  .wp-block-kadence-advancedheading:has(+ .wp-block-kadence-query .wp-block-kadence-query-card[data-max-num-pages="0"]) {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   21. Agenda 2026 — a faithful copy of the live page

   THIS IS THE OLD DESIGN, ON PURPOSE. Slate band, black cards, the live site's
   colours and proportions. It does not follow the new art direction and is not
   meant to: it exists so the two can be held side by side and compared.

   Everything is scoped under .mm-agenda-classic and body.mm-ac-page. Nothing
   here can reach the rest of the site, and the whole section can be deleted in
   one piece if the new design wins.

   Colours sampled from the live screenshot, not guessed:
     page ground  #EEF4F4      band  #3B4141      card  #000000
   --------------------------------------------------------------------------- */

body.mm-ac-page .content-area,
body.mm-ac-page .site-container { background: #EEF4F4; }

/* The band. Inset to ~72% of the viewport, as measured off the live page. */
.mm-agenda-classic {
  background: #3B4141;
  max-width: 72vw;
  margin: 0 auto;
  padding: 3.2rem 0 5rem;
}

.mm-agenda-classic .mm-ac-title {
  color: #fff;
  text-align: center;
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;          /* the live page does not capitalise this */
  margin: 0 0 3.5rem;
}

/* One block = a photograph and a black card, overlapping.
   Two columns of a grid, with the card pulled over the photo's inner edge.

   ⚠ The grid goes on .wp-block-group__inner-container, NOT on the group itself.
   WordPress puts that wrapper between a group and its children, so a grid set on
   the group has exactly one item and the two halves stack instead of sitting
   side by side. Found by reading the rendered HTML, not by guessing. */
.mm-agenda-classic .mm-ac-block {
  margin: 0 0 5.5rem;
  padding: 0 2.2rem;
  max-width: none;   /* the outer group is a constrained layout; opt out */
}
.mm-agenda-classic .mm-ac-block > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;   /* both halves take the row's full height */
}
.mm-agenda-classic .mm-ac-block:last-child { margin-bottom: 0; }

/* On the live page the card's own content sets the height and the photograph
   matches it — the photo is taller only by the card's top and bottom inset.
   So the row is sized by the card, the figure stretches to it, and object-fit
   crops whatever the original photograph happens to be.

   Do NOT reach for aspect-ratio plus max-height here: capping the height also
   caps the width (the ratio is preserved), the figure narrows, and the overlap
   silently disappears. */
.mm-agenda-classic .mm-ac-photo {
  margin: 0;
  grid-row: 1;
  min-height: 26rem;   /* a month with one date still gets a real photograph */
}
.mm-agenda-classic .mm-ac-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The card is inset top and bottom, so the photograph shows above and below it. */
.mm-agenda-classic .mm-ac-card {
  grid-row: 1;
  background: #000;
  padding: 2.6rem 2.4rem 3rem;
  z-index: 2;
  margin: 1.1rem 0;
}

/* Photograph left, card right — the card starts a little before the photo ends. */
.mm-agenda-classic .mm-ac-photo-left .mm-ac-photo { grid-column: 1; margin-right: -4rem; }
.mm-agenda-classic .mm-ac-photo-left .mm-ac-card  { grid-column: 2; }

/* Reversed. The card is first in the markup order so it lands on the left. */
.mm-agenda-classic .mm-ac-photo-right .mm-ac-photo { grid-column: 2; margin-left: -4rem; }
.mm-agenda-classic .mm-ac-photo-right .mm-ac-card  { grid-column: 1; }

.mm-agenda-classic .mm-ac-month {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: none;
  margin: 1.6rem 0 1rem;
}
.mm-agenda-classic .mm-ac-month:first-child { margin-top: 0; }

.mm-agenda-classic .mm-ac-when,
.mm-agenda-classic .mm-ac-contact {
  color: #fff;
  font-size: .82rem;
  line-height: 1.5;
  margin: 0 0 .95rem;
}
.mm-agenda-classic .mm-ac-contact a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mm-agenda-classic .mm-ac-contact a:hover { color: var(--mm-ochre, #C98F3F); }

/* Below desktop the overlap stops working — the two would sit on top of each
   other rather than beside. One column, photograph first, card under it. */
@media (max-width: 900px) {
  .mm-agenda-classic { max-width: 100%; padding: 2.4rem 0 3rem; }
  .mm-agenda-classic .mm-ac-block { padding: 0 1.2rem; margin-bottom: 3rem; }
  .mm-agenda-classic .mm-ac-block > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
  /* These must carry the SAME number of classes as the desktop rules above, or
     they lose on specificity and the card stays in a second column that no
     longer exists — which pushes it off the side of the phone. */
  .mm-agenda-classic .mm-ac-photo-left .mm-ac-photo,
  .mm-agenda-classic .mm-ac-photo-right .mm-ac-photo {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    aspect-ratio: 4 / 3;   /* a 2:3 crop at phone width is a face and nothing else */
    max-height: none;
  }
  .mm-agenda-classic .mm-ac-photo-left .mm-ac-card,
  .mm-agenda-classic .mm-ac-photo-right .mm-ac-card {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }
}

/* ==========================================================================
   22. Agenda 2026 — the season, in the site's own language

   ONE NEW GESTURE, not a repeat of the others. The hero clears; the film
   opens; the photographs travel sideways. Here THE MONTH HOLDS STILL WHILE
   ITS DATES PASS IT — the month name pins to the top of the screen and stays
   there until the last engagement under it has scrolled by. It is the motion
   an agenda already has in it, and no other section on the site uses it.

   Everything is scoped under .mm-ag-*. Reduced motion and browsers without
   scroll-timelines get a plain, complete, static page: nothing here leaves
   content parked at opacity 0 outside the guards.
   ========================================================================== */

/* Full bleed. Measured, not guessed: Kadence's .content-container is 1290px
   wide with 24px of padding and a left margin, which insets everything by 99px
   on a 1440 screen. The page's own sections carry their own padding, so the
   container can give up its entirely. */
body.mm-ag-page .content-container.site-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
body.mm-ag-page .entry-content { max-width: none; }

.mm-ag-stage,
.mm-ag-body,
.mm-ag-close { background: #12100F; color: #EFE9DF; }

/* --- the stage ---------------------------------------------------------- */
.mm-ag-stage { position: relative; }
.mm-ag-stage-inner {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-content: end;
  overflow: clip;
}
.mm-ag-stage-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* Text over photography needs a scrim to clear 4.5:1 — brief §5. */
.mm-ag-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,16,15,.80) 0%, rgba(18,16,15,.38) 30%, rgba(18,16,15,.70) 62%, rgba(18,16,15,.97) 100%),
    linear-gradient(90deg,  rgba(18,16,15,.62) 0%, rgba(18,16,15,.10) 55%, rgba(18,16,15,0) 100%);
}
.mm-ag-stage-copy {
  position: relative;
  padding: 0 clamp(1.2rem, 5vw, 5.5rem) clamp(3rem, 9vh, 7rem);
  max-width: 70rem;
}

.mm-ag-eyebrow {
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #C98F3F;
  margin: 0 0 1.4rem;
}

.mm-ag-title {
  font-size: clamp(3.2rem, 11vw, 10rem);
  line-height: .92;
  margin: 0;
  color: #EFE9DF;
  text-transform: none;     /* the Customizer capitalises headings site-wide */
  font-weight: 400;
}
.mm-ag-title .mm-ag-year { color: #C98F3F; }

.mm-ag-strap {
  margin: 1.8rem 0 0;
  font-size: clamp(.95rem, 1.5vw, 1.25rem);
  color: #C2B8AD;
  max-width: 34ch;
}
.mm-ag-strap .w { display: inline-block; }

/* --- the months --------------------------------------------------------- */
.mm-ag-body { padding: clamp(4rem, 12vh, 9rem) 0 0; }

.mm-ag-month {
  display: grid;
  grid-template-columns: minmax(10rem, 22vw) 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: 0 clamp(1.2rem, 5vw, 5.5rem);
  margin: 0 0 clamp(3rem, 9vh, 7rem);
  align-items: start;

  /* A month with one engagement is only ~300px tall, and a label that sticks
     for 300px does not read as holding still — it reads as a bug. This gives
     every month enough travel for the gesture to be legible. */
  min-height: 44vh;
}

/* THE GESTURE. The label sticks below the header while its dates go past. */
.mm-ag-label { position: sticky; top: 22vh; align-self: start; }
.mm-ag-label h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1;
  color: #EFE9DF;
  font-weight: 400;
  text-transform: none;
}
.mm-ag-rule {
  display: block;
  width: 3.2rem; height: 1px;
  background: #C98F3F;
  margin-top: 1.1rem;
}

.mm-ag-list { list-style: none; margin: 0; padding: 0; }

.mm-ag-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "when link" "city link" "meta link";
  column-gap: 2rem;
  padding: 1.6rem 0 1.9rem;
  border-top: 1px solid rgba(239,233,223,.16);
  /* start, NOT baseline: the link spans all three rows, and baseline alignment
     made the grid pad the rows out to align with it — a 130px hole between the
     dates and the city. */
  align-items: start;
}
.mm-ag-row:last-child { border-bottom: 1px solid rgba(239,233,223,.16); }

.mm-ag-when {
  grid-area: when;
  margin: 0 0 .45rem;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #C98F3F;
}
.mm-ag-city {
  grid-area: city;
  margin: 0;
  font-size: clamp(1.5rem, 3.6vw, 2.8rem);
  line-height: 1.05;
  color: #EFE9DF;
  font-weight: 400;
  text-transform: none;
}
.mm-ag-meta {
  grid-area: meta;
  margin: .5rem 0 0;
  font-size: clamp(.8rem, 1.1vw, .95rem);
  color: #9A9088;
}
.mm-ag-link { grid-area: link; margin: 0; align-self: end; text-align: right; }
.mm-ag-link a {
  color: #C2B8AD;
  font-size: clamp(.75rem, 1vw, .88rem);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,143,63,.45);
  word-break: break-word;
}
.mm-ag-link a:hover { color: #C98F3F; border-bottom-color: #C98F3F; }

/* --- full-bleed plates between quarters --------------------------------- */
.mm-ag-plate {
  margin: clamp(3rem, 10vh, 8rem) 0;
  overflow: clip;
  height: clamp(22rem, 62vh, 46rem);
}
.mm-ag-plate img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* --- close -------------------------------------------------------------- */
.mm-ag-close {
  padding: clamp(3rem, 10vh, 8rem) clamp(1.2rem, 5vw, 5.5rem) clamp(4rem, 12vh, 9rem);
}
.mm-ag-mail { margin: 0; }
.mm-ag-mail a {
  color: #EFE9DF;
  font-size: clamp(1.2rem, 3.4vw, 2.6rem);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,143,63,.5);
  word-break: break-word;
}
.mm-ag-mail a:hover { color: #C98F3F; border-bottom-color: #C98F3F; }

/* --- motion -------------------------------------------------------------
   Guarded twice, as everywhere else on this site: a browser without
   scroll-timelines, or a reader who has asked for less motion, gets the page
   above exactly as it is — complete, legible, and still.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* The stage is a tall row; its inner pane pins while the photograph
       settles and the type arrives. Same construction as the hero (§9), a
       different gesture: there the photograph clears, here it settles back. */
    .mm-ag-stage {
      height: 175vh;
      view-timeline-name: --agstage;
      view-timeline-axis: block;
    }
    .mm-ag-stage-inner { position: sticky; top: 0; height: 100vh; }

    .mm-ag-stage-photo {
      animation: mm-ag-settle linear both;
      animation-timeline: --agstage;
      animation-range: contain 0% contain 60%;
    }
    @keyframes mm-ag-settle {
      from { transform: scale(1.12); }
      to   { transform: scale(1); }
    }

    .mm-ag-title .mm-ag-word-1,
    .mm-ag-title .mm-ag-year,
    .mm-ag-strap .w {
      animation: mm-ag-rise linear both;
      animation-timeline: --agstage;
    }
    @keyframes mm-ag-rise {
      from { opacity: 0; transform: translateY(1.1em); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .mm-ag-title .mm-ag-word-1 { animation-range: contain 6%  contain 22%; }
    .mm-ag-title .mm-ag-year   { animation-range: contain 12% contain 30%; }
    .mm-ag-strap .w-0 { animation-range: contain 22% contain 34%; }
    .mm-ag-strap .w-1 { animation-range: contain 25% contain 37%; }
    .mm-ag-strap .w-2 { animation-range: contain 28% contain 40%; }
    .mm-ag-strap .w-3 { animation-range: contain 31% contain 43%; }
    .mm-ag-strap .w-4 { animation-range: contain 34% contain 46%; }
    .mm-ag-strap .w-5 { animation-range: contain 37% contain 49%; }
    .mm-ag-strap .w-6 { animation-range: contain 40% contain 52%; }

    .mm-ag-eyebrow {
      animation: mm-ag-rise linear both;
      animation-timeline: --agstage;
      animation-range: contain 2% contain 16%;
    }

    /* Each engagement arrives as it enters. */
    .mm-ag-row {
      animation: mm-ag-row-in linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 20%;
    }
    @keyframes mm-ag-row-in {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* The rule under each month draws itself as the month arrives. */
    .mm-ag-rule {
      animation: mm-ag-rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 24%;
      transform-origin: left center;
    }
    @keyframes mm-ag-rule-draw {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    /* The plates drift against the scroll, like the cut-outs on the home page. */
    .mm-ag-plate img {
      animation: mm-ag-plate-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    @keyframes mm-ag-plate-drift {
      from { transform: scale(1.14) translateY(-3.5%); }
      to   { transform: scale(1.14) translateY(3.5%); }
    }
  }
}

/* --- phone and tablet ---------------------------------------------------- */
@media (max-width: 900px) {
  /* The sticky month would eat a third of a phone screen. It becomes an
     ordinary heading and the dates run underneath it. */
  .mm-ag-month { grid-template-columns: 1fr; gap: 1rem; min-height: 0; }
  .mm-ag-label { position: static; }
  .mm-ag-row {
    grid-template-columns: 1fr;
    grid-template-areas: "when" "city" "meta" "link";
  }
  .mm-ag-link { text-align: left; margin-top: .8rem; }
}

/* --- §22 margin overrides ------------------------------------------------
   Kadence styles headings and paragraphs inside the content area with
   selectors like ".entry-content h3", which outranks a single class. Every
   margin set above was therefore being ignored: measured on the rendered page,
   .mm-ag-city was carrying a 67px top margin and .mm-ag-when a 32px bottom one,
   which is the 130px hole that opened between the dates and the city.

   Restated here at higher specificity. Nothing new is being designed — these
   are the same values as above, made to actually apply.
   ------------------------------------------------------------------------ */
.mm-ag-stage-copy .mm-ag-eyebrow { margin: 0 0 1.4rem; }
.mm-ag-stage-copy .mm-ag-title   { margin: 0; }
.mm-ag-stage-copy .mm-ag-strap   { margin: 1.8rem 0 0; }
.mm-ag-month .mm-ag-label h2     { margin: 0; }
.mm-ag-row .mm-ag-when { margin: 0 0 .45rem; }
.mm-ag-row .mm-ag-city { margin: 0; }
.mm-ag-row .mm-ag-meta { margin: .5rem 0 0; }
.mm-ag-row .mm-ag-link { margin: 0; }
.mm-ag-close .mm-ag-eyebrow { margin: 0 0 1.2rem; }
.mm-ag-close .mm-ag-mail    { margin: 0; }
.mm-ag-body .mm-ag-plate    { margin: clamp(3rem, 10vh, 8rem) 0; }

@media (max-width: 900px) {
  .mm-ag-row .mm-ag-link { margin: .8rem 0 0; }
}
/* ==========================================================================
   23. About — motion

   About now speaks Home's language: pinned stages. A section that wants to be
   watched has to hold the screen still while it happens, and to hold the
   screen still it needs scroll length of its own. That is the whole mechanism
   — a tall row supplies a view-timeline, its .kt-row-column-wrap sticks to the
   top for 100vh, and everything inside animates against that timeline with
   animation-range: contain X% contain Y%. Same construction as §9, §11, §12.

   FIVE GESTURES, none of them a repeat of Home's:

     hero        the photograph OPENS — it starts close and shadowed and
                 settles back as the scrim lifts, while the name rises word by
                 word. Deliberately the inverse of Home, where the photograph
                 clears away to nothing.                            [pinned]
     quotation   the sentence ARRIVES IN CLAUSES, each tracked open and closing
                 up as it lands, while a hairline rule draws beneath it. [pinned]
     splits      the photograph SETTLES BACK into its frame while the copy
                 rises in from the opposite side — the two halves of the row
                 moving on different axes, and mirrored between the two rows.
     engagements the cities LIGHT ONE AT A TIME, as if being read aloud.
     plates      the three photographs OPEN AS A SHUTTER, top to bottom,
                 left to right across a held frame.                  [pinned]

   WHY THE HOOKS ARE WHAT THEY ARE. Every hook is a real class on the block
   (mm-ab-*), set in the editor's Additional CSS Class field. Note that Kadence's
   column is a STATIC block: its class only exists if it is written into the
   saved <div class="...">, not merely into the block comment's attributes.
   Seven column hooks on this page were in the attributes but not in the saved
   HTML, so .mm-ab-photo and .mm-ab-plate-* matched nothing and three of the
   four original gestures were dead code. Measured 11 Sep before the fix:
   document.querySelectorAll('.mm-ab-plate').length === 0.

   NO NON-INTERPOLATABLE KEYWORDS IN KEYFRAMES. The previous version animated
   background-size: 116% -> cover and letter-spacing: .14em -> normal. Neither
   pair interpolates, so both animations jumped discretely at the halfway
   point instead of travelling. Every keyframe below moves between two values
   of the same type.

   Guarded twice, as everything here is. Without scroll-timelines, or for a
   reader who has asked for less motion, About is a complete, legible, still
   page: the hero becomes an ordinary tall photograph with the name beneath it,
   and every other section simply sits there.
   ========================================================================== */

/* --------------------------------------------------------------------------
   23.0 The hero's two scrims — present always, because they are legibility,
   not decoration.

   ::after is the permanent one. The copy sits in the lower third, so the
   gradient darkens the bottom and leaves the faces alone. This is what carries
   the 14px ochre eyebrow past 4.5:1 once the animated curtain has lifted.

   ::before is the curtain that lifts. It only ever darkens, so if the
   animation never runs (no scroll-timeline support) it must rest at its END
   value — the open one — rather than its start. Hence the opacity here.
   -------------------------------------------------------------------------- */
.mm-ab-hero-media::after,
.mm-ab-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.mm-ab-hero-media::after {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(18,16,15,.46) 0%,     /* the navigation sits here */
    rgba(18,16,15,.14) 18%,
    rgba(18,16,15,0)   34%,    /* the faces, left alone */
    rgba(18,16,15,.22) 46%,
    rgba(18,16,15,.66) 58%,    /* the eyebrow lands at ~55% */
    rgba(18,16,15,.84) 74%,    /* the name runs 65%-87% */
    rgba(18,16,15,.90) 100%
  );
}
.mm-ab-hero-media::before {
  z-index: 2;
  background: #12100F;
  opacity: .12;                /* the open, resting state */
}

/* The words and the clauses are inline-block so they can be moved. Outside the
   guards they are simply words, fully visible. */
.mm-ab-hero-copy .w { display: inline-block; will-change: transform, opacity; }
/* Each word is its own box so it can be scaled without reflowing the
   paragraph, and relative so it can lift above its neighbours while big. */
.mm-ab-quote {
  position: relative;
  /* THE SIZE THE WORD REACHES, as a multiple of the resting 48px. One number,
     because it is the thing most likely to be retuned. --start is only the
     invisible beginning of the travel; --peak is what is seen.

     THERE IS A HARD CEILING AND IT IS THE SCREEN. The longest word in this
     quotation, "understanding", is 224px at the resting 34px — so the widest it
     can render before it is wider than a 1440 screen is about 6.4x. That is
     an ABSOLUTE ceiling in pixels, roughly 218px of type, and it does not
     move with the resting size: a smaller setting simply buys a larger
     multiple for the same result. 4.8x is 163px. Measured, not estimated.
     Leading has to keep pace — see the paragraph rule below. */
  --mm-q-peak:  3.2;
  --mm-q-start: 3.6;
  /* A guard, not a design: at the peak the widest words come close to the
     edges, and nothing on this site may ever scroll the page sideways.
     clip (not hidden) keeps the y axis visible. */
  overflow-x: clip;
}
.mm-ab-quote .qw {
  display: inline-block;
  position: relative;
  z-index: 1;
  /* A word at 2x overhangs its own box by half its width on each side, so it
     lands on the words either side of it and the line reads as broken type.
     The ground here is a single flat bone, so giving each word that same bone
     as an opaque background makes it invisible at rest and makes it OCCLUDE
     its neighbours while it is large and lifted above them. The padding is
     cancelled by an equal negative margin, so the paragraph's layout is
     identical to having neither — nothing shifts. */
  background: #EFE9DF;
  padding: 0 .17em;
  margin:  0 -.17em;
  /* THE SPAN'S OWN LINE-HEIGHT, NOT THE PARAGRAPH'S. An inline-block containing
     one line of text is as tall as its line-height — so with the paragraph's
     1.95 the box is 66px for 34px of type, and scaling THAT sends an opaque
     bone rectangle two lines up and two lines down. At line-height 1 the box is
     the type itself: at 2.6x it grows to 88px inside a 66px line box, so the
     11px of overhang lands in the leading, where there is nothing to cover.
     The paragraph keeps its 1.95 — the strut sets the line box, not these. */
  line-height: 1;
}
/* Air for the overhang to happen in, and the looser setting a pull-quote wants
   anyway. Set here rather than on the block so the two live together. */
.mm-ab-quote .wp-block-kadence-advancedheading {
  word-spacing: .16em;
  /* A word at 2.15x is ~75px tall in a 34px setting, so it overhangs its
     line box. Without this it would occlude the lines above and below it
     as it passes. Airier also suits a pull-quote. */
  /* A scaled word stays clear of the lines above and below only while its
     overhang fits the leading, which means line-height >= (peak + 1) / 2.
     THIS IS THE TRADE. Leading, peak and container height are one system:
     tighter leading means a smaller peak, and both make the band shorter. At
     2.1 the ceiling is 3.2x. Going back up to 4.8x means going back to 3.0
     here, which adds ~90px to the band. Pick two of the three.
     Column padding is the free lever — it shortens the band and costs the
     effect nothing, which is why it was cut first. */
  line-height: 2.1 !important;
}
.mm-ab-engagements .ct { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* ======================================================================
       23.1 HERO — pinned; the photograph opens as the name rises
       ====================================================================== */
    .mm-ab-stage {
      height: 180vh;
      view-timeline-name: --abstage;
      view-timeline-axis: block;
      position: relative;
    }
    /* display:flex is safe HERE and only here: this row has exactly one
       column, so there is no Kadence grid template to collapse. Same
       construction as the home hero, §9. Never do this on a multi-column row. */
    .mm-ab-stage > .kt-row-column-wrap {
      position: sticky; top: 0;
      height: 100vh;
      overflow: clip;
      display: flex;
    }
    .mm-ab-hero { height: 100vh; width: 100%; position: relative; }
    .mm-ab-hero > .kt-inside-inner-col { height: 100%; position: relative; padding: 0 !important; }

    /* The photograph becomes a layer behind the type. Its padding was the
       height control in the static fallback; inside the stage the painting
       element simply fills the box — the §16.1 lesson. */
    .mm-ab-hero-media {
      position: absolute; inset: 0;
      padding: 0 !important; margin: 0 !important;
      overflow: clip;
    }
    .mm-ab-hero-media > .kt-inside-inner-col {
      padding: 0 !important;
      height: 100% !important;
      width: 100%;
      align-self: stretch;
      animation: mm-ab-open linear both;
      animation-timeline: --abstage;
      animation-range: contain 0% contain 62%;
      will-change: transform;
    }
    /* It settles BACK rather than pushing in: the frame relaxes as you arrive. */
    @keyframes mm-ab-open {
      from { transform: scale(1.12); }
      to   { transform: scale(1); }
    }

    /* the curtain lifts — the one gesture the old version was reaching for */
    .mm-ab-hero-media::before {
      animation: mm-ab-curtain linear both;
      animation-timeline: --abstage;
      animation-range: contain 0% contain 44%;
    }
    @keyframes mm-ab-curtain {
      from { opacity: .60; }
      to   { opacity: .12; }
    }

    .mm-ab-hero-copy {
      position: absolute; left: 0; right: 0; bottom: 11vh;
      z-index: 3;
      margin: 0 !important;
      padding-top: 0 !important; padding-bottom: 0 !important;
    }

    /* The name arrives a word at a time. Indices are written into the markup
       (span.w.w-N) and these ranges are generated to match — if the heading is
       ever re-typed, the span count and these rules have to move together. */
    .mm-ab-hero-copy .w {
      animation: mm-ab-word linear both;
      animation-timeline: --abstage;
    }
    @keyframes mm-ab-word {
      from { opacity: 0; transform: translateY(.7em); filter: blur(5px); }
      to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
    }
    .mm-ab-hero-copy .w-0 { animation-range: contain  6% contain 18%; }
    .mm-ab-hero-copy .w-1 { animation-range: contain  9% contain 21%; }
    .mm-ab-hero-copy .w-2 { animation-range: contain 18% contain 31%; }
    .mm-ab-hero-copy .w-3 { animation-range: contain 22% contain 35%; }
    .mm-ab-hero-copy .w-4 { animation-range: contain 26% contain 39%; }
    .mm-ab-hero-copy .w-5 { animation-range: contain 30% contain 43%; }
    .mm-ab-hero-copy .w-6 { animation-range: contain 34% contain 47%; }

    /* ======================================================================
       23.2 QUOTATION — each word arrives large, then shrinks into its place

       WHAT WAS ASKED FOR (Reza, 11 Sep): the words come in one at a time, each
       big first and then settling to size, and the section ends up smaller,
       because it was dedicating most of a screen to two lines of type.

       WHY THIS IS NO LONGER PINNED. It was a 126vh stage holding a 100vh frame,
       and that is what made the section feel empty: while a stage is pinned the
       whole screen belongs to it, and two lines of 20px type cannot fill a
       screen. Shortening the stage does not help — a pinned stage is ALWAYS a
       full screen by construction; only the time spent in it changes. So the
       section is now an ordinary band, roughly two thirds of a screen tall, and
       the words animate as it travels past on a view() timeline. The
       neighbouring sections stay visible above and below it, which is what
       stops it reading as a void. The band gives the words MORE room to animate
       in, not less: it crosses the viewport over about 165vh of scroll.

       (The literal request — the container shrinking once the effect finishes —
       is one to avoid rather than build. Animating a section's height against
       scroll changes the height of the document, which changes the scroll
       position, which drives the animation: the page fights itself, and
       everything below it jumps while you read. A permanently compact band is
       the same outcome without the feedback loop.)

       WHY transform AND NOT font-size. font-size reflows: a word set three
       times larger would re-wrap the whole paragraph on every frame and the
       lines would jump. transform: scale() is painted, not laid out, so each
       word keeps its final footprint and the paragraph never moves. The word
       overflows its own box while large, which is exactly the effect — and
       z-index lifts it over its settled neighbours while it does.
       ====================================================================== */
    .mm-ab-quote .qw {
      animation: mm-ab-qword linear both;
      animation-timeline: view();
      will-change: transform, opacity;
    }
    /* Full opacity is reached at 45%, while the word is still at 1.5x — so the
       large state is genuinely seen, rather than being an invisible start
       position. The blur clears with it, so the growth reads as coming into
       focus rather than as a zoom. */
    @keyframes mm-ab-qword {
      0%   { opacity: 0; transform: scale(var(--mm-q-start)); filter: blur(3px);  z-index: 3; }
      15%  { opacity: 1; transform: scale(var(--mm-q-peak));  filter: blur(.4px); z-index: 3; }
      100% { opacity: 1; transform: scale(1);                 filter: blur(0);    z-index: 1; }
    }



    .mm-ab-quote .qw-0  { animation-range: cover  10.0% cover  14.6%; }
    .mm-ab-quote .qw-1  { animation-range: cover  12.2% cover  16.8%; }
    .mm-ab-quote .qw-2  { animation-range: cover  14.4% cover  19.0%; }
    .mm-ab-quote .qw-3  { animation-range: cover  16.6% cover  21.2%; }
    .mm-ab-quote .qw-4  { animation-range: cover  18.8% cover  23.4%; }
    .mm-ab-quote .qw-5  { animation-range: cover  21.0% cover  25.6%; }
    .mm-ab-quote .qw-6  { animation-range: cover  23.2% cover  27.8%; }
    .mm-ab-quote .qw-7  { animation-range: cover  25.4% cover  30.0%; }
    .mm-ab-quote .qw-8  { animation-range: cover  27.6% cover  32.2%; }
    .mm-ab-quote .qw-9  { animation-range: cover  29.8% cover  34.4%; }
    .mm-ab-quote .qw-10 { animation-range: cover  32.0% cover  36.6%; }
    .mm-ab-quote .qw-11 { animation-range: cover  34.2% cover  38.8%; }
    .mm-ab-quote .qw-12 { animation-range: cover  36.4% cover  41.0%; }
    .mm-ab-quote .qw-13 { animation-range: cover  38.6% cover  43.2%; }
    .mm-ab-quote .qw-14 { animation-range: cover  40.8% cover  45.4%; }
    .mm-ab-quote .qw-15 { animation-range: cover  43.0% cover  47.6%; }
    .mm-ab-quote .qw-16 { animation-range: cover  45.2% cover  49.8%; }
    .mm-ab-quote .qw-17 { animation-range: cover  47.4% cover  52.0%; }
    .mm-ab-quote .qw-18 { animation-range: cover  49.6% cover  54.2%; }
    .mm-ab-quote .qw-19 { animation-range: cover  51.8% cover  56.4%; }
    .mm-ab-quote .qw-20 { animation-range: cover  54.0% cover  58.6%; }
    .mm-ab-quote .qw-21 { animation-range: cover  56.2% cover  60.8%; }
    .mm-ab-quote .qw-22 { animation-range: cover  58.4% cover  63.0%; }
    .mm-ab-quote .qw-23 { animation-range: cover  60.6% cover  65.2%; }
    .mm-ab-quote .qw-24 { animation-range: cover  62.8% cover  67.4%; }
    .mm-ab-quote .qw-25 { animation-range: cover  65.0% cover  69.6%; }
    .mm-ab-quote .qw-26 { animation-range: cover  67.2% cover  71.8%; }
    .mm-ab-quote .qw-27 { animation-range: cover  69.4% cover  74.0%; }

    /* a hairline closes the quotation once the last word has landed */
    .mm-ab-quote::after {
      content: "";
      position: absolute;
      left: 50%; bottom: 46px;
      width: 0; height: 1px;
      transform: translateX(-50%);
      background: #C98F3F;
      animation: mm-ab-rule linear both;
      animation-timeline: view();
      animation-range: cover 70% cover 86%;
    }
    @keyframes mm-ab-rule {
      from { width: 0;     opacity: 0; }
      to   { width: 108px; opacity: .85; }
    }

    /* ======================================================================
       23.3 SPLITS — the photograph settles, the copy rises in from the side
       Not pinned: these rows are read, not watched, and pinning every section
       is what makes a page feel padded rather than choreographed.
       Kadence paints a column's background on .kt-inside-inner-col, so that is
       the element that moves; the column clips it.
       ====================================================================== */
    .mm-ab-split .mm-ab-photo { overflow: clip; }
    .mm-ab-split .mm-ab-photo > .kt-inside-inner-col {
      animation: mm-ab-settle-back linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    @keyframes mm-ab-settle-back {
      from { transform: scale(1.14) translateY(1.5%); }
      to   { transform: scale(1)    translateY(-1.5%); }
    }

    .mm-ab-split .mm-ab-copy .wp-block-kadence-advancedheading {
      animation: mm-ab-copy-in linear both;
      animation-timeline: view();
    }
    @keyframes mm-ab-copy-in {
      from { opacity: 0; transform: translate3d(26px, 18px, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    /* the second split is mirrored, so the two rows are not the same event */
    .mm-ab-split-warm .mm-ab-copy .wp-block-kadence-advancedheading {
      animation-name: mm-ab-copy-in-rev;
    }
    @keyframes mm-ab-copy-in-rev {
      from { opacity: 0; transform: translate3d(-26px, 18px, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    .mm-ab-split .mm-ab-copy .wp-block-kadence-advancedheading:nth-of-type(1) { animation-range: entry 22% cover 26%; }
    .mm-ab-split .mm-ab-copy .wp-block-kadence-advancedheading:nth-of-type(2) { animation-range: entry 28% cover 32%; }
    .mm-ab-split .mm-ab-copy .wp-block-kadence-advancedheading:nth-of-type(3) { animation-range: entry 34% cover 38%; }
    .mm-ab-split .mm-ab-copy .wp-block-kadence-advancedheading:nth-of-type(4) { animation-range: entry 40% cover 44%; }

    /* ======================================================================
       23.4 ENGAGEMENTS — the cities light one at a time
       The separators sit outside the spans, so only the names change.
       ====================================================================== */
    .mm-ab-engagements .wp-block-kadence-advancedheading:nth-of-type(1),
    .mm-ab-engagements .wp-block-kadence-advancedheading:nth-of-type(3) {
      animation: mm-ab-copy-in linear both;
      animation-timeline: view();
      animation-range: entry 18% cover 34%;
    }
    .mm-ab-engagements .ct {
      animation: mm-ab-light linear both;
      animation-timeline: view();
    }
    @keyframes mm-ab-light {
      from { opacity: .22; }
      to   { opacity: 1; }
    }
    .mm-ab-engagements .ct-0 { animation-range: entry 30% cover 30%; }
    .mm-ab-engagements .ct-1 { animation-range: entry 38% cover 36%; }
    .mm-ab-engagements .ct-2 { animation-range: entry 46% cover 42%; }
    .mm-ab-engagements .ct-3 { animation-range: entry 54% cover 48%; }
    .mm-ab-engagements .ct-4 { animation-range: entry 62% cover 54%; }

    /* ======================================================================
       23.5 PLATES — pinned; the three photographs open as a shutter
       Full-height inside the held frame, opening top to bottom, left to right.
       A different axis again from the home page's sideways pan (§13).
       ====================================================================== */
    .mm-ab-plates {
      height: 150vh;
      view-timeline-name: --abplates;
      view-timeline-axis: block;
      position: relative;
    }
    .mm-ab-plates > .kt-row-column-wrap {
      position: sticky; top: 0;
      height: 100vh;
      overflow: clip;
    }
    /* Padding was the height control; inside a held 100vh frame the plates
       should fill it instead. §16.1 again. */
    /* height:100% on the inner element alone is circular here — the grid row it
       sits in is auto-sized to its content, so it collapses back to about the
       padding it was meant to replace (measured: 470px in a 900px frame). The
       COLUMN needs the real height; the inner element then has something to
       fill. */
    .mm-ab-plates .mm-ab-plate { height: 100vh; }
    .mm-ab-plates .mm-ab-plate > .kt-inside-inner-col {
      height: 100% !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    .mm-ab-plates .mm-ab-plate {
      animation: mm-ab-shutter linear both;
      animation-timeline: --abplates;
      will-change: clip-path;
    }
    @keyframes mm-ab-shutter {
      from { clip-path: inset(0 0 100% 0); }
      to   { clip-path: inset(0 0 0 0); }
    }
    .mm-ab-plates .mm-ab-plate-1 { animation-range: contain  4% contain 34%; }
    .mm-ab-plates .mm-ab-plate-2 { animation-range: contain 12% contain 42%; }
    .mm-ab-plates .mm-ab-plate-3 { animation-range: contain 20% contain 50%; }

    /* and each photograph lifts a little inside its frame while it is held */
    .mm-ab-plates .mm-ab-plate > .kt-inside-inner-col {
      animation: mm-ab-plate-lift linear both;
      animation-timeline: --abplates;
      animation-range: contain 0% contain 100%;
    }
    @keyframes mm-ab-plate-lift {
      from { background-position: 50% 24%; }
      to   { background-position: 50% 56%; }
    }
  }
}

/* --------------------------------------------------------------------------
   23.6 Phone and tablet — the same choreography, less dead scroll

   Most of the perceived length of a pinned section is the scroll AFTER the
   animation has finished, not the animation itself. So the stages are
   shortened rather than the motion sped up — §3 of the brief. About lands at
   roughly five viewports on a phone against six and a half on the desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  @supports (animation-timeline: view()) {
    .mm-ab-stage  { height: 138vh; }
    .mm-ab-plates { height: 125vh; }
    .mm-ab-hero-copy { bottom: 8vh; }
    /* "understanding" is ~185px at the phone's 28px setting, against a 390px
       screen — so the ceiling here is barely 2x, a quarter of the desktop's
       headroom. The gesture is the same; the number cannot be. */
    .mm-ab-quote { --mm-q-peak: 2.0; --mm-q-start: 2.3; }
    /* a lower peak needs less leading: (1.95 + 1) / 2 = 1.48 */
    .mm-ab-quote .wp-block-kadence-advancedheading { line-height: 1.6 !important; }
    /* Each word is its own inline-block so it can take its own beat, which
       means the line can only break BETWEEN words — at 40px "Martin Maldonado"
       does not fit a 350px column and the surname drops to its own line. A name
       must not break. Home's hero drops to 30px on a phone for the same reason;
       match it, and let the <br> be the only break. */
    .mm-ab-hero-copy h1 {
      font-size: 30px !important;
      line-height: 38px !important;
    }
    .mm-ab-quote::after { bottom: 34px; }
  }
  /* Three full-height photographs side by side are 130px wide on a phone.
     Below the tablet breakpoint Kadence stacks them, and a stacked plate
     should be a shape, not a full screen each. */
  .mm-ab-plates > .kt-row-column-wrap { height: auto !important; position: static !important; }
  .mm-ab-plates .mm-ab-plate { height: auto !important; }
  .mm-ab-plates .mm-ab-plate > .kt-inside-inner-col {
    height: auto !important;
    padding-top: 145px !important;
    padding-bottom: 145px !important;
  }
  .mm-ab-plates { height: auto !important; }
}

/* ---------------------------------------------------------------------------
   24. Instagram and Facebook — the site's ground under a third-party feed

   Both pages held nothing but a shortcode, so they rendered as raw plugin
   output on the theme's default pale ground. This gives them the same opening
   as any other page — ochre eyebrow, large title, one line of context — and
   puts the feed on ink so the two pages belong to the same site as the rest.

   DELIBERATELY SHALLOW. The feed's own markup belongs to Smash Balloon, and
   both plugins write inline styles per element. Fighting that from a
   stylesheet is exactly the failure that disqualified every off-the-shelf
   events plugin (agenda-plugin-decision.md), so only two things are done here:
   the ground the feed sits on, and the chrome that repeats what the page
   already says. Colours INSIDE the feed belong in each plugin's own settings
   screen, where they are a setting rather than a fight.

   Every selector below was read off the rendered live pages, not guessed:
   .sb_instagram_header / .sbi_item / .sbi_photo   (instagram-feed-pro)
   .cff-visual-header / .cff / .cff-posts-wrap     (custom-facebook-feed-pro)

   Scoped to body.mm-soc-page, which functions.php adds for these two slugs
   only. A second class, .mm-soc-facebook / .mm-soc-instagram, is available if
   one feed ever needs adjusting without touching the other.
   -------------------------------------------------------------------------- */

/* Full bleed. Same measurement as §22: Kadence's .content-container is 1290px
   with 24px padding, which insets everything by 99px on a 1440 screen. The
   sections below carry their own padding, so the container gives up its own. */
body.mm-soc-page .content-container.site-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
body.mm-soc-page .entry-content { max-width: none; }

/* The page's ground. Kadence puts margin-bottom: 80px on .content-area; on a
   near-black page the body's bone ground shows through it as a pale stripe
   just above the footer — the same gotcha §16 clears for the hero pages. */
body.mm-soc-page .content-area {
  margin-bottom: 0 !important;
  background: #12100F;
  color: #EFE9DF;
}
body.mm-soc-page .entry-content-wrap,
body.mm-soc-page .entry-content { background: #12100F; }

/* --- the page opening --------------------------------------------------- */

/* NB: every rule below is prefixed with body.mm-soc-page on purpose.
   Kadence styles headings and paragraphs as .entry-content h1 / p —
   specificity (0,1,1), which beats a bare class (0,1,0). Without the
   body prefix the margins here are silently ignored and the title
   keeps a 156px top margin it was never given. Same trap as §22. */

.mm-soc-head {
  background: #12100F;
  padding: clamp(3rem, 10vh, 7rem) clamp(1.2rem, 5vw, 5.5rem) clamp(2.5rem, 7vh, 5rem);
}
.mm-soc-head-inner { max-width: 70rem; }

body.mm-soc-page .mm-soc-eyebrow {
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #C98F3F;
  margin: 0 0 1.4rem;
}

body.mm-soc-page .mm-soc-title {
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  line-height: .95;
  margin: 0;
  color: #EFE9DF;
  text-transform: none;   /* the Customizer capitalises headings site-wide */
  font-weight: 400;
}

body.mm-soc-page .mm-soc-strap {
  margin: 1.6rem 0 0;
  font-size: clamp(.95rem, 1.5vw, 1.25rem);
  color: #C2B8AD;         /* 9.7:1 on #12100F */
  max-width: 42ch;
}

/* --- the feed ----------------------------------------------------------- */

/* Give the feed the same side margin as the opening, and clear the footer. */
body.mm-soc-page .entry-content > .wp-block-shortcode,
body.mm-soc-page .entry-content > .kb-row-layout-wrap {
  padding: 0 clamp(1.2rem, 5vw, 5.5rem) clamp(4rem, 10vh, 8rem);
}

/* Both plugins print their own header — account name, avatar, follower count.
   The page above already says whose account this is, and a follower count
   reads as a widget rather than as part of a lookbook. */
body.mm-soc-page .sb_instagram_header,
body.mm-soc-page .cff-visual-header { display: none !important; }

/* The feeds assume a pale page; their containers carry a light ground. */
body.mm-soc-page .sbi,
body.mm-soc-page .cff,
body.mm-soc-page .cff-wrapper,
body.mm-soc-page .cff-posts-wrap { background: transparent !important; }

/* Zero radius, zero shadow — brief §5. */
body.mm-soc-page .sbi_item,
body.mm-soc-page .sbi_photo,
body.mm-soc-page .sbi_photo_wrap,
body.mm-soc-page .cff-posts-wrap,
body.mm-soc-page .cff-item {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The Facebook page ends in a Like Box that is a real Facebook iframe. Nothing
   in this stylesheet can reach inside it, so it is only given air. If it ever
   needs to go, hide .cff-likebox rather than trying to restyle it. */
body.mm-soc-page .cff-likebox { margin-top: clamp(2rem, 5vh, 4rem); }

@media (max-width: 767px) {
  .mm-soc-head { padding-left: 1.2rem; padding-right: 1.2rem; }
  body.mm-soc-page .entry-content > .wp-block-shortcode,
  body.mm-soc-page .entry-content > .kb-row-layout-wrap {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}