/* ---------- The faces, self-hosted so nothing can fail to load ---------- */

@font-face {
  font-family: "MM Deco";
  src: url("../fonts/josefin-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "MM Geo";
  src: url("../fonts/josefin.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* Madame Monet
   Sized from 379px up. Bright grounds carry the big type; a pale blush
   ground carries the reading. On a warm ground a build goes lighter. */

:root {
  /* What they are actually wearing. Sampled from the dresses in the images
     she chose. Every one stays vivid — value 0.86 and up. Words never sit on
     these; words sit on cream, so colour is never dulled to make text work. */
  --mm-scarlet: #FF3B24;
  --mm-red:     #F5152B;
  --mm-magenta: #FF2FB4;
  --mm-pink:    #FF1E8E;
  --mm-fuchsia: #FA1D8C;
  --mm-cerise:  #FF2A63;
  --mm-orange:  #FF6A1F;   /* the thread only */

  --mm-blush:   #FFEDF4;
  --mm-cream:   #FFF8F3;
  --mm-white:   #FFF7F2;
  --mm-ink:     #F5152B;   /* HER RED. She struck the wine, then the purple, then black outright. */   /* her deep purple. The maroon that stood here is struck. */
  --mm-deep:    #F5152B;   /* HER RED. She struck the wine, then the purple, then black outright. */   /* the deepest, so writing can sit on her orange */
  --mm-warm:    #FFE7D6;   /* the softer ground she asked for, 24 August */

  --mm-display: "MM Deco", "Futura", "Century Gothic", system-ui, sans-serif;
  --mm-label:   "MM Geo", "Futura", system-ui, sans-serif;
  --mm-body: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --mm-gap: clamp(2.5rem, 8vw, 6rem);
  --mm-pad: clamp(1.25rem, 5vw, 4rem);
  --mm-stripe: 3px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--mm-body);
  background: var(--mm-blush);
  color: var(--mm-ink);
  line-height: 1.55;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Type ---------- */

.mm-eyebrow {
  font-family: var(--mm-label);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: clamp(0.62rem, 2.6vw, 0.78rem);
  font-weight: 600;
  margin: 0 0 1.4rem;
}

.mm-display {
  font-family: var(--mm-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.04;
  margin: 0;
  font-size: clamp(2.05rem, 9.5vw, 5.5rem);
}

.mm-door-name {
  font-family: var(--mm-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.05;
  margin: 0 0 1.1rem;
  font-size: clamp(1.85rem, 8.5vw, 3.4rem);
}

.mm-lede { max-width: 34ch; font-size: clamp(1.02rem, 4.1vw, 1.22rem); margin: 1.5rem 0 0; }

/* ---------- The clash where two grounds meet ---------- */

.mm-stripe { position: relative; }

.mm-stripe::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--mm-stripe);
  background: var(--mm-orange);
}

/* ---------- Header ---------- */

.mm-header {
  background: linear-gradient(180deg, var(--mm-scarlet), var(--mm-fuchsia));
  padding: 0 0 0.9rem;
  border-bottom: 3px solid var(--mm-orange);
}
.mm-header img { width: clamp(210px, 66vw, 340px); }

/* ---------- Hero ----------
   The picture and the words each get their own ground. Nothing is laid over
   a photograph and then dimmed until it can be read — the photograph stays
   whole, and white on cerise reads at 4.86. */

.mm-hero { background: var(--mm-fuchsia); }

.mm-hero__figure {
  position: relative;
  margin: 0;
  /* Held to a proportion, so the height of her window stops mattering. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.mm-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}

.mm-hero__body {
  position: relative;
  background: var(--mm-fuchsia);
  color: var(--mm-white);
  padding: var(--mm-gap) var(--mm-pad) calc(var(--mm-gap) * 1.1);
}

.mm-hero .mm-lede { max-width: 32ch; }

.mm-hero .mm-eyebrow {
  display: inline-block;
  background: var(--mm-rose);
  padding: 0.55rem 0.95rem;
  margin-bottom: 1.2rem;
}

/* ---------- The deco keyline ---------- */

.mm-frame::before {
  content: "";
  position: absolute;
  inset: clamp(0.7rem, 3vw, 1.6rem);
  border: 2px solid var(--mm-cream);
  pointer-events: none;
  z-index: 2;
}

.mm-frame::after {
  content: "";
  position: absolute;
  inset: calc(clamp(0.7rem, 3vw, 1.6rem) + 7px);
  border-top: 1px solid var(--mm-orange);
  border-bottom: 1px solid var(--mm-orange);
  pointer-events: none;
  z-index: 2;
}

/* ---------- Call to action ---------- */

.mm-cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.95rem 2rem;
  font-family: var(--mm-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.72rem, 3vw, 0.84rem);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid currentColor;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.mm-cta:hover,
.mm-cta:focus-visible { background: var(--mm-red); color: var(--mm-cream); }

/* ---------- The five doors ---------- */

.mm-door {
  position: relative;
  padding: calc(var(--mm-gap) + var(--mm-stripe)) var(--mm-pad) var(--mm-gap);
  color: var(--mm-cream);
}

.mm-door::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--mm-stripe);
  background: var(--mm-orange);
}

.mm-door--red     { background: var(--mm-scarlet); }
.mm-door--fuchsia { background: var(--mm-fuchsia); }
.mm-door--orange  { background: var(--mm-cerise); }
.mm-door--purple  { background: var(--mm-magenta); }
.mm-door--magenta { background: var(--mm-red); }

.mm-door__figure,
.mm-door__plate {
  position: relative;
  margin: 0 1rem 2rem 0;
  aspect-ratio: 4 / 3;
  outline: 3px solid var(--mm-white);
  outline-offset: -3px;
}

.mm-door__figure img { width: 100%; height: 100%; object-fit: cover; }

/* An offset block of a colour that fights it, so nothing floats. */
.mm-door--red .mm-door__figure { box-shadow: 1rem 1rem 0 var(--mm-magenta); }
.mm-door--fuchsia .mm-door__figure { box-shadow: 1rem 1rem 0 var(--mm-scarlet); }
.mm-door--orange .mm-door__figure { box-shadow: 1rem 1rem 0 var(--mm-magenta); }
.mm-door--purple .mm-door__figure { box-shadow: 1rem 1rem 0 var(--mm-cerise); }
.mm-door--magenta .mm-door__figure { box-shadow: 1rem 1rem 0 var(--mm-fuchsia); }

.mm-door__plate {
  background: var(--mm-blush);
}

.mm-door__plate::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px solid var(--mm-white);
  opacity: 0.8;
}

/* The words are read on the pale ground. Ink on blush is 15.07. */
.mm-door__words {
  background: var(--mm-blush);
  color: var(--mm-ink);
  padding: clamp(1.5rem, 6vw, 2.5rem);
  outline: 2px solid var(--mm-white);
  outline-offset: -0.7rem;
}

/* Orange is the one bright ground that holds ink directly, at 5.60. */


.mm-door__words p { max-width: 40ch; margin: 0; font-size: clamp(1rem, 4vw, 1.12rem); }

/* ---------- Bands, for Why This Matters ---------- */

.mm-band {
  position: relative;
  padding: calc(var(--mm-gap) + var(--mm-stripe)) var(--mm-pad) var(--mm-gap);
  color: var(--mm-white);
}

.mm-band::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--mm-stripe);
  background: var(--mm-orange);
}

.mm-band--red     { background: var(--mm-scarlet); }
.mm-band--magenta { background: var(--mm-cerise); }
.mm-band--purple  { background: var(--mm-magenta); }
.mm-band--orange  { background: var(--mm-pink); color: var(--mm-ink); }
.mm-band--pale    { background: var(--mm-blush); color: var(--mm-ink); }

.mm-band h2 {
  font-family: var(--mm-display);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.04;
  margin: 0 0 1.6rem;
  font-size: clamp(1.75rem, 8vw, 3.2rem);
}

.mm-band p { max-width: 40ch; font-size: clamp(1rem, 4vw, 1.12rem); }

/* Reading matter inside a bright band sits on the pale ground. */
.mm-band--red .mm-reckon,
.mm-band--magenta .mm-reckon,
.mm-band--purple .mm-reckon {
  background: var(--mm-blush);
  color: var(--mm-ink);
  padding: clamp(1.2rem, 5vw, 1.8rem) clamp(1.2rem, 5vw, 1.8rem) clamp(1.2rem, 5vw, 1.8rem) 2.4rem;
  outline: 2px solid var(--mm-white);
  outline-offset: -0.6rem;
}

.mm-reckon { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 42ch; }

.mm-reckon li {
  padding: 1rem 0 1rem 1.4rem;
  border-top: 1px solid currentColor;
  font-size: clamp(1rem, 4vw, 1.1rem);
  position: relative;
}

.mm-reckon li:first-child { border-top: 0; }

.mm-reckon li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.6rem;
  width: 0.55rem; height: 0.55rem;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.mm-reckon b { font-weight: 600; }

/* Hands held up, both sides. */
.mm-ledger { display: grid; gap: 1.25rem; margin-top: 2.25rem; }

.mm-ledger > div {
  background: var(--mm-blush);
  color: var(--mm-ink);
  padding: clamp(1.4rem, 5vw, 2rem);
  outline: 2px solid var(--mm-white);
  outline-offset: -0.6rem;
}

.mm-ledger h3 {
  font-family: var(--mm-display);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.72rem, 3vw, 0.84rem);
  font-weight: 600;
  margin: 0 0 1rem;
}

.mm-ledger ul { margin: 0; padding-left: 1.1rem; }
.mm-ledger li { margin-bottom: 0.7rem; font-size: clamp(0.97rem, 3.8vw, 1.05rem); }
.mm-ledger li:last-child { margin-bottom: 0; }

/* ---------- Closing and footer ---------- */

.mm-close {
  position: relative;
  background: var(--mm-magenta);
  color: var(--mm-white);
  padding: calc(var(--mm-gap) + var(--mm-stripe)) var(--mm-pad) var(--mm-gap);
}

.mm-close::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--mm-stripe);
  background: var(--mm-orange);
}

.mm-close .mm-display { font-size: clamp(1.9rem, 8.5vw, 3.6rem); }
.mm-close p { max-width: 42ch; font-size: clamp(1rem, 4vw, 1.14rem); }

.mm-footer {
  background: var(--mm-blush);
  color: var(--mm-ink);
  padding: var(--mm-gap) var(--mm-pad);
}

.mm-footer img { width: clamp(150px, 46vw, 230px); margin-bottom: 1.75rem; }
.mm-footer p { max-width: 40ch; margin: 0 0 0.75rem; }
.mm-footer a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- Wider than her pane ---------- */

@media (min-width: 760px) {
  .mm-door {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  .mm-door__figure,
  .mm-door__plate { margin: 0; aspect-ratio: 1 / 1; }
  .mm-door:nth-child(even) .mm-door__figure,
  .mm-door:nth-child(even) .mm-door__plate { order: 2; }
  .mm-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .mm-hero__figure { aspect-ratio: auto; height: 100%; min-height: 32rem; }
  .mm-hero__body { display: flex; flex-direction: column; justify-content: center; }
  /* The words now live in half the width, so the display steps back to suit. */
  .mm-hero .mm-display { font-size: clamp(2.05rem, 4.4vw, 4.1rem); }
  .mm-ledger { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ---------- The arrival ---------- */

.mm-arrives [data-arrive] .mm-piece {
  opacity: 0;
  transform: translate3d(0, 2.2rem, 0);
  transition:
    opacity 1100ms cubic-bezier(.22,.61,.36,1) var(--mm-wait, 0ms),
    transform 1400ms cubic-bezier(.16,.84,.44,1) var(--mm-wait, 0ms);
}

.mm-arrives [data-arrive].is-here .mm-piece { opacity: 1; transform: none; }

/* Stillness, when it is asked for. The journey stays; the movement goes. */
@media (prefers-reduced-motion: reduce) {
  .mm-arrives [data-arrive] .mm-piece {
    transition-duration: 1ms;
    transition-delay: 0ms;
    transform: none;
  }
  * { animation: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   THE ENTRANCE
   One screen. Her photograph whole, nothing laid over it,
   and the words on a solid cherry block beneath.
   ========================================================= */

.mm-entrance {
  /* Held to a fixed proportion rather than a share of the window, so the
     shape of her pane stops mattering. A tall narrow pane turned a share of
     the viewport into a long thin strip. */
  min-height: min(100svh, 46rem);
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--mm-scarlet);
}

.mm-entrance__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: min(42svh, 24rem);
}

.mm-entrance__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.mm-entrance__words {
  background: var(--mm-cream);
  color: var(--mm-ink);
  padding: clamp(1.6rem, 6vw, 3rem) var(--mm-pad) clamp(2rem, 7vw, 3.4rem);
  text-align: center;
}

.mm-entrance__line {
  font-family: var(--mm-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.06;
  margin: 0;
  font-size: clamp(1.55rem, 7.4vw, 3.6rem);
}

/* The middle line is the one she would lean on saying it out loud. */
.mm-entrance__soft {
  color: var(--mm-fuchsia);
  display: block;
  font-family: var(--mm-body);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.5rem, 7vw, 3.2rem);
  line-height: 1.1;
  margin: 0.15em 0;
}

.mm-entrance__under {
  margin: 1.5rem auto 0;
  max-width: 34ch;
  font-size: clamp(0.98rem, 4vw, 1.14rem);
}

.mm-entrance .mm-cta { border-color: var(--mm-scarlet); color: var(--mm-scarlet); }
.mm-entrance .mm-cta:hover,
.mm-entrance .mm-cta:focus-visible { background: var(--mm-scarlet); color: var(--mm-cream); }

/* =========================================================
   THE CARDS
   Twenty women, twenty sentences, each in her own hand.
   Nothing here is written by Madame Monet. The roof holds
   the cards and says none of the words.
   ========================================================= */

@font-face {
  font-family: "MM Hand";
  src: url("../fonts/hand.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

.mm-cards {
  display: none;   /* waiting for real women. Nothing invented goes here. */
  position: relative;
  background: var(--mm-red);
  color: var(--mm-cream);
  padding: calc(var(--mm-gap) + var(--mm-stripe)) var(--mm-pad) var(--mm-gap);
}

.mm-cards::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--mm-stripe);
  background: var(--mm-orange);
}

.mm-cards__head { max-width: 32ch; margin: 0 0 2.4rem; }

.mm-cards__grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 620px)  { .mm-cards__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mm-cards__grid { grid-template-columns: 1fr 1fr 1fr; } }

.mm-card {
  background: var(--mm-cream);
  color: var(--mm-ink);
  padding: 1.5rem 1.4rem 1.2rem;
  box-shadow: 0.55rem 0.55rem 0 var(--mm-pink);
  min-height: 9.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Each one sits a hair off square, the way a card actually lands. */
.mm-card:nth-child(3n)   { transform: rotate(-0.7deg); }
.mm-card:nth-child(3n+1) { transform: rotate(0.5deg); }
.mm-card:nth-child(4n)   { box-shadow: 0.55rem 0.55rem 0 var(--mm-orange); }

.mm-card__said {
  font-family: "MM Hand", "Bradley Hand", cursive;
  font-size: clamp(1.3rem, 5.4vw, 1.6rem);
  line-height: 1.28;
  margin: 0;
}

.mm-card__who {
  font-family: var(--mm-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  margin: 1.1rem 0 0;
  color: var(--mm-rose);
}

/* MA — the space before. A card with nobody in it yet is not a fault. */
.mm-card--waiting {
  background: transparent;
  border: 2px dashed rgba(255, 247, 242, 0.5);
  box-shadow: none;
  transform: none;
  align-items: flex-start;
  justify-content: flex-end;
}

.mm-card--waiting .mm-card__who { color: rgba(255, 247, 242, 0.75); }

/* =========================================================
   THE FIVE, IN ONE SECTION
   Three across the top, taller. Two beneath, wider.
   ========================================================= */

.mm-five {
  position: relative;
  background: var(--mm-blush);
  color: var(--mm-ink);
  padding: calc(var(--mm-gap) + var(--mm-stripe)) var(--mm-pad) var(--mm-gap);
}

.mm-five::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--mm-stripe);
  background: var(--mm-orange);
}

.mm-five__head { max-width: 34ch; margin: 0 0 2.6rem; }
.mm-five__head .mm-display { color: var(--mm-scarlet); }

.mm-five__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .mm-five__grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .mm-five__grid > *:nth-child(-n+3) { grid-column: span 2; }
  .mm-five__grid > *:nth-child(n+4)  { grid-column: span 3; }
}

.mm-one {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: var(--mm-cream);
  background: var(--mm-scarlet);
}

.mm-one:nth-child(2) { background: var(--mm-fuchsia); }
.mm-one:nth-child(3) { background: var(--mm-cerise); }
.mm-one:nth-child(4) { background: var(--mm-magenta); }
.mm-one:nth-child(5) { background: var(--mm-red); }

.mm-one__figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.mm-one__figure img { width: 100%; height: 100%; object-fit: cover; }

/* The two beneath are wider, so their pictures are shallower. */
@media (min-width: 900px) {
  .mm-five__grid > *:nth-child(n+4) .mm-one__figure { aspect-ratio: 16 / 9; }
}

.mm-one__words { padding: 1.4rem 1.4rem 1.6rem; }

.mm-one__name {
  font-family: var(--mm-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: clamp(1.35rem, 6vw, 1.9rem);
  margin: 0 0 0.5rem;
}

.mm-one__said { margin: 0; font-size: clamp(0.98rem, 3.9vw, 1.06rem); max-width: 34ch; }

.mm-one__go {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--mm-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.74rem;
  font-weight: 600;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.2rem;
}

/* The entrance words carry colour rather than near-black. */
.mm-entrance__line { color: var(--mm-scarlet); }
.mm-entrance__soft { color: var(--mm-fuchsia); }
.mm-entrance__under { color: var(--mm-ink); }

/* =========================================================
   THE SECTIONS BETWEEN
   A photograph the full width, and one line beside it.
   Nothing over the picture. Ever.
   ========================================================= */

.mm-say { position: relative; background: var(--mm-blush); color: var(--mm-ink); }

.mm-say::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--mm-stripe);
  background: var(--mm-orange);
  z-index: 1;
}

.mm-say__figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.mm-say__figure img { width: 100%; height: 100%; object-fit: cover; }

.mm-say__words { padding: var(--mm-gap) var(--mm-pad); }

.mm-say__line {
  font-family: var(--mm-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.06;
  margin: 0;
  font-size: clamp(1.7rem, 8vw, 3.4rem);
  color: var(--mm-scarlet);
  max-width: 18ch;
}

.mm-say--pink .mm-say__line { color: var(--mm-fuchsia); }

.mm-say__under { margin: 1.3rem 0 0; max-width: 38ch; font-size: clamp(1rem, 4vw, 1.14rem); }

@media (min-width: 900px) {
  .mm-say { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .mm-say__figure { height: 100%; aspect-ratio: auto; min-height: 32rem; }
  .mm-say--flip .mm-say__figure { order: 2; }
}


/* =========================================================
   THE HERO — her own line, and her own party.
   Her picture whole, nothing over it, words on their own ground.
   ========================================================= */

.mm-top { position: relative; background: var(--mm-cerise); }

.mm-top__figure { margin: 0; overflow: hidden; aspect-ratio: 1 / 1; }
.mm-top__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }

.mm-top__words {
  background: var(--mm-cerise);
  color: var(--mm-cream);
  padding: clamp(1.8rem,7vw,3.4rem) var(--mm-pad) clamp(2.2rem,8vw,4rem);
  text-align: center;
}

.mm-top__line {
  font-family: var(--mm-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.04;
  margin: 0 auto;
  max-width: 17ch;
  font-size: clamp(1.9rem, 8.6vw, 4.2rem);
}

.mm-top__under {
  margin: 1.4rem auto 0;
  max-width: 40ch;
  font-size: clamp(1rem, 4.1vw, 1.16rem);
}

@media (min-width: 1000px) {
  .mm-top__figure { aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------------
   Every page beyond the front. Sized from 379 up.
   --------------------------------------------------------------- */

.mm-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-top: 1rem;
}
.mm-nav a {
  font-family: var(--mm-label);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mm-cream);
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 247, 242, 0.4);
  padding-bottom: 2px;
}
.mm-nav a:hover,
.mm-nav a:focus-visible { border-bottom-color: var(--mm-cream); }

/* A door — the picture whole, the words on solid colour beneath it. */
.mm-door__figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.mm-door__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mm-door__say { padding: 2.4rem var(--mm-pad) 2.8rem; color: var(--mm-cream); }
.mm-door--scarlet .mm-door__say { background: var(--mm-scarlet); }
.mm-door--fuchsia .mm-door__say { background: var(--mm-fuchsia); }
.mm-door--cerise  .mm-door__say { background: var(--mm-cerise); }
.mm-door--magenta .mm-door__say { background: var(--mm-magenta); }
.mm-door--red     .mm-door__say { background: var(--mm-red); }

.mm-door__eyebrow {
  font-family: var(--mm-label);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}
.mm-door__h {
  font-family: var(--mm-display);
  font-size: clamp(2rem, 9.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0;
}
.mm-door__sub {
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 1.1rem 0 0;
  max-width: 34ch;
}

.mm-body { padding: 3rem var(--mm-pad); background: var(--mm-cream); color: var(--mm-ink); }
.mm-body--soft { background: var(--mm-blush); }

.mm-h2 {
  font-family: var(--mm-display);
  font-size: clamp(1.5rem, 6.4vw, 2.2rem);
  line-height: 1.1;
  margin: 0 0 0.7rem;
  color: var(--mm-red);
}
.mm-block { margin: 0 0 2.4rem; max-width: 44ch; }
.mm-block:last-child { margin-bottom: 0; }
.mm-block p { font-size: 1.03rem; line-height: 1.62; margin: 0; }

.mm-pts { list-style: none; margin: 0; padding: 0; max-width: 44ch; }
.mm-pts li {
  font-size: 1.03rem;
  line-height: 1.6;
  padding: 0 0 1.3rem 1.6rem;
  position: relative;
}
.mm-pts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--mm-magenta);
}
.mm-pts li:last-child { padding-bottom: 0; }

.mm-go { margin: 2.2rem 0 0; }
.mm-btn {
  display: inline-block;
  font-family: var(--mm-label);
  font-size: 0.86rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--mm-red);
  color: var(--mm-cream);
  text-decoration: none;
  padding: 1rem 1.7rem;
  border-radius: 999px;
}
.mm-btn:hover, .mm-btn:focus-visible { background: var(--mm-magenta); }

.mm-others { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.mm-others a {
  display: inline-block;
  font-family: var(--mm-label);
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mm-cream);
  background: var(--mm-cerise);
  text-decoration: none;
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
}
.mm-others a:hover, .mm-others a:focus-visible { background: var(--mm-scarlet); }

.mm-footnav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin: 1.6rem 0 0; }
.mm-footnav a {
  font-family: var(--mm-label);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* The footer ground is blush, so these read in her ink. They were
     cream on cream and invisible on every page of the site, which took
     Your Privacy and The Terms with them. Found 23 August. */
  color: var(--mm-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 42, 99, 0.55);
}
.mm-footnav a:hover, .mm-footnav a:focus-visible { color: var(--mm-cerise); border-bottom-color: var(--mm-cerise); }

.mm-mine {
  font-family: var(--mm-label);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  opacity: 0.8;
  margin: 2.4rem 0 0;
}

/* The last row of links was sitting on the line beneath it. */
.mm-footnav { row-gap: 0.8rem; }
.mm-footnav a { padding-bottom: 0.15rem; }

@media (min-width: 720px) {
  .mm-door { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .mm-door__figure { aspect-ratio: auto; height: 100%; }
  .mm-door__say { display: flex; flex-direction: column; justify-content: center; }
  .mm-body { padding: 4.5rem var(--mm-pad); }
  .mm-block, .mm-pts { max-width: 52ch; }
}

/* The logo runs edge to edge, and the gradient carries the navigation under it. */
.mm-header > a { display: block; }
.mm-header > a img { display: block; width: 100%; height: auto; }
.mm-nav { padding: 1rem var(--mm-pad) 0.2rem; margin-top: 0; }

/* The picture runs to the edges. Her law: her images are the heroes,
   so nothing is drawn around them and nothing is laid over them. */
.mm-door,
.mm-door__figure,
.mm-door__figure img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.mm-door { padding: 0; }
.mm-door__figure { padding: 0; margin: 0; }
.mm-door__figure::before,
.mm-door__figure::after { content: none; }

/* ===============================================================
   The top of the site, rebuilt to her instruction, 21 August.
   A thin gradient band, a thin orange line, then a hero that
   fills the screen with women.
   =============================================================== */

.mm-header {
  background: linear-gradient(180deg, var(--mm-red) 0%, var(--mm-pink) 100%) !important;
  border-bottom: 3px solid var(--mm-orange) !important;
  padding: 0.85rem var(--mm-pad) 0.75rem !important;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.2rem;
}

.mm-mark {
  font-family: var(--mm-display);
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-cream);
  text-decoration: none;
  white-space: nowrap;
}

.mm-nav { padding: 0 !important; margin: 0 !important; gap: 0.2rem 0.95rem; }
.mm-nav a { font-size: 0.68rem; letter-spacing: 0.11em; border-bottom-width: 1px; }

/* The hero. Sized so her narrow, very tall pane never stretches it. */
.mm-open {
  position: relative;
  isolation: isolate;
  height: min(86svh, 760px);
  min-height: 480px;
  overflow: hidden;
  background: var(--mm-red);
}
.mm-open__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  z-index: 0;
}
/* The overlay she asked for — weighted to the floor so faces stay clear. */
.mm-open__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(245, 21, 43, 0.34) 0%, rgba(245, 21, 43, 0) 30%),
    linear-gradient(0deg, rgba(133, 12, 46, 0.94) 0%, rgba(133, 12, 46, 0.78) 22%, rgba(133, 12, 46, 0.18) 52%, rgba(133, 12, 46, 0) 70%);
}
.mm-open__words {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--mm-pad) 2.2rem;
  color: var(--mm-cream);
}
.mm-open__line {
  font-family: var(--mm-display);
  font-size: clamp(2.5rem, 12.4vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: 0.004em;
  margin: 0;
  text-shadow: 0 2px 18px rgba(245, 21, 43, 0.45);
}
.mm-open__under {
  font-family: var(--mm-label);
  font-size: clamp(0.86rem, 3.9vw, 1.15rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 1rem 0 0;
  text-shadow: 0 2px 14px rgba(245, 21, 43, 0.5);
}

/* The line that follows, on a ground as loud as the hero. */
.mm-shout {
  background: linear-gradient(150deg, var(--mm-scarlet) 0%, var(--mm-fuchsia) 100%);
  color: var(--mm-cream);
  padding: 3rem var(--mm-pad) 3.2rem;
  border-top: 3px solid var(--mm-orange);
}
.mm-shout__eyebrow {
  font-family: var(--mm-label);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.mm-shout__line {
  font-family: var(--mm-display);
  font-size: clamp(1.9rem, 9vw, 3.4rem);
  line-height: 1.03;
  margin: 0;
  max-width: 20ch;
}
.mm-shout__under {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 1.2rem 0 0;
  max-width: 36ch;
}

/* Where a section carried pale ground, it now carries colour. */
.mm-say--loud {
  background: var(--mm-magenta) !important;
  color: var(--mm-cream);
  padding: 3rem var(--mm-pad);
}
.mm-say--loud .mm-say__line { color: var(--mm-cream) !important; }
.mm-say--loud .mm-say__under { color: var(--mm-cream) !important; }

@media (min-width: 720px) {
  .mm-open { height: min(84svh, 900px); }
  .mm-open__words { padding-bottom: 3.4rem; }
  .mm-shout { padding: 5rem var(--mm-pad); }
}

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

/* ===============================================================
   The homepage as one run: joy, the truth, the five, the Roll Call,
   Why This Matters, the close. 21 August.
   =============================================================== */

/* The refrain, carried through the page rather than parked on a menu. */
.mm-refrain {
  margin: 0;
  padding: 1.05rem var(--mm-pad);
  background: var(--mm-orange);
  color: var(--mm-ink);
  font-family: var(--mm-label);
  font-size: clamp(0.72rem, 3.1vw, 0.94rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-align: center;
}
.mm-refrain--pink { background: var(--mm-magenta); color: var(--mm-cream); }

/* The truth. Loud ground, because it is the one hard thing on the page. */
.mm-truth {
  background: var(--mm-red);
  color: var(--mm-cream);
  padding: 3.4rem var(--mm-pad) 0;
}
.mm-truth__eyebrow {
  font-family: var(--mm-label);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mm-pink);
  margin: 0 0 1.1rem;
}
.mm-truth__line {
  font-family: var(--mm-display);
  font-size: clamp(1.75rem, 8.2vw, 3.1rem);
  line-height: 1.05;
  margin: 0 0 1.4rem;
  max-width: 22ch;
}
.mm-truth__p { font-size: 1.02rem; line-height: 1.62; margin: 0 0 1.1rem; max-width: 46ch; }
.mm-truth__p:last-of-type { color: var(--mm-pink); font-weight: 600; }
.mm-truth__figure { margin: 2.4rem 0 0; overflow: hidden; aspect-ratio: 16 / 10; }
.mm-truth__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mm-lift {
  background: linear-gradient(150deg, var(--mm-scarlet), var(--mm-cerise));
  color: var(--mm-cream);
  padding: 3.2rem var(--mm-pad);
}
.mm-lift__line {
  font-family: var(--mm-display);
  font-size: clamp(1.8rem, 8.6vw, 3rem);
  line-height: 1.04;
  margin: 0 0 1.1rem;
}
.mm-lift__p { font-size: 1.05rem; line-height: 1.6; margin: 0; max-width: 42ch; }

.mm-five__intro { margin: 1rem 0 0; font-size: 1.02rem; line-height: 1.55; max-width: 40ch; }

/* The Roll Call — two lanes, always moving, full on arrival. */
.mm-roll {
  background: var(--mm-blush);
  color: var(--mm-ink);
  padding: 3.2rem 0 3.4rem;
  overflow: hidden;
}
.mm-roll__head { padding: 0 var(--mm-pad); }
.mm-roll__head p:last-child { font-size: 1.02rem; line-height: 1.58; max-width: 40ch; margin: 1rem 0 0; }
.mm-roll__field { margin: 2.2rem 0 0; display: grid; gap: 0.7rem; }
.mm-roll__lane {
  display: flex;
  gap: 0.7rem;
  width: max-content;
  animation: mm-roll-run 44s linear infinite;
}
.mm-roll__lane--back { animation-duration: 58s; animation-direction: reverse; }
.mm-roll__word {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--mm-display);
  font-size: clamp(1.25rem, 5.6vw, 2rem);
  line-height: 1;
  padding: 0.62rem 1.05rem;
  border-radius: 999px;
  background: var(--mm-fuchsia);
  color: var(--mm-cream);
}
.mm-roll__lane--back .mm-roll__word { background: var(--mm-scarlet); }
.mm-roll__lane .mm-roll__word:nth-child(3n) { background: var(--mm-cerise); }
.mm-roll__lane .mm-roll__word:nth-child(5n) { background: var(--mm-orange); color: var(--mm-ink); }
@keyframes mm-roll-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mm-roll__foot {
  padding: 1.8rem var(--mm-pad) 0;
  margin: 0;
  font-family: var(--mm-display);
  font-size: clamp(1.3rem, 6vw, 2rem);
  color: var(--mm-red);
}

/* Why This Matters, on the homepage. */
.mm-why { background: var(--mm-cream); color: var(--mm-ink); padding: 3.4rem var(--mm-pad); }
.mm-why__grid { display: grid; gap: 1rem; margin: 2.2rem 0 0; }
.mm-why__cell { padding: 1.6rem 1.4rem; border-radius: 6px; background: var(--mm-fuchsia); color: var(--mm-cream); }
.mm-why__cell:nth-child(2) { background: var(--mm-scarlet); }
.mm-why__cell:nth-child(3) { background: var(--mm-cerise); }
.mm-why__big { font-family: var(--mm-display); font-size: clamp(2.6rem, 13vw, 4rem); line-height: 1; margin: 0 0 0.7rem; }
.mm-why__small { font-size: 0.98rem; line-height: 1.55; margin: 0; }
.mm-why__note { margin: 2.4rem 0 0; max-width: 46ch; }
.mm-why__note p { font-size: 1.02rem; line-height: 1.62; margin: 0 0 1rem; }

@media (min-width: 720px) {
  .mm-truth { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.6rem; align-items: center; padding: 5rem var(--mm-pad); }
  .mm-truth__figure { margin: 0; aspect-ratio: 4 / 5; height: 100%; }
  .mm-lift { padding: 5rem var(--mm-pad); }
  .mm-why__grid { grid-template-columns: repeat(3, 1fr); }
  .mm-why { padding: 5rem var(--mm-pad); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-roll__lane { animation: none; flex-wrap: wrap; width: auto; padding: 0 var(--mm-pad); }
}

/* No frame around any picture, anywhere on this site. Her images are heroes. */
.mm-truth__figure, .mm-truth__figure img,
.mm-one__figure,   .mm-one__figure img,
.mm-say__figure,   .mm-say__figure img,
.mm-open__img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* The five, on a ground deep enough to make five colours blaze. */
.mm-five {
  background: var(--mm-red) !important;
  color: var(--mm-cream) !important;
  padding: 3.4rem var(--mm-pad) 3.8rem;
}
.mm-five .mm-eyebrow { color: var(--mm-pink) !important; }
.mm-five .mm-display { color: var(--mm-cream) !important; }
.mm-five__intro { color: var(--mm-cream); opacity: 0.92; }
.mm-five__grid { margin-top: 2.2rem; }
.mm-one { border-radius: 6px; }

/* The Roll Call ground, lifted off pale. */
.mm-roll { background: linear-gradient(160deg, var(--mm-blush), #FFE3EF) !important; }

/* ===============================================================
   Her ruling, 21 August. The dark plum ground is off the site.
   One gradient only, in the header. Every ground is a flat,
   vivid colour, and every word on one is cream.
   =============================================================== */

/* The refrain carries weight, because the line above all five deserves it. */
.mm-refrain,
.mm-refrain--pink {
  background: var(--mm-fuchsia) !important;
  color: var(--mm-cream) !important;
  font-family: var(--mm-display);
  font-size: clamp(1.35rem, 6.6vw, 2.4rem) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.1;
  text-transform: none !important;
  padding: 2.1rem var(--mm-pad) !important;
  border-top: 4px solid var(--mm-orange);
  border-bottom: 4px solid var(--mm-orange);
}
.mm-refrain--pink { background: var(--mm-scarlet) !important; }

/* The hero. Both lines carry, rather than one shouting over a whisper. */
.mm-open__under {
  font-family: var(--mm-display) !important;
  font-size: clamp(1.6rem, 7.6vw, 3rem) !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  color: var(--mm-cream);
  margin-top: 0.35rem !important;
}

/* One gradient on this site, and it is the header. */
.mm-shout { background: var(--mm-scarlet) !important; }
.mm-lift  { background: var(--mm-magenta) !important; }
.mm-roll  { background: var(--mm-blush) !important; }

/* The five, clashing on orange, exactly as she asked for at the start. */
.mm-five {
  background: var(--mm-orange) !important;
  color: var(--mm-cream) !important;
}
.mm-five .mm-eyebrow { color: var(--mm-cream) !important; opacity: 0.95; }
.mm-five .mm-display { color: var(--mm-cream) !important; }
.mm-five__intro { color: var(--mm-cream) !important; opacity: 1; }

/* The hard truth sits on red, further down, once the joy has landed. */
.mm-truth { background: var(--mm-red) !important; color: var(--mm-cream) !important; }
.mm-truth__eyebrow { color: var(--mm-cream) !important; opacity: 0.92; }
.mm-truth__p:last-of-type { color: var(--mm-cream) !important; font-weight: 700; }

/* The header links, readable rather than whispered. */
.mm-nav a { color: var(--mm-cream) !important; border-bottom-color: var(--mm-cream) !important; }

/* Three lanes of names, each at its own pace. */
.mm-roll__field { gap: 0.85rem; }
.mm-roll__lane--0 { animation-duration: 52s; }
.mm-roll__lane--1 { animation-duration: 68s; animation-direction: reverse; }
.mm-roll__lane--2 { animation-duration: 44s; }
.mm-roll__word {
  font-size: clamp(1.5rem, 7vw, 2.6rem);
  padding: 0.5rem 1.15rem;
}
.mm-roll__lane--1 .mm-roll__word { background: var(--mm-scarlet); }
.mm-roll__lane--2 .mm-roll__word { background: var(--mm-cerise); }
.mm-roll__lane .mm-roll__word:nth-child(4n) { background: var(--mm-magenta); }
.mm-roll__lane .mm-roll__word:nth-child(7n) { background: var(--mm-orange); color: var(--mm-cream); }

/* ===============================================================
   The Roll Call, restored to the design she approved today.
   Names arriving across a fuchsia field, the field already full
   when she lands on it, running for as long as she watches.
   =============================================================== */
/* ===============================================================
   HER NAMES, ARRIVING
   Her words: the names have to be coming · have the name smaller
   coming up · don't make them last too long · it's got to have a
   really nice beat to it · I don't want to see a dead screen · you've
   got to have it timed perfectly so there's always a new name coming
   in behind it.

   Never rolling, never a column, never a roll call. Each one arrives
   small, comes up to its size, holds a beat and goes.

   THE THREE COLOURS ARE HERS AND THEY ARE MEASURED. On her orange her
   own red reads 1.46 and her own pink 1.26 — neither can be seen at
   all. So the red is deepened until it reads and the pink with it,
   which is what she asked for: a more intense red that we can read and
   a stronger pink. White, red and pink, and no orange, because orange
   on orange is nothing.
   =============================================================== */
:root {
  --mm-name-white: #FFFFFF;   /* 2.86 on her orange */
  --mm-name-red:   #8E0616;   /* 3.35 — her red, deepened until it reads */
  /* A pink that is actually pink. The deeper one read better and she said
     it plainly: where's a good pink, I don't see a good pink. White and the
     red carry the reading; this one is here to be pink. */
  --mm-name-pink:  #BE0270;
}

.mm-callroll {
  position: relative;
  overflow: hidden;
  background: var(--mm-orange);
  height: clamp(480px, 140vw, 660px);
}

.mm-callroll__lanes { position: absolute; inset: 0; }

.mm-callroll__name {
  position: absolute;
  white-space: nowrap;
  font-family: var(--mm-display);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}

.mm-js .mm-callroll__name.is-here {
  animation: mm-name-arrive var(--mm-life, 4s) cubic-bezier(.4,0,.3,1) both;
}

/* Smoother at her word. The jump from 0.62 was a pounce; it opens at 0.9 and
   closes at 1.05, and the fades are long shoulders rather than edges — a name
   is at full strength for barely half its life and easing the whole way in and
   the whole way out. */
@keyframes mm-name-arrive {
    0% { opacity: 0; transform: scale(0.90); }
   24% { opacity: 1; transform: scale(0.99); }
   72% { opacity: 1; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* Her strip, across the middle, and her sentence on two lines. */
.mm-callroll__strip {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 5;
  background: var(--mm-pink);
  color: var(--mm-cream);
  padding: clamp(1.2rem, 4.6vw, 2rem) var(--mm-pad);
  text-align: center;
  font-family: var(--mm-display);
  font-weight: 400;
  line-height: 1.16;
  font-size: clamp(1.35rem, 5.8vw, 2.4rem);
}

.mm-callroll__strip span { display: block; }

@media (prefers-reduced-motion: reduce) {
  .mm-js .mm-callroll__name.is-here { animation: none; opacity: 1; }
}

/* ===============================================================
   The turn on the word figure. Hers, 21 August — a woman's body and
   a woman's life reduced by the same word, and the third meaning
   taken back.
   =============================================================== */
.mm-turn { background: var(--mm-cream); color: var(--mm-ink); padding: 3rem var(--mm-pad) 3.2rem; }
.mm-turn__line {
  font-family: var(--mm-display);
  font-size: clamp(1.35rem, 6vw, 2.2rem);
  line-height: 1.16;
  margin: 0 0 1.5rem;
  max-width: 26ch;
  padding-left: 1.1rem;
  border-left: 6px solid var(--mm-cerise);
}
.mm-turn__line--1 { border-left-color: var(--mm-orange); }
.mm-turn__line--2 { border-left-color: var(--mm-fuchsia); color: var(--mm-red); }
.mm-turn__say {
  margin: 2.2rem 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 40ch;
  font-weight: 600;
}
@media (min-width: 720px) { .mm-turn { padding: 4.5rem var(--mm-pad); } }

/* ===============================================================
   The parent's full-screen measures, held to a proportion here.

   Found by LOIS, 21 August, and it is the sharper half of the
   narrow-strip fault. The shared parent theme sets these:

     .js-entrance .entrance { height: 100svh; }
     .hero                  { min-height: 100svh; }
     .hero--second          { min-height: 86svh; }

   In a pane 379 wide and 1,400 tall that is a 1,400 pixel column
   with a handful of words adrift in it.

   Two lessons carried from LOIS and kept here in writing:

   1. A min-height cap cannot lower an element that also carries an
      outright height. Both properties are capped below, every time.

   2. A grep of the markup cannot find .js-entrance, because a script
      writes it onto the html element at runtime. Only the rendered
      page can tell live-and-invisible from genuinely dead.

   This overrides in the child alone. The parent is left untouched,
   because a change there reaches all forty and that ruling is hers
   to make on a calm morning rather than by a session at night.
   =============================================================== */

.js-entrance .entrance {
  height: min(100svh, 46rem);
  max-height: min(100svh, 46rem);
}

.hero {
  min-height: min(100svh, 46rem);
}

.hero--second {
  min-height: min(86svh, 40rem);
}

/* ===============================================================
   Your Seat. Her image: the table set, a card at every chair,
   and the handwriting on it is hers.
   =============================================================== */
.mm-seat { background: var(--mm-fuchsia); color: var(--mm-cream); padding: 3.2rem var(--mm-pad) 3.6rem;
  border-top: 4px solid var(--mm-orange); }
.mm-seat__eyebrow { font-family: var(--mm-label); font-size: 0.78rem; letter-spacing: 0.28em;
  text-transform: uppercase; margin: 0 0 0.9rem; }
.mm-seat__h { font-family: var(--mm-display); font-size: clamp(1.9rem, 9vw, 3.2rem); line-height: 1.02; margin: 0; }
.mm-seat__sub { font-size: 1.05rem; line-height: 1.5; margin: 0.9rem 0 0; max-width: 30ch; }

.mm-seat__form { margin: 2.2rem 0 0; }

/* The card itself — cream, tilted a whisker, sitting on the cloth. */
.mm-seat__card { background: var(--mm-cream); color: var(--mm-ink); border-radius: 3px;
  padding: 1.5rem 1.3rem 1.4rem; box-shadow: 0 10px 30px rgba(43, 7, 20, 0.22); position: relative; }
.mm-seat__card::before { content: ""; position: absolute; left: 1.3rem; right: 1.3rem; top: 0.75rem;
  height: 2px; background: var(--mm-cerise); opacity: 0.5; }
.mm-seat__written { display: block; font-family: var(--mm-display); font-size: clamp(1.7rem, 8vw, 2.6rem);
  line-height: 1.1; color: var(--mm-red); min-height: 0; }
.mm-seat__label { display: block; font-family: var(--mm-label); font-size: 0.76rem; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0.5rem 0 0.55rem; opacity: 0.75; }
.mm-seat__field { width: 100%; font: inherit; font-size: 1.15rem; padding: 0.75rem 0.85rem;
  border: 2px solid rgba(43, 7, 20, 0.25); border-radius: 3px; background: #fff; color: var(--mm-ink); }
.mm-seat__field:focus-visible { outline: 3px solid var(--mm-magenta); outline-offset: 2px; border-color: var(--mm-magenta); }

.mm-seat__say { margin: 0.9rem 0 0; font-size: 0.98rem; min-height: 1.2em; }
.mm-seat__go { display: inline-block; margin: 1.2rem 0 0; font-family: var(--mm-label); font-size: 0.88rem;
  letter-spacing: 0.16em; text-transform: uppercase; background: var(--mm-cream); color: var(--mm-red);
  border: 0; padding: 1rem 1.8rem; border-radius: 999px; cursor: pointer; font-weight: 700; }
.mm-seat__go:hover, .mm-seat__go:focus-visible { background: var(--mm-blush); }
.mm-seat__skip { margin: 1.2rem 0 0 0.6rem; font-family: var(--mm-label); font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; background: none; color: var(--mm-cream);
  border: 0; border-bottom: 2px solid rgba(255, 247, 242, 0.5); padding: 0 0 3px; cursor: pointer; }

.mm-seat__next { margin: 2.4rem 0 0; }
.mm-seat__ask { font-family: var(--mm-display); font-size: clamp(1.25rem, 5.6vw, 1.8rem); line-height: 1.12; margin: 0; }
.mm-seat__hint { font-size: 0.95rem; margin: 0.5rem 0 1.1rem; opacity: 0.9; }
.mm-seat__doors { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.8rem; }
.mm-seat__door { font: inherit; font-size: 1rem; text-align: left; background: rgba(255, 247, 242, 0.12);
  color: var(--mm-cream); border: 2px solid rgba(255, 247, 242, 0.55); border-radius: 999px;
  padding: 0.85rem 1.2rem; cursor: pointer; }
.mm-seat__door[aria-pressed="true"] { background: var(--mm-cream); color: var(--mm-red); border-color: var(--mm-cream); font-weight: 700; }
.mm-seat__ends { display: flex; flex-wrap: wrap; align-items: center; }

.mm-seat__done { margin: 2.2rem 0 0; }
.mm-seat__thanks { font-family: var(--mm-display); font-size: clamp(1.5rem, 7vw, 2.4rem); line-height: 1.06; margin: 0; }
.mm-seat__after { font-size: 1.02rem; line-height: 1.55; margin: 1rem 0 0; max-width: 32ch; }
.mm-seat__open { display: inline-block; margin: 1.4rem 0 0; font-family: var(--mm-label); font-size: 0.86rem;
  letter-spacing: 0.16em; text-transform: uppercase; background: var(--mm-cream); color: var(--mm-red);
  text-decoration: none; padding: 1rem 1.7rem; border-radius: 999px; font-weight: 700; }

@media (min-width: 720px) {
  .mm-seat { padding: 5rem var(--mm-pad); }
  .mm-seat__card { max-width: 30rem; }
  .mm-seat__doors { max-width: 34rem; }
}

/* An element given display by a class ignores the hidden attribute unless it
   is told otherwise. The seat's button and label both stayed on screen. */
.mm-seat [hidden] { display: none !important; }

/* ===============================================================
   Every section carries a woman.
   Five sections and nearly six thousand pixels of this homepage
   held colour and a sentence and no photograph at all, which is
   what made it read as a pamphlet. Her law: her images carry
   this site and inspire from the first screen.
   =============================================================== */

.mm-pair { padding: 0 !important; display: grid; grid-template-columns: 1fr; }
.mm-pair__pic { margin: 0; overflow: hidden; aspect-ratio: 5 / 4; }
.mm-pair__pic img { width: 100%; height: 100%; object-fit: cover; display: block;
  border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.mm-pair__words { padding: 2.8rem var(--mm-pad) 3rem; }

.mm-seat { padding: 0 !important; }
.mm-seat__pic { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.mm-seat__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  display: block; border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.mm-seat__head, .mm-seat__form { padding-left: var(--mm-pad); padding-right: var(--mm-pad); }
.mm-seat__head { padding-top: 2.8rem; }
.mm-seat__form { padding-bottom: 3.2rem; }

/* The five deserve room. Bigger pictures, bigger names. */
.mm-one__figure { aspect-ratio: 4 / 5; }
.mm-one__name { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }

@media (min-width: 860px) {
  .mm-pair { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .mm-pair__pic { aspect-ratio: auto; height: 100%; min-height: 26rem; }
  .mm-pair--flip .mm-pair__pic { order: 2; }
  .mm-pair__words { display: flex; flex-direction: column; justify-content: center;
    padding: 4rem var(--mm-pad); }
  .mm-seat { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .mm-seat__pic { aspect-ratio: auto; height: 100%; grid-row: span 2; }
  .mm-seat__head { padding-top: 4rem; }
}

/* ===============================================================
   Her choice, 21 August: Chonburi on the main headings.
   Three jobs, three faces, so each can be judged on its own:
     --mm-display  the big page headings          — Chonburi, settled
     --mm-sub      the subheadings                — open
     --mm-read     the words a woman actually reads — open
   =============================================================== */
:root {
  --mm-display: Chonburi, Georgia, serif;
  --mm-sub: "Cinzel", Georgia, serif;
  --mm-sub-weight: 600;
  --mm-read: "Gelasio", Georgia, serif;
}

/* The big ones wear Chonburi. */
.mm-open__line, .mm-open__under,
.mm-shout__line, .mm-lift__line,
.mm-display, .mm-door__h, .mm-say__line,
.mm-refrain, .mm-callroll__end, .mm-seat__h,
.mm-close .mm-display { font-family: var(--mm-display) !important; }

/* The subheadings wear their own. */
.mm-h2, .mm-one__name, .mm-seat__ask, .mm-turn__line,
.mm-roll__foot, .mm-seat__thanks, .mm-why__big,
.mm-door__sub, .mm-block h2 {
  font-family: var(--mm-sub) !important;
  font-weight: var(--mm-sub-weight);
}
/* Cinzel is capitals only, so it needs air between the letters to breathe. */
.mm-h2, .mm-one__name, .mm-block h2 { letter-spacing: 0.03em; }

/* And the reading face carries every paragraph. */
body, p, li, .mm-one__said, .mm-shout__under, .mm-lift__p,
.mm-block p, .mm-pts li, .mm-seat__sub, .mm-seat__after,
.mm-truth__p, .mm-why__small, .mm-why__note p,
.mm-close p { font-family: var(--mm-read); }

/* The eyebrow and every small capital line keep the label face. */
.mm-eyebrow, .mm-nav a, .mm-shout__eyebrow, .mm-door__eyebrow,
.mm-seat__eyebrow, .mm-seat__label, .mm-truth__eyebrow,
.mm-footnav a, .mm-mine, .mm-others a, .mm-btn, .mm-cta,
.mm-seat__go, .mm-seat__skip, .mm-seat__open,
.mm-one__go, .mm-callroll__end span { font-family: var(--mm-label) !important; }

/* ===============================================================
   Bigger, everywhere. 21 August.
   Every size on this site is measured in rem, so lifting the root
   lifts the whole page together — and the root grows with the
   window, so a wider screen gives bigger words rather than longer
   lines. Her words: I cannot read it, it is too small.
   =============================================================== */
/* CSS needs calc() around an arithmetic middle argument. Written as a bare
   sum, the whole declaration is invalid and the browser drops it — so this rule
   never applied at all and every word on the site rendered at the browser's own
   default instead of hers. That is why she could not read it. 23 August. */
html { font-size: clamp(20px, calc(0.6vw + 18px), 28px); }

body { font-size: 1.05rem; line-height: 1.68; }

.mm-shout__under,
.mm-lift__p,
.mm-truth__p,
.mm-block p,
.mm-pts li,
.mm-one__said,
.mm-why__small,
.mm-why__note p,
.mm-roll__head p:last-child,
.mm-seat__sub,
.mm-seat__after,
.mm-door__sub,
.mm-close p,
.mm-five__intro { font-size: 1.12rem; line-height: 1.62; }

.mm-h2, .mm-block h2 { font-size: clamp(1.7rem, 6.4vw, 2.5rem); }
.mm-one__name { font-size: clamp(1.75rem, 7vw, 2.6rem) !important; }
.mm-eyebrow, .mm-shout__eyebrow, .mm-door__eyebrow,
.mm-seat__eyebrow, .mm-truth__eyebrow { font-size: 0.88rem; letter-spacing: 0.22em; }
.mm-nav a { font-size: 0.82rem; }
.mm-seat__field { font-size: 1.25rem; }
.mm-seat__label { font-size: 0.86rem; }
.mm-seat__door { font-size: 1.1rem; }
.mm-btn, .mm-cta, .mm-seat__go, .mm-seat__open, .mm-others a { font-size: 0.95rem; }
.mm-mine, .mm-footnav a { font-size: 0.86rem; }
.mm-footer p { font-size: 1.05rem; line-height: 1.6; }

/* The face bar stays small so it never competes with the page. */
.mm-try { font-size: 16px; }
.mm-try__fixed, .mm-try__say { font-size: 0.85rem; }
.mm-try__face { font-size: 1rem; }

/* ===============================================================
   Her drawer. Holds her work, never a report about her.
   No counters, no progress, no streaks — ruled out by her.
   =============================================================== */
.mm-drawer { background: var(--mm-cream); color: var(--mm-ink); }
.mm-drawer__top, .mm-drawer__lost { background: var(--mm-fuchsia); color: var(--mm-cream);
  padding: 3rem var(--mm-pad) 3.2rem; }
.mm-drawer__eyebrow { font-family: var(--mm-label); font-size: 0.88rem; letter-spacing: 0.26em;
  text-transform: uppercase; margin: 0 0 1rem; }
.mm-drawer__h { font-family: var(--mm-display); font-size: clamp(2.2rem, 10vw, 4rem);
  line-height: 1.0; margin: 0; }
.mm-drawer__p { font-size: 1.12rem; line-height: 1.62; margin: 1.1rem 0 0; max-width: 34ch; }

.mm-drawer__card { margin: -1.6rem var(--mm-pad) 0; background: var(--mm-cream); color: var(--mm-ink);
  border-radius: 3px; padding: 1.5rem 1.4rem; box-shadow: 0 12px 34px rgba(43, 7, 20, 0.2);
  position: relative; }
.mm-drawer__card::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 0.8rem;
  height: 2px; background: var(--mm-cerise); opacity: 0.5; }
.mm-drawer__label { font-family: var(--mm-label); font-size: 0.86rem; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0.4rem 0 0.6rem; opacity: 0.7; display: block; }
.mm-drawer__written { font-family: var(--mm-sub); font-weight: 600; letter-spacing: 0.03em;
  font-size: clamp(1.8rem, 8vw, 2.8rem); line-height: 1.1; color: var(--mm-red); margin: 0; }

.mm-drawer__part { padding: 2.6rem var(--mm-pad); border-bottom: 3px solid var(--mm-orange); }
.mm-drawer__part--quiet { background: var(--mm-blush); border-bottom: 0; }

.mm-drawer__doors { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.mm-drawer__doors a { display: block; text-decoration: none; background: var(--mm-cerise);
  color: var(--mm-cream); border-radius: 6px; padding: 1.1rem 1.3rem; }
.mm-drawer__doors li:nth-child(2n) a { background: var(--mm-fuchsia); }
.mm-drawer__doors li:nth-child(3n) a { background: var(--mm-scarlet); }
.mm-drawer__doors a:hover, .mm-drawer__doors a:focus-visible { background: var(--mm-magenta); }
.mm-drawer__door { display: block; font-family: var(--mm-sub); font-weight: 600; letter-spacing: 0.03em;
  font-size: clamp(1.5rem, 6.4vw, 2.1rem); line-height: 1.1; }
.mm-drawer__said { display: block; font-size: 1.02rem; line-height: 1.5; margin-top: 0.35rem; }
.mm-drawer__note { font-size: 1.02rem; line-height: 1.6; margin: 1.3rem 0 0; max-width: 36ch; }

.mm-drawer__form { margin: 1.4rem 0 0; }
.mm-drawer__field { width: 100%; font: inherit; font-size: 1.12rem; line-height: 1.55;
  padding: 0.9rem 1rem; border: 2px solid rgba(43, 7, 20, 0.22); border-radius: 4px;
  background: #fff; color: var(--mm-ink); resize: vertical; }
.mm-drawer__field:focus-visible { outline: 3px solid var(--mm-magenta); outline-offset: 2px; }
.mm-drawer__say { margin: 0.8rem 0 0; font-size: 1rem; min-height: 1.2em; color: var(--mm-red); }

.mm-drawer__go { display: inline-block; margin: 1.2rem 0 0; font-family: var(--mm-label);
  font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; background: var(--mm-red);
  color: var(--mm-cream); border: 0; text-decoration: none; padding: 1rem 1.7rem;
  border-radius: 999px; cursor: pointer; font-weight: 700; }
.mm-drawer__go:hover, .mm-drawer__go:focus-visible { background: var(--mm-magenta); }
.mm-drawer__lost .mm-drawer__go { background: var(--mm-cream); color: var(--mm-red); }
.mm-drawer__link { font-family: var(--mm-label); font-size: 0.95rem; word-break: break-all;
  background: var(--mm-cream); border: 2px dashed var(--mm-cerise); border-radius: 4px;
  padding: 0.9rem 1rem; margin: 1.2rem 0 0; }
.mm-drawer__quiet { font-family: var(--mm-label); font-size: 0.95rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mm-red); border-bottom: 2px solid var(--mm-cerise);
  text-decoration: none; }

@media (min-width: 720px) {
  .mm-drawer__top, .mm-drawer__lost { padding: 4.5rem var(--mm-pad); }
  .mm-drawer__card { max-width: 32rem; }
  .mm-drawer__part { padding: 4rem var(--mm-pad); }
  .mm-drawer__doors { grid-template-columns: 1fr 1fr; }
  .mm-drawer__form { max-width: 40rem; }
}


/* ===============================================================
   Hotter — hers, 22 August, and not a colour of it moved.
   Her ruling: do not change the colours; change the font or make
   it bolder. So every word on a hot ground carries weight and
   size instead, and the orange is left exactly as she chose it.
   =============================================================== */
.mm-shout__under, .mm-lift__p, .mm-truth__p, .mm-one__said,
.mm-door__sub, .mm-seat__sub, .mm-seat__after, .mm-close p,
.mm-five__intro, .mm-drawer__p, .mm-drawer__said, .mm-drawer__note {
  font-size: 1.18rem;
  line-height: 1.6;
  font-weight: 500;
}


/* The orange is the brightest ground on the site, so the words on it
   are the heaviest. Weight rather than a duller colour. */
.mm-five .mm-eyebrow { font-weight: 700; }
.mm-five__intro { font-weight: 700; font-size: 1.24rem; }
.mm-five .mm-display { font-weight: 700; }

/* The way back to her own drawer, on every page, once this device knows her. */
.mm-back {
  position: fixed;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 400;
  display: inline-block;
  font-family: var(--mm-label);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  background: var(--mm-red);
  color: var(--mm-cream);
  padding: 0.9rem 1.3rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(43, 7, 20, 0.3);
}
.mm-back:hover, .mm-back:focus-visible { background: var(--mm-magenta); }
/* Small and out of the way. It is a way back, never an announcement. */
.mm-back { font-size: 0.7rem !important; padding: 0.6rem 0.95rem; letter-spacing: 0.1em;
  opacity: 0.92; box-shadow: 0 4px 14px rgba(43, 7, 20, 0.22); }
.mm-back:hover, .mm-back:focus-visible { opacity: 1; }

/* ===============================================================
   Quieter. 22 August.
   She asked for bigger and I made everything bigger, which removed
   the hierarchy and left the page shouting. Size is restored to a
   scale: one voice at the top, everything under it speaking
   normally, and the photographs carrying the weight instead.
   =============================================================== */
/* This is the later of the two html rules and therefore the one that
   governs. Lifting the first without this one did almost nothing —
   measured at her width rather than assumed. 23 August, at her word:
   all the text is too small, way too small. */
/* HER TYPE SIZE. Two dials she turns herself, in her own panel.
   --mm-read-scale moves everything set in rem, which is the reading.
   --mm-head-scale moves the display headings on top of that. */
html { font-size: clamp(21px, calc(0.7vw + 18.5px), 28px); }

body { font-size: 1rem; line-height: 1.7; }

/* One thing on the page is large. */
.mm-open__line { font-size: clamp(2.2rem, 9vw, 4rem) !important; line-height: 1.02; }
.mm-open__under { font-size: clamp(1.05rem, 4vw, 1.5rem) !important; letter-spacing: 0.01em; }

/* Everything beneath it speaks at a normal volume. */
.mm-shout__line, .mm-lift__line, .mm-display,
.mm-door__h, .mm-say__line, .mm-drawer__h {
  font-size: clamp(1.5rem, 5.2vw, 2.1rem) !important;
  line-height: 1.14;
}
.mm-h2, .mm-block h2, .mm-one__name {
  font-size: clamp(1.15rem, 3.8vw, 1.45rem) !important;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.mm-refrain, .mm-refrain--pink {
  font-size: clamp(1rem, 3.4vw, 1.35rem) !important;
  padding: 1.3rem var(--mm-pad) !important;
  line-height: 1.3;
}
/* This rule sits below the block that styles it, so this is the one that
   governs — the same fault that once rendered the whole site at 16.3px.
   Her sentence is written here, so it is sized like writing. */
.mm-callroll__end { font-size: clamp(1.85rem, 8.2vw, 3.6rem); }
.mm-seat__h, .mm-seat__ask { font-size: clamp(1.3rem, 4.6vw, 1.8rem) !important; }
.mm-drawer__written, .mm-seat__written { font-size: clamp(1.4rem, 5vw, 2rem) !important; }
.mm-why__big { font-size: clamp(1.8rem, 6vw, 2.6rem) !important; }

/* Paragraphs read rather than announce. */
.mm-shout__under, .mm-lift__p, .mm-truth__p, .mm-one__said,
.mm-door__sub, .mm-seat__sub, .mm-seat__after, .mm-close p,
.mm-five__intro, .mm-block p, .mm-pts li, .mm-why__small,
.mm-why__note p, .mm-drawer__p, .mm-drawer__said, .mm-drawer__note,
.mm-roll__head p:last-child, .mm-footer p {
  font-size: 1rem !important;
  line-height: 1.68;
  font-weight: 400;
}
.mm-five__intro { font-weight: 400 !important; }

/* Small capitals are a whisper, never a shout. */
.mm-eyebrow, .mm-shout__eyebrow, .mm-door__eyebrow, .mm-seat__eyebrow,
.mm-truth__eyebrow, .mm-drawer__eyebrow {
  font-size: 0.72rem !important;
  letter-spacing: 0.18em;
  font-weight: 400 !important;
  opacity: 0.88;
}
.mm-five .mm-eyebrow { font-weight: 400 !important; }
.mm-nav a { font-size: 0.72rem; }
.mm-btn, .mm-cta, .mm-seat__go, .mm-seat__open, .mm-others a,
.mm-drawer__go, .mm-back { font-size: 0.78rem; letter-spacing: 0.12em; }
.mm-mine, .mm-footnav a { font-size: 0.75rem; }
.mm-one__go { font-size: 0.74rem; }