/* ==========================================================================
   MoroFun Atlas — main.css
   1. Tokens          6. Hero
   2. Reset / base    7. Cards & grids
   3. Typography      8. Archive / single / comments
   4. Utilities       9. Sidebar & widgets
   5. Header         10. Footer / floating UI
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root {
  /* Palette */
  --mf-cream:      #F7F2EA;
  --mf-sand:       #EFE5D4;
  --mf-sand-deep:  #E3D5BE;
  --mf-clay:       #A8551F;
  --mf-clay-dark:  #9B4C1E;
  --mf-clay-soft:  #F0DCCB;
  --mf-indigo:     #1B3A5C;
  --mf-indigo-dark:#12283F;
  --mf-gold:       #C9A24B;
  --mf-ink:        #17140F;
  --mf-ink-70:     #55504A;
  --mf-ink-45:     #8A837A;
  --mf-line:       #DED2BE;
  --mf-white:      #FFFDF9;

  /* Type */
  --mf-display: "Fraunces", "Playfair Display", Georgia, serif;
  --mf-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --mf-step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --mf-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --mf-step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --mf-step-2:  clamp(1.5rem, 1.34rem + 0.78vw, 2rem);
  --mf-step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --mf-step-4:  clamp(2.4rem, 1.8rem + 2.9vw, 4.2rem);
  --mf-step-5:  clamp(2.9rem, 1.9rem + 4.6vw, 5.6rem);

  /* Space & shape */
  --mf-gutter: clamp(1.15rem, 0.8rem + 1.6vw, 2.5rem);
  --mf-width:  1240px;
  --mf-width-text: 720px;
  --mf-section: clamp(3.5rem, 2.4rem + 5vw, 7rem);
  --mf-radius: 4px;
  --mf-radius-lg: 10px;

  /* Motion */
  --mf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mf-fast: 180ms;
  --mf-base: 300ms;

  --mf-shadow-sm: 0 1px 2px rgba(23,20,15,.05), 0 4px 14px rgba(23,20,15,.05);
  --mf-shadow-md: 0 10px 34px rgba(27,58,92,.13), 0 2px 6px rgba(23,20,15,.05);

  --mf-header-h: 76px;
}

/* 2. RESET / BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.mf-no-scroll { overflow: hidden; }

body {
  margin: 0;
  background: var(--mf-cream);
  color: var(--mf-ink);
  font-family: var(--mf-body);
  font-size: var(--mf-step-0);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, iframe { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; display: block; }
svg:not([width]):not([height]) { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mf-clay);
  outline-offset: 3px;
  border-radius: 2px;
}

.mf-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--mf-indigo); color: #fff; padding: .85rem 1.4rem;
  font-size: .9rem; font-weight: 700;
}
.mf-skip-link:focus { left: 12px; top: 12px; }

.mf-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3. TYPOGRAPHY ============================================================ */
h1, h2, h3, h4, h5, h6, .mf-display {
  font-family: var(--mf-display);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--mf-ink);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--mf-step-4); }
h2 { font-size: var(--mf-step-3); }
h3 { font-size: var(--mf-step-2); }
h4 { font-size: var(--mf-step-1); }
h5, h6 { font-size: var(--mf-step-0); }

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

/* Eyebrow: the utility voice of the theme */
.mf-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mf-body);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mf-clay);
  margin: 0 0 .9rem;
}
.mf-eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--mf-gold); flex: none;
}
.mf-eyebrow--center::before { display: none; }

.mf-lede {
  font-size: var(--mf-step-1);
  line-height: 1.6;
  color: var(--mf-ink-70);
  max-width: 62ch;
}

/* 4. UTILITIES ============================================================= */
.mf-container { width: 100%; max-width: var(--mf-width); margin-inline: auto; padding-inline: var(--mf-gutter); }
.mf-container--narrow { max-width: 860px; }
.mf-section { padding-block: var(--mf-section); }
.mf-section--sand { background: var(--mf-sand); }

/* The signature: horseshoe-arch image mask */
/* The Moroccan arch, drawn with border-radius rather than a clip-path that
   points at an SVG elsewhere in the document. A url() reference silently
   stops clipping whenever those defs are absent, which happens inside the
   Elementor editor iframe and on any template that does not print them.
   This version is self-contained and scales with the box. */
.mf-arch {
  overflow: hidden;
  border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
}

/* Zellige hairline divider */
.mf-divider { display: block; width: 100%; max-width: 340px; margin: 2.4rem auto; color: var(--mf-gold); }
.mf-divider path, .mf-divider line { stroke: currentColor; fill: none; stroke-width: 1.2; }

/* Motion — driven by IntersectionObserver, not by scroll position maths.
   JS adds .is-in when an element actually enters the viewport, and CSS does
   the movement. Nothing is precomputed, so a document that grows while images
   load cannot cause reveals to fire early. */

.mf-js [data-mf-anim] { opacity: 0; will-change: transform, opacity; }
.mf-js [data-mf-anim].is-in { opacity: 1; }

.mf-js [data-mf-anim="fade-up"]     { transform: translateY(44px); }
.mf-js [data-mf-anim="fade"]        { transform: none; }
.mf-js [data-mf-anim="zoom"]        { transform: scale(.92); }
.mf-js [data-mf-anim="rise"]        { transform: translateY(52px) scale(.97); }
.mf-js [data-mf-anim="slide-left"]  { transform: translateX(-46px); }
.mf-js [data-mf-anim="slide-right"] { transform: translateX(46px); }
/* The wipe clips the element's children, never the element itself. A target
   that fully clips itself reports a zero intersection ratio in Chromium, so
   the observer never fires and the content stays hidden for good. */
.mf-js [data-mf-anim="wipe"]         { transform: translateY(14px); }
.mf-js [data-mf-anim="wipe"] > *     { clip-path: inset(0 0 100% 0); }
.mf-js [data-mf-anim="wipe"].is-in > * {
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms var(--mf-ease) var(--mf-delay, 0ms);
}

.mf-js [data-mf-anim].is-in {
  transform: none;
  transition:
    opacity 760ms var(--mf-ease) var(--mf-delay, 0ms),
    transform 860ms var(--mf-ease) var(--mf-delay, 0ms);
}

/* Image inside a revealed card settles out of a slight zoom. */
.mf-js [data-mf-anim] .mf-card__media img,
.mf-js [data-mf-anim] .mf-dest__media img,
.mf-js [data-mf-anim] .mf-card__media .ph,
.mf-js [data-mf-anim] .mf-dest__media .ph { transform: scale(1.14); }
.mf-js [data-mf-anim].is-in .mf-card__media img,
.mf-js [data-mf-anim].is-in .mf-dest__media img,
.mf-js [data-mf-anim].is-in .mf-card__media .ph,
.mf-js [data-mf-anim].is-in .mf-dest__media .ph {
  transform: scale(1);
  transition: transform 1200ms var(--mf-ease) var(--mf-delay, 0ms);
}

/* Legacy aliases so existing Elementor classes keep working. */
.mf-js .mf-reveal { opacity: 0; transform: translateY(44px); }
.mf-js .mf-reveal:has(img[fetchpriority="high"]) { opacity: 1; transform: none; }
.mf-js .mf-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 760ms var(--mf-ease), transform 860ms var(--mf-ease);
}
.mf-js .mf-stagger > * { opacity: 0; transform: translateY(52px) scale(.97); }
.mf-js .mf-stagger > *.is-in {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--mf-ease) var(--mf-delay, 0ms),
              transform 820ms var(--mf-ease) var(--mf-delay, 0ms);
}
.mf-js .mf-stagger > *.is-in .mf-card__media img,
.mf-js .mf-stagger > *.is-in .mf-dest__media img,
.mf-js .mf-stagger > *.is-in .mf-card__media .ph,
.mf-js .mf-stagger > *.is-in .mf-dest__media .ph {
  transform: scale(1);
  transition: transform 1200ms var(--mf-ease) var(--mf-delay, 0ms);
}
.mf-js .mf-stagger > * .mf-card__media img,
.mf-js .mf-stagger > * .mf-dest__media img,
.mf-js .mf-stagger > * .mf-card__media .ph,
.mf-js .mf-stagger > * .mf-dest__media .ph { transform: scale(1.14); }

/* No .mf-js class means JavaScript never ran: everything stays visible. */

/* Buttons */
.mf-btn {
  --btn-bg: var(--mf-clay);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .875rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: transform var(--mf-fast) var(--mf-ease),
              background-color var(--mf-fast) var(--mf-ease),
              box-shadow var(--mf-base) var(--mf-ease);
}
.mf-btn:hover { background: var(--mf-clay-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(193,98,43,.28); }
.mf-btn:active { transform: translateY(0); }
.mf-btn--ghost { --btn-bg: transparent; --btn-fg: var(--mf-ink); border-color: var(--mf-line); }
.mf-btn--ghost:hover { --btn-fg: #fff; background: var(--mf-indigo); border-color: var(--mf-indigo); box-shadow: 0 8px 20px rgba(27,58,92,.24); }
.mf-btn--indigo { --btn-bg: var(--mf-indigo); }
.mf-btn--indigo:hover { background: var(--mf-indigo-dark); box-shadow: 0 8px 20px rgba(27,58,92,.3); }

/* Animated text link */
.mf-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .875rem; letter-spacing: .03em;
  color: var(--mf-clay);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--mf-base) var(--mf-ease);
}
.mf-link:hover { background-size: 100% 1px; }
.mf-link svg { transition: transform var(--mf-base) var(--mf-ease); }
.mf-link:hover svg { transform: translateX(4px); }

/* 5. HEADER ================================================================ */
.mf-header {
  position: sticky; top: 0; z-index: 500;
  background: color-mix(in srgb, var(--mf-cream) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color var(--mf-base) var(--mf-ease),
              border-color var(--mf-base) var(--mf-ease),
              box-shadow var(--mf-base) var(--mf-ease);
}
@supports (backdrop-filter: blur(1px)) {
  .mf-header { backdrop-filter: saturate(150%) blur(14px); }
}
.mf-header.is-stuck {
  background: color-mix(in srgb, var(--mf-cream) 96%, transparent);
  border-bottom-color: var(--mf-line);
  box-shadow: 0 6px 24px rgba(23,20,15,.07);
}
.admin-bar .mf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mf-header { top: 46px; } }

/* Top strip */
.mf-topbar {
  background: var(--mf-indigo); color: #EDE6DA;
  font-size: .78rem; letter-spacing: .04em;
  transition: max-height var(--mf-base) var(--mf-ease), opacity var(--mf-base) var(--mf-ease);
  max-height: 46px; overflow: hidden;
}
.mf-header.is-stuck .mf-topbar { max-height: 0; opacity: 0; }
.mf-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.mf-topbar a { color: inherit; opacity: .85; transition: opacity var(--mf-fast); }
.mf-topbar a:hover { opacity: 1; }
.mf-topbar__tag { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.mf-topbar__tag svg { color: var(--mf-gold); }
@media (max-width: 700px) { .mf-topbar { display: none; } }

/* Main bar */
.mf-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: var(--mf-header-h);
  transition: height var(--mf-base) var(--mf-ease);
}
.mf-header.is-stuck .mf-bar { height: 62px; }

.mf-brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.mf-brand img { max-height: 46px; width: auto; transition: max-height var(--mf-base) var(--mf-ease); }
.mf-header.is-stuck .mf-brand img { max-height: 38px; }
.mf-brand__text {
  font-family: var(--mf-display); font-size: 1.45rem; font-weight: 700;
  font-variation-settings: "opsz" 144, "WONK" 1;
  letter-spacing: -.02em; line-height: 1;
}
.mf-brand__text em { font-style: normal; color: var(--mf-clay); }

/* Desktop nav */
.mf-nav { display: none; }
@media (min-width: 1060px) { .mf-nav { display: block; margin-inline: auto; } }
.mf-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .35rem; }
.mf-nav li { position: relative; }
.mf-nav a {
  display: block; padding: .6rem .85rem;
  font-size: .875rem; font-weight: 600; letter-spacing: .01em;
  color: var(--mf-ink-70);
  transition: color var(--mf-fast) var(--mf-ease);
}
.mf-nav a:hover, .mf-nav .current-menu-item > a, .mf-nav .current-menu-parent > a { color: var(--mf-clay); }
.mf-nav > ul > li > a::after {
  content: ""; display: block; height: 2px; width: 0; margin-top: 4px;
  background: var(--mf-clay); border-radius: 2px;
  transition: width var(--mf-base) var(--mf-ease);
}
.mf-nav > ul > li > a:hover::after,
.mf-nav > ul > li.current-menu-item > a::after,
.mf-nav > ul > li.current-menu-parent > a::after { width: 100%; }

/* Dropdown */
.mf-nav .sub-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  display: block; min-width: 250px; padding: .5rem;
  background: var(--mf-white); border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg); box-shadow: var(--mf-shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--mf-base) var(--mf-ease), transform var(--mf-base) var(--mf-ease), visibility var(--mf-base);
}
.mf-nav li:hover > .sub-menu,
.mf-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mf-nav .sub-menu li { display: block; }
.mf-nav .sub-menu a { padding: .6rem .8rem; border-radius: var(--mf-radius); font-weight: 500; }
.mf-nav .sub-menu a:hover { background: var(--mf-clay-soft); color: var(--mf-clay-dark); }
.mf-nav .menu-item-has-children > a { display: flex; align-items: center; gap: .3rem; }
.mf-nav .menu-item-has-children > a::before {
  content: ""; order: 2; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .5;
}

/* Header actions */
.mf-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.mf-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--mf-line);
  border-radius: 999px; cursor: pointer;
  transition: background-color var(--mf-fast), color var(--mf-fast), border-color var(--mf-fast), transform var(--mf-fast);
}
.mf-iconbtn:hover { background: var(--mf-indigo); border-color: var(--mf-indigo); color: #fff; transform: scale(1.06); }
.mf-actions .mf-btn { display: none; }
@media (min-width: 620px) { .mf-actions .mf-btn { display: inline-flex; } }
.mf-burger { display: inline-flex; }
@media (min-width: 1060px) { .mf-burger { display: none; } }
.mf-burger span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; transition: background-color var(--mf-fast); }
.mf-burger span::before, .mf-burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor;
  transition: transform var(--mf-base) var(--mf-ease);
}
.mf-burger span::before { top: -5px; }
.mf-burger span::after  { top: 5px; }

/* Search drawer */
.mf-searchdrawer {
  display: grid; grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  transition: grid-template-rows var(--mf-base) var(--mf-ease), border-color var(--mf-base);
}
.mf-searchdrawer.is-open { grid-template-rows: 1fr; border-top-color: var(--mf-line); }
.mf-searchdrawer__inner { overflow: hidden; }
.mf-searchdrawer form { display: flex; gap: .6rem; padding: 1.1rem 0; }

.mf-search-field {
  flex: 1; padding: .8rem 1.1rem;
  background: var(--mf-white); border: 1px solid var(--mf-line);
  border-radius: 999px; font-size: .95rem;
  transition: border-color var(--mf-fast), box-shadow var(--mf-fast);
}
.mf-search-field:focus { outline: none; border-color: var(--mf-clay); box-shadow: 0 0 0 3px rgba(193,98,43,.14); }

/* Mobile overlay */
.mf-drawer {
  position: fixed; inset: 0; z-index: 900;
  background: var(--mf-indigo); color: var(--mf-cream);
  display: flex; flex-direction: column;
  padding: 1.1rem var(--mf-gutter) 2.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity var(--mf-base) var(--mf-ease), transform var(--mf-base) var(--mf-ease), visibility var(--mf-base);
  overflow-y: auto;
}
.mf-drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.mf-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.mf-drawer__top .mf-iconbtn { border-color: rgba(247,242,234,.3); color: var(--mf-cream); }
.mf-drawer__top .mf-iconbtn:hover { background: var(--mf-clay); border-color: var(--mf-clay); }
.mf-drawer ul { list-style: none; margin: 0; padding: 0; }
.mf-drawer > nav > ul > li { border-bottom: 1px solid rgba(247,242,234,.13); }
.mf-drawer > nav > ul > li > a {
  display: block; padding: .9rem 0;
  font-family: var(--mf-display); font-size: 1.8rem; font-weight: 500;
  font-variation-settings: "opsz" 144, "WONK" 1;
  opacity: 0; transform: translateY(14px);
}
.mf-drawer.is-open > nav > ul > li > a { opacity: 1; transform: none; transition: opacity 420ms var(--mf-ease), transform 420ms var(--mf-ease); }
.mf-drawer.is-open > nav > ul > li:nth-child(1) > a { transition-delay: 60ms; }
.mf-drawer.is-open > nav > ul > li:nth-child(2) > a { transition-delay: 120ms; }
.mf-drawer.is-open > nav > ul > li:nth-child(3) > a { transition-delay: 180ms; }
.mf-drawer.is-open > nav > ul > li:nth-child(4) > a { transition-delay: 240ms; }
.mf-drawer.is-open > nav > ul > li:nth-child(5) > a { transition-delay: 300ms; }
.mf-drawer.is-open > nav > ul > li:nth-child(6) > a { transition-delay: 360ms; }
.mf-drawer.is-open > nav > ul > li:nth-child(n+7) > a { transition-delay: 420ms; }
.mf-drawer .sub-menu { padding: 0 0 .9rem .2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.mf-drawer .sub-menu a {
  display: block; padding: .4rem .85rem; font-size: .82rem; font-weight: 600;
  border: 1px solid rgba(247,242,234,.25); border-radius: 999px; color: rgba(247,242,234,.82);
  transition: background-color var(--mf-fast), color var(--mf-fast), border-color var(--mf-fast);
}
.mf-drawer .sub-menu a:hover { background: var(--mf-clay); border-color: var(--mf-clay); color: #fff; }
.mf-drawer__foot { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.mf-drawer__social { display: flex; gap: .7rem; }
.mf-drawer__social a {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(247,242,234,.25); border-radius: 999px;
  transition: background-color var(--mf-fast), border-color var(--mf-fast);
}
.mf-drawer__social a:hover { background: var(--mf-clay); border-color: var(--mf-clay); }

/* 6. HERO (used by archive/single headers) ================================= */
.mf-pagehero { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.mf-pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(201,162,75,.14), transparent 62%),
    radial-gradient(70% 100% at 92% 8%, rgba(27,58,92,.10), transparent 60%);
  pointer-events: none;
}
.mf-pagehero__inner { max-width: 880px; }
.mf-pagehero h1 { margin-bottom: .35em; }
.mf-pagehero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .84rem; color: var(--mf-ink-45); }

/* Breadcrumbs */
.mf-crumbs { font-size: .78rem; letter-spacing: .04em; color: var(--mf-ink-45); margin-bottom: 1.1rem; }
.mf-crumbs a { color: var(--mf-ink-70); transition: color var(--mf-fast); }
.mf-crumbs a:hover { color: var(--mf-clay); }
.mf-crumbs span[aria-hidden] { margin-inline: .45rem; opacity: .5; }

/* 7. CARDS & GRIDS ========================================================= */
.mf-grid { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
.mf-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mf-grid--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.mf-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.mf-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.mf-card__media {
  position: relative; overflow: hidden;
  border-radius: var(--mf-radius-lg); background: var(--mf-sand-deep);
  aspect-ratio: 4 / 3;
}
.mf-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--mf-ease), filter 600ms var(--mf-ease);
}
.mf-card:hover .mf-card__media img { transform: scale(1.06); }
.mf-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,40,63,.4), transparent 45%);
  opacity: 0; transition: opacity var(--mf-base) var(--mf-ease);
}
.mf-card:hover .mf-card__media::after { opacity: 1; }

.mf-card__tag {
  position: absolute; left: .9rem; top: .9rem; z-index: 2;
  padding: .32rem .75rem;
  background: color-mix(in srgb, var(--mf-cream) 92%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mf-clay-dark);
}
.mf-card__body { padding-top: 1.05rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.mf-card__title { font-size: var(--mf-step-1); margin: 0; line-height: 1.25; }
.mf-card__title a { background-image: linear-gradient(var(--mf-clay), var(--mf-clay)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size 420ms var(--mf-ease), color var(--mf-fast); }
.mf-card:hover .mf-card__title a { background-size: 100% 1px; color: var(--mf-clay-dark); }
.mf-card__excerpt { font-size: .92rem; color: var(--mf-ink-70); margin: 0; }
.mf-card__meta {
  margin-top: auto; padding-top: .7rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  font-size: .76rem; letter-spacing: .05em; color: var(--mf-ink-45);
}
.mf-card__meta span + span::before { content: "·"; margin-right: .8rem; opacity: .6; }

/* Destination card: the arch treatment */
.mf-dest { position: relative; display: block; }
.mf-dest__media { aspect-ratio: 3 / 4; background: var(--mf-sand-deep); }
.mf-dest__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--mf-ease); }
.mf-dest:hover .mf-dest__media img { transform: scale(1.07); }
.mf-dest__label { padding-top: .9rem; text-align: center; }
.mf-dest__label h3 { font-size: var(--mf-step-1); margin: 0 0 .15rem; }
.mf-dest__label p { font-size: .82rem; color: var(--mf-ink-45); margin: 0; }

/* Feature block */
.mf-feature { text-align: left; }
.mf-feature__icon {
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 1px solid var(--mf-line); border-radius: 14px;
  color: var(--mf-clay); background: var(--mf-white); margin-bottom: 1.1rem;
  transition: transform var(--mf-base) var(--mf-ease), background-color var(--mf-base), color var(--mf-base), border-color var(--mf-base);
}
.mf-feature:hover .mf-feature__icon { transform: translateY(-4px) rotate(-6deg); background: var(--mf-clay); border-color: var(--mf-clay); color: #fff; }
.mf-feature h3 { font-size: var(--mf-step-1); margin-bottom: .4rem; }
.mf-feature p { font-size: .92rem; color: var(--mf-ink-70); margin: 0; }

/* Section heading block */
.mf-head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.2rem); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem; }
.mf-head__text { max-width: 640px; }
.mf-head h2 { margin-bottom: .3em; }
.mf-head p { color: var(--mf-ink-70); margin: 0; font-size: .98rem; }

/* 8. ARCHIVE / SINGLE / COMMENTS =========================================== */
.mf-layout { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 4rem); align-items: start; }
@media (min-width: 1000px) { .mf-layout--sidebar { grid-template-columns: minmax(0, 1fr) 320px; } }

.mf-prose { max-width: var(--mf-width-text); font-size: 1.06rem; line-height: 1.78; color: #241F18; }
.mf-prose > * + * { margin-top: 1.3em; }
.mf-prose h2 { font-size: var(--mf-step-2); margin-top: 2.2em; margin-bottom: .55em; padding-top: .3em; }
.mf-prose h3 { font-size: var(--mf-step-1); margin-top: 1.8em; margin-bottom: .5em; }
.mf-prose h2 + p, .mf-prose h3 + p { margin-top: 0; }
.mf-prose a { color: var(--mf-clay-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(193,98,43,.4); transition: text-decoration-color var(--mf-fast), color var(--mf-fast); }
.mf-prose a:hover { color: var(--mf-clay); text-decoration-color: currentColor; }
.mf-prose img, .mf-prose figure img { border-radius: var(--mf-radius-lg); }
.mf-prose figure { margin: 2em 0; }
.mf-prose figcaption { font-size: .82rem; color: var(--mf-ink-45); text-align: center; margin-top: .7rem; }
.mf-prose ul, .mf-prose ol { padding-left: 1.3em; }
.mf-prose li + li { margin-top: .5em; }
.mf-prose ul { list-style: none; padding-left: 0; }
.mf-prose ul > li { position: relative; padding-left: 1.55em; }
.mf-prose ul > li::before {
  content: ""; position: absolute; left: .25em; top: .68em;
  width: 7px; height: 7px; background: var(--mf-gold); transform: rotate(45deg);
}
.mf-prose blockquote {
  margin: 2em 0; padding: 1.4em 1.6em;
  background: var(--mf-sand); border-left: 3px solid var(--mf-clay);
  border-radius: 0 var(--mf-radius-lg) var(--mf-radius-lg) 0;
  font-family: var(--mf-display); font-size: var(--mf-step-1); line-height: 1.5;
  font-variation-settings: "opsz" 144, "WONK" 1;
}
.mf-prose blockquote p:last-child { margin-bottom: 0; }
.mf-prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.mf-prose th, .mf-prose td { padding: .75rem .9rem; border-bottom: 1px solid var(--mf-line); text-align: left; }
.mf-prose th { background: var(--mf-sand); font-weight: 700; }
.mf-prose code { background: var(--mf-sand); padding: .15em .4em; border-radius: 3px; font-size: .9em; }
.mf-prose hr { border: 0; height: 1px; background: var(--mf-line); margin: 2.6em 0; }

.mf-featured { margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.mf-featured img { width: 100%; border-radius: var(--mf-radius-lg); box-shadow: var(--mf-shadow-md); }

.mf-share { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--mf-line); }
.mf-share__label { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mf-ink-45); margin-right: .3rem; }

.mf-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.6rem; }
.mf-tags a {
  padding: .35rem .8rem; font-size: .78rem; font-weight: 600;
  background: var(--mf-sand); border-radius: 999px; color: var(--mf-ink-70);
  transition: background-color var(--mf-fast), color var(--mf-fast);
}
.mf-tags a:hover { background: var(--mf-clay); color: #fff; }

.mf-authorbox {
  display: flex; gap: 1.2rem; align-items: flex-start;
  margin-top: 2.5rem; padding: 1.6rem;
  background: var(--mf-white); border: 1px solid var(--mf-line); border-radius: var(--mf-radius-lg);
}
.mf-authorbox img { border-radius: 999px; flex: none; }
.mf-authorbox h4 { margin: 0 0 .3rem; font-size: var(--mf-step-1); }
.mf-authorbox p { font-size: .9rem; color: var(--mf-ink-70); margin: 0; }

.mf-postnav { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .mf-postnav { grid-template-columns: 1fr 1fr; } }
.mf-postnav a {
  display: block; padding: 1.1rem 1.3rem;
  background: var(--mf-white); border: 1px solid var(--mf-line); border-radius: var(--mf-radius-lg);
  transition: border-color var(--mf-base), transform var(--mf-base) var(--mf-ease), box-shadow var(--mf-base);
}
.mf-postnav a:hover { border-color: var(--mf-clay); transform: translateY(-3px); box-shadow: var(--mf-shadow-sm); }
.mf-postnav small { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mf-ink-45); margin-bottom: .4rem; }
.mf-postnav span { font-family: var(--mf-display); font-size: 1.05rem; line-height: 1.3; }
.mf-postnav .is-next { text-align: right; }

/* Pagination */
.mf-pagination { margin-top: clamp(2.4rem, 2rem + 2vw, 4rem); }
.mf-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.mf-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: .8rem;
  border: 1px solid var(--mf-line); border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--mf-ink-70);
  transition: background-color var(--mf-fast), color var(--mf-fast), border-color var(--mf-fast), transform var(--mf-fast);
}
.mf-pagination .page-numbers:hover { border-color: var(--mf-clay); color: var(--mf-clay); transform: translateY(-2px); }
.mf-pagination .page-numbers.current { background: var(--mf-indigo); border-color: var(--mf-indigo); color: #fff; }
.mf-pagination .dots { border-color: transparent; }

/* Comments */
.mf-comments { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--mf-line); }
.mf-comments ol { list-style: none; margin: 0; padding: 0; }
.mf-comments .children { list-style: none; padding-left: clamp(1rem, 4vw, 2.6rem); }
.mf-comments .comment-body { padding: 1.3rem 0; border-bottom: 1px solid var(--mf-line); }
.mf-comments .comment-author { display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: .92rem; }
.mf-comments .comment-author img { border-radius: 999px; }
.mf-comments .comment-metadata { font-size: .76rem; color: var(--mf-ink-45); margin: .3rem 0 .8rem; }
.mf-comments .reply { font-size: .8rem; font-weight: 700; }
.mf-comments .reply a { color: var(--mf-clay); }
.comment-form { display: grid; gap: .9rem; margin-top: 1.6rem; }
.comment-form label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mf-ink-45); display: block; margin-bottom: .35rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; padding: .8rem 1rem;
  background: var(--mf-white); border: 1px solid var(--mf-line); border-radius: var(--mf-radius);
  transition: border-color var(--mf-fast), box-shadow var(--mf-fast);
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--mf-clay); box-shadow: 0 0 0 3px rgba(193,98,43,.13); }
.comment-form .submit {
  justify-self: start; padding: .85rem 1.7rem;
  background: var(--mf-clay); color: #fff; border: 0; border-radius: 999px;
  font-weight: 700; font-size: .875rem; cursor: pointer;
  transition: background-color var(--mf-fast), transform var(--mf-fast);
}
.comment-form .submit:hover { background: var(--mf-clay-dark); transform: translateY(-2px); }

/* 9. SIDEBAR & WIDGETS ===================================================== */
.mf-sidebar { position: sticky; top: calc(var(--mf-header-h) + 24px); display: grid; gap: 1.5rem; }
.mf-widget { padding: 1.4rem; background: var(--mf-white); border: 1px solid var(--mf-line); border-radius: var(--mf-radius-lg); }
.mf-widget .widget-title, .mf-widget h2 {
  font-family: var(--mf-body); font-size: .74rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mf-clay);
  margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--mf-line);
}
.mf-widget ul { list-style: none; margin: 0; padding: 0; }
.mf-widget li + li { margin-top: .55rem; }
.mf-widget a { font-size: .93rem; color: var(--mf-ink-70); transition: color var(--mf-fast), padding-left var(--mf-fast); }
.mf-widget a:hover { color: var(--mf-clay); padding-left: 4px; }

/* 10. FOOTER & FLOATING UI ================================================= */
.mf-footer { position: relative; background: var(--mf-indigo); color: #D9D2C6; padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) 0; margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.mf-footer__band { position: absolute; top: 0; left: 0; right: 0; height: 10px; color: var(--mf-gold); opacity: .55; }
.mf-footer__grid { display: grid; gap: 2.4rem; }
@media (min-width: 760px)  { .mf-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1060px) { .mf-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }
.mf-footer h4 {
  color: var(--mf-gold);
  font-family: var(--mf-body); font-size: .72rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 1.1rem;
}
.mf-footer p { font-size: .9rem; line-height: 1.75; color: rgba(217,210,198,.82); }
.mf-footer ul { list-style: none; margin: 0; padding: 0; }
.mf-footer li + li { margin-top: .6rem; }
.mf-footer a { font-size: .9rem; color: rgba(217,210,198,.85); transition: color var(--mf-fast), padding-left var(--mf-fast); }
.mf-footer a:hover { color: #fff; }
.mf-footer nav a:hover { padding-left: 5px; }
/* A coloured logo on the dark footer is knocked back to a white silhouette.
   That flattens detail, so it can be switched off in the Customizer. */
.mf-footer__brand img {
  max-height: 52px;
  width: auto;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
  opacity: .92;
}
.mf-footer__social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.mf-footer__social a {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border: 1px solid rgba(217,210,198,.28); border-radius: 999px;
  transition: background-color var(--mf-fast), border-color var(--mf-fast), transform var(--mf-fast);
}
.mf-footer__social a:hover { background: var(--mf-clay); border-color: var(--mf-clay); color: #fff; transform: translateY(-3px); }
.mf-footer__news p { margin-bottom: 1rem; }
.mf-footer__bottom {
  margin-top: 3rem; padding-block: 1.4rem;
  border-top: 1px solid rgba(217,210,198,.16);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; align-items: center;
  font-size: .8rem; color: rgba(217,210,198,.72);
}

/* Reading progress */
.mf-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 600; background: transparent; pointer-events: none; }
.mf-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--mf-clay), var(--mf-gold)); transform-origin: 0 50%; }

/* Back to top */
.mf-totop {
  position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); z-index: 550;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--mf-indigo); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: var(--mf-shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--mf-base) var(--mf-ease), transform var(--mf-base) var(--mf-ease), visibility var(--mf-base), background-color var(--mf-fast);
}
.mf-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.mf-totop:hover { background: var(--mf-clay); }

/* Accordion (FAQ) */
.mf-acc { border-top: 1px solid var(--mf-line); }
.mf-acc__item { border-bottom: 1px solid var(--mf-line); }
.mf-acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--mf-display); font-size: var(--mf-step-1); font-weight: 600;
  font-variation-settings: "opsz" 144, "WONK" 1;
  transition: color var(--mf-fast);
}
.mf-acc__btn:hover { color: var(--mf-clay); }
.mf-acc__sign { position: relative; flex: none; width: 20px; height: 20px; }
.mf-acc__sign::before, .mf-acc__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%); transition: transform var(--mf-base) var(--mf-ease), opacity var(--mf-base);
}
.mf-acc__sign::before { width: 14px; height: 1.5px; }
.mf-acc__sign::after  { width: 1.5px; height: 14px; }
.mf-acc__item.is-open .mf-acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.mf-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mf-base) var(--mf-ease); }
.mf-acc__item.is-open .mf-acc__panel { grid-template-rows: 1fr; }
.mf-acc__panel > div { overflow: hidden; }
.mf-acc__panel p:first-child { padding-top: .2rem; }
.mf-acc__panel > div > :last-child { margin-bottom: 1.3rem; }

/* Newsletter block */
.mf-news {
  position: relative; overflow: hidden;
  padding: clamp(2.2rem, 1.6rem + 3vw, 4rem) clamp(1.4rem, 1rem + 3vw, 3.5rem);
  background: var(--mf-sand); border-radius: var(--mf-radius-lg); text-align: center;
}
.mf-news__pattern { position: absolute; inset: 0; opacity: .12; color: var(--mf-clay); pointer-events: none; }
.mf-news > * { position: relative; }
.mf-news form { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 520px; margin: 1.6rem auto 0; }
.mf-news input[type="email"] { flex: 1 1 240px; }

/* 404 / empty states */
.mf-empty { text-align: center; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.mf-empty h1 { font-size: var(--mf-step-5); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .mf-reveal, .mf-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* Print */
@media print {
  .mf-header, .mf-footer, .mf-totop, .mf-progress, .mf-sidebar, .mf-share { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   11. HERO — full-bleed image, split-colour headline, flight search
   ========================================================================== */
.mf-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(92vh, 820px);
  overflow: hidden;
  isolation: isolate;
}
.mf-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mf-hero__bg img,
.mf-hero__bg > .mf-hero__ph {
  width: 100%; height: 100%; object-fit: cover; display: block;
  will-change: transform;
}
.mf-hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(18,40,63,.34) 0%, rgba(18,40,63,.20) 35%, rgba(18,40,63,.78) 100%),
    linear-gradient(to right, rgba(18,40,63,.30), transparent 55%);
}
.mf-hero__inner {
  position: relative; z-index: 3;
  padding-block: clamp(4.5rem, 3rem + 7vw, 8rem) clamp(3rem, 2rem + 4vw, 5rem);
  text-align: center;
}
.mf-hero .mf-eyebrow { color: var(--mf-gold); }
.mf-hero .mf-eyebrow::before { background: var(--mf-gold); }
.mf-hero__title {
  color: #fff;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5.2rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 auto .5rem;
  max-width: 18ch;
  text-shadow: 0 2px 30px rgba(10,22,36,.4);
}
.mf-hero__title em { display: block; font-style: normal; color: var(--mf-gold); }
.mf-hero__sub {
  color: rgba(255,255,255,.88);
  font-size: var(--mf-step-1);
  max-width: 46ch;
  margin: 0 auto;
  text-shadow: 0 1px 16px rgba(10,22,36,.45);
}
.mf-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.7rem; }
.mf-hero__actions .mf-btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.mf-hero__actions .mf-btn--ghost:hover { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }

.mf-hero__scroll {
  position: absolute; left: 50%; bottom: 1.2rem; z-index: 4;
  transform: translateX(-50%);
  display: grid; place-items: center; gap: .45rem;
  color: rgba(255,255,255,.75);
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  animation: mf-bob 2.4s var(--mf-ease) infinite;
}
@keyframes mf-bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ==========================================================================
   12. FLIGHT SEARCH CARD
   ========================================================================== */
.mf-flights {
  position: relative;
  margin: clamp(2rem, 1.4rem + 3vw, 3.2rem) auto 0;
  max-width: 940px;
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem);
  text-align: left;
  background: rgba(14,32,52,.62);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(8,20,34,.42);
}
@supports (backdrop-filter: blur(1px)) {
  .mf-flights { backdrop-filter: blur(18px) saturate(140%); background: rgba(14,32,52,.48); }
}
.mf-flights::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--mf-gold), transparent);
  border-radius: 2px;
}
.mf-flights__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: 1rem;
}
.mf-flights__title {
  display: flex; align-items: center; gap: .6rem;
  color: #fff; font-family: var(--mf-display); font-size: 1.3rem; font-weight: 600;
  font-variation-settings: "opsz" 144, "WONK" 1;
  margin: 0;
}
.mf-flights__title svg { color: var(--mf-gold); flex: none; }
.mf-flights__note { display: block; font-family: var(--mf-body); font-size: .74rem; font-weight: 500; color: rgba(255,255,255,.6); letter-spacing: .02em; margin-top: .2rem; }
.mf-flights__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.mf-flights__chips button,
.mf-flights__chips a {
  padding: .35rem .8rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  color: rgba(255,255,255,.85);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  cursor: pointer;
  transition: background-color var(--mf-fast), border-color var(--mf-fast), color var(--mf-fast), transform var(--mf-fast);
}
.mf-flights__chips button:hover,
.mf-flights__chips a:hover,
.mf-flights__chips button.is-active {
  background: var(--mf-clay); border-color: var(--mf-clay); color: #fff; transform: translateY(-2px);
}

.mf-flights__panel {
  padding: clamp(.9rem, .7rem + .8vw, 1.3rem);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(9,22,38,.32);
}
.mf-flights__row { display: grid; gap: .8rem; }
.mf-flights__row + .mf-flights__row { margin-top: .8rem; }
@media (min-width: 760px) {
  .mf-flights__row--2 { grid-template-columns: 1fr 1fr; }
  .mf-flights__row--3 { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
}
.mf-field { display: block; }
.mf-field > span {
  display: block; margin-bottom: .3rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .06em;
  color: rgba(255,255,255,.62);
}
.mf-field__control { position: relative; }
.mf-field input,
.mf-field select {
  width: 100%;
  padding: .78rem 2.4rem .78rem .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px;
  color: #fff;
  font-size: .95rem;
  appearance: none;
  transition: border-color var(--mf-fast), background-color var(--mf-fast), box-shadow var(--mf-fast);
}
.mf-field input::placeholder { color: rgba(255,255,255,.45); }
.mf-field input:focus,
.mf-field select:focus {
  outline: none;
  border-color: var(--mf-gold);
  background: rgba(255,255,255,.11);
  box-shadow: 0 0 0 3px rgba(201,162,75,.2);
}
.mf-field select option { color: #17140F; }
.mf-field__hint {
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  color: rgba(255,255,255,.5); pointer-events: none;
}
.mf-flights__submit { width: 100%; }
@media (min-width: 760px) { .mf-flights__submit { width: auto; min-width: 150px; height: 46px; } }

/* Slot for a third-party widget script (Travelpayouts, Aviasales, Kiwi…) */
.mf-flights__embed { min-height: 60px; }
.mf-flights__embed iframe { width: 100% !important; border: 0; border-radius: 10px; }

/* ==========================================================================
   13. SECTION HEADING WITH RULE
   ========================================================================== */
.mf-head--rule { display: block; margin-bottom: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.mf-head--rule h2 { color: var(--mf-indigo); margin-bottom: .5rem; }
.mf-head--rule::after {
  content: ""; display: block; height: 1px;
  background: linear-gradient(90deg, var(--mf-indigo) 0%, var(--mf-gold) 32%, rgba(222,210,190,.5) 70%, transparent 100%);
}

/* Title-only card variant */
.mf-card--plain .mf-card__body { padding-top: .95rem; }
.mf-card--plain .mf-card__title { font-size: var(--mf-step-1); line-height: 1.28; }

/* ==========================================================================
   14. FOOTER ORNAMENT
   A repeating background strip, not an inline SVG element, so nothing can
   stretch it. Height is fixed in CSS and the motif tiles horizontally.
   ========================================================================== */
.mf-footer { padding-top: 0; }
.mf-footer__ornament {
  height: 14px;
  background-color: var(--mf-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cg fill='none' stroke='%23C9A24B' stroke-width='1.1'%3E%3Cpath d='M-36 7 C -24 -1, -12 -1, 0 7 C 12 15, 24 15, 36 7 C 48 -1, 60 -1, 72 7 C 84 15, 96 15, 108 7'/%3E%3Cpath d='M-36 7 C -24 15, -12 15, 0 7 C 12 -1, 24 -1, 36 7 C 48 15, 60 15, 72 7 C 84 -1, 96 -1, 108 7'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 72px 14px;
}
.mf-footer--no-ornament .mf-footer__ornament { display: none; }
.mf-footer__body { padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) 0; }

.mf-footer__bottom a { color: rgba(217,210,198,.85); }
.mf-footer__bottom a:hover { color: var(--mf-gold); }
.mf-footer__contact { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .04em; }
.mf-footer__contact svg { color: var(--mf-gold); }

/* ==========================================================================
   15. TOP BAR CLOCK
   ========================================================================== */
.mf-topbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.mf-topbar__clock {
  /* Pinned to the middle column. Without this it slides left whenever the
     tagline or the top-bar menu is absent, because an empty grid cell is
     not created for a missing child. */
  grid-column: 2;
  justify-self: center; text-align: center;
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .76rem; font-variant-numeric: tabular-nums; letter-spacing: .05em;
  color: rgba(237,230,218,.9);
}
.mf-topbar__clock svg { color: var(--mf-gold); flex: none; }
.mf-topbar__clock b { font-weight: 600; }
.mf-topbar__clock small { opacity: .6; font-size: .68rem; letter-spacing: .1em; }
.mf-topbar__inner > nav { grid-column: 3; justify-self: end; }
.mf-topbar__tag { grid-column: 1; }
@media (max-width: 900px) { .mf-topbar__clock small { display: none; } }

/* ==========================================================================
   16. NAVIGATION AND WORDMARK
   ========================================================================== */
.mf-brand__mark { flex: none; color: var(--mf-clay); }
.mf-brand__mark svg { width: 34px; height: 34px; transition: transform var(--mf-base) var(--mf-ease); }
.mf-brand:hover .mf-brand__mark svg { transform: rotate(-6deg) scale(1.06); }
.mf-header.is-stuck .mf-brand__mark svg { width: 28px; height: 28px; }

.mf-brand__text {
  font-family: var(--mf-display);
  font-size: clamp(1.5rem, 1.3rem + .5vw, 1.85rem);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--mf-ink);
  transition: font-size var(--mf-base) var(--mf-ease);
}
.mf-header.is-stuck .mf-brand__text { font-size: 1.45rem; }
.mf-brand__text em { font-style: normal; color: var(--mf-clay); }

/* Navigation reads as editorial rather than app-like. */
.mf-nav a {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: .6rem .95rem;
  color: var(--mf-ink);
}
body.mf-nav-serif .mf-nav a {
  font-family: var(--mf-display);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: -.01em;
}
body.mf-nav-serif .mf-drawer > nav > ul > li > a { font-size: 2rem; }
.mf-nav .sub-menu a { font-size: .98rem; }
.mf-nav > ul { gap: .5rem; }
@media (min-width: 1060px) and (max-width: 1180px) {
  .mf-nav a { font-size: .96rem; padding-inline: .7rem; }
}

/* ==========================================================================
   17. FLIGHT CARD — light surface so the Travelpayouts widget stays legible
   ========================================================================== */
.mf-flights {
  position: relative;
  margin: clamp(1.8rem, 1.4rem + 2.4vw, 3rem) auto 0;
  max-width: 1000px;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem) clamp(1.2rem, .9rem + 1.6vw, 2.5rem);
  text-align: center;
  background: var(--mf-white);
  border: 1px solid rgba(222,210,190,.9);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(18,40,63,.22), 0 2px 8px rgba(18,40,63,.08);
  overflow: hidden;
  backdrop-filter: none;
}
.mf-flights::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--mf-clay) 0%, var(--mf-gold) 50%, var(--mf-indigo) 100%);
}

.mf-flights__head { display: block; margin-bottom: 1.4rem; }
.mf-flights__title {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin: 0;
  color: var(--mf-indigo);
  font-family: var(--mf-display);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "WONK" 1;
  line-height: 1.2;
}
.mf-flights__title svg { color: var(--mf-clay); flex: none; }
.mf-flights__note {
  display: block; margin-top: .45rem;
  font-family: var(--mf-body); font-size: .95rem; font-weight: 400;
  color: var(--mf-ink-70); letter-spacing: 0;
}
@media (max-width: 640px) {
  .mf-flights__title { flex-direction: column; gap: .5rem; }
}

.mf-flights__chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 1rem; }
.mf-flights__chips button {
  padding: .38rem .85rem;
  background: var(--mf-sand);
  border: 1px solid var(--mf-line);
  border-radius: 999px;
  color: var(--mf-ink-70);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  cursor: pointer;
  transition: background-color var(--mf-fast), border-color var(--mf-fast), color var(--mf-fast), transform var(--mf-fast);
}
.mf-flights__chips button:hover,
.mf-flights__chips button.is-active {
  background: var(--mf-clay); border-color: var(--mf-clay); color: #fff; transform: translateY(-2px);
}

.mf-flights__panel { text-align: left; }
.mf-flights__panel--embed { padding: 0; border: 0; background: none; }
.mf-flights__embed { min-height: 96px; }
.mf-flights__embed iframe { width: 100% !important; border: 0; }

.mf-flights__error { margin: .6rem 0 0; font-size: .9rem; color: var(--mf-clay-dark); text-align: center; }
.mf-flights__fallback { margin: 0; }

/* Native mode fields sit on the light card now. */
.mf-flights__panel:not(.mf-flights__panel--embed) {
  padding: clamp(.9rem, .7rem + .8vw, 1.3rem);
  border: 1px solid var(--mf-line);
  border-radius: 12px;
  background: var(--mf-cream);
}
.mf-field > span { color: var(--mf-ink-45); }
.mf-field input, .mf-field select {
  background: var(--mf-white);
  border-color: var(--mf-line);
  color: var(--mf-ink);
}
.mf-field input::placeholder { color: var(--mf-ink-45); }
.mf-field input:focus, .mf-field select:focus {
  border-color: var(--mf-clay);
  background: var(--mf-white);
  box-shadow: 0 0 0 3px rgba(193,98,43,.16);
}
.mf-field__hint { color: var(--mf-ink-45); }
.mf-field select option { color: var(--mf-ink); }

/* Hero copy sits above a light card, so keep the overlay strong enough. */
.mf-hero__bg::after {
  background:
    linear-gradient(to bottom, rgba(18,40,63,.42) 0%, rgba(18,40,63,.30) 30%, rgba(18,40,63,.72) 100%),
    linear-gradient(to right, rgba(18,40,63,.34), transparent 60%);
}


/* Plane icon keeps a gentle cruise so the card feels alive without nagging. */
.mf-icon-plane { animation: mf-cruise 3.6s var(--mf-ease) infinite; transform-origin: 50% 50%; }
@keyframes mf-cruise {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  35%      { transform: translate(2px, -3px) rotate(6deg); }
  70%      { transform: translate(-1px, 1px) rotate(-3deg); }
}
.mf-flights__title:hover .mf-icon-plane { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .mf-icon-plane { animation: none; } }


/* ==========================================================================
   18. CARD IMAGE SIZING
   Elementor ships `.elementor img { height: auto }` at the same specificity
   as the card rules and loads after the theme, so it wins and object-fit
   stops working: every image then keeps its natural height and the arch is
   only partly filled. These selectors carry one more class and settle it
   without resorting to !important.
   ========================================================================== */
.mf-dest .mf-dest__media img,
.mf-dest .mf-dest__media .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mf-card .mf-card__media img,
.mf-card .mf-card__media .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mf-featured .mf-parallax img { width: 100%; height: 100%; object-fit: cover; }
.mf-hero .mf-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

/* The media box owns the shape; the image only fills it. */
.mf-dest .mf-dest__media { aspect-ratio: 3 / 4; overflow: hidden; }
.mf-card .mf-card__media { aspect-ratio: 4 / 3; overflow: hidden; }

/* ==========================================================================
   19. HORIZONTAL RAIL
   Native scrolling with snap points. The arrows are an enhancement: remove
   the JavaScript and the rail still scrolls by touch, trackpad, and keyboard.
   ========================================================================== */
.mf-rail { position: relative; }

.mf-rail__track {
  display: flex;
  gap: clamp(1rem, .7rem + 1.2vw, 1.75rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 4px;
  /* Room for the focus ring and the hover lift. */
  margin-inline: -4px;
  padding-inline: 4px;
}
.mf-rail__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .mf-rail__track { scroll-behavior: auto; } }

.mf-rail__track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
  /* Three cards plus a sliver of the fourth, so the row reads as scrollable
     without needing the arrows to explain it. */
  width: calc((100% - 3 * clamp(1rem, .7rem + 1.2vw, 1.75rem)) / 3.25);
}
@media (max-width: 1000px) {
  .mf-rail__track > * { width: calc((100% - 2 * clamp(1rem, .7rem + 1.2vw, 1.75rem)) / 2.25); }
}
@media (max-width: 640px) {
  .mf-rail__track > * { width: calc(100% - 3.2rem); }
}

/* Edge fades hint at content continuing past the viewport. */
.mf-rail::before,
.mf-rail::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: clamp(24px, 4vw, 56px);
  pointer-events: none; z-index: 2;
  opacity: 0;
  transition: opacity var(--mf-base) var(--mf-ease);
}
.mf-rail::before {
  left: 0;
  background: linear-gradient(to right, var(--mf-section-bg, var(--mf-cream)), transparent);
}
.mf-rail::after {
  right: 0;
  background: linear-gradient(to left, var(--mf-section-bg, var(--mf-cream)), transparent);
}
.mf-rail.can-prev::before { opacity: 1; }
.mf-rail.can-next::after  { opacity: 1; }
.mf-section--sand .mf-rail { --mf-section-bg: var(--mf-sand); }

/* Controls */
.mf-rail__nav {
  display: flex; justify-content: flex-end; gap: .5rem;
  margin-top: 1.2rem;
}
.mf-rail__btn {
  width: 46px; height: 46px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid var(--mf-line);
  border-radius: 999px;
  color: var(--mf-ink);
  cursor: pointer;
  transition: background-color var(--mf-fast), border-color var(--mf-fast),
              color var(--mf-fast), transform var(--mf-fast), opacity var(--mf-fast);
}
.mf-rail__btn:hover:not(:disabled) {
  background: var(--mf-indigo); border-color: var(--mf-indigo);
  color: #fff; transform: translateY(-2px);
}
.mf-rail__btn:disabled { opacity: .3; cursor: default; }
/* Nothing to scroll: the controls remove themselves rather than sit dead. */
.mf-rail:not(.is-scrollable) .mf-rail__nav { display: none; }

/* Cards inside a rail keep their proportions. */
.mf-rail__track .mf-dest__media { width: 100%; }

/* Centred variant of the feature blocks. */
.mf-features--center .mf-feature { text-align: center; }
.mf-features--center .mf-feature__icon { margin-inline: auto; }


/* ==========================================================================
   20. FOOTER AND TOP BAR WHEN PARTS ARE MISSING
   A column that has nothing in it should collapse rather than leave a hole.
   ========================================================================== */
.mf-footer__grid { grid-auto-flow: row; align-items: start; }
.mf-footer__grid > div:empty { display: none; }
.mf-footer p:empty { display: none; }
.mf-footer__brand h4 + p:empty { margin: 0; }

/* With fewer than four columns the grid should not stretch them oddly. */
@media (min-width: 1060px) {
  .mf-footer__grid { grid-template-columns: 2fr repeat(auto-fit, minmax(160px, 1fr)); }
}

/* The bottom row stacks cleanly on a phone. */
@media (max-width: 560px) {
  .mf-footer__bottom { flex-direction: column; align-items: flex-start; gap: .9rem; }
}


/* ==========================================================================
   21. TOP BAR MENU
   wp_nav_menu prints a plain <ul>, so without a reset the browser adds a
   bullet and a 40px indent. That is the stray dot, and the reason the link
   sat further from the edge than the button above it.
   ========================================================================== */
.mf-topbar__menu,
.mf-topbar__inner nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.mf-topbar__menu li,
.mf-topbar__inner nav li { margin: 0; }
.mf-topbar__menu li::marker,
.mf-topbar__inner nav li::marker { content: ""; }

/* Small, quiet, and matching the tagline on the other side. */
.mf-topbar__inner nav a {
  font-family: var(--mf-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
}
.mf-topbar__inner nav a:hover { color: var(--mf-gold); opacity: 1; }
.mf-topbar__menu .sub-menu { display: none; }


/* ==========================================================================
   22. ARCHIVE AND POST HEADERS
   Long headings were breaking in awkward places: `balance` optimises for
   equal line lengths, which on a two or three word title can split a phrase
   mid-thought. `pretty` only avoids orphans, which is what these need.
   ========================================================================== */
.mf-pagehero h1 {
  text-wrap: pretty;
  hyphens: none;
}
.mf-pagehero .mf-lede,
.mf-pagehero__inner > div { max-width: 62ch; }
.mf-pagehero__inner { width: 100%; }

/* Article titles run long. Let them use the full measure of their container
   and step the size down, rather than stacking six short lines. */
.single .mf-pagehero h1,
.page .mf-pagehero h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.4rem);
  line-height: 1.12;
  max-width: none;
}

/* The two-column header is for archives, where a term description sits
   beside the title. On a single post the right column would be empty and the
   title would be squeezed into half the width for no reason. */
@media (min-width: 1000px) {
  .archive .mf-pagehero__inner,
  .search .mf-pagehero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(2rem, 4vw, 4rem);
    max-width: none;
  }
  .archive .mf-pagehero__inner > .mf-crumbs,
  .archive .mf-pagehero__inner > .mf-eyebrow,
  .search .mf-pagehero__inner > .mf-crumbs,
  .search .mf-pagehero__inner > .mf-eyebrow { grid-column: 1 / -1; }
  .archive .mf-pagehero__inner > h1,
  .search .mf-pagehero__inner > h1 { grid-column: 1; margin-bottom: 0; max-width: 22ch; }
  .archive .mf-pagehero__inner > .mf-lede,
  .archive .mf-pagehero__inner > div:not(.mf-pagehero__meta),
  .search .mf-pagehero__inner > .mf-lede { grid-column: 2; padding-bottom: .4rem; }
}

/* ==========================================================================
   23. READING TYPOGRAPHY
   Two presets, switched from Customize > MoroFun options > Typography.
   The display face is shared; only the reading face changes.
   ========================================================================== */
:root { --mf-prose-font: var(--mf-body); }

body.mf-type-editorial {
  --mf-prose-font: "Newsreader", Georgia, "Times New Roman", serif;
}

.mf-prose { font-family: var(--mf-prose-font); }

/* --- Editorial preset ---------------------------------------------------- */
body.mf-type-editorial .mf-prose {
  font-size: clamp(1.1rem, 1.03rem + .3vw, 1.22rem);
  line-height: 1.66;
  letter-spacing: -.003em;
  color: #211C15;
  max-width: 68ch;
}

/* Article headings share the reading face so the page reads as one voice.
   The display face stays for the hero and section titles, where its
   character is an asset rather than a distraction at every subhead. */
body.mf-type-editorial .mf-prose h2,
body.mf-type-editorial .mf-prose h3,
body.mf-type-editorial .mf-prose h4,
body.mf-type-editorial .single .mf-pagehero h1,
body.mf-type-editorial .mf-card__title,
body.mf-type-editorial .mf-acc__btn {
  font-family: var(--mf-prose-font);
  font-variation-settings: normal;
  font-weight: 600;
  letter-spacing: -.012em;
}
body.mf-type-editorial .mf-prose h2 { font-size: clamp(1.45rem, 1.25rem + .9vw, 2rem); }
body.mf-type-editorial .mf-prose h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); }
body.mf-type-editorial .mf-prose blockquote {
  font-family: var(--mf-prose-font);
  font-variation-settings: normal;
  font-weight: 400;
  font-style: italic;
}

/* Fraunces keeps its hand-cut character in the hero, and drops it elsewhere
   so repeated headings stay calm. */
body.mf-type-editorial h1,
body.mf-type-editorial h2,
body.mf-type-editorial h3 { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }
body.mf-type-editorial .mf-hero__title { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1; }

/* --- Rhythm, both presets ------------------------------------------------ */

/* Every paragraph reads the same. A larger opening paragraph works for a two
   or three line standfirst; on a six line introduction it stops reading as a
   signal and just looks like a differently coloured block. */

/* Air before a new section, tighter after it, so the page has a pulse
   instead of one even grey block. */
.mf-prose h2 { position: relative; margin-top: 2.4em; }

/* A vertical gold rule runs the height of the heading, in the left margin.
   It reads as a section marker anchored to the title, where a floating
   horizontal dash had nothing to attach itself to. The heading text stays
   flush with the paragraphs; only the rule sits outside the column. */
@media (min-width: 900px) {
  .mf-prose h2::before {
    content: "";
    position: absolute;
    left: -1.6rem;
    top: .1em;
    bottom: .12em;
    width: 2px;
    background: var(--mf-gold);
    opacity: .9;
    border-radius: 2px;
  }
}
.mf-prose h2 + p,
.mf-prose h3 + p { margin-top: .1em; }

/* Links inside articles read as invitations rather than noise. */
.mf-prose p > a { font-weight: 500; }

/* Lists get room to breathe next to the running text. */
.mf-prose ul, .mf-prose ol { margin-block: 1.5em; }

/* Images and quotes break the column deliberately. */
.mf-prose > figure, .mf-prose > blockquote { margin-block: 2.4em; }

@media (min-width: 1100px) {
  /* A pull quote may reach a little past the measure, which is the classic
     magazine device for interrupting a long read. */
  .mf-prose > blockquote { margin-inline: -2.5rem 0; }
}

/* --- Modern preset ------------------------------------------------------- */
body.mf-type-modern .mf-prose {
  font-size: 1.06rem;
  line-height: 1.78;
  max-width: var(--mf-width-text);
}


/* Room on the left for the hanging rule, without shifting the text. */
@media (min-width: 900px) {
  .mf-container--narrow .mf-prose { padding-left: 1.6rem; margin-left: -1.6rem; }
}