/* ===================================================================
   MADAME MONET — THE JOYFUL REBELLION
   The homepage, rebuilt 23 August 2026 to her ruling: get away from
   the whole five-door thing. The five keep a little presence and the
   page itself carries the rebellion.

   Written narrow first, at 379. Every section drawn to the glass has
   a fixed proportion, so a tall window never turns it into a tube.
   Nothing here sits under 12px. No word ever lies on a photograph.
   Every ground changes under the one above it.
   =================================================================== */

:root {
  --rb-hot:     #F5152B;   /* her red */
  --rb-scarlet: #FF3B24;
  --rb-pink:    #FF1E8E;
  --rb-magenta: #FF2FB4;
  --rb-cerise:  #FF2A63;
  --rb-orange:  #FF6A1F;
  /* The deepest of her purples, and it exists because she struck the wine.
     On her orange her red reads at 1.46 and her pink at 1.26 — neither can be
     seen at all — and her cream and her plum both sit under 3. This reads at
     5.5, so writing can go on orange again. It is a violet rather than the
     maroon she struck. */
  --rb-deep:    #F5152B;   /* HER RED. She struck the wine, then the purple, then black outright. */
  /* THE SOFTER ONE SHE ASKED FOR. Her orange taken right down until it is a
     ground rather than a colour — warm where her cream is cool and her blush
     is pink, so the three pales are three different rooms rather than three
     shades of nearly-white. Her deep ink reads 13.34 on it. */
  --rb-warm:    #FFE7D6;
  --rb-blush:   #FFEDF4;
  --rb-cream:   #FFF8F3;
  --rb-ink:     #F5152B;   /* HER RED. She struck the wine, then the purple, then black outright. */   /* her deep purple. The maroon that stood here is struck. */

  --rb-rise: cubic-bezier(.16,.84,.34,1);
}

/* The air and the margins, declared at the root so any piece of this
   sheet used outside the homepage still has them. The money heading was
   built inside .rb and then reused on Why This Matters, where both were
   undefined — so its padding fell to nothing and the line ran off the
   edge of her pane. A variable that only exists in one place is a
   component that only works in one place. */
:root {
  --rb-air: clamp(3rem, 11vw, 7rem);
  --rb-side: clamp(1.15rem, 5.5vw, 4.5rem);
}

.rb {
  --rb-air: clamp(3rem, 11vw, 7rem);
  --rb-side: clamp(1.15rem, 5.5vw, 4.5rem);
}

.rb section { position: relative; }

/* ---------- Type, sized from the narrow end ---------- */

.rb-huge {
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0;
  font-size: clamp(2.35rem, 11.5vw, 6.2rem);
}

.rb-big {
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 1.06;
  margin: 0;
  font-size: clamp(1.9rem, 8.6vw, 4.2rem);
}

.rb-sub {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin: 0;
  font-size: clamp(1.02rem, 4.4vw, 1.7rem);
}

.rb-eyebrow {
  font-family: var(--mm-label);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: var(--mm-sub-weight, 600);
  font-size: clamp(0.7rem, 2.9vw, 0.86rem);
  margin: 0 0 1.1rem;
}

.rb-read {
  font-family: var(--mm-read);
  font-size: clamp(1.06rem, 4.3vw, 1.28rem);
  line-height: 1.62;
  margin: 0;
}

/* ===================================================================
   1 · THE ARRIVAL — THE COLOUR RISES
   Hers, chosen 23 August 2026 from five ways put in front of her:
   straight up, the whole width at once. Her words: from the bottom
   up, great.

   And the reason is hers as well, and it is why the direction carries
   meaning rather than taste: because we want to rise as women. It is
   the rise of the matriarchy — a line that belongs to Aunt Tea, is
   hers, and stays off this page. It lives here as the reason only.

   The crowd stands there drained and quiet. The colour rises from the
   bottom edge, the full width at once, and every woman it passes comes
   into full colour behind it. Five and a half seconds, travelling
   evenly rather than rushing the middle — the slowing is the whole
   difference between a decision she could not make and one she made in
   a sentence, so the timing is hers rather than a setting.

   It begins when the picture is genuinely in view rather than on load,
   so a woman who arrives partway down the page still sees it happen.
   =================================================================== */

.rb-arrival { background: var(--rb-blush); }

.rb-pour {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--rb-blush);
}

@media (min-width: 700px)  { .rb-pour { aspect-ratio: 4 / 3; } }
@media (min-width: 1100px) { .rb-pour { aspect-ratio: 2 / 1; } }

.rb-pour img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

/* The quiet version underneath. Warm rather than grey, so the room
   still reads as a room while it waits. */
.rb-js .rb-pour__base {
  filter: saturate(0.12) contrast(0.94) brightness(1.12) sepia(0.18);
}

/* The full colour on top, laid down behind the rising edge. */
.rb-js .rb-pour__full { clip-path: inset(100% 0 0 0); }

.rb-js .rb-arrival.is-here .rb-pour__full {
  animation: rb-rise 5500ms cubic-bezier(.38,.06,.32,1) 260ms forwards;
}

@keyframes rb-rise { to { clip-path: inset(0 0 0 0); } }

/* The wash rides the rising edge, strongest at the top of the band so
   the colour reads as carried up rather than faded in. It passes over
   her women and never covers them. */
.rb-pour__wash {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -8%;
  height: 56%;
  pointer-events: none;
  transform: translateY(100%);
  opacity: 0;
  background: linear-gradient(0deg,
    rgba(255,106,31,0)    0%,
    rgba(255,106,31,.06) 30%,
    rgba(255,30,142,.20) 58%,
    rgba(245,21,43,.46)  82%,
    rgba(255,90,40,.80)  94%,
    rgba(255,196,150,.6) 99%,
    rgba(255,240,225,0) 100%);
}

.rb-js .rb-arrival.is-here .rb-pour__wash {
  animation: rb-wash 5500ms cubic-bezier(.38,.06,.32,1) 260ms forwards;
}

@keyframes rb-wash {
  0%   { transform: translateY(100%); opacity: 0; }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-165%); opacity: 0; }
}

/* And the ground beneath fills with her red as the colour reaches the
   top of the picture. */
.rb-arrival__words {
  background: var(--rb-hot);
  color: var(--rb-cream);
  padding: clamp(2.2rem, 8.5vw, 4.4rem) var(--rb-side) clamp(2.5rem, 9vw, 4.8rem);
  text-align: center;
}

/* The ground under her hero stays pale. It used to fill with red as the
   colour reached the top, which was right when the words there were cream
   — and it made her red line invisible the moment she asked for one.
   Red on red. Found by looking at the rendered page. */

/* The thread of orange she keeps, drawn under the words. */
.rb-rule {
  width: 3.4rem;
  height: 4px;
  background: var(--rb-orange);
  border: 0;
  border-radius: 999px;
  margin: clamp(1.4rem, 5vw, 2.1rem) auto 0;
}

/* ===================================================================
   2 · THE LINE THAT NAMES THE WHOLE BUSINESS
   One word picked out in orange, exactly as she drew it herself.
   =================================================================== */

.rb-money {
  background: var(--rb-pink);
  color: var(--rb-cream);
  padding: var(--rb-air) var(--rb-side);
  text-align: center;
}

.rb-money b { color: var(--rb-orange); font-weight: inherit; }

.rb-money .rb-read {
  margin: clamp(1.2rem, 5vw, 1.9rem) auto 0;
  max-width: 34ch;
}

/* ===================================================================
   3 · THE REFUSAL
   The number belongs to the people who measure. The refusal is hers.
   =================================================================== */

.rb-refusal {
  background: var(--rb-cream);
  color: var(--rb-ink);
  padding: var(--rb-air) var(--rb-side);
}

.rb-refusal__inner { max-width: 34ch; margin: 0 auto; }

.rb-refusal .rb-eyebrow { color: var(--rb-cerise); }

.rb-refusal__said {
  font-family: var(--mm-read);
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  line-height: 1.6;
  color: #7A4257;
  margin: 0 0 1.6rem;
}

.rb-refusal .rb-big { color: var(--rb-hot); }

.rb-refusal__then {
  display: block;
  color: var(--rb-cerise);
}

/* ===================================================================
   4 · HER SENTENCE
   Held perfectly still. One line, its own screen, and no other work
   asked of it. This is the screen a man reads and stays for.
   =================================================================== */

.rb-hers {
  background: var(--rb-orange);
  color: var(--rb-deep);
  padding: calc(var(--rb-air) * 1.25) var(--rb-side);
  text-align: center;
}

.rb-hers blockquote {
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--mm-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 8vw, 3.6rem);
  line-height: 1.14;
}

.rb-hers cite {
  display: block;
  margin-top: clamp(1.6rem, 6vw, 2.6rem);
  font-family: var(--mm-label);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(0.7rem, 2.8vw, 0.82rem);
  color: #FFC7EA;
}

/* ===================================================================
   6 · THE FIVE, AS FIVE SENTENCES
   A little presence rather than a wall of cards. No two sit the same
   way, no two carry the same ground, and the picture belongs to only
   two of them so the rhythm never settles into a pattern.
   =================================================================== */

.rb-five {
  background: var(--rb-cream);
  /* Nothing stands above the five now, so the ground above them carries
     the pause the heading used to. */
  padding: clamp(1.6rem, 6vw, 3rem) 0 calc(var(--rb-air) * 0.4);
}

.rb-five__head {
  padding: 0 var(--rb-side) clamp(2rem, 8vw, 3.4rem);
  text-align: center;
  color: var(--rb-ink);
}

.rb-five__head .rb-eyebrow { color: var(--rb-cerise); }
.rb-five__head .rb-big { color: var(--rb-hot); }

.rb-one {
  display: block;
  text-decoration: none;
  color: var(--rb-cream);
  position: relative;
}

.rb-one__words { padding: clamp(1.7rem, 7vw, 3rem) var(--rb-side); }

.rb-one__name {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(0.86rem, 3.5vw, 1.05rem);
  margin: 0 0 0.7rem;
  opacity: 0.88;
}

.rb-one__said {
  font-family: var(--mm-display);
  font-weight: 400;
  font-size: clamp(1.42rem, 6.4vw, 2.5rem);
  line-height: 1.13;
  margin: 0;
  max-width: 18ch;
}

.rb-one__go {
  display: inline-block;
  margin-top: 1.15rem;
  font-family: var(--mm-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.72rem, 2.9vw, 0.84rem);
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.28rem;
}

.rb-one--a { background: var(--rb-scarlet); }
.rb-one--b { background: var(--rb-pink); }
.rb-one--c { background: var(--rb-cerise); }
.rb-one--d { background: var(--rb-magenta); }
.rb-one--e { background: var(--rb-hot); }

/* ---- Five photographs, five ways of sitting. No two alike. ---- */

/* One · edge to edge, above the words. */
.rb-one--over img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Two · words first, then the photograph with air all round it. */
.rb-one--under img {
  width: calc(100% - (var(--rb-side) * 2));
  margin: 0 var(--rb-side) clamp(1.9rem, 7vw, 3rem);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: clamp(14px, 4vw, 26px);
}

/* Three · the photograph crosses the join into the ground below. */
.rb-one--cross { padding-bottom: 0; }
.rb-one--cross img {
  position: relative;
  z-index: 2;
  width: calc(100% - (var(--rb-side) * 2));
  margin: 0 var(--rb-side) calc(clamp(2.4rem, 9vw, 4rem) * -1);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: clamp(14px, 4vw, 26px);
}
.rb-one--cross + .rb-one { padding-top: clamp(3.4rem, 12vw, 5.6rem); }

/* Four · a small square set to one side, and the block is off balance. */
.rb-one--aside {
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: center;
  gap: clamp(0.9rem, 4vw, 2rem);
  padding: clamp(1.7rem, 7vw, 3rem) var(--rb-side);
}
.rb-one--aside img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }
.rb-one--aside .rb-one__words { padding: 0; }
.rb-one--aside .rb-one__said { font-size: clamp(1.18rem, 5.2vw, 2.1rem); }

/* Five · the photograph takes the band, the words hold a strip of their own. */
.rb-one--whole img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 28%; }
.rb-one--whole .rb-one__words { padding: clamp(1.4rem, 5.5vw, 2.4rem) var(--rb-side); }

@media (min-width: 760px) {
  .rb-one--over, .rb-one--under { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .rb-one--over img, .rb-one--under img { aspect-ratio: 4 / 3; margin: 0; width: 100%; }
  .rb-one--under img { border-radius: 0; }
  .rb-one--under .rb-one__words { order: 2; }
  .rb-one--aside { grid-template-columns: 26% 1fr; }
  .rb-one--whole { display: grid; grid-template-columns: 3fr 2fr; align-items: center; }
  .rb-one--whole img { aspect-ratio: 4 / 3; }
}

/* The one that stays blank until she writes on it. */
.rb-yours {
  background: var(--rb-blush);
  color: var(--rb-ink);
  padding: clamp(2.2rem, 8vw, 3.6rem) var(--rb-side);
  text-align: center;
}

.rb-yours .rb-one__name { color: var(--rb-cerise); opacity: 1; }
.rb-yours .rb-one__said { color: var(--rb-hot); margin: 0 auto; }
.rb-yours .rb-read { margin-top: 1rem; color: #7A4257; }

/* ===================================================================
   AND NOW, MONEY
   Hers, 23 August 2026: so, now we talk, and then about money — should
   it change to money?

   It does. The heading arrives reading Monet and rests there long
   enough to be read. Then one letter turns, T to Y, in place. The rest
   of the word never shifts, never re-flows, never fades. It happens
   once, and a woman who scrolls back finds Money sitting there.

   It marks rather than celebrates — no bounce, no sparkle, no
   overshoot. This is the turn of her whole argument.

   The truth of the word is what a screen reader is given, and the
   word without the script is Money, so a page that never runs it is
   still saying the true one.
   =================================================================== */

.rb-now {
  background: var(--rb-cream);
  color: var(--rb-ink);
  padding: var(--rb-air) var(--rb-side);
  text-align: center;
}

.rb-now .rb-big {
  color: var(--rb-hot);
  font-size: clamp(1.6rem, 7.4vw, 4.2rem);
  overflow-wrap: break-word;
}
.rb-now b { color: var(--rb-orange); font-weight: inherit; }

.rb-now .rb-read {
  margin: clamp(1.2rem, 5vw, 1.9rem) auto 0;
  max-width: 36ch;
  color: var(--rb-ink);
}

/* At rest, and wherever the script never runs, the word is Money. */
.rb-turn { position: relative; display: inline-block; }
/* The word never breaks, or the letter that turns falls to its own line. */
.rb-turnhead b, .rb-getting__h b, .rb-money b, .rb-now b { white-space: nowrap; }
.rb-turn__t { display: none; }
.rb-turn__y { opacity: 1; }

/* Only with the script does it begin on Monet, and the script is what
   turns it back. The Y stays in the flow and holds the width, so the
   letter that changes is the only part of the line that moves. */
.rb-js .rb-turn__t {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
}

.rb-js .rb-turn__y { opacity: 0; }

/* The turn belongs to the heading rather than to one section. It was keyed
   to .rb-now, so the first of the two — the one she reads first, on her
   table — sat on Monet and never turned. Read back off the page rather than
   assumed. 23 August. */
/* Hers: you should see it as you scroll — you're scrolling, you'll see it.
   So the turn belongs to how far down the page she is rather than to how
   many seconds have passed. She reads Monet, keeps moving, and somewhere
   in that movement it becomes Money. A woman reading slowly gets the whole
   sentence; a woman moving fast still catches the change. There is no hold
   to be too quick, because there is no clock at all.

   The pink T is the letter that is going to change and it says so quietly
   before anything happens. The Y that replaces it is her orange. */
.rb-turn__t { color: var(--rb-pink); }
.rb-turn__y { color: var(--rb-orange); }

/* The t is narrower than the y — 16.5 against 21.6 at her width — and
   both were sitting hard left inside a box the y's width. So the letter
   drifted left of centre and the word appeared to grow rightward as it
   turned. That is the catch she felt. The t is centred over the y now,
   so the change happens on the spot.

   And the handover is quick rather than a long dissolve. A slow
   crossfade dips through a moment where neither letter is really there,
   which reads as a blink; a short one reads as the letter turning,
   which is what she asked for and what she loved. */
.rb-js .rb-turnhead .rb-turn__t {
  display: block;
  left: 0;
  right: 0;
  text-align: center;
  opacity: calc( 1 - ( var( --turn, 0 ) - 0.47 ) * 16 );
}

.rb-js .rb-turnhead .rb-turn__y {
  opacity: calc( ( var( --turn, 0 ) - 0.47 ) * 16 );
}

@media (prefers-reduced-motion: reduce) {
  .rb-js .rb-turnhead .rb-turn__t { opacity: 0; }
  .rb-js .rb-turnhead .rb-turn__y { opacity: 1; }
}

@keyframes rb-t-goes { to { opacity: 0; } }
@keyframes rb-y-comes { to { opacity: 1; } }

/* ===================================================================
   7 · THE CLOSE
   =================================================================== */

.rb-close {
  background: var(--rb-orange);
  color: var(--rb-cream);
  padding: var(--rb-air) var(--rb-side);
  text-align: center;
}

.rb-close .rb-read { margin: 1.2rem auto 0; max-width: 40ch; }

.rb-call {
  display: inline-block;
  margin-top: clamp(1.6rem, 6vw, 2.4rem);
  background: var(--rb-cream);
  color: var(--rb-hot);
  font-family: var(--mm-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.8rem, 3.2vw, 0.95rem);
  font-weight: var(--mm-sub-weight, 600);
  text-decoration: none;
  padding: 1rem 1.8rem;
  border-radius: 999px;
}

/* ---------- The arrival of each section ---------- */

/* The hidden state lives behind .rb-js on <html>, which only the script
   adds, and only once the observer that restores it exists. Without
   JavaScript, every section is simply here. */
.rb-js .rb [data-rb] { opacity: 0; transform: translateY(30px); }
.rb-js .rb [data-rb].is-here { opacity: 1; transform: none; transition: opacity 820ms var(--rb-rise), transform 820ms var(--rb-rise); }

/* ---------- And every bit of it holds still where she asks it to ---------- */

@media (prefers-reduced-motion: reduce) {
  /* The colour is already here, the ground is already red, and the
     wash never travels. She sees the finished screen at once. */
  .rb-js .rb-pour__base { filter: none; }
  .rb-js .rb-pour__full, .rb-js .rb-arrival.is-here .rb-pour__full { clip-path: none; animation: none; }
  .rb-pour__wash { display: none; }
  .rb-js .rb-arrival__words,
  .rb-js .rb-arrival.is-here .rb-arrival__words { background: var(--rb-hot); color: var(--rb-cream); animation: none; }
  .rb-js .rb-arrival.is-here .rb-arrival__words .rb-sub { color: #FFD9C7; animation: none; }
  .rb-js .rb [data-rb] { opacity: 1; transform: none; transition: none; }
  /* Money, plainly, from the first frame. */
  .rb-js .rb-turn__t { display: none; animation: none; }
  .rb-js .rb-turn__y { opacity: 1; animation: none; }
}

/* ===================================================================
   HER CARD — THE MOMENT, RATHER THAN THE FORM
   Rebuilt 23 August 2026. Her words: I don't like the little form she
   created for Margaret, it needs to be much more beautiful.

   The card is the surface. No visible box, no placeholder. The field
   is still a field — labelled, focusable, reachable by a keyboard and
   announced properly — it simply lies over the card and is invisible,
   so what she sees is her own handwriting arriving on a blank card.

   The card holds nothing until she writes on it.
   =================================================================== */

.mm-seat__card {
  position: relative;
  background: var(--rb-cream);
  border-radius: clamp(12px, 3.5vw, 18px);
  padding: clamp(2.2rem, 9vw, 3.4rem) clamp(1.2rem, 5vw, 2rem);
  min-height: clamp(8.5rem, 34vw, 11rem);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(245, 21, 43, 0.18);
  transition: transform 780ms cubic-bezier(.2,.8,.3,1), box-shadow 780ms ease;
  transform-origin: 50% 100%;
}

/* A thin rule across the head of the card, the way a place card carries one. */
.mm-seat__card::before {
  content: "";
  position: absolute;
  top: clamp(0.9rem, 4vw, 1.4rem);
  left: 18%;
  right: 18%;
  height: 2px;
  background: var(--rb-cerise);
  opacity: 0.5;
}

/* Her handwriting, arriving as she writes. */
.mm-seat__written {
  font-family: "MM Hand", var(--mm-display), cursive;
  font-size: clamp(2rem, 10vw, 3.2rem);
  line-height: 1.1;
  color: var(--rb-ink);
  text-align: center;
  word-break: break-word;
  pointer-events: none;
}

/* She writes into the card itself, in the card's own face and size, so
   what she sees is her name on the card rather than her name in a box
   that will become a card later.

   The field was invisible before this, which took the caret with it —
   and with no box, no placeholder and no caret, the empty state said
   nothing at all. The caret IS the empty state: a line blinking in her
   own ink on a ruled line the length of a name, saying this is yours to
   write. Found by AISHITERU, 23 August, and the credit is theirs. */
.mm-seat__field--onCard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: "MM Hand", var(--mm-display), cursive;
  font-size: clamp(2rem, 10vw, 3.2rem);
  line-height: 1.1;
  color: var(--rb-ink);
  caret-color: var(--rb-cerise);
  text-align: center;
  padding: 0;
  cursor: text;
}

.mm-seat__field--onCard:focus { outline: none; }

/* The line she is handed, rather than the box she is asked to fill. */
.mm-seat__card::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: clamp(1.6rem, 6.5vw, 2.4rem);
  height: 2px;
  background: var(--rb-ink);
  opacity: 0.16;
}

.mm-seat__card:focus-within::after { opacity: 0.3; }

/* A card being written on says so, quietly. */
.mm-seat__card:focus-within { box-shadow: 0 14px 34px rgba(245, 21, 43, 0.26); }

/* The label is read aloud and never drawn. */
.mm-seat__label--quiet {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Her card turns to face the room once it carries her name. One
   movement, no sparkle, no overshoot. It marks rather than celebrates. */
.mm-seat__card.is-facing {
  transform: rotateY(0deg) scale(1);
  box-shadow: 0 20px 44px rgba(245, 21, 43, 0.3);
}

.mm-seat__card.is-turning {
  transform: perspective(900px) rotateY(-13deg) scale(0.975);
}

@media (prefers-reduced-motion: reduce) {
  .mm-seat__card, .mm-seat__card.is-turning, .mm-seat__card.is-facing {
    transition: none;
    transform: none;
  }
}

/* ===================================================================
   THE FIVE BUSINESS PAGES
   Lifted 23 August to the homepage's level. Her instruction: go and do
   all the pages, I want to see more.

   Before this each one was a photograph, a coloured band, three
   bullets and a row of pills — 2000 pixels tall against the
   homepage's seven thousand. Bullets are a list, and a list is the
   wall of text she will not read.

   Now: her photograph opens it, the three things she offers are three
   moments on three grounds, one picture holds the middle, and the
   other four are said rather than listed.
   =================================================================== */

.bp--scarlet { --bp: var(--rb-scarlet); }
.bp--fuchsia { --bp: var(--rb-pink); }
.bp--cerise  { --bp: var(--rb-cerise); }
.bp--magenta { --bp: var(--rb-magenta); }
.bp--red     { --bp: var(--rb-hot); }

.bp-eyebrow {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: clamp(0.76rem, 3.1vw, 0.92rem);
  margin: 0 0 1rem;
  opacity: 0.9;
}

.bp-h1 {
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 1.03;
  margin: 0;
  font-size: clamp(2rem, 9.4vw, 4.2rem);
}

.bp-sub {
  font-family: var(--mm-read);
  font-size: clamp(1.06rem, 4.4vw, 1.4rem);
  line-height: 1.5;
  margin: 1.1rem 0 0;
  max-width: 30ch;
}

/* ---- The opening ---- */

.bp-open { background: var(--bp, var(--rb-hot)); color: var(--rb-cream); }

.bp-open__pic { aspect-ratio: 5 / 4; overflow: hidden; }
.bp-open__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }

.bp-open__say { padding: clamp(2rem, 8vw, 4rem) clamp(1.15rem, 5.5vw, 4.5rem) clamp(2.4rem, 9vw, 4.4rem); }

@media (min-width: 820px) {
  .bp-open { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .bp-open__pic { aspect-ratio: 1 / 1; height: 100%; }
}

/* ---- The three, each on its own ground ---- */

.bp-said {
  padding: clamp(2rem, 8vw, 3.6rem) clamp(1.15rem, 5.5vw, 4.5rem);
}

.bp-said__p {
  font-family: var(--mm-read);
  font-size: clamp(1.14rem, 4.9vw, 1.6rem);
  line-height: 1.5;
  margin: 0;
  max-width: 34ch;
}

.bp-said--0 { background: var(--rb-cream); color: var(--rb-ink); }
.bp-said--1 { background: var(--rb-warm); color: var(--rb-deep); }
.bp-said--2 { background: var(--rb-cerise); color: var(--rb-cream); }

.bp-said--withpic { display: grid; gap: clamp(1.2rem, 5vw, 2.4rem); align-items: center; }
.bp-said__pic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: clamp(12px, 3.5vw, 20px); }

@media (min-width: 760px) {
  .bp-said--withpic { grid-template-columns: 1fr 1fr; }
  .bp-said--withpic .bp-said__pic { order: 2; aspect-ratio: 1 / 1; }
}

/* ---- The moment ---- */

.bp-wide { background: var(--rb-cream); }
/* Three of the five carry a portrait photograph here, and a wide crop
   took the top of a woman's head off. Tall in her pane, wide only where
   there is room for it. */
.bp-wide img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 26%;
}

@media (min-width: 760px) { .bp-wide img { aspect-ratio: 16 / 9; } }

.bp-wide__line {
  font-family: var(--mm-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 6.6vw, 2.6rem);
  line-height: 1.12;
  margin: 0;
  padding: clamp(1.8rem, 7vw, 3rem) clamp(1.15rem, 5.5vw, 4.5rem);
  background: var(--rb-hot);
  color: var(--rb-cream);
  text-align: center;
}

/* ---- The way in ---- */

.bp-go {
  background: var(--bp, var(--rb-hot));
  padding: clamp(2.2rem, 8vw, 3.6rem) clamp(1.15rem, 5.5vw, 4.5rem);
  text-align: center;
}

.bp-btn {
  display: inline-block;
  background: var(--rb-cream);
  color: var(--rb-hot);
  font-family: var(--mm-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: var(--mm-sub-weight, 600);
  font-size: clamp(0.82rem, 3.3vw, 0.98rem);
  text-decoration: none;
  padding: 1rem 1.9rem;
  border-radius: 999px;
}

/* ---- The other four, said rather than listed ---- */

.bp-four { background: var(--rb-blush); padding: clamp(2.2rem, 8vw, 3.8rem) 0; }

.bp-four__h {
  font-family: var(--mm-display);
  font-weight: 400;
  color: var(--rb-hot);
  margin: 0 clamp(1.15rem, 5.5vw, 4.5rem) clamp(1.2rem, 5vw, 2rem);
  font-size: clamp(1.5rem, 6.4vw, 2.3rem);
}

.bp-four__one {
  display: block;
  text-decoration: none;
  color: var(--rb-ink);
  padding: clamp(1rem, 4.4vw, 1.6rem) clamp(1.15rem, 5.5vw, 4.5rem);
  border-top: 1px solid rgba(255, 42, 99, 0.3);
}

.bp-four__one:last-child { border-bottom: 1px solid rgba(255, 42, 99, 0.3); }

.bp-four__name {
  display: block;
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(0.82rem, 3.4vw, 0.98rem);
  color: var(--rb-cerise);
  margin-bottom: 0.35rem;
}

.bp-four__said {
  display: block;
  font-family: var(--mm-read);
  font-size: clamp(1rem, 4.2vw, 1.18rem);
  line-height: 1.45;
}

/* ===================================================================
   THE READING PAGES — the Rallying Call, Why This Matters, Welcome,
   Your Privacy, The Terms, and the two beyond them.

   Every block used to sit in one long body on one ground, which is the
   wall of text she will not read. Each now has a ground of its own and
   her photographs are set among them, so the reading never runs longer
   than a screen without something to look at.

   Her standing requirement, given to all forty: privacy, terms, user
   policies and safety, all of them very easy to read.
   =================================================================== */

.tp-block { padding: clamp(1.9rem, 7.5vw, 3.4rem) clamp(1.15rem, 5.5vw, 4.5rem); }

.tp-block--0 { background: var(--rb-cream); color: var(--rb-ink); }
.tp-block--1 { background: var(--rb-warm); color: var(--rb-deep); }
.tp-block--2 { background: var(--rb-cerise); color: var(--rb-cream); }

.tp-h2 {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0 0 0.9rem;
  font-size: clamp(1.2rem, 5.2vw, 1.8rem);
}

.tp-block--0 .tp-h2, .tp-block--1 .tp-h2 { color: var(--rb-hot); }
.tp-block--2 .tp-h2 { color: #FFC7EA; }

.tp-p {
  font-family: var(--mm-read);
  font-size: clamp(1.08rem, 4.5vw, 1.32rem);
  line-height: 1.62;
  margin: 0;
  max-width: 40ch;
}

.tp-pic { margin: 0; background: var(--rb-cream); }
.tp-pic img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
}

@media (min-width: 760px) { .tp-pic img { aspect-ratio: 21 / 9; } }

/* ===================================================================
   THE GLOSS
   Nan Made's, and hers — she built it with Perplexity and it is the
   thing she names when she says she loves that site. Taken here at her
   own invitation: I really want our site to shine.

   The recipe, three parts, and the third is the whole surprise:

     a lit vertical gradient
     a solid unblurred edge beneath it
     and a rim in a DIFFERENT COLOUR from the fill

   Nan Made runs fuchsia on orange. Replay Kids runs blue with a hot
   pink rim. Madame Monet has the pair already — her red filled and her
   hot pink around it — so this is the recipe in her own palette rather
   than a copy of anybody's.

   Credit: Nan Made. A mechanism travels freely; an instrument does not,
   and Replay Kids' circular arrangement stays Replay Kids'.
   =================================================================== */

.rb-call,
.bp-btn,
.mm-seat__go,
.mm-seat__open {
  position: relative;
  border: 0;
  color: var(--rb-cream) !important;
  background: linear-gradient(
    180deg,
    #FF5468 0%,
    #F5152B 44%,
    #D50E22 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 3px 0 0 #A80A1B,
    0 0 0 2px var(--rb-pink),
    0 12px 24px rgba(245, 21, 43, 0.26);
  border-radius: 999px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* The close sits on orange, so its fill turns and the rim stays hers. */
.rb-close .rb-call {
  background: linear-gradient(
    180deg,
    #FF4FA8 0%,
    #FF1E8E 44%,
    #D3106E 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 0 0 #A50B57,
    0 0 0 2px var(--rb-cream),
    0 12px 24px rgba(245, 21, 43, 0.26);
}

.rb-call:hover, .bp-btn:hover, .mm-seat__go:hover, .mm-seat__open:hover,
.rb-call:focus-visible, .bp-btn:focus-visible, .mm-seat__go:focus-visible, .mm-seat__open:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 0 0 #A80A1B,
    0 0 0 2px var(--rb-pink),
    0 16px 30px rgba(245, 21, 43, 0.3);
}

.rb-call:active, .bp-btn:active, .mm-seat__go:active, .mm-seat__open:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 0 #A80A1B,
    0 0 0 2px var(--rb-pink),
    0 6px 14px rgba(245, 21, 43, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .rb-call, .bp-btn, .mm-seat__go, .mm-seat__open { transition: none; }
  .rb-call:hover, .bp-btn:hover, .mm-seat__go:hover, .mm-seat__open:hover,
  .rb-call:active, .bp-btn:active, .mm-seat__go:active, .mm-seat__open:active { transform: none; }
}

/* ===================================================================
   THE WORD
   Hers, 23 August 2026, given as a ruling and a statement at once:

     We need to make a statement about it: we're reclaiming the word
     madam. We're grown women. As we get older, we need to step into
     our sexuality. We're reclaiming madam as a symbol of maturity
     and wisdom.

   It gets its own ground, and the word itself is set larger than
   anything around it, because the whole point is that it is said out
   loud rather than explained.
   =================================================================== */

.mm-word {
  background: var(--rb-hot);
  color: var(--rb-cream);
  padding: calc(var(--rb-air) * 0.9) var(--rb-side);
  text-align: center;
}

.mm-word__it {
  display: block;
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(1.1rem, 4.5vw, 1.8rem);
  font-size: clamp(3.4rem, 20vw, 9rem);
  color: var(--rb-cream);
}

.mm-word__p {
  font-family: var(--mm-read);
  font-size: clamp(1.08rem, 4.5vw, 1.4rem);
  line-height: 1.55;
  margin: 0 auto 1rem;
  max-width: 34ch;
}

.mm-word__p:last-child { margin-bottom: 0; }

.mm-word__yours {
  font-family: var(--mm-display);
  font-size: clamp(1.3rem, 5.8vw, 2.2rem);
  line-height: 1.15;
  margin: clamp(1.4rem, 5vw, 2.2rem) auto 0;
  color: #FFD9C7;
}

/* ===================================================================
   HER READING SIZE
   Her words, 23 August, going through the homepage on her phone: all
   the text is too small, way too small.

   The root rule that was meant to carry the whole site had been
   invalid since it was written, so every word rendered at the
   browser's default. That is repaired in mm.css. This lifts what is
   still short after it, and lifts her eyebrows properly — her words:
   the eyebrows need to be much bigger.
   =================================================================== */

.rb-read,
.bp-said__p,
.tp-p,
.mm-word__p {
  font-size: clamp(1.16rem, 4.9vw, 1.42rem);
  line-height: 1.6;
}

.rb-eyebrow,
.bp-eyebrow,
.mm-seat__eyebrow {
  font-size: clamp(1.02rem, 4.3vw, 1.24rem);
  letter-spacing: 0.22em;
  margin-bottom: 1.3rem;
}

.rb-one__name,
.bp-four__name {
  font-size: clamp(1rem, 4.1vw, 1.2rem);
  letter-spacing: 0.14em;
}

.rb-one__said { font-size: clamp(1.54rem, 6.9vw, 2.6rem); }
.rb-one__go, .bp-btn, .rb-call { font-size: clamp(0.86rem, 3.5vw, 1rem); }
.bp-four__said { font-size: clamp(1.1rem, 4.5vw, 1.24rem); }
.tp-h2 { font-size: clamp(1.32rem, 5.6vw, 1.9rem); }
.rb-refusal__said { font-size: clamp(1.14rem, 4.7vw, 1.36rem); }

/* Her mark, a little bigger, at her word. */
.mm-mark {
  font-size: clamp(1.28rem, 5.5vw, 2rem) !important;
  letter-spacing: 0.07em;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* And the small print stops being small print. */
.mm-footer p, .mm-mine { font-size: clamp(1.02rem, 4.2vw, 1.16rem); }
.mm-footnav a { font-size: clamp(0.92rem, 3.8vw, 1.02rem); }

/* ===================================================================
   THE WAY THROUGH — three name cards on her table
   Her ruling: remove the menu, replace it with a burger, and make yours
   different. Maybe make it a multicoloured one.

   So it is three cards lying on her table, in her red, her hot pink and
   her orange. Pressed, they fan out and the table is laid — and the
   cards themselves become the way through. Her own image rather than
   anybody else's instrument.

   Without the script the panel is simply open, so every page on the
   site is reachable whatever happens.
   =================================================================== */

.mm-header {
  position: relative;
  z-index: 60;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: clamp(0.9rem, 3.6vw, 1.4rem) clamp(1.1rem, 5vw, 3rem);
  background: linear-gradient(115deg, var(--rb-hot) 0%, var(--rb-pink) 100%);
}

.mm-header .mm-nav { display: none; }   /* the old row of links stands down */

.mm-fan {
  position: relative;
  width: 2.05rem;
  height: 1.7rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.mm-fan__c {
  position: absolute;
  left: 0;
  right: 0;
  height: 3.5px;
  border-radius: 3px;
  transition: transform 420ms cubic-bezier(.2,.8,.3,1), opacity 260ms ease;
  transform-origin: 12% 50%;
}

.mm-fan__c--1 { top: 0.2rem;  background: var(--rb-cream); }
.mm-fan__c--2 { top: 0.72rem; background: var(--rb-orange); }
.mm-fan__c--3 { top: 1.24rem; background: #FFC7EA; }

/* Lying on the table. */
.mm-fan[aria-expanded="false"] .mm-fan__c--1 { transform: rotate(-4deg); }
.mm-fan[aria-expanded="false"] .mm-fan__c--3 { transform: rotate(3deg); }

/* Fanned out. */
.mm-fan[aria-expanded="true"] .mm-fan__c--1 { transform: translateY(0.75rem) rotate(-38deg); }
.mm-fan[aria-expanded="true"] .mm-fan__c--2 { transform: scaleX(0.4); opacity: 0; }
.mm-fan[aria-expanded="true"] .mm-fan__c--3 { transform: translateY(-0.75rem) rotate(38deg); }

.mm-way {
  background: var(--rb-cream);
  border-bottom: 4px solid var(--rb-orange);
  position: relative;
  z-index: 55;
}

.mm-way__in { display: flex; flex-direction: column; }

.mm-way__one {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  letter-spacing: 0.07em;
  font-size: clamp(1.06rem, 4.4vw, 1.24rem);
  color: var(--rb-ink);
  text-decoration: none;
  padding: clamp(0.85rem, 3.6vw, 1.1rem) clamp(1.1rem, 5vw, 3rem);
  border-top: 1px solid rgba(255, 42, 99, 0.24);
}

.mm-way__one:first-child { border-top: 0; }
.mm-way__one:hover, .mm-way__one:focus-visible { background: var(--rb-blush); color: var(--rb-hot); }

/* The hidden state only exists once the script can open it again. */
.mm-js .mm-way {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms cubic-bezier(.2,.8,.3,1);
  border-bottom-width: 0;
}

.mm-js .mm-way__in { overflow: hidden; }
.mm-js .mm-way.is-open { grid-template-rows: 1fr; border-bottom-width: 4px; }

@media (prefers-reduced-motion: reduce) {
  .mm-fan__c { transition: none; }
  .mm-js .mm-way { transition: none; }
}

/* ===================================================================
   HER HERO SEQUENCE
   Hers, 23 August, in her own order and her own timing: We've Been
   Waiting For You appears as an invitation on top of the image, then a
   beat of one and a half to two seconds, then Let The Joyful
   Revolution Begin — in red, and bigger.

   Her instruction puts words on her photograph, which overrules the
   standing rule that they never sit there. The invitation carries its
   own weight so it reads over any part of the picture, and the called
   line sits on her cream so the red is legible — she also said MONET
   was hard to read on the pink, and this is the same fault answered.
   =================================================================== */

.rb-invite {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 clamp(0.8rem, 4vw, 3rem);
  text-align: center;
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 0.92;
  font-size: clamp(3.1rem, 15.5vw, 7.5rem);
  color: var(--rb-cream);
  text-shadow: 0 2px 18px rgba(245, 21, 43, 0.44), 0 1px 3px rgba(245, 21, 43, 0.5);
}

.rb-js .rb-invite { opacity: 0; }
.rb-js .rb-arrival.is-here .rb-invite { animation: rb-invite 900ms cubic-bezier(.2,.8,.3,1) 700ms forwards; }
@keyframes rb-invite { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.rb-arrival__words {
  background: var(--rb-pink);
  padding: clamp(2rem, 8vw, 3.8rem) var(--rb-side) clamp(2.3rem, 8.5vw, 4.2rem);
  text-align: center;
}

/* Her ground behind the words, at her word: use whatever colour text will
   really stand out, you may need to put something behind the text. Cream on
   her hot pink measures about three to one — a heading survives it and a
   reading size would not. So the line gets a cream ground of its own and her
   red on it, which measures near sixteen. */
.rb-called {
  display: inline-block;
  margin: 0;
  background: var(--rb-cream);
  border-radius: clamp(14px, 4vw, 22px);
  padding: clamp(1rem, 4.5vw, 1.8rem) clamp(1.2rem, 5.5vw, 2.4rem);
  box-shadow: 0 12px 26px rgba(245, 21, 43, 0.22), 0 0 0 3px var(--rb-orange);
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 1.02;
  font-size: clamp(2rem, 9vw, 4.2rem);
  color: var(--rb-hot);
}

/* The beat she asked for, measured from the moment the section lands. */
.rb-js .rb-called { opacity: 0; }
.rb-js .rb-arrival.is-here .rb-called { animation: rb-called 800ms cubic-bezier(.2,.8,.3,1) 2400ms forwards; }
@keyframes rb-called { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* The turning heading now stands over her table, on cream. */
.rb-turnhead { color: var(--rb-hot); }
.rb-turnhead b { color: var(--rb-orange); font-weight: inherit; }

/* Her passage, in her own shape. */
.mm-word__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 26ch;
  text-align: left;
}

.mm-word__list li {
  font-family: var(--mm-read);
  font-size: clamp(1.14rem, 4.8vw, 1.42rem);
  line-height: 1.45;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 248, 243, 0.28);
}

.mm-word__list li:last-child { border-bottom: 0; }
.mm-word__list b { font-family: var(--mm-sub); font-weight: 600; letter-spacing: 0.03em; }

/* Esmeralda stops being the small round one. Her photograph runs deep and
   the words sit on a panel that laps over its foot. */
.rb-one--deep { display: block; padding: 0; }
.rb-one--deep img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 32%;
  border-radius: 0;
}
.rb-one--deep .rb-one__words {
  position: relative;
  margin: -3.2rem clamp(1.1rem, 5vw, 3rem) 0;
  background: var(--rb-magenta);
  border-radius: clamp(14px, 4vw, 22px);
  padding: clamp(1.5rem, 6vw, 2.4rem) clamp(1.2rem, 5vw, 2rem) clamp(1.8rem, 7vw, 2.8rem);
  box-shadow: 0 14px 30px rgba(245, 21, 43, 0.24);
}
@media (min-width: 760px) {
  .rb-one--deep img { aspect-ratio: 16 / 9; }
  .rb-one--deep .rb-one__words { max-width: 34rem; margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-js .rb-invite, .rb-js .rb-called { opacity: 1; animation: none; }
}

/* ===================================================================
   THE LINE IN THE SAND
   Her words: I'm really losing on the homepage, I get what this is but
   people don't get what this is. This is a real rallying call — we're
   putting our foot down, drawing a line in the sand, changing
   everything. Make that really bold and unapologetic all the way
   through.

   So it declares itself before it does anything else, and it is the
   loudest thing on the page. Bold and unapologetic is her ruling for
   this business alone.
   =================================================================== */

.mm-line {
  background: var(--rb-hot);
  color: var(--rb-cream);
  padding: calc(var(--rb-air) * 0.95) var(--rb-side);
  text-align: center;
  border-top: 6px solid var(--rb-orange);
}

.mm-line__eye {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
  margin: 0 0 1.4rem;
  color: #FFD9C7;
}

.mm-line__h {
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0 auto;
  max-width: 20ch;
  font-size: clamp(1.95rem, 8.6vw, 4.8rem);
}

.mm-line__p {
  margin: clamp(1.6rem, 6vw, 2.6rem) auto 0;
  max-width: 32ch;
}

.mm-line__p p {
  font-family: var(--mm-read);
  font-size: clamp(1.16rem, 4.9vw, 1.44rem);
  line-height: 1.55;
  margin: 0 0 1rem;
}

.mm-line__p p:last-child { margin-bottom: 0; }

/* ===================================================================
   WHAT WE ARE CHANGING
   Her words: there's nothing about these women, they're not just
   figures, these are women's lives. And: you haven't talked about what
   we're changing, that needs to move right up.

   So it is four women rather than four statistics, high on the page,
   each one a thing that actually happens through one of the five.
   =================================================================== */

.mm-changes {
  background: var(--rb-cream);
  color: var(--rb-ink);
  padding: var(--rb-air) var(--rb-side);
}

.mm-changes__eye {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
  color: var(--rb-cerise);
  margin: 0 0 clamp(1.4rem, 5vw, 2.2rem);
  text-align: center;
}

.mm-changes__list {
  list-style: none;
  counter-reset: mm;
  margin: 0 auto;
  padding: 0;
  max-width: 32ch;
}

.mm-changes__list li {
  counter-increment: mm;
  position: relative;
  font-family: var(--mm-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 5.6vw, 2rem);
  line-height: 1.16;
  padding: 0 0 clamp(1.3rem, 5vw, 2rem) 2.6rem;
}

.mm-changes__list li::before {
  content: counter( mm );
  position: absolute;
  left: 0;
  top: 0.06em;
  font-family: var(--mm-display);
  font-size: 0.72em;
  color: var(--rb-pink);
}

.mm-changes__list li:last-child { padding-bottom: 0; }

.mm-changes__end {
  margin: clamp(1.8rem, 6vw, 2.6rem) auto 0;
  max-width: 30ch;
  text-align: center;
  font-family: var(--mm-read);
  font-size: clamp(1.14rem, 4.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--rb-hot);
}

/* ===================================================================
   HAND IT ON
   Her words: I need help spreading it around Australia, you want to be
   able to share a button with people. So it is one press, and it says
   something back rather than nothing.
   =================================================================== */

.mm-hand {
  background: var(--rb-pink);
  color: var(--rb-cream);
  padding: var(--rb-air) var(--rb-side);
  text-align: center;
}

.mm-hand__h {
  font-family: var(--mm-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 8.4vw, 3.4rem);
  line-height: 1.06;
  margin: 0 0 0.7rem;
}

.mm-hand__p {
  font-family: var(--mm-read);
  font-size: clamp(1.1rem, 4.6vw, 1.32rem);
  margin: 0 0 clamp(1.4rem, 5vw, 2.1rem);
}

.mm-hand__go {
  border: 0;
  cursor: pointer;
  font-family: var(--mm-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: var(--mm-sub-weight, 600);
  font-size: clamp(0.9rem, 3.7vw, 1.05rem);
  padding: 1.1rem 2.2rem;
  border-radius: 999px;
  color: var(--rb-hot);
  background: var(--rb-cream);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 0 #C9A38F,
              0 0 0 3px var(--rb-orange), 0 12px 24px rgba(61,10,30,.26);
}

.mm-hand__said {
  min-height: 1.6em;
  margin: 1.1rem 0 0;
  font-family: var(--mm-read);
  font-size: clamp(1.04rem, 4.3vw, 1.2rem);
  color: #FFE2EE;
}

/* ===================================================================
   ONE READING SIZE, AND A SPINE
   Her words: some of it's just too big and yelling, and why is
   everything so centred down the middle. And: on the computer it's way
   too big, it's not even fitting on the image.

   Three decisions rather than a run of nudges.

   ONE · One reading size for a woman holding a phone at arm's length,
   and everything else in proportion to it. Too small on one site and
   too big on this one within an hour is the distance between guesses.

   TWO · The invitation is sized against the PICTURE it sits on rather
   than against the screen, so it can never overrun its own image. Her
   pane is tall and narrow and a computer is wide and short; a size that
   dominates one overflows the other. Container units measure the thing
   it actually sits inside.

   THREE · A spine rather than a centre line. A single declaration earns
   the middle. A paragraph almost never does, a list never does, and a
   page where everything is centred has made no decisions at all.
   =================================================================== */

/* HER TYPE DIAL LIVES HERE because this is the rule that governs — it is
   last and it carries !important. Two earlier html rules in the other
   sheet never win, and putting the dial on one of those is exactly how
   it appeared to work and did nothing. */
html { font-size: calc(clamp(19px, calc(0.42vw + 17.4px), 24px) * var(--mm-read-scale, 1)) !important; }

.rb-read, .bp-said__p, .tp-p, .mm-word__p, .mm-line__p p {
  font-size: 1.06rem;
  line-height: 1.62;
}

.rb-eyebrow, .bp-eyebrow, .mm-seat__eyebrow, .mm-changes__eye, .mm-line__eye {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  margin-bottom: 1.1rem;
}

.rb-big, .bp-h1, .mm-line__h { font-size: calc(clamp(1.85rem, 6.6vw, 3.1rem) * var(--mm-head-scale, 1)); }
.rb-one__said { font-size: clamp(1.4rem, 5.4vw, 2.1rem); }
.mm-changes__list li { font-size: clamp(1.16rem, 4.6vw, 1.5rem); }
.mm-word__it { font-size: clamp(2.8rem, 13vw, 5.4rem); }
.mm-word__list li, .bp-four__said, .rb-refusal__said { font-size: 1.04rem; }
.tp-h2 { font-size: clamp(1.24rem, 4.6vw, 1.6rem); }
.rb-one__name, .bp-four__name { font-size: 0.9rem; }
.mm-hand__h { font-size: clamp(1.7rem, 6.2vw, 2.6rem); }
.mm-changes__end, .mm-hand__p { font-size: 1.06rem; }

/* ---- The invitation, measured against her photograph ---- */

.rb-pour { container-type: size; }

.rb-invite {
  /* Measured against her photograph at both widths. On her phone the
     picture is tall, so the width governs and the words dominate. On a
     computer the picture is wide and short, so the HEIGHT governs and
     the words stay large without filling it — which is the difference
     between bold and yelling. */
  font-size: min( 13cqi, 18cqh );
  padding: 0 6cqi;
}

/* ---- The spine ---- */

.mm-line,
.mm-changes,
.rb-now,
.rb-close,
.rb-refusal,
.mm-hand { text-align: left; }

.mm-line__h,
.mm-line__p,
.mm-changes__list,
.mm-changes__end,
.rb-close .rb-read,
.rb-now .rb-read { margin-left: 0; margin-right: 0; }

.mm-line__h { max-width: 18ch; }
.mm-changes__end { max-width: 34ch; text-align: left; }
.rb-refusal__inner { margin-left: 0; }

/* And what genuinely earns the middle keeps it: the invitation on her
   photograph, the line it is answered with, and the word itself. */
.rb-arrival__words, .mm-word { text-align: center; }

/* ===================================================================
   HER LINE, UNDER THE HERO
   Getting money into the hands of women. Full stop. She cut it down
   three times to get there, and it is the argument she said was
   missing from the page.
   =================================================================== */

.rb-getting {
  background: var(--rb-cream);
  padding: clamp(2rem, 7.5vw, 3.4rem) var(--rb-side);
}

.rb-getting__h {
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
  max-width: 17ch;
  font-size: clamp(1.95rem, 7.2vw, 3.4rem);
  color: var(--rb-hot);
}

.rb-getting__h b { font-weight: inherit; color: var(--rb-orange); }

/* ===================================================================
   THE FIGURES, AND THE WOMEN WHO ARE IN NONE OF THEM
   Hers, 24 August: there's nothing here about the numbers, and even the
   figures are so wildly underreported — that's just the tip of the
   iceberg, it's not counting the women.

   The one number stands alone and large. What it misses is set beneath
   it in reading size, because the missing women are the argument rather
   than the decoration.
   =================================================================== */

.mm-figures {
  background: var(--rb-blush);
  color: var(--rb-ink);
  padding: var(--rb-air) var(--rb-side);
}

.mm-figures__eye {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.8rem;
  color: var(--rb-cerise);
  margin: 0 0 1.2rem;
}

.mm-figures__h {
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 1.06;
  margin: 0 0 clamp(1.4rem, 5vw, 2.2rem);
  max-width: 22ch;
  font-size: clamp(1.7rem, 6.2vw, 2.9rem);
  color: var(--rb-hot);
}

.mm-figures__p { max-width: 40ch; }

.mm-figures__p p {
  font-family: var(--mm-read);
  font-size: 1.06rem;
  line-height: 1.62;
  margin: 0 0 1rem;
}

.mm-figures__p p:last-child {
  margin-bottom: 0;
  color: var(--rb-hot);
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
}

/* ===================================================================
   HER SCROLLING SCREEN
   Her own design, given whole: you talk about the figures, then we'll
   have a scrolling screen underneath with the women, and the band
   across it is these aren't just figures, they're women's lives.

   The band is a ground of its own laid across the run, so her law that
   a photograph never carries words still holds — her words sit on her
   red rather than on anybody's face.

   It holds still for anyone who has asked their machine for stillness,
   and the line is read by a screen reader from the section itself
   rather than from a decoration.
   =================================================================== */

/* The red runs edge to edge and the run of women sits inside it. */
.mm-lives {
  position: relative;
  overflow: hidden;
  background: var(--rb-pink);
}

.mm-lives__run { background: var(--rb-pink); }

.mm-lives__run {
  display: flex;
  width: max-content;
  gap: 0;
}

.mm-lives__run img {
  /* And if a picture is ever a frame late, her ground shows rather than a
     black hole where a woman should be. */
  background: var(--rb-pink);
  width: clamp(190px, 50vw, 320px);
  height: clamp(300px, 80vw, 460px);
  object-fit: cover;
  flex: 0 0 auto;
  filter: saturate(1.05);
}

.mm-js .mm-lives__run { animation: mm-lives-run 64s linear infinite; }

@keyframes mm-lives-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


@media (prefers-reduced-motion: reduce) {
  .mm-js .mm-lives__run { animation: none; }
}

/* ===================================================================
   THE GATHERING PLACE, AND WHAT IS LEFT TO DO
   Hers: what is the point of Madame Monet apart from being an umbrella
   — this is the gathering place, it does not cost to gather, this is
   the rallying.
   =================================================================== */

.mm-gather {
  background: var(--rb-cream);
  color: var(--rb-ink);
  padding: var(--rb-air) var(--rb-side);
}

.mm-gather .rb-eyebrow { color: var(--rb-cerise); }
.mm-gather .rb-big { color: var(--rb-hot); max-width: 16ch; }
.mm-gather .rb-read { max-width: 40ch; margin-top: 1.2rem; }

.mm-gather__steps {
  list-style: none;
  counter-reset: mmg;
  margin: clamp(2rem, 7vw, 3.2rem) 0 0;
  padding: 0;
  max-width: 42ch;
}

.mm-gather__steps li {
  counter-increment: mmg;
  position: relative;
  padding: 0 0 clamp(1.5rem, 5.5vw, 2.2rem) 3rem;
}

.mm-gather__steps li::before {
  content: counter( mmg );
  position: absolute;
  left: 0;
  top: -0.06em;
  font-family: var(--mm-display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--rb-pink);
}

.mm-gather__steps li::after {
  content: "";
  position: absolute;
  left: 0.62rem;
  top: 2.1rem;
  bottom: 0.3rem;
  width: 2px;
  background: rgba(255, 42, 99, 0.28);
}

.mm-gather__steps li:last-child { padding-bottom: 0; }
.mm-gather__steps li:last-child::after { display: none; }

.mm-gather__steps b {
  display: block;
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 4.5vw, 1.36rem);
  color: var(--rb-ink);
  margin-bottom: 0.45rem;
}

.mm-gather__steps span {
  display: block;
  font-family: var(--mm-read);
  font-size: 1.04rem;
  line-height: 1.55;
  color: #7A4257;
}

/* ===================================================================
   HER OWN SENTENCE
   Moved down at her word and set quietly. Hers: beautiful and elegant,
   so it's not yelling. POWER in her red and TENDERNESS in her pink,
   both in capitals, at her instruction.

   It is the one line on this page that does not need to raise its
   voice, so it is the only place with this much air around it.
   =================================================================== */

.mm-hers {
  background: var(--rb-cream);
  color: var(--rb-ink);
  padding: calc(var(--rb-air) * 1.3) var(--rb-side);
  text-align: center;
}

.mm-hers__said {
  margin: 0 auto;
  max-width: 21ch;
  font-family: var(--mm-read);
  font-weight: 400;
  font-size: clamp(1.32rem, 5.4vw, 2.1rem);
  line-height: 1.5;
  letter-spacing: 0.005em;
}

.mm-hers__power,
.mm-hers__tender {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  letter-spacing: 0.09em;
  font-size: 0.92em;
}

.mm-hers__power  { color: var(--rb-hot); }
.mm-hers__tender { color: var(--rb-pink); }

.mm-hers__by {
  margin: clamp(1.8rem, 6vw, 2.8rem) 0 0;
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.76rem;
  color: var(--rb-cerise);
}

/* A hairline under it, so it reads as set rather than dropped in. */
.mm-hers__said::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin: clamp(1.6rem, 5vw, 2.4rem) auto 0;
  background: var(--rb-orange);
  border-radius: 99px;
}

/* ===================================================================
   THE AIM, IN HER OWN SENTENCE
   Her ruling, 24 August: now the money, you don't put it down — you've
   reduced the magic of what we're doing to three little, tiny sentences.

   She had already written the magic, in her letter to a woman who has
   just become a Nan. So this is set as the biggest reading on the page:
   money, independence and safety carrying a colour each, because those
   three words are the whole payload and they should arrive as three.
   =================================================================== */

.mm-aim {
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 1.18;
  margin: clamp(1.4rem, 5vw, 2.2rem) 0 0;
  max-width: 20ch;
  font-size: clamp(1.45rem, 5.4vw, 2.5rem);
  color: var(--rb-ink);
}

.mm-aim i { font-style: normal; }
.mm-aim__a { color: var(--rb-hot); }
.mm-aim__b { color: var(--rb-pink); }
.mm-aim__c { color: var(--rb-orange); }

/* The concrete under it, in her rhythm. Small, real, named rather than
   described — and each one is what one of the five actually does, so
   nothing on this list is invented about anybody. */
.mm-hands {
  list-style: none;
  margin: clamp(1.5rem, 5.5vw, 2.4rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  max-width: 34ch;
}

.mm-hands__one {
  font-family: var(--mm-read);
  font-size: clamp(1rem, 3.5vw, 1.16rem);
  line-height: 1.42;
  color: var(--rb-ink);
  padding-left: 1.15rem;
  border-left: 4px solid var(--rb-cerise);
}

.mm-hands__one:nth-child(2) { border-left-color: var(--rb-orange); }
.mm-hands__one:nth-child(3) { border-left-color: var(--rb-cerise); }
.mm-hands__one:nth-child(4) { border-left-color: var(--rb-pink); }
.mm-hands__one:nth-child(5) { border-left-color: var(--rb-hot); }

.mm-hands__one b {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  color: var(--rb-hot);
  display: block;
}

.mm-hands__one:nth-child(2) b { color: var(--rb-orange); }
.mm-hands__one:nth-child(3) b { color: var(--rb-cerise); }
.mm-hands__one:nth-child(4) b { color: var(--rb-pink); }
.mm-hands__one:nth-child(5) b { color: var(--rb-hot); }

/* Her triple close. It repeats with variation, which is the move her
   own prose makes over and over, so it is set to be read as one line
   of three rather than as a sentence. */
.mm-aim__close {
  font-family: var(--mm-display);
  font-weight: 400;
  margin: clamp(1.4rem, 5vw, 2.2rem) 0 0;
  max-width: 22ch;
  font-size: clamp(1.15rem, 4.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--rb-hot);
}


/* ===================================================================
   WOMEN WERE BORN TO LIGHT UP THE WORLD
   Her ruling, 24 August, in her own words: that needs to be on fucking
   bright white, a bright pink or something. And — we say women were
   born to light up the world and not become a statistic, and the next
   thing you say is the statistics. Don't make a big deal of it.

   So her line owns this screen on her bright pink, and every number
   under it is small and quiet. Her words are untouched; only their
   size changed.
   =================================================================== */

.mm-count {
  background: var(--rb-pink);
  color: var(--rb-cream);
  padding: var(--rb-air) var(--rb-side);
}

.mm-count__in { max-width: 40ch; }

.mm-count__eye {
  font-family: var(--mm-sub);
  font-weight: var(--mm-sub-weight, 600);
  font-size: clamp(0.86rem, 3vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-cream);
  margin: 0 0 0.9rem;
}

.mm-count__h {
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 1.06;
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2.1rem, 8.6vw, 4rem);
  color: var(--rb-cream);
}

.mm-count__said {
  font-family: var(--mm-display);
  font-size: clamp(1.1rem, 4.2vw, 1.6rem);
  line-height: 1.24;
  margin: clamp(1.2rem, 4.5vw, 1.8rem) 0 0;
  max-width: 26ch;
  color: var(--rb-cream);
}

/* Taken down at her word: don't make a big deal of it. It was a heading
   in her orange behind a keyline; it is one quiet line now. */
.mm-count__small {
  font-family: var(--mm-read);
  font-weight: 600;
  font-size: clamp(0.94rem, 3.4vw, 1.04rem);
  line-height: 1.5;
  margin: clamp(2rem, 7vw, 3rem) 0 0;
  color: var(--rb-cream);
  max-width: 40ch;
}

.mm-count__p {
  font-family: var(--mm-read);
  font-size: clamp(0.94rem, 3.4vw, 1.04rem);
  line-height: 1.55;
  margin-top: 0.7rem;
  max-width: 42ch;
  color: var(--rb-cream);
}

.mm-count__p p { margin: 0 0 0.7rem; }
.mm-count__p p:last-child { margin-bottom: 0; }

/* ---- And the pale runs below the five, broken by her own colours ----
   The order reads red · cream · cerise · blush · wine · fuchsia now, so
   no two near-white grounds ever sit against each other. */

.rb-now  { background: var(--rb-cerise); color: var(--rb-cream); }
.rb-now .rb-big { color: var(--rb-cream); }
.rb-now .rb-read { color: #FFE6EE; }

.mm-gather { background: var(--rb-blush); color: var(--rb-ink); }

/* ON HER ORANGE, AT HER WORD.
   Her two colours cannot come with it. On that ground her red measures 1.46
   to one and her pink 1.26 — neither can be seen at all — so POWER and
   TENDERNESS arrive as her cream against the deep purple, and that swap is
   hers to overturn in a word.

   Three cascade layers had piled up on this section in one evening — cream,
   then wine, then orange — and the oldest was still winning. Written once
   now, in one place. */
.mm-hers { background: var(--rb-orange); color: var(--rb-deep); }
.mm-hers__said { color: var(--rb-deep); font-style: italic; }
.mm-hers__power,
.mm-hers__tender { color: var(--rb-cream); font-style: normal; }
.mm-hers__by { color: var(--rb-deep); }
.mm-hers__said::after { background: var(--rb-cream); }

/* On her purple, and every word in it had to be re-inked. The step headings
   were still her deep wine and the step words a muted rose chosen for cream —
   both were sitting unreadable on the purple, seen in a picture at 379. */
.mm-gather { background: var(--rb-warm); color: var(--rb-deep); }
.mm-gather .rb-eyebrow { color: var(--rb-cerise); }
.mm-gather .rb-big { color: var(--rb-hot); }
.mm-gather .rb-read { color: var(--rb-deep); }
.mm-gather__steps b { color: var(--rb-hot); }
.mm-gather__steps span { color: var(--rb-deep); }
.mm-gather__steps li::before { color: var(--rb-cerise); }
.mm-gather__steps li::after { background: rgba(255, 42, 99, 0.3); }




/* We Are The First Ones Who Can Do This, in near-white on her orange, measures
   2.72 — below the line even for writing this size. Her orange is untouched;
   only the ink deepens, and it reads 5.8. Nothing else on this screen moves. */
.rb-close, .rb-close .rb-big, .rb-close .rb-read { color: var(--rb-deep); }

/* ===================================================================
   LIGHT MOVING ACROSS HER WORDS
   Her ruling: why is that white and boring, there's got to be something
   there — the words to light up the world should be shining or
   shimmering.

   A shine rather than a new colour. The gradient runs cream to white
   and back, so nothing enters her palette that she did not choose, and
   at rest it is simply her cream — which matters, because a paused
   clock must still leave the sentence right.
   =================================================================== */

/* HER WORDS NEVER VANISH. Clipping a background to text makes the letters
   themselves transparent, so anywhere that fails, her sentence would be a hole.
   The transparency is only ever applied where the clipping is known to work. */
.mm-shine { font-style: normal; color: var(--rb-cream); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
.mm-shine {
  background-image: linear-gradient(
    100deg,
    var(--rb-cream) 0%,
    var(--rb-cream) 34%,
    #FFFFFF 44%,
    #FFFFFF 50%,
    var(--rb-cream) 60%,
    var(--rb-cream) 100%
  );
  background-size: 320% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: mm-shine 4.6s ease-in-out infinite;
}
}

@keyframes mm-shine {
  from { background-position: 130% 0; }
  to   { background-position: -70% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-shine {
    animation: none;
    background-image: none;
    color: var(--rb-cream);
    -webkit-text-fill-color: var(--rb-cream);
  }
}

/* Said where a door is honestly not built yet. */
.bp-soon {
  font-family: var(--mm-read);
  font-size: clamp(1.02rem, 3.8vw, 1.2rem);
  line-height: 1.5;
  margin: 0 0 clamp(1.1rem, 4vw, 1.6rem);
  max-width: 30ch;
}

/* ===================================================================
   ON A LARGE SCREEN
   She has only ever looked at 379 wide and is on a big screen for the
   first time. Three screens that fill her phone read thin and lonely
   at 1440 — measured rather than guessed: her aim used 61% of the
   width and 12% of its own area, the numbers 40% and 19%, and her own
   sentence 25% and 3%.

   The fix is never a longer line. A line that reads well at sixty
   characters reads badly at a hundred and forty whatever the screen.
   So the width is used rather than filled: what sat under something
   sits beside it, and the writing gets bigger because there is room
   for it to be.
   =================================================================== */

@media (min-width: 1000px) {

  /* HER AIM. The five hands move alongside it rather than below. */
  .rb-getting {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-areas:
      "head  head"
      "aim   hands"
      "close hands";
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
    padding-block: clamp(4rem, 7vw, 6rem);
  }

  .rb-getting__h  { grid-area: head;  max-width: 22ch; font-size: calc(clamp(3.4rem, 5vw, 5rem) * var(--mm-head-scale, 1)); }
  .mm-aim         { grid-area: aim;   max-width: 22ch; font-size: calc(clamp(2.4rem, 3.2vw, 3.4rem) * var(--mm-head-scale, 1)); }
  .mm-aim__close  { grid-area: close; max-width: 24ch; font-size: calc(clamp(1.7rem, 2.2vw, 2.3rem) * var(--mm-head-scale, 1)); }
  .mm-hands       { grid-area: hands; max-width: 42ch; margin-top: clamp(1.4rem, 3vw, 2.4rem); }
  .mm-hands__one  { font-size: clamp(1.14rem, 1.35vw, 1.34rem); }

  /* HER NUMBERS. The heading owns the width; the reading sits beside it. */
  .mm-count__in {
    max-width: none;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
      "eye   eye"
      "head  said"
      "head  small"
      "head  words";
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .mm-count__eye   { grid-area: eye; }
  .mm-count__h     { grid-area: head;  max-width: 15ch; font-size: calc(clamp(3.6rem, 5.4vw, 5.6rem) * var(--mm-head-scale, 1)); }
  .mm-count__said  { grid-area: said;  max-width: 28ch; margin-top: 0; }
  .mm-count__small { grid-area: small; max-width: 40ch; margin-top: clamp(1.4rem, 3vw, 2rem); }
  .mm-count__p     { grid-area: words; max-width: 46ch; }

  /* HER OWN SENTENCE. One line on a screen of its own, so it is the
     size of a line that deserves a screen of its own. */
  .mm-hers__said { max-width: 24ch; font-size: calc(clamp(2.6rem, 3.6vw, 4rem) * var(--mm-head-scale, 1)); }
  .mm-hers { padding-block: clamp(4rem, 7vw, 6.5rem); }
}

/* ===================================================================
   THE WIDE SCREEN, DESIGNED RATHER THAN INHERITED
   Her words, on her large screen for the first time: it's all
   left-justified, the whole thing — she designed it for a phone, not a
   computer.

   She is right, and the cause is her own spine rule. Everything is
   pinned to the left with margin-left: 0, which is exactly correct at
   379 and strands every sentence against the left edge of a 1440
   screen with seven hundred pixels of nothing beside it.

   So the wide screen gets a composition rather than a stretch. A
   centred spine, a real measure on every reading column — around
   sixty-five characters, where an eye stops following a line — and
   the two-part screens placed beside each other rather than stacked
   because a phone had no choice.
   =================================================================== */

@media (min-width: 1000px) {

  /* THE SPINE. Nothing is pinned to the left edge any more. */
  .mm-line, .rb-close, .mm-changes, .mm-word, .rb-now, .mm-gather, .rb-five {
    padding-inline: max(var(--rb-side), calc((100% - 1180px) / 2));
  }

  /* HER LINE IN THE SAND. Declaration left, the reading beside it. */
  .mm-line {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas: "eye eye" "head read";
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .mm-line__eye { grid-area: eye; }
  .mm-line__h   { grid-area: head; max-width: 16ch; font-size: calc(clamp(3.2rem, 4.6vw, 4.6rem) * var(--mm-head-scale, 1)); }
  .mm-line__p   { grid-area: read; max-width: 58ch; font-size: clamp(1.1rem, 1.3vw, 1.28rem); }

  /* WE ARE THE FIRST. One statement, centred, and large enough to be one. */
  .rb-close { text-align: center; }
  .rb-close .rb-big  { max-width: 20ch; margin-inline: auto; font-size: calc(clamp(3.4rem, 5vw, 5.2rem) * var(--mm-head-scale, 1)); }
  .rb-close .rb-read { max-width: 46ch; margin-inline: auto; }

  /* WHAT WE ARE CHANGING. The four women two by two rather than a column. */
  .mm-changes__list {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .mm-changes__list li { max-width: 46ch; }
  .mm-changes__end { max-width: 44ch; }

  /* MADAME. Her own passage, centred on a real measure. */
  .mm-word__p { max-width: 62ch; margin-inline: auto; }

  /* AND NOW THE MONEY. Heading beside the terms — on the front page only.
     Why This Matters carries the same class with different children, and this
     grid stranded it there. Scoped rather than made cleverer. */
  .rb .rb-now {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
  .rb .rb-now .rb-big  { max-width: 14ch; font-size: calc(clamp(3rem, 4.4vw, 4.4rem) * var(--mm-head-scale, 1)); }
  .rb .rb-now .rb-read { max-width: 52ch; }

  /* And anywhere else it appears, it simply reads centred. */
  :not(.rb) > .rb-now { text-align: center; }
  :not(.rb) > .rb-now .rb-big  { max-width: 20ch; margin-inline: auto; }
  :not(.rb) > .rb-now .rb-read { max-width: 52ch; margin-inline: auto; }

  /* THE RALLYING. The words on one side, the steps on the other. */
  .mm-gather {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "eye eye" "head steps" "read steps";
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .mm-gather .rb-eyebrow  { grid-area: eye; }
  .mm-gather .rb-big      { grid-area: head; max-width: 15ch; font-size: calc(clamp(3rem, 4.4vw, 4.4rem) * var(--mm-head-scale, 1)); }
  .mm-gather .rb-read     { grid-area: read; max-width: 50ch; }
  .mm-gather__steps       { grid-area: steps; max-width: 52ch; margin-top: 0; }

  /* HER SEAT was already composed at width — her photograph across one half
     and the card on the other. My centring rule turned it into a grid of
     shrunk-to-content items and squashed her card to ninety-four pixels.
     Left as she had it; only the card is centred inside its own column. */
  .mm-seat__card { margin-inline: auto; }
}

/* ===================================================================
   THE TABLET, WHICH NOBODY HAD LOOKED AT EITHER
   Measured at 768: every screen balances except her numbers, where the
   heading's measure left 219 pixels of nothing down one side. Three
   widths now, every time — 379 because it is hardest, a tablet, and a
   large screen designed rather than inherited.
   =================================================================== */

@media (min-width: 620px) and (max-width: 999px) {
  .mm-count__h    { max-width: 18ch; }
  .mm-count__said { max-width: 34ch; }
  .mm-count__p,
  .mm-count__small { max-width: 56ch; }
}

/* ===================================================================
   THE FIVE DAUGHTER PAGES AND THE READING PAGES, AT WIDTH
   The same fault she named on the front page, sitting on eleven more.
   Measured at 1440: a paragraph capped at 34 characters and pinned to
   the left with 842 pixels of nothing beside it.

   A wide screen does not want a longer line — it wants the line put
   somewhere. So the reading is centred on its own measure and the
   blocks that carry a heading and a paragraph set them side by side.
   =================================================================== */

@media (min-width: 1000px) {

  .bp-said, .tp-block {
    padding-inline: max(clamp(1.15rem, 5.5vw, 4.5rem), calc((100% - 1180px) / 2));
  }

  /* A block that is one paragraph reads centred rather than stranded. */
  .bp-said:not(.bp-said--withpic) .bp-said__p {
    max-width: 46ch;
    margin-inline: auto;
    font-size: clamp(1.5rem, 1.9vw, 1.9rem);
    text-align: center;
  }

  /* A block with a photograph keeps its two columns and gains a measure. */
  .bp-said--withpic { max-width: 1180px; margin-inline: auto; }

  /* Where a door is honestly not built, the saying and the control that
     replaces it stand together rather than against an edge. */
  .bp-go { text-align: center; }
  .bp-soon { margin-inline: auto; max-width: 40ch; font-size: clamp(1.3rem, 1.7vw, 1.6rem); }
  .bp-said--withpic .bp-said__p { max-width: 40ch; }

  /* The reading pages: heading beside its words rather than above them. */
  .tp-block {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .tp-h2 { margin-bottom: 0; max-width: 18ch; font-size: clamp(1.5rem, 2vw, 2rem); }
  .tp-p  { max-width: 58ch; }
}