@font-face{font-family:Barlow;src:url('./assets/Barlow-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('./assets/Barlow-Medium.ttf') format('truetype');font-weight:500 700;font-display:swap}
@font-face{font-family:BarlowCondensed;src:url('./assets/BarlowCondensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--paper:#f1e8d8;--paper-light:#f6f0e6;--coal:#25292b;--copper:#c16b42;--copper-ink:#8e4d2e;--muted:#6c6a62;--line:rgba(37,41,43,.2);--ease:cubic-bezier(.22,.68,.1,1);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--coal);font-family:Barlow,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.75' filter='url(%23n)'/%3E%3C/svg%3E")}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button:enabled{cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--copper);outline-offset:6px}
button{border:0;background:none}svg{display:block}img{max-width:100%;display:block}
::selection{background:var(--copper);color:var(--paper)}
.skip-link{position:fixed;left:20px;top:12px;z-index:100;transform:translateY(-160%);padding:12px 18px;background:var(--coal);color:var(--paper)}
.skip-link:focus{transform:translateY(0)}
.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}
.site-header{position:absolute;left:0;top:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;height:102px;padding:0 clamp(24px,4.4vw,84px)}
.wordmark{font-size:14px;font-weight:500;letter-spacing:.065em;display:flex;align-items:center;gap:12px;min-height:44px}
.brand-dot{width:8px;height:8px;background:var(--copper);border-radius:50%;box-shadow:0 0 0 5px rgba(193,107,66,.09)}
.nav{display:flex;align-items:center;gap:37px;font-size:14px}.nav a{padding:13px 0;position:relative}.nav a::after{content:"";position:absolute;bottom:6px;left:0;width:100%;height:1px;background:var(--coal);transform:scaleX(0);transform-origin:left;transition:transform .3s}.nav a:hover::after{transform:scaleX(1)}
.nav .nav-project{display:flex;gap:25px;align-items:center;border:1px solid var(--line);border-radius:2px;padding:11px 15px}.nav-project svg{width:12px;height:12px}.nav .nav-project::after{display:none}.menu-toggle{display:none}
.hero{min-height:520px;height:100svh;max-height:none;position:relative;display:grid;grid-template-rows:1fr auto;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 51% 45%,rgba(255,255,255,.48) 0%,transparent 58%),linear-gradient(115deg,transparent 65%,rgba(193,107,66,.035))}
.hero-grid{position:absolute;inset:0;opacity:.28;z-index:-1;background-image:linear-gradient(rgba(37,41,43,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(37,41,43,.08) 1px,transparent 1px);background-size:100px 100px;mask-image:radial-gradient(ellipse at center,black,transparent 67%)}
.hero-stage{position:relative;display:flex;align-items:center;justify-content:center;padding:108px 20px 48px;min-height:0}
.logo-stage{position:relative;width:clamp(350px,41vw,590px);max-width:66svh;aspect-ratio:1;perspective:1000px;z-index:2;opacity:0;animation:stage-arrive 1.2s .12s var(--ease) forwards}
.logo-halo{position:absolute;inset:-15%;border:1px solid rgba(37,41,43,.10);border-radius:50%;pointer-events:none}
.logo-halo::before,.logo-halo::after{content:"";position:absolute;width:6px;height:6px;border:1px solid var(--copper);background:var(--paper);border-radius:50%;top:50%;left:-3px}
.logo-halo::after{left:auto;right:-3px;background:var(--copper)}
.logo-halo-inner{position:absolute;inset:-7.5%;border:1px dashed rgba(37,41,43,.24);border-radius:50%;animation:turn 28s linear infinite reverse}
.logo-orbit{position:absolute;inset:-12%;border:2px solid transparent;border-top-color:var(--copper);border-bottom-color:rgba(193,107,66,.35);border-radius:50%;pointer-events:none;animation:turn 12s linear infinite}
.logo-orbit::before{content:"";position:absolute;top:14%;right:14%;width:8px;height:8px;background:var(--copper);border-radius:50%;box-shadow:0 0 18px rgba(193,107,66,.4)}
.logo-pulse{position:absolute;inset:-4%;border:1px solid var(--copper);border-radius:50%;pointer-events:none;animation:halo-pulse 3.2s ease-out infinite}
.logo-disc{width:100%;height:100%;filter:drop-shadow(0 20px 20px rgba(37,41,43,.13));transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .6s var(--ease);will-change:transform}
.hero-logo{width:100%;height:100%;overflow:visible}
.hero-logo .logo-circle{fill:var(--coal)}
.hero-logo .logo-text{fill:var(--paper);animation:ink-arrive 1.1s .35s both}
.hero-logo .logo-keys{fill:var(--paper);transform-box:fill-box;transform-origin:center;animation:keys-arrive 1.2s .17s var(--ease) both,keys-rock 3.2s 1.4s ease-in-out infinite}
.hero-logo .logo-piston{fill:var(--copper);animation:piston-stroke 1.6s .6s ease-in-out infinite}
.logo-light{position:absolute;inset:0;border-radius:50%;pointer-events:none;overflow:hidden}
.logo-light::after{content:"";position:absolute;inset:-15%;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.23) 50%,rgba(255,255,255,.055) 56%,transparent 64%);transform:translateX(-110%);animation:light-pass 5.6s 1s ease-in-out infinite;mix-blend-mode:screen}
.hero-note{position:absolute;left:clamp(24px,4.4vw,84px);top:45%;max-width:185px;font-size:13px;line-height:1.65;animation:note-arrive 1s .8s both}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;display:block;margin:0 0 18px}
.hero-note .eyebrow{color:var(--copper-ink);margin-bottom:14px}
.hero-note p{margin:0;color:var(--muted)}
.hero-side-label{position:absolute;right:clamp(24px,4.4vw,84px);top:47%;writing-mode:vertical-rl;letter-spacing:.15em;font-size:10px;text-transform:uppercase;display:flex;gap:15px;align-items:center;animation:note-arrive 1s 1s both}
.hero-side-label::before{content:"";height:38px;width:1px;background:var(--copper)}
.hero-enter{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:13px;white-space:nowrap;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;animation:note-arrive 1s 1s both}
.arrow-circle{width:33px;height:33px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .3s,border-color .3s}.arrow-circle svg{width:13px;height:13px}.hero-enter:hover .arrow-circle{transform:translateY(4px);border-color:var(--copper)}
.hero-footer{position:relative;min-height:70px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px clamp(24px,4.4vw,84px);font-size:11px;color:var(--muted)}
.hero-footer .footer-description{display:flex;gap:16px;align-items:center}.footer-description span+span::before{content:"/";margin-right:16px;color:#aaa292}
.motion-toggle{display:flex;gap:9px;align-items:center;min-height:44px;font-size:11px;padding:5px 0;color:var(--coal)}.motion-toggle svg{width:12px;height:12px}.play-icon{display:none}.motion-paused .play-icon{display:block}.motion-paused .pause-icon{display:none}.motion-status{color:var(--muted)}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}.motion-paused .logo-disc{transform:none!important}.motion-paused .logo-stage,.motion-paused .logo-text,.motion-paused .logo-keys,.motion-paused .hero-note,.motion-paused .hero-side-label,.motion-paused .hero-enter{opacity:1!important;transform:none!important}
@keyframes stage-arrive{from{opacity:0;transform:translateY(25px) scale(.975)}to{opacity:1;transform:none}}
@keyframes ink-arrive{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@keyframes keys-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes piston-stroke{0%,100%{transform:translateY(16px)}50%{transform:translateY(-12px)}}
@keyframes keys-rock{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes halo-pulse{0%{transform:scale(1);opacity:.65}85%,100%{transform:scale(1.15);opacity:0}}
@keyframes light-pass{0%,12%{transform:translateX(-110%)}65%,100%{transform:translateX(110%)}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes note-arrive{from{opacity:0}to{opacity:1}}

.site-status{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted)}
.site-status span{height:5px;width:5px;border-radius:50%;background:var(--copper)}
@media(min-width:1600px){.hero-note{left:8vw}.hero-side-label{right:8vw}}
@media(max-width:1100px){.hero-note{max-width:145px;font-size:12px;left:30px}.hero-note .eyebrow{font-size:9px}.logo-stage{width:46vw}.hero-side-label{right:30px}}
@media(max-width:760px){
 .site-header{height:84px;padding:0 24px}.wordmark{font-size:11px;gap:10px}.brand-dot{height:6px;width:6px}.site-status{font-size:9px;gap:6px;max-width:105px;text-align:right;line-height:1.4}
 .hero{height:100svh;min-height:520px}.hero-stage{padding:100px 28px 88px}.logo-stage{width:min(76vw,470px);max-width:62svh}.logo-halo{inset:-10%}.logo-halo-inner{inset:-5%}.hero-note{top:auto;bottom:32px;left:24px;max-width:100%;font-size:11px}.hero-note .eyebrow{margin:0;font-size:9px;letter-spacing:.08em}.hero-note p{display:none}.hero-side-label{right:24px;top:auto;bottom:32px;writing-mode:horizontal-tb;font-size:9px;letter-spacing:.03em;gap:8px}.hero-side-label::before{height:1px;width:18px}
 .hero-footer{padding:10px 24px;min-height:65px;gap:10px;font-size:10px}.motion-toggle{font-size:10px;gap:7px}
}
@media(max-width:480px){.hero-side-label{display:none}}
@media(max-height:620px){.site-header{height:64px}.hero{min-height:100svh}.hero-stage{padding-top:66px;padding-bottom:20px}.logo-stage{width:52svh;max-width:52svh}.hero-note,.hero-side-label{display:none}.hero-footer{min-height:56px;padding-top:6px;padding-bottom:6px}}
@media(prefers-reduced-motion:reduce){body:not(.allow-motion) *,body:not(.allow-motion) *::before,body:not(.allow-motion) *::after{animation:none!important;transition:none!important}body:not(.allow-motion) :is(.logo-stage,.logo-text,.logo-keys,.hero-note,.hero-side-label){opacity:1!important;transform:none!important}body:not(.allow-motion) .logo-disc{transform:none!important}body:not(.allow-motion) :is(.logo-halo-inner,.logo-light,.logo-orbit,.logo-pulse){display:none}}