.mf-lower, .mf-lower h1, .mf-lower h2, .mf-lower h3, .mf-lower h4, .mf-lower h5 { text-transform: lowercase; }
.mf-rounded img { border-radius: 6px; }
.mf-eyebrow, .mf-eyebrow p {
  margin: 0;
  font-family: "Cormorant Unicase", Georgia, serif;
  font-size: 12px;
  line-height: 0px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #520654;
}
.io-eyebrow, .io-eyebrow p {
  margin: 0;
  font-family: "Fauna One", Georgia, serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #957C99;
}
/* ==========================================================
   Mafanikio Brands — long-form reading style
   For privacy policy, terms, articles, blog posts.
   Apply by adding the class  mf-longform  to the Section
   (or Text element) in Advanced → Class Suffix.
   ========================================================== */

/* 1. Ubuntu is already loaded on the site. If a weight below looks
      faked (smeared bold, slanted instead of true italic), un-comment
      this line and keep it first in the stylesheet:
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap");
*/

/* 2. Font and colors in one place: change these to restyle everything */
.mf-longform {
  --lf-font: "Ubuntu", system-ui, sans-serif;
  --lf-text: #3d3329;     /* brown — body text */
  --lf-heading: #3d3329;  /* brown — headings */
  --lf-muted: #6e6a60;    /* gray — dates, captions */
  --lf-accent: #523956;   /* plum — links, quote rule */
  --lf-line: #bab4a2;     /* light gray — dividers */

  font-family: var(--lf-font);
  color: var(--lf-text);
  max-width: 720px;       /* comfortable reading width (~70 characters) */
  margin-left: 0;
  margin-right: auto;
}

/* 3. Headings */
.mf-longform h1,
.mf-longform h2,
.mf-longform h3,
.mf-longform h4 {
  font-family: var(--lf-font);
  color: var(--lf-heading);
  text-transform: none;   /* sentence case; overrides the Lowvetica lowercase rule */
  letter-spacing: 0;
  margin: 0;
}
.mf-longform h1 { font-size: 40px; line-height: 48px; font-weight: 500; margin-bottom: 16px; }
.mf-longform h2 { font-size: 28px; line-height: 36px; font-weight: 500; margin-top: 48px; margin-bottom: 12px; }
.mf-longform h3 { font-size: 21px; line-height: 28px; font-weight: 500; margin-top: 32px; margin-bottom: 8px; }
.mf-longform h4 { font-size: 18px; line-height: 26px; font-weight: 500; margin-top: 24px; margin-bottom: 8px; }

/* 4. Body text */
.mf-longform p,
.mf-longform li {
  font-family: var(--lf-font);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  color: var(--lf-text);
}
.mf-longform p { margin: 0 0 20px; }

.mf-longform strong,
.mf-longform b { font-weight: 500; }

.mf-longform em,
.mf-longform i { font-style: italic; }

/* Lead paragraph / effective date / byline */
.mf-longform .lf-lead { font-size: 21px; line-height: 32px; }
.mf-longform .lf-meta { font-size: 15px; line-height: 24px; font-weight: 300; color: var(--lf-muted); }

/* 5. Lists */
.mf-longform ul,
.mf-longform ol { margin: 0 0 20px; padding-left: 24px; }
.mf-longform li { margin-bottom: 8px; }
.mf-longform li::marker { color: var(--lf-accent); }

/* 6. Links */
.mf-longform a {
  color: var(--lf-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.mf-longform a:hover { color: var(--lf-text); }
.mf-longform a:focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }

/* 7. Quotes and dividers */
.mf-longform blockquote {
  margin: 32px 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--lf-accent);
  font-size: 21px;
  line-height: 32px;
  font-style: italic;
}
.mf-longform hr {
  border: 0;
  border-top: 1px solid var(--lf-line);
  margin: 40px 0;
}

/* 8. Phones */
@media (max-width: 480px) {
  .mf-longform h1 { font-size: 32px; line-height: 40px; }
  .mf-longform h2 { font-size: 24px; line-height: 32px; margin-top: 40px; }
  .mf-longform h3 { font-size: 19px; line-height: 26px; }
  .mf-longform p,
  .mf-longform li { font-size: 16px; line-height: 26px; }
  .mf-longform blockquote { font-size: 19px; line-height: 30px; }
}