/* THE MARK, AS A SCROLLED STORY (2026-10-04, owner: "can we add like 33vh of margin around things it just looks giant
   on my monitor ... the images are taller than my monitor ... split the information up some more though so it's more
   apple scrollytelling ... make sure it works on light and dark theme too"). Four scenes; in each, a picture is
   PINNED while short beats scroll past and the picture follows the beat in the middle of the screen (about_mark.js).
   Pictures are sized by the screen's HEIGHT (--pin-h), so none is taller than the window. 33vh between scenes.
   Art: mark_art.py. Text colours are the stage's own tokens, per theme. No gradients. */
.markstage { --ms-bg: #0B0721; --ms-panel: #0F0A2E; --text: #C9B3FA; --text-heading: #F5F2FF; --link: #00DCFF; --border-subtle: #2A1F5C;
  --ms-c1: #00DCFF; --ms-c2: #FF29AC; --ms-c3: #C9B3FA; --pin-h: min(72vh, 44vw); --nav-h: 80px;
  background: var(--ms-bg); color: var(--text); padding-bottom: 33vh; overflow: clip; }
:root[data-theme="light"] .markstage { --ms-bg: #F4F1FC; --ms-panel: #E9E3FA; --text: #3B3463; --text-heading: #120B33; --link: #0A6F8C;
  --border-subtle: #D7CFF2; --ms-c1: #0A6F8C; --ms-c2: #B0126E; --ms-c3: #5426B8; }
.ms-scene { position: relative; display: grid; }
.ms-scene + .ms-scene { margin-top: 33vh; }
.ms-beats { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.ms-beat { min-height: 70vh; display: grid; align-content: center; transition: opacity .4s ease; }
.ms-say { margin: 0; max-width: 24ch; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.22; font-weight: 500; letter-spacing: -.01em; color: var(--text-heading); }
.ms-n { color: var(--link); letter-spacing: .14em; margin: 0 0 var(--sp-2); }
.ms-h { font-size: var(--h2); font-weight: 500; line-height: 1.02; letter-spacing: -.02em; color: var(--link); margin: 0 0 var(--sp-4); }
.ms-stat { margin: 0 0 var(--sp-3); font-size: clamp(64px, 9vw, 150px); font-weight: 500; line-height: .9; letter-spacing: -.035em; }
/* the epigraph (owner 2026-10-05); unattributed on purpose: widely given to Confucius, and not in his writings */
.ms-quote { font-size: clamp(28px, 3.2vw, 52px); line-height: 1.12; max-width: 20ch; }
.ms-c1 { color: var(--ms-c1); } .ms-c2 { color: var(--ms-c2); } .ms-c3 { color: var(--ms-c3); }
.ms-crumb { display: inline-flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-3); color: var(--link); text-decoration: none; letter-spacing: .14em; }
.ms-crumb .icon { font-size: 16px; }
.ms-crumb:hover { color: var(--text-heading); }
.ms-back { display: inline-flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-5); }
/* the full-bleed scenes (opening and close): the art pinned behind, the beats passing over it on plaques */
.ms-full .ms-pin, .ms-full .ms-beats { grid-area: 1 / 1; }
.ms-full .ms-pin { position: sticky; top: 0; height: 100vh; align-self: start; }
.ms-art, .ms-art svg, .ms-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-full .ms-beats { padding-inline: var(--margin); }
.ms-full .ms-beat { min-height: 100vh; align-content: end; padding-bottom: 14vh; }
.ms-plaque { background: var(--ms-bg); padding: var(--sp-5); max-width: 780px; justify-self: start; }
.ms-plaque .display { color: var(--text-heading); }
/* the split scenes: beats on the left, the picture pinned on the right and centred in the window */
.ms-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--sp-6); align-items: start; }
.ms-split .ms-pin { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--nav-h) + (100vh - var(--nav-h) - var(--pin-h)) / 2); height: var(--pin-h); display: grid; place-items: center; }
.ms-split .ms-beats { grid-column: 1; grid-row: 1; padding-block: 15vh; }
.ms-ringwrap { position: relative; height: 100%; aspect-ratio: 1; }
.ms-ringwrap svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.ms-ringimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ms-svgl { font-family: var(--f-03); font-size: 12px; letter-spacing: .14em; }
.ms-stage { position: relative; height: 100%; aspect-ratio: 1; border-radius: var(--radius-main); overflow: hidden; background: var(--ms-panel); }
.ms-layer { position: absolute; inset: 0; }
.ms-layer > svg, .ms-layer > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-layer + .ms-layer { opacity: 0; }
.ms-stage > .ms-glyph { position: absolute; inset: 0; width: 100%; height: 100%; }
.ms-glitch { position: absolute; inset: 0; opacity: 0; display: grid; place-items: center; }
.ms-glitch img { grid-area: 1 / 1; height: 52%; width: auto; visibility: hidden; }
.ms-glitch img.is-shown { visibility: visible; }
.ms-33 { font-family: inherit; font-size: 330px; font-weight: 700; letter-spacing: -.04em; }
/* the beat in focus is lit while the script drives the story; without it every beat stays readable */
.markstage.is-live .ms-beat:not(.is-on) { opacity: .32; }
/* phones: the picture pins under the nav on a full-width backing and the beats pass beneath it */
@media (max-width: 899px) {
  .markstage { --pin-h: 42vh; }
  .ms-split { grid-template-columns: minmax(0, 1fr); }
  .ms-split .ms-pin { grid-column: 1; grid-row: 1; top: var(--nav-h); z-index: 2; background: var(--ms-bg); width: 100%; padding-block: var(--sp-3); box-sizing: content-box; }
  .ms-split .ms-beats { grid-row: 2; padding-block: 5vh 10vh; }
  .ms-beat { min-height: 60vh; }
  .ms-say { max-width: none; }
  .ms-full .ms-beat { padding-bottom: 8vh; }
}
@media (prefers-reduced-motion: reduce) { .ms-beat { transition: none; } }
/* LIGHT THEME: the key-art palette re-mapped for a light ground, by the colours the art is drawn in (the 33 plate,
   .ms-keep, keeps its own: a navy plate reads the same in both themes) */
:root[data-theme="light"] .markstage :not(.ms-keep) > svg [fill="#C9B3FA" i] { fill: #7C68C4; }
:root[data-theme="light"] .markstage :not(.ms-keep) > svg [stroke="#C9B3FA" i] { stroke: #7C68C4; }
:root[data-theme="light"] .markstage :not(.ms-keep) > svg [fill="#00DCFF" i] { fill: #0094B8; }
:root[data-theme="light"] .markstage :not(.ms-keep) > svg [stroke="#00DCFF" i] { stroke: #0094B8; }
:root[data-theme="light"] .markstage :not(.ms-keep) > svg [fill="#FF29AC" i] { fill: #D11487; }
:root[data-theme="light"] .markstage :not(.ms-keep) > svg [stroke="#FF29AC" i] { stroke: #D11487; }
:root[data-theme="light"] .markstage :not(.ms-keep) > svg [fill="#C1FF1F" i] { fill: #5E8A00; }
:root[data-theme="light"] .markstage :not(.ms-keep) > svg [fill="#F5F2FF" i] { fill: #120B33; }
:root[data-theme="light"] .markstage :not(.ms-keep) > svg [stroke="#F5F2FF" i] { stroke: #120B33; }
:root[data-theme="light"] .markstage :not(.ms-keep) > svg [fill="#140C3A" i] { fill: #DCD4F4; }
:root[data-theme="light"] .markstage .ms-glitch img { filter: brightness(0); opacity: .88; }
/* on the navy 33 plate the mark stays light in the light theme too, or it disappears into the plate */
:root[data-theme="light"] .markstage .ms-stage.is-plate > svg.ms-glyph [fill="#F5F2FF" i] { fill: #F5F2FF; }