:root {
  --mo-ease: cubic-bezier(.16, 1, .3, 1);
  --mo-ease-ui: cubic-bezier(.2, .8, .2, 1);
  --mo-warm: #D3A15A;
}

::selection { background: rgba(211, 161, 90, .32); }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  body > header.rail { view-transition-name: mo-rail; }
  body > footer { view-transition-name: mo-foot; }
  ::view-transition-old(root) { animation: 200ms cubic-bezier(.4, 0, 1, 1) both mo-vt-out; }
  ::view-transition-new(root) { animation: 460ms var(--mo-ease) 40ms both mo-vt-in; }
  ::view-transition-group(mo-rail), ::view-transition-group(mo-foot) { animation-duration: 0s; }
  ::view-transition-old(mo-rail), ::view-transition-new(mo-rail) { animation: none; }
  @keyframes mo-vt-out { to { opacity: 0; } }
  @keyframes mo-vt-in { from { opacity: 0; translate: 0 18px; } }
}

.film .film-gate::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(56% 62% at 6% 10%, rgba(255, 178, 102, .11), rgba(255, 178, 102, .035) 45%, transparent 70%);
  opacity: 0; transition: opacity 1.2s ease;
}
.film.at-threshold .film-gate::before { opacity: 1; }

.hero:not(.hero-workbench), .ws-head, .ph-about-hero, .ph-progress-hero { position: relative; }
.ph-about-hero, .ph-progress-hero { overflow: hidden; isolation: isolate; }
.mo-horizon {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  height: clamp(56px, 9vw, 132px);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 196, 128, .95) 22%, rgba(255, 214, 160, 1) 50%, rgba(255, 196, 128, .95) 78%, transparent 100%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: .5;
}
.mo-horizon::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0 40%, rgba(255, 240, 214, 1) 50%, transparent 60% 100%) no-repeat;
  background-size: 34% 100%; background-position: -60% 0;
  opacity: 0;
}
.ws-head .mo-horizon { opacity: .3; height: 40px; background: linear-gradient(90deg, transparent, var(--bronze) 25%, var(--bronze) 75%, transparent); }
.ws-head .mo-horizon::after { display: none; }
.hero:not(.hero-workbench) > .wrap, .ev-hero > .wrap, .ph-about-hero > .ph-wrap, .ph-progress-hero > .ph-wrap, .tt-stage > .wrap, .ws-head > .wrap { position: relative; z-index: 1; }
.x-hero .mo-horizon { opacity: .3; height: clamp(40px, 6vw, 80px); }
.tt-stage .mo-horizon { opacity: .3; }
.ev-hero .mo-horizon, .ph-about-hero .mo-horizon, .ph-progress-hero .mo-horizon { opacity: .42; }

@media (prefers-reduced-motion: no-preference) {
  .mo-horizon { animation: mo-draw 1.9s var(--mo-ease) .25s both; }
  .mo-horizon::after { animation: mo-run 2.6s cubic-bezier(.45, 0, .2, 1) 1.7s both; }
  @keyframes mo-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes mo-run { 0% { opacity: 0; background-position: -60% 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; background-position: 160% 0; } }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .hero:not(.hero-workbench), .ev-hero, .ph-about-hero, .ph-progress-hero, .tt-stage, .x-hero { view-timeline: --mo-hero block; }
    .mo-horizon {
      animation: mo-draw 1.9s var(--mo-ease) .25s both, mo-lift linear both;
      animation-timeline: auto, --mo-hero;
      animation-range: normal, exit 0% exit 100%;
    }
    @keyframes mo-lift { to { translate: 0 -38px; opacity: 0; } }
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body[data-route]:not([data-route="try"]):not([data-route="workspace"]):not([data-route="explore"]):not([data-route="listen"]):not([data-route="archive"]):not([data-route="overview"])::before {
      content: ""; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 120; pointer-events: none;
      background: linear-gradient(90deg, rgba(211, 161, 90, .2), var(--mo-warm) 70%, #FFD8A0);
      transform-origin: 0 50%;
      animation: mo-playhead linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes mo-playhead { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

.hero:not(.hero-workbench) {
  padding: clamp(4.25rem, 9vw, 8rem) 0 clamp(5.5rem, 11vw, 9.5rem);
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(211, 161, 90, .13), transparent 62%),
    radial-gradient(60% 70% at 92% 100%, rgba(80, 120, 170, .08), transparent 70%),
    var(--surface-deep);
  overflow: hidden; isolation: isolate;
}
.hero:not(.hero-workbench) .wrap { max-width: var(--w-max); text-align: left; }
.hero:not(.hero-workbench) .label {
  display: flex; align-items: center; gap: .9rem; text-align: left;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-lit);
}
.hero:not(.hero-workbench) .label::before {
  content: ""; flex: none; width: 2.4rem; height: 1px;
  background: linear-gradient(90deg, #FFB35C, rgba(255, 179, 92, .2)); box-shadow: 0 0 8px rgba(255, 150, 70, .55);
  transform-origin: 0 50%;
}
.hero:not(.hero-workbench) h1 {
  margin: 1.1rem 0 1.3rem; max-width: 17ch; color: #F6F1E7;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1; letter-spacing: -.02em;
}
.hero:not(.hero-workbench) p.lede { margin: 0; max-width: 54ch; font-size: clamp(1.05rem, 1.5vw, 1.24rem); line-height: 1.6; color: var(--on-deep-soft); }
.hero:not(.hero-workbench) .actions { justify-content: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .hero:not(.hero-workbench) .label::before { animation: mo-rule 1.2s var(--mo-ease) .1s both; }
  @keyframes mo-rule { from { transform: scaleX(0); } }
  .hero:not(.hero-workbench) h1, .ev-display, .ph-about-hero h1, .tt-h, .x-hero h1 { animation: mo-settle 2.2s ease-out .15s both; }
  @keyframes mo-settle { from { text-shadow: 0 0 28px rgba(255, 176, 96, .55); } to { text-shadow: 0 0 0 transparent; } }
}

@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.band > .wrap > .label, .ev-sec-head > .ev-kicker, .ph-head > .ph-k):is(body[data-route]:not([data-route="overview"]) *)::after {
      content: ""; display: block; width: 2.2rem; height: 1px; margin-top: .45rem; background: var(--bronze);
      transform-origin: 0 50%;
      animation: mo-rule linear both; animation-timeline: view(); animation-range: entry 10% cover 30%;
    }
    :is(.band.deep > .wrap > .label, .ev-deep .ev-sec-head > .ev-kicker, .ph-dark .ph-head > .ph-k)::after { background: var(--bronze-lit); }
  }
}

@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    body[data-route] main :is(.ph-fig, .photo-figure, .pt-photo:not(.is-doc)) :is(picture, .mv-open) {
      animation: mo-open linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
    body[data-route] main .ph-fig:not(.is-whole) :is(picture, .mv-open) img {
      animation: mo-focus-in linear both; animation-timeline: view(); animation-range: entry 0% cover 50%;
    }
    @keyframes mo-open { from { clip-path: inset(9% 0 9% 0); } to { clip-path: inset(-12% -12% -12% -12%); } }
    @keyframes mo-focus-in { from { scale: 1.07; } to { scale: 1; } }

    body[data-route] main .ph-break .ph-fig:not(.is-whole) :is(picture, .mv-open) img {
      animation: mo-depth linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    @keyframes mo-depth { from { scale: 1.1; translate: 0 -3.5%; } to { scale: 1.1; translate: 0 3.5%; } }

    html.ph-js body[data-route] main [data-ph-reveal]:has(.ph-fig) { opacity: 1; transform: none; transition: none; }
  }
}

:is(.hero:not(.hero-workbench), .ev-deep, .band.deep, .ph-dark) + :is(.band:not(.deep), .ev-sec:not(.ev-deep), .ph-sec:not(.ph-dark)) {
  background-image: linear-gradient(180deg, rgba(7, 9, 13, .075), rgba(7, 9, 13, 0) 140px);
}
:is(.band:not(.deep), .ev-sec:not(.ev-deep), .ph-sec:not(.ph-dark)) + :is(.band.deep, .ev-deep:not(.ev-hero), .ph-dark) {
  box-shadow: inset 0 1px 0 rgba(211, 161, 90, .32);
}

main p, main li { text-wrap: pretty; }
main :is(td, .ev-stat-v, .ev-ledger-v, .pt-lead-v, .ph-tile-n) { font-variant-numeric: tabular-nums; }
main :is(p, li, dd) a:not([class]) {
  text-underline-offset: .2em;
  transition: text-decoration-color 180ms var(--mo-ease-ui), text-underline-offset 180ms var(--mo-ease-ui), color 180ms ease;
}
main :is(p, li, dd) a:not([class]):hover { text-underline-offset: .3em; text-decoration-color: var(--bronze); }
:is(.band.deep, .ev-deep, .ph-dark) :is(p, li, dd) a:not([class]):hover { text-decoration-color: var(--bronze-lit); }

:is([data-route="mission"], [data-route="for-language-programs"]) main .hero + .band > .wrap > h2 + p.lede::first-letter {
  float: left; margin: .06em .1em 0 0; font-family: var(--serif); font-size: 3.4em; line-height: .78; color: var(--bronze);
}

:is(.btn, .ph-btn, .ev-legend-btn, .film-gate-add) {
  transition: background-color 180ms var(--mo-ease-ui), color 180ms var(--mo-ease-ui), border-color 180ms var(--mo-ease-ui), box-shadow 260ms var(--mo-ease-ui), scale 120ms ease;
}
:is(.btn, .ph-btn, .ev-legend-btn, main button:not([role="tab"]):not([role="switch"]):not([class*="handle"])):active:not(:disabled) { scale: .975; }
:is(.btn, .ph-btn):hover:not(:disabled) { box-shadow: 0 12px 28px -18px rgba(138, 89, 28, .75); }
:is(.ph-btn, .ev-more a, .ls-hero-links a) span[aria-hidden="true"] { display: inline-block; transition: translate 220ms var(--mo-ease-ui); }
:is(.ph-btn, .ev-more a, .ls-hero-links a):hover span[aria-hidden="true"] { translate: 4px 0; }

:is(a, button, summary, input, select, textarea):focus-visible { transition: outline-offset 160ms var(--mo-ease-ui); }
@media (prefers-reduced-motion: no-preference) {
  :is(a, button, summary):focus-visible { animation: mo-ring 260ms var(--mo-ease-ui); }
  @keyframes mo-ring { from { outline-offset: 6px; } }
}

main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  transition: border-color 180ms var(--mo-ease-ui), box-shadow 220ms var(--mo-ease-ui);
}
main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus { box-shadow: 0 0 0 4px rgba(211, 161, 90, .2); }

:is(.ev-chapter, .ph-tile, .card, .pt-ix-i) {
  transition: translate 260ms var(--mo-ease-ui), box-shadow 300ms var(--mo-ease-ui), border-color 200ms ease;
}
:is(a.ev-chapter, a.card, .ph-tile:has(a), .pt-ix-i:has(a)):hover {
  translate: 0 -3px; box-shadow: 0 18px 38px -26px rgba(7, 9, 13, .55);
  background-image: radial-gradient(120% 90% at 30% 0%, rgba(211, 161, 90, .11), transparent 60%);
}

main tbody tr { transition: background-color 140ms ease; }
main tbody tr:hover { background-color: rgba(211, 161, 90, .08); }

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    body[data-route]:not([data-route="try"]):not([data-route="workspace"]):not([data-route="explore"]):not([data-route="listen"]):not([data-route="archive"]) main details { interpolate-size: allow-keywords; }
    body[data-route]:not([data-route="try"]):not([data-route="workspace"]):not([data-route="explore"]):not([data-route="listen"]):not([data-route="archive"]) main details::details-content {
      block-size: 0; overflow-y: clip;
      transition: block-size 360ms var(--mo-ease), content-visibility 360ms allow-discrete;
    }
    body[data-route]:not([data-route="try"]):not([data-route="workspace"]):not([data-route="explore"]):not([data-route="listen"]):not([data-route="archive"]) main details[open]::details-content { block-size: auto; }
  }
}
main summary { transition: color 160ms ease; }
main summary:hover { color: var(--bronze); }
:is(.band.deep, .ev-deep, .ph-dark) summary:hover { color: var(--bronze-lit); }

@media (prefers-reduced-motion: no-preference) {
  .mo-flash { animation: mo-flash 760ms ease-out; }
  @keyframes mo-flash { from { box-shadow: 0 0 0 2px rgba(211, 161, 90, .6), 0 0 26px rgba(255, 170, 90, .35); } to { box-shadow: 0 0 0 2px rgba(211, 161, 90, 0), 0 0 26px rgba(255, 170, 90, 0); } }
}


@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    [data-route="roadmap"] main .roadmap { position: relative; view-timeline: --mo-road block; }
    [data-route="roadmap"] main .roadmap::before {
      content: ""; position: absolute; left: -1.1rem; top: 0; bottom: 0; width: 1px;
      background: linear-gradient(180deg, var(--bronze), rgba(138, 89, 28, .15));
      transform-origin: 50% 0; animation: mo-grow-y linear both; animation-timeline: --mo-road; animation-range: entry 20% cover 70%;
    }
    @keyframes mo-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

[data-route="progress"] main .ph-res-grid.is-four { max-width: none; margin-top: clamp(28px, 4vw, 56px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { [data-route="progress"] main .ph-res-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { [data-route="progress"] main .ph-res-grid.is-four { grid-template-columns: minmax(0, 1fr); } }

[data-route="governance"] main .permission { transition: background-color 240ms ease, border-color 240ms ease; }

:is([data-route="sources"], [data-route="resources"]) main :is(.source, .entry) { position: relative; }
:is([data-route="sources"], [data-route="resources"]) main :is(.source, .entry)::before {
  content: ""; position: absolute; left: -.9rem; top: .35rem; bottom: .35rem; width: 2px; background: var(--bronze);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 240ms var(--mo-ease-ui);
}
:is([data-route="sources"], [data-route="resources"]) main :is(.source, .entry):is(:hover, :target)::before { transform: scaleY(1); }

[data-route="contact"] main .contact-address a { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: -.01em; text-underline-offset: .18em; }

@media (prefers-reduced-motion: no-preference) {
  [data-route="workspace"] .ws-drop.is-over .ws-drop-glyph { animation: mo-bob 760ms ease-in-out infinite alternate; }
  @keyframes mo-bob { to { translate: 0 3px; } }
}

@media (prefers-reduced-motion: reduce) {
  .mo-horizon::after { display: none; }
}
@media (forced-colors: active) {
  .mo-horizon { display: none; }
}
@media print {
  .mo-horizon, body[data-route]::before { display: none !important; }
}