/* ==========================================================================
   About
   Loaded only by src/pages/about.njk (front matter: pageCss: about).

   One section. The page is deliberately short — it states the positioning the
   rest of the site already carries and gives the footer's About link somewhere
   to go — so it borrows the hero shape every other page uses rather than
   inventing furniture of its own.

   Shared furniture (.mf-btn*, .mf-eyebrow, .mf-grad-text) comes from
   framework/components.css. Colour, type, radius and shadow all come from
   tokens — see theme-mediflare.css and framework/tokens.css. No raw hex below
   except inside the glow's gradient ramp, where the stops are the design.
   ========================================================================== */

.mf-ab-hero {
  position: relative;
  overflow: clip;
  padding: 132px 48px 120px;
  text-align: center;
}

.mf-ab-hero__wrap {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 720px;
  margin-inline: auto;
}

/* The same warm bloom behind the copy the other page heads carry, so a reader
   arriving here from one of them lands somewhere that looks related. */
.mf-ab-hero__glow {
  position: absolute;
  z-index: 0;
  inline-size: min(720px, 110%);
  aspect-ratio: 1;
  inset-inline-start: 50%;
  inset-block-start: 30%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(232 84 10 / 0.22) 0%,
    rgb(240 120 40 / 0.12) 38%,
    rgb(248 178 112 / 0.05) 62%,
    rgb(248 178 112 / 0) 78%
  );
  filter: blur(80px);
  pointer-events: none;
}

.mf-ab-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(34px, 3.5vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 20px 0 0;
  text-wrap: balance;
}

.mf-ab-hero__lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin: 26px auto 0;
}

/* A step down from the lead: the lead is the claim, this is the detail under
   it, and they should not weigh the same. */
.mf-ab-hero__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 18px auto 0;
}

.mf-ab-hero__ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-block-start: 36px;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 780px) {
  .mf-ab-hero { padding: 96px 22px 88px; }
  .mf-ab-hero__lead { font-size: 17px; }
}

@media (max-width: 560px) {
  .mf-ab-hero__ctas .mf-btn { inline-size: 100%; }
}