/* ==========================================================================
   GEBI — Mission page
   Loaded after css/styles.css (shared palette, header, sections, card and button
   building blocks, footer).

   Layout follows the mission one-pager: an artwork hero, the statement beside the
   four things the work is made of, one container of core pillars beside the timeline
   of how GEBI got here, and a navy impact band to close. Everything is drawn with
   the site's own tokens — cream, ink, navy, gold, the var(--pad)/var(--max-w) gutters
   and the cream wave strips — so the page reads as the same site as Programs and
   Tools.
   ========================================================================== */

.mn-page{
  --mn-navy:var(--contact-bg);   /* #83accf, the blue the contact panel closes the site on */
  --mn-on-navy:var(--ink);
  --mn-on-navy-soft:var(--ink-copy);
}

/* the landing page redraws the poster's sun inside the fixed bar; this page has no
   such poster, so the disc is switched off (as on the programs, team and tools pages) */
.mn-page .site-header::before{display:none}

/* the fixed bar is ≈69px (56px mark + padding + hairline); the hero starts below it */
.mn-page main{padding-top:4.35rem}
@media (max-width:880px){.mn-page main{padding-top:3.35rem}}

/* ---------- hero: the river valley ----------
   assets/mission-valley.webp (a wide crop of the site's valley artwork) is the
   backdrop. Three cream layers ride on top of it, the same recipe the programs hero
   uses: a radial wash under the copy column so the words never sit on moving ground,
   a bottom gradient that hands the band to the wave strip, and a flat veil so the
   illustration stays a backdrop rather than a photograph. #f4f1ea is written out
   because the scrims are alpha. */
.mn-hero{
  position:relative;display:grid;align-content:center;
  min-height:clamp(23rem,38vw,33rem);
  padding:clamp(2.25rem,5vw,4rem) var(--pad) clamp(4rem,7vw,6rem);
  background-color:var(--cream);
  background-image:
    linear-gradient(180deg,rgba(244,241,234,0) 0%,rgba(244,241,234,0) 78%,rgba(244,241,234,.62) 92%,var(--cream) 100%),
    radial-gradient(ellipse 52% 104% at 14% 46%,rgba(244,241,234,.96) 0%,rgba(244,241,234,.88) 34%,rgba(244,241,234,.46) 62%,rgba(244,241,234,.12) 84%,rgba(244,241,234,0) 100%),
    linear-gradient(rgba(244,241,234,.10),rgba(244,241,234,.10)),
    url(../assets/mission-valley.webp);
  background-position:center,center,center,center 46%;
  background-size:cover,cover,cover,cover;
  background-repeat:no-repeat;
}
/* width:100% keeps the track full-bleed; the auto margins alone would let the
   heading shrink to its max-content width and lose the shared left edge */
.mn-hero-inner{width:100%;max-width:var(--max-w);margin:0 auto}
.mn-h1{
  font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.03;letter-spacing:-.028em;
  color:var(--ink);margin:0 0 1.25rem;max-width:20ch;
}
.mn-lede{
  font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;
  color:var(--ink-copy);max-width:34rem;margin:0;
}
/* the cream wave that carries the artwork band into the sections below — the same
   path and depth the Tools page's hero uses */
.mn-hero-wave{
  position:absolute;left:0;right:0;bottom:-1px;z-index:0;width:100%;
  height:clamp(40px,7vw,96px);color:var(--cream);pointer-events:none;
}

/* ---------- our mission + what we do ----------
   Two columns with the page's hairline between them. The statement carries the gold
   rule the one-pager gives it; the four "what we do" marks sit in one row of four
   where there is room for them, and pair up to two-by-two where there is not. */
.mn-about{padding-top:clamp(2.25rem,5vw,3.5rem);padding-bottom:clamp(2.25rem,4.5vw,3.25rem)}
.mn-about-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.mn-statement{border-left:3px solid var(--yellow);padding-left:clamp(1rem,2vw,1.6rem)}
.mn-statement h2{margin:0 0 .8rem}
.mn-statement p{margin:0;font-size:clamp(1.05rem,1.45vw,1.2rem);line-height:1.6;color:var(--ink-copy)}
.mn-doing{border-left:1px solid var(--line);padding-left:clamp(1.5rem,4vw,3rem)}
.mn-doing h2{margin:0 0 1.1rem;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.mn-doing-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.4rem);margin:0;padding:0;list-style:none;
}
@media (min-width:1180px){
  .mn-doing-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.mn-doing-grid p{
  margin:.7rem 0 0;font-size:.95rem;line-height:1.4;font-weight:500;color:var(--ink);
  max-width:14ch;
}

/* ---------- the mark used by both icon rows ---------- */
.mn-icon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.72);border:1px solid var(--line);color:var(--navy);
}
.mn-icon svg{width:23px;height:23px}
.mn-icon--light{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.9);color:var(--mn-on-navy)}

/* ---------- our view: the umbrella field ----------
   The hinge between what the work is made of and what it rests on. A centred
   statement, a short gold rule, and the watercolour umbrella
   (assets/watercolor-umbrella.png) with BIOSECURITY set across the canopy; the
   disciplines that stand under it follow in one row of seven. The pale teal wash
   behind is drawn in rgba() so it can sit over the cream band rather than on a plate. */
.mn-view{
  padding-top:clamp(3.5rem,7vw,6rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
  background-image:radial-gradient(ellipse 58% 76% at 50% 62%,rgba(122,175,196,.16) 0%,rgba(122,175,196,.06) 46%,rgba(122,175,196,0) 76%);
  background-repeat:no-repeat;
}
.mn-view-inner{display:grid;justify-items:center;text-align:center}
.mn-view-head{margin:0 auto;max-width:32ch;font-size:clamp(1.8rem,3.2vw,2.6rem);text-wrap:balance}
.mn-view-rule{
  display:block;width:clamp(3rem,7vw,5.5rem);height:3px;border-radius:3px;
  background:var(--yellow);margin:clamp(1.1rem,2.2vw,1.6rem) auto;
}
.mn-view-lede{
  margin:0 auto;max-width:46ch;
  font-size:clamp(1.05rem,1.45vw,1.2rem);line-height:1.6;color:var(--ink-copy);
}

/* the umbrella: the artwork (assets/watercolor-umbrella.png) is cropped to its cap —
   overflow:hidden plus a crop ratio of 2172 x 455 of the original file — so the long
   handle run below the hook is trimmed away and the row of marks can sit directly
   under the canopy. A sliver of the stem still reads between canopy and marks, and
   the row overlaps the crop by a hair so the cut end of the stem tucks behind the
   middle mark instead of stopping in mid-air. The word is set over the artwork rather
   than baked into it, so it stays crisp at every width. */
.mn-umbrella{
  width:100%;margin:clamp(1.8rem,3.6vw,2.75rem) 0 0;
  display:grid;justify-items:center;
}
.mn-umbrella-art{
  position:relative;width:min(100%,66rem);overflow:hidden;
  aspect-ratio:2172/455;
}
.mn-umbrella-art img{position:absolute;inset:0 0 auto;width:100%;height:auto}
.mn-umbrella-word{
  position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  font-size:clamp(.82rem,1.95vw,2rem);letter-spacing:.4em;text-indent:.4em;
  color:#f7fbfc;white-space:nowrap;pointer-events:none;
  text-shadow:0 2px 12px rgba(23,58,80,.3);
}

/* the disciplines: one row where there is room, wrapping and re-centring where
   there is not. The last mark is dotted, to read as an open end rather than a
   seventh equal. */
.mn-disciplines{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1rem,2.4vw,1.9rem) clamp(.6rem,1.6vw,1.35rem);
  width:100%;margin:clamp(-.85rem,-1.1vw,-.5rem) 0 0;padding:0;list-style:none;
}
.mn-disciplines li{
  display:grid;justify-items:center;gap:.55rem;
  width:clamp(4.6rem,11vw,7.4rem);
}
/* solid discs, and above the artwork: the stem the row crosses passes behind the
   mark it lines up with instead of running over it */
.mn-disciplines .mn-icon{
  position:relative;z-index:2;width:44px;height:44px;background:var(--cream-hi);
}
.mn-disciplines .mn-icon svg{width:22px;height:22px}
.mn-disciplines p{
  margin:0;max-width:12ch;font-size:.86rem;line-height:1.32;font-weight:500;
  color:var(--ink-copy);
}
.mn-disciplines li.is-more .mn-icon{
  background:transparent;border-style:dashed;color:var(--slate);
}
.mn-disciplines li.is-more p{color:var(--ink-soft)}

/* ---------- core pillars + history ----------
   One container on the left holding the pillars, the timeline on the right. The
   pillars are the card (rounded, translucent white, like every other container on
   the site); the history is set straight on the ground the section carries. */
/* The illustrated campus quad (assets/mission-quad.webp) runs behind both containers,
   full-bleed. Cream rides on top of it in three ways: a vertical fade that hands the
   paper back to the plain cream sections either side, a soft wash under the timeline so
   the copy keeps readable ground, and a flat veil over the rest so the quad reads as a
   backdrop rather than a picture. The veils are heavier than the old watercolour river
   needed, because a busier illustration needs more calming before text can sit on it.
   #f4f1ea is written out because every one of these is alpha. */
.mn-pillars{
  background-color:var(--cream);
  background-image:
    linear-gradient(180deg,var(--cream) 0%,rgba(244,241,234,0) 18%,rgba(244,241,234,0) 82%,var(--cream) 100%),
    radial-gradient(ellipse 50% 76% at 74% 48%,rgba(244,241,234,.88) 0%,rgba(244,241,234,.78) 44%,rgba(244,241,234,.42) 76%,rgba(244,241,234,0) 100%),
    linear-gradient(rgba(244,241,234,.55),rgba(244,241,234,.55)),
    url(../assets/mission-quad.webp);
  background-position:center,center,center,center 52%;
  background-size:cover,cover,cover,cover;
  background-repeat:no-repeat;
  padding-top:clamp(1.75rem,3.5vw,2.5rem);
}
.mn-split{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.25rem);align-items:start;
}
.mn-pillars-card{
  background:rgba(255,255,255,.84);border:1px solid var(--line);border-radius:28px;
  padding:clamp(1.4rem,3vw,2.25rem);
}
.mn-pillars-card h2{margin:0 0 1.3rem}
.mn-pillar-list{
  display:grid;gap:clamp(1rem,2vw,1.35rem);
  margin:0;padding:0;list-style:none;counter-reset:pillar;
}
.mn-pillar-list li{position:relative;padding-left:2.7rem;counter-increment:pillar}
.mn-pillar-list li::before{
  content:counter(pillar);position:absolute;left:0;top:.05rem;
  display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--yellow);color:#3a2f12;font-size:.85rem;font-weight:700;
}
.mn-pillar-list h3{margin:0 0 .2rem;font-size:1.1rem}
.mn-pillar-list p{margin:0;font-size:.98rem;line-height:1.5;color:var(--ink-copy);max-width:40ch}

/* the one inline link style this page uses */
.mn-link{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.5rem;
  font-weight:600;font-size:.97rem;color:var(--link-green);text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:.1rem;transition:opacity .2s;
}
.mn-link:hover{opacity:.7}

/* ---------- our history: the timeline ----------
   A 2px rule with a dot per entry; the last entry is filled navy and labelled
   "Today", so the line reads as still running. */
.mn-history h2{margin:0 0 1.4rem}
.mn-timeline{position:relative;margin:0;padding:0 0 0 1.7rem;list-style:none}
.mn-timeline::before{
  content:"";position:absolute;left:.45rem;top:.5rem;bottom:.5rem;width:2px;
  background:linear-gradient(180deg,var(--line),rgba(34,53,73,.34));
}
.mn-timeline li{position:relative;padding-bottom:clamp(1.4rem,3vw,2.1rem)}
.mn-timeline li:last-child{padding-bottom:0}
.mn-timeline li::before{
  content:"";position:absolute;left:-1.7rem;top:.35rem;width:.9rem;height:.9rem;
  border-radius:50%;background:var(--cream);border:2px solid var(--slate);
}
.mn-timeline li.is-now::before{
  background:var(--mn-navy);border-color:var(--mn-navy);
  box-shadow:0 0 0 5px rgba(58,87,117,.14);
}
.mn-timeline__when{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .35rem;
  font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);
}
.mn-now{
  font-size:.68rem;letter-spacing:.1em;padding:.15rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.6);color:var(--navy);
}
.mn-timeline h3{margin:0 0 .3rem;font-size:1.15rem}
.mn-timeline p:last-child{margin:0;font-size:1rem;line-height:1.55;color:var(--ink-copy);max-width:38ch}

/* ---------- our impact (the navy band) ----------
   The wave above is the programs page's band wave, run the other way: cream fills the
   flat top and laps into the navy behind it, so cream section and navy band share one
   wavy edge instead of a ruled line. */
.mn-band-wave{
  display:block;width:100%;height:clamp(26px,3.4vw,54px);
  color:var(--cream);background:var(--mn-navy);
}
.mn-impact{
  background:var(--mn-navy);color:var(--mn-on-navy);
  padding:clamp(2.5rem,5vw,4rem) var(--pad) clamp(3rem,6vw,4.5rem);
}
.mn-impact-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
}
.mn-impact h2{color:var(--ink);margin:0 0 .8rem}
.mn-impact-copy p{
  margin:0;font-size:clamp(1.05rem,1.45vw,1.2rem);line-height:1.6;color:var(--mn-on-navy-soft);
  max-width:34ch;
}
.mn-impact-grid-list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.5rem);margin:0;padding:0;list-style:none;
  border-left:1px solid rgba(255,255,255,.9);
  padding-left:clamp(1.5rem,4vw,3rem);
}
.mn-impact-grid-list p{
  margin:.7rem 0 0;font-size:.95rem;line-height:1.4;font-weight:500;color:var(--mn-on-navy);
  max-width:15ch;
}

/* ---------- narrow screens ---------- */
@media (max-width:980px){
  .mn-about-grid{grid-template-columns:1fr;gap:2.25rem}
  .mn-doing{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:2rem}
  .mn-split{grid-template-columns:1fr;gap:clamp(1.75rem,4vw,2.5rem)}
  .mn-impact-grid{grid-template-columns:1fr}
  .mn-impact-grid-list{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.9);padding-top:2rem}
}
@media (max-width:760px){
  .mn-hero{padding-bottom:clamp(3.25rem,9vw,4.5rem)}
  .mn-h1{font-size:clamp(2.1rem,9vw,2.9rem)}
  .mn-lede,.mn-impact-copy p{max-width:none}
  .mn-impact-grid-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mn-pillars-card{border-radius:22px}
  .mn-umbrella-word{font-size:.7rem;letter-spacing:.22em;text-indent:.22em;top:41%}
  .mn-disciplines p{font-size:.76rem}
}
/* on phones the row fits three marks across, which puts one disc on the centre line
   and so hides the cut end of the stem rather than leaving it hanging in a gap */
@media (max-width:520px){
  .mn-disciplines li{width:6.2rem}
  .mn-disciplines p{font-size:.84rem;max-width:13ch}
}