/* THE MISSION PAGE — three screens, and nothing that behaves like a white paper.
   The page this replaced ran to eleven screens of argument with four archival photographs
   set into it. Its author's verdict: "A mission page should not behave like a white paper.
   One idea. One visual. A few supporting lines. Done."
   So: one statement, one plate, three stops. Everything here is local to this page; the
   masthead, footer, mark and standing controls keep their own owners. */

.ms{--edge:clamp(22px,6vw,96px);--rule:rgba(201,168,76,.18)}
.ms *{box-sizing:border-box}

/* ── SCREEN 1 ───────────────────────────────────────────────────────────────
   The title is the largest type on the site, on purpose. The plate takes the
   lower half and is never cropped into a band — it has to read as one continuous
   place, which is the entire argument of the picture. */
.ms-one{min-height:100svh;display:flex;flex-direction:column;padding-top:clamp(78px,11vh,132px)}
.ms-word{padding:0 var(--edge)}
/* Cinzel is a capitals-only face — it renders lowercase as capitals, which is the
   intended 'huge NATION BUILDING'. text-transform is set explicitly so the fallback
   stack reads the same way when the webfont has not arrived, and Playfair sits ahead of
   the generic serif because Times at 132px is not this house. */
.ms-word h1{font-family:'Cinzel','Playfair Display',Georgia,serif;font-weight:700;
  text-transform:uppercase;
  font-size:clamp(38px,9.2vw,132px);line-height:.94;letter-spacing:.02em;
  color:var(--paper);margin:0 0 clamp(18px,2.6vh,34px)}
.ms-word h1 span{display:block;color:var(--gold-bright)}
.ms-lead{font-family:'Playfair Display',serif;font-weight:500;
  font-size:clamp(21px,2.9vw,38px);line-height:1.2;color:var(--paper);
  margin:0 0 clamp(14px,2vh,24px);max-width:22ch}
.ms-for{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:6px clamp(18px,3vw,40px)}
.ms-for li{font-family:'Cormorant Garamond',serif;font-size:clamp(17px,2vw,25px);
  color:var(--warm);line-height:1.3}
.ms-for li:first-child{color:var(--gold-bright)}

.ms-plate{position:relative;flex:1 1 auto;min-height:38svh;margin-top:clamp(26px,4vh,54px);
  overflow:hidden}
.ms-plate img{width:100%;height:100%;object-fit:cover;object-position:50% 76%;display:block}
/* the plate meets the page rather than being pasted onto it */
.ms-plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(8,7,11,.35) 14%,rgba(8,7,11,0) 42%,
    rgba(8,7,11,.28) 88%,rgba(8,7,11,.72) 100%)}
.ms-plate figcaption{position:absolute;left:var(--edge);bottom:clamp(14px,2.2vh,26px);
  z-index:2;font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(239,231,214,.62);max-width:46ch}
.ms-plate figcaption b{color:var(--gold);font-weight:500}

/* ── THE DEFINITION ─────────────────────────────────────────────────────── */
.ms-def{padding:clamp(58px,11vh,132px) var(--edge) clamp(48px,9vh,110px);
  border-top:1px solid var(--rule)}
.ms-def .cap{font-family:'Playfair Display',serif;font-weight:500;
  font-size:clamp(24px,3.6vw,46px);line-height:1.16;color:var(--paper);margin:0 0 .7em}
.ms-better{list-style:none;margin:0 0 clamp(30px,5vh,56px);padding:0;
  display:grid;gap:0 clamp(20px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ms-better li{font-family:'Cormorant Garamond',serif;font-size:clamp(18px,2.1vw,26px);
  color:var(--warm);padding:11px 0;border-bottom:1px solid rgba(201,168,76,.1)}
.ms-def .prac{font-family:'Cormorant Garamond',serif;
  font-size:clamp(18px,2.1vw,26px);line-height:1.45;color:var(--warm);
  max-width:34ch;margin:0 0 .55em}
.ms-def .house{font-family:'Playfair Display',serif;font-weight:500;
  font-size:clamp(21px,2.8vw,34px);line-height:1.2;color:var(--paper);
  max-width:22ch;margin:0 0 .5em}
.ms-def .snap{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.06em;
  font-size:clamp(17px,2.2vw,28px);color:var(--gold-bright);margin:0}

/* ── SCREEN 2 ───────────────────────────────────────────────────────────── */
.ms-two{padding:clamp(58px,11vh,132px) var(--edge);border-top:1px solid var(--rule);
  display:grid;gap:clamp(34px,6vw,80px);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center}
.ms-two h2{font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(27px,4.1vw,54px);line-height:1.1;color:var(--paper);margin:0 0 .6em}
.ms-two .method{font-family:'Cormorant Garamond',serif;
  font-size:clamp(17px,1.9vw,23px);line-height:1.48;color:var(--warm);margin:0 0 1.1em;
  max-width:46ch}
.ms-two .turn{margin:0}
.ms-two .turn .no{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(18px,2.1vw,26px);color:var(--muted,#8d8477)}
.ms-two .turn .yes{display:block;font-family:'Playfair Display',serif;font-weight:500;
  font-size:clamp(20px,2.6vw,32px);line-height:1.22;color:var(--gold-bright);margin-top:.2em}
.ms-seq{width:100%;height:auto;display:block}
@media (max-width:860px){.ms-two{grid-template-columns:1fr}}

/* ── SCREEN 3 ───────────────────────────────────────────────────────────── */
.ms-three{padding:clamp(58px,11vh,132px) var(--edge) clamp(70px,12vh,150px);
  border-top:1px solid var(--rule)}
.ms-three h2{font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(27px,4.1vw,54px);line-height:1.1;color:var(--paper);margin:0 0 .34em}
.ms-three .sub{font-family:'Cormorant Garamond',serif;
  font-size:clamp(17px,1.9vw,23px);color:var(--warm);margin:0 0 clamp(24px,4vh,44px)}
.ms-mus{list-style:none;margin:0 0 clamp(34px,6vh,66px);padding:0;
  display:grid;gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.ms-mus li{border:1px solid rgba(201,168,76,.22);border-radius:4px;
  padding:clamp(15px,2vw,22px) clamp(14px,1.8vw,20px);
  background:linear-gradient(160deg,rgba(201,168,76,.055),transparent 62%);
  font-family:'Cinzel',serif;font-weight:500;letter-spacing:.05em;
  font-size:clamp(13px,1.35vw,16px);line-height:1.3;color:var(--paper);
  display:flex;align-items:flex-end;min-height:clamp(78px,9vw,104px);
  transition:border-color .25s,background .25s}
.ms-mus li:hover{border-color:rgba(201,168,76,.5);
  background:linear-gradient(160deg,rgba(201,168,76,.11),transparent 62%)}
.ms-mus li i{display:block;font-style:normal;font-family:'DM Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.2em;color:var(--gold);margin-bottom:auto}

.ms-want{margin:0 0 clamp(34px,6vh,60px);max-width:30ch}
.ms-want p{font-family:'Playfair Display',serif;font-weight:500;
  font-size:clamp(20px,2.7vw,34px);line-height:1.2;color:var(--paper);margin:0 0 .16em}
.ms-want p:last-child{color:var(--gold-bright)}

.ms-end{border-top:1px solid var(--rule);padding-top:clamp(30px,5vh,54px);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,44px);
  justify-content:space-between}
.ms-end .line{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.04em;
  font-size:clamp(19px,2.7vw,34px);line-height:1.18;color:var(--paper);margin:0;
  max-width:18ch}
.ms-end .line b{color:var(--gold-bright);font-weight:700}
.ms-go{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;
  font-family:'Cinzel',serif;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:12.5px;color:var(--ink);background:var(--gold-bright);
  padding:15px 26px;border-radius:999px;transition:transform .22s,box-shadow .22s}
.ms-go:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(201,168,76,.24)}
.ms-alt{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warm);border-bottom:1px solid rgba(201,168,76,.3);
  padding-bottom:3px}
.ms-alt:hover{color:var(--gold-bright)}

@media (prefers-reduced-motion:reduce){
  .ms-go,.ms-mus li{transition:none}
  .ms-go:hover{transform:none}
}