@font-face{font-family:'Jost';font-weight:400;font-display:swap;src:url(fonts/jost-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-weight:400;font-display:swap;src:url(fonts/jost-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}

:root{--accent:#baff00;--line:rgba(255,255,255,.18);--logo:min(158vmin,1800px)}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:#000;color:#fff;font:400 18px 'Futura PT',Futura,Jost,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1360px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
main.page{padding-block:72px 0}

/* background logo, spinning, with a grain layer clipped to its shape */
body::before,body::after{content:"";position:fixed;left:50%;top:50%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;animation:spin 180s linear infinite;animation-delay:var(--spin-delay,0s);z-index:-1;pointer-events:none}
body::before{background:url(img/symbol.webp) center/var(--logo) no-repeat;opacity:.28}
body::after{background:url(img/grain.svg) 0 0/300px 300px;mix-blend-mode:overlay;opacity:.6;-webkit-mask:url(img/symbol.webp) center/var(--logo) auto no-repeat;mask:url(img/symbol.webp) center/var(--logo) auto no-repeat}
@keyframes spin{to{transform:rotate(360deg)}}

/* menu and footer */
.menu,.foot{display:flex;flex-wrap:wrap;justify-content:center;font-size:18px;letter-spacing:.16em;text-transform:uppercase}
.menu{gap:8px 36px;padding:32px 16px 0}
.foot{gap:8px 32px;padding:72px 16px 56px}
.menu a,.foot a,.ul,.venue a,.desc a,.play{transition:color .2s}
.menu a:hover,.menu a[aria-current],.foot a:hover,.ul:hover,.venue a:hover,.desc a:hover,.play:hover,.ts .at:hover,.ts.now .at{color:var(--accent)}
.ul{font-size:18px;letter-spacing:.12em;text-transform:uppercase}

/* home */
.home{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:24px 16px}
.hero h1{margin:0;line-height:0}
.hero img{width:min(560px,80vw);height:auto;display:block}
.hero p{margin:0;max-width:520px;font-size:20px;line-height:1.5}
.home .foot{padding-block:24px 32px}

/* feed rows (events, recordings, cyphers) */
.feed,.cyphers{border-top:1px solid var(--line)}
.ev{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-start;padding:56px 0;border-bottom:1px solid var(--line)}
.ev>img{display:block;flex:0 0 auto;width:460px;max-width:100%;height:auto;scroll-margin-top:32px}
.info{flex:1 1 380px;min-width:0}
.date{font-size:18px;letter-spacing:.14em}
.date a{color:var(--accent);margin-left:18px}
.ev h2,.cy .n{font-size:clamp(26px,2.8vw,38px);font-weight:400;line-height:1.05;letter-spacing:.02em;color:var(--accent)}
.ev h2{margin:18px 0 0}
.ev h2 a,.chips a,.cy .by a{color:var(--accent)}
.venue{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:20px;line-height:1.5}
.chips{margin-top:32px;display:flex;flex-direction:column}
.chips span{padding:5px 0}
.ev .ul{display:inline-block;margin-top:32px}

/* recordings */
.vid{position:relative;flex:0 0 auto;width:640px;max-width:100%;aspect-ratio:16/9;background:#080808;border:1px solid var(--line)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* cyphers */
.cy{position:relative}
.cy iframe{position:absolute;width:1px;height:1px;border:0;opacity:0;pointer-events:none}
.art{display:block;flex:0 0 auto;width:460px;max-width:100%;aspect-ratio:1;background:#080808;border:1px solid var(--line)}
.art:not([href]){cursor:default}
.art img{display:block;width:100%;height:100%;object-fit:cover}
.cyh{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.play{display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:none;color:#fff;cursor:pointer}
.play svg{width:20px;height:20px;fill:currentColor}
.play .i-pause,.cy.on .play .i-play{display:none}
.cy.on .play .i-pause{display:block}
.desc{margin:28px 0 0;font-size:18px;line-height:1.6;white-space:pre-line}
.desc:empty,.tl:empty{display:none}
.tl{padding-top:12px}
.ts{display:flex;gap:16px;align-items:baseline;padding:5px 0;color:var(--accent)}
.ts .at{min-width:44px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.cy .dl,.cy .sc{display:block;width:fit-content;margin-top:20px}
.cy .dl{color:var(--accent)}
.cy .sc{margin-top:12px}

/* waveform seek bar */
.bar{display:flex;flex-direction:column;gap:30px;padding-top:28px}
.track{position:relative;cursor:pointer}
.wave{display:block;width:100%;height:88px}
.tick{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#fff;pointer-events:none}
.tick.hot{background:var(--accent)}
.cur,.tip{position:absolute;top:100%;margin-top:6px;font-size:18px;letter-spacing:.04em;white-space:nowrap}
.cur{color:var(--accent);cursor:pointer}
.cur:not([href]),.tip{pointer-events:none}
.cur.sw{animation:fade .4s ease-out}
@keyframes fade{from{opacity:.15}}
.tip{z-index:2;padding:3px 8px;background:#000;border:1px solid rgba(255,255,255,.35);white-space:pre}
.tip span{color:var(--accent)}
.time{align-self:flex-end;font-size:18px;letter-spacing:.08em;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}