/* ==========================================================================
   Launch Labs — "Magda-red" (standalone experiment). An editorial variant of
   the founder moment that EMERGES from the red-circle takeover ending the
   Problem section: same #D92632 canvas, so the handoff is red -> red with no
   seam or flash. Oversized monochrome Magda cut-out on the left, bleeding past
   the viewport edges; near-black type with white used only on the key idea.
   Palette is strictly RED + BLACK + WHITE + MAGDA. No gradients, glass, cards,
   icons or decoration.

   Reveal is a restrained, eased entrance (js/magda-red.js adds .is-armed then
   .is-in): Magda slides in from the left, then the question, the setup line and
   the dominant statement, grouped (never word-by-word). Once formed it all
   stays visible. No JS / reduced motion: everything is simply shown, static.

   IMAGE: written for a transparent cut-out at image/magda-cutout.png (bottom-
   anchored, cropped past the edges, red showing directly around her). The live
   markup currently points at the rectangular magda3.jpg as an honest visible
   placeholder (grayscale + contrast) until that asset exists — NOT a faked
   CSS background removal. All namespaced .magda-red; touches nothing else.
   ========================================================================== */

.magda-red {
  position: relative;
  min-height: 100vh;
  background: #D92632;   /* exact match to the takeover's final red */
  color: #010202;
  overflow: hidden;      /* the oversized portrait crops at the viewport edges */
  display: flex;
  align-items: center;
}

.magda-red__inner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* copy sits to the right; portrait is full-bleed left */
}

/* ---- Oversized monochrome Magda — a cut-out, not a framed photo ---------
   Full-bleed against the section (not the padded copy column), anchored to the
   bottom and taller than the viewport so she crops naturally top/left. No box,
   frame or circle: the red stays visible directly around her. */
.magda-red__portrait {
  position: absolute;
  left: 0;
  bottom: 0;
  /* Supporting, not leading: ~30-35% of the composition, anchored bottom-left
     with plenty of red above it. */
  width: clamp(26%, 32vw, 34%);
  height: min(78vh, 42rem);
  margin: 0;
  z-index: 1;
  pointer-events: none;
}
.magda-red__portrait img {
  position: absolute;
  left: -3%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  /* Strong black-and-white treatment. With the transparent cut-out this reads
     as an editorial figure on red; with the placeholder photo it's a smaller
     grayscale rectangle (obviously a placeholder). */
  filter: grayscale(1) contrast(1.15);
}

/* ---- Typography: one confident quotation, the hero of the section --------
   Same typeface, colour and treatment throughout; weight alone gives a subtle
   hierarchy between the two sentences. Near-black on red, no accent colours. */
.magda-red__copy {
  position: relative;
  z-index: 2;            /* above the portrait where they meet */
  width: min(64%, 52rem);
  /* Generous red negative space around the quotation. */
  padding: clamp(2rem, 5vw, 4rem) clamp(2rem, 6vw, 6rem) clamp(2rem, 5vw, 4rem) 0;
}

.magda-red__quote { margin: 0; }

/* Both sentences: one large statement. Weight is the only difference. */
.magda-red__q {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: #010202;
  max-width: 20ch;
}
.magda-red__q--1 { font-weight: 500; }
.magda-red__q--2 { font-weight: 700; margin-top: 0.35em; }

/* Attribution — understated. */
.magda-red__attrib { margin-top: clamp(2rem, 4vw, 3.25rem); }
.magda-red__name {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: -0.005em;
  color: #010202;
}
.magda-red__role {
  margin: 0.3rem 0 0;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 1.15vw, 1rem);
  letter-spacing: 0.03em;
  color: rgba(1, 2, 2, 0.72);
}

/* ---- Reveal ------------------------------------------------------------
   Default state is fully visible (so no-JS / JS-off still shows everything).
   js/magda-red.js adds .is-armed (hides + offsets), then .is-in (reveals),
   giving a smooth eased entrance that then simply holds. */
.magda-red__portrait,
.magda-red__quote,
.magda-red__attrib {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.magda-red.is-armed .magda-red__portrait { opacity: 0; transform: translateX(-7%); }
.magda-red.is-armed .magda-red__quote,
.magda-red.is-armed .magda-red__attrib { opacity: 0; transform: translateY(16px); }

/* Reading order: the quote leads, Magda supports, then the attribution. */
.magda-red.is-in .magda-red__quote   { opacity: 1; transform: none; transition-delay: 0.1s; }
.magda-red.is-in .magda-red__portrait{ opacity: 1; transform: none; transition-delay: 0.35s; }
.magda-red.is-in .magda-red__attrib  { opacity: 1; transform: none; transition-delay: 0.6s; }

/* ==========================================================================
   Mobile — portrait on top (still oversized/cropped), copy beneath. Considered,
   not a shrunk desktop split.
   ========================================================================== */
@media (max-width: 52rem) {
  .magda-red__inner { display: block; }

  /* Quote leads on mobile too: it sits above a supporting band of Magda. */
  .magda-red__inner { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

  .magda-red__portrait {
    position: relative;
    width: 100%;
    height: clamp(18rem, 40vh, 26rem);
    left: auto;
    bottom: auto;
    overflow: hidden;          /* crop within the band on mobile */
  }
  .magda-red__portrait img {
    left: 50%;
    height: 112%;
    transform: translateX(-50%);
  }
  /* keep the reveal offset from fighting the mobile centring transform */
  .magda-red.is-armed .magda-red__portrait { transform: translateY(14px); }
  .magda-red.is-in .magda-red__portrait { transform: none; }

  .magda-red__copy {
    width: auto;
    padding: clamp(2.5rem, 9vw, 4rem) clamp(1.5rem, 6vw, 2rem) clamp(2rem, 7vw, 3rem);
  }
  .magda-red__q { font-size: clamp(1.9rem, 8vw, 3rem); max-width: none; }
}