/* Mount Sinai case study, brand v2. Run-scoped classes: .ms-* only. */
:root {
  --ms-edge: clamp(20px, 5vw, 80px);
  --ms-gutter: max(var(--ms-edge), (100% - var(--v2-field-max)) / 2);
  --ms-max: var(--v2-field-max);
  --ms-header: 56px;
  --ms-h1: clamp(2.125rem, 3.6vw, 3rem);
  --ms-h2: clamp(1.75rem, 2.8vw, 2.25rem);
  --ms-ledger: clamp(2rem, 3.4vw, 3rem);
  --ms-pad: clamp(3.5rem, 8vw, 7rem);
  --ms-dur: var(--v2-dur-slow);
  --ms-base: var(--v2-dur-base);
  --ms-ease: var(--v2-ease-out);
  --ms-hair-dark: rgba(245, 245, 245, 0.16);
  --ms-grid: rgba(245, 245, 245, 0.07);
  --ms-hair-light: var(--v2-platinum);
  --ms-hair-platinum: color-mix(in srgb, var(--v2-taupe) 30%, transparent);
  --ms-track-dark: var(--v2-shadow);
  --ms-track-light: var(--v2-light-lavender);
  --ms-dock: 0px;
}
html { scroll-behavior: smooth; }
html.no-motion { scroll-behavior: auto; }
body { margin: 0; font-family: var(--v2-font-body); font-weight: var(--v2-weight); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: var(--v2-weight); }
dl, dd, dt, figure, blockquote, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
.ms-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Skip link */
.ms-skip { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 10px 14px; background: var(--v2-off-white); color: var(--v2-onyx); font-family: var(--v2-font-mono); font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); transform: translateY(-200%); }
.ms-skip:focus { transform: none; outline: 2px solid var(--v2-mauve); }

/* Masthead: the axis is the progress rule -------------------------------- */
.ms-masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--ms-header);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 0 var(--ms-gutter);
  background: color-mix(in srgb, var(--v2-onyx) 92%, transparent);
  color: var(--v2-off-white);
  opacity: 0; pointer-events: none; transition: opacity var(--ms-base) var(--ms-ease);
}
.ms-masthead.is-in { opacity: 1; pointer-events: auto; }
html.no-motion .ms-masthead { transition: none; }
.ms-masthead__mark img { height: var(--v2-nav-lockup); width: auto; }
.ms-chapters { position: relative; min-width: 0; }
.ms-chapters__current { display: none; }
.ms-chapters__list { list-style: none; display: flex; overflow: hidden; gap: clamp(10px, 1.1vw, 22px); justify-content: center; font-size: calc(var(--v2-mono-l2) * 0.85); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); }
.ms-chapters__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--v2-dusk); text-decoration: none; white-space: nowrap; }
.ms-chapters__list a[aria-current="true"] { color: var(--v2-off-white); }
.ms-chapters__list a:hover { color: var(--v2-off-white); }
.ms-chapters__num { color: var(--v2-taupe); }
.ms-chapters__list a[aria-current="true"] .ms-chapters__num { color: var(--v2-mauve); }
.ms-dl { white-space: nowrap; }
@media (max-width: 1560px) { .ms-chapters__num { display: none; } }
.ms-dl__short { display: none; }
/* Narrow screens: the masthead download becomes a mono word on the axis, no fill */
@media (max-width: 1100px) {
  .ms-masthead .ms-dl { padding: 0 0 0 12px; background: none; border: 0; color: var(--v2-dusk); }
  .ms-masthead .ms-dl:hover, .ms-masthead .ms-dl:focus-visible { background: none; color: var(--v2-off-white); }
  .ms-masthead .ms-dl__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ms-masthead .ms-dl__short { display: inline-flex; align-items: center; gap: 8px; }
  .ms-masthead .ms-dl__short svg { flex: none; }
}
.ms-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ms-hair-dark); }
.ms-axis__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--v2-dusk); }
.ms-axis__dot { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--v2-mauve); }
.ms-axis__tick { position: absolute; top: -3px; width: 1px; height: 7px; background: var(--v2-taupe); }
:focus-visible { outline: 2px solid var(--v2-mauve); outline-offset: 2px; }

/* Reveal ----------------------------------------------------------------- */
html:not(.no-motion) .ms-reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ms-ease) var(--d, 0ms), transform 600ms var(--ms-ease) var(--d, 0ms); }
html:not(.no-motion) .ms-reveal.is-in { opacity: 1; transform: none; }

/* Shared type ------------------------------------------------------------ */
.ms-eyebrow, .ms-kicker { font-size: var(--v2-mono-l2); line-height: var(--v2-mono-l2-lh); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); }
.ms-h1 { font-size: var(--ms-h1); line-height: 1.02; letter-spacing: var(--v2-tracking-h1); text-wrap: balance; max-width: 24ch; }
.ms-h2 { font-size: var(--ms-h2); line-height: 1.08; letter-spacing: var(--v2-tracking-display); text-wrap: balance; max-width: 26ch; }
.ms-sub { font-size: var(--v2-s2); line-height: 1.25; letter-spacing: var(--v2-tracking-display); max-width: 40ch; color: var(--v2-off-white); text-wrap: balance; }
.ms-prose { display: grid; gap: 1.25em; font-size: var(--v2-p1); line-height: var(--v2-leading-body); max-width: 62ch; }
.ms-prose p { text-wrap: pretty; color: color-mix(in srgb, currentColor 85%, transparent); }
.ms-fig__src { font-size: calc(var(--v2-mono-l2) * 0.9); line-height: var(--v2-mono-l2-lh); letter-spacing: 0.02em; color: var(--v2-taupe); max-width: 70ch; }
.ms-chapter--dark .ms-fig__src { color: var(--v2-haze); }

/* Cover ------------------------------------------------------------------ */
.ms-cover { position: relative; display: grid; row-gap: clamp(24px, 4vh, 48px); padding: var(--ms-pad) var(--ms-gutter) 40px; isolation: isolate; }
.ms-lockup { display: flex; align-items: center; gap: 24px; }
.ms-lockup__home img { height: var(--v2-nav-lockup); width: auto; }
.ms-lockup i { width: 1px; height: 48px; background: var(--ms-hair-dark); }
.ms-lockup__partner { height: 68px; width: auto; }
.ms-eyebrow { color: var(--v2-dusk); }
.ms-cover__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px var(--v2-grid-gutter); }
.ms-cover__mark { justify-self: end; width: 68px; height: auto; }
.ms-cover__ledger { position: relative; padding-top: 28px; }
.ms-rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--v2-dusk); transform-origin: left center; }
.ms-rule--draw { transform: scaleX(0); }
html.no-motion .ms-rule--draw, .ms-rule--draw.is-on { transform: scaleX(1); transition: transform var(--ms-dur) var(--v2-ease-inout); }
html.no-motion .ms-rule--draw { transition: none; }
.ms-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-grid-gutter); }
.ms-ledger__cell { display: grid; grid-template-rows: auto auto; gap: 12px; padding-right: 24px; }
.ms-ledger__num { grid-row: 1; font-size: var(--ms-ledger); line-height: 1; letter-spacing: var(--v2-tracking-h1); font-variant-numeric: tabular-nums; }
@property --rf { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.ms-odo { display: inline-flex; align-items: flex-start; white-space: pre; filter: blur(0); }
.ms-odo__w { display: inline-block; line-height: 1; }
.ms-odo__w--digit {
  height: 1em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--rf, 0%), #000 calc(100% - var(--rf, 0%)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--rf, 0%), #000 calc(100% - var(--rf, 0%)), transparent 100%);
}
.ms-odo__strip { display: block; will-change: transform; }
.ms-odo__strip span { display: block; height: 1em; line-height: 1; text-align: center; }
.ms-odo [data-g]::before { content: attr(data-g); }
.ms-ledger__num .ms-odo [data-g="1"], html.no-motion .ms-ledger__num { font-variant-numeric: normal; }
.ms-ledger__lab { grid-row: 2; font-size: var(--v2-l1); line-height: 1.35; color: var(--v2-dusk); max-width: 30ch; text-wrap: balance; }
.ms-cover__foot { display: flex; justify-content: space-between; align-items: center; }
.ms-scroll { display: inline-flex; align-items: center; gap: 10px; font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); color: var(--v2-dusk); }
html.no-motion .ltv2-dot--pulse { animation: none; }

/* Chapters --------------------------------------------------------------- */
.ms-chapter { position: relative; padding: var(--ms-pad) var(--ms-gutter); display: grid; gap: clamp(40px, 6vw, 80px); }
.ms-chapter--light { background: var(--v2-off-white); color: var(--v2-onyx); }
.ms-chapter--dark { background: var(--v2-onyx); color: var(--v2-off-white); }
.ms-chapter__head { display: grid; gap: 20px; max-width: var(--ms-max); }
.ms-kicker { color: var(--v2-taupe); }
.ms-chapter--dark .ms-kicker { color: var(--v2-dusk); }
.ms-chapter__grid { max-width: var(--ms-max); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ms-chapter__grid--fig { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* Chapter head inside the grid: on desktop the kicker takes row 1, the headline row 2, and the figure
   starts on row 2 so its top edge sits on the headline's top edge. On a phone it is the plain stack. */
@media (min-width: 961px) {
  .ms-chapter__grid--lead { grid-template-rows: auto auto auto; row-gap: 20px; }
  .ms-chapter__grid--lead .ms-chapter__head { grid-column: 1; grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; }
  .ms-chapter__grid--lead .ms-prose { grid-column: 1; grid-row: 3; margin-top: calc(clamp(40px, 6vw, 80px) - 20px); }
  .ms-chapter__grid--lead .ms-fig { grid-column: 2; grid-row: 2 / span 2; }
}
.ms-prose--single { max-width: 62ch; }

/* System scale ledger */
.ms-scale-col { display: grid; border-top: 1px solid var(--ms-hair-light); }
.ms-scale { display: grid; border-top: 1px solid var(--ms-hair-light); }
.ms-scale__mark { display: block; justify-self: start; height: 72px; width: auto; padding: 24px 0; box-sizing: content-box; }
.ms-scale > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ms-hair-light); }
.ms-scale dd { font-size: var(--v2-s3); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--v2-tracking-display); }
.ms-scale dt { font-family: var(--v2-font-mono); font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); color: var(--v2-taupe); }
/* Narrow screens: the scale ledger gives the numbers exactly the width of the longest one, so
   every value holds a single line and the labels still share a column. */
@media (max-width: 1100px) {
  .ms-scale { grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; }
  .ms-scale > div { grid-column: 1 / -1; grid-template-columns: subgrid; }
}

/* Quotes: a plate with four register corners, a faint drafting grid, one phrase lifted ------ */
.ms-quote { position: relative; isolation: isolate; max-width: min(var(--ms-max), 920px); display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(24px, 3.4vw, 44px); --ms-plate-hair: rgba(19, 18, 21, 0.14); --ms-plate-grid: rgba(19, 18, 21, 0.028); --ms-plate-corner: var(--v2-onyx); --ms-plate-hl: var(--v2-slate-blue); }
.ms-chapter--dark .ms-quote { --ms-plate-hair: var(--ms-hair-dark); --ms-plate-grid: rgba(245, 245, 245, 0.035); --ms-plate-corner: var(--v2-off-white); --ms-plate-hl: var(--v2-mauve); }
.ms-quote::before, .ms-quote::after, .ms-quote__reg::before, .ms-quote__reg::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--ms-plate-corner); pointer-events: none; }
.ms-quote::before { left: -1px; top: -1px; border-left-width: 1px; border-top-width: 1px; }
.ms-quote::after { right: -1px; top: -1px; border-right-width: 1px; border-top-width: 1px; }
.ms-quote__reg::before { left: -1px; bottom: -1px; border-left-width: 1px; border-bottom-width: 1px; }
.ms-quote__reg::after { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }
.ms-quote__text { grid-column: 1; font-size: var(--v2-s2); line-height: 1.22; letter-spacing: var(--v2-tracking-display); text-wrap: balance; max-width: 34ch; }
.ms-hl { color: var(--ms-plate-hl); }
.ms-prose .ms-hl { color: var(--v2-slate-blue); }
.ms-chapter--dark .ms-prose .ms-hl { color: var(--v2-mauve); }
.ms-quote__by { grid-column: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; align-items: end; font-size: var(--v2-p2); line-height: 1.3; margin-top: 28px; }
.ms-quote__face { grid-row: 1 / span 2; align-self: end; display: block; width: 48px; height: 60px; object-fit: cover; }
.ms-quote__by strong { grid-row: 1; font-weight: var(--v2-weight); }
.ms-quote__by span { grid-row: 2; font-family: var(--v2-font-mono); font-size: calc(var(--v2-mono-l2) * 0.9); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; color: var(--v2-haze); }

/* Quote plate entrance (Open). The register layer (.ms-quote__reg) carries the hairline and
   the grid so the frame can open from a hairline at mid-height to full height while the
   words rise 16px (Reveal) and the attribution follows in a 60ms stagger; corners land last.
   Transitions live on .is-in only: the class lands after first paint, so the hidden state
   must not animate in from the stylesheet's defaults. */
.ms-quote__reg { position: absolute; inset: -1px; z-index: -1; border: 1px solid var(--ms-plate-hair); background-image: linear-gradient(var(--ms-plate-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ms-plate-grid) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
html:not(.no-motion) .ms-quote.ms-reveal { opacity: 1; transform: none; transition: none; }
html:not(.no-motion) .ms-quote:not(.is-in) .ms-quote__reg { clip-path: inset(50% 0); }
html:not(.no-motion) .ms-quote:not(.is-in) .ms-quote__text { opacity: 0; transform: translateY(16px); }
html:not(.no-motion) .ms-quote:not(.is-in) .ms-quote__face, html:not(.no-motion) .ms-quote:not(.is-in) .ms-quote__by strong, html:not(.no-motion) .ms-quote:not(.is-in) .ms-quote__by span { opacity: 0; transform: translateY(8px); }
html:not(.no-motion) .ms-quote:not(.is-in)::before, html:not(.no-motion) .ms-quote:not(.is-in)::after, html:not(.no-motion) .ms-quote:not(.is-in) .ms-quote__reg::before, html:not(.no-motion) .ms-quote:not(.is-in) .ms-quote__reg::after { opacity: 0; }
html:not(.no-motion) .ms-quote.is-in .ms-quote__reg { clip-path: inset(0); transition: clip-path var(--v2-dur-slow) var(--v2-ease-inout) 120ms; }
html:not(.no-motion) .ms-quote.is-in .ms-quote__text { transition: opacity var(--v2-dur-slow) var(--ms-ease) 200ms, transform var(--v2-dur-slow) var(--ms-ease) 200ms; }
html:not(.no-motion) .ms-quote.is-in .ms-quote__face, html:not(.no-motion) .ms-quote.is-in .ms-quote__by strong, html:not(.no-motion) .ms-quote.is-in .ms-quote__by span { transition: opacity 480ms var(--ms-ease) var(--qa, 480ms), transform 480ms var(--ms-ease) var(--qa, 480ms); }
html:not(.no-motion) .ms-quote .ms-quote__by strong { --qa: 540ms; }
html:not(.no-motion) .ms-quote .ms-quote__by span { --qa: 600ms; }
html:not(.no-motion) .ms-quote.is-in::before, html:not(.no-motion) .ms-quote.is-in::after, html:not(.no-motion) .ms-quote.is-in .ms-quote__reg::before, html:not(.no-motion) .ms-quote.is-in .ms-quote__reg::after { transition: opacity var(--ms-base) var(--ms-ease) 600ms; }

/* Figures: one axis ------------------------------------------------------ */
.ms-fig { display: grid; gap: 20px; width: 100%; min-width: 0; }
.ms-fig__head { display: flex; justify-content: space-between; gap: 16px; font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); color: var(--v2-taupe); padding-bottom: 12px; border-bottom: 1px solid var(--ms-hair-light); }
.ms-chapter--dark .ms-fig__head { color: var(--v2-dusk); border-color: var(--ms-hair-dark); }
.ms-fig__body { display: grid; gap: 28px; padding: 12px 0 4px; min-height: 120px; }
.ms-bar { position: relative; height: 40px; }
.ms-bar__track { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ms-hair-dark); }
.ms-chapter--light .ms-bar__track { background: var(--ms-hair-light); }
.ms-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left center; background: var(--v2-dusk); }
.ms-bar--after .ms-bar__fill { width: max(2px, calc(var(--after) / var(--before) * 100%)); background: var(--v2-mauve); }
.ms-bar__val { position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 12px); font-size: var(--v2-mono-l1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-bar--before .ms-bar__val { left: auto; right: 12px; color: var(--v2-onyx); }
.ms-bar--after .ms-bar__val { left: calc(max(2px, calc(var(--after) / var(--before) * 100%)) + 12px); }
.ms-bar__lab { position: absolute; top: calc(100% + 8px); left: 0; font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); color: var(--v2-taupe); white-space: nowrap; }
.ms-chapter--dark .ms-bar__lab { color: var(--v2-dusk); }
html:not(.no-motion) [data-resolve] .ms-bar__fill { transform: scaleX(0); transition: transform var(--ms-dur) var(--v2-ease-inout); }
html:not(.no-motion) [data-resolve] .ms-bar--after .ms-bar__fill { transition-delay: 360ms; }
html:not(.no-motion) [data-resolve] .ms-bar__val, html:not(.no-motion) [data-resolve] .ms-bar__lab { opacity: 0; transition: opacity var(--ms-base) var(--ms-ease) 600ms; }
html:not(.no-motion) [data-resolve] .ms-bar--after .ms-bar__val, html:not(.no-motion) [data-resolve] .ms-bar--after .ms-bar__lab { transition-delay: 1000ms; }
html:not(.no-motion) [data-resolve].is-on .ms-bar__fill { transform: scaleX(1); }
html:not(.no-motion) [data-resolve].is-on .ms-bar__val, html:not(.no-motion) [data-resolve].is-on .ms-bar__lab { opacity: 1; }

/* FIG. 01: the month as a grid of days; the frame closes in on the first. */
.ms-dolly { display: grid; gap: 0; }
.ms-dolly__lead { display: contents; }
.ms-dolly__foot { order: 1; }
.ms-dolly__frame { position: relative; max-width: 520px; aspect-ratio: 6 / 5; overflow: hidden; border: 1px solid var(--ms-hair-dark); }
.ms-dolly__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); gap: 2px; padding: 2px; transform-origin: 0 0; transform: translate(16.667%, 10%) scale(4); }
.ms-dolly__grid i { display: flex; align-items: flex-start; padding: 6% 0 0 8%; background: var(--v2-dusk); color: var(--v2-onyx); font-style: normal; font-family: var(--v2-font-mono); font-size: var(--v2-mono-l2); letter-spacing: var(--v2-tracking-mono); line-height: 1; font-variant-numeric: tabular-nums; }
.ms-dolly__grid i:first-child { background: var(--v2-mauve); }
.ms-dolly__grid i:not(:first-child) { opacity: 0; }
.ms-dolly__foot { display: grid; gap: 10px; margin-top: 20px; }
.ms-dolly__val { font-size: var(--v2-mono-l1); font-variant-numeric: tabular-nums; }
.ms-dolly__lab { font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); color: var(--v2-dusk); }
@keyframes ms-dolly-cell { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
html:not(.no-motion) [data-resolve] .ms-dolly__grid { transform: none; transition: transform 1400ms var(--v2-ease-inout) 2200ms; }
html:not(.no-motion) [data-resolve] .ms-dolly__grid i:first-child { opacity: 0; background: var(--v2-dusk); transition: opacity var(--ms-base) var(--ms-ease), background-color var(--ms-dur) var(--ms-ease) 3000ms; }
html:not(.no-motion) [data-resolve] .ms-dolly__val, html:not(.no-motion) [data-resolve] .ms-dolly__lab { opacity: 0; transform: translateY(6px); transition: opacity var(--ms-dur) var(--ms-ease) 3500ms, transform var(--ms-dur) var(--ms-ease) 3500ms; }
html:not(.no-motion) [data-resolve] .ms-dolly__lab { transition-delay: 3620ms; }
html:not(.no-motion) [data-resolve].is-on .ms-dolly__grid { transform: translate(16.667%, 10%) scale(4); }
html:not(.no-motion) [data-resolve].is-on .ms-dolly__grid i:first-child { opacity: 1; background: var(--v2-mauve); }
html:not(.no-motion) [data-resolve].is-on .ms-dolly__grid i:not(:first-child) { animation: ms-dolly-cell 3400ms linear calc(var(--i) * 30ms) both; }
html:not(.no-motion) [data-resolve].is-on .ms-dolly__val, html:not(.no-motion) [data-resolve].is-on .ms-dolly__lab { opacity: 1; transform: none; }

/* 03 The question: a held plate ----------------------------------------- */

/* 04 The climax: the one scroll-driven scene ---------------------------- */
.ms-chapter--climax { gap: clamp(32px, 5vw, 64px); }
.ms-climax__track { height: 260svh; margin: 0 calc(-1 * var(--ms-gutter)); }
.ms-climax { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(24px, 4vh, 48px); padding: calc(var(--ms-header) + 24px) var(--ms-gutter) 40px; box-sizing: border-box; overflow: hidden; }
.ms-climax__fig { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 24px; min-height: 0; }
.ms-climax .ms-fig__head { max-width: var(--ms-max); }
.ms-climax__body { position: relative; display: grid; grid-template-rows: auto auto auto; gap: 20px; align-content: center; max-width: var(--ms-max); }
.ms-climax__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ms-climax__lab { font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); color: var(--v2-dusk); }
.ms-climax__val { font-size: clamp(1.5rem, 3vw, 2.25rem); font-variant-numeric: tabular-nums; }
.ms-climax__val--before { color: var(--v2-dusk); }
.ms-climax__axis { position: relative; height: clamp(56px, 10vh, 96px); --w: 100; --after: 16.4; }
.ms-climax__track { }
.ms-climax__axis .ms-climax__track { position: absolute; left: 0; right: calc(-1 * var(--ms-gutter)); top: 50%; height: 1px; background: var(--ms-hair-dark); margin: 0; }
.ms-climax__before { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 1%); background: var(--v2-dusk); transition: width var(--ms-base) var(--ms-ease), background-color var(--ms-base) var(--ms-ease); }
.ms-climax__after { display: none; }
.ms-climax__released { position: absolute; top: 50%; height: 1px; margin-top: -0.5px; left: calc(var(--w) * 1%); width: calc((100 - var(--w)) * 1%); background: var(--v2-mauve); transition: left var(--ms-base) var(--ms-ease), width var(--ms-base) var(--ms-ease); }
.ms-climax__row--after { position: relative; }
.ms-climax__row--after .ms-climax__lab { order: 0; }
.ms-climax__val--after { order: 1; margin-right: auto; margin-left: 16px; }
.ms-climax__note { order: 2; font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); color: var(--v2-mauve); }
.ms-climax__val--after, .ms-climax__note { opacity: 0; transition: opacity var(--ms-base) var(--ms-ease); }
.ms-climax__track[data-stage="1"] .ms-climax__axis { --w: 86; }
.ms-climax__track[data-stage="2"] .ms-climax__axis { --w: 72; }
.ms-climax__track[data-stage="3"] .ms-climax__axis { --w: 58; }
.ms-climax__track[data-stage="4"] .ms-climax__axis { --w: 44; }
.ms-climax__track[data-stage="5"] .ms-climax__axis { --w: 30; }
.ms-climax__track[data-stage="6"] .ms-climax__axis { --w: 16.4; }
.ms-climax__track[data-stage="6"] .ms-climax__before { background: var(--v2-off-white); }
.ms-climax__track[data-stage="6"] .ms-climax__released { width: calc((100 - var(--w)) * 1% + var(--ms-gutter)); height: 3px; margin-top: -1.5px; transition: left var(--ms-base) var(--ms-ease), width var(--ms-dur) var(--v2-ease-inout), height var(--ms-base) var(--ms-ease); }
.ms-climax__track[data-stage="6"] .ms-climax__val--after, .ms-climax__track[data-stage="6"] .ms-climax__note { opacity: 1; }
.ms-climax__track:not([data-stage="0"]) .ms-climax__val--after { opacity: 1; }
html.no-motion .ms-climax__track { height: auto; margin: 0; }
html.no-motion .ms-climax { position: static; height: auto; padding: 0; gap: clamp(32px, 5vw, 64px); }
html.no-motion .ms-climax__before, html.no-motion .ms-climax__released, html.no-motion .ms-climax__val--after, html.no-motion .ms-climax__note { transition: none; }
.ms-result { max-width: var(--ms-max); font-size: var(--v2-s1); line-height: var(--v2-s1-lh); letter-spacing: var(--v2-tracking-display); text-wrap: balance; }
/* FIG. 04: two lines from one origin. Staffing climbs gently; volume climbs two to four times as
   steeply, and the gap between them is the subject. The lines draw, then the gap shades in. */
.ms-fig--growth { max-width: var(--ms-max); gap: 28px; padding-top: clamp(24px, 4vw, 40px); border-top: 1px solid var(--ms-hair-dark); }
.ms-fig--growth .ms-fig__head { border-bottom: 0; padding-bottom: 0; }
.ms-growth { position: relative; height: clamp(240px, 30vw, 420px); margin-bottom: 32px; --u: calc(100% / 4.5); --bar: clamp(56px, 9vw, 120px); --x-staff: 22%; --x-vol: 58%; border-bottom: 1px solid var(--v2-dusk); background-image: linear-gradient(var(--ms-grid) 1px, transparent 1px); background-size: 100% var(--u); background-position: 0 100%; }
.ms-growth__tick, .ms-growth__lab, .ms-growth__val { position: absolute; font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); white-space: nowrap; color: var(--v2-dusk); font-variant-numeric: tabular-nums; }
.ms-growth__tick { right: 0; transform: translateY(50%); }
.ms-growth__tick--1 { bottom: var(--u); }
.ms-growth__tick--2 { bottom: calc(var(--u) * 2); }
.ms-growth__tick--3 { bottom: calc(var(--u) * 3); }
.ms-growth__tick--4 { bottom: calc(var(--u) * 4); }
.ms-growth__bar { position: absolute; bottom: 0; width: var(--bar); transform-origin: bottom; }
.ms-growth__bar--staff { left: var(--x-staff); height: var(--u); background: var(--v2-dusk); }
.ms-growth__bar--vol { left: var(--x-vol); height: calc(var(--u) * 2); background: var(--v2-mauve); }
.ms-growth__bar--est { left: var(--x-vol); bottom: calc(var(--u) * 2); height: calc(var(--u) * 2); box-sizing: border-box; border: 1px solid var(--v2-mauve); border-bottom: 0; background: repeating-linear-gradient(135deg, var(--v2-mauve) 0 1px, transparent 1px 7px); }
.ms-growth__lab { top: calc(100% + 12px); transform: translateX(-50%); }
.ms-growth__lab--staff { left: calc(var(--x-staff) + var(--bar) / 2); }
.ms-growth__lab--vol { left: calc(var(--x-vol) + var(--bar) / 2); }
.ms-growth__val { left: var(--x-vol); bottom: calc(var(--u) * 4 + 10px); color: var(--v2-mauve); }
html:not(.no-motion) [data-resolve] .ms-growth__bar { transform: scaleY(0); transition: transform 900ms var(--ms-ease) 200ms; }
html:not(.no-motion) [data-resolve] .ms-growth__bar--vol { transition-delay: 700ms; }
html:not(.no-motion) [data-resolve] .ms-growth__bar--est { transition-delay: 1500ms; }
html:not(.no-motion) [data-resolve] .ms-growth__tick, html:not(.no-motion) [data-resolve] .ms-growth__lab, html:not(.no-motion) [data-resolve] .ms-growth__val { opacity: 0; transition: opacity var(--ms-base) var(--ms-ease) 200ms; }
html:not(.no-motion) [data-resolve] .ms-growth__val { transition-delay: 2300ms; }
html:not(.no-motion) [data-resolve].is-on .ms-growth__bar { transform: none; }
html:not(.no-motion) [data-resolve].is-on .ms-growth__tick, html:not(.no-motion) [data-resolve].is-on .ms-growth__lab, html:not(.no-motion) [data-resolve].is-on .ms-growth__val { opacity: 1; }

/* 04 The film: the axis becomes the film's timeline ---------------------- */
.ms-scroll--film { color: var(--v2-off-white); text-decoration: none; }
.ms-scroll--film:hover { color: var(--v2-mauve); }
.ms-film { gap: clamp(32px, 5vw, 56px); }
.ms-film__fig { display: grid; gap: 28px; width: 100%; max-width: var(--ms-max); min-width: 0; }
.ms-film__frame { position: relative; aspect-ratio: 16 / 9; background: var(--v2-shadow); overflow: hidden; isolation: isolate; }
.ms-film__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: var(--v2-shadow); --media-object-fit: cover; --media-accent-color: var(--v2-mauve); --media-primary-color: var(--v2-off-white); --media-secondary-color: transparent; --media-control-background: transparent; --media-control-hover-background: transparent; }
.ms-film__fig[data-state="idle"] .ms-film__video, .ms-film__fig[data-state="ended"] .ms-film__video { --controls: none; }
.ms-film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86) contrast(0.96) brightness(0.9); transition: opacity var(--ms-dur) var(--ms-ease); }
.ms-film__fig:not([data-state="idle"]):not([data-state="ended"]) .ms-film__poster { opacity: 0; pointer-events: none; }
.ms-film__fig[data-state="ended"] .ms-film__poster { opacity: 0.35; pointer-events: none; }
.ms-film__tag { position: absolute; right: 32px; top: 30px; z-index: 2; font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); color: var(--v2-off-white); transition: opacity var(--ms-base) var(--ms-ease); }
.ms-film__fig:not([data-state="idle"]) .ms-film__tag { opacity: 0; }
.ms-film__who { position: absolute; left: 32px; bottom: 100px; z-index: 2; display: grid; gap: 6px; max-width: min(60%, 44ch); color: var(--v2-off-white); transition: opacity var(--ms-base) var(--ms-ease); }
.ms-film__name { font-size: var(--v2-p2); line-height: 1.2; }
.ms-film__role { font-size: var(--v2-mono-l2); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; opacity: 0.78; }
.ms-film__fig:not([data-state="idle"]) .ms-film__who { opacity: 0; }
/* Frame chrome on the resting frame: four register brackets, gone with the poster once the film
   is running so the player's own controls have the frame. The play control is the pill, bottom left. */
.ms-film__chrome { --vf-ink: rgba(250, 250, 250, 0.92); position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity var(--ms-base) var(--ms-ease); }
.ms-film__fig:not([data-state="idle"]):not([data-state="ended"]) .ms-film__chrome { opacity: 0; }
.ms-film__reg { position: absolute; width: 18px; height: 18px; opacity: 0.54; }
.ms-film__reg::before, .ms-film__reg::after { content: ""; position: absolute; top: 0; left: 0; background: var(--vf-ink); }
.ms-film__reg::before { width: 100%; height: 1px; }
.ms-film__reg::after { width: 1px; height: 100%; }
.ms-film__reg--tl { top: 14px; left: 14px; }
.ms-film__reg--tr { top: 14px; right: 14px; transform: scaleX(-1); }
.ms-film__reg--bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.ms-film__reg--br { bottom: 14px; right: 14px; transform: scale(-1); }
.ms-film__fig[data-state="ended"] .ms-film__coord [data-on] { display: inline; }
@media (hover: hover) and (pointer: fine) {
  .ms-film__fig[data-state="idle"] .ms-film__frame, .ms-film__fig[data-state="ended"] .ms-film__frame { cursor: pointer; }
  .ms-film__poster { transform: scale(1.02); transition: opacity var(--ms-dur) var(--ms-ease), transform 1.2s var(--ms-ease); }
  .ms-film__fig[data-state="idle"] .ms-film__frame:hover .ms-film__poster, .ms-film__fig[data-state="ended"] .ms-film__frame:hover .ms-film__poster { transform: scale(1); }
}
.no-motion .ms-film__poster { transform: none; transition: opacity var(--ms-dur) var(--ms-ease); }
.ms-film__play { position: absolute; left: 32px; bottom: 32px; z-index: 2; display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 20px 0 16px; background: var(--v2-off-white); color: var(--v2-onyx); border: 0; border-radius: var(--v2-radius-sm); cursor: pointer; font-family: var(--v2-font-mono); font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); transition: opacity var(--ms-base) var(--ms-ease), transform var(--ms-base) var(--ms-ease), background-color var(--ms-base) var(--ms-ease); }
.ms-film__play:hover { background: var(--v2-light-lavender); }
.ms-film__glyph { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }
.ms-film__play [data-on], .ms-film__fig[data-state="ended"] .ms-film__play [data-off] { display: none; }
.ms-film__fig[data-state="ended"] .ms-film__play [data-on] { display: inline; }
.ms-film__fig[data-state="playing"] .ms-film__play, .ms-film__fig[data-state="paused"] .ms-film__play { opacity: 0; transform: translateY(8px); pointer-events: none; }
.ms-film__axis { position: relative; height: 84px; --p: 0; }
.ms-film__rule { position: absolute; left: 0; right: 0; top: 20px; height: 1px; background: var(--ms-hair-dark); transform-origin: left center; }
.ms-film__elapsed { position: absolute; left: 0; top: 20px; height: 1px; width: calc(var(--p) * 100%); background: var(--v2-dusk); }
.ms-film__head { position: absolute; top: 20px; left: calc(var(--p) * 100%); width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--v2-mauve); opacity: 0; transition: opacity var(--ms-base) var(--ms-ease); }
.ms-film__fig:not([data-state="idle"]) .ms-film__head { opacity: 1; }
.ms-film__moments { list-style: none; position: absolute; inset: 0; }
.ms-film__moments li { position: absolute; top: 0; left: calc(var(--t) / 161 * 100%); }
.ms-film__moment { position: relative; display: grid; gap: 6px; justify-items: start; min-width: 44px; min-height: 44px; margin-left: -8px; padding: 30px 8px 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--v2-dusk); }
.ms-film__moment::before { content: ""; position: absolute; left: 8px; top: 17px; width: 1px; height: 7px; background: var(--v2-taupe); }
.ms-film__tc { font-size: calc(var(--v2-mono-l2) * 0.9); letter-spacing: var(--v2-tracking-mono); color: var(--v2-taupe); font-variant-numeric: tabular-nums; }
.ms-film__lab { font-size: calc(var(--v2-mono-l2) * 0.9); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; max-width: 19ch; text-wrap: balance; }
.ms-film__moment:hover, .ms-film__moment.is-on { color: var(--v2-off-white); }
.ms-film__moment.is-on::before, .ms-film__moment.is-on .ms-film__tc { background-color: var(--v2-off-white); color: var(--v2-off-white); }
.ms-film__moment.is-on .ms-film__tc { background: none; }
.ms-film__end { position: absolute; right: 0; top: 30px; font-size: var(--v2-mono-l2); letter-spacing: var(--v2-tracking-mono); color: var(--v2-taupe); font-variant-numeric: tabular-nums; }
.ms-film__now { display: none; }
html:not(.no-motion) .ms-film__rule { transform: scaleX(0); transition: transform var(--ms-dur) var(--v2-ease-inout); }
html:not(.no-motion) .ms-film__axis.is-on .ms-film__rule { transform: scaleX(1); }
html:not(.no-motion) .ms-film__moment, html:not(.no-motion) .ms-film__end { opacity: 0; transition: opacity var(--ms-base) var(--ms-ease) calc(var(--ms-dur) + var(--i, 5) * 60ms), color var(--ms-base) var(--ms-ease); }
html:not(.no-motion) .ms-film__axis.is-on .ms-film__moment, html:not(.no-motion) .ms-film__axis.is-on .ms-film__end { opacity: 1; }

/* 06 still chapter, 07 last word ---------------------------------------- */
.ms-chapter--still { gap: clamp(32px, 5vw, 56px); }
.ms-last { gap: 28px; }
.ms-last blockquote p { font-size: var(--v2-s1); line-height: 1.12; letter-spacing: var(--v2-tracking-display); max-width: 30ch; text-wrap: balance; }
.ms-last .ms-quote__by { grid-column: auto; margin-top: 0; }

/* Close -------------------------------------------------------------------- */
.ms-close { position: relative; padding: var(--ms-pad) var(--ms-gutter) 40px; display: grid; gap: 28px; }
.ms-rule--end { position: absolute; top: 0; left: 0; width: 38%; right: auto; background: var(--v2-dusk); }
.ms-rule--end::after { content: ""; position: absolute; right: 0; top: -4px; width: 1px; height: 9px; background: var(--v2-mauve); }
.ms-close__mission { font-size: var(--v2-s1); line-height: var(--v2-s1-lh); letter-spacing: var(--v2-tracking-display); }
.ms-close__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ms-close__credits { font-size: calc(var(--v2-mono-l2) * 0.9); line-height: var(--v2-mono-l2-lh); color: var(--v2-haze); max-width: 80ch; }
.ms-close__mark { padding-top: 40px; border-top: 1px solid var(--ms-hair-dark); }
.ms-close__mark img { height: 22px; width: auto; }
html:not(.no-motion) .ms-close__mark img { opacity: 0; transition: opacity var(--ms-dur) var(--ms-ease) 200ms; }
html:not(.no-motion) .ms-close__mark.is-on img { opacity: 1; }


/* Responsive --------------------------------------------------------------- */
@media (max-width: 960px) {
  .ms-chapter__grid, .ms-chapter__grid--fig { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1279px) {
  .ms-chapters__current { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--v2-off-white); font-size: calc(var(--v2-mono-l2) * 0.85); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-chapters__current::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--v2-mauve); margin-right: 10px; }
  .ms-chapters__current::after { content: ""; flex: none; width: 5px; height: 5px; margin: -3px 0 0 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
  .ms-chapters__current[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
  .ms-chapters__list { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; overflow: visible; flex-direction: column; gap: 0; background: var(--v2-onyx); border: 1px solid var(--ms-hair-dark); padding: 4px 0; }
  .ms-chapters.is-open .ms-chapters__list { display: flex; }
  .ms-chapters__list a { padding: 0 16px; width: 100%; box-sizing: border-box; }
}
@media (max-width: 760px) {
  :root { --ms-dock: 56px; }
  /* FIG. 01 on a phone: the two values ride the top of the screen above the frame, so the month
     never scrolls into view without its sentence. */
  .ms-dolly__lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; position: sticky; top: var(--ms-header); z-index: 2; padding: 16px 0; background: var(--v2-onyx); }
  .ms-dolly__foot { display: contents; }
  .ms-dolly__val { grid-area: 1 / 1; }
  .ms-dolly__lab { grid-area: 2 / 1 / 3 / 3; margin-top: 8px; }
  .ms-dolly__frame { max-width: none; }
  .ms-growth { --x-staff: 12%; --x-vol: 52%; }
  .ms-masthead { gap: 12px; }
  .ms-cover { padding-top: 20px; row-gap: 24px; }
  .ms-cover__body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ms-cover__mark { order: -1; justify-self: start; width: 40px; }
  .ms-lockup__partner { height: 52px; }
  .ms-lockup i { height: 40px; }
  .ms-h1 { max-width: none; }
  .ms-ledger { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ms-ledger__cell { gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--ms-hair-dark); }
  .ms-ledger__cell:last-child { border-bottom: 0; }
  .ms-ledger__num { font-size: var(--ms-h1); }
  .ms-ledger__lab { max-width: none; }
  .ms-climax { padding: calc(var(--ms-header) + 16px) var(--ms-gutter) calc(24px + var(--ms-dock) + env(safe-area-inset-bottom)); }
  .ms-climax__body { align-content: start; gap: 24px; }
  .ms-climax__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ms-climax__val { font-size: var(--ms-h1); line-height: 1; letter-spacing: var(--v2-tracking-h1); }
  .ms-climax__val--after { margin: 0; }
  .ms-climax__axis { height: 64px; }
  .ms-climax__note { width: 100%; order: 3; margin-top: 4px; }
  .ms-close__actions .ltv2-btn { width: 100%; justify-content: center; }
  .ms-film__fig { width: 100%; }
  .ms-film__frame { margin: 0 calc(-1 * var(--ms-gutter)); }
  .ms-film__play { left: 28px; bottom: 28px; }
  .ms-film__tag { right: 28px; top: 26px; }
  .ms-film__who { left: 28px; bottom: 92px; }
  .ms-film__role { display: none; }
  .ms-film__reg--tl { top: 12px; left: 12px; }
  .ms-film__reg--tr { top: 12px; right: 12px; }
  .ms-film__reg--bl { bottom: 12px; left: 12px; }
  .ms-film__reg--br { bottom: 12px; right: 12px; }
  .ms-film__axis { height: 72px; }
  .ms-film__moment { min-width: 44px; margin-left: -22px; padding: 0 22px; height: 44px; }
  .ms-film__moment::before { left: 22px; }
  .ms-film__moment .ms-film__tc, .ms-film__moment .ms-film__lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ms-film__now { display: block; position: absolute; left: 0; right: 0; top: 46px; font-size: var(--v2-mono-l2); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; color: var(--v2-dusk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ms-film__end { top: 46px; }
  .ms-film__fig:not([data-state="idle"]) .ms-film__now { color: var(--v2-off-white); }
  .ms-cover__foot { flex-wrap: wrap; gap: 20px; }
  .ms-cover__foot .ms-dl { justify-content: center; }
}
@media (pointer: coarse) {
  .ms-chapters__list a, .ms-chapters__current, .ltv2-btn { min-height: 44px; }
}
/* touch: the same pill, brought in from the corner so a thumb lands on it */
@media (hover: none) {
  .ms-film__play { left: 32px; bottom: 32px; min-height: 44px; }
}
/* phones: the download CTA docks to the foot of the screen between the cover and the close */
.ms-dock { display: none; }
@media (max-width: 760px) {
  .ms-dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; transform: translateY(100%); visibility: hidden; transition: transform var(--ms-base) var(--ms-ease), visibility 0s var(--ms-base); }
  .ms-dock.is-in { transform: none; visibility: visible; transition: transform var(--ms-base) var(--ms-ease); }
  /* one solid bar edge to edge, down into the home-indicator area, so nothing shows beneath it */
  .ms-dock .ms-dl { box-sizing: border-box; width: 100%; min-height: 56px; padding: 0 20px env(safe-area-inset-bottom); border: 0; border-radius: 0; background: var(--v2-mauve); justify-content: center; }
  html.no-motion .ms-dock { transition: none; }
}

@media (pointer: coarse) {
  .ms-skip, .ms-masthead__mark, .ms-lockup__home, .ms-close__mark a, .ms-close__actions .ltv2-btn {
    min-height: 44px;
  }
  .ms-masthead__mark, .ms-lockup__home, .ms-close__mark a {
    display: inline-flex;
    align-items: center;
  }
}

/* Hero: the film, pinned. Scroll contracts the full-bleed film into a
   documentary crop frame before the page takes over (the Change Makers
   grammar, on the Mount Sinai film). Phones do not pin. -------------------- */
.ms-hero-track { height: 200svh; }
.ms-hero { position: sticky; top: 0; height: 100svh; min-height: 560px; background: var(--v2-onyx); color: var(--v2-off-white); overflow: hidden; isolation: isolate; }
.ms-hero__film { position: absolute; inset: 0; z-index: 1; background: var(--v2-onyx); clip-path: inset(calc(var(--hp, 0) * 16svh) calc(var(--hp, 0) * 16vw)); }
.ms-hero__src, .ms-hero__loop, .ms-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-hero__src { z-index: 0; opacity: 0; pointer-events: none; --controls: none; }
.ms-hero__loop { z-index: 1; opacity: 0; pointer-events: none; }
.ms-hero.is-live .ms-hero__loop { opacity: 1; }
.ms-hero__poster { z-index: 2; transition: opacity 1200ms ease; }
.ms-hero.is-live .ms-hero__poster { opacity: 0; }
.ms-hero__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 10, 0.34) 0%, transparent 30%, rgba(10, 10, 10, 0.06) 58%, rgba(10, 10, 10, 0.72) 100%); }
.ms-hero__chrome { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: space-between; padding: 24px var(--ms-gutter) calc(clamp(20px, 3.4vw, 44px) + env(safe-area-inset-bottom)); opacity: calc(1 - var(--hp, 0) * 2); pointer-events: none; }
.ms-hero.contracted .ms-hero__chrome { visibility: hidden; }
.ms-hero__top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.ms-hero__mid { margin-block: auto; text-align: center; display: grid; justify-items: center; }
.ms-hero .ms-h1 { max-width: 24ch; text-wrap: balance; text-shadow: 0 1px 24px rgba(10, 10, 10, 0.4); }
.ms-hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
html:not(.no-motion) .ms-hero__bottom { animation: ms-hero-in 600ms var(--ms-ease) 1100ms both; }
@keyframes ms-hero-in { from { opacity: 0; } to { opacity: 1; } }
.ms-hero__sound { display: inline-flex; align-items: center; gap: 10px; font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); color: rgba(245, 245, 245, 0.82); }
.ms-hero__sound::before { content: ""; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid rgba(245, 245, 245, 0.82); }
.ms-hero .ms-scroll { color: rgba(245, 245, 245, 0.78); }
/* the whole hero is the invitation: click anywhere to enter the cinema */
.ms-hero__watch { position: absolute; inset: 0; z-index: 5; cursor: pointer; background: none; border: 0; padding: 0; margin: 0; }
.ms-hero__watch:focus-visible { outline: 2px solid var(--v2-mauve); outline-offset: -4px; }
.ms-hero.contracted .ms-hero__watch { pointer-events: none; }
.ms-hero__top a { pointer-events: auto; }
/* cursor viewfinder */
.ms-hero__watchtag { position: fixed; z-index: 6; left: var(--wx, 50vw); top: var(--wy, 50vh); display: none; pointer-events: none; }
.ms-watchtag__frame { --wc: rgba(245, 245, 245, 0.92); position: absolute; left: 0; top: 0; width: 84px; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.82); opacity: 0; transition: transform 340ms var(--v2-ease-inout), opacity 260ms ease;
  background:
    linear-gradient(var(--wc), var(--wc)) left 0 top 0 / 16px 1px, linear-gradient(var(--wc), var(--wc)) left 0 top 0 / 1px 16px,
    linear-gradient(var(--wc), var(--wc)) right 0 top 0 / 16px 1px, linear-gradient(var(--wc), var(--wc)) right 0 top 0 / 1px 16px,
    linear-gradient(var(--wc), var(--wc)) left 0 bottom 0 / 16px 1px, linear-gradient(var(--wc), var(--wc)) left 0 bottom 0 / 1px 16px,
    linear-gradient(var(--wc), var(--wc)) right 0 bottom 0 / 16px 1px, linear-gradient(var(--wc), var(--wc)) right 0 bottom 0 / 1px 16px;
  background-repeat: no-repeat; }
.ms-watchtag__frame::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--wc); }
.ms-watchtag__label { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-42px - 100% - 1px)); background: var(--v2-off-white); color: var(--v2-onyx); padding: 3px 9px; white-space: nowrap; font-size: var(--v2-mono-l2); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; opacity: 0; transition: opacity 260ms ease 80ms; }
@media (hover: hover) and (pointer: fine) {
  .ms-hero__watchtag { display: block; }
  .ms-hero__watch:hover ~ .ms-hero__watchtag .ms-watchtag__frame { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .ms-hero__watch:active ~ .ms-hero__watchtag .ms-watchtag__frame { transform: translate(-50%, -50%) scale(0.9); transition-duration: 140ms; }
  .ms-hero__watch:hover ~ .ms-hero__watchtag .ms-watchtag__label { opacity: 1; }
  .ms-hero.contracted .ms-hero__watchtag { display: none; }
  .ms-hero__sound { display: none; }
}
/* touch: a breathing play mark low in the frame marks the film as playable */
.ms-hero__play { position: absolute; left: 50%; bottom: 21%; transform: translateX(-50%); z-index: 4; display: none; flex-direction: column; align-items: center; gap: 14px; color: rgba(245, 245, 245, 0.88); pointer-events: none; }
.ms-hero__play svg { display: block; animation: ms-play-breathe 4.2s var(--v2-ease-inout) infinite; }
.ms-hero__play .ltv2-mono { font-size: 12px; letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; color: rgba(245, 245, 245, 0.78); }
@keyframes ms-play-breathe { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.08); opacity: 1; } }
@media (hover: none) {
  .ms-hero__play { display: flex; }
  .ms-hero__sound { display: none; }
  .ms-hero:has(.ms-hero__watch:active) .ms-hero__play { transform: translateX(-50%) scale(0.92); transition: transform 140ms ease; }
}
/* corner register marks track the contracting crop frame */
.ms-hero__reg { position: absolute; z-index: 4; width: 18px; height: 18px; pointer-events: none; opacity: 0.65; }
.ms-hero__reg::before, .ms-hero__reg::after { content: ""; position: absolute; background: var(--v2-off-white); }
.ms-hero__reg::before { width: 100%; height: 1px; top: 0; }
.ms-hero__reg::after { width: 1px; height: 100%; left: 0; }
.ms-hero__reg--tl { top: calc(14px + var(--hp, 0) * 16svh); left: calc(14px + var(--hp, 0) * 16vw); }
.ms-hero__reg--tr { top: calc(14px + var(--hp, 0) * 16svh); right: calc(14px + var(--hp, 0) * 16vw); transform: scaleX(-1); }
.ms-hero__reg--bl { bottom: calc(14px + var(--hp, 0) * 16svh); left: calc(14px + var(--hp, 0) * 16vw); transform: scaleY(-1); }
.ms-hero__reg--br { bottom: calc(14px + var(--hp, 0) * 16svh); right: calc(14px + var(--hp, 0) * 16vw); transform: scale(-1); }
html.no-motion .ms-hero-track { height: auto; }
html.no-motion .ms-hero { position: relative; }
html.no-motion .ms-hero__film { clip-path: none; }
html.no-motion .ms-hero__play svg, html.no-motion .ms-hero__poster { animation: none; transition: none; }
@media (max-width: 640px) {
  .ms-hero-track { height: auto; }
  .ms-hero { position: relative; height: 100svh; min-height: 480px; }
  .ms-hero__film { clip-path: none; }
  .ms-hero__bottom { flex-wrap: wrap; }
  .ms-hero__top .ms-eyebrow { display: none; }
  .ms-hero .ms-h1 { font-size: clamp(1.625rem, 7vw, 2.125rem); }
  .ms-hero__play { bottom: 24%; }
}
@media (max-width: 900px) and (max-height: 500px) {
  .ms-hero-track { height: auto; }
  .ms-hero { position: relative; height: 100svh; min-height: 0; }
  .ms-hero__film { clip-path: none; }
  .ms-hero__play { bottom: 8%; gap: 8px; }
  .ms-hero__play svg { width: 44px; height: 44px; }
}

/* Cinema: the film, full frame, above the grain plate ---------------------- */
.ms-cinema { position: fixed; inset: 0; z-index: 9500; }
.ms-cinema[hidden] { display: none; }
.ms-cinema__backdrop { position: absolute; inset: 0; background: var(--v2-deep-black); opacity: 0; transition: opacity 360ms ease; }
.ms-cinema__stage { position: absolute; inset: 0; background: var(--v2-deep-black); opacity: 0; transform: scale(0.985); transition: opacity 360ms ease, transform 460ms var(--v2-ease-inout); }
.ms-cinema.is-in .ms-cinema__backdrop { opacity: 1; }
.ms-cinema.is-in .ms-cinema__stage { opacity: 1; transform: none; }
.ms-cinema__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--v2-deep-black); cursor: pointer; --media-object-fit: contain; --controls: none; }
.ms-cinema__close { position: absolute; top: calc(clamp(14px, 3vw, 30px) + env(safe-area-inset-top)); right: calc(clamp(14px, 3vw, 30px) + env(safe-area-inset-right)); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: rgba(245, 245, 245, 0.14); color: var(--v2-off-white); font: inherit; font-size: 22px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background 200ms ease; }
.ms-cinema__close:hover { background: rgba(245, 245, 245, 0.28); }
.ms-cinema__close:focus-visible { outline: 2px solid var(--v2-mauve); outline-offset: 3px; }
.ms-cinema__transcript { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: calc(clamp(64px, 9vh, 96px) + env(safe-area-inset-bottom)); width: min(92vw, 880px); min-height: 44px; display: flex; align-items: baseline; justify-content: center; gap: 16px; color: rgba(245, 245, 245, 0.88); font-size: var(--v2-mono-l1); text-align: left; text-shadow: 0 1px 12px rgba(10, 10, 10, 0.8); pointer-events: none; opacity: 0; transition: opacity 360ms ease 200ms; margin: 0; }
.ms-cinema.is-in .ms-cinema__transcript { opacity: 1; }
.ms-cinema__tc { color: var(--v2-mauve); flex: none; }
.ms-cinema__tc:empty { display: none; }
.ms-cinema__tx { letter-spacing: 0.04em; }
@media (max-width: 640px) { .ms-cinema__transcript { flex-direction: column; align-items: flex-start; gap: 5px; } }
html.no-motion .ms-cinema__stage, html.no-motion .ms-cinema__backdrop, html.no-motion .ms-cinema__transcript { transition: opacity 200ms ease; transform: none; }



/* Download gate: a drawer from the right on wide screens, a sheet on phones. Work email only. */
.ms-gate__scrim { position: fixed; inset: 0; z-index: 950; background: rgba(10, 10, 10, 0.6); }
.ms-gate {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 960;
  width: min(480px, 100vw); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 32px 40px;
  background: var(--v2-deep-black); color: var(--v2-off-white);
  border-left: 1px solid var(--ms-hair-dark);
}
html:not(.no-motion) .ms-gate { animation: ms-gate-in var(--ms-base) var(--ms-ease); }
@keyframes ms-gate-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
body.ms-gate-open { overflow: hidden; }
.ms-gate__top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-bottom: 36px; }
.ms-gate__top img { height: var(--v2-nav-lockup); width: auto; }
.ms-gate__x { width: 44px; height: 44px; margin-right: -12px; border: 0; background: transparent; color: var(--v2-dusk); font-size: 22px; line-height: 1; cursor: pointer; }
.ms-gate__x:hover, .ms-gate__x:focus-visible { color: var(--v2-off-white); }
.ms-gate__eyebrow { margin: 0; color: var(--v2-dusk); font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); }
.ms-gate__title { margin: 14px 0 0; font-size: var(--ms-h2); line-height: 1.1; letter-spacing: -0.01em; }
.ms-gate__sub { margin: 12px 0 0; color: var(--v2-dusk); line-height: var(--v2-leading-body); max-width: 34ch; }
.ms-gate__card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; align-items: start; margin: 28px 0 0; padding: 20px; border: 1px solid var(--ms-hair-dark); }
.ms-gate__cover { position: relative; aspect-ratio: 640 / 906; border: 1px solid var(--ms-hair-dark); background: var(--v2-onyx); box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.9); }
.ms-gate__cover img { width: 100%; height: 100%; object-fit: cover; }
.ms-gate__cover::before, .ms-gate__cover::after { content: ""; position: absolute; width: 8px; height: 8px; border: 0 solid var(--v2-haze); }
.ms-gate__cover::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.ms-gate__cover::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.ms-gate__spec { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--ms-hair-dark); color: var(--v2-haze); font-size: var(--v2-mono-l2); text-transform: uppercase; letter-spacing: var(--v2-tracking-mono); }
.ms-gate__toc { list-style: none; }
.ms-gate__toc li { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; line-height: 1.35; border-bottom: 1px solid var(--ms-hair-dark); }
.ms-gate__toc li:last-child { border-bottom: 0; padding-bottom: 0; }
.ms-gate__toc span { flex: none; width: 3ch; padding-top: 2px; font-size: var(--v2-mono-l2); color: var(--v2-haze); }
.ms-gate__form { display: grid; gap: 10px; margin-top: 28px; }
/* the email field is the key field (.ms-key, below), full width here */
.ms-gate__form .ms-key { width: 100%; }
.ms-gate__err { min-height: 1em; margin: 0; font-size: 13px; color: var(--v2-pale); }
.ms-gate__err:empty { display: none; }
.ms-gate__submit { justify-content: center; min-height: 48px; margin-top: 6px; background: var(--v2-off-white); color: var(--v2-onyx); border-color: var(--v2-off-white); }
.ms-gate__fine { margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: var(--v2-haze); }
.ms-gate__done .ms-gate__cover--done { width: 132px; margin-top: 32px; }
.ms-gate__done .ms-gate__submit { display: inline-flex; margin-top: 28px; }
html:not(.no-motion) .ms-gate__live > *, html:not(.no-motion) .ms-gate__done > * { animation: ms-gate-block 480ms var(--ms-ease) both; }
html:not(.no-motion) .ms-gate__live > :nth-child(2), html:not(.no-motion) .ms-gate__done > :nth-child(2) { animation-delay: 40ms; }
html:not(.no-motion) .ms-gate__live > :nth-child(3), html:not(.no-motion) .ms-gate__done > :nth-child(3) { animation-delay: 80ms; }
html:not(.no-motion) .ms-gate__live > :nth-child(n + 4), html:not(.no-motion) .ms-gate__done > :nth-child(n + 4) { animation-delay: 120ms; }
@keyframes ms-gate-block { from { opacity: 0.01; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .ms-gate { left: 0; width: 100vw; border-left: 0; padding: 0 20px calc(28px + env(safe-area-inset-bottom)); }
  html:not(.no-motion) .ms-gate { animation-name: ms-gate-sheet; }
  @keyframes ms-gate-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .ms-gate__top { position: sticky; top: 0; z-index: 1; margin: 0 -20px 24px; padding: calc(12px + env(safe-area-inset-top)) 20px 12px; background: var(--v2-deep-black); border-bottom: 1px solid var(--ms-hair-dark); }
  .ms-gate__x { margin-right: 0; }
  /* phones: headline and the email field, nothing between them, so the field sits above the fold */
  .ms-gate__sub, .ms-gate__card, .ms-gate__done .ms-gate__cover--done { display: none; }
  .ms-gate__form { margin-top: 24px; }
}

/* Print: the case study as an A4 PDF from the same page ------------------ */
@media print {
  @page { size: A4; margin: 16mm; }
  html { scroll-behavior: auto; }
  body.ltv2-page-grain::after, .ms-masthead, .ms-skip, .ms-dock, .ms-cover__foot, .ms-close__actions, .ms-cinema, .ms-hero__watch, .ms-hero__watchtag, .ms-hero__bottom, .ms-hero__play, .ms-hero__reg, .ms-hero__scrim, .ms-hero__src, .ms-hero__loop, .ms-gate, .ms-gate__scrim { display: none !important; }
  .ms-hero-track { height: auto; }
  .ms-hero { position: static; height: auto; min-height: 0; display: flex; flex-direction: column; gap: 8mm; overflow: visible; background: none; color: #000; }
  .ms-hero__chrome { display: contents; }
  .ms-hero__top { order: 1; }
  .ms-hero__mid { order: 2; margin: 0; text-align: left; justify-items: start; }
  .ms-hero .ms-h1 { font-size: 26pt; max-width: 30ch; text-shadow: none; }
  .ms-hero__film { order: 3; position: static; clip-path: none; height: 84mm; background: none; }
  .ms-hero__poster { position: static; display: block; width: 100%; height: 84mm; object-fit: cover; opacity: 1 !important; }
  .ms-cover { padding: 8mm 0 0; row-gap: 8mm; }
  .ms-cover__body { grid-template-columns: minmax(0, 1fr) auto; }
  .ms-cover__mark { width: 14mm; }
  .ms-sub { font-size: 13pt; max-width: 52ch; }
  .ms-quote__text, .ms-last blockquote p { text-wrap: pretty; }
  .ms-cover, .ms-hero, .ms-chapter, .ms-close { min-height: 0; background: none !important; color: #000 !important; }
  .ms-chapter, .ms-close { padding: 12mm 0 0; gap: 8mm; }
  #c1 { break-before: page; }
  .ms-chapter__head, .ms-quote, .ms-fig, .ms-ledger { break-inside: avoid-page; }
  .ms-h2 { break-after: avoid-page; }
  .ms-reveal { opacity: 1 !important; transform: none !important; }
  .ms-rule--draw { transform: none !important; }
  [data-resolve] .ms-bar__fill { transform: none !important; }
  [data-resolve] .ms-bar__val, [data-resolve] .ms-bar__lab { opacity: 1 !important; }
  [data-resolve] .ms-dolly__grid { transform: translate(16.667%, 10%) scale(4) !important; transition: none !important; }
  [data-resolve] .ms-dolly__grid i:first-child { opacity: 1 !important; background-color: #000 !important; color: #fff !important; }
  [data-resolve] .ms-dolly__grid i:not(:first-child) { display: none; }
  .ms-dolly__frame { border-color: #bbb !important; }
  [data-resolve] .ms-dolly__val, [data-resolve] .ms-dolly__lab { opacity: 1 !important; transform: none !important; }
  [data-resolve] .ms-growth__bar { transform: none !important; transition: none !important; }
  [data-resolve] .ms-growth__tick, [data-resolve] .ms-growth__lab, [data-resolve] .ms-growth__val { opacity: 1 !important; transition: none !important; }
  .ms-growth { height: 60mm; border-bottom-color: #bbb !important; background-image: linear-gradient(#ddd 1px, transparent 1px) !important; }
  .ms-growth__bar--staff { background: #999 !important; }
  .ms-growth__bar--vol { background: #000 !important; }
  .ms-growth__bar--est { border-color: #000 !important; background: repeating-linear-gradient(135deg, #000 0 1px, transparent 1px 7px) !important; }
  .ms-growth__val { color: #000 !important; }
  .ms-climax__track { height: auto; margin: 0; }
  .ms-climax { position: static; height: auto; padding: 0; gap: 12mm; }
  .ms-climax__axis { --w: 16.4 !important; }
  .ms-climax__val--after, .ms-climax__note { opacity: 1 !important; }
  .ms-masthead__mark img, .ms-lockup__home img, .ms-close__mark img { filter: invert(1); }
  .ms-lockup__partner, .ms-cover__mark { filter: invert(1); }
  .ms-close__mark img { opacity: 1 !important; }
  .ms-film__frame, .ms-film__video, .ms-film__play, .ms-film__tag, .ms-film__axis, .ms-scroll--film { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  body *:not(img):not(video) { color: #000 !important; background-color: transparent !important; border-color: #000 !important; }
  .ms-kicker, .ms-fig__src, .ms-fig__head, .ms-bar__lab, .ms-bar__val, .ms-dolly__val, .ms-dolly__lab, .ms-growth__lab, .ms-growth__tick, .ms-climax__lab, .ms-climax__note, .ms-quote__by span, .ms-film__tc, .ms-film__end, .ms-ledger__lab, .ms-eyebrow { color: #555 !important; }
  .ms-axis, .ms-rule, .ms-bar__track, .ms-climax__axis .ms-climax__track, .ms-film__rule, .ms-lockup i { background-color: #bbb !important; }
  .ms-bar__fill, .ms-climax__before { background-color: #999 !important; }
  .ms-bar--after .ms-bar__fill, .ms-climax__after, .ms-climax__released, .ms-rule--end::after { background-color: #000 !important; }
  .ms-h2, .ms-h1 { color: #000 !important; }
}

/* ── The key: Bencho's Label input (MIT, bencho.dev/licence), in the download gate.
   A field whose label is its placeholder until you are in it. On focus the label lifts into the top
   edge with a small hop running along its letters, the outline darkens in place, and the top line
   parts under the label from its middle outward. label-input.js draws the ring and measures the notch.

   ONE THING MOVES. It used to DRAW its outline out of the notch, both ways round the field, and that
   was the field performing, which is too much for a thing you focus forty times a day. Now the
   outline is always whole; focus only changes its ink and opens the gap. The label is the event, and
   the line makes room for it.

   Bencho's tokens, mapped to the gate's ground: ink is Off White, the muted inks are Dusk and Off
   White at half, the UI face is Latent Mono (labels are mono in brand-v2). Scoped here so nothing
   leaks out. */
.ms-key {
  --ink: var(--v2-off-white);
  --ink-rgb: 250, 250, 250;
  --ink-3: var(--v2-dusk);
  --ink-4: rgba(250, 250, 250, 0.5);
  --font-ui: var(--v2-font-mono);
  position: relative;
  width: min(100%, 320px);
  font-family: var(--font-ui);
  text-align: left;
  /* room above the field for the lifted label */
  padding-top: 10px;
}
/* no fill: the field is only its outline. The radius matches the ring's corner, drawn in label-input.js. */
.ms-key__box { position: relative; height: 52px; background: transparent; border-radius: 12px; cursor: text; --ms-key-x: 16px; }
/* the outline: always whole. At rest a hairline of ink at a third; focused, the ink; left filled,
   a step up from rest. Brand-v2 rules are 1px, so the stroke never thickens: only its ink changes.
   The gap across the top is the only part that moves. */
.ms-key__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ms-key__ring path { fill: none; stroke: rgba(var(--ink-rgb), 0.3); stroke-width: 1; stroke-linecap: butt; transition: stroke 240ms ease; }
.ms-key[data-focus="true"] .ms-key__ring path { stroke: var(--ink); }
.ms-key[data-filled="true"]:not([data-focus="true"]) .ms-key__ring path { stroke: rgba(var(--ink-rgb), 0.5); }
.ms-key.is-wrong .ms-key__ring path { stroke: var(--v2-mauve); }
/* the gap: whole at rest, parting from its middle when the label lifts. The dash is longer than the
   path so offset 0 is the whole line and -1 is none of it. */
.ms-key__gap { stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke 240ms ease, stroke-dashoffset 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.ms-key[data-up="true"] .ms-key__gap { stroke-dashoffset: -1; }
/* the label: its placeholder self in the middle of the field, and its lifted self centred on the top
   edge. The second is the first moved up by half the field and scaled from its left: 14px mono at
   rest, 12px lifted, so it never drops below the mono L2 floor. */
.ms-key__label {
  position: absolute; left: var(--ms-key-x); top: 50%;
  margin: 0;
  font-size: var(--v2-l1); line-height: 1; letter-spacing: var(--v2-tracking-mono); text-transform: uppercase;
  white-space: pre;
  color: var(--ink-4);
  transform-origin: left center;
  transform: translateY(-50%);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
  cursor: text;
  -webkit-user-select: none; user-select: none;
}
.ms-key[data-up="true"] .ms-key__label { transform: translateY(-50%) translateY(-26px) scale(0.857); color: var(--ink-3); }
.ms-key[data-focus="true"] .ms-key__label { color: var(--ink); }
.ms-key__label span { display: inline-block; }
/* the hop: each letter lifts a hair and settles, one after the next, so the word ripples as it rises */
.ms-key[data-focus="true"] .ms-key__label span { animation: ms-key-hop 460ms cubic-bezier(0.3, 0.7, 0.3, 1) both; animation-delay: calc(var(--i) * 24ms); }
@keyframes ms-key-hop { 0% { transform: translateY(0); } 38% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.ms-key__field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0 var(--ms-key-x);
  box-sizing: border-box;
  border: 0; border-radius: 0; background: transparent;
  font: 400 16px / 1 var(--font-ui);
  color: var(--ink);
  outline: none;
}
.ms-key__field:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }
.ms-key.is-wrong .ms-key__box { animation: ms-wrong 360ms var(--v2-ease-out); }
@keyframes ms-wrong { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  .ms-key__ring path, .ms-key__gap, .ms-key__label { transition-duration: 1ms; }
  .ms-key[data-focus="true"] .ms-key__label span, .ms-key__field, .ms-key.is-wrong .ms-key__box { animation: none; }
}