/* UNICON 2027 — "Own the Unknown".
   The space flight opens the homepage; everything else sits on the moving brand sky
   (deep blue, light beam, grain, pixel squares). Long reading parts sit on frosted glass.
   Colours come from the UNICON '27 artwork. Text colours are set per surface:
   "on the sky" (white text) by default, "on glass" (dark text) inside .glass panels. */
@view-transition { navigation: auto; }

:root {
  /* Brand sky, sampled from the artwork */
  --night: #151953;
  --deep: #1e2964;
  --royal: #2b3c80;
  --blue: #405fad;
  --bright: #628ad6;
  --ice: #9dbce6;
  --paper-mark: #eaeaea;
  --space: #05060d;
  --ink: #0d1030;
  --accent: #2f57a4;
  --accent-strong: #234a92;
  --accent-soft: #e4edfb;
  /* Surface-aware colours: these are the "on the sky" values */
  --fg: #ffffff;
  --fg-2: #e2e9f8;
  --fg-muted: #bccaea;
  --fg-invert: var(--ink);
  --rule: #ffffff2e;
  --accent-text: var(--ice);
  --subtle: #ffffff1a;
  --display: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --card-title: 'Electrolize', 'Space Grotesk', system-ui, sans-serif;
  --big: 'Zen Dots', 'Space Grotesk', system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  --max: 1200px;
  --radius: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header: 72px;
  color-scheme: dark;
}
/* Frosted glass: nearly white, dark text. */
.glass, .spotlight, .sm-panel, .fm-marquee {
  --fg: var(--ink);
  --fg-2: #353b55;
  --fg-muted: #565d78;
  --fg-invert: #ffffff;
  --rule: #dfe4f0;
  --accent-text: var(--accent);
  --subtle: #e8edf7;
  color: var(--fg);
}
.glass, .spotlight { background: #ffffffeb; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 24px 60px -32px #0a0f3a99, inset 0 0 0 1px #ffffffaa; border-radius: var(--radius); }
.panel { padding: clamp(20px, 3vw, 40px); }
/* Deep navy glass for emphasis panels: keeps the sky colours. */
.navy { border-radius: var(--radius); background: #151953d9; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 60px -32px #05072aaa, inset 0 0 0 1px #ffffff1f; color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
/* Lenis smooth scrolling (from lenis/dist/lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.gsap-reveal { transition: none !important; }
html { background: var(--night); scroll-padding-top: calc(var(--header) + 24px); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--fg); font: 17px/1.65 var(--body); overflow-x: clip; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin: 0; text-wrap: balance; }
/* Big headings are Zen Dots, which has one weight and runs wide, so they are set smaller and untracked. */
h1, h2 { font-family: var(--big); font-weight: 400; letter-spacing: 0; line-height: 1.12; }
p { margin: 0 0 1em; text-wrap: pretty; }
em { font-style: normal; color: var(--accent-text); }
::selection { background: var(--bright); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 10px 16px; background: #fff; color: var(--ink); border-radius: 8px; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: clamp(72px, 10vw, 128px); }
.section + .section { padding-top: 0; }
.eyebrow { display: block; margin: 0 0 16px; font: 600 12px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.lead { font-size: clamp(18px, 1.6vw, 20px); color: var(--fg-2); max-width: 58ch; }
.muted { color: var(--fg-muted); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 48px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head h2 { font-size: clamp(26px, 3.4vw, 46px); max-width: 17ch; }
.section-head p { max-width: 40ch; color: var(--fg-muted); margin: 0; }

/* ---------- The brand sky (fixed behind every page) ---------- */
.brand-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 25% 62%, #364b9766, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 10%, #4464b955, transparent 70%), linear-gradient(165deg, var(--night) 0%, var(--royal) 40%, var(--deep) 74%, #1d2862 100%); }
.sky-tilt { position: absolute; inset: 0; }
.sky-beam { position: absolute; left: 12%; top: -35%; width: 34%; height: 170%; background: linear-gradient(90deg, transparent, #9dbce640 35%, #c6dcf799 50%, #9dbce640 65%, transparent); filter: blur(34px); transform-origin: 50% 0; transform: rotate(32deg); opacity: .9; mix-blend-mode: screen; }
.brand-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-grain { position: absolute; inset: -50%; opacity: .26; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.brand-sky.is-paused * { animation-play-state: paused; }

/* ---------- The UNICON '27 wordmark ---------- */
.uc-mark { position: relative; display: inline-block; font: 900 1em/.9 var(--brand); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; padding-right: .95em;
  color: var(--paper-mark); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='3'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='1.6'%3E%3CfeDistantLight azimuth='45' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 120px, var(--paper-mark);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 .3em #9dbce640); }
.uc-mark sup { position: absolute; left: calc(100% - 3em); margin-left: .25em; top: -.04em; font-size: .3em; line-height: 1; letter-spacing: 0; -webkit-text-fill-color: #fff; }
.uc-spark { position: absolute; right: .42em; top: -.6em; width: 1.05em; height: 1.05em; pointer-events: none; animation: twinkle 4.5s ease-in-out infinite; }
.uc-spark::before, .uc-spark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: max(2px, .05em); border-radius: 3px; background: linear-gradient(90deg, transparent, #fff 50%, transparent); transform: translate(-50%, -50%) rotate(45deg); }
.uc-spark::after { transform: translate(-50%, -50%) rotate(-45deg); }
.uc-spark i { position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, #c6dcf7aa 30%, transparent 70%); }
@keyframes twinkle { 0%, 100% { transform: scale(.75) rotate(0deg); opacity: .75; } 12% { transform: scale(1.15) rotate(12deg); opacity: 1; } 24% { transform: scale(.85) rotate(4deg); opacity: .85; } }
a:hover .uc-spark, a:focus-visible .uc-spark { animation: flash .6s var(--ease); }
@keyframes flash { 40% { transform: scale(1.6) rotate(20deg); opacity: 1; } }
.uc-tagline { display: block; font: 800 1em/1.1 var(--brand); color: #fff; text-shadow: 0 0 .6em #9dbce688; letter-spacing: 0; }

/* ---------- Buttons and links ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--fg); color: var(--fg-invert); font-weight: 600; font-size: 15px; border: 0; transition: background .25s var(--ease), color .25s, transform .25s var(--ease); }
.button:hover { background: var(--bright); color: #fff; }
.button:active { transform: scale(.98); }
.button--light { background: #fff; color: var(--ink); }
.button--light:hover { background: var(--ice); color: var(--ink); }
.button--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.button--ghost:hover { background: var(--fg); color: var(--fg-invert); box-shadow: none; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ease), color .2s; }
.text-link:hover { background-size: 100% 1px; color: var(--accent-text); }
.text-link .arrow { transition: transform .3s var(--ease); }
.text-link:hover .arrow { transform: translateX(4px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

/* Star Border (React Bits): two lights travel along the edge of the one button that matters. */
.star-border { position: relative; display: inline-block; padding: 1.5px; border-radius: 999px; overflow: hidden; isolation: isolate; }
.star-border::before, .star-border::after { content: ""; position: absolute; z-index: -1; width: 300%; height: 50%; border-radius: 50%; opacity: .9; }
.star-border::before { bottom: -12px; right: -250%; background: radial-gradient(circle, var(--ice), transparent 10%); animation: star-bottom 5s linear infinite alternate; }
.star-border::after { top: -12px; left: -250%; background: radial-gradient(circle, #ffffff, transparent 10%); animation: star-top 5s linear infinite alternate; }
.star-border > .button { position: relative; box-shadow: inset 0 0 0 1px #ffffff26; }
@keyframes star-bottom { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } }
@keyframes star-top { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }

/* ---------- Header ---------- */
.site-header { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--header); display: flex; align-items: center; gap: 28px; padding-inline: var(--gutter); color: #fff; background: transparent; transition: background .35s, box-shadow .35s; }
.site-header.is-scrolled { background: #151953cc; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 #ffffff1f; }
.wordmark { display: inline-flex; align-items: center; font-size: 24px; padding-top: 6px; }
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a { padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; opacity: .85; transition: opacity .2s, background .2s; }
.site-nav a:hover { opacity: 1; background: #ffffff17; }
.site-nav a[aria-current="page"] { opacity: 1; background: #ffffff24; }
.countdown-badge { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: .08em; padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px #ffffff55; white-space: nowrap; }
.countdown-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 0 3px #9dbce633; }
.header-cta .button { min-height: 44px; padding: 0 20px; font-size: 14px; background: #fff; color: var(--ink); }
.header-cta .button:hover { background: var(--ice); }
.menu-toggle { display: none; margin-left: auto; align-items: center; gap: 10px; background: none; border: 0; padding: 10px 4px; font-weight: 600; font-size: 15px; }
.menu-toggle .bars { position: relative; width: 20px; height: 10px; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-toggle .bars::before { top: 0; } .menu-toggle .bars::after { top: 8px; }
.menu-open .menu-toggle .bars::before { top: 4px; transform: rotate(45deg); }
.menu-open .menu-toggle .bars::after { top: 4px; transform: rotate(-45deg); }

/* Staggered Menu (React Bits): colour layers sweep in, then the links follow one by one. */
.staggered-menu { position: fixed; inset: 0; z-index: 45; pointer-events: none; visibility: hidden; transition: visibility 0s .7s; }
.menu-open .staggered-menu { pointer-events: auto; visibility: visible; transition: none; }
.sm-scrim { position: absolute; inset: 0; background: #0a0f3a88; opacity: 0; transition: opacity .4s; }
.menu-open .sm-scrim { opacity: 1; }
.sm-layer, .sm-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 440px); transform: translateX(100%); transition: transform .55s var(--ease); }
.sm-layer:nth-of-type(2) { background: var(--bright); }
.sm-layer:nth-of-type(3) { background: var(--ice); transition-delay: .05s; }
.sm-panel { background: #f4f6fc; padding: calc(var(--header) + 32px) 32px 32px; display: flex; flex-direction: column; transition-delay: .1s; }
.menu-open .sm-layer, .menu-open .sm-panel { transform: none; }
.sm-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sm-links a { display: flex; align-items: baseline; gap: 14px; font: 700 clamp(36px, 10vw, 48px)/1.1 var(--display); letter-spacing: -.045em; padding: 4px 0; opacity: 0; transform: translateY(40%); transition: opacity .45s var(--ease), transform .55s var(--ease), color .2s; }
.sm-links a[aria-current="page"], .sm-links a:hover { color: var(--accent); }
.menu-open .sm-links a { opacity: 1; transform: none; }
.menu-open .sm-links li:nth-child(1) a { transition-delay: .22s; }
.menu-open .sm-links li:nth-child(2) a { transition-delay: .28s; }
.menu-open .sm-links li:nth-child(3) a { transition-delay: .34s; }
.menu-open .sm-links li:nth-child(4) a { transition-delay: .40s; }
.menu-open .sm-links li:nth-child(5) a { transition-delay: .46s; }
.sm-foot { margin-top: auto; display: grid; gap: 16px; opacity: 0; transition: opacity .4s .5s; }
.menu-open .sm-foot { opacity: 1; }
.sm-foot .button { width: 100%; }
.menu-open { overflow: hidden; }
.menu-open .site-header { color: var(--ink); background: transparent; box-shadow: none; backdrop-filter: none; }
.menu-open .site-header .uc-mark { filter: none; background: var(--ink); -webkit-background-clip: text; background-clip: text; }
.menu-open .site-header .uc-mark sup { -webkit-text-fill-color: var(--ink); }
.menu-open .site-header .uc-spark { visibility: hidden; }
.menu-open .site-header .header-cta, .menu-open .site-header .countdown-badge { visibility: hidden; }

@media (max-width: 960px) {
  .site-nav, .countdown-badge { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-cta { display: none; }
}

/* ---------- Opening flight ---------- */
.flight { position: relative; height: 100svh; min-height: 560px; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .flight { height: calc(100svh + 150svh); }
  @media (max-width: 700px) { .flight { height: calc(100svh + 120svh); } }
}
.flight-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; background: #030a1a; isolation: isolate; contain: strict; will-change: opacity; }
.fl { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); will-change: transform, opacity; pointer-events: none; }
.fl-backdrop { width: 100%; height: 100%; transform-origin: 50% 78%; }
.fl-backdrop img { width: 100%; height: 100%; object-fit: cover; }
/* Moving like a GIF: the sun flare breathes, sharp stars twinkle (js/starfield.js), and a shooting star crosses now and then. */
.fl-flare { position: absolute; left: 50%; top: 52%; width: 44vmin; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #ffffffd9 0, #c9ecff80 16%, #3ba3ff2e 40%, transparent 66%); mix-blend-mode: screen; animation: flare 5.5s ease-in-out infinite alternate; pointer-events: none; }
.fl-flare::after { content: ""; position: absolute; left: 50%; top: 50%; width: 260%; height: 3px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, #bfe6ffaa 35%, #ffffff 50%, #bfe6ffaa 65%, transparent); filter: blur(1.5px); }
@keyframes flare { from { opacity: .55; transform: translate(-50%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.fl-starfield { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fl-shoot { position: absolute; left: 62%; top: 14%; width: 180px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ffffff00, #dcefff 70%, #fff); transform: rotate(-24deg) translateX(0); opacity: 0; filter: drop-shadow(0 0 6px #9dbce6); animation: shoot 9s ease-in 2.5s infinite; }
@keyframes shoot { 0%, 88% { opacity: 0; transform: rotate(-24deg) translateX(0); } 90% { opacity: 1; } 97% { opacity: 0; transform: rotate(-24deg) translateX(-520px); } 100% { opacity: 0; transform: rotate(-24deg) translateX(-520px); } }
.flight-stage.is-paused * { animation-play-state: paused !important; }
/* Entering the atmosphere: a blue glow rises, then the whole scene dissolves into the brand sky. */
.fl-daylight { position: absolute; left: 0; right: 0; top: 100%; height: 200%; background: linear-gradient(#05060d00 0%, #0f2a52 14%, #2b3c80 30%, #405fad 42%, #2b3c80 60%, var(--royal) 100%); will-change: transform; }
.fl-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #05060dcc, #05060d00 60%), linear-gradient(0deg, #05060d99, #05060d00 30%); pointer-events: none; }

.fl-copy { position: absolute; z-index: 3; will-change: transform, opacity; }
.fl-open { left: var(--gutter); top: 50%; transform: translateY(-46%); max-width: min(680px, 90vw); }
.fl-open h1 { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 9vw, 132px); letter-spacing: -.055em; line-height: .95; margin: 0 0 28px; }
.fl-open h1 em, .fl-earthline em { color: var(--ice); }
.fl-open .lead { color: #c9c7da; margin-bottom: 32px; max-width: 34ch; }
.fl-open .eyebrow { color: #c9c7da; }
.fl-title { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; padding-inline: var(--gutter); opacity: 0; visibility: hidden; }
.fl-title::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1100px, 120%); height: 150%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, #071426cc, #07142666 55%, transparent); pointer-events: none; }
.fl-title h2 { font-size: clamp(48px, 10vw, 150px); line-height: .9; letter-spacing: 0; }
.fl-title .uc-tagline { font-size: clamp(18px, 2.6vw, 38px); margin-top: .3em; }
.fl-title p { font-size: clamp(15px, 1.4vw, 18px); color: #c9c7da; margin: 14px 0 28px; }
.fl-earthline { left: var(--gutter); top: 13%; opacity: 0; visibility: hidden; }
.fl-earthline p { font: 700 clamp(40px, 6vw, 84px)/1 var(--display); letter-spacing: -.05em; margin: 0; }
@media (max-width: 700px) {
  .fl-open { top: calc(var(--header) + 12px); bottom: auto; transform: none; }
    .fl-earthline { top: 14%; }
}

/* ---------- Split-Flap Text (React Bits): departure-board countdown ---------- */
.split-flap { display: inline-flex; flex-wrap: wrap; gap: 3px; font: 700 clamp(13px, 1.3vw, 16px)/1 ui-monospace, 'SF Mono', Consolas, monospace; perspective: 400px; }
.sf-tile { position: relative; display: grid; place-items: center; width: 1.45em; height: 1.95em; border-radius: 5px; background: #0d1030; color: #f8fafc; box-shadow: inset 0 -1px 0 #ffffff12; overflow: hidden; }
.sf-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #00000099; }
.sf-tile.is-space { background: transparent; box-shadow: none; width: .6em; }
.sf-tile.is-space::after { display: none; }
.sf-tile.flip { animation: sf-flip .09s ease-in-out; }
@keyframes sf-flip { 50% { transform: rotateX(-70deg); filter: brightness(.6); } }

/* ---------- Blur Text (React Bits) ---------- */
.bt-word { display: inline-block; white-space: pre; }
.bt-ready .bt-word { opacity: 0; filter: blur(10px); transform: translateY(-14px); }
.bt-in .bt-word { animation: bt-in .9s var(--ease) both; animation-delay: calc(var(--i) * 85ms); }
@keyframes bt-in { 0% { opacity: 0; filter: blur(10px); transform: translateY(-14px); } 55% { opacity: .6; filter: blur(4px); transform: translateY(3px); } 100% { opacity: 1; filter: blur(0); transform: none; } }

/* ---------- Warp Text (React Bits): the opening headline bent like glass ---------- */
[data-warp-text] { position: relative; }
.warp-canvas { position: absolute; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease); }
/* Once the glass copy is drawn, the real heading stays in place but is invisible. */
.warp-ready, .warp-ready * { color: transparent !important; -webkit-text-fill-color: transparent; }
.warp-ready .warp-canvas { opacity: 1; }

/* ---------- Rotating Text (React Bits) ---------- */
.rotating { display: inline-flex; align-items: center; vertical-align: bottom; padding: 0 .18em .04em; margin-left: .05em; border-radius: .16em; background: var(--ice); color: var(--ink); overflow: hidden; transition: width .5s var(--ease); white-space: nowrap; line-height: 1.12; }
.rt-char { display: inline-block; }
.rt-in { animation: rt-in .55s var(--ease) both; animation-delay: calc(var(--i) * 28ms); }
.rt-out { animation: rt-out .35s ease-in both; animation-delay: calc(var(--i) * 18ms); }
@keyframes rt-in { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rt-out { to { transform: translateY(-120%); } }

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------- Landing intro and key facts ---------- */
.landing { padding-top: clamp(24px, 4vw, 48px); }
.landing h2 { font-size: clamp(30px, 4.6vw, 68px); letter-spacing: 0; line-height: 1.1; max-width: 14ch; margin-bottom: 28px; }
.landing-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.facts { margin: clamp(40px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 clamp(8px, 2vw, 24px); }
.facts > p { margin: 0; padding: 30px 24px 30px 0; display: flex; align-items: center; font: 700 clamp(26px, 2.8vw, 36px)/1.15 var(--card-title); letter-spacing: -.02em; text-wrap: balance; }
.facts > p + p { padding-left: 24px; border-left: 1px solid var(--rule); }
.facts .text-link { font: inherit; letter-spacing: inherit; }
.facts .text-link .arrow { font-family: var(--display); }
@media (max-width: 900px) {
  .landing-grid { grid-template-columns: 1fr; gap: 8px; }
  .facts { grid-template-columns: 1fr; }
  .facts > p + p { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---------- Accordion Gallery (React Bits) ---------- */
.accordion-gallery { --ag-h: clamp(440px, 56vw, 600px); display: flex; gap: 10px; height: var(--ag-h); perspective: 1600px; }
.ag-panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--radius); overflow: hidden; background: var(--night); color: #fff; cursor: pointer; transition: flex-grow .7s var(--ease), transform .7s var(--ease); transform: rotateY(var(--ag-tilt, 0deg)); outline-offset: 3px; box-shadow: 0 24px 60px -32px #05072aaa; }
.ag-panel.is-active { flex-grow: 4.2; cursor: default; }
.ag-media { position: absolute; inset: 0; }
.ag-media img { width: 100%; height: 100%; object-fit: cover; transform: translateX(var(--ag-shift, 0)) scale(1.08); filter: grayscale(var(--ag-gray, 1)) brightness(var(--ag-bright, .62)); transition: filter .7s var(--ease), transform .9s var(--ease); }
.ag-panel.is-active .ag-media img { --ag-gray: 0; --ag-bright: .9; transform: scale(1.02); }
.ag-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0a0f3ae6 0%, #0a0f3a66 38%, #0a0f3a00 62%); }
.ag-trigger { position: absolute; inset: 0; z-index: 1; border: 0; background: none; padding: 0; border-radius: inherit; cursor: pointer; }
.ag-trigger:focus-visible { outline: 2px solid var(--ice); outline-offset: -4px; }
.ag-panel.is-active .ag-trigger { cursor: default; }
.ag-tab { position: absolute; z-index: 2; pointer-events: none; left: 50%; bottom: 24px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font: 700 18px/1 var(--display); letter-spacing: -.02em; white-space: nowrap; transition: opacity .3s; }
.ag-panel.is-active .ag-tab { opacity: 0; }
.ag-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 36px); width: min(100%, 560px); }
.ag-label { display: flex; align-items: center; gap: 12px; font: 700 clamp(26px, 3vw, 40px)/1 var(--display); letter-spacing: -.04em; }
.ag-label::before { content: ""; width: 3px; align-self: stretch; background: var(--ice); border-radius: 2px; }
.ag-body > * { opacity: 0; transform: translateX(-14px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.ag-panel.is-active .ag-body > * { opacity: 1; transform: none; }
.ag-panel.is-active .ag-body > :nth-child(2) { transition-delay: .08s; }
.ag-panel.is-active .ag-body > :nth-child(3) { transition-delay: .16s; }
.ag-panel.is-active .ag-body > :nth-child(4) { transition-delay: .24s; }
.ag-body p { color: #dce4f6; margin: 14px 0 18px; max-width: 42ch; }
.ag-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; counter-reset: step; }
.ag-steps li { counter-increment: step; display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: #f0f3fb; }
.ag-steps li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .62em; border-radius: 50%; background: var(--ice); }
.ag-body .button { min-height: 46px; }
.ag-panel:not(.is-active) .ag-body { visibility: hidden; transition: visibility 0s .4s; }
@media (max-width: 760px) {
  .accordion-gallery { flex-direction: column; --ag-h: 840px; perspective: none; }
  .ag-panel { transform: none; }
  .ag-tab { writing-mode: horizontal-tb; transform: none; left: 20px; bottom: auto; top: 50%; translate: 0 -50%; }
  .ag-panel.is-active { flex-grow: 5; }
  .ag-panel::after { background: linear-gradient(0deg, #0a0f3af2 0%, #0a0f3acc 55%, #0a0f3a40 100%); }
}

/* ---------- Spotlight Card (React Bits): a soft glow follows the pointer across glass ---------- */
.spotlight { position: relative; isolation: isolate; overflow: hidden; transition: transform .4s var(--ease), box-shadow .3s; }
.spotlight::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #628ad62e, transparent 70%); opacity: 0; transition: opacity .35s; }
.spotlight:hover::before { opacity: 1; }

/* ---------- Glowing border (Aceternity GlowingEffect): green light slides round a card's edge toward the pointer ---------- */
.has-glow { position: relative; }
.glow-edge { --start: 0; --active: 0; --spread: 40; --bw: 2px; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  --gradient: radial-gradient(circle, #6ee7b7 10%, #6ee7b700 20%), radial-gradient(circle at 40% 40%, #22c55e 5%, #22c55e00 15%), radial-gradient(circle at 60% 60%, #10b981 10%, #10b98100 20%), radial-gradient(circle at 40% 60%, #a7f3d0 10%, #a7f3d000 20%),
    repeating-conic-gradient(from 236.84deg at 50% 50%, #6ee7b7 0%, #22c55e 5%, #10b981 10%, #a7f3d0 15%, #6ee7b7 20%); }
.glow-edge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--bw) solid transparent; background: var(--gradient); background-attachment: fixed; opacity: var(--active); transition: opacity .3s;
  -webkit-mask: linear-gradient(#0000, #0000) padding-box, conic-gradient(from calc((var(--start) - var(--spread)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 2deg)) border-box; -webkit-mask-composite: source-in;
  mask: linear-gradient(#0000, #0000) padding-box, conic-gradient(from calc((var(--start) - var(--spread)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 2deg)) border-box; mask-composite: intersect; }
a.spotlight:hover { transform: translateY(-3px); }

/* ---------- Two days ---------- */
.days { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.day-card { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); min-height: 100%; }
.day-card h3 { font-size: clamp(30px, 3.4vw, 46px); margin: 6px 0 12px; }
.day-card > p { color: var(--fg-muted); }
.mini-timeline { list-style: none; margin: 16px 0 28px; padding: 0; border-left: 1px solid var(--rule); }
.mini-timeline li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0 10px 20px; }
.mini-timeline li::before { content: ""; position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.mini-timeline time { font: 600 14px ui-monospace, Consolas, monospace; color: var(--accent-strong); }
.day-card .text-link { margin-top: auto; align-self: start; }
@media (max-width: 800px) { .days { grid-template-columns: 1fr; } }

/* ---------- Numbers and photo strip ---------- */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: clamp(32px, 4vw, 56px); }
.numbers div { padding: 8px 24px 8px 0; }
.numbers div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.numbers strong { display: block; font: 700 clamp(44px, 6vw, 80px)/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.numbers span { color: var(--fg-muted); font-size: 15px; }
@media (max-width: 760px) { .numbers { grid-template-columns: 1fr 1fr; row-gap: 28px; } .numbers div:nth-child(3) { padding-left: 0; border-left: 0; } }
.photo-strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 32vw, 420px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 12px; margin-inline: calc(50% - 50vw); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip a { scroll-snap-align: start; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--subtle); box-shadow: 0 24px 60px -32px #05072aaa; }
.photo-strip a:nth-child(even) { aspect-ratio: 4 / 4.2; align-self: end; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.photo-strip a:hover img { transform: scale(1.04); }
.strip-controls { display: flex; gap: 10px; }
.round-button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #ffffff1f; color: #fff; box-shadow: inset 0 0 0 1px #ffffff40; display: grid; place-items: center; font-size: 18px; transition: background .2s, color .2s; }
.round-button:hover { background: #fff; color: var(--ink); }

/* ---------- Logo Loop (React Bits) ---------- */
.logo-loop { --gap: clamp(48px, 6vw, 96px); overflow: hidden; padding-block: 36px; border-radius: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ll-track { display: flex; width: max-content; animation: logo-loop var(--duration, 40s) linear infinite; }
.logo-loop:hover .ll-track { animation-play-state: paused; }
.ll-list { display: flex; align-items: center; gap: var(--gap); padding-right: var(--gap); list-style: none; margin: 0; }
.ll-list li { height: 96px; display: grid; place-items: center; transition: transform .35s var(--ease); }
.ll-list li:hover { transform: scale(1.1); }
/* Every logo gets the same box and is scaled to fit inside it, never cropped. */
.ll-list .sponsor-logo { display: flex; align-items: center; justify-content: center; }
.ll-list .sponsor-logo img { width: auto; height: auto; max-width: 240px; max-height: 88px; object-fit: contain; }
.ll-list .sponsor-logo--compact img { max-height: 56px; }
@media (max-width: 700px) { .ll-list li { height: 72px; } .ll-list .sponsor-logo img { max-width: 170px; max-height: 64px; } }
@keyframes logo-loop { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ll-track { animation: none; flex-wrap: wrap; width: auto; } .ll-list[aria-hidden] { display: none; } .ll-list { flex-wrap: wrap; justify-content: center; } .logo-loop { mask-image: none; -webkit-mask-image: none; } }
.sponsor-logo img { display: block; }

/* ---------- Profile Card (React Bits) ---------- */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 3vw, 36px); }
.profile-card { --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; --hyp: 0; position: relative; perspective: 900px; }
.pc-card { position: relative; aspect-ratio: .72; border-radius: 26px; overflow: hidden; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease), box-shadow .4s; color: #fff;
  background: radial-gradient(farthest-side circle at var(--px) var(--py), #9dbce699 0%, #628ad655 30%, transparent 70%), radial-gradient(circle at 80% 90%, #5b5fd066, transparent 55%), linear-gradient(160deg, #2b3c80 0%, #121547 70%);
  box-shadow: 0 30px 60px -30px #05072acc, inset 0 0 0 1px #ffffff26; }
.profile-card.is-active .pc-card { transition: transform .08s linear, box-shadow .4s; box-shadow: 0 40px 80px -30px #05072aee, inset 0 0 0 1px #ffffff40; }
.pc-glow { position: absolute; inset: -12%; z-index: -1; border-radius: 40px; background: radial-gradient(circle at var(--px) var(--py), #9dbce666, transparent 60%); filter: blur(36px); opacity: 0; transition: opacity .4s; }
.profile-card:hover .pc-glow { opacity: 1; }
.pc-pattern { position: absolute; inset: 0; opacity: calc(.12 + var(--hyp) * .3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 14c1.2 8.6 5.4 12.8 14 14-8.6 1.2-12.8 5.4-14 14-1.2-8.6-5.4-12.8-14-14 8.6-1.2 12.8-5.4 14-14z' fill='%23dceaff'/%3E%3C/svg%3E"); background-size: 56px; background-position: calc(var(--px) * -.2) calc(var(--py) * -.2); mix-blend-mode: screen; -webkit-mask-image: radial-gradient(circle at var(--px) var(--py), #000 0 25%, transparent 70%); mask-image: radial-gradient(circle at var(--px) var(--py), #000 0 25%, transparent 70%); }
.pc-shine { position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: calc(.15 + var(--hyp) * .5); background: repeating-linear-gradient(115deg, #ff9ec71a 0%, #8fcaff40 8%, #9dbce640 16%, #7cf5d01f 24%, #ff9ec71a 32%) calc(var(--px) * 1.5) calc(var(--py) * 1.5) / 300% 300%; }
.pc-glare { position: absolute; inset: 0; background: radial-gradient(farthest-corner circle at var(--px) var(--py), #ffffff38 0%, transparent 55%); mix-blend-mode: overlay; }
.pc-avatar { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; display: grid; place-items: end center; }
.pc-avatar img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; } /* cut-out portraits stand on the card's bottom edge */
.pc-silhouette { width: 62%; height: 82%; position: relative; }
.pc-silhouette::before { content: ""; position: absolute; left: 50%; top: 0; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(#3b4e9c, #1e2964); }
.pc-silhouette::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56%; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: linear-gradient(#34468e, #151953); }
.pc-initials { width: 46%; aspect-ratio: 1; margin-bottom: 30%; border-radius: 50%; display: grid; place-items: center; font: 700 clamp(32px, 4vw, 44px) var(--display); letter-spacing: -.04em; background: linear-gradient(145deg, #ffffff26, #ffffff08); box-shadow: inset 0 0 0 1px #ffffff40; }
.pc-head { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 28px 20px 0; text-align: center; }
.pc-head h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; background: linear-gradient(#fff, #c6dcf7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-head p { margin: 6px 0 0; font-size: 14px; color: #d6e0f5; }
.pc-foot { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; background: #ffffff14; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px #ffffff26; font-size: 13px; }
.pc-foot b { display: block; font-size: 13px; }
.pc-foot span { color: #c8d4ee; font-size: 12px; }
.pc-foot .pc-chip { padding: 8px 12px; border-radius: 10px; background: #ffffff1f; font-weight: 600; font-size: 12px; white-space: nowrap; color: #fff; }

/* ---------- Flowing Menu (React Bits) ---------- */
.flowing-menu { border-top: 1px solid var(--rule); }
.fm-item { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.fm-link { display: flex; align-items: center; justify-content: center; height: clamp(80px, 11vw, 132px); font: 700 clamp(32px, 5vw, 64px)/1 var(--display); letter-spacing: -.045em; color: #fff; }
.fm-marquee { position: absolute; inset: 0; pointer-events: none; background: #f4f6fc; transform: translateY(101%); transition: transform .55s var(--ease); }
.fm-item.no-anim .fm-marquee { transition: none; }
.fm-item.from-top .fm-marquee { transform: translateY(-101%); }
.fm-item.is-hover .fm-marquee { transform: none; }
.fm-track { display: flex; width: max-content; height: 100%; align-items: center; animation: logo-loop 18s linear infinite; }
.fm-track span { font: 700 clamp(26px, 4vw, 48px)/1 var(--display); letter-spacing: -.04em; padding: 0 22px; white-space: nowrap; }
.fm-track i { width: clamp(90px, 11vw, 150px); height: clamp(52px, 6.5vw, 86px); border-radius: 999px; background: center / cover; flex: none; }
@media (hover: none) { .fm-marquee { display: none; } }

/* ---------- Page heroes, final call, status ---------- */
.page-hero { position: relative; padding: calc(var(--header) + clamp(64px, 9vw, 120px)) 0 clamp(56px, 7vw, 96px); }
.page-hero h1 { font-size: clamp(32px, 5.4vw, 76px); letter-spacing: 0; line-height: 1.08; max-width: 14ch; margin-bottom: 24px; }
.page-hero .lead { max-width: 46ch; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 32px 0 0; padding: 0; }
.hero-meta div { display: grid; gap: 4px; }
.hero-meta dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.hero-meta dd { margin: 0; font-weight: 600; }
.final { position: relative; padding-block: clamp(96px, 12vw, 160px) 0; }
.final h2 { font-size: clamp(30px, 5.4vw, 80px); letter-spacing: 0; line-height: 1.08; max-width: 13ch; margin-bottom: 36px; }
.final .actions { margin-bottom: clamp(72px, 9vw, 120px); }
.status-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--subtle); box-shadow: inset 0 0 0 1px var(--rule); }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 0 4px #9dbce633; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px #9dbce600; } }

/* ---------- Footer ---------- */
.site-footer { padding: 64px 0 40px; background: #121547d9; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--rule); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.site-footer .wordmark { font-size: 36px; }
.footer-col h3 { font: 600 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 14px; }
.footer-col a { display: block; padding: 4px 0; opacity: .88; }
.footer-col a:hover { opacity: 1; color: var(--ice); }
.site-footer p { color: var(--fg-muted); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--fg-muted); }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- Tabs, chips, segmented switches (work on the sky and on glass) ---------- */
.segmented { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--subtle); box-shadow: inset 0 0 0 1px var(--rule); }
.segmented button { position: relative; z-index: 1; border: 0; background: none; padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--fg-muted); transition: color .3s; }
.segmented button:hover { color: var(--fg); }
.segmented button[aria-selected="true"] { color: var(--ink); }
.segmented .seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px #0a0f3a26; transition: transform .45s var(--ease), width .45s var(--ease); }
@media (max-width: 560px) { .segmented { max-width: 100%; } .segmented button { padding: 10px 9px; font-size: 13px; white-space: nowrap; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 0; padding: 8px 14px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); font-size: 14px; font-weight: 500; color: var(--fg-2); transition: background .2s, color .2s, box-shadow .2s; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--accent-text); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--fg-invert); box-shadow: none; }
.tabs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: panel-in .5s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Programme page ---------- */
.programme { padding-top: 0; }
.programme-bar { position: sticky; top: var(--header); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px clamp(20px, 3vw, 40px); margin: 0 calc(-1 * clamp(20px, 3vw, 40px)) 24px; background: #fffffff2; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 1px 0 var(--rule); }
.agenda { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.agenda-day h3 { font-size: clamp(30px, 3.2vw, 44px); margin-bottom: 8px; }
.agenda-day > p { color: var(--fg-muted); }
.sessions { list-style: none; margin: 24px 0 0; padding: 0; }
.session { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--rule); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.session time { font: 600 15px ui-monospace, Consolas, monospace; color: var(--accent-strong); }
.session span { font-weight: 500; }
.tag { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #eceef5; color: #353b55; white-space: nowrap; }
.tag[data-type="talk"] { background: #e6ecfb; color: #2f4ea0; }
.tag[data-type="masterclass"] { background: #e1f1ff; color: #0f5fa8; }
.tag[data-type="pitch"] { background: #fff0e3; color: #a24a0e; }
.tag[data-type="network"] { background: #e3f6ec; color: #1b7148; }
.session.is-dim { opacity: .22; }
.session.is-enter { animation: session-in .5s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes session-in { from { opacity: 0; transform: translateY(10px); } }
.agenda-note { font-size: 14px; color: var(--fg-muted); margin-top: 16px; }
.agenda-aside { position: sticky; top: calc(var(--header) + 110px); margin: 0; } /* the photo clips itself; the caption below must not be clipped by the corner */
.agenda-aside img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.agenda-aside figcaption { padding: 14px 4px 0; font-size: 14px; color: var(--fg-muted); }
@media (max-width: 900px) { .agenda { grid-template-columns: 1fr; } .agenda-aside { display: none; } .session { grid-template-columns: 64px 1fr; } .session .tag { grid-column: 2; justify-self: start; } }
.learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.learn-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.learn-card div { padding: 22px 24px 26px; }
.learn-card h3 { font-size: 24px; margin-bottom: 8px; }
.learn-card p { color: var(--fg-muted); margin: 0; }
@media (max-width: 900px) { .learn-grid { grid-template-columns: 1fr; } }

/* ---------- People ---------- */
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; padding: 20px 24px; }
.notice p { margin: 0; color: var(--fg-muted); }
.feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.feature img { border-radius: var(--radius); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 24px 60px -32px #05072aaa; }
.feature h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 16px; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

/* ---------- Partners ---------- */
.partner-cta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; padding: clamp(28px, 4vw, 48px); border-radius: 24px; }
.partner-cta h2 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 14px; }
.partner-cta p { color: var(--fg-muted); }
.partner-cta ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; align-content: center; }
.partner-cta li { display: flex; gap: 12px; }
.partner-cta li::before { content: "✦"; color: var(--ice); }
@media (max-width: 860px) { .partner-cta { grid-template-columns: 1fr; } }
.tier { margin-top: 48px; }
.tier h3 { font: 600 12px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.tier h3::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.tier[hidden] { display: none; }
.logo-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tier--diamond .logo-grid, .tier--platinum .logo-grid, .tier--venue .logo-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.logo-tile { display: grid; grid-template-rows: 1fr auto; gap: 12px; padding: 24px; min-height: 160px; }
.tier--diamond .logo-tile, .tier--platinum .logo-tile, .tier--venue .logo-tile { min-height: 220px; }
.logo-tile .sponsor-logo { display: grid; place-items: center; }
.logo-tile img { width: auto; max-width: min(100%, 220px); height: 72px; object-fit: contain; }
.tier--diamond .logo-tile img, .tier--platinum .logo-tile img, .tier--venue .logo-tile img { max-width: min(100%, 300px); height: 100px; }
.logo-tile .sponsor-logo--compact img { height: 56px; }
.logo-tile p { margin: 0; font-size: 14px; color: var(--fg-muted); text-align: center; }
.filter-results { font-size: 14px; color: var(--fg-muted); }

/* ---------- Our Story ---------- */
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 380px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 20px; margin-inline: calc(50% - 50vw); scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: #ffffff55 transparent; }
.milestone { scroll-snap-align: start; display: flex; flex-direction: column; padding: 28px; }
.milestone .year { font: 900 clamp(52px, 5.6vw, 76px)/1 var(--brand); letter-spacing: -.02em; color: var(--accent); margin-bottom: 20px; }
.milestone h3 { font-size: 26px; margin-bottom: 10px; }
.milestone p { color: var(--fg-muted); margin: 0; }
.milestone img { margin-top: auto; padding-top: 20px; border-radius: 12px; aspect-ratio: 3 / 2; object-fit: cover; }
.milestone.navy .year { color: var(--ice); }
.winners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.winner { padding: 28px; border-radius: var(--radius); }
.winner .place { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; }
.winner h3 { font-size: 32px; margin: 10px 0 6px; }
.winner strong { font: 700 22px var(--display); color: var(--accent-text); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .winners { grid-template-columns: 1fr; } }
.wide-photo { border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px -32px #05072aaa; }
.wide-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* ---------- Masonry (React Bits) ---------- */
.masonry { columns: 3 280px; column-gap: 14px; }
.masonry a { display: block; break-inside: avoid; margin-bottom: 14px; border-radius: 14px; overflow: hidden; background: var(--subtle); }
.masonry img { width: 100%; height: auto; transition: transform .8s var(--ease), filter .4s; }
.masonry a:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: no-preference) {
  .js .masonry a { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(6px); transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .masonry a.is-in { opacity: 1; transform: none; filter: none; }
}

/* ---------- Registration ---------- */
.reg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.reg-card { padding: 24px; }
.reg-card .eyebrow { margin-bottom: 10px; }
.reg-card h3 { font-size: 24px; margin-bottom: 8px; }
.reg-card p { color: var(--fg-muted); margin: 0; }
@media (max-width: 960px) { .reg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .reg-grid { grid-template-columns: 1fr; } }
.details-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; }
.details-list div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--rule); }
.details-list dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; margin-bottom: 6px; }
.details-list dd { margin: 0; font: 600 19px var(--display); letter-spacing: -.02em; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 600 clamp(19px, 2vw, 22px) var(--display); letter-spacing: -.02em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule); font: 400 22px var(--body); transition: transform .35s var(--ease), background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--accent-soft); }
.faq details p { color: var(--fg-2); max-width: 64ch; padding-bottom: 22px; margin: 0; }
.faq details[open] p { animation: panel-in .4s var(--ease); }
.two-col { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.two-col h2 { font-size: clamp(24px, 2.8vw, 38px); }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Sign-ups, theme and TigerLaunch ---------- */
.button--soon { cursor: default; opacity: .72; }
.button--soon:hover { background: #fff; color: var(--ink); }
.button--ghost.button--soon:hover { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.ag-body .actions { gap: 12px 20px; }
.ag-with { display: flex; align-items: center; gap: 10px; margin: 10px 0 0 !important; font-size: 14px; }
.ag-with .princeton-card { padding: 6px 10px; }
.ag-with .princeton-card img { height: 26px; }
.theme-points { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.theme-points li { padding: 22px 24px; color: var(--fg-2); }
.theme-points b { display: block; font: 700 20px/1.25 var(--display); letter-spacing: -.02em; color: var(--fg); margin-bottom: 6px; }
.theme .two-col > div:last-child p:not(.lead) { color: var(--fg-2); max-width: 58ch; }
@media (max-width: 860px) { .theme-points { grid-template-columns: 1fr; } }
.tl-band { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: var(--night); box-shadow: 0 24px 60px -32px #05072aaa, inset 0 0 0 1px #ffffff1f; color: var(--fg); }
.tl-art { position: absolute; inset: 0 0 0 auto; z-index: -2; width: min(100%, 900px); height: 100%; object-fit: cover; object-position: 75% 35%; filter: saturate(1.15) brightness(1.1); }
.tl-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #151953 0%, #151953ee 32%, #15195366 60%, #15195300 100%), linear-gradient(0deg, #15195399, #15195300 40%); }
.tl-content { padding: clamp(28px, 5vw, 64px); max-width: 680px; }
.tl-lockup { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 20px; }
.tl-lockup h2 { margin: 0; }
.tl-logo { display: inline-flex; align-items: center; gap: .32em; font: 800 clamp(40px, 5.6vw, 68px)/1 var(--brand); letter-spacing: -.02em; color: #fff; }
.tl-mark { width: .62em; height: auto; flex: none; }
.tl-with { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--fg-muted); }
.princeton-card { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px -12px #05072a99; }
.princeton-card img { display: block; height: 40px; width: auto; }
.tl-chance { margin: 22px 0 10px; font-weight: 600; }
.tl-wins { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.tl-wins li { display: flex; gap: 12px; color: var(--fg-2); }
.tl-wins li::before { content: "✦"; color: #ff9d16; }
.tl-deadline { font: 700 18px var(--display); letter-spacing: -.01em; color: #ffc46b; }
@media (max-width: 760px) {
  .tl-art { width: 100%; height: 46%; inset: 0 0 auto 0; object-position: 70% 20%; }
  .tl-band::before { background: linear-gradient(180deg, #15195340 0%, #151953e6 34%, #151953 48%); }
  .tl-content { padding-top: 140px; }
}
/* Card titles use the brand's Montserrat, the face of the UNICON '27 wordmark. */
/* Card headers are Electrolize (one weight, so no bold is faked). */
.reg-card h3, .day-card h3, .learn-card h3, .milestone h3, .winner h3, .theme-points b, .ag-label, .pc-head h3, .agenda-day h3, .partner-cta h2, .faq summary, .facts > p { font-family: var(--card-title); font-weight: 400; letter-spacing: .01em; line-height: 1.15; text-wrap: balance; }
.reg-card h3 { font-size: 26px; }
.day-card h3 { font-size: clamp(30px, 3vw, 42px); }
.learn-card h3 { font-size: 26px; }
.milestone h3 { font-size: 28px; }
.winner h3 { font-size: 34px; }
.theme-points b { font-size: 22px; }
.ag-label { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.pc-head h3 { font-size: clamp(22px, 2vw, 26px); background: none; color: #fff; -webkit-background-clip: border-box; background-clip: border-box; }
.faq summary { font-size: clamp(21px, 2.2vw, 25px); }
.agenda-day h3 { font-size: clamp(30px, 3.2vw, 44px); }
.partner-cta h2 { font-size: clamp(30px, 3.6vw, 46px); }
.facts > p { font-size: clamp(28px, 3vw, 40px); }
.signup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.signup-card { display: flex; flex-direction: column; }
.signup-card p { flex: 1; margin-bottom: 20px !important; }
.signup-card .actions { gap: 10px; }
.signup-card .button { min-height: 46px; padding: 0 20px; font-size: 14px; }
.signup-card .button--light { background: var(--ink); color: #fff; }
.signup-card .button--soon, .signup-card .button--soon:hover { background: transparent; color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--rule); opacity: 1; }
.signup-card .button--light:not(.button--soon):hover { background: var(--accent); }
@media (max-width: 960px) { .signup-grid { grid-template-columns: 1fr; } }

/* ---------- Lightbox ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: #fff; }
.lightbox::backdrop { background: #0a0f3aee; backdrop-filter: blur(6px); }
.lightbox figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 64px 72px 24px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 12px; object-fit: contain; animation: panel-in .35s var(--ease); }
.lightbox figcaption { padding-top: 14px; font-size: 14px; color: var(--fg-muted); }
.lightbox button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #ffffff1a; color: #fff; font-size: 20px; }
.lightbox button:hover { background: #ffffff33; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lb-next { right: 16px; top: 50%; translate: 0 -50%; }
@media (max-width: 640px) { .lightbox figure { padding: 64px 12px 24px; } .lb-prev, .lb-next { top: auto; bottom: 16px; translate: none; } }

/* ---------- Page transitions and motion preferences ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .star-border::before, .star-border::after, .sky-beam, .sky-grain, .uc-spark, .fl-flare, .fl-shoot { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}