/* THE 32 MILLION PROJECT MOVEMENT — the four bands (14 Oct 2026).

   Built on the four screens she sent, and on her own photographs, which is what those screens
   are made of: a fist, a collage of models, the whales, the painting inside 1920. Her word
   when the first try had none of that: "Bakit walang nakapasok based on my requested designs?"

     01 · History of War    — words · a tall photograph · a numeral on its side
     02 · SPAO Outer Week   — a collage at four sizes, a ghost numeral, type on its side
     03 · 1920              — a photograph showing through one enormous numeral
     04 · Beyond the Tide   — readings in the corners, the ladder as stations on a line

   This file loads before edge.css, so any correction she makes there still wins.

   Saved 2026-10-14 21:59. */

.mv, .mvc {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg); color: var(--ink);
}
.mvc { padding: 100px var(--edge, 35px); }

/* the rail of vertical type, from the History of War screen */
.mv-rail {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0 0 28px;
  font: 600 var(--tiny, 12px)/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.mv-rail b { color: var(--accent); font-weight: 700; }
/* turned the other way up, so it reads from the bottom — her word, 14 Oct 2026:
   "'Ung THE MOVEMENT sa kabilang side, iikot mo ng 180 degrees." */
.mv-rail span { writing-mode: vertical-rl; transform: rotate(180deg); }
.mv-rail::after { content: ''; width: 1px; height: 46px; background: currentColor; opacity: .4; }

.mv-kicker, .mvc-kicker {
  display: block; margin: 0 0 18px;
  font: 600 var(--tiny, 12px)/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
}
.mv-head, .mvc-head {
  margin: 0 0 26px;
  font: 400 clamp(34px, 3.6vw, 62px)/1 'Anton', sans-serif;
  text-transform: uppercase; letter-spacing: .01em; text-wrap: balance;
}
.mv-body p {
  margin: 0 0 16px; font: 400 clamp(14px, 1.05vw, 17px)/1.6 var(--body); letter-spacing: .01em;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
}
.mv-body p:last-child { margin-bottom: 0; }
/* the closing belief, heavy and in the band's yellow — her word, 14 Oct 2026: "MAKE THIS BOLD
   YELLOW," and then "Make this not italicized." So it stands straight. */
.mv-body .mv-last { font-style: normal; font-weight: 700; color: var(--accent); }
.mv-close {
  margin: 0; font: 400 clamp(20px, 2.1vw, 34px)/1.06 'Anton', sans-serif;
  letter-spacing: .015em; color: var(--accent);
}

/* Stood up, the rail is taller than a phone column and gets cut off — it lies down on
   anything narrower than a desktop. */
@media (max-width: 1024px) {
  .mv-rail { flex-direction: row; align-items: center; gap: 12px; }
  .mv-rail span { writing-mode: horizontal-tb; transform: none; }
  .mv-rail::after { width: 44px; height: 1px; }
}

/* ── 01 · History of War ─────────────────────────────────────────────────── */
/* Three columns reaching the edges of the band: the words on the dark ground, the photograph
   through the middle, the pale column with the numeral turned on its side. */
/* The count stands on the far left, the photograph through the middle, the words on the right
   — her word, 14 Oct 2026: "ang 131 nasa leftmost, ang the 32 Million Project nasa right."
   The page's own margin travels with them: it is on the left of the count and on the right of
   the words, where the edge of the page actually is. */
/* As tall as the hero at the top of the page — her word, 14 Oct 2026: "isame mo sa header ang
   size vertically." The hero is 682px on a desktop, so that is the band's height too; it is a
   floor, not a ceiling, so a long passage can still push it taller rather than be cut off. */
.mv-1 .mv-split { display: grid; grid-template-columns: .55fr .75fr 1.25fr; min-height: 682px; }
@media (min-width: 1025px) { .mv-1 .mv-split { height: 682px; } }
.mv-1 .mv-side { order: 1; }
.mv-1 .mv-shot { order: 2; }
.mv-1 .mv-pane { order: 3; }
/* 100px of air above the first words and below the last, the same as every other band on the
   page (her standing rule, 10 Oct 2026, and again 14 Oct). The row grows to hold it. */
.mv-1 .mv-pane { padding: 100px var(--edge, 35px) 100px clamp(26px, 3vw, 60px); align-self: center; }
.mv-1 .mv-words { container-type: inline-size; }
@media (min-width: 1025px) {
  /* The rail runs down the side of the column, not above the words — standing in the flow it
     was taking 253px of a band that is only 682 tall, and the last paragraph fell out of it. */
  .mv-1 .mv-pane { position: relative; }
  .mv-1 .mv-pane .mv-rail { position: absolute; top: 44px; left: clamp(26px, 3vw, 60px); margin: 0; }
  .mv-1 .mv-words { padding-left: 42px; }
  .mv-1 .mv-head { margin-bottom: 18px; }
  .mv-1 .mv-kicker { margin-bottom: 12px; }
  .mv-1 .mv-body p { margin-bottom: 11px; line-height: 1.5; }
  .mv-1 .mv-gives { margin-bottom: 11px; }
  .mv-1 .mv-gives li { margin-bottom: 4px; line-height: 1.4; }
}
.mv-1 .mv-body { max-width: 46ch; }

.mv-1 .mv-shot { position: relative; margin: 0; overflow: hidden; background: #000; }
/* a lone photograph, if ever the roll is empty — the roll's own pictures are below, in colour */
.mv-1 .mv-shot > img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block;
  filter: grayscale(1) contrast(1.12) brightness(.82);
}
.mv-1 .mv-shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(270deg, var(--bg), transparent 30%);
}
.mv-1 .mv-shot figcaption {
  position: absolute; left: 18px; bottom: 16px; z-index: 1;
  font: 600 7.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .26em; text-transform: uppercase; color: #F7F3E8; opacity: .85;
}

/* The radial is gone — her word, 14 Oct 2026: "remove the radial." The column is her flat cream
   again, and the count is what carries the red. */
.mv-1 .mv-side {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  /* No margin of its own any more: the blue and the yellow run right out to both sides of the
     column, and the yellow carries on to the bottom of it — her word, 14 Oct 2026: "ang color
     blue and yellow, isagad mo sa left and right side, sa yellow also, 'ung pati baba fill
     yellow." The air each box needs is inside the box now. */
  padding: 0;
  /* The top of the column now wears the same colour as the box around 1 of 8, so the two are one
     ground and only the yellow foot breaks it — her word, 14 Oct 2026: "Try mo nga na 'ung color
     ng sa ibabaw ng 1 of 8 same sa background niya." Everything standing on it (the count, its
     line, its reading) flips to the pale ink so it still carries. */
  background: var(--bg); color: var(--ink);
}
/* The real count, wearing the counter's own look — her word, 14 Oct 2026: "Sana ganito itsura."
   It sits on the band's dark ground inside the pale column, because the menu yellow she pointed
   at needs a dark ground to carry; on cream it would barely show. */
/* The count stands on its side, reading from the bottom up, in her red — her word, 14 Oct 2026:
   "Make 131 of 32,+++ Vertical or rotated to -90 degrees. in Red text." It is taken out of the
   flow and turned about its own middle, so turning it does not drag the column's width with it. */
.mv-live {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 26px 20px 22px;
  container-type: inline-size;
}
@media (min-width: 1025px) {
  .mv-1 .mv-side { justify-content: flex-end; }
  .mv-1 .mv-miles { padding: 20px 18px; }
  /* Oversized, in the top right corner of the cream column, back in her blue — her word,
     14 Oct 2026: "Gawin mo itong oversized sa upper right corner in blue na lang ulit."
     It is set on its side by the writing direction rather than by a turn, so its box is
     genuinely tall and narrow and the corner it is pinned to is the corner it occupies. */
  /* Turned about its own top-right corner: a quarter turn anticlockwise maps the block's own
     length onto the column's height, and the step back along its new x axis brings it inside
     the corner it is pinned to. Width here is what you see as its height. */
  .mv-1 .mv-live {
    /* its width is what you see as its height, so it has to be long enough for the number
       itself — 131 at this size needs about 290px of it — and short enough to stay clear of
       the 1 of 8 box further down the column */
    position: absolute; top: 0; right: 0; width: 340px; padding: 18px 12px;
    transform-origin: 100% 0;
    transform: rotate(-90deg) translateY(-100%);
    align-items: center; gap: 8px;
  }
  .mv-1 .mv-live-now { font-size: clamp(96px, 12.5vw, 200px); }
  .mv-1 .mv-live-bar { width: 180px; height: 7px; margin: 0; }
}
/* in her blue again, not the red — and written the way the giant GIFT is written behind the
   gift cards: the outline only, nothing filled in (her word, 14 Oct 2026: "Try mo ngang isulat
   si 131 as parang 'ung typography sa likod neto, 'ung GIFT"). */
.mv-1 .mv-live-now {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.mv-1 .mv-live-of { color: color-mix(in srgb, var(--ink) 62%, transparent); }
.mv-1 .mv-live-bar { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.mv-1 .mv-live-bar i { background: var(--ink); }
.mv-live-now {
  font: 400 clamp(54px, 7vw, 120px)/.86 'Anton', sans-serif; letter-spacing: -.01em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.mv-live-of {
  font: 600 var(--tiny, 12px)/1.5 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
.mv-live-bar {
  width: 100%; height: 6px; margin: 16px 0 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 16%, transparent); overflow: hidden;
}
.mv-live-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
/* 1 of 8, flat and straight, in its own dark box again — her word, 14 Oct 2026: "Ibalik mo 'ung
   box na blue sa nakapalibot sa 1 of 8 originally" — and sitting straight on The 32 Million
   Project, the two of them touching. */
.mv-miles {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 22px clamp(16px, 2vw, 28px); background: var(--bg); color: var(--ink);
}
.mv-miles b { font: 400 clamp(20px, 2vw, 30px)/1 'Anton', sans-serif; font-variant-numeric: tabular-nums; }
.mv-miles span {
  font: 600 var(--tiny, 12px)/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.mv-live-miles { display: flex; flex-direction: column; gap: 6px; }
.mv-live-miles b {
  font: 400 clamp(20px, 2vw, 30px)/1 'Anton', sans-serif; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* "Milestones reached" stays on one line, as it does on the counter — in this narrow column it
   gives up a little size rather than breaking in two. */
.mv-live-miles span {
  font: 600 clamp(9px, 6.8cqw, var(--tiny, 12px))/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.mv-live-of { white-space: nowrap; font-size: clamp(9px, 6.4cqw, var(--tiny, 12px)); }
/* the two boxes touch — her word, 14 Oct 2026: "Pagdikitin mo 'ung upper box at yellow box." */
.mv-1 .mv-block { margin-top: 0; padding: 24px clamp(16px, 2vw, 28px) 30px; background: var(--accent); color: #0B0B0C; }
.mv-1 .mv-block small {
  display: block; margin: 0 0 10px;
  font: 700 7.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .26em; text-transform: uppercase;
}
.mv-1 .mv-block .mv-close { color: #0B0B0C; font-size: clamp(17px, 1.5vw, 24px); }

@media (max-width: 1024px) {
  /* Stacked in the same order a desktop reads them, left to right: the count, the photograph,
     then the words — her word, 14 Oct 2026: "Gusto ko sa mobile, kung pano itsura ng
     pagkakasunod-sunod, ganun. Mali kasi nauna ang the movement." */
  .mv-1 .mv-side { order: 1; }
  .mv-1 .mv-shot { order: 2; }
  .mv-1 .mv-pane { order: 3; }
  .mv-1 .mv-split { grid-template-columns: 1fr; min-height: 0; }
  .mv-1 .mv-pane { padding: 100px var(--edge, 35px); }
  /* Square on a phone and a pad, and held to the top of the photograph so nobody's head is cut
     off — her word, 14 Oct 2026: "make it square, at walang putol na ulo." */
  .mv-1 .mv-shot { aspect-ratio: 1; height: auto; max-height: none; }
  .mv-1 .mv-shot > img, .mv-1 .mv-roll img { object-position: 50% 2%; }
  /* Stacked, not side by side: each box then runs the whole width of the screen, which is what
     reaching both sides means on a phone. The yellow is last, so it is the bottom. */
  .mv-1 .mv-side { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .mv-1 .mv-live { flex: 0 0 auto; padding: 26px 20px 22px; }
  .mv-1 .mv-block { margin: 0; flex: 1; }
}

/* ── 02 · SPAO Outer Week ────────────────────────────────────────────────── */
.mv-2 { padding: 90px 0; }
.mv-2 .mv-collage {
  position: relative; width: min(1280px, 100% - var(--edge, 35px) * 2); margin: 0 auto 60px;
  height: clamp(420px, 42vw, 620px);
}
.mv-2 .mv-collage figure { position: absolute; margin: 0; overflow: hidden; background: #ded8cb; }
.mv-2 .mv-collage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; display: block; }
/* four sizes, staggered — the collage on her SPAO screen is never level and never equal */
.mv-2 .mv-c1 { left: 0;    top: 6%;  width: 25%; height: 78%; }
.mv-2 .mv-c2 { left: 30%;  top: 26%; width: 17%; height: 52%; }
.mv-2 .mv-c3 { right: 17%; top: 0;   width: 20%; height: 62%; }
.mv-2 .mv-c4 { right: 0;   top: 34%; width: 22%; height: 60%; }
.mv-2 .mv-ghost-num {
  position: absolute; left: 50.5%; top: 2%; z-index: -1;
  font: 400 clamp(120px, 15vw, 250px)/.8 'Anton', sans-serif;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--ink) 20%, transparent);
}
.mv-2 .mv-vert {
  position: absolute; right: 40.5%; top: 4%; writing-mode: vertical-rl;
  font: 600 var(--tiny, 12px)/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .3em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.mv-2 .mv-under {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: end;
  width: min(1280px, 100% - var(--edge, 35px) * 2); margin-inline: auto;
}
.mv-2 .mv-body { max-width: 52ch; }
.mv-2 .mv-close { padding-bottom: 8px; border-bottom: 2px solid var(--accent); justify-self: start; }
@media (max-width: 900px) {
  .mv-2 .mv-collage { height: 108vw; }
  .mv-2 .mv-c1 { width: 44%; height: 46%; top: 0; }
  .mv-2 .mv-c2 { left: 52%; width: 36%; height: 34%; top: 8%; }
  .mv-2 .mv-c3 { right: 6%;  top: 48%; width: 40%; height: 40%; }
  .mv-2 .mv-c4 { left: 4%;   top: 54%; width: 34%; height: 36%; }
  .mv-2 .mv-under { grid-template-columns: 1fr; align-items: start; }
  .mv-2 .mv-close { margin-top: 30px; }
}

/* ── 03 · 1920 ───────────────────────────────────────────────────────────── */
/* The photograph is inside the numeral, not behind it — the way 1920 holds its painting. */
.mv-3 { padding: 90px 0 100px; }
.mv-3 .mv-in { position: relative; width: min(1280px, 100% - var(--edge, 35px) * 2); margin-inline: auto; }
.mv-3 .mv-cut { position: relative; margin: 0 0 -1.2vw; line-height: 0; text-align: center; }
.mv-3 .mv-cut span {
  display: inline-block;
  font: 400 clamp(220px, 40vw, 620px)/.78 'Anton', sans-serif; letter-spacing: -.03em;
  background-image: var(--shot); background-size: cover; background-position: 50% 20%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* if a browser will not put a picture inside letters, they stay readable in the ink */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .mv-3 .mv-cut span { color: color-mix(in srgb, var(--ink) 22%, transparent); }
}
/* no rule across the top here: the numeral hangs over this block, and a full-width line was
   cutting straight through the photograph inside it. A short mark instead, under the rail. */
.mv-3 .mv-quote { position: relative; z-index: 1; max-width: 62ch; padding: 0; }
.mv-3 .mv-quote::before { content: ''; display: block; width: 120px; height: 2px; background: var(--accent); margin: 0 0 24px; }
/* the rail lies down on this band — stood up, it opened a gap the height of a paragraph */
.mv-3 .mv-rail { flex-direction: row; align-items: center; gap: 12px; margin: 0 0 20px; }
.mv-3 .mv-rail span { writing-mode: horizontal-tb; }
.mv-3 .mv-rail::after { width: 44px; height: 1px; }
.mv-3 .mv-body { max-width: 58ch; }
.mv-3 .mv-close { margin-top: 28px; }
/* the markers that page drops on its artwork */
.mv-3 .mv-mark {
  position: absolute; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 700 15px/1 var(--body); font-style: normal;
  background: var(--accent); color: #F7F3E8;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 26%, transparent);
}
.mv-3 .mv-mark-a { left: 20%; top: 18%; }
.mv-3 .mv-mark-b { right: 27%; top: 10%; }
.mv-3 .mv-mark-c { right: 12%; top: 36%; }
@media (max-width: 900px) {
  .mv-3 .mv-cut { margin-bottom: 10px; }
  .mv-3 .mv-mark { display: none; }
}

/* ── 04 · Beyond the Tide ────────────────────────────────────────────────── */
.mvc-shot {
  position: absolute; inset: 0; z-index: -1; background-image: var(--shot);
  background-size: cover; background-position: 50% 24%;
  filter: grayscale(1) contrast(1.1); opacity: .12;
}
.mvc-corner {
  position: absolute; z-index: 1;
  font: 600 7.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .26em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.mvc-tl { left: var(--edge, 35px); top: 34px; }
.mvc-tr { right: var(--edge, 35px); top: 34px; display: inline-flex; align-items: center; gap: 13px; }
/* The little record light before LIVE — her word, 14 Oct 2026: "May red sa before LIVE na parang
   record button, white tapos may circle na white… Parang active recording," then "Dapat 'ung white
   circle doble," and finally: "Hindi na pipintig, on and of na lang ang inner white circle at .5
   seconds," and then: "What if 'ung outer 'ung on and off." So nothing swells and nothing travels
   any more: her red in the middle, two white rings around it with the band's ground between them,
   and the OUTER ring alone goes on for half a second and off for half a second, snapping rather
   than fading. (To put the blink back on the inner ring instead, swap which of the two layers in
   the second frame below is var(--bg).) */
.mvc-rec {
  position: relative; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: #D62828;
  /* the inner ring is half the thickness of the outer one — her word, 14 Oct 2026:
     "'ung inner white, mas manipis pa ng 50% white." */
  box-shadow: 0 0 0 .75px #fff, 0 0 0 3px var(--bg), 0 0 0 4.5px #fff;
  animation: mvc-rec 1s steps(1, end) infinite;
}
@keyframes mvc-rec {
  0%, 49.99% { box-shadow: 0 0 0 .75px #fff, 0 0 0 3px var(--bg), 0 0 0 4.5px #fff; }
  50%, 100%  { box-shadow: 0 0 0 .75px #fff, 0 0 0 3px var(--bg), 0 0 0 4.5px var(--bg); }
}
@media (prefers-reduced-motion: reduce) { .mvc-rec { animation: none; } }
.mvc-bl { left: var(--edge, 35px); bottom: 34px; }
.mvc-br { right: var(--edge, 35px); bottom: 34px; }
@media (max-width: 700px) { .mvc-corner { display: none; } }

.mvc-in { position: relative; z-index: 1; width: min(1280px, 100% - var(--edge, 35px) * 2); margin-inline: auto; text-align: center; }
.mvc-head { margin-inline: auto; margin-bottom: 24px; }
.mvc-count { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 22px; }
.mvc-now {
  display: block; font: 400 clamp(64px, 11vw, 190px)/.9 'Anton', sans-serif;
  letter-spacing: -.01em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.mvc-of {
  font: 600 var(--tiny, 12px)/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .26em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
.mvc-bar {
  width: min(760px, 100%); height: 6px; margin: 0 auto 26px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 16%, transparent); overflow: hidden;
}
.mvc-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.mvc-read { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(26px, 5vw, 70px); margin: 0 0 42px; }
.mvc-read div { display: flex; flex-direction: column; gap: 6px; }
.mvc-read b { font: 400 clamp(20px, 2vw, 30px)/1 'Anton', sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.mvc-read span {
  font: 600 var(--tiny, 12px)/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* her ladder, drawn as stations on one line */
/* the stations are spread along the line, not huddled in the middle of it */
.mvc-rungs {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between;
  width: min(940px, 100%); margin: 0 auto 30px; gap: 18px clamp(10px, 1.6vw, 26px);
  padding: 26px 0 0; list-style: none;
}
.mvc-rungs::before {
  content: ''; position: absolute; left: 3%; right: 3%; top: 32px; height: 1px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.mvc-rungs li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-variant-numeric: tabular-nums;
}
.mvc-rungs li i {
  width: 13px; height: 13px; border-radius: 50%; background: var(--bg);
  border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent);
}
.mvc-rungs b { font: 700 clamp(12px, 1.05vw, 15px)/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; }
.mvc-rungs span {
  font: 600 7.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.mvc-rungs .is-done i { background: var(--accent); border-color: var(--accent); }
.mvc-rungs .is-done b, .mvc-rungs .is-done span { color: var(--accent); }
.mvc-rungs .is-next i { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 14%, transparent); }

/* The rung that has been reached beats like a heart — her word, 14 Oct 2026: "Glowing sana na
   may pintig ng puso 'ung parang vibration." Two beats and a rest, over and over: the dot swells
   and its glow swells with it, and a ring of its own colour goes out from it and fades. It holds
   still for anyone who has asked their machine to stop moving things. */
.mvc-rungs .is-done i { position: relative; animation: mvc-beat 2.4s ease-in-out infinite; }
.mvc-rungs .is-done i::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0;
  animation: mvc-ring 2.4s ease-out infinite;
}
@keyframes mvc-beat {
  0%, 34%, 100% { transform: scale(1);    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--accent) 40%, transparent); }
  6%            { transform: scale(1.32); box-shadow: 0 0 18px 5px color-mix(in srgb, var(--accent) 80%, transparent); }
  13%           { transform: scale(1.04); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--accent) 45%, transparent); }
  21%           { transform: scale(1.2);  box-shadow: 0 0 14px 4px color-mix(in srgb, var(--accent) 65%, transparent); }
}
@keyframes mvc-ring {
  0%        { transform: scale(1); opacity: .6; }
  45%, 100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mvc-rungs .is-done i, .mvc-rungs .is-done i::after { animation: none; }
}

/* Set like NEXT MILESTONE under the readings — her word, 14 Oct 2026: "'ung sulat ng --- COUNTED
   FROM PAID ORDERS ONLY --- same sa next milestone." Her mono, spaced out, in capitals, at the
   same weight and the same muted ink as those labels. (Straight, not leaning, as she asked
   before it.) */
.mvc-note {
  /* wide enough that her dashes stay on one line; the spacing between letters makes each
     character take more room than a plain ch (14 Oct 2026) */
  margin: 0 auto; max-width: 72ch;
  font: 600 var(--tiny, 12px)/1.6 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* ── 05 · the moving animation ───────────────────────────────────────────────
   Her word, 14 Oct 2026: "Here are my choices for moving animation." Two rows that never
   stop — the top walks left, the lower walks right. Each row is printed twice, end to end,
   so the join never shows. It holds still for anyone who has asked their computer to stop
   moving pictures, and while the pointer is on it.

   Saved 2026-10-14 21:59. */
/* Smaller, and off the red — her word, 14 Oct 2026: "liitan mo si WORN also wag red
   background. Ganito," pointing at the circles band. The ground, the ink and the accent are
   fields, so the colours are set with the band, not here; this is only the size. */
.mvm {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg); color: var(--ink); padding: 64px 0;
}
.mvm-head { width: min(1280px, 100% - var(--edge, 35px) * 2); margin: 0 auto 30px; text-align: center; }
/* The two lines are set the way Who We Are is set — her word, 14 Oct 2026: "Ganitong
   typography." The small line is her mono, spaced out and in capitals; the sentence under it
   is Fraunces at the same weight and size as that band's opening line, in its own case. */
.mvm-kicker {
  display: block; margin: 0 0 18px;
  font: 600 12px/1.2 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.mvm-title {
  margin: 0; font: 600 clamp(26px, 3.2vw, 40px)/1.25 'Fraunces', Georgia, serif;
  letter-spacing: -.01em; text-wrap: balance;
}

.mvm-track { display: flex; width: max-content; }
.mvm-track + .mvm-track { margin-top: 5px; }
/* They touched for a few minutes and then took their air back — her word, 14 Oct 2026:
   "Mas maganda pala may space pero make it 10px," then, minutes later, "5px lang pala space ng
   photos." Five between every pair, and five between the two rows; the rounded corners come
   back with the air, since nothing nicks them now. */
.mvm-run { display: flex; gap: 5px; padding-right: 5px; animation: mvm-left var(--secs, 60s) linear infinite; }
.mvm-back .mvm-run { animation-name: mvm-right; }
@keyframes mvm-left  { from { transform: translateX(0); }     to { transform: translateX(-100%); } }
@keyframes mvm-right { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.mvm-card {
  /* a quarter of what they were on the red, then half again as big, and then the number she
     named — her word, 14 Oct 2026: "Try 175," and straight after it, "150." 150 across on a
     wide screen, 200 tall with it; it steps down with the screen and never goes under 95. */
  margin: 0; flex: 0 0 auto; width: clamp(95px, 9.33vw, 150px); aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.mvm-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }

.mvm:hover .mvm-run { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mvm-run { animation: none; } }

/* the roll in band 01: every photograph she chose, a second each (14 Oct 2026) */
.mv-roll { position: absolute; inset: 0; }
/* In colour, and half a second each — her word, 14 Oct 2026: "Sa photo, make it colored, and
   .5 seconds only", then "1/4 seconds only." The fade stays far shorter than the step, so it
   reads as a cut and not a dissolve.
   Saved 2026-10-14 21:59. */
.mv-roll img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%; display: block;
  opacity: 0; transition: opacity .04s linear;
}
.mv-roll img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mv-roll img { transition: none; } }

/* the bar sits over the page, so the band does not start under it when 32M is clicked */
.mv { scroll-margin-top: 92px; }

/* A headline turns where she puts the break, not where the column happens to run out
   (her word, 14 Oct 2026: "Two lines sana"). And it is never bigger than the width its longest
   line can take, so her two lines stay two lines at every screen — the ladder above is the
   ceiling, the column is the cap. */
.mv-head { white-space: pre-line; }
/* 7.4cqw is the largest the headline can be and still hold her longest line on one line:
   that line measures just under 13 times the font size in this face, with a little to spare
   for a font that arrives late. */
.mv-1 .mv-head { font-size: min(clamp(34px, 3.6vw, 62px), 7.4cqw); }

/* where the money goes, as a list (14 Oct 2026) */
.mv-gives { margin: 0 0 16px; padding: 0; list-style: none; max-width: 50ch; }
.mv-gives li {
  position: relative; padding-left: 20px; margin: 0 0 7px;
  font: 400 clamp(14px, 1.05vw, 17px)/1.5 var(--body); letter-spacing: .01em;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
}
.mv-gives li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* the closing band's glow, on the moving animation (14 Oct 2026) */
.mvm-sun {
  position: absolute; z-index: 0; left: 50%; top: 50%; width: 70vmin; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
}
.mvm-head, .mvm-track { position: relative; z-index: 1; }

/* where 32M lands: the top of the first band, clear of the bar that floats over it */
.mv-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; scroll-margin-top: 96px; }

/* Her longer copy, 14 Oct 2026: the band keeps the hero's height as its FLOOR, but a passage
   this long has to be allowed to make it taller — pinned, the last paragraphs fell outside it. */
@media (min-width: 1025px) { .mv-1 .mv-split { height: auto; min-height: 682px; } }
/* the thing each item is, then what it means */
.mv-gives li b { font-weight: 600; color: var(--ink); }
.mv-gives li span { color: inherit; }

/* ─────────────────── the closing line, under the 131 and over the photograph (14 Oct 2026)
   Her word: "sa ilalim ng 131 na nagooverlap sa photo tapos iba kulay papasok sa loob." It
   leaves the cream column and crosses into the picture, so it is given her red — the one
   colour in the band that is neither the cream it starts on nor the navy of the count. */
@media (min-width: 1025px) {
  .mv-1 .mv-side { z-index: 2; }
  .mv-1 .mv-close {
    position: absolute; z-index: 3;
    /* far enough right to cross well into the photograph, but with more of it still outside
       than in — her word, 14 Oct 2026: "mas pasok pa siya sa photo", then "mas nasa labas
       than sa loob ng photo" */
    /* the line is narrower as well as further left: at 170% of the column it could not sit
       mostly outside the photograph however far left it started */
    left: clamp(20px, 2.4vw, 44px); top: 360px; width: 150%;
    margin: 0; color: var(--accent2, #AE2012);
    font: 400 clamp(22px, 2.1vw, 34px)/1.08 'Anton', sans-serif; letter-spacing: .015em;
    text-transform: uppercase; pointer-events: none;
  }
  .mv-1 .mv-block { padding-bottom: 22px; }
}

/* Stacked, there is no photograph beside the count to cross into — the line would sit red on
   navy, which cannot be read. On a phone and a pad it joins the yellow block instead, under
   the project's name, which is where it lived before. */
@media (max-width: 1024px) {
  .mv-1 .mv-block { order: 1; padding-bottom: 6px; }
  .mv-1 .mv-close {
    order: 2; margin: 0; padding: 0 clamp(16px, 2vw, 28px) 26px;
    background: var(--accent); color: #0B0B0C;
    font: 400 clamp(20px, 5.2vw, 30px)/1.08 'Anton', sans-serif;
    letter-spacing: .015em; text-transform: uppercase;
  }
}

/* The closing line crosses from the cream column onto the photograph, so it is navy where it
   starts and white where it lands — the same trick a design's name uses on a product page, and
   the one she pointed at (14 Oct 2026: "Ang goal nung nakapatong sa loob is like this").
   name-over-photo.js works out where the picture's edge falls and writes it down as --name-cut. */
@media (min-width: 1025px) {
  /* her red, the colour of the band above this one on the Main page (14 Oct 2026: "Red sana si
     A Legacy, based sa color ng section sa taas niya"). It is a field, so changing the band
     above means changing one setting here rather than editing this file. */
  .mv-1 .mv-close { color: var(--close-ink, #AE2012); white-space: pre-line; text-align: center; }
  .mv-1 .mv-close::before {
    content: attr(data-name) / "";
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    white-space: pre-line; color: #fff; text-shadow: 0 1px 10px rgba(0, 18, 25, .35);
    clip-path: inset(0 0 0 var(--name-cut, 100%));
  }
}
@media (max-width: 1024px) { .mv-1 .mv-close { white-space: pre-line; } }

/* the yellow block's own line, back under the project's name (14 Oct 2026) */
.mv-1 .mv-block-line {
  margin: 0; color: #0B0B0C;
  font: 400 clamp(17px, 1.5vw, 24px)/1.06 'Anton', sans-serif;
  letter-spacing: .015em; text-transform: uppercase;
}

/* the yellow block reads from the right (her word, 14 Oct 2026: "Justified Right") */
.mv-1 .mv-block { text-align: right; }

/* The line under the counter's note (14 Oct 2026). Only its closing sentence is heavy and in
   the band's yellow — her word the same day: the first part "(old color, not bold)", the last
   one "(make this bold letters and color yellow)". The two are separate settings, so each stays
   hers to edit on the page. */
/* It breaks where she breaks it — her word, 14 Oct 2026: "Ganito ang sulat," written on three
   lines. The line breaks are kept as she typed them; narrow screens still wrap as they must. */
.mvc-after {
  margin: 18px auto 0; max-width: 82ch; white-space: pre-line;
  font: 400 clamp(14px, 1.1vw, 17px)/1.6 var(--body);
  color: color-mix(in srgb, var(--ink) 86%, transparent);
}
.mvc-after b { font-weight: 700; color: var(--accent); }

/* The words were put on yellow for a few minutes and then taken back off — her word,
   14 Oct 2026: "Mas may dating 'ung dati." They stand on the band's navy, as before.

   The circles band's colours — the warm off-white, the navy, the red — were tried on this
   column the same day and taken straight back off at her word: "Mas maganda 'ung original."
   Nothing of that try is left here. */