@font-face{font-family:EPOCH;src:url('./assets/epoch-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('./assets/geist-mono.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--ink:#333;--paper:#ede2df;--edge:2.578125vw;--mark:clamp(18px,1.51vw,34px);--stroke:clamp(1px,.105vw,2px);font-family:'Geist Mono',monospace;color:var(--paper);background:var(--ink);font-synthesis:none;scroll-behavior:smooth;scroll-snap-type:y proximity}
*{box-sizing:border-box}
body,h1,h2,p{margin:0}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:#ff4c00;color:#111}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:20px;top:20px;z-index:20;padding:12px 16px;background:var(--paper);color:var(--ink);transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}
.skip-link:not(:focus){clip-path:inset(100%);pointer-events:none}
:focus-visible{outline:2px solid currentColor;outline-offset:7px}
.screen{position:relative;height:100vh;height:100svh;min-height:580px;scroll-snap-align:start;isolation:isolate;overflow:hidden}
.intro{background:var(--ink)}
.contact{background:var(--paper);color:var(--ink)}
.registration{position:absolute;left:var(--edge);right:var(--edge);height:var(--mark);display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:5}
.registration.top{top:4.58%}
.registration.bottom{bottom:4.58%}
.registration i{display:block;height:var(--mark);width:var(--mark);position:relative;transform:scale(.7);transform-origin:center}
.corner{border-top:var(--stroke) solid currentColor}
.corner.left{border-left:var(--stroke) solid currentColor}
.corner.right{border-right:var(--stroke) solid currentColor}
.bottom .corner{transform:scale(.7,-.7)}
.square{border:var(--stroke) solid currentColor}
.registration .slash{width:calc(var(--mark)*2);position:absolute;left:25.4%;transform:translateX(-50%) scale(.7)}
.registration .slash.right{left:74.6%}
.slash::before,.slash::after{content:'';position:absolute;left:0;top:0;width:var(--stroke);height:calc(var(--mark)*1.4142);background:currentColor;transform:rotate(-45deg);transform-origin:top}
.slash::after{left:50%}
.top .slash.right,.bottom .slash.left{transform:translateX(-50%) scale(.7,-.7)}
.hero-art{position:absolute;inset:0;pointer-events:none}
.hello{position:absolute;top:50%;transform:translateY(-50%);width:33.073%;z-index:1}
.hello svg{width:100%;height:auto;display:block;overflow:visible}
.hello svg text,.contact h2 svg text{font-kerning:none;font-feature-settings:'kern' 0}
.hello-left{left:var(--edge)}
.hello-right{right:var(--edge);width:34.375%}
.ofan{position:absolute;left:50%;top:50%;width:min(46.5vw,90svh);height:min(46.5vw,90svh);transform:translate(-50%,-50%);z-index:3}
.ofan canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.ofan-fallback{position:absolute;width:84.8%;height:auto;left:7.6%;top:8.6%;transition:opacity .6s ease}
.ofan.ready canvas{opacity:1}
.ofan.ready .ofan-fallback{opacity:0}
.biography{position:absolute;top:calc(69.93% - 50px);left:3.015%;right:2.578%;display:flex;align-items:flex-start;justify-content:space-between;gap:3vw;font-size:clamp(10.5px,.729167vw,16px);line-height:1.5;z-index:2}
.bio-column{display:contents}
.biography p{width:20.5em;max-width:23%;font-weight:400}
.biography strong{font-weight:700}
.motion-toggle{position:absolute;z-index:6;left:50%;bottom:calc(4.58% - 8px);width:calc(var(--mark) + 16px);height:calc(var(--mark) + 16px);transform:translateX(-50%);border:0;background:transparent;color:inherit;cursor:pointer;padding:8px}
.motion-toggle span{display:block;width:100%;height:100%;border:var(--stroke) solid currentColor;background:var(--ink)}
.motion-toggle span::before,.motion-toggle span::after{content:'';position:absolute;top:35%;height:30%;width:1px;background:currentColor;opacity:0;transition:opacity .2s ease}
.motion-toggle span::before{left:43%}.motion-toggle span::after{right:43%}
.motion-toggle:hover span::before,.motion-toggle:hover span::after,.motion-toggle:focus-visible span::before,.motion-toggle:focus-visible span::after,.motion-toggle[aria-pressed=true] span::before,.motion-toggle[aria-pressed=true] span::after{opacity:1}
.contact-content{position:absolute;inset:19.45% 0 auto;display:flex;flex-direction:column;align-items:center}
.contact h2{width:min(64.0625vw,114svh);font-weight:400;line-height:0}
.contact h2 svg{display:block;width:100%;height:auto;overflow:visible}
.contact-button{display:flex;align-items:center;justify-content:center;gap:.8em;width:31.25vw;min-width:320px;height:7.4074svh;min-height:54px;margin-top:9.4svh;background:var(--ink);color:var(--paper);font-size:clamp(14px,1.146vw,24px);letter-spacing:.2em;line-height:1;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.contact-button:hover{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.contact-button>span:first-child,.contact-button>span:last-child{transition:transform .25s ease}
.contact-button:hover>span:first-child{transform:translateX(.2em)}
.contact-button:hover>span:last-child{transform:translateX(-.2em)}
.socials{position:absolute;left:calc(var(--edge) + var(--mark)*.15);right:calc(var(--edge) + var(--mark)*.15);bottom:9.78%;display:flex;justify-content:space-between;font-size:clamp(11px,.729167vw,16px);line-height:1.5}
.socials a{position:relative;padding:12px 0;margin:-12px 0}
.socials a::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.socials a:hover::after,.socials a:focus-visible::after{transform:scaleX(1)}
@media(min-width:901px) and (max-aspect-ratio:3/2){.ofan{width:60vw;height:60vw;top:43%}.biography{top:calc(65% - 50px);font-size:clamp(11px,.9vw,14px)}.biography p{max-width:23%;width:23%}.contact-content{top:24%}.contact h2{width:78vw}.contact-button{margin-top:10svh;width:40vw}}
@media(min-width:901px) and (min-aspect-ratio:21/10){.hello{width:30%}.hello-right{width:31%}.biography{top:calc(65% - 50px);font-size:clamp(10.5px,1.3svh,14px)}.contact-content{top:15%}.contact h2{width:110svh}.contact-button{margin-top:6svh}}
@media(min-width:901px) and (max-height:700px){.hello{width:min(33.073%,calc(max(64px,32svh - 124px)*3.527778))}.hello-right{width:min(34.375%,calc(max(64px,32svh - 124px)*3.666667))}.biography{top:calc(66% - 50px);font-size:clamp(10px,.73vw,12px)}}
@media(max-width:900px){
  :root{--edge:24px;--mark:20px;--stroke:1.5px;scroll-snap-type:none}
  .screen{min-height:560px}
  .registration.top{top:24px}.registration.bottom{bottom:24px}
  .registration .slash{left:25%}.registration .slash.right{left:75%}
  .intro{height:auto;min-height:100svh;padding:0 24px 86px}
  .hero-art{position:relative;height:calc(clamp(350px,51svh,590px) - 50px);margin:0 -24px}
  .ofan{top:calc(46% + 23px);width:min(72vw,480px);height:min(72vw,480px)}
  .hello-left{top:auto;bottom:24px;width:calc(100% - 48px);max-width:600px;left:50%;transform:translateX(-50%)}
  .hello-right{display:none}
  .biography{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;font-size:clamp(12px,1.65vw,14px);line-height:1.55}
  .bio-column{display:block;min-width:0}
  .biography p{width:auto;max-width:none}
  .bio-column p+p{margin-top:1.55em}
  .motion-toggle{bottom:16px}
  .contact-content{top:50%;transform:translateY(-50%);width:100%;padding:0 24px}
  .contact h2{width:100%;max-width:700px}
  .contact-button{width:70%;max-width:460px;min-width:0;height:64px;min-height:56px;margin-top:64px;font-size:16px}
  .socials{bottom:76px;font-size:12px}
}
@media(max-width:480px){
  :root{--edge:20px;--mark:17px;--stroke:1px}
  .intro{padding:0 20px 76px}
  .hero-art{height:calc(clamp(320px,45svh,390px) - 50px);margin:0 -20px}
  .ofan{width:88vw;height:88vw;top:calc(48% + 24px)}
  .hello-left{width:calc(100% - 40px);bottom:20px}
  .biography{gap:24px 22px;font-size:12px;line-height:1.55}
  .contact-content{padding:0 20px;top:46%}
  .contact h2{width:100%}
  .contact-button{width:100%;height:56px;font-size:13px;margin-top:52px;letter-spacing:.17em}
  .socials{display:grid;grid-template-columns:1fr 1fr;row-gap:22px;font-size:12px;bottom:78px}
  .socials a:nth-child(even){text-align:right}
}
@media(max-height:540px) and (max-width:900px) and (orientation:landscape){.hero-art{height:330px}.ofan{width:360px;height:360px}.hello-left{width:430px}.contact{min-height:520px}.contact-content{top:44%}.contact h2{width:440px}.contact-button{margin-top:24px;height:48px}.socials{bottom:58px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* The supplied particle mark lives beneath both typography layers. */
.particle-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86%;height:78%;z-index:0;pointer-events:none}
.hello{z-index:2}
.biography{z-index:3}
/* A persistent player, aligned with the visible right registration marks. */
.music-player{position:fixed;z-index:30;right:calc(var(--edge) + var(--mark)*.15);top:auto;bottom:calc(4.58svh + var(--mark) + 46px);width:340px;max-width:calc(100% - var(--edge)*2 - var(--mark)*.3);color:var(--ink);background:var(--paper);border:1px solid var(--paper);box-shadow:0 8px 28px #0002}
.music-player-bar{display:flex;align-items:center;min-height:44px;gap:0}
.music-track{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;padding:0 10px 0 4px}
.music-play,.music-toggle{display:grid;place-items:center;flex:none;width:42px;height:42px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}
.music-play:disabled{cursor:wait;opacity:.45}
.music-play-icon{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:14px solid #ff4c00;margin-left:3px}
.is-playing .music-play-icon{width:16px;height:16px;border:0;background:#ff4c00;margin-left:0}
.music-toggle span{position:relative;width:20px;height:20px}
.music-toggle span::before,.music-toggle span::after{content:'';position:absolute;left:0;top:9px;width:20px;height:1px;background:currentColor}
.music-player.is-collapsed .music-toggle span::after{transform:rotate(90deg)}
.music-toggle:hover,.music-toggle:focus-visible{background:#ff4c00;color:#111}
.music-play:hover:not(:disabled){background:#3331}
.music-play:focus-visible,.music-toggle:focus-visible,.music-source:focus-visible{outline:2px solid #ff4c00;outline-offset:-3px}
.music-embed{height:200px;overflow:hidden}
.music-embed iframe{display:block;border:0}
.music-source{display:flex;align-items:center;justify-content:flex-end;height:34px;padding:0 14px;font-size:10px;letter-spacing:.05em}
.music-source:hover{color:#ff4c00}
.music-player.is-collapsed .music-embed{height:0;visibility:hidden}
.music-mobile-label{display:none}
@media(max-width:900px){.music-player{--bio-gap:32px;right:var(--edge);width:calc(100% - var(--edge)*2);max-width:calc(100% - var(--edge)*2);bottom:calc(24px + var(--mark) + 16px)}.music-player.is-collapsed{width:calc((100% - var(--edge)*2 - var(--bio-gap))/2)}.music-player-bar{min-height:40px}.music-play,.music-toggle{width:40px;height:40px}.music-track{font-size:10px;padding-right:8px}.music-player.is-collapsed .music-track{display:none}.music-player.is-collapsed .music-mobile-label{display:block;flex:1;font-size:10px;text-align:center}.music-play-icon{border-top-width:6px;border-bottom-width:6px;border-left-width:11px}.is-playing .music-play-icon{width:12px;height:12px}.music-toggle span{width:16px;height:16px}.music-toggle span::before,.music-toggle span::after{width:16px;top:7px}}
/* Individual translate leaves the reference's positioning transforms intact. */
.reveal-pending{opacity:0;translate:var(--reveal-x,0) var(--reveal-y,20px);transition:opacity 850ms cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),translate 850ms cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms)}
.reveal-pending.reveal-still{--reveal-y:0px}
.reveal-pending.reveal-side{--reveal-x:20px;--reveal-y:0px}
.reveal-pending.reveal-visible{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1;translate:0 0;transition:none}}
@media(max-width:900px){
  .hero-art{display:flex;flex-direction:column;align-items:center;gap:24px;height:auto;margin:0;padding:68px 0 28px}
  .particle-mark{position:relative;inset:auto;transform:none;order:0;width:100%;max-width:720px;height:auto;aspect-ratio:1446.21 / 897;flex:none}
  .hello-left{position:relative;inset:auto;transform:none;order:1;width:100%;max-width:600px;flex:none}
}

@media(max-width:480px){.music-player{--bio-gap:22px}}