/* AUNM · Star Knowledge v2 · scoped under .sk2 (pairs with star-knowledge-v2.js; the bridge uses sk2-ambient.css) */
.sk2 {
  --sk2-ease: cubic-bezier(.2, .7, .1, 1);            /* TEB easing */
  --sk2-night: #050b16; --sk2-navy: #0e1d33;
  --sk2-gold: var(--aunm-gold-300, #d6b273); --sk2-cream: var(--aunm-gold-100, #f2e0b8);
  --sk2-text: #eef0f4; --sk2-soft: var(--aunm-slate-100, #c9cfd9); --sk2-meta: var(--aunm-slate-300, #9aa6b8);
  --sk2-serif: var(--serif, "Newsreader", "Iowan Old Style", Georgia, serif);
  --sk2-sans: var(--sans, "Public Sans", "Helvetica Neue", Arial, sans-serif);
  --sk2-gutter: var(--gutter, clamp(16px, 4vw, 64px));
  position: relative; background: var(--sk2-night); color: var(--sk2-text); font-family: var(--sk2-sans);
}
.sk2 *, .sk2 *::before, .sk2 *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- pinned stage */
.sk2-scroller { position: relative; }
html.js .sk2-scroller { height: 560vh; }                      /* fixed up front: no layout shift on lazy init */
@media (max-width: 700px) { html.js .sk2-scroller { height: 470vh; } }
.sk2-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden;
  background: radial-gradient(120% 90% at 65% 110%, #12233d 0, #08121f 55%, var(--sk2-night) 100%); contain: layout paint; }
.sk2-view { position: absolute; inset: 0; overflow: hidden; }
.sk2-gl, .sk2-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk2-fx { pointer-events: none; }
.sk2-stage.is-hot { cursor: pointer; }

/* dome photo: no-JS = a plain cover image; live = positioned by JS so the figures land exactly on the mosaic */
.sk2-dome { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 40%; display: block; }
.sk2.is-live .sk2-dome { inset: auto; left: 0; top: 0; width: 2400px; height: 1339px; max-width: none; object-fit: fill;
  transform-origin: 0 0; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.sk2.is-pin .sk2-dome { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%); mask-image: linear-gradient(to bottom, transparent 0, #000 28%); }

.sk2-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,11,22,.78) 0, rgba(5,11,22,.42) 30%, rgba(5,11,22,0) 54%);
  transition: opacity 1.2s var(--sk2-ease); opacity: .55; }
.sk2.is-dome .sk2-scrim { opacity: 1; }

/* ---------------------------------------------------------------- chapters (typography reveals) */
.sk2-chs { position: absolute; left: var(--sk2-gutter); top: 50%; transform: translateY(-46%); width: min(36vw, 500px);
  display: grid; align-items: center; }
.sk2-ch { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.sk2-ch.is-on { opacity: 1; pointer-events: auto; transition: opacity .2s ease; }
.sk2-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font: 600 11.5px/1.2 var(--sk2-sans);
  letter-spacing: .3em; text-transform: uppercase; color: var(--sk2-gold); }
.sk2-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--sk2-ease) .1s; }
.sk2-ch.is-on .sk2-eyebrow::before { transform: scaleX(1); }
.sk2-h { margin: 0; font-family: var(--sk2-serif); font-weight: 300; font-size: clamp(2.5rem, 1.3rem + 3.5vw, 4.9rem);
  line-height: 1.02; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.sk2-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin-bottom: -.1em; }
.sk2-w > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 0s linear .5s; }
.sk2-ch.is-on .sk2-w > span { transform: none; transition: transform 1.25s var(--sk2-ease) calc(var(--i) * 60ms + 80ms); }
.sk2-lede { margin: 24px 0 0; max-width: 28em; font-family: var(--sk2-serif); font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.15rem + .35vw, 23px); line-height: 1.42; color: var(--sk2-cream); text-wrap: pretty; }
.sk2-lede, .sk2-more { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .4s ease, transform 0s .5s; }
.sk2-ch.is-on .sk2-lede { opacity: 1; transform: none; transition: opacity 1.1s var(--sk2-ease) .45s, transform 1.2s var(--sk2-ease) .45s; }
.sk2-ch.is-on .sk2-more { opacity: 1; transform: none; transition: opacity 1s var(--sk2-ease) .7s, transform 1.1s var(--sk2-ease) .7s; }
.sk2-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--sk2-text); font: 600 12px/1 var(--sk2-sans); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; }
.sk2-more::before { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(214,178,115,.55);
  border-radius: 50%; color: var(--sk2-gold); font: 300 18px/1 var(--sk2-sans); letter-spacing: 0; transition: transform .6s var(--sk2-ease), background .3s; }
.sk2-more:hover::before, .sk2-more[aria-expanded="true"]::before { transform: rotate(45deg); background: rgba(214,178,115,.14); }
.sk2-more:focus-visible, .sk2-rail button:focus-visible, .sk2-story-x:focus-visible { outline: 1px solid var(--sk2-gold); outline-offset: 5px; }

/* intro hint */
.sk2-hint { position: absolute; left: 50%; bottom: 26px; margin: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px;
  font: 600 10.5px/1 var(--sk2-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--sk2-meta);
  opacity: calc(1 - var(--p, 0) * 14); pointer-events: none; }
.sk2-hint::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--sk2-gold), transparent);
  transform-origin: 50% 0; animation: sk2-cue 2.4s var(--sk2-ease) infinite; }
@keyframes sk2-cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* caption under the figure in focus (positioned by JS) */
.sk2-cap { position: absolute; left: 0; top: 0; margin: 0; max-width: min(78vw, 440px); text-align: center; pointer-events: none;
  font: 600 10.5px/1.6 var(--sk2-sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(242,224,184,.82);
  opacity: 0; transition: opacity .8s var(--sk2-ease); }
.sk2-cap.is-on { opacity: 1; }

/* chapter rail + progress */
.sk2-rail { position: absolute; right: var(--sk2-gutter); top: 50%; transform: translateY(-50%); }
.sk2-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; justify-items: end; }
.sk2-rail li { width: 100%; }
.sk2-rail ol::before, .sk2-rail ol::after { content: ""; position: absolute; right: 21px; top: 22px; bottom: 22px; width: 1px; background: rgba(255,255,255,.14); }
.sk2-rail ol::after { background: var(--sk2-gold); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.sk2-rail button { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 44px; padding: 0 16px 0 0; border: 0; background: none; cursor: pointer;
  color: var(--sk2-meta); font: 600 10.5px/1 var(--sk2-sans); letter-spacing: .24em; text-transform: uppercase; position: relative; }
.sk2-rail button span { opacity: 0; transform: translateX(6px); transition: opacity .5s var(--sk2-ease), transform .6s var(--sk2-ease); }
.sk2-rail button::after { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: var(--sk2-night);
  position: relative; z-index: 1; transition: transform .6s var(--sk2-ease), background .4s, border-color .4s; }
.sk2-rail button:hover span, .sk2-rail button[aria-current] span { opacity: 1; transform: none; }
.sk2-rail button[aria-current] { color: var(--sk2-cream); }
.sk2-rail button[aria-current]::after { background: var(--sk2-gold); border-color: var(--sk2-gold); transform: scale(1.25); box-shadow: 0 0 14px rgba(214,178,115,.6); }

/* story card */
.sk2-story { position: absolute; left: 0; top: 0; width: min(360px, calc(100% - 32px)); padding: 26px 26px 22px; z-index: 3;
  background: rgba(7, 15, 28, .9); border: 1px solid rgba(214,178,115,.28); box-shadow: 0 30px 80px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: opacity .4s ease, clip-path .6s var(--sk2-ease), visibility 0s .6s; }
.sk2-story.is-open { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition: opacity .5s ease, clip-path .9s var(--sk2-ease), visibility 0s; }
.sk2-story-k { margin: 0 0 12px; font: 600 10.5px/1 var(--sk2-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--sk2-gold); }
.sk2-story-t { margin: 0; font: 400 26px/1.12 var(--sk2-serif); color: #fff; padding-right: 30px; }
.sk2-story-n { margin: 6px 0 0; font: italic 300 18px/1.3 var(--sk2-serif); color: var(--sk2-cream); }
.sk2-story-b { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--sk2-soft); }
.sk2-story-r { margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed rgba(214,178,115,.3); font-size: 11.5px; letter-spacing: .04em; color: var(--sk2-meta); }
.sk2-story-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: none; color: var(--sk2-soft); cursor: pointer; font: 300 24px/1 var(--sk2-sans); }

/* portrait / phone: figure above, copy at the bottom */
@media (max-width: 700px), (max-aspect-ratio: 9/10) {
  .sk2-chs { left: var(--sk2-gutter); right: var(--sk2-gutter); top: auto; bottom: max(30px, env(safe-area-inset-bottom)); transform: none; width: auto; align-items: end; }
  .sk2-h { font-size: clamp(2.1rem, 1.2rem + 4.4vw, 3.4rem); }
  .sk2-lede { margin-top: 16px; font-size: 17px; }
  .sk2-more { margin-top: 14px; }
  .sk2-eyebrow { margin-bottom: 14px; }
  .sk2-scrim { background: linear-gradient(0deg, rgba(5,11,22,.92) 0, rgba(5,11,22,.6) 32%, rgba(5,11,22,0) 56%); opacity: 1; }
  .sk2-rail { top: auto; bottom: auto; top: 50%; right: 4px; }
  .sk2-rail button span { display: none; }
  .sk2-rail button { padding-right: 12px; }
  .sk2-rail ol::before, .sk2-rail ol::after { right: 16px; }
  .sk2-story { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; transform: none !important; }
  .sk2-hint { display: none; }
}

/* QA screenshots: no transitions */
.sk2.is-shot *, .sk2.is-shot *::before, .sk2.is-shot *::after { transition: none !important; animation: none !important; }

/* ---------------------------------------------------------------- reduced motion: a still sky + all copy */
@media (prefers-reduced-motion: reduce) {
  html.js .sk2-scroller { height: auto; }
  .sk2-stage { position: relative; height: auto; min-height: 0; overflow: visible; contain: none; padding-bottom: clamp(64px, 9vw, 120px); }
  .sk2-view { position: relative; height: min(88svh, 62vw); min-height: 420px; }
  .sk2-chs { position: relative; inset: auto; transform: none; width: auto; padding: clamp(56px, 8vw, 110px) var(--sk2-gutter) 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 44px clamp(32px, 4vw, 64px); max-width: 1320px; margin: 0 auto; }
  .sk2-ch, .sk2-ch.is-on { grid-area: auto; opacity: 1; pointer-events: auto; }
  .sk2-h { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); }
  .sk2-w > span, .sk2-lede, .sk2-more { transform: none !important; opacity: 1 !important; transition: none !important; }
  .sk2-eyebrow::before { transform: none; transition: none; }
  .sk2-hint, .sk2-rail, .sk2-cap { display: none; }
  .sk2-scrim { opacity: 1; background: linear-gradient(0deg, rgba(5,11,22,.6), rgba(5,11,22,0) 40%); }
  .sk2-story { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) !important; transition: none; clip-path: none; }
}

/* ---------------------------------------------------------------- Hall of Explorers bridge + close */
.sk2-wrap { width: min(100% - 2 * var(--sk2-gutter), 1240px); margin: 0 auto; }
.sk2-bridge { background: linear-gradient(180deg, var(--sk2-night) 0, var(--sk2-navy) 280px); padding: clamp(100px, 14vw, 190px) 0 clamp(80px, 10vw, 140px); }
.sk2-bridge .sk2-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.sk2-bridge .sk2-h { font-size: clamp(2.3rem, 1.3rem + 3vw, 4.2rem); }
.sk2-bridge .sk2-lede { opacity: 1; transform: none; }
.sk2-pull { margin: 44px 0 0; padding: 0 0 0 24px; border-left: 1px solid rgba(214,178,115,.45); }
.sk2-pull p { margin: 0; font: italic 300 clamp(21px, 1.2rem + .6vw, 27px)/1.35 var(--sk2-serif); color: #fff; }
.sk2-pull cite { display: block; margin-top: 16px; font: 600 11px/1.4 var(--sk2-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--sk2-gold); }
.sk2-pull small { display: block; margin-top: 8px; font-size: 14.5px; color: var(--sk2-meta); }
.sk2-explorers { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.sk2-explorers li { display: grid; grid-template-columns: 6.6em 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.sk2-x-k { font: 300 clamp(20px, 1.1rem + .5vw, 26px)/1.1 var(--sk2-serif); color: var(--sk2-gold); font-variant-numeric: lining-nums; }
.sk2-x-n { margin: 0; font: 400 clamp(19px, 1.05rem + .4vw, 23px)/1.2 var(--sk2-serif); color: #fff; }
.sk2-x-t { margin: 6px 0 0; font: 600 11px/1.4 var(--sk2-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sk2-meta); }
.sk2-x-d { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--sk2-soft); }
.sk2-close { background: var(--sk2-navy); padding: 0 0 clamp(90px, 12vw, 160px); text-align: center; }
.sk2-close blockquote { margin: 0; }
.sk2-close p { margin: 0; font: 300 clamp(34px, 1.6rem + 3vw, 64px)/1.05 var(--sk2-serif); color: #fff; }
.sk2-close p span { display: block; margin-top: 12px; font-style: italic; font-size: .42em; color: var(--sk2-cream); }
.sk2-close cite { display: block; margin-top: 18px; font: 600 11px/1 var(--sk2-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--sk2-gold); font-style: normal; }
.sk2-close .sk2-star { display: block; width: 9px; height: 9px; margin: 0 auto 30px; background: var(--sk2-gold); transform: rotate(45deg); box-shadow: 0 0 22px rgba(214,178,115,.7); }
/* simple reveal for the bridge (IntersectionObserver in the main JS is not needed: CSS scroll-driven where supported) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sk2-rv { animation: sk2-rv linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes sk2-rv { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
  }
}
@media (max-width: 860px) { .sk2-bridge .sk2-wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .sk2-explorers li { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 700px) { .sk2.is-dome .sk2-rail { opacity: .45; transition: opacity .8s var(--sk2-ease); } }