:root {
    --acid: #d4af37;
    --acid-soft: #f1d77a;
    --white: #f4f4ed;
    --muted: #8d8d87;
    --black: #030303;
    --panel: rgba(10,10,9,.88);
    --line: rgba(255,255,255,.13);
    --safe-top: max(18px, env(safe-area-inset-top));
    --safe-bottom: max(18px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    background: radial-gradient(ellipse at 50% 42%, #303030 0%, #1b1b1b 36%, #0c0c0c 68%, #000 100%);
    color: var(--white);
}
body { overflow: hidden; font-family: Manrope, sans-serif; }
a, button { color: inherit; font: inherit; }
button { border: 0; }
.ui-icon { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
.skip-link { position: fixed; left: 22px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--acid); color: #050505; text-decoration: none; }
.skip-link:focus { top: 18px; }

.showcase, .webgl-scene { position: fixed; inset: 0; }
.webgl-scene canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ambient-glow, .grain { position: fixed; inset: 0; pointer-events: none; }
.ambient-glow { z-index: 2; background: radial-gradient(ellipse at 50% 42%, rgba(212,175,55,.075), transparent 38%); mix-blend-mode: screen; }
.grain { z-index: 3; opacity: .05; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); animation: jitter .18s steps(2) infinite; }
@keyframes jitter { 25% { transform: translate(2%,-2%); } 50% { transform: translate(-3%,1%); } 75% { transform: translate(2%,3%); } }

.site-header { position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: var(--safe-top) 25px 0; background: linear-gradient(#030303 8%, rgba(3,3,3,.78) 58%, transparent); pointer-events: none; }
.site-header a, .site-header button { pointer-events: auto; }
.logo { justify-self: start; display: flex; align-items: center; gap: 10px; color: var(--acid); text-decoration: none; }
.logo__arc { position: relative; width: 54px; height: 30px; overflow: hidden; }
.logo__arc::before { content: ""; position: absolute; left: 3px; top: 4px; width: 43px; height: 43px; border: 3px solid var(--acid); border-radius: 50%; }
.logo__arc i { position: absolute; left: 25px; bottom: -4px; width: 3px; height: 32px; background: #030303; transform-origin: 50% 100%; }
.logo__arc i:nth-child(1) { transform: rotate(-62deg); }.logo__arc i:nth-child(2) { transform: rotate(-38deg); }.logo__arc i:nth-child(3) { transform: rotate(-13deg); }.logo__arc i:nth-child(4) { transform: rotate(13deg); }.logo__arc i:nth-child(5) { transform: rotate(38deg); }.logo__arc i:nth-child(6) { transform: rotate(62deg); }
.logo strong { font: 400 12px/.85 Archivo Black; letter-spacing: .07em; }
.site-header nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); padding-top: 12px; white-space: nowrap; }
.site-header nav a { position: relative; padding: 6px 0; color: #767673; text-decoration: none; font-size: 10px; font-weight: 800; letter-spacing: .025em; }
.site-header nav a:hover, .site-header nav a.active { color: var(--white); }
.site-header nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--acid); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 18px; padding-top: 6px; }
.header-actions > span { display: flex; align-items: center; gap: 7px; color: #74746f; font: 500 7px DM Mono; letter-spacing: .12em; }
.header-actions > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); animation: live 1.2s steps(1) infinite; }
.header-actions button { display: flex; align-items: end; gap: 3px; height: 32px; padding: 7px 8px; background: rgba(255,255,255,.06); cursor: pointer; }
.header-actions button i { display: block; width: 2px; height: 13px; background: var(--acid); animation: meter .7s ease-in-out infinite alternate; }.header-actions button i:nth-child(2) { height: 8px; animation-delay: -.2s; }.header-actions button i:nth-child(3) { height: 17px; animation-delay: -.45s; }
.header-actions button[aria-pressed="true"] i { height: 3px; animation: none; }
@keyframes live { 50% { opacity: .25; } } @keyframes meter { to { height: 4px; opacity: .4; } }

.frame-focus { position: fixed; z-index: 5; left: 50%; top: 55%; width: min(42vw, 630px); aspect-ratio: 1.48; transform: translate(-50%,-50%); pointer-events: none; }
.frame-focus::before, .frame-focus::after, .frame-focus i::before, .frame-focus i::after { content: ""; position: absolute; width: 24px; height: 24px; border-color: rgba(212,175,55,.68); border-style: solid; }
.frame-focus::before { left: 0; top: 0; border-width: 2px 0 0 2px; }.frame-focus::after { right: 0; top: 0; border-width: 2px 2px 0 0; }
.frame-focus i:first-child::before { left: 0; bottom: 0; border-width: 0 0 2px 2px; }.frame-focus i:first-child::after { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.frame-focus span { position: absolute; right: 0; top: -21px; color: rgba(212,175,55,.75); font: 400 7px DM Mono; letter-spacing: .13em; }

.event-caption { position: fixed; z-index: 10; left: 50%; bottom: 53px; width: min(720px,62vw); transform: translateX(-50%); text-align: center; pointer-events: none; }
.event-caption > p:first-child { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 9px; color: var(--acid); font: 500 8px DM Mono; letter-spacing: .14em; }
.event-caption > p:first-child i { width: 28px; height: 1px; background: var(--acid); }
.event-caption h1 { margin: 0; font: 400 clamp(34px,3.4vw,54px)/.95 Archivo Black; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 3px 25px rgba(0,0,0,.9); }
.event-caption__bottom { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 10px; }
.event-caption__bottom > p { max-width: 520px; margin: 0; color: #acaca6; font-size: 10px; line-height: 1.6; }
.event-caption__bottom button { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; background: var(--acid); color: #090909; cursor: pointer; font: 700 8px DM Mono; letter-spacing: .08em; white-space: nowrap; }
.event-caption__bottom button .ui-icon { width: 12px; height: 12px; transition: transform .2s; }.event-caption__bottom button:hover .ui-icon { transform: translate(2px,-2px); }

.scrub-ui { position: fixed; z-index: 11; left: 50%; top: 50%; width: min(92vw,1320px); display: flex; align-items: center; justify-content: space-between; transform: translate(-50%,-50%); pointer-events: none; }
.scrub-ui > button { pointer-events: auto; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(3,3,3,.52); color: var(--white); cursor: pointer; backdrop-filter: blur(7px); transition: .25s; }.scrub-ui > button:hover { border-color: var(--acid); color: var(--acid); transform: scale(1.06); }
.scrub-ui > button .ui-icon { width: 15px; height: 15px; vertical-align: middle; }
.scrub-ui__line { position: fixed; left: 50%; top: calc(50vh + min(20vw,300px)); display: flex; gap: 7px; transform: translateX(-50%); pointer-events: auto; }
.scrub-dot { width: 22px; height: 19px; padding: 0; background: transparent; cursor: pointer; }
.scrub-dot::before { content: ""; display: block; width: 13px; height: 2px; margin: auto; background: #575754; transition: .25s; }.scrub-dot:hover::before, .scrub-dot.active::before { width: 19px; background: var(--acid); box-shadow: 0 0 12px rgba(212,175,55,.55); }

.gesture-hint { position: fixed; z-index: 10; left: 28px; bottom: 27px; display: flex; align-items: center; gap: 9px; color: #5c5c58; }
.gesture-hint__mouse { display: block; width: 15px; height: 22px; border: 1px solid #5c5c58; border-radius: 8px; }.gesture-hint__mouse i { display: block; width: 1px; height: 5px; margin: 4px auto; background: var(--acid); animation: mouse 1.2s ease infinite; }
.gesture-hint p { margin: 0; font: 400 7px DM Mono; letter-spacing: .1em; }.gesture-hint b { color: #8f8f88; font-weight: 500; }
@keyframes mouse { 70% { transform: translateY(6px); opacity: 0; } }
.live-meter { position: fixed; z-index: 10; right: 28px; bottom: 27px; display: flex; align-items: center; gap: 8px; color: #656560; font: 400 7px DM Mono; letter-spacing: .1em; }.live-meter i { width: 5px; height: 5px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px var(--acid); }.live-meter b { color: #aaa9a1; font-weight: 400; }

.preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; background: #030303; transition: opacity .7s, visibility .7s; }
.preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__mark { position: relative; width: 74px; height: 38px; overflow: hidden; }
.preloader__mark::before { content: ""; position: absolute; left: 7px; top: 5px; width: 56px; height: 56px; border: 4px solid var(--acid); border-radius: 50%; animation: spin 1.5s linear infinite; }
.preloader__mark i { position: absolute; left: 35px; bottom: -4px; width: 5px; height: 44px; background: #030303; transform-origin: 50% 100%; }.preloader__mark i:nth-child(1){transform:rotate(-65deg)}.preloader__mark i:nth-child(2){transform:rotate(-40deg)}.preloader__mark i:nth-child(3){transform:rotate(-14deg)}.preloader__mark i:nth-child(4){transform:rotate(14deg)}.preloader__mark i:nth-child(5){transform:rotate(40deg)}.preloader__mark i:nth-child(6){transform:rotate(65deg)}
.preloader p { margin: 17px 0 8px; color: var(--white); font: 400 11px Archivo Black; letter-spacing: .08em; }.preloader > span { color: var(--acid); font: 400 8px DM Mono; letter-spacing: .12em; }
@keyframes spin { to { transform: rotate(360deg); } }

.lightbox { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; }
.lightbox__backdrop { position: absolute; inset: 0; opacity: 0; background: rgba(0,0,0,.83); backdrop-filter: blur(14px); transition: opacity .4s; }
.lightbox__dialog { position: absolute; inset: 0; opacity: 0; transform: scale(.96); transition: opacity .4s, transform .55s cubic-bezier(.2,.85,.2,1); }
.lightbox.open { visibility: visible; pointer-events: auto; }.lightbox.open .lightbox__backdrop { opacity: 1; }.lightbox.open .lightbox__dialog { opacity: 1; transform: none; }
.lightbox__close { position: absolute; z-index: 3; left: 28px; top: var(--safe-top); display: flex; align-items: center; gap: 9px; padding: 0; background: transparent; color: #8b8b84; cursor: pointer; font: 500 8px DM Mono; letter-spacing: .1em; }
.lightbox__close span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(212,175,55,.65); color: var(--acid); }.lightbox__close .ui-icon { width: 15px; height: 15px; }
.lightbox__media { position: absolute; left: 5vw; top: 50%; width: min(55vw,820px); height: min(63vh,630px); transform: translateY(-50%); background: #080808; box-shadow: 0 35px 100px rgba(0,0,0,.5); }
.lightbox__photo { position: absolute; inset: 30px 0; background-size: cover; background-position: center; transition: background-image .3s, opacity .25s; }
.lightbox__film-edge { position: absolute; z-index: 2; left: 0; right: 0; height: 31px; background: #0a0a09; overflow: hidden; }
.lightbox__film-edge::before { content: ""; position: absolute; inset: 8px 0; background: repeating-linear-gradient(90deg, transparent 0 8px, var(--acid) 8px 29px, transparent 29px 40px); opacity: .32; }
.lightbox__film-edge--top { top: 0; }.lightbox__film-edge--bottom { bottom: 0; }
.lightbox__thumbnails { position: absolute; z-index: 4; left: 50%; bottom: -65px; display: flex; gap: 8px; transform: translateX(-50%); }
.detail-thumb { width: 76px; height: 47px; border: 1px solid rgba(255,255,255,.18); background-position: center; background-size: cover; cursor: pointer; opacity: .55; transition: .2s; }.detail-thumb:hover, .detail-thumb.active { border-color: var(--acid); opacity: 1; transform: translateY(-3px); }
.lightbox__copy { position: absolute; right: 5vw; top: 50%; width: min(31vw,420px); transform: translateY(-52%); }
.lightbox__meta { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--acid); color: var(--acid); font: 500 8px DM Mono; letter-spacing: .12em; }
.lightbox__copy > p:first-of-type { margin: 24px 0 10px; color: #8d8d87; font: 400 9px DM Mono; letter-spacing: .12em; text-transform: uppercase; }
.lightbox__copy h2 { margin: 0; font: 400 clamp(44px,5.1vw,78px)/.88 Archivo Black; letter-spacing: -.05em; text-transform: uppercase; text-wrap: balance; }
.lightbox__description { margin: 22px 0 0; color: #b1b1aa; font-size: 11px; line-height: 1.8; }
.participants { position: relative; min-width: 0; margin-top: 25px; overflow: hidden; }.participants > span { display: flex; align-items: center; justify-content: space-between; color: #62625e; font: 500 7px DM Mono; letter-spacing: .12em; }.participants > span::after { content: "DRAG HORIZONTALLY"; color: rgba(212,175,55,.58); font-size: 6px; letter-spacing: .1em; }
.participants::after { content: ""; position: absolute; z-index: 2; right: 0; bottom: 5px; width: 30px; height: 31px; background: linear-gradient(90deg, transparent, rgba(3,3,3,.94)); pointer-events: none; }
#detail-participants { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; margin-top: 9px; padding: 0 24px 7px 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; touch-action: pan-x; }
#detail-participants::-webkit-scrollbar { display: none; }
#detail-participants.dragging { cursor: grabbing; user-select: none; }
.participant { flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); color: #999993; font: 400 7px DM Mono; white-space: nowrap; }.participant::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 6px; border-radius: 50%; background: var(--acid); }
.lightbox__navigation { position: absolute; left: 50%; bottom: 22px; width: min(490px,47vw); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; transform: translateX(-50%); }.lightbox__navigation button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; background: transparent; color: #888882; cursor: pointer; font: 500 8px DM Mono; letter-spacing: .1em; }.lightbox__navigation button:last-child { justify-self: end; text-align: right; }.lightbox__navigation button .ui-icon { width: 13px; height: 13px; }.lightbox__navigation button:hover { color: var(--acid); }.lightbox__navigation > span { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 9px DM Mono; }.lightbox__navigation small { color: #555551; font-size: 6px; letter-spacing: .12em; }

.webgl-fallback { position: fixed; z-index: 30; inset: 100px 5vw 40px; padding: 30px; overflow: auto; background: #080808; }.webgl-fallback small { color: var(--acid); }.webgl-fallback h2 { font: 400 48px Archivo Black; }.webgl-fallback article { padding: 16px 0; border-top: 1px solid var(--line); }.webgl-fallback article p { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
body.lightbox-open .event-caption, body.lightbox-open .scrub-ui, body.lightbox-open .gesture-hint, body.lightbox-open .live-meter { opacity: 0; pointer-events: none; transition: opacity .25s; }

@media (max-width: 900px) {
    .site-header nav { gap: 13px; }.site-header nav a { font-size: 9px; }.header-actions > span { display: none; }
    .event-caption { width: 74vw; }.frame-focus { width: 54vw; }
    .lightbox__media { width: 51vw; }.lightbox__copy { width: 35vw; }
}

@media (max-width: 760px) {
    .site-header { height: 108px; grid-template-columns: 1fr auto; padding-inline: 16px; }
    .site-header nav { position: absolute; left: 0; right: 0; top: 56px; display: flex; justify-content: flex-start; gap: 20px; padding: 0 18px 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; pointer-events: auto; mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
    .site-header nav::-webkit-scrollbar { display: none; }
    .site-header nav a { flex: 0 0 auto; padding: 8px 0; font: 700 9px DM Mono; letter-spacing: .06em; text-transform: uppercase; }
    .logo__arc { width: 44px; }.logo strong { font-size: 10px; }.header-actions { grid-column: 2; }
    .frame-focus { top: 40%; width: min(82vw, 420px); aspect-ratio: 1.58; }
    .event-caption { left: 18px; right: 18px; bottom: calc(var(--safe-bottom) + 72px); width: auto; transform: none; text-align: left; }
    .event-caption > p:first-child { justify-content: flex-start; margin-bottom: 7px; }.event-caption h1 { max-width: 100%; font-size: clamp(28px,9.2vw,42px); line-height: .94; }
    .event-caption__bottom { justify-content: space-between; gap: 10px; }.event-caption__bottom > p { display: none; }
    .scrub-ui { top: 40%; width: calc(100% - 18px); }.scrub-ui > button { width: 36px; height: 36px; }.scrub-ui__line { top: auto; bottom: calc(var(--safe-bottom) + 47px); }
    .gesture-hint { left: 16px; bottom: var(--safe-bottom); }.live-meter { right: 16px; bottom: var(--safe-bottom); }.gesture-hint p { display: none; }
    .lightbox__close { left: 12px; }.lightbox__media { left: 12px; right: 12px; top: 68px; width: auto; height: min(31vh, 280px); transform: none; }
    .lightbox__thumbnails { bottom: -53px; }.detail-thumb { width: 62px; height: 39px; }
    .lightbox__copy { left: 18px; right: 18px; top: min(49vh, 430px); width: auto; transform: none; }.lightbox__copy > p:first-of-type { margin-top: 18px; }.lightbox__copy h2 { font-size: clamp(36px,12vw,54px); }.lightbox__description { margin-top: 12px; line-height: 1.65; }.participants { margin-top: 12px; }
    .lightbox__navigation { width: calc(100% - 36px); bottom: var(--safe-bottom); }
}

@media (max-width: 430px) and (orientation: portrait) {
    .frame-focus, .scrub-ui { top: 43%; }
    .event-caption { bottom: calc(var(--safe-bottom) + 50px); }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
    .site-header { height: 58px; grid-template-columns: 1fr auto; padding: max(8px, env(safe-area-inset-top)) 14px 0; }.site-header nav, .header-actions > span { display: none; }
    .logo__arc { width: 40px; height: 25px; }.logo__arc::before { width: 35px; height: 35px; }.logo strong { font-size: 9px; }.header-actions { grid-column: 2; padding-top: 0; }
    .frame-focus { top: 49%; width: min(52vw, 440px); aspect-ratio: 1.58; }
    .event-caption { left: auto; right: 18px; bottom: 20px; width: 38vw; transform: none; text-align: left; }
    .event-caption > p:first-child { justify-content: flex-start; margin-bottom: 5px; }.event-caption h1 { max-width: 100%; font-size: clamp(22px,4vw,34px); }.event-caption__bottom { justify-content: flex-start; margin-top: 7px; }.event-caption__bottom > p { display: none; }
    .scrub-ui { top: 50%; width: calc(100% - 16px); }.scrub-ui__line, .gesture-hint, .live-meter { display: none; }
    .lightbox__close { left: 12px; top: 10px; }.lightbox__media { left: 14px; right: auto; top: 54px; width: 54vw; height: calc(100vh - 88px); transform: none; }
    .lightbox__thumbnails { right: -60px; bottom: auto; left: auto; top: 50%; flex-direction: column; transform: translateY(-50%); }.detail-thumb { width: 50px; height: 31px; }
    .lightbox__copy { left: auto; right: 16px; top: 49%; width: 35vw; transform: translateY(-50%); }.lightbox__copy > p:first-of-type { margin: 10px 0 5px; }.lightbox__copy h2 { font-size: clamp(26px,5vw,44px); }.lightbox__description { margin-top: 9px; font-size: 9px; line-height: 1.45; }.participants { display: none; }
    .lightbox__navigation { left: auto; right: 16px; bottom: 5px; width: 35vw; transform: none; }
}

@media (max-height: 700px) and (min-width: 761px) {
    .event-caption { bottom: 30px; }.lightbox__media { height: 58vh; }.lightbox__copy { transform: translateY(-46%); }.participants { margin-top: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}