/* ============================================================================
   mission.css — the Mission statement view (#view-mission)
   ----------------------------------------------------------------------------
   A four-movement editorial page that argues its mission the way the rest of
   the archive argues everything: the question in rising type, then each of the
   three commitments SHOWN by a stationary hand-drawn hairline figure locked
   beside its sentence — on flat paper, no card chrome — and one ceremonial act,
   a cinnabar name-chop pressed once into the page.

   It speaks only the site's own vocabulary: Spectral / Source Serif 4 / Noto
   Serif TC, the seasonal 五行 accent (via the --lib-* bridge that library.css
   sets on .oa-lib, so every colour here is phase- and dark-correct for free),
   and the same drawn-figure line language as the home premise section.

   TWO HOUSE LAWS THIS FILE OBEYS
   1. Content is fully visible with NO JavaScript and under reduced motion.
      Every hidden initial state is gated on `html.oa-mission-live`, a class
      motion-mission.js adds ONLY once its IntersectionObserver is live and will
      put things back (same contract as library.css's `oa-lib-live`). Nothing
      here sets opacity:0 outside that gate.
   2. "The words move, the diagrams do not" (library.css §oa-thesis). Type rises;
      figures only fade; the one thing that moves like a stamp is the chop.
   ============================================================================ */

#view-mission{
  --ms-gutter: clamp(22px, 6vw, 96px);
  font-family:'Source Serif 4', Georgia, serif;
  color: var(--lib-t1, #14110f);
}

#view-mission .ms-wrap{
  max-width:1180px; margin:0 auto;
  padding-left:var(--ms-gutter); padding-right:var(--ms-gutter);
}

/* the microscopic tracked label that opens each movement */
#view-mission .ms-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Inter', sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--lib-acc, #9e2b25);
  margin:0 0 30px;
}
#view-mission .ms-eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.55;
}

/* ============================================================================
   ACT I — THE QUESTION
   ============================================================================ */
#view-mission .ms-hero{
  position:relative; overflow:hidden;
  min-height:100dvh; display:flex; align-items:center;
  border-bottom:1px solid var(--lib-bd, #e4e0d8);
}
#view-mission .ms-hero-mark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-52%);
  font-family:'Noto Serif TC', serif; font-weight:900;
  font-size:min(72vw, 700px); line-height:.8;
  color:var(--lib-t1, #14110f); opacity:.04;
  pointer-events:none; user-select:none; white-space:nowrap; z-index:0;
}
html[data-theme="dark"] #view-mission .ms-hero-mark{ opacity:.055; }

#view-mission .ms-hero-inner{
  position:relative; z-index:1; width:100%;
  padding-top:clamp(120px, 20vh, 190px); padding-bottom:clamp(96px, 16vh, 150px);
}
#view-mission .ms-hero-lead{
  font-family:'Source Serif 4', serif; font-size:clamp(16px,2.1vw,20px);
  line-height:1.6; color:var(--lib-t3, #7a736b); margin:0 0 22px; max-width:44ch;
}
#view-mission .ms-question{
  font-family:'Spectral', serif; font-weight:600; font-style:italic;
  font-size:clamp(34px, 6.1vw, 82px); line-height:1.08; letter-spacing:-1px;
  margin:0; max-width:19ch; text-wrap:balance; color:var(--lib-t1, #14110f);
}
#view-mission .ms-question em{ color:var(--lib-acc, #9e2b25); font-style:italic; }

/* each word is its own rising cell (a clip mask with descender room so the
   comma and the y / p tails are never shaved off) */
#view-mission .ms-word{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.16em; margin-bottom:-.16em;
}
#view-mission .ms-word > span{ display:inline-block; }

#view-mission .ms-scrollcue{
  position:absolute; left:var(--ms-gutter); bottom:36px; z-index:1;
  display:flex; align-items:center; gap:12px;
  font-family:'Inter', sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--lib-t3, #7a736b);
}
#view-mission .ms-scrollcue-line{
  display:block; width:1px; height:34px; background:currentColor; opacity:.55;
  transform-origin:top;
}

/* ============================================================================
   ACT II — THE ANSWER (the mission proper)
   ============================================================================ */
#view-mission .ms-answer{
  padding-top:clamp(96px, 17vh, 168px); padding-bottom:clamp(96px, 17vh, 168px);
  border-bottom:1px solid var(--lib-bd, #e4e0d8);
}
#view-mission .ms-answer-grid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(34px,5vw,60px);
  align-items:start;
}
#view-mission .ms-statement{
  font-family:'Spectral', serif; font-weight:500;
  font-size:clamp(27px, 4.3vw, 58px); line-height:1.16; letter-spacing:-.5px;
  margin:0; max-width:20ch; text-wrap:balance; color:var(--lib-t1, #14110f);
}
#view-mission .ms-line{ display:block; }
#view-mission .ms-statement em{ font-style:normal; color:var(--lib-acc, #9e2b25); }
#view-mission .ms-answer-side{ display:flex; flex-direction:column; }
#view-mission .ms-gloss{
  font-family:'Source Serif 4', serif; font-size:clamp(16px,1.9vw,19px);
  line-height:1.68; color:var(--lib-t2, #4b4540); margin:0; max-width:52ch;
}
#view-mission .ms-figure-conv{ margin-top:clamp(34px,4.5vw,56px); }
#view-mission .ms-figure-conv svg{ max-width:308px; }
#view-mission .ms-gloss .ms-han,
#view-mission .ms-fig-note .ms-han{
  font-family:'Noto Serif TC', serif; color:var(--lib-t1, #14110f);
}
@media (min-width:900px){
  #view-mission .ms-answer-grid{
    grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
    gap:clamp(48px, 6vw, 96px);
  }
}

/* ============================================================================
   ACT III — THREE COMMITMENTS (the thesis rail)
   Open figure+text rows on flat paper, hairline-ruled — the home's `oa-step`
   grammar, made compact. No cards, no radius, no gloss, no shadow.
   ============================================================================ */
#view-mission .ms-vows{
  padding-top:clamp(84px, 13vh, 140px); padding-bottom:clamp(84px, 13vh, 140px);
  border-bottom:1px solid var(--lib-bd, #e4e0d8);
}
#view-mission .ms-vows-head{ margin-bottom:clamp(30px, 4vw, 52px); }
#view-mission .ms-vows-head h2{
  font-family:'Spectral', serif; font-weight:800;
  font-size:clamp(26px,3.6vw,44px); line-height:1.08; letter-spacing:-.8px;
  margin:0; color:var(--lib-t1, #14110f); text-wrap:balance;
  max-width:18ch;   /* measured against ITS OWN large font, not the 16px base */
}

#view-mission .ms-vow{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(22px,4vw,40px); align-items:center;
  padding:clamp(38px,6vh,64px) 0;
  border-top:1px solid var(--lib-bd, #e4e0d8);
}
@media (min-width:860px){
  #view-mission .ms-vow{
    grid-template-columns:minmax(0, 1.02fr) minmax(0, 1fr);
    gap:clamp(48px,6vw,88px);
  }
}

/* the drawn figure */
#view-mission .ms-figure{ margin:0; }
#view-mission .ms-figure svg{
  width:100%; max-width:352px; height:auto; display:block; margin:0; overflow:visible;
}
#view-mission .ms-fig-cap{
  font-family:'Inter', sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lib-t3, #7a736b);
  margin:0 0 18px;
}
#view-mission .ms-fig-note{
  margin:18px 0 0; max-width:42ch;
  font-family:'Source Serif 4', serif; font-size:13px; line-height:1.55;
  color:var(--lib-t3, #7a736b);
}

/* the promise */
#view-mission .ms-vow-han{
  display:block; font-family:'Noto Serif TC', serif; font-weight:700;
  font-size:clamp(40px,4.4vw,56px); line-height:1; letter-spacing:0;
  color:var(--lib-acc, #9e2b25); margin:0 0 clamp(16px,1.6vw,22px);
}
#view-mission .ms-vow-han::after{
  content:attr(data-rom);
  display:block; margin-top:9px;
  font-family:'Spectral', serif; font-style:italic; font-weight:500;
  font-size:15px; letter-spacing:.01em; color:var(--lib-t3, #7a736b);
}
#view-mission .ms-vow-text h3{
  font-family:'Spectral', serif; font-weight:700;
  font-size:clamp(22px,2.4vw,30px); line-height:1.12; letter-spacing:-.4px;
  margin:0 0 14px; color:var(--lib-t1, #14110f); text-wrap:balance;
}
#view-mission .ms-vow-text p{
  font-family:'Source Serif 4', serif; font-size:clamp(15px,1.15vw,16.5px);
  line-height:1.62; color:var(--lib-t2, #4b4540); margin:0; max-width:40ch;
}

/* --- the figure line vocabulary (mirrors the home's sv-/ap-/fig- classes) --- */
#view-mission .msf-line{ fill:none; stroke:var(--lib-bds, #cfc8bd); stroke-width:3; stroke-linecap:round; }
#view-mission .msf-ink{ fill:none; stroke:var(--lib-t3, #7a736b); stroke-width:1.6; stroke-linecap:round; }
#view-mission .msf-acc{ fill:none; stroke:var(--lib-acc, #9e2b25); stroke-width:2; stroke-linecap:round; }
#view-mission .msf-dot{ fill:var(--lib-acc, #9e2b25); stroke:none; }
#view-mission .msf-node{ fill:var(--lib-surf, #fff); stroke:var(--lib-acc, #9e2b25); stroke-width:1.7; }
#view-mission .msf-ring{ fill:none; stroke:var(--lib-acc, #9e2b25); stroke-width:1.6; }
#view-mission .msf-tick{ stroke:var(--lib-bds, #cfc8bd); stroke-width:1.4; stroke-linecap:round; }
#view-mission .msf-dash{ fill:none; stroke:var(--lib-t4, #9b938a); stroke-width:1.4; stroke-dasharray:4 5; stroke-linecap:round; opacity:.7; }
#view-mission .msf-hollow{ fill:none; stroke:var(--lib-bds, #cfc8bd); stroke-width:1.4; }
#view-mission .msf-fill{ fill:var(--lib-acc, #9e2b25); stroke:none; }
#view-mission .msf-caret{ fill:var(--lib-acc, #9e2b25); stroke:none; }
#view-mission .msf-han{ font-family:'Noto Serif TC', serif; font-weight:700; fill:var(--lib-t1, #14110f); }
#view-mission .msf-hana{ font-family:'Noto Serif TC', serif; font-weight:700; fill:var(--lib-acc, #9e2b25); }
#view-mission .msf-cut{ font-family:'Noto Serif TC', serif; font-weight:700; fill:var(--lib-surf, #fff); }
#view-mission .msf-lab{ font-family:'Inter', sans-serif; font-size:9px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; fill:var(--lib-t3, #7a736b); }
#view-mission .msf-labm{ fill:var(--lib-t3, #7a736b); }

/* ============================================================================
   ACT IV — THE VOW & THE SEAL
   ============================================================================ */
#view-mission .ms-close{
  padding-top:clamp(100px, 18vh, 180px); padding-bottom:clamp(110px, 18vh, 180px);
  text-align:center;
}
#view-mission .ms-close-inner{ max-width:680px; margin:0 auto; }
#view-mission .ms-vow-final{
  font-family:'Spectral', serif; font-weight:500; font-style:italic;
  font-size:clamp(24px,3.4vw,42px); line-height:1.26; letter-spacing:-.4px;
  margin:0 auto clamp(46px,6vw,66px); color:var(--lib-t1, #14110f);
  max-width:620px; text-wrap:balance;
}
#view-mission .ms-vow-final em{ font-style:italic; color:var(--lib-acc, #9e2b25); }

/* the chop — the founder's medallion, pressed once into the paper. The
   fire-phase (zinnober) logo is used on purpose: a 印章 is red in every
   season, so the seal is pinned to the red mark rather than the rotating one. */
#view-mission .ms-seal-wrap{
  display:flex; justify-content:center; margin:0 0 clamp(32px,5vw,48px);
}
#view-mission .ms-seal{ display:block; line-height:0; }
#view-mission .ms-seal-logo{
  display:block; height:clamp(108px,13vw,136px); width:auto;
}

#view-mission .ms-sign{
  display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 15px;
  font-family:'Inter', sans-serif; font-size:13px; color:var(--lib-t3, #7a736b);
  margin-bottom:clamp(38px,5vw,52px);
}
#view-mission .ms-sign .ms-dot{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; }
#view-mission .ms-sign .ms-live-han{ color:var(--lib-acc, #9e2b25); font-family:'Noto Serif TC', serif; }

/* the call to action */
#view-mission .ms-cta{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
#view-mission .ms-btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Inter', sans-serif; font-size:15px; font-weight:600;
  padding:15px 16px 15px 26px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; text-decoration:none;
  transition:background .5s var(--lib-ease2, cubic-bezier(.32,.72,0,1)),
             color .5s var(--lib-ease2, cubic-bezier(.32,.72,0,1)),
             border-color .5s var(--lib-ease2, cubic-bezier(.32,.72,0,1)),
             transform .4s var(--lib-ease2, cubic-bezier(.32,.72,0,1));
}
#view-mission .ms-btn:active{ transform:scale(.975); }
#view-mission .ms-btn-solid{ background:var(--lib-acc, #9e2b25); color:#f3efe7; }
#view-mission .ms-btn-solid:hover{ background:color-mix(in srgb, var(--lib-acc, #9e2b25) 82%, #000); }
html[data-theme="dark"] #view-mission .ms-btn-solid{ color:#1a1410; }
#view-mission .ms-btn-quiet{
  background:none; color:var(--lib-t2, #4b4540); padding:15px 24px;
  border-color:color-mix(in srgb, var(--lib-t1, #14110f) 18%, transparent);
}
#view-mission .ms-btn-quiet:hover{ color:var(--lib-t1, #14110f); border-color:var(--lib-t1, #14110f); }
#view-mission .ms-btn-i{
  display:inline-grid; place-items:center; width:30px; height:30px;
  border-radius:50%; font-size:14px;
  background:color-mix(in srgb, #000 20%, transparent);
  transition:transform .5s var(--lib-ease2, cubic-bezier(.32,.72,0,1));
}
#view-mission .ms-btn:hover .ms-btn-i{ transform:translate(3px,-1px); }
#view-mission .ms-btn-quiet .ms-btn-i{ display:none; }

/* ============================================================================
   THE REVEAL — gated on html.oa-mission-live (motion-mission.js sets it only
   once its observer is live). Words rise; figures fade; the chop presses once.
   Nothing below hides anything unless that class is present, so no-JS and
   reduced-motion visitors always see a finished page.
   ============================================================================ */
html.oa-mission-live #view-mission .ms-rise{
  opacity:0; transform:translateY(24px);
  transition:opacity .82s var(--lib-ease, cubic-bezier(.22,1,.36,1)),
             transform .82s var(--lib-ease, cubic-bezier(.22,1,.36,1));
}
html.oa-mission-live #view-mission [data-ms-group].is-on .ms-rise{
  opacity:1; transform:none; transition-delay:calc(var(--i,0) * .08s);
}

/* the question — each word rises out of its clip */
html.oa-mission-live #view-mission .ms-word > span{
  transform:translateY(115%);
  transition:transform .9s var(--lib-ease2, cubic-bezier(.32,.72,0,1));
}
html.oa-mission-live #view-mission .ms-hero.is-on .ms-word > span{
  transform:none; transition-delay:calc(.16s + var(--i,0) * .035s);
}

/* the figures — fade in place, never travel; the accent marks land last */
html.oa-mission-live #view-mission .ms-figure{
  opacity:0; transition:opacity .85s var(--lib-ease, cubic-bezier(.22,1,.36,1));
}
html.oa-mission-live #view-mission [data-ms-group].is-on .ms-figure{ opacity:1; }
html.oa-mission-live #view-mission .msf-fade{
  opacity:0; transition:opacity .7s var(--lib-ease, cubic-bezier(.22,1,.36,1));
}
html.oa-mission-live #view-mission [data-ms-group].is-on .msf-fade{
  opacity:1; transition-delay:calc(.32s + var(--d,0) * .16s);
}

/* the scroll cue line draws down */
html.oa-mission-live #view-mission .ms-scrollcue-line{ transform:scaleY(0); transition:transform .7s var(--lib-ease) .55s; }
html.oa-mission-live #view-mission .ms-hero.is-on .ms-scrollcue-line{ transform:scaleY(1); }

/* the chop — the single sanctioned figure-in-motion: a decisive press, then a
   single faint ring. No drop, no rotate, no elastic overshoot. */
html.oa-mission-live #view-mission .ms-seal{ opacity:0; }
html.oa-mission-live #view-mission .ms-close-inner.is-on .ms-seal{ animation:msSealPress .6s var(--lib-ease2, cubic-bezier(.32,.72,0,1)) both; }
@keyframes msSealPress{
  0%{ opacity:0; transform:scale(1.12); }
  55%{ opacity:1; transform:scale(.985); }
  100%{ opacity:1; transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  html.oa-mission-live #view-mission .ms-rise,
  html.oa-mission-live #view-mission .ms-word > span,
  html.oa-mission-live #view-mission .ms-figure,
  html.oa-mission-live #view-mission .msf-fade,
  html.oa-mission-live #view-mission .ms-scrollcue-line{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  html.oa-mission-live #view-mission .ms-seal{ opacity:1 !important; animation:none !important; }
}