/* MCRO Get involved: night-sea scenes (2026-10-04): a design lift, vibrant and active, like the home page.
   Loaded only on get-involved.html, BEFORE site.css, so every rule starts with .page-gi to win.
   Blue = ocean and night; yellow = the light only. Motion runs only on the screen in view (gi.js adds .is-live). */

.page-gi, .page-gi main { background: var(--night); }

/* ---------------------------------------------------------------- shared night pieces */
.page-gi .gi-bg { position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; z-index: -1; overflow: hidden; pointer-events: none; }
.page-gi.gi-ready .gi-scene .gi-bg { left: calc(-1 * var(--secx, 0px)); right: auto; width: 100vw; }   /* lined up with the screen, not the column */
.page-gi .gi-hero .gi-bg { inset: 0; width: auto; }

.page-gi .gi-stars, .page-gi .gi-stars::after { position: absolute; inset: 0; background-image:
  radial-gradient(1px 1px at 11% 22%, rgba(255,255,255,.75) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 31% 9%, rgba(255,255,255,.85) 50%, transparent 51%),
  radial-gradient(1px 1px at 47% 30%, rgba(255,255,255,.55) 50%, transparent 51%), radial-gradient(1px 1px at 62% 14%, rgba(255,255,255,.65) 50%, transparent 51%),
  radial-gradient(1.3px 1.3px at 76% 56%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 89% 8%, rgba(255,255,255,.55) 50%, transparent 51%),
  radial-gradient(1px 1px at 22% 70%, rgba(255,255,255,.4) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 94% 86%, rgba(255,255,255,.5) 50%, transparent 51%),
  radial-gradient(1.6px 1.6px at 56% 78%, rgba(255,226,160,.8) 50%, transparent 51%);
  background-size: 520px 420px; animation: gi-twinkle 6s ease-in-out infinite alternate; }
.page-gi .gi-stars::after { content: ""; background-size: 330px 290px; background-position: 140px 70px; opacity: .65; animation-delay: -3s; }
@keyframes gi-twinkle { from { opacity: .35; } to { opacity: 1; } }

.page-gi .gi-spot { position: absolute; inset: 0; background: radial-gradient(560px circle at var(--mx, 72%) var(--my, 45%), rgba(251, 181, 42, .11), rgba(251, 181, 42, .035) 42%, transparent 70%); }

.page-gi .gi-current { position: absolute; right: -6%; top: 4%; width: 58%; height: 88%; fill: var(--pale); opacity: .55; animation: drift 46s ease-in-out infinite alternate; }
.page-gi .gi-scene--sponsors .gi-current--dark { opacity: .14; }
.page-gi .gi-current--dark { fill: var(--sea-2); opacity: .28; left: -8%; right: auto; top: 10%; animation-duration: 38s; }

.page-gi .gi-motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.page-gi .gi-motes i { position: absolute; left: var(--x); bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--light-soft); box-shadow: 0 0 6px 2px rgba(251, 181, 42, .6); opacity: 0; animation: gi-rise var(--d) linear var(--dl) infinite; }
@keyframes gi-rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .95; } 50% { transform: translate(14px, calc(var(--rise) * -.5)); } 85% { opacity: .5; } 100% { transform: translate(-10px, calc(var(--rise) * -1)); opacity: 0; } }

/* only the screen in view moves (and it starts fresh each time you flip to it) */
.page-gi.gi-ready .gi-scene:not(.is-live) *, .page-gi.gi-ready .gi-hero:not(.is-live) * { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- neon icons (the Home Join us drawings) */
.page-gi .gi-ico { position: relative; display: inline-block; flex: none; width: 4rem; height: 4rem; color: var(--light);
  filter: drop-shadow(0 0 2px rgba(251, 181, 42, .95)) drop-shadow(0 0 10px rgba(251, 181, 42, .55)) drop-shadow(0 0 30px rgba(251, 181, 42, .3)); }
.page-gi .gi-ico svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.page-gi .gi-ico .gi-core { stroke: #fff6dc; stroke-width: .7; }
.page-gi .gi-ico g, .page-gi .gi-ico path { transform-box: view-box; }
.page-gi .gi-ico .wi-dot { fill: currentColor; stroke: none; } .page-gi .gi-ico .gi-core .wi-dot { fill: #fff6dc; }
.page-gi .gi-ico--big { position: relative; z-index: 3; width: 62%; height: 62%; }
.page-gi .gi-ico--big svg { stroke-width: 1.2; } .page-gi .gi-ico--big .gi-core { stroke-width: .4; }
.page-gi .is-live .gi-ico--big { animation: gi-flicker 1.3s linear both; }
@keyframes gi-flicker { 0% { opacity: 0; } 8% { opacity: .9; } 12% { opacity: .15; } 22% { opacity: 1; } 26% { opacity: .35; } 34%, 100% { opacity: 1; } }

/* ---------------------------------------------------------------- hero */
.page-gi .gi-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem;
  padding-inline: calc(max(0px, (100vw - 1320px) / 2) + var(--gutter));
  background: radial-gradient(70% 95% at 78% 52%, #0e3478 0%, var(--night) 55%, var(--abyss) 100%); }
@media (min-width: 1101px) { .page-gi .gi-hero { min-height: calc(100vh - var(--header-h)); padding-block: 3rem; } }
.page-gi .gi-hero .phero__inner { z-index: 2; margin: 0; max-width: none; }
.page-gi .gi-hero .phero__title { max-width: none; font-size: clamp(4rem, 10vw, 9.6rem); }   /* no glow here: each word is clipped for the rise, so a glow shows as a box */
.page-gi .gi-hero .phero__current { opacity: .24; z-index: 0; }

.page-gi .gi-jump { gap: .7rem; margin-top: 2.6rem; }
.page-gi .gi-jump a { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem 1.15rem .55rem .65rem; border: 1px solid rgba(219, 232, 242, .22); background: rgba(5, 16, 45, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: .8rem; color: var(--paper); transition: border-color .25s, box-shadow .25s, color .25s, transform .3s var(--ease-spring); }
.page-gi .gi-jump a:hover, .page-gi .gi-jump a:focus-visible { border-color: var(--light); color: var(--light); box-shadow: 0 0 24px rgba(251, 181, 42, .35); transform: translateY(-2px); }
.page-gi .gi-ico--chip { width: 1.75rem; height: 1.75rem; } .page-gi .gi-ico--chip svg { stroke-width: 2.6; } .page-gi .gi-ico--chip .gi-core { display: none; }

.page-gi .gi-orbit { --o: min(34rem, 38vw); position: relative; z-index: 1; width: var(--o); aspect-ratio: 1; translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -16px); transition: translate .8s var(--ease); }
.page-gi .gi-orbit__beam { position: absolute; left: 50%; top: 50%; width: 300vmax; height: 300vmax; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; animation: gi-turn 9s linear infinite; }   /* 2026-10-04: no flat edge; the field is wider than the hero, the angle turns, the hero clips it */
.page-gi .gi-orbit__beam::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from var(--gi-turn) at 50% 50%, transparent 0deg, rgba(251,181,42,.03) 80deg, rgba(251,181,42,.2) 90deg, rgba(251,181,42,.03) 100deg, transparent 106deg, transparent 254deg, rgba(251,181,42,.025) 260deg, rgba(251,181,42,.15) 270deg, rgba(251,181,42,.025) 280deg, transparent 286deg); }
@property --gi-turn { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes gi-turn { to { --gi-turn: 360deg; } }
.page-gi .gi-orbit__ring { position: absolute; inset: 11%; border-radius: 50%; border: 1px solid rgba(219, 232, 242, .18); }
.page-gi .gi-orbit__ring--2 { inset: 30%; border: 1px dashed rgba(251, 181, 42, .35); animation: gi-spin 70s linear infinite reverse; }
.page-gi .gi-orbit__core { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; margin: -7.5%; border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0%, var(--light) 34%, rgba(251, 181, 42, .25) 60%, transparent 72%);
  box-shadow: 0 0 60px 18px rgba(251, 181, 42, .35), 0 0 170px 70px rgba(251, 181, 42, .12); animation: gi-core 3.5s ease-in-out infinite; }
@keyframes gi-core { 0%, 100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
.page-gi .gi-orbit__spin { position: absolute; inset: 11%; animation: gi-spin 54s linear infinite; }
.page-gi .gi-orbit__item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(calc(var(--o) * .39)) rotate(calc(-1 * var(--a))); }
.page-gi .gi-orbit__item::before { content: ""; position: absolute; width: calc(var(--o) * .22); height: calc(var(--o) * .22); left: calc(var(--o) * -.11); top: calc(var(--o) * -.11); border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(16, 58, 128, .96), rgba(5, 16, 45, .94)); border: 1px solid rgba(251, 181, 42, .4); box-shadow: 0 0 32px rgba(251, 181, 42, .2), inset 0 0 20px rgba(251, 181, 42, .08); animation: gi-spin 54s linear infinite reverse; }
.page-gi .gi-orbit__item .gi-ico { position: absolute; width: calc(var(--o) * .13); height: calc(var(--o) * .13); left: calc(var(--o) * -.065); top: calc(var(--o) * -.065); animation: gi-spin 54s linear infinite reverse; }
@keyframes gi-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- the scenes */
.page-gi .longform .gi-scene--dark { --tone: radial-gradient(110% 90% at 75% 50%, #0c2c66 0%, var(--night) 55%, var(--abyss) 100%); color: var(--paper); }
.page-gi .longform .gi-scene--sponsors { --tone: linear-gradient(180deg, var(--abyss) 0%, var(--night) 50%, var(--abyss) 100%); }
.page-gi .longform .gi-scene--vol { --tone: linear-gradient(180deg, var(--night) 0%, var(--sea) 60%, var(--navy) 100%); }
.page-gi .longform .gi-scene--tell { --tone: radial-gradient(90% 80% at 70% 60%, #0e3478 0%, var(--night) 58%, var(--abyss) 100%); }
.page-gi .longform .gi-scene--partner { --tone: var(--paper); }
.page-gi .longform .gi-scene--follow { --tone: var(--cream); }

.page-gi .longform .sec__head { padding-top: 0; }
.page-gi .gi-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-gi .gi-scene--wide .gi-inner, .page-gi .gi-scene--tell .gi-inner { grid-template-columns: minmax(0, 1fr); }
.page-gi .gi-copy { position: relative; z-index: 2; display: grid; gap: 1.4rem; }
.page-gi .gi-scene--dark .sec__title { font-size: clamp(3rem, 6vw, 5.6rem); color: var(--paper); text-shadow: 0 0 50px rgba(251, 181, 42, .14); }
.page-gi .gi-scene--light .sec__title { font-size: clamp(3rem, 6vw, 5.6rem); color: var(--ink); }
.page-gi .gi-scene--wide .sec__title { max-width: 16ch; }
.page-gi .gi-lead { margin: 0; font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.35; color: var(--paper); }
.page-gi .gi-scene--dark .sec__body { color: #c7d6e4; }

.page-gi .gi-art { position: relative; z-index: 1; display: grid; place-items: center; width: min(30rem, 34vw); aspect-ratio: 1; margin-inline: auto;
  translate: calc(var(--px, 0) * 18px) calc(var(--py, 0) * 14px); transition: translate .8s var(--ease), opacity .9s var(--ease), transform 1s var(--ease); }
.page-gi .gi-art.reveal { transform: scale(.92); }
.page-gi .gi-art.reveal.is-in { transform: none; }
.page-gi .gi-pool { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(251, 181, 42, .3), rgba(251, 181, 42, .08) 45%, transparent 70%); filter: blur(12px); animation: gi-breathe 5s ease-in-out infinite; }
@keyframes gi-breathe { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }

/* 01 fund: rings of light keep leaving the heart */
.page-gi .gi-pulse { position: absolute; inset: 20%; border-radius: 50%; border: 1.5px solid rgba(251, 181, 42, .6); box-shadow: 0 0 20px rgba(251, 181, 42, .35), inset 0 0 20px rgba(251, 181, 42, .2); opacity: 0; animation: gi-pulse 4.5s var(--ease) calc(var(--k, 0) * 1.5s) infinite; }
@keyframes gi-pulse { 0% { transform: scale(.5); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.page-gi .gi-art--fund .gi-motes { inset: 10% 15% 18%; }

/* 02 partner + 05 follow: a round window onto the night, set into the light page */
.page-gi .gi-port { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 42%, #10397e 0%, var(--night) 62%, var(--abyss) 100%);
  box-shadow: 0 0 0 12px rgba(8, 51, 125, .06), 0 0 0 1px rgba(8, 51, 125, .16), 0 60px 100px -45px rgba(6, 38, 94, .7), inset 0 0 70px rgba(0, 0, 0, .5); }
.page-gi .gi-port::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 1px solid rgba(251, 181, 42, .22); pointer-events: none; }
.page-gi .gi-port .gi-stars { background-size: 260px 240px; }
.page-gi .gi-art--partner .gi-ico svg:first-child path { fill: rgba(7, 26, 66, .92); }   /* the wire runs behind the pieces */
.page-gi .gi-wire { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; fill: none; stroke: var(--light); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(251, 181, 42, .9)); stroke-dasharray: 100; stroke-dashoffset: 100; animation: gi-wire 3.6s var(--ease) infinite; }
@keyframes gi-wire { 0% { stroke-dashoffset: 100; opacity: .9; } 35%, 78% { stroke-dashoffset: 0; opacity: .9; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.page-gi .gi-node { position: absolute; z-index: 2; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--light); box-shadow: 0 0 0 5px rgba(251, 181, 42, .16), 0 0 20px rgba(251, 181, 42, .95); animation: gi-node 3.6s ease-in-out infinite; }
.page-gi .gi-node--a { left: 15%; top: 70%; } .page-gi .gi-node--b { left: 85%; top: 30%; animation-delay: -1.3s; }
@keyframes gi-node { 0%, 100% { transform: scale(.8); } 35% { transform: scale(1.35); } }
.page-gi .gi-grid { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle closest-side, transparent 0 calc(20% - 1px), rgba(219, 232, 242, .13) calc(20% - 1px) 20%),
    linear-gradient(transparent calc(50% - .5px), rgba(219, 232, 242, .13) 0 calc(50% + .5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(219, 232, 242, .13) 0 calc(50% + .5px), transparent 0); }
.page-gi .gi-radar { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, transparent 280deg, rgba(251, 181, 42, .18) 352deg, rgba(255, 220, 140, .42) 360deg); animation: gi-spin 5s linear infinite; }
.page-gi .gi-blip { position: absolute; z-index: 2; left: var(--bx); top: var(--by); width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--light-soft); box-shadow: 0 0 14px 4px rgba(251, 181, 42, .7); opacity: 0; animation: gi-blip 5s linear var(--bd) infinite; }
@keyframes gi-blip { 0% { opacity: 1; transform: scale(1.4); } 55% { opacity: .15; transform: scale(1); } 100% { opacity: 0; } }

/* 03 champions: two rows of lit plaques gliding opposite ways */
.page-gi .gi-marquees { position: relative; width: 100vw; margin: 1.6rem 0 0 calc(-1 * var(--secx, 0px)); display: grid; gap: 1.1rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.page-gi .gi-marquee { overflow: hidden; }
.page-gi .gi-track { display: flex; width: max-content; animation: gi-marq 42s linear infinite; }
.page-gi .gi-marquee--rev .gi-track { animation-duration: 52s; animation-direction: reverse; }
.page-gi .gi-marquees:hover .gi-track { animation-play-state: paused; }
.page-gi .gi-set { display: flex; flex-shrink: 0; min-width: 100vw; justify-content: space-around; box-sizing: border-box; gap: 1.1rem; padding-right: 1.1rem; }
@keyframes gi-marq { to { transform: translateX(-50%); } }
.page-gi .gi-plaque { display: inline-flex; align-items: center; gap: .9rem; padding: 1.15rem 1.9rem 1.05rem 1.4rem; border: 1px solid rgba(219, 232, 242, .16); border-radius: 999px; background: rgba(11, 55, 121, .32);
  font: 600 clamp(1.5rem, 2.3vw, 2.15rem)/1 var(--font-display); letter-spacing: .01em; color: var(--paper); white-space: nowrap; transition: border-color .3s, box-shadow .3s, color .3s; }
.page-gi .gi-marquee--rev .gi-plaque { background: transparent; color: var(--pale); }
.page-gi .gi-plaque:hover { border-color: rgba(251, 181, 42, .75); color: var(--light); box-shadow: 0 0 26px rgba(251, 181, 42, .35); }
.page-gi .gi-plaque svg { width: 1.05rem; height: 1.05rem; fill: var(--light); filter: drop-shadow(0 0 6px rgba(251, 181, 42, .9)); }
.page-gi .gi-sweep { position: absolute; top: -30%; bottom: -30%; left: 0; width: 26vw; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(251, 181, 42, .1) 38%, rgba(255, 228, 170, .22) 50%, rgba(251, 181, 42, .1) 62%, transparent);
  transform: translateX(-30vw) skewX(-18deg); animation: gi-sweep 7s var(--ease) infinite; }
@keyframes gi-sweep { 0% { transform: translateX(-30vw) skewX(-18deg); } 60%, 100% { transform: translateX(110vw) skewX(-18deg); } }

/* 04 volunteer: slow rings and a small circling light */
.page-gi .gi-dash { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(251, 181, 42, .6); stroke-width: 1; stroke-dasharray: 1.5 7; stroke-linecap: round; animation: gi-spin 40s linear infinite; }
.page-gi .gi-dash--2 { stroke: rgba(219, 232, 242, .35); stroke-dasharray: 14 10; animation-duration: 26s; animation-direction: reverse; }
.page-gi .gi-sat { position: absolute; inset: 2%; animation: gi-spin 9s linear infinite; }
.page-gi .gi-sat i { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff6dc; box-shadow: 0 0 0 4px rgba(251, 181, 42, .2), 0 0 22px 6px rgba(251, 181, 42, .8); }
.page-gi .gi-soon { margin: 0; font: 600 clamp(2.2rem, 3.6vw, 3.2rem)/1 var(--font-display); color: var(--light); text-shadow: 0 0 22px rgba(251, 181, 42, .55); animation: gi-glow 3.2s ease-in-out infinite; }
@keyframes gi-glow { 0%, 100% { text-shadow: 0 0 14px rgba(251, 181, 42, .35); } 50% { text-shadow: 0 0 30px rgba(251, 181, 42, .8); } }

/* 06 get in touch: glass card, a light running round its edge */
.page-gi .gi-scene--tell .gi-copy { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.page-gi .gi-mini { display: flex; gap: 1.1rem; margin-top: 2.2rem; }
.page-gi .gi-ico--mini { width: 2.6rem; height: 2.6rem; } .page-gi .gi-ico--mini .gi-core { display: none; }
.page-gi .gi-scene--tell .sec__body { position: relative; }
.page-gi .gi-scene--tell .sec__body::before { content: ""; position: absolute; inset: -12%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(251, 181, 42, .12), transparent); pointer-events: none; }
.page-gi .gi-scene--tell .form { position: relative; max-width: none; padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: 18px; background: rgba(5, 16, 45, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .85); isolation: isolate; }
.page-gi .gi-scene--tell .form::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--gi-ang), rgba(219, 232, 242, .14) 0deg, rgba(251, 181, 42, .95) 36deg, rgba(219, 232, 242, .14) 80deg, rgba(219, 232, 242, .14) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: gi-ang 6s linear infinite; }
@property --gi-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gi-ang { to { --gi-ang: 360deg; } }
.page-gi .gi-scene--tell input[type="file"] { color: var(--pale); font-size: .9rem; }
.page-gi .gi-scene--tell input[type="file"]::file-selector-button { margin-right: .9rem; padding: .55rem 1rem; border: 1px solid rgba(219, 232, 242, .4); border-radius: 999px; background: transparent; color: var(--paper); font: 700 .78rem/1 var(--font-body); cursor: pointer; transition: border-color .2s, color .2s; }
.page-gi .gi-scene--tell input[type="file"]::file-selector-button:hover { border-color: var(--light); color: var(--light); }
.page-gi .gi-scene--tell .form .btn { justify-self: start; }
.page-gi .gi-scene--dark .form__done { color: var(--light); }

/* ---------------------------------------------------------------- the "On this page" rail, as night glass */
.page-gi .toc { background: rgba(5, 16, 45, .94); border-color: rgba(219, 232, 242, .14); border-left-color: rgba(219, 232, 242, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .65); }
.page-gi .toc a { color: #a7bdd3; }
.page-gi .toc a.is-on, .page-gi .toc a:hover { color: var(--light); text-shadow: 0 0 12px rgba(251, 181, 42, .5); }

/* ---------------------------------------------------------------- tablets and phones: stacked, smaller art */
@media (max-width: 1100px) {
  .page-gi .toc { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .page-gi .gi-inner, .page-gi .gi-scene--tell .gi-copy { grid-template-columns: minmax(0, 1fr); }
  .page-gi .gi-art { width: min(24rem, 80vw); }
  .page-gi .gi-mini { margin-top: 1.4rem; }
}
@media (max-width: 900px) {
  .page-gi .gi-hero { grid-template-columns: minmax(0, 1fr); }
  .page-gi .gi-orbit { --o: min(22rem, 84vw); margin: 1rem auto 0; }
}
@media (max-width: 560px) {
  .page-gi .gi-plaque { padding: .85rem 1.3rem .8rem 1rem; }
  .page-gi .gi-jump a { padding: .5rem .95rem .5rem .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-gi .gi-motes, .page-gi .gi-sweep, .page-gi .gi-pulse, .page-gi .gi-marquee--rev { display: none; }
  .page-gi .gi-bg *, .page-gi .gi-art, .page-gi .gi-art *, .page-gi .gi-orbit *, .page-gi .gi-ico, .page-gi .gi-ico *, .page-gi .gi-track, .page-gi .gi-soon, .page-gi .form::before, .page-gi .gi-stars::after, .page-gi .gi-orbit__item::before { animation: none !important; }
  .page-gi .gi-orbit__beam { --gi-turn: -30deg; }
  .page-gi .gi-track { flex-wrap: wrap; width: auto; justify-content: center; } .page-gi .gi-set + .gi-set { display: none; }
  .page-gi .gi-set { min-width: 0; width: 100%; flex-wrap: wrap; justify-content: center; padding: 0 1rem; }
  .page-gi .gi-set .gi-plaque:nth-child(n + 4) { display: none; }
  .page-gi .gi-wire { stroke-dashoffset: 0; } .page-gi .gi-blip { opacity: .8; }
}