/* ============================================================
   PAGE STYLESHEET: pg-mission.css
   Page: mission.html ONLY. Loaded after kit4.css.

   Dev, 2026-10-02: the hero just asks "What's our mission?"; the whole
   mission statement follows word for word in its own section, the vision
   gets the same treatment, then the two principles. Round 9 (Dev,
   2026-10-06): the hero is one full viewport photograph with the question
   directly on it; the three blocks are huge type on flat navy, no cards,
   no rail, no glow, no hairline, no hover state (nothing here is a link).
   The word by word reading light stays: it is the interaction.

   Zero em or en dashes anywhere, including these comments.
   ============================================================ */

body.pg-mission{
  --ms-ink:#F4F7FB;
  --ms-soft:rgb(244 247 251 / .72);
  --ms-coral:#FF6B75;
  --ms-ease:var(--ease-snap, cubic-bezier(.16,1,.3,1));
  /* S3 heading scale: section h2 about 72 px at 1200, 42 px at 390 */
  --ms-h2:clamp(2.6rem,6vw,5.75rem);
  /* item and phrase titles: about 31 px at 1200, 22 px at 390 */
  --ms-item:clamp(1.35rem,2.6vw,2.25rem);
}

/* ------------------------------------------------------------
   1. HERO: one lectern photograph, three crops of the same frame
   (wide, ultra wide, tall). The question sits on the dark doorway
   left of his face; nothing is laid over the picture.
   ------------------------------------------------------------ */
body.pg-mission .ms-hero{
  --photo-pos:85% 50%; --photo-pos-m:50% 0%; --drift-origin:80% 40%;
  --photo-copy-w:80rem;
  padding-bottom:12svh;
}
/* near square landscape windows (4:3 and 5:4 laptops, split screens) show less
   of the wide crop, so the picture slides right to keep his face clear of the title */
@media (min-aspect-ratio:101/100) and (max-aspect-ratio:3/2){
  body.pg-mission .ms-hero{ --photo-pos:68% 50%; }
}
/* S3 heading scale (Dev 2026-10-06): the question grew 20 percent at 1200 (103 to 124 px) and
   33 percent at 1920 (144 to 192 px); it still sits on the dark doorway left of his face */
body.pg-mission .ms-hero .phero__title.ms-hero__title{
  font-size:clamp(3rem,10.3vw,12rem);
  line-height:.96;
  letter-spacing:-.035em;
  max-width:10ch;
  margin:0;
}

/* the photograph arrives once: it settles from 1.06 to full size, then the
   shared drift (scale 1.04 at most, paused off screen) takes over. Transform
   only, nothing is hidden, and reduced motion shows the finished frame. */
@media (prefers-reduced-motion:no-preference){
  html.js body.pg-mission .ms-hero .phero__bg img{
    transform-origin:var(--drift-origin,80% 40%);
    animation:msSettle 2.4s var(--ms-ease) both, bgphoto-drift 22s ease-in-out 2.4s infinite alternate;
    animation-play-state:running, paused;
  }
  html.js body.pg-mission .ms-hero .phero__bg.is-live img{ animation-play-state:running, running; }
}
@keyframes msSettle{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

/* R10 (Dev Q8): the R8 hero title glide returns (R8 used data-rise 2: 26px up, 140 ms
   delay, 0.6s on the snap curve). It is a transform only CSS animation, not data-rise,
   because data-rise holds the text at opacity 0 until the section reveal fires and the
   hero would sit blank on the navy while the photograph decodes. The title stays readable
   from the first paint. Reduced motion: no animation, finished state. */
@media (prefers-reduced-motion:no-preference){
  body.pg-mission .ms-hero .phero__title.ms-hero__title{
    animation:msTitleRise .6s var(--ms-ease) .14s both;
  }
}
@keyframes msTitleRise{ from{ transform:translateY(26px); } to{ transform:none; } }

/* portrait screens (phones, portrait tablets) use the tall crop: the head
   is at the top of that file, so the picture is pinned to its top edge and
   the copy is anchored in the dark doorway to the left of his face. */
@media (max-aspect-ratio:1/1){
  body.pg-mission .ms-hero{
    --photo-copy-y:flex-start; --photo-copy-y-m:flex-start;
    padding-top:0; padding-bottom:0;
  }
  body.pg-mission .ms-hero .phero__bg img{ object-position:50% 0% !important; }
  body.pg-mission .ms-hero .sec-inner{ padding-top:27svh; }
  body.pg-mission .ms-hero .phero__title.ms-hero__title{ font-size:max(10.3vw,4.4rem); max-width:4em; }
}
@media (max-width:600px){
  body.pg-mission .ms-hero .phero__title.ms-hero__title{
    font-size:clamp(3rem,15.4vw,4.4rem);
    max-width:4em;
  }
  /* on short phones the head ends about 0.82 of the screen width down the tall crop, so the
     last line ("mission?") starts below it: the copy never steps up past 56vw */
  body.pg-mission .ms-hero .sec-inner{ padding-top:max(27svh,56vw); }
}

/* ------------------------------------------------------------
   2. THE THREE BLOCKS: flat navy, one left edge (the hero copy's),
   no rail, no light, no grain, no divider.
   ------------------------------------------------------------ */
body.pg-mission .ms-block{
  position:relative;
  background:var(--navy-ground,#0C1833);
  padding-block:clamp(3.5rem,6vw,5.5rem);
}
body.pg-mission .ms-block > .sec-inner{
  max-width:none; padding-block:0; padding-inline:var(--gutter);
}
/* motion-kit.js injects two drifting crimson light fields into every dark
   section; the ground here is flat navy, so they are switched off. */
body.pg-mission .mkx-navy-bg{ display:none !important; }
body.pg-mission .ms-body{ min-width:0; max-width:84rem; }
body.pg-mission .ms-block--vision .ms-body{ max-width:90rem; }

/* ------------------------------------------------------------
   3. TYPE: the question (vision), the lead sentences, "One that".
   ------------------------------------------------------------ */
body.pg-mission .ms-q{
  font-family:var(--display); font-weight:700; color:var(--ms-ink);
  font-size:var(--ms-h2); line-height:1.04; letter-spacing:-.03em;
  margin:0 0 clamp(.9rem,1.8vw,1.8rem);
}
body.pg-mission .ms-lead{
  font-family:var(--display); font-weight:700; color:var(--ms-ink);
  font-size:var(--ms-h2); line-height:1.06; letter-spacing:-.03em;
  max-width:none; margin:0; text-wrap:balance;
}
body.pg-mission .ms-block--vision .ms-lead{ font-size:clamp(2.4rem,5.3vw,5.3rem); }
body.pg-mission .ms-lead em{ font-style:normal; font-weight:800; }
body.pg-mission #statement .ms-lead em{ color:var(--ms-ink); }
body.pg-mission .ms-onethat{
  margin:clamp(2rem,4vw,3rem) 0 1.1rem;
  font-family:var(--display); font-weight:600; font-size:var(--ms-item);
  letter-spacing:0; text-transform:none; color:var(--ms-soft);
}

/* Word by word reading light (pg-mission.js wraps each word in .ms-w and
   arms the block). Without JS, or under reduced motion, nothing is dimmed. */
.ms-scrub.ms-armed .ms-w{
  opacity:.34;
  transition:opacity .55s ease;
}
.ms-scrub.ms-armed .ms-w.is-on{ opacity:1; }

/* ------------------------------------------------------------
   4. THE "YES" STAIRCASE (statement): three huge gradient yeses,
   each a step further along, with their phrase on the same baseline.
   Nothing here is a box and nothing answers a hover.
   ------------------------------------------------------------ */
.ms-triad{ list-style:none; margin:0; padding:0; display:grid; }
.ms-triad--stair{
  margin-top:clamp(2rem,4vw,3.5rem);
  row-gap:clamp(.2rem,1vw,.8rem);
}
.ms-triad--stair .ms-tri:nth-child(2){ margin-left:clamp(0px,5vw,5.5rem); }
.ms-triad--stair .ms-tri:nth-child(3){ margin-left:clamp(0px,10vw,11rem); }
.ms-tri__text{
  margin:0; color:rgb(244 247 251 / .92);
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.7rem,3.8vw,3.8rem); line-height:1.12; letter-spacing:-.015em;
}
.ms-tri__key{
  display:inline-block; font-style:normal; font-weight:800;
  font-size:clamp(3.8rem,9.2vw,8.3rem); letter-spacing:-.04em; line-height:1.12;
  padding:0 .05em .1em 0;
}
/* a one shot shine when a yes lights, then the shared slow drift */
@media (prefers-reduced-motion:no-preference){
  .ms-scrub.ms-armed .ms-tri__key.is-on{
    animation:msYes 1.4s var(--ms-ease) 1, k4GradDrift 11s ease-in-out 1.4s infinite;
    animation-play-state:running, paused;
  }
  .ms-scrub.ms-armed .ms-tri__key.is-on.k4-grad--run{ animation-play-state:running, running; }
}
@keyframes msYes{ from{ background-position:100% 50%; } to{ background-position:10% 50%; } }

/* ------------------------------------------------------------
   5. THE CLOSE: the three "no" lines, display type on the same navy.
   ------------------------------------------------------------ */
.ms-close{
  margin:clamp(4rem,7vw,6rem) 0 0; display:grid; gap:.08em;
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.2rem,4.7vw,4.7rem); line-height:1.08; letter-spacing:-.025em;
  color:var(--ms-ink);
}
.ms-close__line{ display:block; text-wrap:balance; }
.ms-close__no{ color:var(--ms-coral); }

/* ------------------------------------------------------------
   6. THE VISION LEDGER: verb on the left (solid coral), what it does
   on the right. Two columns, no cards, rows have no hover.
   ------------------------------------------------------------ */
.ms-triad--ledger{
  margin-top:0;
  row-gap:clamp(1.4rem,2.6vw,2.4rem);
}
.ms-triad--ledger .ms-tri{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  align-items:baseline; column-gap:clamp(1.2rem,3vw,3rem);
}
.ms-tri__verb{
  margin:0; text-align:right; overflow:hidden; padding-bottom:.12em;
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.8rem,6.9vw,6.4rem); letter-spacing:-.04em; line-height:1.04;
  color:var(--ms-coral);
}
.ms-tri__in, .ms-tri__and{ display:inline-block; }
.ms-tri__and{
  font-size:var(--ms-item); font-weight:600; letter-spacing:0;
  color:var(--ms-ink); margin-right:.25em;
}
.ms-tri__obj{
  margin:0; color:var(--ms-ink);
  font-family:var(--display); font-weight:600;
  font-size:var(--ms-item); line-height:1.2; letter-spacing:-.01em;
}
.ms-triad--ledger .ms-tri:nth-child(3) .ms-tri__obj{ max-width:26ch; }

/* ------------------------------------------------------------
   7. PRINCIPLES: two huge statements; "No options" is struck through
   as it turns into "next steps." The strike is the meaning, not decor.
   ------------------------------------------------------------ */
body.pg-mission .ms-block--principles{ padding-block:clamp(5rem,12vw,10rem); }
.ms-pr{
  margin:0; color:var(--ms-ink);
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,6vw,6rem); line-height:1.05; letter-spacing:-.03em;
  text-wrap:balance;
}
.ms-pr:not(.ms-pr--b){ max-width:22ch; }
.ms-pr--b{
  margin:clamp(2.4rem,6vw,5rem) 0 0 auto;
  width:min(72%,26ch);
}
.ms-pr em{ font-style:normal; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.ms-pr .k4-grad{ white-space:nowrap; }
.ms-becomes{ font-weight:600; }
.ms-next{
  display:block; color:var(--ms-coral); font-size:1.08em; font-weight:800;
}
.ms-strike{ position:relative; white-space:nowrap; opacity:.72; }
.ms-strike::after{
  content:""; position:absolute; left:-.03em; right:-.03em; top:56%; height:.09em;
  background:var(--ms-coral); transform-origin:left center;
  transition:transform .7s var(--ms-ease) .3s;
}
.ms-scrub.ms-armed .ms-strike.ms-w.is-on{ opacity:.72; }
.ms-js .ms-strike.ms-w:not(.is-on)::after{ transform:scaleX(0); }

/* ------------------------------------------------------------
   8. ARRIVAL: only when pg-mission.js runs with motion allowed
   (it adds .ms-js to <html>). Each vision verb rises once out of its
   own mask, its object fades in after it. No JS or reduced motion:
   everything is already in its final place.
   ------------------------------------------------------------ */
.ms-triad--ledger .ms-tri:nth-child(2){ --i:1; }
.ms-triad--ledger .ms-tri:nth-child(3){ --i:2; }
.ms-js .ms-triad--ledger .ms-tri__in,
.ms-js .ms-triad--ledger .ms-tri__and{
  transition:transform .9s var(--ms-ease) calc(var(--i,0) * 140ms);
}
.ms-js .ms-triad--ledger .ms-tri__obj{
  transition:opacity .6s ease calc(var(--i,0) * 140ms + 200ms);
}
.ms-js .ms-triad--ledger .ms-tri:not(.is-in) .ms-tri__in,
.ms-js .ms-triad--ledger .ms-tri:not(.is-in) .ms-tri__and{ transform:translateY(105%); }
.ms-js .ms-triad--ledger .ms-tri:not(.is-in) .ms-tri__obj{ opacity:0; }

/* R10 (Dev Q8): the R8 arrival rise returns for the rows that still exist in the flat
   layout. R8 values: cards and panels 28px with a 120 ms stagger (pg-mission.css 297 to
   300), close lines 16px with a 160 ms stagger (301). Transform only: the reading light
   already owns the opacity of every word, so nothing is hidden and nothing stacks. Rows
   in view when the page opens, no JS, and reduced motion all stay at the finished state
   (the .ms-js class is only added by pg-mission.js when motion is allowed). */
.ms-triad--stair .ms-tri:nth-child(2){ --i:1; }
.ms-triad--stair .ms-tri:nth-child(3){ --i:2; }
.ms-close__line:nth-child(2){ --i:1; }
.ms-close__line:nth-child(3){ --i:2; }
.ms-pr--b{ --i:1; }
.ms-js .ms-triad--stair .ms-tri{ transition:transform .8s var(--ms-ease) calc(var(--i,0) * 120ms); }
.ms-js .ms-triad--stair .ms-tri:not(.is-in){ transform:translateY(28px); }
.ms-js .ms-close__line{ transition:transform .8s var(--ms-ease) calc(var(--i,0) * 160ms); }
.ms-js .ms-close__line:not(.is-in){ transform:translateY(16px); }
.ms-js .ms-pr{ transition:transform .8s var(--ms-ease) calc(var(--i,0) * 120ms); }
.ms-js .ms-pr:not(.is-in){ transform:translateY(28px); }

/* ------------------------------------------------------------
   9. SMALL SCREENS
   ------------------------------------------------------------ */
@media (max-width:900px){
  .ms-triad--ledger .ms-tri{ grid-template-columns:minmax(0,1fr); row-gap:.35rem; }
  .ms-tri__verb{ text-align:left; font-size:clamp(2.8rem,12.6vw,3.4rem); }
  .ms-triad--stair .ms-tri:nth-child(2),
  .ms-triad--stair .ms-tri:nth-child(3){ margin-left:0; }
}
@media (max-width:600px){
  .ms-triad--stair{ row-gap:1.4rem; }
  .ms-tri__text{ font-size:1.75rem; }
  .ms-tri__key{ font-size:4.8rem; }
  .ms-tri__text > .ms-tri__key, .ms-tri__text > .ms-tri__lead{ display:block; }
  .ms-pr .k4-grad{ white-space:normal; }
  .ms-pr--b{ width:86%; }
}
@media (max-width:520px){
  .ms-close{ font-size:clamp(1.8rem,7.9vw,2.4rem); }
}
/* the hidden Principles heading keeps its own text width (still clipped away), so it never measures as an overflowing heading */
body.pg-mission #msPrinciplesLabel{ width:auto; }
/* LIGHT AND DARK:BEGIN (Dev 2026-10-07: "make alternating sections light and dark so that the paper cut design is smooth").
   Statement and principles turn to light paper (sec-paper k4-sec--light, data-ground="light"), vision stays navy, so every
   join on the page tears between contrasting grounds: hero photo, light, navy, light, navy footer. Every rule here reads the
   page's own tokens, so the reading light, the yes shine, the No words and the strike all carry over. */
body.pg-mission .ms-block.mc-light{
  background:#F4F7FB;
  --ms-ink:#0B1B33; --ms-soft:rgb(11 27 51 / .72); --ms-coral:#C9303D;
}
body.pg-mission .mc-light .ms-tri__text{ color:rgb(11 27 51 / .9); }
/* LIGHT AND DARK:END */

/* MISSION PLATES:BEGIN (Dev 2026-10-07: "FUCKING MAKE SOME GOOD ILLUSTRATIONS FOR THE MISSION PAGE, THINK MULTIPLE TIMES AND
   MAKE IT LOOK GOOD"; judged winner C with four grafts, design-1007/mission-decision.md). One cut paper plate per section, each
   cut from real art and set on a torn off white sheet: I a real heart at the end of a paper tunnel whose openings widen (expand
   access), II the real terrain of the United States on one crimson sheet with a crimson heart on Memphis and the state seams
   spreading out from it (one national model), III one heart made of two real plates joined on a seam (collaboration across
   specialties). The hearts are knife cut vector paper (assets/images/papercut/mission, CREDITS.txt). The sheet is the site's
   own torn paper box (the PAPERCUT engine in fable.js papers the plate from its off white fill: torn on all four sides, white
   fibre rim, grain, soft all round shadow); data-box="off" keeps it from answering hover, since a plate is not a link.
   Arrivals play once; no JS and reduced motion show every plate finished. */
body.pg-mission .mc-fig{ margin:clamp(3.5rem,7vw,6rem) auto 0; width:min(100%,var(--mc-w,34rem)); }
body.pg-mission .mc-plate{
  --mc-pad:clamp(12px,1.5vw,20px);
  position:relative; isolation:isolate;
  background:#FDFDFA; padding:var(--mc-pad);
}
body.pg-mission .mc-art{ position:relative; overflow:hidden; aspect-ratio:var(--mc-ar,1); }
body.pg-mission .mc-art img{ position:absolute; display:block; height:auto; max-width:none; }
/* licence credit under each plate, in the site's credit style */
body.pg-mission .mc-credit{
  margin:clamp(1rem,1.6vw,1.35rem) auto 0; max-width:40rem; text-align:center;
  font-size:.8125rem; line-height:1.5; color:rgb(11 27 51 / .62);
}
body.pg-mission .on-dark .mc-credit{ color:rgb(244 247 251 / .6); }
body.pg-mission .mc-credit a{ color:inherit; text-decoration:underline; text-underline-offset:.18em; }

/* ============ PLATE I: access. The Lynch and Jaffe left anterior oblique heart, cut into crimson paper, at the end of a
   tunnel of seven cut sheets, deep navy to off white. The inner openings follow the heart's own outline; each sheet further
   out eases toward an oval, so the opening reads as a passage cut into the plate. */
body.pg-mission .mc-fig--acc{ --mc-w:clamp(30rem,35vw,42rem); }
body.pg-mission .mc-acc .mc-art{ --mc-ar:1000/1100; background:#fbfbf8; }
/* plate I's art runs to the plate's edges, so its front sheet IS the plate: the PAPERCUT engine masks the whole art to the plate's
   tear and only the white fibre rim shows round it (no inner rectangle); the front sheet carries the kit's grain */
body.pg-mission .mc-plate.mc-acc{ padding:0; }
body.pg-mission .mc-acc__ring:last-child > i{
  background-color:var(--c);
  background-image:radial-gradient(circle at 3px 4px, rgb(22 38 76 / .08) .75px, transparent 1.25px),
    radial-gradient(circle at 12px 16px, rgb(125 112 88 / .08) .6px, transparent 1.1px),
    radial-gradient(circle at 9px 21px, rgb(22 38 76 / .06) .7px, transparent 1.2px),
    radial-gradient(circle at 22px 7px, rgb(22 38 76 / .045) .9px, transparent 1.4px);
  background-size:17px 23px, 17px 23px, 29px 31px, 29px 31px;
}
/* the deep back sheet and the inner sheets stop short of the art edge (the front sheet covers them there) */
body.pg-mission .mc-acc .mc-art::before{ content:""; position:absolute; inset:3%; background:var(--back,#0a1430); }
body.pg-mission .mc-acc__ring:not(:last-child){ clip-path:inset(3%); }
/* each sheet's opening (urls here, so they resolve from this stylesheet) */
body.pg-mission .mc-acc__ring:nth-of-type(1){ --hole:url(../images/papercut/mission/access-hole-1.svg); }
body.pg-mission .mc-acc__ring:nth-of-type(2){ --hole:url(../images/papercut/mission/access-hole-2.svg); }
body.pg-mission .mc-acc__ring:nth-of-type(3){ --hole:url(../images/papercut/mission/access-hole-3.svg); }
body.pg-mission .mc-acc__ring:nth-of-type(4){ --hole:url(../images/papercut/mission/access-hole-4.svg); }
body.pg-mission .mc-acc__ring:nth-of-type(5){ --hole:url(../images/papercut/mission/access-hole-5.svg); }
body.pg-mission .mc-acc__ring:nth-of-type(6){ --hole:url(../images/papercut/mission/access-hole-6.svg); }
body.pg-mission .mc-acc__ring:nth-of-type(7){ --hole:url(../images/papercut/mission/access-hole-7.svg); }
/* the heart file carries a 24 unit margin for its paper rim: its box is the C cut's box grown by that margin */
body.pg-mission .mc-acc__heart{ left:29.74%; top:24.49%; width:40.63%; z-index:0; filter:drop-shadow(2px 6px 7px rgb(0 0 0 / .55)); }
body.pg-mission .mc-acc__ring{ position:absolute; inset:0; display:block; filter:drop-shadow(3px 7px 7px rgb(4 10 26 / .5)); }
body.pg-mission .mc-acc__ring:last-child{ filter:drop-shadow(3px 7px 8px rgb(22 38 76 / .4)); }
body.pg-mission .mc-acc__ring > i{
  position:absolute; inset:-6px; padding:6px; display:block; background:var(--c);
  --s:100%;
  -webkit-mask:linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, var(--hole) var(--ox) var(--oy) / var(--s) var(--s) no-repeat;
          mask:linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, var(--hole) var(--ox) var(--oy) / var(--s) var(--s) no-repeat;
  -webkit-mask-origin:border-box, content-box; mask-origin:border-box, content-box;
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* tunnel book parallax: deeper sheets travel further (pg-mission.js sets --px and --py on fine pointers only) */
body.pg-mission .mc-acc__ring, body.pg-mission .mc-acc__heart{
  translate:calc(var(--px,0) * var(--dep,0) * 1px) calc(var(--py,0) * var(--dep,0) * 1px);
}
body.pg-mission .mc-acc__heart{ --dep:var(--hdep,14); }
/* arrival: every opening starts almost shut; they widen from the front sheet inwards, one after another, the heart rises into
   place behind them and gives one beat */
body.pg-mission .mc-acc.mc-armed .mc-acc__ring > i{ --s:7%; }
body.pg-mission .mc-acc.mc-armed .mc-acc__heart{ transform:translateY(5%) scale(.9); }
body.pg-mission .mc-acc.mc-armed.is-in .mc-acc__ring > i{
  --s:100%;
  transition:-webkit-mask-size 1.6s cubic-bezier(.16,1,.3,1) var(--t), mask-size 1.6s cubic-bezier(.16,1,.3,1) var(--t);
}
body.pg-mission .mc-acc.mc-armed.is-in .mc-acc__heart{
  transform:none;
  transition:transform 1.8s cubic-bezier(.16,1,.3,1) .5s;
  animation:mcBeat .9s cubic-bezier(.3,0,.2,1) 2.1s 1;
}
@keyframes mcBeat{ 0%{ scale:1; } 22%{ scale:1.05; } 44%{ scale:.985; } 62%{ scale:1.025; } 100%{ scale:1; } }

/* ============ PLATE II: one national model. The real terrain of the United States (AWS Terrain Tiles) inside the real Census
   outline, cut into seven navy papers, low plains deepest, mountain tops palest, laid on one crimson sheet cut a little larger
   than the nation, every Census state line a crimson seam, and one crimson paper heart on Memphis (the nav's Lynch heart cut;
   its point sits on 65.31% 62.12% of the art, lon -90.049 lat 35.150 in this Albers frame). */
body.pg-mission .mc-fig--nat{ --mc-w:clamp(48rem,62vw,74rem); }
body.pg-mission .mc-nat .mc-art{ --mc-ar:1028/610; margin:2% 1.5% 1.5%; overflow:visible; }
body.pg-mission .mc-nat__l, body.pg-mission .mc-nat__seams{ inset:0; width:100%; }
body.pg-mission .mc-nat__l{ filter:drop-shadow(.5px 1.5px 1.2px rgb(8 16 40 / .55)); }
body.pg-mission .mc-nat__l:first-child{ filter:drop-shadow(1px 4px 5px rgb(22 38 76 / .35)); }
body.pg-mission .mc-nat__seams{ opacity:.95; }
/* the heart file is 258.4 x 370 units with its heart (138.4 wide) inside a 60 unit margin; its tip is at 63.3% 70.6% */
body.pg-mission .mc-nat__pin{
  left:65.31%; top:62.12%; width:clamp(30px,5.8%,56px); z-index:3;
  translate:-63.3% -70.6%; transform-origin:63.3% 70.6%;
}
/* arrival: the crimson sheet comes in with the plains (only its rim ever shows, never a red country), the land is built up layer
   by layer to the peaks, the heart drops onto Memphis and beats once, then the seams spread out from it across the country,
   gathering speed */
body.pg-mission .mc-nat.mc-armed .mc-nat__l{ opacity:0; transform:translateY(-10px); }
body.pg-mission .mc-nat.mc-armed .mc-nat__pin{ opacity:0; transform:translateY(-30px); }
body.pg-mission .mc-nat.mc-armed .mc-nat__seams{
  -webkit-mask:radial-gradient(circle at 65.31% 62.12%, #000 45%, transparent 55%) 65.31% 62.12% / 0% 0% no-repeat;
          mask:radial-gradient(circle at 65.31% 62.12%, #000 45%, transparent 55%) 65.31% 62.12% / 0% 0% no-repeat;
}
body.pg-mission .mc-nat.mc-armed.is-in .mc-nat__l{
  opacity:1; transform:none;
  --dl:calc(var(--i) * 190ms + 260ms);
  transition:opacity .08s linear var(--dl), transform .9s cubic-bezier(.2,.9,.3,1.15) var(--dl);
}
/* the crimson sheet lands with the plains but only turns opaque once they are, so no frame shows a red or muddy country */
body.pg-mission .mc-nat.mc-armed.is-in .mc-nat__l:first-child{ transition:opacity .3s ease 530ms, transform .9s cubic-bezier(.2,.9,.3,1.15) 450ms; }
body.pg-mission .mc-nat.mc-armed.is-in .mc-nat__pin{
  opacity:1; transform:none;
  transition:opacity .2s ease 1.95s, transform .7s cubic-bezier(.3,1.6,.5,1) 1.95s;
  animation:mcBeat .9s cubic-bezier(.3,0,.2,1) 2.6s 1;
}
body.pg-mission .mc-nat.mc-armed.is-in .mc-nat__seams{
  -webkit-mask-size:260% 260%; mask-size:260% 260%;
  transition:-webkit-mask-size 1.4s cubic-bezier(.55,0,1,.45) 2.9s, mask-size 1.4s cubic-bezier(.55,0,1,.45) 2.9s;
}

/* ============ PLATE III: one heart, two plates (Lynch and Jaffe). The outside view (the right heart side) in navy paper, the cut
   open inside view (the left heart side, chambers and chordae) in crimson paper, joined on one seam. Both files share one frame
   (899 x 1300 plus a 26 unit margin for the rim), so the halves meet exactly. The shadow is the stage's, cast once by the joined
   heart, so no shadow falls across the seam. */
body.pg-mission .mc-fig--join{ --mc-w:clamp(29rem,34vw,41rem); margin-top:clamp(3rem,6vw,5rem); margin-bottom:clamp(2.4rem,5vw,4rem); }
body.pg-mission .mc-join .mc-art{ padding:7% 13% 6%; aspect-ratio:auto; }
body.pg-mission .mc-join__stage{ position:relative; aspect-ratio:899/1300; filter:drop-shadow(2px 6px 7px rgb(12 24 51 / .32)); transform-origin:50% 60%; }
body.pg-mission .mc-join__stage img{ left:-2.892%; top:-2%; width:105.784%; }
body.pg-mission .mc-join__out{ z-index:2; }
body.pg-mission .mc-join__in{ z-index:1; }
/* arrival: the two halves come in from either side and meet on the seam; the joined heart beats once when "No options" is
   struck (pg-mission.js adds .mc-beat) */
body.pg-mission .mc-join.mc-armed .mc-join__out{ opacity:.18; transform:translateX(-22%) rotate(-5deg); }
body.pg-mission .mc-join.mc-armed .mc-join__in{ opacity:.18; transform:translateX(22%) rotate(5deg); }
body.pg-mission .mc-join.mc-armed.is-in :is(.mc-join__out,.mc-join__in){
  opacity:1; transform:none;
  transition:opacity .5s ease .1s, transform 1.5s cubic-bezier(.16,1,.3,1) .1s;
}
body.pg-mission .mc-join.mc-beat .mc-join__stage{ animation:mcBeat .9s cubic-bezier(.3,0,.2,1) .35s 1; }

/* the PAPERCUT box engine skips anything wider than 90% of the window, so on phones the plates stay a little inside the gutters */
@media (max-width:600px){
  body.pg-mission .mc-fig{ width:min(100%,var(--mc-w,34rem),88vw); }
  body.pg-mission .mc-plate{ --mc-pad:10px; }
}
body.pg-mission .mc-plate.mc-done *{ transition:none !important; }
@media (prefers-reduced-motion:reduce){
  body.pg-mission .mc-plate *{ animation:none !important; transition:none !important; }
}
/* MISSION PLATES:END */
/* MISSION PASS 1:BEGIN (100x pass 1, 2026-10-07). The plates come alive after they arrive, each with one move that means
   something and that the visitor can call up: the Memphis heart beats every few seconds while the map is on screen and each
   beat sends a pale wave out along the state seams to every corner of the country (one national model, spreading); a hover
   or a tap on the map beats it at once. A hover or tap on the tunnel beats its heart. On the joined heart a hover parts the
   two papers a little along their seam, and letting go closes them with one beat (two specialties, one heart). The plate
   itself never answers (no rim, no lift): only the art inside moves. Reduced motion: none of this runs. */
body.pg-mission .mc-nat__wave{
  inset:0; width:100%; z-index:2; opacity:0; visibility:hidden; pointer-events:none;
  -webkit-mask:radial-gradient(circle at 65.31% 62.12%, transparent 18%, rgb(0 0 0 / .35) 30%, #000 37%, #000 40%, transparent 43%) 65.31% 62.12% / 0% 0% no-repeat;
          mask:radial-gradient(circle at 65.31% 62.12%, transparent 18%, rgb(0 0 0 / .35) 30%, #000 37%, #000 40%, transparent 43%) 65.31% 62.12% / 0% 0% no-repeat;
}
body.pg-mission .mc-nat.mc-armed.is-in.mc-pulse .mc-nat__wave{ animation:mcWave 3.2s cubic-bezier(.3,.12,.5,1) .12s 1; }
body.pg-mission .mc-nat.mc-armed.is-in.mc-pulse .mc-nat__pin,
body.pg-mission .mc-acc.mc-armed.is-in.mc-pulse .mc-acc__heart,
body.pg-mission .mc-join.mc-armed.is-in.mc-pulse .mc-join__stage{ animation:mcBeatP .9s cubic-bezier(.3,0,.2,1) 1; }
/* its own name, so each pulse restarts even after the arrival beat (same frames as mcBeat) */
@keyframes mcBeatP{ 0%{ scale:1; } 22%{ scale:1.05; } 44%{ scale:.985; } 62%{ scale:1.025; } 100%{ scale:1; } }
@keyframes mcWave{
  0%{ visibility:visible; opacity:.95; -webkit-mask-size:0% 0%; mask-size:0% 0%; }
  70%{ visibility:visible; opacity:.85; }
  100%{ visibility:visible; opacity:0; -webkit-mask-size:330% 330%; mask-size:330% 330%; }
}
/* the joined heart parts along its seam while a pointer rests on it, and closes again with a slight overshoot */
body.pg-mission .mc-join__out, body.pg-mission .mc-join__in{
  transition:translate .55s cubic-bezier(.3,1.45,.5,1), rotate .55s cubic-bezier(.3,1.45,.5,1);
}
body.pg-mission .mc-join.mc-armed.is-in :is(.mc-join__out,.mc-join__in){
  transition:opacity .5s ease .1s, transform 1.5s cubic-bezier(.16,1,.3,1) .1s, translate .55s cubic-bezier(.3,1.45,.5,1), rotate .55s cubic-bezier(.3,1.45,.5,1);
}
body.pg-mission .mc-join.mc-part .mc-join__out{ translate:-2.6% .4%; rotate:-1.6deg; }
body.pg-mission .mc-join.mc-part .mc-join__in{ translate:2.6% -.4%; rotate:1.6deg; }
@media (hover:hover) and (pointer:fine){
  body.pg-mission .mc-plate.is-in:is(.mc-acc,.mc-nat,.mc-join){ cursor:pointer; }
}
/* MISSION PASS 1:END */
/* MISSION PASS 2:BEGIN (100x pass 2, 2026-10-07, fresh eyes). Small fixes only: the principles section no longer ends in a
   tall empty band above the footer tear (the closing line now lands with room to breathe, not a void); the map's credit runs
   on one line at desktop instead of two ragged ones; the Memphis heart is a little larger so it reads as a heart at a glance. */
body.pg-mission .ms-block--principles{ padding-bottom:clamp(4.5rem,8vw,7rem); }
body.pg-mission .mc-fig--nat .mc-credit{ max-width:58rem; }
body.pg-mission .mc-nat__pin{ width:clamp(34px,6.4%,62px); }
/* MISSION PASS 2:END */
/* MISSION COMPACT:BEGIN (Dev 2026-10-08: "the words and everything is very big, be clever and arrange everything properly").
   Each section now reads as one screen: its words in one column, centred inside it, with its plate beside them, sides
   alternating (statement: words left, tunnel right; vision: map left, words right; principles: statement, joined heart,
   statement in one row). The type stays editorial but no longer shouts. The yes lines stay straight and stacked. Phones: one
   column, words then plate. Every reading light, arrival and plate move is unchanged. */
/* more room on top than below: the fixed nav covers about 90 px of every section's top as it arrives */
body.pg-mission .ms-block, body.pg-mission .ms-block--principles{ padding-block:clamp(4.25rem,8.6vw,8.75rem) clamp(3.25rem,5.4vw,5.5rem); }
body.pg-mission .ms-body, body.pg-mission .ms-block--vision .ms-body{ max-width:86rem; margin-inline:auto; }
body.pg-mission .ms-col{ min-width:0; text-align:center; }
/* statement */
body.pg-mission #statement .ms-lead{ font-size:clamp(1.85rem,3vw,3.1rem); line-height:1.1; max-width:14.5em; margin-inline:auto; }
body.pg-mission #statement .ms-triad--stair{ margin-top:clamp(1.3rem,2.3vw,2.2rem); row-gap:0; justify-items:center; }
body.pg-mission #statement .ms-triad--stair .ms-tri{ margin:0; text-align:center; }
body.pg-mission .ms-tri__text{ font-size:clamp(1.25rem,1.85vw,1.95rem); line-height:1.15; }
body.pg-mission .ms-tri__key{ font-size:clamp(2.9rem,4.4vw,4.6rem); line-height:1.08; }
body.pg-mission .ms-tri__text > .ms-tri__key{ display:inline-block; }
body.pg-mission #statement .ms-close{ margin:clamp(1.3rem,2.4vw,2.3rem) auto 0; font-size:clamp(1.3rem,1.8vw,1.9rem); line-height:1.22; text-align:center; }
/* vision */
body.pg-mission #vision .ms-q{ font-size:clamp(2.2rem,3.6vw,3.75rem); margin:0 0 clamp(.7rem,1.1vw,1.1rem); }
body.pg-mission #vision .ms-lead{ font-size:clamp(1.55rem,2.5vw,2.65rem); line-height:1.14; max-width:17em; margin-inline:auto; }
body.pg-mission #vision .ms-onethat{ margin:clamp(1.1rem,1.9vw,1.8rem) 0 .4rem; font-size:clamp(1.05rem,1.45vw,1.5rem); }
body.pg-mission #vision .ms-triad--ledger{ row-gap:clamp(.25rem,.6vw,.6rem); justify-items:center; }
body.pg-mission #vision .ms-triad--ledger .ms-tri{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; column-gap:.45em; row-gap:.15rem; }
body.pg-mission #vision .ms-triad--ledger .ms-tri:nth-child(3){ flex-direction:column; align-items:center; }
body.pg-mission #vision .ms-tri__verb{ text-align:center; font-size:clamp(2.5rem,4.1vw,4.25rem); }
body.pg-mission #vision :is(.ms-tri__obj,.ms-tri__and){ font-size:clamp(1.1rem,1.55vw,1.6rem); }
body.pg-mission #vision .ms-triad--ledger .ms-tri:nth-child(3) .ms-tri__obj{ max-width:24ch; margin-inline:auto; }
/* principles */
body.pg-mission #principles .ms-pr{ font-size:clamp(1.85rem,2.9vw,3.05rem); line-height:1.1; text-align:center; margin:0 auto; width:auto; max-width:13em; }
body.pg-mission #principles .mc-fig--join{ margin-block:clamp(2.2rem,5vw,3rem); }
@media (min-width:900px){
  body.pg-mission #statement .ms-body{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:center; column-gap:clamp(2rem,5vw,5rem); }
  body.pg-mission #vision .ms-body{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; column-gap:clamp(2rem,4.5vw,4.5rem); }
  body.pg-mission #vision .mc-fig--nat{ order:-1; }
  body.pg-mission #principles .sec-inner{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; column-gap:clamp(1.5rem,3.6vw,3.75rem); max-width:calc(86rem + 2 * var(--gutter)); margin-inline:auto; }
  body.pg-mission .mc-fig, body.pg-mission #principles .mc-fig--join{ margin:0 auto; }
  body.pg-mission .mc-fig--acc{ --mc-w:clamp(20rem,32vw,34rem); }
  body.pg-mission .mc-fig--nat{ --mc-w:100%; }
  body.pg-mission .mc-fig--join{ --mc-w:clamp(15rem,23vw,24rem); }
}
@media (max-width:899px){ body.pg-mission .mc-fig--join{ --mc-w:min(70vw,19rem); } }
body.pg-mission .mc-credit{ text-wrap:balance; }
body.pg-mission .mc-credit a{ white-space:nowrap; }
/* MISSION COMPACT:END */