html,body{margin:0;padding:0;background:#000;color:#ECECF2;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
a:hover{color:#F742C5}
button{font:inherit}
@keyframes bcvrBlink{0%,60%{opacity:1}70%,100%{opacity:.2}}
@keyframes bcvrMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bcvrSpin{to{transform:rotate(360deg)}}

.site{container-type:inline-size;container-name:site;background:#000;color:#ECECF2;font-family:'Space Grotesk',system-ui,sans-serif;min-height:100vh;position:relative;overflow-x:clip}
.mono{font-family:'JetBrains Mono',monospace}
.display{font-family:Audiowide,sans-serif;text-transform:uppercase;font-weight:400}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#F742C5}
.grad-warm{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.hud{position:fixed;width:18px;height:18px;opacity:.45;z-index:100;pointer-events:none;border-color:#F742C5;border-style:solid;border-width:0}
.hud.tl{top:14px;left:14px;border-top-width:1px;border-left-width:1px}
.hud.tr{top:14px;right:14px;border-top-width:1px;border-right-width:1px}
.hud.bl{bottom:14px;left:14px;border-bottom-width:1px;border-left-width:1px}
.hud.br{bottom:14px;right:14px;border-bottom-width:1px;border-right-width:1px}

.nav a:hover{color:#F742C5}
.btn-outline:hover{background:#ECECF2;color:#000!important}
.cta:hover{background:#FF7B10!important;color:#000!important;box-shadow:0 0 40px rgba(255,123,16,.5)}

/* media */
.media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile{position:relative;overflow:hidden;display:block;border:1px solid #2A2A38;transition:border-color .2s}
.tile.playable{cursor:pointer}
.tile:hover{border-color:#F742C5}
.tile .media{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.tile.playable:hover .media{transform:scale(1.03)}
.tile-tag{font-family:'JetBrains Mono',monospace;letter-spacing:.15em;text-transform:uppercase;color:#FFFAEC;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35)}
.tile.playable:hover .tile-tag{border-color:#F742C5;color:#F742C5}
.play-dot{display:inline-block;width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:6px;vertical-align:1px}

.filter-btn:hover{border-color:#F742C5!important}
.list-row:hover{background:rgba(247,66,197,.05);color:#F742C5}

/* work grid: mixed tile sizes */
.work-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-auto-flow:dense;grid-auto-rows:1fr;gap:12px}
.wg-card{display:flex;flex-direction:column}
.wg-media{position:relative;aspect-ratio:16/10;overflow:hidden;flex:none}
.wg-title{font-size:18px;line-height:1.05;margin:0}
.wg-blurb{font-size:13px;color:#9B9BAE;margin-top:8px}
.sz-large{grid-column:span 2;grid-row:span 2}
.sz-wide{grid-column:span 2}
.sz-tall{grid-row:span 2}
.sz-large .wg-media,.sz-wide .wg-media,.sz-tall .wg-media{aspect-ratio:auto;flex:1 1 auto;min-height:180px}
.sz-large .wg-title{font-size:clamp(24px,2.6cqw,36px)}

/* lightbox */
.lb{font-family:'Space Grotesk',system-ui,sans-serif;color:#ECECF2;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);display:none;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px 24px}
.lb.open{display:flex}
.lb video{max-width:min(1280px,100%);max-height:calc(100vh - 190px);width:auto;height:auto;background:#000;border:1px solid #2A2A38;outline:none}
.lb-meta{width:min(1280px,100%);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:18px;flex-wrap:wrap}
.lb-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#ECECF2;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
.lb-btn:hover{border-color:#F742C5;color:#F742C5}
.lb-close{position:absolute;top:20px;right:24px}
.lb-nav{display:flex;gap:6px}

@container site (max-width:760px){
  [data-r~="hide"]{display:none!important}
  [data-r~="show"]{display:flex!important}
  [data-r~="stack"]{flex-direction:column!important;align-items:stretch!important}
  [data-r~="col1"]{grid-template-columns:1fr!important}
  [data-r~="col2"]{grid-template-columns:1fr 1fr!important}
  [data-r~="pad"]{padding-left:20px!important;padding-right:20px!important}
  [data-r~="sec"]{padding-top:80px!important;padding-bottom:80px!important}
  [data-r~="hdr"]{padding:14px 20px!important}
  [data-r~="gap"]{gap:24px!important}
  [data-r~="left"]{text-align:left!important;justify-self:start!important}
  [data-r~="hero"]{height:88vh!important;min-height:560px!important}
  [data-r~="rows"]{grid-template-rows:none!important}
  .list-grid{grid-template-columns:44px minmax(0,1fr) 50px!important}
  .work-grid{grid-auto-rows:auto}
  .sz-large,.sz-wide{grid-column:auto;grid-row:auto}
  .sz-large .wg-media,.sz-wide .wg-media{aspect-ratio:16/10;flex:none;min-height:0}
  .sz-tall{grid-row:auto}
  .sz-tall .wg-media{aspect-ratio:4/5;flex:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee{animation:none!important}
  .roundel{animation:none!important}
}