/* assets/css/fonts.css */
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/DMSans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/DMSans-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url("../fonts/SpaceGrotesk-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url("../fonts/SpaceGrotesk-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* assets/css/tokens.css */
:root {
--purple-900: #27053D;
--purple-800: #420866;
--purple-700: #530982;
--purple-600: #5C0C8E;
--purple-300: #B570E0;
--purple-100: #DAB7EF;
--purple-050: #F7F2FD;
--neutral-body:  #333840;
--neutral-muted: #5A5560;
--p1-violet:      #440B47;
--p1-violet-soft: #966993;
--p2-blue:        #00747D;
--p2-blue-soft:   #44AFCD;
--p3-green:       #008F7B;
--p3-green-soft:  #98D0C5;
--p3-green-deep:  #006F5F;
--p4-orange:      #F39323;
--p4-yellow:      #F9EA31;
--p5-grey:        #505050;
--p5-grey-soft:   #A2A2A2;
--graphic-violet: #8A3FFC;
--radar-ahp: #2EAAD4;
--radar-ebs: #56A78D;
--radar-cpf: #F39A2B;
--radar-esw: #D95F36;
--radar-dmr: #975A90;
--color-canvas:                #FFFFFF;
--color-canvas-tinted:         var(--purple-050);
--color-canvas-pressed:        var(--purple-100);
--color-ink:                   var(--purple-900);
--color-body:                  var(--neutral-body);
--color-muted:                 var(--neutral-muted);
--color-hairline-on-light:     rgba(39, 5, 61, 0.14);
--color-hairline-soft-on-light: rgba(39, 5, 61, 0.07);
--color-hairline:              var(--color-hairline-on-light);
--color-hairline-soft:         var(--color-hairline-soft-on-light);
--color-disabled:              #ECEDEF;
--color-on-disabled:           #646972;
--color-action-primary:        var(--purple-700);
--color-action-primary-hover:  var(--purple-800);
--color-action-primary-active: var(--purple-900);
--color-on-action:             #FFFFFF;
--color-focus-ring:            var(--purple-700);
--color-white:                 #FFFFFF;
--color-scrim:                 rgba(39, 5, 61, 0.6);
--color-scrim-strong:          rgba(39, 5, 61, 0.9);
--color-photo-wash:            rgba(39, 5, 61, 0.25);
--color-topbar:                rgba(255, 255, 255, 0.72);
--color-topbar-sheen:          rgba(255, 255, 255, 0.4);
--color-hairline-on-band:      rgba(247, 242, 253, 0.22);
--color-hairline-on-band-soft: rgba(247, 242, 253, 0.12);
--color-wash-on-band:          rgba(255, 255, 255, 0.10);
--color-wash-on-band-strong:   rgba(255, 255, 255, 0.18);
--color-canvas-dark:      var(--purple-900);
--color-surface-dark:     var(--purple-800);
--color-ink-on-dark:      var(--purple-050);
--color-body-on-dark:     var(--purple-100);
--color-muted-on-dark:    var(--purple-300);
--color-hairline-on-dark: rgba(247, 242, 253, 0.16);
--color-focus-ring-dark:  var(--purple-300);
--color-on-disabled-dark: rgba(255, 255, 255, 0.6);
--color-photo-tint: rgba(83, 9, 130, 0.28);
--color-photo-glow:  rgba(83, 9, 130, 0.32);
--color-radar-ring:  rgba(181, 112, 224, 0.20);
--color-radar-trail: rgba(181, 112, 224, 0.06);
--color-radar-sweep: rgba(181, 112, 224, 0.42);
--color-radar-beam:  rgba(247, 242, 253, 0.85);
--color-radar-halo:  rgba(181, 112, 224, 0.55);
--color-success: var(--p3-green-deep);
--color-warning: #A85C08;
--color-error:   #B3122B;
--color-info:    var(--p2-blue);
--gradient-signature: linear-gradient(135deg, var(--purple-700) 0%, var(--p3-green-deep) 100%);
--gradient-mesh:
radial-gradient(circle at 82% 12%, rgba(181, 112, 224, 0.45), transparent 42%),
radial-gradient(circle at 70% 100%, rgba(0, 111, 95, 0.40), transparent 40%),
linear-gradient(135deg, var(--purple-800) 0%, var(--purple-900) 100%);
--font-display: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-body:    var(--font-display);
--font-accent:  "Space Grotesk", "DM Sans", system-ui, sans-serif;
--type-display:    clamp(2.5rem, 5vw, 4rem);
--type-h1:         clamp(2rem, 3.5vw, 2.75rem);
--type-h2:         clamp(1.5rem, 2.5vw, 1.875rem);
--type-h3:         clamp(1.25rem, 1.8vw, 1.5rem);
--type-h4:         1.125rem;
--type-subhead:    1.125rem;
--type-lead:       1.125rem;
--type-body:       1rem;
--type-body-sm:    0.875rem;
--type-label:      0.875rem;
--type-button:     1rem;
--type-eyebrow:    0.6875rem;
--type-data-label: 0.875rem;
--type-caption:    0.8125rem;
--space-1:  4px;
--space-2:  8px;
--space-3:  12px;
--space-4:  16px;
--space-6:  24px;
--space-8:  32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--space-section: var(--space-12);
--layout-container-max:    1200px;
--layout-container-narrow: 760px;
--layout-topbar:           64px;
--radius-sm:   8px;
--radius-md:   16px;
--radius-lg:   24px;
--radius-pill: 999px;
--radius-full: 50%;
--shadow-sm-on-light: 0 2px 8px rgba(39, 5, 61, 0.06);
--shadow-md-on-light: 0 8px 24px rgba(39, 5, 61, 0.10);
--shadow-sm: var(--shadow-sm-on-light);
--shadow-md: var(--shadow-md-on-light);
--shadow-lg: 0 20px 50px rgba(39, 5, 61, 0.08);
--motion-fast:   160ms ease-out;
--motion-medium: 260ms ease;
--motion-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px)  { :root { --space-section: var(--space-16); --layout-topbar: 76px; } }
@media (min-width: 1024px) { :root { --space-section: var(--space-24); } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* assets/css/base.css */
html { scroll-padding-top: calc(var(--layout-topbar) + var(--space-4)); }
body {
margin: 0;
background: var(--color-canvas);
color: var(--color-body);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
.skip-link {
position: absolute; left: var(--space-4); top: -100px; z-index: 100;
display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-8);
border-radius: var(--radius-lg);
background: var(--color-action-primary); color: var(--color-on-action);
font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }
.skip-link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.btn {
display: inline-flex; align-items: center; justify-content: center;
box-sizing: border-box;
min-height: 48px;
padding: 0 var(--space-8);
border: 0; border-radius: var(--radius-lg);
font-family: var(--font-body);
font-size: var(--type-button);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color var(--motion-fast), box-shadow var(--motion-fast);
}
.btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.btn[aria-disabled="true"] {
background: var(--color-disabled); color: var(--color-on-disabled);
box-shadow: none; cursor: not-allowed;
}
.btn--primary { background: var(--color-action-primary); color: var(--color-on-action); }
.btn--primary:hover  { background: var(--color-action-primary-hover); box-shadow: var(--shadow-sm); }
.btn--primary:active { background: var(--color-action-primary-active); box-shadow: none; }
.btn--secondary {
background: transparent;
color: var(--color-action-primary);
box-shadow: inset 0 0 0 1px var(--color-action-primary);
}
.btn--secondary:hover  { background: var(--color-canvas-tinted); }
.btn--secondary:active { background: var(--color-canvas-pressed); }
.btn__offsite {
width: 10px; height: 10px; margin-left: var(--space-2);
fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.btn--gradient { background: var(--gradient-signature); color: var(--color-on-action); }
.btn--gradient:hover  { filter: brightness(1.06); box-shadow: var(--shadow-md); }
.btn--gradient:active { filter: none; box-shadow: none; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.wrap {
max-width: var(--layout-container-max);
margin: 0 auto;
padding: 0 var(--space-6);
box-sizing: border-box;
}
.theme-dark,
.theme-brand {
--color-canvas:                var(--color-canvas-dark);
--color-canvas-tinted:         var(--color-wash-on-band);
--color-canvas-pressed:        var(--color-wash-on-band-strong);
--color-hairline:              var(--color-hairline-on-dark);
--color-hairline-soft:         var(--color-hairline-on-band-soft);
--color-disabled:              var(--color-wash-on-band);
--color-on-disabled:           var(--color-on-disabled-dark);
--color-ink:                   var(--color-ink-on-dark);
--color-body:                  var(--color-body-on-dark);
--color-muted:                 var(--color-muted-on-dark);
--color-action-primary:        var(--color-white);
--color-action-primary-hover:  var(--purple-050);
--color-action-primary-active: var(--purple-100);
--color-on-action:             var(--purple-900);
--color-focus-ring:            var(--color-focus-ring-dark);
--shadow-sm: none;
--shadow-md: none;
background: var(--color-canvas);
color: var(--color-body);
}
.theme-brand {
--color-canvas:     var(--purple-700);
--color-muted:      var(--color-body-on-dark);
--color-focus-ring: var(--color-white);
}
.kicker {
margin: 0 0 var(--space-4);
font-family: var(--font-accent);
font-size: var(--type-eyebrow);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-action-primary);
}
.theme-dark .kicker,
.theme-brand .kicker { color: var(--color-muted); }
.section-head { max-width: 720px; margin: 0 0 var(--space-12); }
.section-head__title,
.reach__title,
.alumni__title,
.close__title {
margin: 0;
font-size: var(--type-h1);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-ink);
}
.btn--sm { min-height: 44px; padding: 0 var(--space-6); font-size: var(--type-body-sm); }
.ph {
display: grid;
place-items: center;
padding: var(--space-6);
box-sizing: border-box;
background-color: var(--purple-800);
background-image: repeating-linear-gradient(45deg, var(--color-hairline-on-band-soft) 0 1px, transparent 1px var(--space-4));
}
.ph::after {
content: attr(data-ph);
max-width: 34ch;
font-family: var(--font-accent);
font-size: var(--type-caption);
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.08em;
text-align: center;
text-transform: uppercase;
color: var(--purple-100);
}
.todo {
border-bottom: 2px dotted var(--color-warning);
color: var(--color-warning);
font-weight: 600;
cursor: help;
}
.theme-dark .todo,
.theme-brand .todo { color: var(--p4-orange); border-bottom-color: var(--p4-orange); }
@media (max-width: 719px) {
.wrap { padding: 0 var(--space-4); }
}
/* assets/css/components/radar-hub.css */
@property --hub-draw { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
.hub {
--speed: 1;
--scan: calc(7s * var(--speed));
--rotor: calc(120s * var(--speed));
--u: calc(100cqw / 1000);
--type-diagram-label: 0.8125rem;
--hub-c1: var(--radar-ahp);
--hub-c2: var(--radar-ebs);
--hub-c3: var(--radar-cpf);
--hub-c4: var(--radar-esw);
--hub-c5: var(--radar-dmr);
--hub-orbit: color-mix(in srgb, var(--graphic-violet) 45%, var(--purple-300));
--hub-pill: color-mix(in srgb, var(--purple-100) 50%, var(--purple-050));
container: hub / inline-size;
position: relative;
isolation: isolate;
width: 100%;
}
.hub__stage { position: relative; aspect-ratio: 1; overflow: hidden; }
.hub__orbits { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hub__halo {
position: absolute; inset: 0;
background: radial-gradient(circle,
color-mix(in srgb, var(--hub-orbit) 10%, transparent) 0,
color-mix(in srgb, var(--hub-orbit) 5%, transparent) 45%, transparent 70%);
}
.hub__orbit {
--hub-draw: 360deg;
--band: calc(var(--t) * var(--u));
position: absolute;
width: calc(var(--r) * 2 * var(--u));
aspect-ratio: 1;
left: calc((500 - var(--r)) * var(--u));
top:  calc((500 - var(--r)) * var(--u));
border-radius: var(--radius-full);
background: linear-gradient(270deg,
color-mix(in srgb, var(--hub-orbit) calc(var(--a) * 100%), transparent) 0%,
color-mix(in srgb, var(--purple-300) calc(var(--a) * 55%), transparent) 40%,
color-mix(in srgb, var(--purple-100) 30%, transparent) 58%,
transparent 80%);
-webkit-mask:
radial-gradient(closest-side, transparent calc(100% - var(--band)), #000 calc(100% - var(--band) + 1px)),
conic-gradient(transparent calc(360deg - var(--hub-draw)), #000 0);
-webkit-mask-composite: source-in;
mask:
radial-gradient(closest-side, transparent calc(100% - var(--band)), #000 calc(100% - var(--band) + 1px)),
conic-gradient(transparent calc(360deg - var(--hub-draw)), #000 0);
mask-composite: intersect;
transition: opacity var(--motion-slow), filter var(--motion-slow);
}
.hub__comet {
position: absolute; inset: 0;
border-radius: var(--radius-full);
background: conic-gradient(transparent 0deg,
color-mix(in srgb, var(--color-white) 80%, transparent) 6deg,
color-mix(in srgb, var(--color-white) 0%, transparent) 60deg, transparent);
opacity: 0;
}
.hub__pills { list-style: none; margin: 0; padding: 0; }
.hub__pill {
position: absolute;
z-index: 1;
height: calc(var(--h) * var(--u));
top:   calc((500 - var(--r) + var(--t) / 2 - var(--h) / 2) * var(--u));
left:  calc(var(--start) * var(--u));
right: calc(490 * var(--u));
display: flex; align-items: center; justify-content: flex-start;
padding-left: calc(20 * var(--u));
border-radius: var(--radius-pill) 0 0 var(--radius-pill);
background: linear-gradient(270deg,
color-mix(in srgb, var(--hub-pill) 0%, transparent) 0%,
color-mix(in srgb, var(--hub-pill) 85%, transparent) 55%, var(--hub-pill) 100%);
color: var(--color-action-primary);
font: 600 max(var(--type-diagram-label), calc(var(--fs) * var(--u))) / 1 var(--font-body);
letter-spacing: .01em;
text-decoration: none;
cursor: default;
transition: transform var(--motion-medium);
}
.hub__pill:hover,
.hub__pill:focus-visible { transform: translateX(calc(-8 * var(--u))); }
.hub__pill:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.hub:has(.hub__pill:is(:hover, :focus-visible)) .hub__orbit { opacity: .3; }
.hub:has(li:nth-child(1) > .hub__pill:is(:hover, :focus-visible)) .hub__orbit:nth-of-type(1),
.hub:has(li:nth-child(2) > .hub__pill:is(:hover, :focus-visible)) .hub__orbit:nth-of-type(2),
.hub:has(li:nth-child(3) > .hub__pill:is(:hover, :focus-visible)) .hub__orbit:nth-of-type(3),
.hub:has(li:nth-child(4) > .hub__pill:is(:hover, :focus-visible)) .hub__orbit:nth-of-type(4) {
opacity: 1; filter: saturate(1.3) brightness(1.05);
}
.hub__svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: 3;
overflow: visible;
pointer-events: none;
}
.hub__guide { fill: none; stroke: var(--color-hairline-soft); stroke-width: 1; }
.hub__guide--dashed { stroke: var(--color-hairline); stroke-dasharray: 2 6; }
.hub__guides { animation: hub-spin calc(90s * var(--speed)) linear infinite; }
.hub__guide--dashed { animation: hub-spin calc(40s * var(--speed)) linear infinite reverse; }
.hub__rotor { animation: hub-spin var(--rotor) linear infinite; }
.hub__sector {
animation: hub-unfold .9s cubic-bezier(.2, .8, .2, 1) calc(.4s + var(--s) * 120ms) backwards;
transition: transform var(--motion-slow);
}
.hub__sector:hover { transform: translateY(-16px); }
.hub__band { pointer-events: auto; }
.hub__beam,
.hub__flash { pointer-events: none; }
.hub__beam { animation: hub-breathe calc(6s * var(--speed)) ease-in-out calc(var(--s) * -1.2s) infinite; }
.hub__flash {
opacity: 0;
animation: hub-flash var(--scan) linear calc(var(--scan) * var(--a) / 360) infinite;
}
.hub__band {
animation: hub-pulse var(--scan) ease-out calc(var(--scan) * (var(--a) / 360 + .1 + var(--i) * .02)) infinite;
}
.hub__radar {
--sway: 9deg;
--stops:
var(--hub-c1)   0deg  70deg, transparent  70deg  72deg,
var(--hub-c2)  72deg 142deg, transparent 142deg 144deg,
var(--hub-c3) 144deg 214deg, transparent 214deg 216deg,
var(--hub-c4) 216deg 286deg, transparent 286deg 288deg,
var(--hub-c5) 288deg 358deg, transparent 358deg 360deg;
position: absolute;
z-index: 4;
width: 44%;
left: 28%; top: 28%;
aspect-ratio: 1;
isolation: isolate;
pointer-events: none;
}
.hub__radar > * { position: absolute; border-radius: var(--radius-full); }
.hub__radar-ring {
inset: var(--inset);
opacity: var(--o);
background:
radial-gradient(farthest-side,
color-mix(in srgb, var(--color-white) 70%, transparent) calc(100% - var(--w)),
color-mix(in srgb, var(--color-white) 0%, transparent) 100%),
conic-gradient(var(--stops));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - .5%), #000 calc(100% - var(--w)), #000 99%, transparent 100%);
mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - .5%), #000 calc(100% - var(--w)), #000 99%, transparent 100%);
animation:
hub-bloom 1.6s cubic-bezier(.2, .75, .2, 1) var(--delay) backwards,
hub-sway calc(var(--dur) * var(--speed)) ease-in-out var(--delay) infinite alternate,
hub-spin var(--rotor) linear infinite;
}
.hub__radar-ring:nth-of-type(1) { --inset: 13%; --w: 20%; --o: .85; --dur: 14s; --delay: .3s; }
.hub__radar-ring:nth-of-type(2) { --inset: 21%; --w: 24%; --o: .6;  --dur: 11s; --delay: .15s; animation-direction: normal, alternate-reverse; }
.hub__radar-ring:nth-of-type(3) { --inset: 28%; --w: 26%; --o: .5;  --dur: 17s; --delay: 0s; }
.hub__radar-ring:nth-of-type(4) { display: none; }
.hub__sweep { inset: 13%; animation: hub-spin var(--rotor) linear infinite; }
.hub__sweep::after {
content: "";
position: absolute; inset: 0;
border-radius: var(--radius-full);
background: conic-gradient(from 290deg, transparent 0deg,
color-mix(in srgb, var(--purple-300) 30%, transparent) 70deg, transparent 70deg);
animation: hub-spin var(--scan) linear infinite;
}
.hub__radar-orbit {
inset: var(--inset);
border: 1px solid color-mix(in srgb, var(--purple-300) 35%, transparent);
animation: hub-spin calc(var(--dur) * var(--speed)) linear infinite;
}
.hub__radar-orbit::before {
content: "";
position: absolute;
top: 0; left: 50%;
width: 11px; height: 11px;
translate: -50% -50%;
border-radius: var(--radius-full);
background: radial-gradient(circle at 35% 35%, var(--color-white), var(--purple-100) 55%, var(--purple-300));
box-shadow: 0 0 10px 2px color-mix(in srgb, var(--purple-300) 45%, transparent);
}
.hub__radar-orbit:nth-of-type(6) { --inset: 14%;   --dur: 48s; }
.hub__radar-orbit:nth-of-type(7) { --inset: 20.5%; --dur: 34s; animation-direction: reverse; }
.hub__radar-orbit:nth-of-type(8) { --inset: 28%;   --dur: 26s; }
.hub__radar-orbit:nth-of-type(7)::before { top: 50%; left: 0; }
.hub__core {
inset: 34%;
background: conic-gradient(
var(--hub-c1)   0deg  72deg,
var(--hub-c2)  72deg 144deg,
var(--hub-c3) 144deg 216deg,
var(--hub-c4) 216deg 288deg,
var(--hub-c5) 288deg 360deg);
box-shadow:
0 0 0 7px color-mix(in srgb, var(--color-white) 55%, transparent),
0 0 0 8px color-mix(in srgb, var(--purple-300) 30%, transparent),
0 0 50px color-mix(in srgb, var(--graphic-violet) 22%, transparent);
overflow: hidden;
animation:
hub-bloom 1.2s cubic-bezier(.2, .75, .2, 1) backwards,
hub-spin var(--rotor) linear infinite;
}
.hub__core::after {
content: "";
position: absolute; inset: 0;
border-radius: var(--radius-full);
background: conic-gradient(from 290deg, transparent 0deg,
color-mix(in srgb, var(--color-white) 60%, transparent) 70deg, transparent 70deg);
animation: hub-spin var(--scan) linear infinite;
}
.hub.is-armed .hub__orbit { --hub-draw: 0deg; }
.hub.is-armed .hub__pill { clip-path: inset(0 0 0 100%); }
.hub.is-visible .hub__orbit {
animation: hub-draw 1.6s cubic-bezier(.65, 0, .35, 1) calc(.3s + var(--i) * .15s) both;
}
.hub.is-visible .hub__pill {
animation: hub-pill .9s cubic-bezier(.22, 1, .36, 1) calc(1.9s + var(--i) * .15s) both;
}
.hub.is-visible .hub__comet {
animation: hub-comet calc((7s + var(--i) * 1.3s) * var(--speed)) ease-in-out calc(2.1s + var(--i) * .8s) infinite;
}
@keyframes hub-spin    { to { transform: rotate(360deg); } }
@keyframes hub-sway    { from { rotate: calc(var(--sway) * -1); } to { rotate: var(--sway); } }
@keyframes hub-bloom   { from { scale: .55; opacity: 0; } }
@keyframes hub-draw    { from { --hub-draw: 0deg; } to { --hub-draw: 360deg; } }
@keyframes hub-pill    { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hub-unfold  { from { transform: scale(.2) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hub-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .75; } }
@keyframes hub-flash {
0%   { transform: scale(.15); opacity: 0; }
3%   { opacity: 1; }
20%  { opacity: .9; }
28%  { transform: scale(1); opacity: 0; }
100% { transform: scale(1); opacity: 0; }
}
@keyframes hub-pulse {
0%, 16%, 100% { filter: brightness(1); }
4%            { filter: brightness(1.18); }
}
@keyframes hub-comet {
0%   { transform: rotate(15deg);   opacity: 0; }
10%  { opacity: .9; }
55%  { opacity: .9; }
70%  { transform: rotate(-200deg); opacity: 0; }
100% { transform: rotate(-200deg); opacity: 0; }
}
@container hub (max-width: 560px) {
.hub__pills {
display: flex; flex-wrap: wrap; justify-content: center;
gap: var(--space-2);
margin-top: var(--space-4);
}
.hub__pill {
position: static;
height: auto;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
background: var(--hub-pill);
font-size: var(--type-label);
}
.hub__pill:hover,
.hub__pill:focus-visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hub *, .hub *::before, .hub *::after { animation: none !important; transition: none !important; }
.hub__comet, .hub__flash { display: none; }
}
/* assets/css/components/radar-canvas.css */
.shp--svg-canvas__canvas {
--radar-font: var(--font-body);
--radar-ink: #3b3b3b;
--radar-ring: #e9e9e9;
--radar-shape: #bdbdbd;
--p-ahp: var(--radar-ahp);
--p-ebs: var(--radar-ebs);
--p-cpf: var(--radar-cpf);
--p-esw: var(--radar-esw);
--p-dmr: var(--radar-dmr);
width: 100%;
max-width: 820px;
aspect-ratio: 1 / 1;
margin-inline: auto;
font-family: var(--radar-font);
}
.shp--svg-canvas__canvas svg { display: block; width: 100%; height: 100%; }
.shp--svg-canvas__canvas .rd-ring   { fill: none; stroke: var(--radar-ring); stroke-width: 1; }
.shp--svg-canvas__canvas .rd-band   { fill: none; stroke: #dcdcdc; stroke-width: 9; opacity: .55; }
.shp--svg-canvas__canvas .rd-shape  { fill: var(--radar-shape); fill-opacity: .38; stroke: none; }
.shp--svg-canvas__canvas .rd-rim-text { fill: #fff; font-size: 15.5px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.shp--svg-canvas__canvas .rd-btn         { cursor: pointer; }
.shp--svg-canvas__canvas .rd-btn circle  { transition: transform .2s ease; transform-box: fill-box; transform-origin: center; }
.shp--svg-canvas__canvas .rd-btn:hover circle,
.shp--svg-canvas__canvas .rd-btn:focus-visible circle { transform: scale(1.12); }
.shp--svg-canvas__canvas .rd-btn:focus { outline: none; }
.shp--svg-canvas__canvas .rd-btn:focus-visible circle { stroke: #333; stroke-width: 2; }
.shp--svg-canvas__canvas .rd-chev { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.shp--svg-canvas__canvas .rd-topic       { cursor: pointer; transition: opacity .25s ease; }
.shp--svg-canvas__canvas .rd-topic:focus { outline: none; }
.shp--svg-canvas__canvas .rd-dot         { fill: var(--c); transition: transform .2s ease; transform-box: fill-box; transform-origin: center; }
.shp--svg-canvas__canvas .rd-label       { fill: var(--radar-ink); font-size: 11.5px; }
.shp--svg-canvas__canvas .rd-topic:hover .rd-dot,
.shp--svg-canvas__canvas .rd-topic:focus-visible .rd-dot { transform: scale(1.25); }
.shp--svg-canvas__canvas .rd-topic:focus-visible .rd-dot { stroke: #333; stroke-width: 2; }
.shp--svg-canvas__canvas .rd-topic.is-active .rd-dot     { stroke: #fff; stroke-width: 3; }
.shp--svg-canvas__canvas .rd-topic.is-active .rd-label   { font-weight: 700; }
.shp--svg-canvas__canvas .rd-topic.is-dim { opacity: .2; }
.shp--svg-canvas__canvas .rd-anim { animation: rd-in .6s ease both; }
@keyframes rd-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shp--svg-canvas__canvas .rd-anim { animation: none; } }
/* assets/css/components/sparkle.css */
@property --head     { syntax: '<number>'; inherits: true; initial-value: 0; }
.points__trace {
position: absolute; inset: 0;
width: 100%; height: 100%;
overflow: visible;
pointer-events: none;
opacity: 0;
}
.points__trace rect {
x: 0; y: 0; width: 100%; height: 100%;
rx: var(--radius-sm);
fill: none;
stroke: var(--points-trace);
stroke-linecap: round;
stroke-dasharray: var(--L) 2;
stroke-dashoffset: calc(var(--L) - var(--head));
}
.points__trace rect:nth-child(1) { --L: 0.32;   stroke-width: 0.5;  opacity: 0.2; }
.points__trace rect:nth-child(2) { --L: 0.16;   stroke-width: 0.75; opacity: 0.45; }
.points__trace rect:nth-child(3) { --L: 0.06;   stroke-width: 1;    opacity: 0.8; }
.points__trace rect:nth-child(4) {
--L: 0.0001;
stroke: var(--purple-100);
stroke-width: 3;
filter: drop-shadow(0 0 3px var(--points-trace)) drop-shadow(0 0 1px var(--graphic-violet));
}
.points__btn.is-sparked .points__trace,
.points__btn:hover .points__trace,
.community__btn.is-sparked .points__trace,
.community__btn:hover .points__trace { animation: points-spark 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95); }
@keyframes points-spark {
0%   { --head: 0; opacity: 0; }
6%   { opacity: 1; }
85%  { opacity: 1; }
100% { --head: 1; opacity: 0; }
}
/* assets/css/components/aurora.css */
.aurora {
position: absolute;
z-index: -1;
pointer-events: none;
}
.aurora span {
position: absolute;
background: radial-gradient(closest-side, var(--c) 0 22%, transparent 68%);
filter: blur(40px);
will-change: transform;
}
/* assets/css/sections/topbar.css */
html.nav-open { overflow: hidden; }
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
border-bottom: 1px solid var(--color-hairline-soft);
}
.topbar::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, var(--color-topbar-sheen), transparent 55%),
var(--color-topbar);
box-shadow: inset 0 1px 0 var(--color-topbar-sheen), var(--shadow-sm);
-webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
.topbar__inner {
display: flex; align-items: center; gap: var(--space-6);
max-width: var(--layout-container-max);
height: var(--layout-topbar);
margin: 0 auto;
padding: 0 var(--space-6);
box-sizing: border-box;
}
.topbar__brand { display: inline-flex; align-items: center; margin-right: auto; border-radius: var(--radius-sm); }
.topbar__brand img { display: block; height: 52px; width: auto; }
.topbar__brand:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 4px; }
.topbar__nav { display: flex; align-items: center; gap: var(--space-8); }
.topbar__links { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.topbar__links > li > a {
display: inline-block; padding: var(--space-2) 0;
font-size: var(--type-body); font-weight: 500; line-height: 1.2;
color: var(--color-ink); text-decoration: none;
border-bottom: 2px solid transparent;
transition: color var(--motion-fast), border-color var(--motion-fast);
}
.topbar__links > li > a:hover,
.topbar__links > li > a:focus-visible { color: var(--color-action-primary); border-bottom-color: currentColor; }
.topbar__links > li > a:active { color: var(--color-action-primary-active); }
.topbar__links > li > a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.topbar__toggle { display: none; }
.topbar__marker {
position: absolute; left: 0; bottom: -1px;
height: 2px;
background: var(--color-action-primary);
opacity: 0;
pointer-events: none;
transition: transform var(--motion-medium), width var(--motion-medium), opacity var(--motion-medium);
}
.topbar__marker.is-shown { opacity: 1; }
.topbar__marker.is-placing { transition: opacity var(--motion-medium); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); }
@media (min-width: 1280px) {
.topbar__nav { flex: 1; gap: var(--space-6); }
.topbar__brand { margin-right: var(--space-4); }
.topbar__links { flex: 1; justify-content: center; }
.topbar__links > li > a,
.topbar__actions .btn { white-space: nowrap; }
}
.topbar__has-menu { position: relative; }
.topbar__links > .topbar__has-menu > a { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__has-menu > a::after,
.topbar__menu-toggle::after {
content: "";
width: 6px; height: 6px;
margin-top: -3px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
rotate: 45deg;
transition: rotate var(--motion-fast), margin var(--motion-fast);
}
.topbar__menu-toggle { display: none; }
.topbar__menu {
position: absolute;
top: 100%;
left: 0;
padding-top: var(--space-6);
opacity: 0;
visibility: hidden;
translate: 0 calc(-1 * var(--space-1));
transition: opacity var(--motion-fast), translate var(--motion-fast), visibility 0s 160ms;
}
.topbar__has-menu:is(:hover, :focus-within):not(.is-dismissed) .topbar__menu {
opacity: 1;
visibility: visible;
translate: 0 0;
transition: opacity var(--motion-fast), translate var(--motion-fast), visibility 0s;
}
.topbar__has-menu:is(:hover, :focus-within):not(.is-dismissed) > a::after { rotate: 225deg; margin-top: 3px; }
.topbar__menu-panel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-6);
border: 1px solid var(--color-hairline-soft);
border-radius: var(--radius-lg);
background: var(--color-canvas);
box-shadow: var(--shadow-md);
}
.topbar__menu-title {
margin: 0 0 var(--space-4);
font-family: var(--font-accent);
font-size: var(--type-eyebrow);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
}
.topbar__menu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.topbar__menu a {
display: block;
margin-inline: calc(-1 * var(--space-2));
padding: var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--type-body);
font-weight: 500;
line-height: 1.3;
color: var(--color-ink);
text-decoration: none;
transition: color var(--motion-fast), background-color var(--motion-fast);
}
.topbar__menu a:hover  { background: var(--color-canvas-tinted); color: var(--color-action-primary-hover); }
.topbar__menu a:active { background: var(--color-canvas-pressed); color: var(--color-action-primary-active); }
.topbar__menu a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 0; }
@media (max-width: 1279px) {
.topbar__brand img { height: 44px; }
.topbar__links > .topbar__has-menu > a { display: none; }
.topbar__menu-toggle {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
width: 100%; padding: var(--space-4) 0;
background: none; border: 0; border-bottom: 1px solid var(--color-hairline);
font: 600 var(--type-h3) / 1.3 var(--font-body); letter-spacing: -0.01em;
color: var(--color-ink); text-align: left; cursor: pointer;
transition: color var(--motion-fast);
}
.topbar__menu-toggle::after { margin-right: var(--space-2); }
.topbar__menu-toggle:hover { color: var(--color-action-primary); }
.topbar__menu-toggle:active { color: var(--color-action-primary-active); }
.topbar__menu-toggle:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.topbar__menu-toggle[aria-expanded="true"]::after { rotate: 225deg; margin-top: 3px; }
.topbar__menu {
display: none; position: static;
padding: 0; opacity: 1; visibility: visible; translate: none;
}
.topbar__has-menu.is-open > .topbar__menu { display: block; border-bottom: 1px solid var(--color-hairline); }
.topbar__menu-panel {
display: grid; grid-auto-flow: row; gap: var(--space-1);
padding: var(--space-2) 0 var(--space-6);
border: 0; border-radius: 0; background: none; box-shadow: none;
}
.topbar__menu-title { display: none; }
.topbar__menu a { padding-block: var(--space-3); }
.topbar__toggle {
display: inline-flex; align-items: center; gap: var(--space-3);
min-height: 44px; padding: 0 var(--space-4);
background: none; border: 1px solid var(--color-hairline); border-radius: var(--radius-pill);
color: var(--color-ink); font: 600 var(--type-label) / 1 var(--font-body); cursor: pointer;
}
.topbar__toggle:hover  { background: var(--color-canvas-tinted); }
.topbar__toggle:active { background: var(--color-canvas-pressed); }
.topbar__toggle:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.topbar__toggle-icon {
position: relative; width: 18px; height: 12px;
background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}
.topbar__toggle-icon::before,
.topbar__toggle-icon::after {
content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
transition: transform var(--motion-fast), top var(--motion-fast), bottom var(--motion-fast);
}
.topbar__toggle-icon::before { top: 0; }
.topbar__toggle-icon::after  { bottom: 0; }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-icon { background: none; }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-icon::before { top: 5px; transform: rotate(45deg); }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-icon::after  { bottom: 5px; transform: rotate(-45deg); }
.topbar__nav {
position: fixed; top: var(--layout-topbar); left: 0; right: 0; bottom: 0; z-index: 49;
flex-direction: column; align-items: stretch; gap: var(--space-8);
padding: var(--space-6) var(--space-6) var(--space-12);
background: var(--color-canvas); overflow-y: auto;
}
.topbar__nav[hidden] { display: none; }
.topbar__links { flex-direction: column; align-items: stretch; gap: 0; }
.topbar__links > li > a {
display: block; padding: var(--space-4) 0;
font-size: var(--type-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
border-bottom: 1px solid var(--color-hairline);
}
.topbar__links > li > a:hover,
.topbar__links > li > a:focus-visible { border-bottom-color: var(--color-hairline); }
.topbar__marker { display: none; }
.topbar__links > li { position: relative; }
.topbar__links > li.is-current::before {
content: ""; position: absolute;
left: calc(-1 * var(--space-3)); top: var(--space-4);
width: 2px; height: calc(var(--type-h3) * 1.3);
background: var(--color-action-primary);
}
.topbar__actions { flex-direction: column; align-items: stretch; }
}
/* assets/css/sections/hero.css */
.hero {
--hero-text: 610px;
--hero-accent: var(--purple-300);
--hero-photo-left: 46%;
--hero-fade: 2s;
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 100vh;
box-sizing: border-box;
padding: calc(var(--layout-topbar) + var(--space-12)) 0 calc(var(--space-24) + var(--space-16));
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(0deg, var(--purple-300) 0%, var(--purple-700) 20%, var(--purple-800) 34%, var(--purple-900) 58%);
}
.hero__photo {
position: absolute;
z-index: -1;
top: 0; bottom: 0; right: 0;
left: var(--hero-photo-left);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(0deg, transparent 0, #000 45%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0, #000 40%), linear-gradient(0deg, transparent 0, #000 45%);
mask-composite: intersect;
}
.hero__slide {
position: absolute; inset: 0;
display: block;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--hero-fade) ease-in-out;
}
.hero__slide.is-on { opacity: 1; }
.hero__credits {
position: absolute;
z-index: 1;
right: var(--space-6);
bottom: calc(var(--space-24) + var(--space-16));
margin: 0; padding: 0;
list-style: none;
display: grid;
justify-items: end;
}
.hero__credit {
grid-area: 1 / 1;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-scrim-strong);
font-size: var(--type-caption);
line-height: 1.3;
color: var(--color-body);
opacity: 0;
transition: opacity var(--hero-fade) ease-in-out;
}
.hero__credit.is-on { opacity: 1; }
.hero__photo::after {
content: "";
position: absolute; inset: 0;
background: var(--color-photo-tint);
}
.hero__aurora {
top: 50%; left: -10%; right: -10%; bottom: -20%;
-webkit-mask-image: linear-gradient(0deg, #000 0, #000 30%, rgba(0, 0, 0, 0.55) 55%, transparent 85%);
mask-image: linear-gradient(0deg, #000 0, #000 30%, rgba(0, 0, 0, 0.55) 55%, transparent 85%);
}
.hero__aurora span:nth-child(1) { --c: var(--radar-dmr);      left: 10%;  bottom: -6%;  width: 48%; height: 100%; }
.hero__aurora span:nth-child(2) { --c: var(--radar-ahp);      left: 64%;  bottom: -44%; width: 56%; height: 140%; }
.hero__aurora span:nth-child(3) { --c: var(--radar-ebs);      left: 42%;  bottom: -35%; width: 60%; height: 90%; }
.hero__aurora span:nth-child(4) { --c: var(--graphic-violet); left: 38%;  bottom: -26%; width: 44%; height: 120%; }
.hero__aurora span:nth-child(5) { --c: var(--radar-cpf);      left: 14%;  bottom: -16%; width: 52%; height: 80%; }
.hero__aurora span:nth-child(6) { --c: var(--radar-esw);      left: -6%;  bottom: -10%; width: 48%; height: 76%; }
.hero__aurora span:nth-child(7) { --c: var(--radar-dmr);      left: -24%; bottom: -5%;  width: 52%; height: 110%; }
.hero::after {
content: "";
position: absolute;
z-index: -1;
inset: auto 0 0;
height: var(--space-12);
background: linear-gradient(0deg, var(--purple-050), color-mix(in srgb, var(--purple-050) 40%, transparent) 35%, transparent);
}
.hero__inner { width: 100%; }
.hero__inner > * { max-width: var(--hero-text); }
.hero__title {
margin: 0;
font-size: var(--type-display);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--color-ink);
}
.hero__subhead {
margin: var(--space-6) 0 0;
font-size: var(--type-h3);
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--hero-accent);
}
.hero__lead {
margin: var(--space-8) 0 0;
padding-left: var(--space-4);
max-width: 46ch;
border-left: 2px solid var(--hero-accent);
font-size: var(--type-lead);
line-height: 1.65;
color: var(--color-body);
}
.hero__actions {
margin: var(--space-12) 0 0;
display: flex; flex-wrap: wrap; gap: var(--space-4);
}
.hero__funder { margin: var(--space-12) 0 0; }
.hero__funder img { display: block; height: var(--space-16); width: auto; }
@media (max-width: 1199px) {
.hero { --hero-photo-left: 50%; }
}
@media (max-width: 979px) {
.hero {
--hero-photo-h: min(75vw, 560px);
min-height: 0;
padding-top: calc(var(--layout-topbar) + var(--hero-photo-h) * 0.8);
padding-bottom: calc(var(--space-24) + var(--space-8));
}
.hero__photo {
top: var(--layout-topbar);
left: 0;
bottom: auto;
height: var(--hero-photo-h);
-webkit-mask-image: linear-gradient(0deg, transparent 0, #000 60%);
mask-image: linear-gradient(0deg, transparent 0, #000 60%);
}
.hero__credits {
top: calc(var(--layout-topbar) + var(--space-4));
right: var(--space-4);
bottom: auto;
}
}
@media (max-width: 719px) {
.hero__actions .btn { width: 100%; }
}
/* assets/css/sections/offers.css */
.offers {
padding-block: var(--space-section);
background: var(--color-canvas-tinted);
}
.offers .section-head { max-width: none; }
.offers__lead {
margin: var(--space-4) 0 0;
max-width: 60ch;
font-size: var(--type-lead);
line-height: 1.65;
color: var(--color-body);
}
.offers__grid {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-8) var(--space-6);
}
.offers__grid > .offer { flex: 0 0 calc((100% - 2 * var(--space-6)) / 3); min-width: 0; }
.offers__label {
flex: 0 0 100%;
box-sizing: border-box;
margin: 0 0 calc(var(--space-4) - var(--space-8));
padding-left: calc((3 - var(--row-cards, 3)) * (100% + var(--space-6)) / 6);
}
.offers__label:not(:first-child) { margin-top: var(--space-4); }
.offer {
--offer-inset: var(--space-6);
--offer-actions-h: 44px;
--offer-name-size: 1.25rem;
--offer-hop: 1100ms;
--offer-partner-h: var(--space-4);
--offer-gesda-h: calc(var(--offer-partner-h) * 2);
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.offer--hop .offer__card { animation: offer-hop var(--offer-hop) ease-in-out; }
.offer::after {
content: "";
position: absolute; left: 15%; right: 15%; bottom: calc(-1 * var(--space-3));
height: var(--space-4);
border-radius: var(--radius-full);
background: radial-gradient(closest-side, var(--color-scrim), transparent);
opacity: 0;
pointer-events: none;
}
.offer--hop::after { animation: offer-hop-shadow var(--offer-hop) ease-in-out; }
@keyframes offer-hop {
0%, 60%, 100% { transform: none; }
30% { transform: translateY(calc(-1 * var(--space-2))); }
75% { transform: translateY(calc(-0.5 * var(--space-1))); }
90% { transform: none; }
}
@keyframes offer-hop-shadow {
0%, 60%, 90%, 100% { opacity: 0; }
30% { opacity: 0.35; }
75% { opacity: 0.1; }
}
.offer__card {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
border-radius: var(--radius-lg);
perspective: 1200px;
transition: transform var(--motion-medium), box-shadow var(--motion-medium);
}
.offer__card:has(.offer__turn:is(:hover, :focus-visible)) {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.offer__card:has(.offer__turn:active) {
transform: scale(0.99);
box-shadow: var(--shadow-sm);
}
.offer__inner {
position: absolute; inset: 0;
transform-style: preserve-3d;
transition: transform var(--motion-slow);
}
.offer[data-turned] .offer__inner { transform: rotateY(180deg); }
.offer__face {
position: absolute; inset: 0;
overflow: hidden;
border-radius: var(--radius-lg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.offer[data-turned] .offer__face--front,
.offer:not([data-turned]) .offer__face--back { pointer-events: none; }
.offer__cover {
width: 100%; height: 100%;
object-fit: cover;
}
img.offer__cover { display: block; }
.offer__cover.ph { align-items: start; padding-top: var(--space-16); }
.offer__cover--radar { position: relative; background: var(--purple-900); }
.radar {
--scan: 6s;
position: absolute; top: 40%; left: 50%;
height: 90%; aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: var(--radius-full);
background: radial-gradient(circle, var(--color-photo-glow) 0%, transparent 62%);
}
.radar__grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radar__grid circle,
.radar__grid line {
fill: none; stroke: var(--color-radar-ring); stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.radar__grid .is-dotted { stroke-dasharray: 2 6; stroke-linecap: round; }
.radar__sweep {
position: absolute; inset: 0;
border-radius: var(--radius-full);
background: conic-gradient(
transparent 0deg 300deg,
var(--color-radar-trail) 300deg,
var(--color-radar-sweep) 360deg);
animation: radar-turn var(--scan) linear infinite;
}
.radar__beam {
position: absolute; left: 50%; top: 0;
width: 2px; height: 50%; margin-left: -1px;
background: linear-gradient(to top, transparent, var(--color-radar-beam));
}
.radar__blip {
position: absolute; inset: 0;
transform: rotate(calc(var(--t) * 1turn));
}
.radar__blip i {
position: absolute; left: 50%; top: calc(50% - var(--r));
width: 10px; height: 10px; margin: -5px 0 0 -5px;
border-radius: var(--radius-full);
background: var(--purple-100);
box-shadow: 0 0 0 5px var(--color-radar-ring), 0 0 18px 4px var(--color-radar-halo);
opacity: 0.35;
animation: radar-ping var(--scan) linear infinite;
animation-delay: calc(var(--t) * var(--scan) - var(--scan));
}
.radar__core {
position: absolute; top: 50%; left: 50%;
width: 8px; height: 8px; margin: -4px 0 0 -4px;
border-radius: var(--radius-full);
background: var(--purple-300);
}
@keyframes radar-turn { to { transform: rotate(1turn); } }
@keyframes radar-ping {
0%   { opacity: 1;    transform: scale(1.35); }
30%  { opacity: 0.35; transform: scale(1); }
100% { opacity: 0.35; transform: scale(1); }
}
.offer__status {
position: absolute; left: var(--offer-inset); top: var(--offer-inset);
margin: 0;
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background: var(--purple-050);
font-size: var(--type-caption);
font-weight: 600;
line-height: 1.4;
color: var(--purple-900);
}
.offer__status::before {
content: "";
width: 6px; height: 6px;
border-radius: var(--radius-full);
background: var(--purple-700);
}
.offer__marks {
position: absolute; left: var(--offer-inset); right: var(--offer-inset); top: var(--offer-inset);
display: flex; align-items: center; gap: var(--space-4);
min-height: var(--offer-gesda-h);
}
.offer__gesda { width: auto; height: var(--offer-gesda-h); }
.offer__partner {
margin-left: auto;
width: auto; height: calc(var(--offer-partner-h) * var(--offer-partner-scale, 1));
}
.offer__caption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: var(--space-12) var(--offer-inset) calc(var(--offer-actions-h) + 2 * var(--offer-inset));
background: linear-gradient(to top, var(--color-scrim-strong) 55%, transparent);
}
.offer__kind {
margin: 0;
font-family: var(--font-accent);
font-size: var(--type-eyebrow);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
}
.offer__name {
margin: var(--space-2) 0 0;
font-size: var(--offer-name-size);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-ink);
}
.offer__face--back {
transform: rotateY(180deg);
display: flex;
flex-direction: column;
padding: var(--offer-inset);
box-sizing: border-box;
background: var(--color-canvas);
}
.offer__summary {
margin: 0;
font-size: var(--type-body);
line-height: 1.55;
color: var(--color-ink);
}
.offer__facts {
margin: auto 0 0;
padding-top: var(--space-3);
border-top: 1px solid var(--color-hairline);
display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
font-family: var(--font-accent);
font-size: var(--type-data-label);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.02em;
color: var(--color-ink);
}
.offer__turn {
position: absolute; inset: 0; z-index: 1;
margin: 0; padding: 0;
border: 0;
border-radius: var(--radius-lg);
background: none;
cursor: pointer;
}
.offer__turn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }
.offer__turn { display: none; }
.offer__actions {
position: absolute; left: var(--offer-inset); right: var(--offer-inset); bottom: var(--offer-inset);
z-index: 2;
display: flex; justify-content: center;
pointer-events: none;
}
.offer__actions .btn {
min-height: var(--offer-actions-h);
min-width: 55%;
padding: 0 var(--space-6);
white-space: nowrap;
pointer-events: auto;
}
.offer__actions .offer__soon { pointer-events: none; }
@media (max-width: 1199px) {
.offer { --offer-inset: var(--space-4); --offer-name-size: var(--type-h4); --offer-partner-h: var(--space-3); }
.offer__summary { font-size: var(--type-body-sm); }
.offer__actions .btn { padding: 0 var(--space-4); }
}
@media (max-width: 1023px) {
.offers__grid > .offer { flex-basis: calc((100% - var(--space-6)) / 2); }
.offers__label { display: none; }
.offer { --offer-inset: var(--space-6); --offer-name-size: 1.25rem; --offer-partner-h: var(--space-4); }
.offer__summary { font-size: var(--type-body); }
.offer__actions .btn { padding: 0 var(--space-6); }
}
@media (max-width: 767px) {
.offers__grid { max-width: 300px; margin-inline: auto; gap: var(--space-6); }
.offers__grid > .offer { flex-basis: 100%; }
.offer { --offer-inset: var(--space-4); --offer-name-size: var(--type-h4); }
.offer__caption { padding-top: var(--space-8); }
.offer__summary { font-size: var(--type-body-sm); }
.offer__facts { font-size: var(--type-caption); }
.offer__actions .btn { padding: 0 var(--space-4); font-size: var(--type-body-sm); }
}
/* assets/css/sections/layers.css */
.layers {
--layers-text: 610px;
--layers-fig:  calc(var(--layout-container-max) - 2 * var(--space-6) - var(--space-12) - var(--layers-text));
--layers-accent: color-mix(in srgb, var(--purple-700) 75%, var(--purple-300));
overflow-x: clip;
display: grid;
grid-template-columns:
minmax(var(--conduit-lane, var(--space-6)), 1fr)
[text-start] minmax(0, var(--layers-text)) [text-end]
var(--space-12)
[fig-start] minmax(0, var(--layers-fig)) [fig-end]
minmax(var(--space-6), 1fr);
}
.layer,
.stage          { grid-column: text-start / fig-end; }
.layer--science { grid-row: 1; }
.stage          { grid-row: 2; }
.layer--method  { grid-row: 3; }
.layer--network { grid-row: 4; }
.stage__pin {
height: 100%;
display: grid;
place-items: center;
}
.stage__fig {
position: relative;
width: min(100%, 640px);
}
.stage__canvas { display: none; }
.stage {
--o-rays: 1;
--o-orbits: 1;
}
.stage .hub__svg    { opacity: var(--o-rays); }
.stage .hub__orbits { opacity: var(--o-orbits); }
.stage[data-rays-off] .hub__svg { visibility: hidden; }
.stage .hub__band { pointer-events: none; }
.stage .hub__sector:hover { transform: none; }
.stage .hub__stage { overflow: visible; }
.stage .hub__svg,
.stage .hub__orbits { transition: scale var(--motion-slow); }
.stage[data-accent="rays"] .hub__svg   { scale: 1.05; }
.layers:has(.community__btn:is(:hover, :focus-visible, [aria-pressed="true"])) .hub__orbit { opacity: 0.3; }
.layers:has(.community li:nth-child(1) .community__btn:is(:hover, :focus-visible, [aria-pressed="true"])) .hub__orbit:nth-of-type(1),
.layers:has(.community li:nth-child(2) .community__btn:is(:hover, :focus-visible, [aria-pressed="true"])) .hub__orbit:nth-of-type(2),
.layers:has(.community li:nth-child(3) .community__btn:is(:hover, :focus-visible, [aria-pressed="true"])) .hub__orbit:nth-of-type(3),
.layers:has(.community li:nth-child(4) .community__btn:is(:hover, :focus-visible, [aria-pressed="true"])) .hub__orbit:nth-of-type(4) {
opacity: 1; filter: saturate(1.3) brightness(1.05);
}
.layer {
padding-block: var(--space-section);
}
.layer__pin {
display: grid;
grid-template-columns: minmax(0, var(--layers-text)) minmax(0, var(--layers-fig));
column-gap: var(--space-12);
align-items: center;
}
.layer__title {
margin: 0;
font-size: var(--type-h1);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-ink);
}
.layer__subhead {
margin: var(--space-4) 0 0;
font-size: var(--type-h3);
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--layers-accent);
}
.layer__body {
margin: var(--space-6) 0 0;
max-width: 60ch;
font-size: var(--type-body);
line-height: 1.6;
color: var(--color-body);
}
.layer__body a {
color: var(--color-action-primary);
text-decoration: underline; text-underline-offset: 3px;
border-radius: var(--radius-sm);
transition: color var(--motion-fast);
}
.layer__body a:hover  { color: var(--color-action-primary-hover); }
.layer__body a:active { color: var(--color-action-primary-active); }
.layer__body a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.layer__list { margin-top: var(--space-3); padding-left: 1.25em; }
.layer__list li + li { margin-top: var(--space-2); }
.points {
margin: var(--space-8) 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}
.points {
--points-trace: color-mix(in srgb, var(--graphic-violet) 45%, var(--purple-300));
}
.points__item { margin: 0; }
.method-fig { display: none; }
.points__btn {
--point-color: var(--purple-300);
position: relative;
display: inline-block;
margin: calc(-1 * var(--space-2));
padding: var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: none;
font: 600 var(--type-h4) / 1.4 var(--font-body);
color: var(--color-ink);
text-align: inherit;
cursor: pointer;
transform-origin: left center;
transition: color var(--motion-fast), scale var(--motion-medium);
}
.points__btn::before {
content: "";
display: block;
width: var(--space-6);
height: 2px;
margin-bottom: var(--space-3);
border-radius: var(--radius-pill);
background: var(--point-color);
transition: width var(--motion-medium), height var(--motion-medium), background-color var(--motion-slow);
}
.points__btn:hover  { color: var(--color-action-primary-hover); }
.points__btn:active { color: var(--color-action-primary-active); }
.points__btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.points__btn:disabled { color: var(--color-muted); cursor: not-allowed; }
.points__btn:is(:hover, :focus-visible) { scale: 1.03; }
.points__btn:is(:hover, :focus-visible)::before { width: calc(var(--space-6) + var(--space-3)); }
.points__btn[aria-pressed="true"] { scale: 1.08; }
.points__btn[aria-pressed="true"]::before { width: var(--space-12); height: 3px; }
.points:has([aria-pressed="true"]) .points__btn:not([aria-pressed="true"]) { color: var(--color-muted); }
.community {
--community-fill: color-mix(in srgb, var(--purple-100) 50%, var(--purple-050));
--community-line: var(--purple-300);
--community-ring: color-mix(in srgb, var(--graphic-violet) 45%, var(--purple-300));
--points-trace: var(--community-ring);
margin: var(--space-6) 0 0;
padding: 0;
list-style: none;
display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.community__btn {
display: inline-flex; align-items: center;
min-height: 44px;
padding: 0 var(--space-4);
border: 0; border-radius: var(--radius-pill);
background: var(--community-fill);
color: var(--color-action-primary);
font: 600 var(--type-label) / 1 var(--font-body);
letter-spacing: 0.01em;
cursor: pointer;
transition: background-color var(--motion-fast), color var(--motion-fast), translate var(--motion-medium);
}
.community__btn:hover  { background: var(--purple-100); }
.community__btn:active { background: var(--color-canvas-pressed); color: var(--color-action-primary-active); }
.community__btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.community__btn[aria-pressed="true"] {
background: var(--purple-100);
color: var(--color-ink);
box-shadow: inset 0 0 0 2px var(--community-ring);
}
.community__btn:disabled { background: var(--purple-050); color: var(--color-muted); cursor: not-allowed; }
.community__btn { pointer-events: none; cursor: default; }
.community__name {
position: relative;
display: inline-block;
margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
transform-origin: left center;
transition: scale var(--motion-medium);
}
.abstracts { display: grid; margin-top: var(--space-6); }
.abstracts--method { margin-top: 0; }
.abstracts--subhead { margin-top: var(--space-4); }
.abstracts > * { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.abstracts > .is-on { visibility: visible; animation: layers-fade-in var(--motion-medium); }
@keyframes layers-fade-in { from { opacity: 0; } }
.counters {
margin: var(--space-12) 0 0;
padding-top: var(--space-6);
border-top: 1px solid var(--color-hairline);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
transition: opacity var(--motion-slow), transform var(--motion-slow);
}
.counters__item {
padding: 0 var(--space-6);
border-left: 1px solid var(--color-hairline-soft);
display: flex;
flex-direction: column;
}
.counters__item:first-child { padding-left: 0; border-left: 0; }
.counters dt {
order: 1;
margin-top: var(--space-2);
font-size: var(--type-body-sm);
line-height: 1.5;
color: var(--color-muted);
}
.counters__note {
margin: var(--space-12) 0 var(--space-2);
font-size: var(--type-caption);
line-height: 1.4;
color: var(--color-muted);
transition: opacity var(--motion-slow), transform var(--motion-slow);
}
.counters__note + .counters { margin-top: 0; }
.counters__figure {
margin: 0;
font-family: var(--font-accent);
font-size: var(--type-h1);
font-weight: 600;
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: var(--color-ink);
}
.layers.is-switching *,
.layers.is-switching *::before,
.layers.is-switching *::after { transition: none !important; }
.layers.is-live .stage { grid-column: fig; grid-row: 1 / span 3; margin-bottom: var(--net-over, 0px); }
.layers.is-live .layer--method  { grid-row: 2; }
.layers.is-live .layer--network { grid-row: 3; }
.layers.is-live .stage__pin {
position: sticky;
top: 0;
height: 100vh;
}
.layers.is-live .stage__fig {
width: min(100%, calc(100vh - 2 * (var(--layout-topbar) + var(--space-4))), 720px);
}
.layers.is-live .layer {
grid-column: text;
padding-block: 0;
min-height: 100vh;
}
.layers.is-live .layer__pin {
display: flex;
align-items: center;
min-height: 100vh;
}
.layers.is-live .layer__fig { display: none; }
.layers.is-live [data-roll] { transform-origin: left center; }
.layers.is-live .counters.is-waiting,
.layers.is-live .counters__note:has(+ .counters.is-waiting) { opacity: 0; transform: translateY(var(--space-2)); }
.layers.is-live .layer--network .layer__pin {
box-sizing: border-box;
align-items: flex-start;
padding-top: calc(var(--labels-bottom, 30vh) + var(--space-8));
}
.layers.is-live .stage[data-orbits] .hub__orbit {
animation: none;
transition:
--hub-draw 0.4s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i) * 0.1s),
opacity var(--motion-slow), filter var(--motion-slow);
}
.layers.is-live .stage[data-orbits="off"] .hub__orbit {
--hub-draw: 0deg;
transition-duration: 0.5s, var(--motion-slow), var(--motion-slow);
transition-delay: 0s;
}
.layers.is-live .stage[data-orbits="on"] .hub__orbit { --hub-draw: 360deg; }
.layers.is-live .stage .hub__halo { transition: opacity var(--motion-slow); }
.layers.is-live .stage[data-orbits="off"] .hub__halo { opacity: 0; }
.layers.is-live .points {
position: fixed;
left: var(--px); top: var(--py);
width: var(--ps); height: var(--ps);
margin: 0;
display: block;
pointer-events: none;
}
.layers.is-live .points__item {
position: absolute;
max-width: 36%;
opacity: 0;
visibility: hidden;
translate: var(--dx) var(--dy);
transition: opacity var(--motion-fast), translate var(--motion-fast), visibility 0s 160ms;
}
.layers.is-live .points__item:nth-child(1) { top: 0;    left: 0;  --dx: 8px;  --dy: 8px; }
.layers.is-live .points__item:nth-child(2) { top: 0;    right: 0; --dx: -8px; --dy: 8px; }
.layers.is-live .points__item:nth-child(3) { bottom: 0; left: 0;  --dx: 8px;  --dy: -8px; }
.layers.is-live .points__item:nth-child(4) { bottom: 0; right: 0; --dx: -8px; --dy: -8px; }
.layers.is-live .points__item:nth-child(even) { text-align: right; }
.layers.is-live .points__item:nth-child(even) .points__btn { transform-origin: right center; }
.layers.is-live .points__item:nth-child(even) .points__btn::before { margin-left: auto; }
.layers.is-live .points.is-shown .points__item {
opacity: 1;
visibility: visible;
translate: 0 0;
transition:
opacity var(--motion-slow) calc(var(--i) * 80ms),
translate var(--motion-slow) calc(var(--i) * 80ms),
visibility 0s calc(var(--i) * 80ms);
}
.layers.is-live .points.is-shown .points__btn { pointer-events: auto; }
.layers.is-live .stage[data-aim] .hub__flash { animation: none; opacity: 0; }
.layers.is-live .stage[data-aim] .hub__sector.is-shot .hub__flash { animation: hub-flash 3s linear 1; }
.layers.is-live .community { margin: 0; }
.layers.is-live .community__btn {
position: absolute;
left: var(--x); top: var(--y);
width: var(--w); height: var(--h);
min-height: 0;
padding: 0;
gap: var(--space-3);
border-radius: var(--radius-sm);
background: none;
clip-path: inset(-6px -6px -6px 100%);
visibility: hidden;
transition:
clip-path 0.12s ease-in, visibility 0s 0.12s,
color var(--motion-fast);
}
.layers.is-live .community__btn::after {
content: "";
flex: 1;
height: var(--t);
border-radius: var(--radius-pill);
background: linear-gradient(90deg,
var(--community-line) 0%, var(--community-line) 82%,
color-mix(in srgb, var(--community-line) 0%, transparent) 100%);
transition: height var(--motion-fast);
}
.layers.is-live .community.is-shown .community__btn {
clip-path: inset(-6px);
visibility: visible;
transition:
clip-path 0.3s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 0.1s),
visibility 0s calc(var(--i) * 0.1s),
color var(--motion-fast);
}
.layers.is-live .community__btn {
font: 600 var(--type-h4) / 1.2 var(--font-body);
letter-spacing: 0;
color: var(--color-ink);
}
.layers.is-live .community__btn:hover  { background: none; color: var(--color-action-primary-hover); --community-line: var(--community-ring); }
.layers.is-live .community__btn:active { background: none; color: var(--color-action-primary-active); }
.layers.is-live .community__btn:is(:hover, :focus-visible) .community__name { scale: 1.03; }
.layers.is-live .community__btn[aria-pressed="true"] {
background: none;
box-shadow: none;
color: var(--color-ink);
--community-line: var(--community-ring);
}
.layers.is-live .community__btn[aria-pressed="true"] .community__name { scale: 1.08; }
.layers.is-live .community__btn[aria-pressed="true"]::after { height: calc(var(--t) * 1.6); }
.layers.is-live .community:has([aria-pressed="true"]) .community__btn:not([aria-pressed="true"]) { color: var(--color-muted); }
.layers.is-live .stage[data-orbits="on"] .hub__comet {
--lap: calc((4s + var(--i) * 0.9s) * var(--speed));
animation: hub-comet-home var(--lap) cubic-bezier(0.4, 0, 0.6, 1) calc(var(--lap) * -0.4) infinite;
}
@keyframes hub-comet-home {
0%   { transform: rotate(354deg); opacity: 0; }
8%   { opacity: 0.9; }
96%  { opacity: 0.9; }
100% { transform: rotate(-6deg); opacity: 0; }
}
.layers.is-live .stage__canvas {
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
aspect-ratio: 1;
}
.layers.is-live .stage__hub,
.layers.is-live .stage__canvas { will-change: transform, opacity; }
.layers.is-live .stage { --fold: 0; --grow: 0; }
.layers.is-live .stage__hub {
opacity: var(--grow);
transform: scale(calc(0.15 + 0.85 * var(--grow))) rotate(calc(-180deg * (1 - var(--grow))));
}
.layers.is-live .stage__canvas {
opacity: calc(1 - var(--fold));
transform: scale(calc(1.2 - 0.9 * var(--fold))) rotate(calc(120deg * var(--fold)));
}
.layers.is-live .stage[data-view="canvas"] .stage__hub,
.layers.is-live .stage[data-view="hub"] .stage__canvas { visibility: hidden; }
@media (max-width: 979px) {
.layers {
display: block;
padding-inline: var(--space-6);
}
.stage__fig { width: min(100%, 560px); margin-inline: auto; }
.layer__pin { display: block; }
.layer__fig { margin: var(--space-8) auto 0; max-width: 560px; }
.stage { display: none; }
.layer--method .layer__text { display: grid; }
.layer--method .method-fig,
.layer--method .points {
grid-area: 2 / 1;
justify-self: center;
width: min(100%, 480px);
margin: var(--space-8) 0 0;
}
.method-fig { display: block; }
.method-fig .hub__band { pointer-events: none; }
.method-fig .hub__sector:hover { transform: none; }
.method-fig .hub__rotor { animation: none; }
.method-fig .hub__aim { transform: rotate(-45deg); }
.layer--method .points { position: relative; display: block; }
.layer--method .points__item { position: absolute; max-width: 38%; }
.layer--method .points__item:nth-child(1) { top: 0;    left: 0;  --point-color: var(--radar-cpf); }
.layer--method .points__item:nth-child(2) { top: 0;    right: 0; --point-color: var(--radar-ebs); }
.layer--method .points__item:nth-child(3) { bottom: 0; left: 0;  --point-color: var(--radar-dmr); }
.layer--method .points__item:nth-child(4) { bottom: 0; right: 0; --point-color: var(--radar-ahp); }
.layer--method .points__item:nth-child(even) { text-align: right; }
.layer--method .points__item:nth-child(even) .points__btn { transform-origin: right center; }
.layer--method .points__item:nth-child(even) .points__btn::before { margin-left: auto; }
.layer--method .points__btn { --point-color: inherit; font-size: var(--type-body-sm); line-height: 1.3; }
.layer--method .points__btn::before { margin-bottom: var(--space-2); }
}
@media (max-width: 719px) {
.layers { padding-inline: var(--space-4); }
.counters, .counters__note { margin-top: var(--space-8); }
.counters__item { padding: 0 var(--space-3); }
.counters__figure { font-size: var(--type-h2); }
.counters dt { font-size: var(--type-caption); line-height: 1.4; }
}
/* assets/css/sections/conduit.css */
main {
--conduit-lane: 112px;
}
.conduit {
position: fixed; inset: 0; z-index: 45;
width: 100%; height: 100%;
overflow: visible;
pointer-events: none;
}
.layers.is-live .community__name { transition: scale var(--motion-medium), opacity var(--motion-fast); }
.layers.is-live .community.is-conduit .community__name { opacity: 0; }
.layers.is-live .community.is-conduit .community__btn { pointer-events: none; }
/* assets/css/sections/reach.css */
.reach {
--reach-left:  max(var(--conduit-lane), calc((100% - var(--layout-container-max)) / 2 + var(--space-6)));
--reach-right: max(var(--space-6), calc((100% - var(--layout-container-max)) / 2 + var(--space-6)));
--reach-text:  min(380px, 32vw);
--reach-land:   color-mix(in srgb, var(--purple-100) 50%, var(--purple-050));
--reach-match:  var(--color-action-primary);
--reach-picked: var(--purple-900);
--reach-ring:   color-mix(in srgb, var(--graphic-violet) 45%, var(--purple-300));
--reach-land-faded:  color-mix(in srgb, var(--reach-land) 45%, var(--color-canvas));
--reach-match-faded: color-mix(in srgb, var(--reach-match) 35%, var(--reach-land));
--reach-count:    0.5625rem;
--reach-count-sm: 0.5rem;
padding: var(--space-section) var(--reach-right) var(--space-section) var(--reach-left);
background: var(--color-canvas);
}
.reach__frame {
display: grid;
grid-template-columns: var(--reach-text) minmax(0, 1fr);
grid-template-areas:
"head  head"
"panel map";
column-gap: var(--space-12);
row-gap: var(--space-12);
}
.reach__head { grid-area: head; max-width: var(--layout-container-narrow); }
.reach__lead {
margin: var(--space-4) 0 0;
font-size: var(--type-lead);
line-height: 1.65;
color: var(--color-body);
}
.reach__map {
grid-area: map;
align-self: start;
margin-right: calc(var(--reach-right) * -1 + var(--space-6));
}
.reach__filters {
display: flex; flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.reach__filter {
min-height: 44px;
padding: 0 var(--space-4);
border: 0;
border-radius: var(--radius-pill);
background: transparent;
box-shadow: inset 0 0 0 1px var(--color-hairline);
color: var(--color-ink);
font-family: inherit;
font-size: var(--type-label);
font-weight: 500;
line-height: 1.2;
cursor: pointer;
transition: background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.reach__filter:hover  { background: var(--color-canvas-tinted); }
.reach__filter:active { background: var(--color-canvas-pressed); }
.reach__filter[aria-pressed="true"] {
background: var(--color-action-primary);
box-shadow: none;
color: var(--color-on-action);
}
.reach__filter[aria-pressed="true"]:hover  { background: var(--color-action-primary-hover); }
.reach__filter[aria-pressed="true"]:active { background: var(--color-action-primary-active); }
.reach__filter:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.reach__canvas { position: relative; aspect-ratio: 950 / 620; }
.reach__land {
position: absolute; inset: 0;
display: block;
width: 100%; height: 100%;
}
.reach__land path {
fill: var(--reach-land);
stroke: var(--color-canvas);
stroke-width: 0.5;
transition: fill var(--motion-medium);
}
.reach__country { cursor: pointer; outline: none; }
.reach__country path { fill: var(--reach-match); }
.reach__country:active path { fill: var(--color-action-primary-hover); }
.reach.has-country .reach__land > path { fill: var(--reach-land-faded); }
.reach.has-country .reach__country path { fill: var(--reach-match-faded); }
.reach .reach__country.is-out { pointer-events: none; }
.reach .reach__country.is-out path { fill: var(--reach-land); }
.reach.has-country .reach__country.is-out path { fill: var(--reach-land-faded); }
.reach__lift { pointer-events: none; }
.reach__land .reach__lift path { fill: var(--reach-picked); stroke: var(--reach-ring); stroke-width: 1.5; transition: none; }
.reach__land .reach__lift .is-focus path { stroke: var(--color-focus-ring); stroke-width: 3; }
.reach__markers {
position: absolute; inset: 0;
margin: 0; padding: 0;
list-style: none;
pointer-events: none;
}
.reach__marker {
position: absolute; z-index: 2;
left: var(--x); top: var(--y);
width: var(--space-6); height: var(--space-6);
display: grid; place-items: center;
padding: 0; border: 0;
border-radius: var(--radius-full);
background: none;
cursor: pointer;
pointer-events: auto;
transform: translate(-50%, -50%);
visibility: hidden;
opacity: 0;
transition: opacity var(--motion-medium), visibility 0s var(--motion-medium);
}
.reach__marker.is-shown { visibility: visible; opacity: 1; transition: opacity var(--motion-medium); }
.reach__marker--group { z-index: 1; }
.reach__dot {
display: grid; place-items: center;
width: var(--space-3); height: var(--space-3);
border-radius: var(--radius-full);
background: var(--color-canvas);
box-shadow: 0 0 0 1px var(--color-ink);
color: var(--color-ink);
font-family: var(--font-accent);
font-size: var(--type-data-label);
font-weight: 500;
line-height: 1;
font-variant-numeric: tabular-nums;
transition: transform var(--motion-fast), background-color var(--motion-fast);
}
.reach__marker--group .reach__dot { width: var(--space-4); height: var(--space-4); font-size: var(--reach-count); }
.reach__marker:hover { z-index: 3; }
.reach__marker:hover .reach__dot { transform: scale(1.25); background: var(--color-canvas-tinted); }
.reach__marker:active .reach__dot { transform: scale(1.1); background: var(--color-canvas-pressed); }
.reach__marker[aria-pressed="true"],
.reach__marker.is-toured { z-index: 3; }
.reach__marker[aria-pressed="true"] .reach__dot,
.reach__marker.is-toured .reach__dot {
transform: scale(1.1);
box-shadow: 0 0 0 1px var(--color-ink), 0 0 0 calc(1px + var(--space-1)) var(--reach-ring);
}
.reach__marker:focus-visible { z-index: 3; outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.reach__panel { grid-area: panel; position: relative; }
.reach__entries { display: grid; }
@media (min-width: 980px) { .reach__panel { min-height: 38rem; } }
.reach__entries > * { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.reach__entries > .is-on { visibility: visible; animation: reach-fade-in var(--motion-slow); }
@keyframes reach-fade-in { from { opacity: 0; transform: translateY(var(--space-2)); } }
.reach__hint {
margin: var(--space-6) 0 0;
font-size: var(--type-body-sm);
line-height: 1.5;
color: var(--color-muted);
}
.reach__where {
margin: 0;
font-size: var(--type-h3);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--color-ink);
}
.reach__facts {
margin: var(--space-4) 0 0;
padding: var(--space-4) 0;
border-top: 1px solid var(--color-hairline-soft);
border-bottom: 1px solid var(--color-hairline-soft);
font-size: var(--type-body-sm);
line-height: 1.75;
white-space: pre-line;
color: var(--color-body);
}
.reach__photo {
display: block;
width: 100%; height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
margin-top: var(--space-4);
border-radius: var(--radius-sm);
}
.reach__step {
display: none; align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.reach__step.is-on { display: flex; }
.reach__step-count {
margin: 0;
min-width: 7ch;
text-align: center;
font-family: var(--font-accent);
font-size: var(--type-data-label);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
color: var(--color-muted);
}
.reach__step-btn {
display: grid; place-items: center;
width: 44px; height: 44px;
padding: 0; border: 0;
border-radius: var(--radius-full);
background: transparent;
box-shadow: inset 0 0 0 1px var(--color-hairline);
color: var(--color-ink);
cursor: pointer;
transition: background-color var(--motion-fast);
}
.reach__step-btn svg {
width: var(--space-4); height: var(--space-4);
fill: none; stroke: currentColor; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
}
.reach__step-btn:hover  { background: var(--color-canvas-tinted); }
.reach__step-btn:active { background: var(--color-canvas-pressed); }
.reach__step-btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
@media (max-width: 979px) {
.reach { --reach-left: var(--space-6); }
.reach__frame {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "head" "map" "panel";
row-gap: var(--space-8);
}
.reach__map { margin-right: 0; }
.reach__filters { display: none; }
.reach__panel { max-width: var(--layout-container-narrow); }
.reach__entries > * { display: none; }
.reach__entries > .is-on { display: block; }
}
@media (max-width: 719px) {
.reach { --reach-left: var(--space-4); --reach-right: var(--space-4); }
.reach__map { margin-inline: calc(var(--space-4) * -1); }
.reach__marker { width: var(--space-4); height: var(--space-4); }
.reach__marker--group { width: var(--space-4); height: var(--space-4); }
.reach__dot { width: var(--space-2); height: var(--space-2); }
.reach__marker--group .reach__dot { width: var(--space-3); height: var(--space-3); font-size: var(--reach-count-sm); }
}
/* assets/css/sections/alumni.css */
.alumni {
--points-trace: var(--purple-300);
--aff-edge: var(--purple-300);
--deck-nav: 44px;
padding: var(--space-section) 0;
border-radius: var(--radius-lg);
overflow-x: clip;
}
.alumni__layout {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-areas:
"head player"
"affs player";
grid-template-rows: auto 1fr;
column-gap: var(--space-12);
}
.alumni__head   { grid-area: head; }
.alumni__affs   { grid-area: affs; }
.alumni__player { grid-area: player; }
.alumni__title { max-width: 16ch; }
.alumni__lead {
margin: var(--space-6) 0 0;
max-width: 48ch;
font-size: var(--type-lead);
line-height: 1.65;
color: var(--color-body);
}
.alumni__affs {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: start;
align-content: start;
gap: var(--space-2) var(--space-4);
margin: var(--space-6) 0 0 calc(var(--space-2) * -2);
padding: 0; list-style: none;
}
.alumni__affs li { display: flex; min-width: 0; }
.alumni__affs .alumni__map {
grid-column: 1 / -1;
justify-self: center;
margin-top: var(--space-6);
}
.aff {
flex: 1;
min-width: 0;
display: grid;
place-items: center;
min-height: 44px;
padding: var(--space-3) var(--space-2);
box-sizing: border-box;
border: 0;
border-radius: var(--radius-sm);
background: none;
color: var(--color-body);
text-align: center;
cursor: pointer;
transition: color var(--motion-fast);
}
.aff__name {
position: relative;
display: inline-block;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font: 500 var(--aff-size, var(--type-h4)) / 1.15 var(--font-body);
transition: scale var(--motion-medium);
}
.aff__line { display: block; width: max-content; margin: 0 auto; white-space: nowrap; }
.aff:hover { color: var(--color-ink); }
.aff:is(:hover, :focus-visible) .aff__name { scale: 1.03; }
.aff:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.aff:active { color: var(--color-ink); }
.aff[aria-pressed="true"] { color: var(--color-ink); }
.aff[aria-pressed="true"] .aff__name { scale: 1.08; }
.aff:disabled { opacity: 0.5; cursor: not-allowed; }
.aff:disabled .aff__name { scale: none; }
.aff.is-sparked .points__trace,
.aff:hover .points__trace { animation: points-spark 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95); }
.deck {
container-type: inline-size;
display: grid;
grid-template-columns: var(--deck-nav) minmax(0, 1fr) var(--deck-nav);
grid-template-areas: "prev stage next";
align-items: center;
column-gap: var(--space-4);
}
.deck__nav--prev { grid-area: prev; }
.deck__stage     { grid-area: stage; }
.deck__nav--next { grid-area: next; }
.deck__stage {
--stage-w: calc(100cqw - (var(--deck-nav) + var(--space-4)) * 2);
--card-w: min(240px, calc(var(--stage-w) / 2.64));
--open-w: min(var(--stage-w), calc(var(--card-w) * 256 / 81));
--near: calc(var(--card-w) * 0.78);
--span: calc(var(--card-w) * 0.36);
position: relative;
perspective: 1200px;
height: calc(var(--card-w) * 16 / 9);
touch-action: pan-y;
}
.deck__card {
--a: 0;
--side: 0;
--t: 0;
--x: calc(var(--side) * (var(--near) + var(--span) * var(--t)));
--s: calc(0.74 - 0.12 * var(--t));
--turn: calc(var(--side) * -55deg);
position: absolute;
top: 0; left: 50%;
width: var(--card-w);
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px solid var(--color-hairline-on-band);
border-radius: var(--radius-lg);
background: linear-gradient(155deg, var(--color-wash-on-band-strong) 0%, var(--color-hairline-on-band-soft) 30%, transparent 55%);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
z-index: calc(20 - var(--a));
transform: translateX(calc(-50% + var(--x))) rotateY(var(--turn)) scale(var(--s));
transition: transform var(--motion-slow), width var(--motion-slow),
height var(--motion-slow), top var(--motion-slow),
opacity var(--motion-slow), border-color var(--motion-fast);
}
.deck__card::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
background: linear-gradient(155deg, var(--color-wash-on-band-strong) 0%, transparent 35%);
pointer-events: none;
}
.deck__card[data-pos="0"] { --x: 0px; --s: 1; --turn: 0deg; }
.alumni__player.is-open .deck__card[data-pos="0"] {
width: var(--open-w);
height: calc(var(--open-w) * 9 / 16);
top: calc((100% - var(--open-w) * 9 / 16) / 2);
}
.alumni__player.is-open .deck__card:not([data-pos="0"]) { opacity: 0; pointer-events: none; }
.deck__screen,
.deck__video {
display: grid;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
border-radius: inherit;
overflow: hidden;
background: none;
transition: opacity var(--motion-slow);
}
.deck__screen.ph { background: none; }
.deck__video { opacity: 0.72; }
.deck__card:not([data-pos="0"]) .deck__video { opacity: 0.4; }
.alumni__player.is-open .deck__card[data-pos="0"] .deck__video { opacity: 0.9; }
.deck__screen.ph::after { transition: opacity var(--motion-medium); }
.deck__card:not([data-pos="0"]) .ph::after { opacity: 0; }
.deck__hit {
position: absolute; inset: 0;
padding: 0;
border: 0;
border-radius: inherit;
background: transparent;
cursor: pointer;
display: grid;
place-items: center;
}
.deck__hit[hidden] { display: none; }
.deck__hit:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.deck__hit:disabled { cursor: not-allowed; }
.deck__card:has(.deck__hit:hover),
.deck__card:has(.deck__hit:focus-visible) { border-color: var(--aff-edge); }
.deck__card[data-pos="0"]:has(.deck__hit:active) { --s: 0.98; }
.deck__play {
display: grid;
place-items: center;
width: var(--space-16);
height: var(--space-16);
border: 1px solid var(--color-hairline-on-band);
border-radius: var(--radius-full);
background: linear-gradient(155deg, var(--color-wash-on-band-strong) 0%, transparent 60%),
color-mix(in srgb, var(--purple-900) 30%, transparent);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
color: var(--color-ink);
opacity: 0;
transform: scale(0.8);
transition: opacity var(--motion-medium), transform var(--motion-medium), border-color var(--motion-fast);
}
.deck__play svg { width: var(--space-6); height: var(--space-6); margin-left: 3px; fill: currentColor; }
.deck__card[data-pos="0"] .deck__play { opacity: 1; transform: none; }
.deck__card[data-pos="0"] .deck__hit:is(:hover, :focus-visible) .deck__play { transform: scale(1.08); border-color: var(--aff-edge); }
.deck__card[data-pos="0"] .deck__hit:active .deck__play { transform: scale(0.94); }
.deck__hit:disabled .deck__play { opacity: 0.5; }
.alumni__player.is-open .deck__card[data-pos="0"] .deck__play { opacity: 0; transform: scale(0.8); }
.deck__screen.ph { place-items: end center; padding-bottom: var(--space-8); }
.deck__nav {
position: relative; z-index: 5;
display: grid; place-items: center;
width: var(--deck-nav); height: var(--deck-nav);
padding: 0;
border: 1px solid var(--aff-edge);
border-radius: var(--radius-full);
background: transparent;
color: var(--color-ink);
cursor: pointer;
transition: background-color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.deck__nav svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deck__nav:hover { border-color: var(--color-ink); background: var(--color-canvas-tinted); }
.deck__nav:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.deck__nav:active { background: var(--color-canvas-pressed); transform: scale(0.94); }
.deck__nav:disabled { opacity: 0.5; transform: none; cursor: not-allowed; }
.who {
display: grid;
margin-top: var(--space-6);
padding: 0 calc(var(--deck-nav) + var(--space-4));
text-align: center;
}
.who__item {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity var(--motion-medium), visibility 0s var(--motion-medium);
}
.who__item.is-on { opacity: 1; visibility: visible; transition: opacity var(--motion-medium); }
.who__name {
margin: 0;
font-size: var(--type-h3);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--color-ink);
}
.who__based {
margin: var(--space-1) 0 0;
font-size: var(--type-body-sm);
line-height: 1.5;
color: var(--color-muted);
}
.who__org {
margin: var(--space-4) 0 0;
font-size: var(--type-label);
font-weight: 600;
line-height: 1.4;
color: var(--color-ink);
}
.who__quote { margin: var(--space-3) 0 0; }
.who__quote p {
margin: 0 auto;
max-width: 52ch;
font-size: var(--type-body);
line-height: 1.6;
color: var(--color-body);
}
.who__quote p::before { content: "\201C"; }
.who__quote p::after  { content: "\201D"; }
@media (min-width: 1320px) {
.alumni__player { margin-right: calc(var(--space-16) * -1); }
}
@media (max-width: 979px) {
.alumni__layout {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "head" "affs" "player";
grid-template-rows: auto;
}
.alumni__player { margin-top: var(--space-12); max-width: 640px; }
}
@media (max-width: 719px) {
.deck {
grid-template-columns: 1fr 1fr;
grid-template-areas: "stage stage" "prev next";
row-gap: var(--space-6);
}
.deck__stage { --stage-w: 100cqw; --card-w: min(240px, 56cqw); }
.alumni__lead,
.alumni__affs li:not(.alumni__map) { display: none; }
.alumni__affs { grid-template-columns: minmax(0, 1fr); margin-left: 0; }
.deck__nav--prev { justify-self: end; }
.deck__nav--next { justify-self: start; }
.who { padding: 0; }
}
/* assets/css/sections/whats-next.css */
.onnext {
padding: var(--space-section) 0;
background: var(--color-canvas);
}
.dates { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-hairline); }
.date {
display: grid;
grid-template-columns: minmax(160px, 200px) 1fr auto;
align-items: center; gap: var(--space-8);
padding: var(--space-8) 0;
border-bottom: 1px solid var(--color-hairline);
}
.date__when { margin: 0; display: grid; }
.date__when b {
font-family: var(--font-accent);
font-size: var(--type-h3);
font-weight: 600;
line-height: 1.3;
color: var(--color-ink);
}
.date__when span { font-size: var(--type-body-sm); color: var(--color-muted); }
.date__what h3 { margin: 0 0 var(--space-1); font-size: var(--type-h4); font-weight: 600; line-height: 1.4; color: var(--color-ink); }
.date__what p  { margin: 0; font-size: var(--type-body-sm); color: var(--color-muted); }
.status {
display: inline-flex; align-items: center; gap: var(--space-2);
margin-left: var(--space-3);
vertical-align: middle;
font-size: var(--type-label);
font-weight: 600;
color: var(--color-success);
}
.status[hidden] { display: none; }
.status__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-success); }
.onnext {
--dates-edge: var(--purple-300);
--dates-nav: 44px;
}
.dates-view.is-live {
--fade-top: 0px;
--fade-bottom: 0px;
margin-inline: calc(var(--space-2) * -1);
padding-inline: var(--space-2);
overflow: clip;
-webkit-mask-image: linear-gradient(180deg, transparent 0, var(--color-white) var(--fade-top), var(--color-white) calc(100% - var(--fade-bottom)), transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, var(--color-white) var(--fade-top), var(--color-white) calc(100% - var(--fade-bottom)), transparent 100%);
}
.dates-view.is-live .dates { position: relative; transition: transform var(--motion-slow); }
.dates-view.is-live .date  { transition: opacity var(--motion-slow); }
.dates-view.is-live .date.is-off { opacity: 0.4; }
.dates-nav {
display: flex; justify-content: center; gap: var(--space-3);
margin-top: var(--space-6);
}
.dates-nav[hidden] { display: none; }
.dates-nav__step {
display: grid; place-items: center;
width: var(--dates-nav); height: var(--dates-nav);
padding: 0;
border: 1px solid var(--dates-edge);
border-radius: var(--radius-full);
background: transparent;
color: var(--color-ink);
cursor: pointer;
transition: background-color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.dates-nav__step svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dates-nav__step:hover { border-color: var(--color-ink); background: var(--color-canvas-tinted); }
.dates-nav__step:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.dates-nav__step:active { background: var(--color-canvas-pressed); transform: scale(0.94); }
.dates-nav__step:disabled { opacity: 0.5; transform: none; background: transparent; border-color: var(--dates-edge); cursor: not-allowed; }
.onnext__foot { margin: var(--space-12) 0 0; font-size: var(--type-lead); color: var(--color-body); }
.onnext__foot a {
color: var(--color-action-primary);
font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
border-radius: var(--radius-sm);
}
.onnext__foot a:hover  { color: var(--color-action-primary-hover); }
.onnext__foot a:active { color: var(--color-action-primary-active); }
.onnext__foot a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
@media (max-width: 979px) {
.date { grid-template-columns: 1fr; gap: var(--space-4); }
.date__when { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--space-3); }
.date .btn { justify-self: start; }
}
/* assets/css/sections/partners.css */
.logos { padding: var(--space-section) 0 calc(var(--space-section) + var(--space-6)); overflow: hidden; background: var(--color-canvas-tinted); }
.logos .section-head { margin: 0 auto var(--space-12); text-align: center; }
.section-head__subhead {
margin: var(--space-4) 0 0;
font-size: var(--type-h3);
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.01em;
color: color-mix(in srgb, var(--purple-700) 75%, var(--purple-300));
}
.marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, var(--color-white) 8%, var(--color-white) 92%, transparent);
mask-image: linear-gradient(90deg, transparent, var(--color-white) 8%, var(--color-white) 92%, transparent);
}
.marquee + .marquee { margin-top: var(--space-4); }
.marquee__track {
display: flex; gap: var(--space-4);
width: max-content;
margin: 0; padding: 0; list-style: none;
animation: marquee 130s linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.logos:focus-within .marquee__track,
.logos.is-paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo {
display: grid; place-items: center;
min-width: 200px; height: 88px;
padding: 0 var(--space-6);
box-sizing: border-box;
border: 1px solid var(--color-hairline);
border-radius: var(--radius-md);
background: var(--color-canvas);
transition: border-color var(--motion-fast);
}
.logo:hover { border-color: var(--color-action-primary); }
.logo:has(.logo__link) { padding: 0; }
.logo__link {
align-self: stretch; justify-self: stretch;
display: grid; place-items: center;
padding: 0 var(--space-6);
border-radius: inherit;
}
.logo:has(.logo__link:active) { border-color: var(--color-action-primary-active); }
.logo__link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }
.logo--reversed .logo__link:focus-visible { outline-color: var(--color-focus-ring-dark); }
.logo img { display: block; width: auto; height: auto; max-width: 160px; max-height: var(--space-12); }
.logo--stacked img { max-height: var(--space-16); }
.logo--reversed { background: var(--color-canvas-dark); border-color: var(--color-canvas-dark); }
.logos__funder { margin-bottom: var(--space-12); }
.logos__funder img { display: block; width: auto; height: var(--space-24); margin: 0 auto; }
.logos__funder-link { display: block; width: fit-content; margin: 0 auto; border-radius: var(--radius-md); }
.logos__funder-link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.logos__foot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4);
margin: var(--space-12) 0 0;
padding: 0 var(--space-6);
font-size: var(--type-body-sm);
}
.logos__pause {
min-height: 44px; padding: 0 var(--space-4);
border: 0; border-radius: var(--radius-md);
background: transparent;
color: var(--color-action-primary);
font: 600 var(--type-label) / 1 var(--font-body);
cursor: pointer;
transition: background-color var(--motion-fast);
}
.logos__pause:hover  { background: var(--color-canvas-tinted); }
.logos__pause:active { background: var(--color-canvas-pressed); }
.logos__pause:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.marquee { -webkit-mask-image: none; mask-image: none; }
.marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
.marquee__track [aria-hidden="true"] { display: none; }
.logos__pause { display: none; }
}
/* assets/css/sections/close.css */
.close {
position: relative;
isolation: isolate;
overflow: hidden;
padding: calc(var(--space-section) + var(--space-8)) 0 var(--space-section);
background: linear-gradient(180deg, var(--purple-300) 0%, var(--purple-700) 35%, var(--purple-800) 60%, var(--purple-900) 100%);
text-align: center;
}
.close__aurora {
top: -20%; left: -10%; right: -10%; bottom: 0;
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 30%, rgba(0, 0, 0, 0.55) 55%, transparent 85%);
mask-image: linear-gradient(180deg, #000 0, #000 30%, rgba(0, 0, 0, 0.55) 55%, transparent 85%);
}
.close__aurora span:nth-child(1) { --c: var(--radar-dmr);      left: 10%;  top: -6%;  width: 48%; height: 100%; }
.close__aurora span:nth-child(2) { --c: var(--radar-ahp);      left: 64%;  top: -44%; width: 56%; height: 140%; }
.close__aurora span:nth-child(3) { --c: var(--radar-ebs);      left: 42%;  top: -35%; width: 60%; height: 90%; }
.close__aurora span:nth-child(4) { --c: var(--graphic-violet); left: 38%;  top: -26%; width: 44%; height: 120%; }
.close__aurora span:nth-child(5) { --c: var(--radar-cpf);      left: 14%;  top: -16%; width: 52%; height: 80%; }
.close__aurora span:nth-child(6) { --c: var(--radar-esw);      left: -6%;  top: -10%; width: 48%; height: 76%; }
.close__aurora span:nth-child(7) { --c: var(--radar-dmr);      left: -24%; top: -5%;  width: 52%; height: 110%; }
.close::after {
content: "";
position: absolute;
z-index: -1;
inset: 0 0 auto;
height: var(--space-12);
background: linear-gradient(180deg, var(--purple-050), color-mix(in srgb, var(--purple-050) 40%, transparent) 35%, transparent);
}
.close__inner { display: grid; justify-items: center; }
.close__title { margin-bottom: 0; }
.close__body { margin: 0; max-width: 44ch; font-size: var(--type-lead); line-height: 1.65; color: var(--color-body); }
/* assets/css/sections/footer.css */
.site-footer { padding: 0 0 var(--space-16); }
.site-footer__grid {
display: grid; gap: var(--space-12) var(--space-16); align-items: center;
grid-template-columns: minmax(0, 1fr) auto;
}
.site-footer__brand img { display: block; height: calc(var(--space-12) * 1.3); width: auto; max-width: 100%; }
.site-footer__funders { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); margin-left: auto; }
.site-footer__funders img { display: block; width: auto; max-width: 100%; }
.site-footer__funders .site-footer__swiss  { height: calc(var(--space-8) + var(--space-2)); }
.site-footer__funders .site-footer__canton { height: var(--space-16); }
.site-footer__funders .site-footer__ville  { height: var(--space-16); }
.site-footer__group h3 { margin: 0 0 var(--space-3); font: 600 var(--type-h4) / 1.4 var(--font-body); color: var(--color-ink); }
.site-footer__group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__group a,
.site-footer__legal a {
color: var(--color-muted);
text-decoration: none;
border-radius: var(--radius-sm);
transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
}
.site-footer__group a { font: 400 var(--type-body-sm) / 1.5 var(--font-body); }
.site-footer__group a:hover,
.site-footer__legal a:hover  { color: var(--color-ink); text-decoration: underline; }
.site-footer__group a:active,
.site-footer__legal a:active { color: var(--color-action-primary-active); }
.site-footer__group a:focus-visible,
.site-footer__legal a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.site-footer__group .site-footer__social { flex-direction: row; gap: var(--space-3); }
.site-footer__social a {
display: grid; place-items: center;
width: 44px; height: 44px;
border: 1px solid var(--color-hairline);
border-radius: var(--radius-full);
}
.site-footer__social svg { fill: currentColor; }
.site-footer__social a:hover { text-decoration: none; border-color: var(--color-muted); background: var(--color-canvas-tinted); }
.site-footer__social a:active { background: var(--color-canvas-pressed); }
.site-footer__legal {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6);
margin-top: var(--space-12); padding-top: var(--space-6);
border-top: 1px solid var(--color-hairline);
}
.site-footer__legal p,
.site-footer__legal a { margin: 0; font: 400 var(--type-caption) / 1.45 var(--font-body); color: var(--color-muted); }
.site-footer__legal ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
@media (max-width: 979px) {
.site-footer__grid { grid-template-columns: 1fr; gap: var(--space-12); justify-items: center; text-align: center; }
.site-footer__group .site-footer__social { justify-content: center; }
.site-footer__brand { display: none; }
.site-footer__funders { margin-left: 0; justify-content: center; }
.site-footer__legal { flex-direction: column; text-align: center; }
.site-footer__legal ul { justify-content: center; }
}