@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   MODULE SHOWCASE — the platform menu as the eye-catcher.

   Standalone on purpose: the easing curves and colour tokens are declared
   again here, so this does not depend on feature-demo.css or any other
   demo being present or loading first. Reusable on any page.

   ONE unit: every size is calc(N * var(--u)). --u scales with the SLOT
   (container query), not the window — the same component may sit in a
   1120px section on one page and a narrower one on the next.

   ⚠⚠ Override blocks live at the END of this file. Anything appended after
      them must be an override too, never a base rule: same specificity,
      later in source, and the override silently loses.
   ═══════════════════════════════════════════════════════════════════════ */

.h2-ms {
  --d-enter:  cubic-bezier(.33, 0, .20, 1);
  --d-exit:   cubic-bezier(.33, 0, .83, .83);

  --m-card:  #FFFFFF;
  --m-ink:   var(--black, #1D1D1F);
  --m-mute:  var(--gray-600, #6E6E73);
  --m-line:  var(--gray-100, #E8E8ED);
  --m-green: var(--accent, #1B4332);
  --m-cream: var(--cream, #FAF9F6);

  width: 100%;
  text-align: left;
  container-type: inline-size;   /* queried by the stage below */
}

.h2-ms-stage {
  position: relative;
  width: 100%;
  color: var(--m-ink);
  --u: calc(100cqw / 1120);
}

.h2-ms-app {
  display: flex;
  min-height: calc(640 * var(--u));
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: calc(18 * var(--u));
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 40px rgba(0,0,0,.07);
  overflow: hidden;
}

/* ── the brand rail ── */
.h2-ms-rail {
  flex: none;
  width: calc(52 * var(--u));
  background: var(--m-green);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(14 * var(--u)) 0;
}
.h2-ms-logo { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); color: #fff; }
.h2-ms-logo svg { width: calc(18 * var(--u)); height: auto; }

/* ── the menu ── */
.h2-ms-side {
  flex: none;
  width: calc(248 * var(--u));
  border-right: 1px solid var(--m-line);
  padding: calc(16 * var(--u)) calc(12 * var(--u));
  display: flex; flex-direction: column;
}
.h2-ms-side-head {
  font-size: calc(13 * var(--u)); font-weight: 750; letter-spacing: -0.015em;
  padding: 0 calc(6 * var(--u)) calc(12 * var(--u));
}
.h2-ms-grp {
  font-size: calc(9 * var(--u)); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--gray-400, #98989D);
  padding: calc(12 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u));
}
.h2-ms-it {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  height: calc(26 * var(--u));
  padding: 0 calc(7 * var(--u));
  border-radius: calc(7 * var(--u));
  font-size: calc(12 * var(--u)); font-weight: 550;
  color: var(--m-ink); text-decoration: none;
}
.h2-ms-it svg { width: calc(14 * var(--u)); height: auto; flex: none; color: var(--m-mute); }
a.h2-ms-it:hover { background: rgba(0,0,0,.035); }
a.h2-ms-it:hover svg { color: var(--m-green); }
a.h2-ms-it:focus-visible { outline: 2px solid var(--m-green); outline-offset: 1px; }
/* the page's own module, when the host sets $mscActive */
.h2-ms-it.is-current {
  background: rgba(27,67,50,.10);
  color: var(--m-green); font-weight: 700;
}
.h2-ms-it.is-current svg { color: var(--m-green); }

/* ── the statement side ── */
.h2-ms-say {
  flex: 1; min-width: 0;
  position: relative;
  background: var(--m-cream);
  display: flex; align-items: center;
  padding: calc(40 * var(--u)) calc(52 * var(--u));
}
.h2-ms-line {
  position: absolute;
  left: calc(52 * var(--u)); right: calc(52 * var(--u));
  opacity: 0;
  transform: translateY(calc(14 * var(--u)));
  transition: opacity .2s var(--d-exit), transform .2s var(--d-exit);
  pointer-events: none;
}
.h2-ms-line.is-live {
  opacity: 1; transform: none;
  transition: opacity .42s .14s var(--d-enter), transform .42s .14s var(--d-enter);
}
.h2-ms-eyebrow {
  display: block;
  font-size: calc(10.5 * var(--u)); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--m-green);
  margin-bottom: calc(14 * var(--u));
}
.h2-ms-line p {
  margin: 0;
  font-size: calc(29 * var(--u));
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.028em;
  max-width: calc(620 * var(--u));
}

/* the held final frame: the count is the argument */
.h2-ms-num {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: calc(92 * var(--u));
  line-height: .9;
  color: var(--m-green);
  font-variant-numeric: tabular-nums;
}
.h2-ms-numlabel {
  display: block;
  font-size: calc(11 * var(--u)); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--m-mute);
  margin: calc(8 * var(--u)) 0 calc(16 * var(--u));
}
.h2-ms-outro p { font-size: calc(26 * var(--u)); }

/* ── reveal ───────────────────────────────────────────────────────────
   One rule for every scripted element in the menu. The group label and
   its items share the same data-g, so the clock addresses a whole group
   with one selector. */
/* ⚠ scoped to the MENU. The statement lines carry data-g too, and an
   unscoped rule held them at opacity 0 — same specificity as
   .h2-ms-line.is-live but later in the file, so the lines never showed. */
.h2-ms-side [data-g] {
  opacity: 0;
  transform: translateX(calc(-8 * var(--u)));
  transition: opacity .42s var(--d-enter), transform .42s var(--d-enter);
}
.h2-ms-side [data-g].is-on { opacity: 1; transform: none; }
/* ⚠ the stagger index comes from PHP as --i: the items are a mix of <a>
   and <span>, so nth-of-type counts two separate sequences and nth-child
   would count the group labels too. */
.h2-ms-side .h2-ms-it { transition-delay: calc(var(--i, 0) * .055s); }

/* ═══════════════════════════════════════════════════════════════════════
   OVERRIDES — keep at the end of the file
   ═══════════════════════════════════════════════════════════════════════ */

/* a narrow SLOT: the statement goes above the menu */
@container (max-width: 900px) {
  .h2-ms-stage { --u: calc(100cqw / 560); }
  .h2-ms-app { flex-wrap: wrap; min-height: 0; }
  .h2-ms-rail { width: 100%; height: calc(40 * var(--u)); flex-direction: row; align-items: center; padding: 0 calc(14 * var(--u)); }
  /* a DEFINITE height: the lines are absolutely positioned, so they cannot
     stretch their container — too little here and the outro spills onto
     the menu below. */
  .h2-ms-say { order: 1; flex: 0 0 auto; width: 100%; height: calc(215 * var(--u)); padding: calc(20 * var(--u)) calc(22 * var(--u)); align-items: center; overflow: hidden; }
  .h2-ms-outro p { font-size: calc(17 * var(--u)); }
  .h2-ms-num { font-size: calc(48 * var(--u)); }
  .h2-ms-numlabel { font-size: calc(9.5 * var(--u)); margin: calc(5 * var(--u)) 0 calc(10 * var(--u)); }
  .h2-ms-it { height: calc(24 * var(--u)); font-size: calc(11.5 * var(--u)); }
  .h2-ms-grp { padding: calc(9 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)); }
  .h2-ms-line { left: calc(22 * var(--u)); right: calc(22 * var(--u)); }
  .h2-ms-line p { font-size: calc(22 * var(--u)); }
  .h2-ms-outro p { font-size: calc(19 * var(--u)); }
  .h2-ms-num { font-size: calc(62 * var(--u)); }
  .h2-ms-side { order: 2; flex: 1 0 100%; width: auto; border-right: 0; border-top: 1px solid var(--m-line); }
}

@media (max-width: 900px) {
  .h2-ms-stage { --u: 1px; }
  .h2-ms-line p { font-size: 21px; }
  .h2-ms-outro p { font-size: 17px; }   /* ⚠ must be repeated here */
  .h2-ms-num { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .h2-ms *, .h2-ms *::after { transition: none !important; animation: none !important; }
}

/* ── PHONE: pinned window, driven by scroll ──────────────────────────
   Only when the JS has taken over (it adds .h2-ms-scrub). Without JS, or
   under reduced motion, the component stays in normal flow. */
.h2-ms.h2-ms-scrub { min-height: 240vh; }
.h2-ms-scrub .h2-ms-stage {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  padding: 10px 0;
}
.h2-ms-scrub .h2-ms-app {
  flex-direction: column; flex-wrap: nowrap;
  /* ⚠ width: as a column the app no longer gets its width from a
     flex: 1 0 100% child, and the centring stage let it shrink to content. */
  width: 100%;
  height: 88vh; overflow: hidden;
}
.h2-ms-scrub .h2-ms-rail { flex: 0 0 auto; }
.h2-ms-scrub .h2-ms-say  { flex: 0 0 auto; }
/* the menu is taller than the pinned window: it scrolls, follow() drives it */
.h2-ms-scrub .h2-ms-side { flex: 1 1 auto; min-height: 0; overflow: hidden; }


/* the progress line, same idea as the feature demo */
.h2-ms-scrub .h2-ms-app::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px;
  width: calc(var(--p, 0) * 100%);
  background: var(--m-green); z-index: 5;
}
.h2-ms-scrub .h2-ms-stage { position: sticky; }
.h2-ms-scrub .h2-ms-app { position: relative; }