/* --- home: the working-theory plate ---------------------------------------
   Scoped to .mf-* and nothing else. This is a block of its own, not the tail
   of the cream sheet above: it carries a deeper sand where the board and the
   Top 5 plate carry #f7f1e2, so the page reads "chapter ends, new chapter"
   instead of one endless field of the same paper. The drawing is pure vector:
   it scales to any width and stays sharp on a retina screen.
   ------------------------------------------------------------------------ */

.mf {
  position: relative;
  overflow: hidden;
  /* Deliberately NOT #f7f1e2. That value is the sheet the board and the Top 5
     plate share; matching it made this section read as a third chapter of the
     same sheet, with no edge of its own. One step deeper, and the block closes. */
  background: #f2e9d6;
  /* A block that has its own edge needs its own breathing room at the top: the
     hairline of padding used while it was joined to the plate above would now
     push the eyebrow against a visible boundary. */
  padding: clamp(52px, 5.2vw, 80px) 0 clamp(48px, 4.8vw, 70px);
  color: #2c3327;
}

/* Decoration only. The glow that used to sit here is gone with the gradient:
   on a flat cream field a large soft ellipse shows its own edge as a faint
   horizontal smudge, which is the same class of artefact a seam is. */
.mf__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mf__lamp {
  position: absolute;
  top: -4px;
  right: clamp(36px, 7vw, 118px);
  width: clamp(66px, 7vw, 100px);
  height: auto;
  opacity: 0.92;
}

.mf__shelf {
  position: absolute;
  top: clamp(74px, 9vw, 132px);
  right: -46px;
  width: clamp(160px, 18vw, 256px);
  height: auto;
  opacity: 0.45;
}

.mf__grid {
  position: relative;
  z-index: 1;
  /* Phones and tablets keep the plain page grid. The narrowing below is a
     desktop-only decision and lives in its own media query, so nothing here
     moves at 900px and under. */
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 5vw;
}

.mf__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(10px, 1.6vw, 22px);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7161;
}

.mf__eyebrow::after {
  content: "";
  flex: none;
  width: clamp(28px, 4vw, 62px);
  height: 1px;
  background: #b7bba6;
}

.mf__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(22px, 3.2vw, 54px);
  align-items: center;
}

.mf__art {
  margin: 0;
  min-width: 0;
}

.mf__art svg,
.mf__art img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- the argument ------------------------------------------------------- */

.mf__copy {
  min-width: 0;
}

.mf__title {
  margin: 0;
  font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  font-size: clamp(31px, 3.85vw, 53px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.038em;
  color: #2c3327;
  max-width: 15ch;
}

.mf__title em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.99em;
  letter-spacing: -0.028em;
  line-height: 1.06;
  color: #414a3b;
}

.mf__squiggle {
  display: block;
  width: clamp(168px, 19vw, 244px);
  height: auto;
  margin: 10px 0 0 2px;
  color: #e8753f;
}

.mf__body {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.72;
  color: #4f5648;
}

.mf__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 2.2vw, 30px);
  padding: 15px 26px;
  border-radius: 999px;
  background: #33402e;
  color: #f8f3e6;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mf__cta:hover {
  background: #46543c;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(34, 46, 30, 0.9);
}

.mf__arrow {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.mf__cta:hover .mf__arrow {
  transform: translateX(3px);
}

/* --- the four-line footer strip ---------------------------------------- */

.mf__band {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) repeat(4, minmax(0, 1fr));
  align-items: stretch;
  margin-top: clamp(28px, 3.6vw, 52px);
  padding: clamp(18px, 2.1vw, 28px) clamp(16px, 2.2vw, 32px);
  border-radius: 26px;
  /* Lighter than the plate it sits on, not darker: on the old flat cream the
     strip was a shade deeper, but the section is deeper now and a darker strip
     would have sunk into its own background. */
  background: #fbf5e7;
}

.mf__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-right: clamp(10px, 1.4vw, 22px);
}

.mf__spark {
  width: clamp(26px, 2.4vw, 34px);
  height: auto;
  color: #e8753f;
  margin-bottom: 8px;
}

.mf__leadtext {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 1.72vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #2c3327;
}

.mf__underline {
  width: clamp(96px, 9vw, 132px);
  height: auto;
  margin-top: 6px;
  color: #e8753f;
}

.mf__point {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 2px clamp(8px, 1.1vw, 16px);
  border-left: 1px solid rgba(44, 51, 39, 0.14);
  text-align: center;
}

.mf__icon {
  display: block;
  width: clamp(32px, 3vw, 40px);
  color: #3a4232;
}

.mf__icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.mf__pointtext {
  margin: 0;
}

.mf__pointtext b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: #2c3327;
}

.mf__pointtext span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: #6d7264;
}

/* --- desktop layout -----------------------------------------------------
   Scoped to the two-column layout, so the phone version is untouched.

   The drawing leads on the left and the argument answers on the right — the
   same order the reader meets them on the illustration itself ("Not a big
   deal" on one side, "until it happens every day" on the other). It is also
   what fills the block: at 880 of content the row was a small drawing and a
   headline with a field of empty sand on both sides.
   ------------------------------------------------------------------------ */

@media (min-width: 901px) {
  /* Expressed as "1440px of content plus its two gutters" rather than a flat
     max-width: with box-sizing: border-box a flat number would let the content
     grow and shrink with the viewport, which flipped the strip's labels
     between one and two lines for no visible reason. */
  .mf__grid {
    max-width: calc(1440px + 2 * clamp(24px, 3vw, 48px));
    padding: 0 clamp(24px, 3vw, 48px);
  }

  /* Drawing on the left, argument on the right, and the drawing wins the
     wider cell: it is the reason the block exists, and at 880 the illustration
     was a stamp next to a headline that owned the row. */
  .mf__cols {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

  /* The strip is narrower here too, so the lead cell needs a bigger share and
     a slightly smaller signature to stay on two lines instead of three. */
  .mf__band {
    grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr));
  }

  .mf__leadtext {
    font-size: clamp(18px, 1.4vw, 21px);
  }

  /* Cell padding is viewport-based while the column is fixed at 880, so on a
     big screen the cells lost 20px of text room to padding and one label slid
     onto a third line for no reason a reader could see. Cap it. */
  .mf__point {
    padding: 2px clamp(6px, 1vw, 12px);
  }
}

/* --- narrower ----------------------------------------------------------- */

@media (max-width: 1279px) {
  /* Not enough gutter for room decoration: the lamp would sit on the headline
     and the shelf behind the paragraph. Both are decoration, so they go. */
  .mf__lamp,
  .mf__shelf {
    display: none;
  }
}

@media (max-width: 900px) {
  /* Five cells still fit at 900 — it is the labels that stop fitting, not the
     grid. Below that the strip goes two-up and the lead takes its own row. */
  .mf__band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
  }
  .mf__lead {
    grid-column: span 2;
    padding: 0 0 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(44, 51, 39, 0.14);
  }
  .mf__point:nth-child(even) {
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .mf__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .mf__art {
    /* Stacked, the drawing leads: it is the argument, the words explain it.
       It runs the full width of the column — capped, the desk it stands on
       ended in a hard edge halfway across the page. */
    max-width: none;
  }
  .mf__title {
    max-width: 14ch;
    font-size: clamp(30px, 8vw, 44px);
  }
  .mf__body {
    max-width: 60ch;
  }
}

@media (max-width: 620px) {
  .mf__band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px 16px;
    border-radius: 20px;
  }
  .mf__point {
    padding: 4px 6px;
  }
  .mf__pointtext b {
    font-size: 13px;
  }
  .mf__pointtext span {
    font-size: 12px;
  }
}