:root{--ink:#ece6da;--muted:#c9c0b0;--dim:#8f8778;--amber:#ffc98a;--bg:#05050a;--card:rgba(12,10,18,.72);--line:rgba(236,230,218,.14)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{color:var(--ink);font-family:'News Cycle','Helvetica Neue',sans-serif}
a{color:var(--amber)}a:hover{color:#fff3e0}
.page{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(ellipse at 50% 12%,#1b1124 0%,#0a0910 42%,#05050a 78%);display:flex;flex-direction:column;align-items:center;padding:40px 16px 64px}
.stars{position:absolute;inset:0;pointer-events:none}
.sr-star{position:absolute;border-radius:50%;background:#fff;animation:sr-twinkle ease-in-out infinite}
.topbar{position:relative;width:100%;max-width:1200px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#b3aa99}
.topbar a{color:inherit;text-decoration:none}.topbar a:hover{color:var(--amber)}
.display{font-family:'Audiowide',sans-serif;font-weight:400;text-transform:uppercase}

/* hero */
/* width also capped by viewport height so the graph and title fit one screen, zoom included */
.graph{--w:calc(.8*clamp(260px,calc((100svh - 280px)*1.3),min(94vw,1000px)));position:relative;width:var(--w);margin-top:max(48px,calc(var(--w)*.13))}
.graph svg{display:block;width:100%;overflow:visible}
.hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;margin-top:clamp(24px,4svh,60px);max-width:960px}
.hero h1{margin:0;display:flex;flex-direction:column;align-items:center;gap:.1em;font-size:clamp(36px,min(8vw,9svh),112px);line-height:1;letter-spacing:.03em;color:#fff;text-shadow:0 0 40px rgba(255,201,138,.25)}
.hero h1 .sub{color:var(--amber);font-size:.72em;letter-spacing:.3em;margin-right:-.3em}
.tagline{margin:0;font-size:19px;font-weight:700;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;color:#d2c9b8}
.tagline .inf{color:var(--amber);font-size:1.35em;line-height:0}

/* portal hotspot under the infinity sign */
.portal{position:absolute;left:50%;top:-20%;width:15%;min-width:64px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:block}
.portal .ring{position:absolute;inset:0;border-radius:50%;transform:scale(.85);background:radial-gradient(circle,rgba(255,250,240,0) 0%,rgba(255,201,138,0) 70%);box-shadow:0 0 0 1px rgba(255,201,138,0);transition:transform .35s ease,box-shadow .35s ease,background .35s ease}
.portal:hover .ring,.portal:focus-visible .ring{transform:scale(1);background:radial-gradient(circle,rgba(255,250,240,.4) 0%,rgba(255,201,138,.2) 40%,rgba(255,201,138,0) 70%);box-shadow:0 0 0 2px rgba(255,201,138,.7),0 0 48px 10px rgba(255,201,138,.3)}
.portal:focus{outline:none}

/* animation */
@keyframes sr-twinkle{0%,100%{opacity:.2}50%{opacity:.9}}
@keyframes sr-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sr-pulse{from{stroke-dashoffset:.06}to{stroke-dashoffset:-1}}
@keyframes sr-fade{from{opacity:0}to{opacity:1}}
@keyframes sr-throb{0%,100%{opacity:.45}50%{opacity:1}}
.sr-field{opacity:0;animation:sr-fade 1.6s .1s forwards}
.sr-fam{stroke-dasharray:1;stroke-dashoffset:1;animation:sr-draw 2.6s cubic-bezier(.55,0,.9,.45) forwards}
.sr-curve{stroke-dasharray:1;stroke-dashoffset:1;animation:sr-draw 3.4s cubic-bezier(.55,0,.92,.4) .9s forwards}
.sr-pulse{stroke-dasharray:.06 1;stroke-dashoffset:.06;opacity:0;animation:sr-pulse cubic-bezier(.6,0,1,.55) 4s infinite,sr-fade .4s 4.3s forwards}
.sr-late{opacity:0;animation:sr-fade 1.4s 3.4s forwards}
.sr-asym{animation:sr-throb 4s ease-in-out infinite}

/* members */
.wrap{position:relative;width:100%;max-width:1100px;margin-top:72px;display:flex;flex-direction:column;gap:96px}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
h2.display{margin:0;font-size:clamp(26px,3.6vw,40px);letter-spacing:.06em;color:#fff}
.row{display:flex;flex-wrap:wrap;gap:20px}
.card{flex:1 1 280px;min-width:0;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--card);display:flex;flex-direction:column;gap:14px}
.card.big{flex-basis:340px;padding:36px;border-radius:20px;gap:16px}
.card.hot{border-color:rgba(255,201,138,.35)}
.card .num{font-family:'Audiowide',sans-serif;font-size:15px;color:var(--amber)}
.card h3{margin:0;font-family:'Audiowide',sans-serif;font-weight:400;font-size:20px;letter-spacing:.03em;color:#fff}
.card h2.display{font-size:26px;letter-spacing:.05em}
.card p,.note{margin:0;font-size:17px;line-height:1.6;color:var(--muted)}
.headrow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px}
.timeline{display:flex;height:64px;gap:4px}
.seg{min-width:0;border-radius:4px;position:relative;display:flex;overflow:hidden}
.seg.warm{flex:5 1 0;border-radius:10px 4px 4px 10px;background:rgba(236,230,218,.22)}
.seg.topic{flex:15 1 0}
.seg.topic .talk{flex:1 1 0;background:var(--amber)}
.seg.topic .floor{flex:2 1 0;background:rgba(255,201,138,.32)}
.seg.topic span{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-family:'Audiowide',sans-serif;font-size:13px;color:#140a02}
.seg.open{flex:10 1 0;border-radius:4px 10px 10px 4px;background:rgba(138,131,201,.6)}
.ticks{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.08em;color:var(--dim)}
.legend{display:flex;flex-wrap:wrap;gap:20px 40px;font-size:16px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:10px}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.big-num{font-family:'Audiowide',sans-serif;font-size:clamp(36px,5vw,56px);line-height:1;color:var(--amber)}
.label{font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}

/* sssshh */
.hush{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:80px 0}
.hush .glow{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,250,240,.55) 0%,rgba(255,201,138,.18) 35%,rgba(255,201,138,0) 70%);display:flex;align-items:center;justify-content:center;font-family:'Audiowide',sans-serif;font-size:56px;color:#fffaf0;animation:sr-throb 4s ease-in-out infinite}
.hush h1{margin:0;font-size:clamp(40px,9vw,120px);line-height:1;letter-spacing:.04em;color:#fff;text-shadow:0 0 40px rgba(255,201,138,.25)}
.hush p{margin:0;font-size:clamp(18px,2.4vw,26px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.back{display:inline-flex;align-items:center;min-height:44px;padding:0 24px;border:2px solid rgba(255,201,138,.5);border-radius:999px;color:var(--amber);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:background .2s,color .2s}
.back:hover{background:var(--amber);color:#140a02}
.back:focus-visible{outline:2px solid var(--amber);outline-offset:4px}

@media (prefers-reduced-motion:reduce){.sr-star,.sr-asym,.sr-pulse,.hush .glow{animation:none!important}.sr-fam,.sr-curve{animation:none!important;stroke-dashoffset:0}.sr-late,.sr-field{animation:none!important;opacity:1}}
