@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{--bg:#0a0a0a;--ink:#f4f4f1;--muted:#8a8a85}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
html,body{min-height:100%;color:var(--ink)}
body{font-family:"Bricolage Grotesque",system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 64px}
main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
h1{line-height:0}
h1 img,h1 svg{width:clamp(250px,50vw,600px);height:auto;display:block;overflow:visible}
h1 a{display:block}
.line{font-size:15px;line-height:1.5;font-weight:400;color:#c9c9c4;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.micro{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.4}
.muted{color:var(--muted)}
.links{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.links a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}
.links a:hover,.links a:focus-visible{border-bottom-color:var(--ink);outline:none}
footer{z-index:1;position:absolute;bottom:24px;left:0;right:0;text-align:center}
@media (max-width:480px){main{gap:22px}.line{font-size:14px}.links{gap:20px}}
html,body{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
/* Entrance, rebuilt 2026-09-24 for smoothness. The spinning mark is three HTML layers
   (.vx) that the GPU composites; nothing is blurred inside the SVG. The layers sit
   exactly over the mark's slot in the lockup, spin in 1.5 turns, then hand over to
   the real vector mark, which stays crisp. */
.lockup .mark{opacity:0;animation:handoff 0s linear 1.85s forwards}
.vl{animation:vortex 1.8s cubic-bezier(.16,.84,.2,1) .1s both,unblur 1.6s cubic-bezier(.3,.6,.2,1) .1s both}
.vl.m{animation:vortex 1.8s cubic-bezier(.16,.84,.2,1) .1s both,vortex-in 1.8s ease-out .1s both,unblur 1.6s cubic-bezier(.3,.6,.2,1) .1s both,gone 0s linear 1.9s forwards}
.vl.g1{animation:vortex 1.8s cubic-bezier(.16,.84,.2,1) .16s both,trail1 1.7s ease-out .16s both,unblur 1.6s cubic-bezier(.3,.6,.2,1) .16s both}
.vl.g2{animation:vortex 1.8s cubic-bezier(.16,.84,.2,1) .22s both,trail2 1.6s ease-out .22s both,unblur 1.6s cubic-bezier(.3,.6,.2,1) .22s both}





.lockup .rule{transform-box:fill-box;transform-origin:50% 50%;animation:grow .6s cubic-bezier(.2,.7,.1,1) 1.1s both}
.lockup .wm{animation:rise .7s cubic-bezier(.2,.7,.1,1) 1.15s both}
.lockup .tm{animation:fade .5s ease 1.7s both}
.reveal{animation:rise-html .6s cubic-bezier(.2,.7,.1,1) both}
.d1{animation-delay:1.25s}.d2{animation-delay:1.35s}.d3{animation-delay:1.45s}.d4{animation-delay:1.6s}
}
@keyframes vortex{from{transform:translate(-221%,0) rotate(-540deg) scale(14)}to{transform:none}}
@keyframes vortex-in{0%{opacity:0}12%{opacity:.18}55%{opacity:.5}100%{opacity:1}}
@keyframes unblur{from{filter:blur(3px)}to{filter:blur(0)}}
@keyframes trail1{0%{opacity:0}12%{opacity:.14}70%{opacity:.12}100%{opacity:0}}
@keyframes trail2{0%{opacity:0}12%{opacity:.08}70%{opacity:.06}100%{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rise-html{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.bg{position:fixed;inset:0;z-index:0;background:var(--bg);overflow:hidden}
.bg video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.6s ease}
.bg.on video{opacity:1}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(10,10,10,.42) 0%,rgba(10,10,10,.58) 55%,rgba(10,10,10,.85) 100%)}
.vid-toggle{position:absolute;z-index:2;right:20px;bottom:22px;background:none;border:0;color:var(--muted);cursor:pointer;font-family:inherit;padding:4px 2px;border-bottom:1px solid transparent}
.vid-toggle:hover,.vid-toggle:focus-visible{color:var(--ink);border-bottom-color:var(--ink);outline:none}
@media (max-width:480px){.vid-toggle{right:16px;bottom:20px}}

@keyframes handoff{to{opacity:1}}
@keyframes gone{to{opacity:0;visibility:hidden}}
h1{position:relative}
/* The mark's slot in the 489.76 x 82.6 lockup: x 386.8, width 87.96 (1000 x 0.087963). */
.vx{position:absolute;left:78.977%;top:0;width:17.96%;height:100%;pointer-events:none}
.vl{position:absolute;inset:0;display:block;transform-origin:59.5% 50%;will-change:transform,opacity,filter;opacity:0}
.vl svg{display:block;width:100%;height:100%;overflow:visible}
@media (prefers-reduced-motion:reduce){.vx{display:none}.lockup .mark{opacity:1;animation:none}}