:root{
  --black:#090909;--charcoal:#111111;--off:#e8e3da;--grey:#8c8983;--burg:#681d28;--wine:#8a2c3a;--line:rgba(232,227,218,.18);
}
*{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--black)} body{margin:0;background:var(--black);color:var(--off);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit} ::selection{background:var(--burg);color:var(--off)}
.micro{font:11px/1.2 "Courier New",monospace;letter-spacing:.22em;text-transform:uppercase}.muted{color:var(--grey)}.accent{color:var(--wine)}

/* Intro */
.intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;text-align:center;background:var(--black);transition:opacity .65s ease,visibility .65s ease}
.intro.gone{opacity:0;visibility:hidden}.intro-brand{font-size:clamp(64px,13vw,180px);font-weight:900;letter-spacing:-.06em;line-height:.8;margin:22px 0}

/* Nav */
.nav{position:absolute;z-index:20;top:0;left:0;right:0;padding:28px 4vw;display:flex;justify-content:space-between;align-items:center}
.brand{font-size:26px;font-weight:900;letter-spacing:-.04em}.nav nav{display:flex;gap:26px;font:12px "Courier New",monospace;letter-spacing:.14em}.nav a:hover{color:var(--wine)}

/* Hero */
.hero{min-height:100svh;padding:150px 4vw 45px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 82% 32%,rgba(104,29,40,.18),transparent 28%),linear-gradient(145deg,#090909,#111 55%,#090909)}
.hero h1{font-size:clamp(46px,8.1vw,128px);line-height:.84;letter-spacing:-.06em;margin:0;max-width:1100px}
.hero-foot{display:flex;justify-content:space-between;gap:20px;color:var(--grey);font:11px "Courier New",monospace;letter-spacing:.15em;text-transform:uppercase}

/* Work archive */
.work{position:relative;overflow:clip;background:var(--black)}
.background-stack{position:sticky;top:0;height:100svh;overflow:hidden}
.work-bg,.veil{position:absolute;inset:0}
.work-bg{opacity:0;transform:scale(1.04);transition:opacity .55s ease,transform 1.1s ease;background-size:160% 160%;animation:drift 9s ease-in-out infinite alternate}
.work-bg.active{opacity:1;transform:scale(1)}
.bg1{background:
  radial-gradient(circle at 35% 33%, #6d443588 0%, transparent 24%),
  linear-gradient(125deg,#26171a 0%,#080808 58%,#090909 100%)}
.bg2{background:
  radial-gradient(circle at 52% 46%, #681d2888 0%, transparent 24%),
  linear-gradient(132deg,#171013 0%,#090909 58%,#090909 100%)}
.bg3{background:
  radial-gradient(circle at 69% 59%, #6b6d6988 0%, transparent 24%),
  linear-gradient(139deg,#101313 0%,#1b1112 58%,#090909 100%)}
.bg4{background:
  radial-gradient(circle at 22% 72%, #8a2c3a88 0%, transparent 24%),
  linear-gradient(146deg,#221013 0%,#080808 58%,#090909 100%)}
.bg5{background:
  radial-gradient(circle at 39% 30%, #b0a99c88 0%, transparent 24%),
  linear-gradient(153deg,#161616 0%,#221317 58%,#090909 100%)}
.bg6{background:
  radial-gradient(circle at 56% 43%, #443e3a88 0%, transparent 24%),
  linear-gradient(160deg,#0d1115 0%,#221014 58%,#090909 100%)}
.bg7{background:
  radial-gradient(circle at 73% 56%, #7b2b3588 0%, transparent 24%),
  linear-gradient(167deg,#18100f 0%,#050505 58%,#090909 100%)}
.bg8{background:
  radial-gradient(circle at 26% 69%, #9b614888 0%, transparent 24%),
  linear-gradient(174deg,#0b0b0b 0%,#191214 58%,#090909 100%)}
.bg9{background:
  radial-gradient(circle at 43% 27%, #555b5a88 0%, transparent 24%),
  linear-gradient(181deg,#121416 0%,#050505 58%,#090909 100%)}
.bg10{background:
  radial-gradient(circle at 60% 40%, #7a203088 0%, transparent 24%),
  linear-gradient(188deg,#1b0d10 0%,#080808 58%,#090909 100%)}
.bg11{background:
  radial-gradient(circle at 77% 53%, #7f756988 0%, transparent 24%),
  linear-gradient(195deg,#101010 0%,#201418 58%,#090909 100%)}
.bg12{background:
  radial-gradient(circle at 30% 66%, #5d202988 0%, transparent 24%),
  linear-gradient(202deg,#08090a 0%,#161313 58%,#090909 100%)}
.bg13{background:
  radial-gradient(circle at 47% 24%, #74554888 0%, transparent 24%),
  linear-gradient(209deg,#14100e 0%,#080808 58%,#090909 100%)}
.bg14{background:
  radial-gradient(circle at 64% 37%, #8a2c3a88 0%, transparent 24%),
  linear-gradient(216deg,#0d0d0f 0%,#1d1215 58%,#090909 100%)}
.bg15{background:
  radial-gradient(circle at 81% 50%, #6d6d6888 0%, transparent 24%),
  linear-gradient(223deg,#101213 0%,#070707 58%,#090909 100%)}
.bg16{background:
  radial-gradient(circle at 34% 63%, #7d293588 0%, transparent 24%),
  linear-gradient(230deg,#0b0b0b 0%,#221114 58%,#090909 100%)}
@keyframes drift{from{background-position:30% 40%;filter:saturate(.75) contrast(1.02)}to{background-position:70% 60%;filter:saturate(1) contrast(1.08)}}
.veil{background:linear-gradient(90deg,rgba(9,9,9,.86),rgba(9,9,9,.54),rgba(9,9,9,.72)),linear-gradient(180deg,rgba(9,9,9,.1),rgba(9,9,9,.58));z-index:2}
.work-inner{position:relative;z-index:3;margin-top:-100svh;padding:110px 4vw 45px;min-height:100svh}
.work-top{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-bottom:60px}
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.filter{border:1px solid rgba(232,227,218,.25);background:rgba(9,9,9,.2);color:var(--grey);padding:10px 12px;cursor:pointer;font:10px "Courier New",monospace;letter-spacing:.12em}
.filter:hover,.filter.active{color:var(--off);border-color:var(--wine);background:rgba(104,29,40,.22)}
.project-list{border-top:1px solid rgba(232,227,218,.25)}
.project{width:100%;display:grid;grid-template-columns:120px minmax(0,1fr) 210px 70px;gap:18px;align-items:center;padding:22px 0;border:0;border-bottom:1px solid rgba(232,227,218,.25);background:transparent;color:var(--off);text-align:left;cursor:pointer;transition:padding .25s ease,opacity .25s ease}
.project[hidden]{display:none}.project:hover,.project.active{padding-left:12px}.project.dimmed{opacity:.35}
.code,.type,.year{font:12px "Courier New",monospace;letter-spacing:.12em}.code{color:var(--wine)}.type,.year{color:rgba(232,227,218,.7)}
.title{font-size:clamp(27px,3.8vw,58px);line-height:.92;font-weight:800;letter-spacing:-.04em}
.work-foot{display:flex;justify-content:space-between;gap:20px;margin-top:36px;color:rgba(232,227,218,.65)}.rec-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--wine);margin-right:7px;animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:.2}}

/* Frames */
.contact-sheet{padding:110px 0 125px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{padding:0 4vw 45px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.contact-sheet h2,.about h2,.contact-section h2{font-size:clamp(48px,8vw,118px);line-height:.84;letter-spacing:-.06em;margin:12px 0 0}
.strip{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:0 4vw 18px;-ms-overflow-style:none;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none;width:0;height:0}
.frame{width:min(72vw,760px);aspect-ratio:16/9;flex:0 0 auto;position:relative;border:1px solid rgba(232,227,218,.12);scroll-snap-align:start}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72))}.frame span{position:absolute;z-index:2;left:16px;bottom:14px;font:11px "Courier New",monospace;letter-spacing:.1em}
.f1{background:linear-gradient(135deg,#201113,#080808 50%,#5c2930)}.f2{background:radial-gradient(circle at 70% 25%,#6d4435,transparent 25%),linear-gradient(135deg,#090909,#21191a)}.f3{background:linear-gradient(120deg,#080808,#341119 45%,#050505 80%)}.f4{background:radial-gradient(circle at 50% 35%,#77736e,transparent 10%),linear-gradient(155deg,#050505,#1e2324)}.f5{background:linear-gradient(145deg,#050505,#241115 55%,#111)}.f6{background:radial-gradient(circle at 38% 50%,#6b625c,transparent 12%),linear-gradient(145deg,#060606,#181315)}

/* About + subtle glitch */
.about{padding:130px 4vw}.about-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:8vw;align-items:end}.about-copy{font-size:clamp(18px,2vw,26px);line-height:1.4;color:var(--grey)}
.glitch-word{position:relative;display:inline-block;animation:floatGlitch 5.5s ease-in-out infinite}
.glitch-word::before,.glitch-word::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.glitch-word::before{color:var(--wine);transform:translateX(0)}.glitch-word::after{color:#b7c0bd;transform:translateX(0)}
@keyframes floatGlitch{0%,100%{transform:translate(0,0)}35%{transform:translate(.8px,-1px)}70%{transform:translate(-.6px,.8px)}}
@keyframes glitchOne{0%,91%,100%{opacity:0;clip-path:inset(0 0 100% 0)}92%{opacity:.35;clip-path:inset(18% 0 62% 0);transform:translateX(3px)}94%{opacity:0}96%{opacity:.22;clip-path:inset(68% 0 10% 0);transform:translateX(-2px)}98%{opacity:0}}
.glitch-word::before{animation:glitchOne 4.7s steps(1,end) infinite}.glitch-word::after{animation:glitchOne 6.1s steps(1,end) .7s infinite reverse}

/* Contact form */
.contact-section{padding:120px 4vw 135px;border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw;align-items:start;margin-top:45px}
.contact-grid>div>p{max-width:480px;color:var(--grey);font-size:18px;line-height:1.5}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:26px 22px}
.contact-form label{display:flex;flex-direction:column;gap:10px}.contact-form label:nth-of-type(3),.contact-form label:nth-of-type(4){grid-column:1/-1}
.contact-form label span{font:10px "Courier New",monospace;letter-spacing:.16em;color:var(--grey)}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:0;border-bottom:1px solid rgba(232,227,218,.32);background:transparent;color:var(--off);padding:11px 0 13px;outline:none;border-radius:0}
.contact-form select{background:var(--black)}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--wine)}
.send-button{grid-column:1/-1;width:max-content;border:1px solid var(--wine);background:rgba(104,29,40,.18);color:var(--off);padding:14px 18px;cursor:pointer;font:11px "Courier New",monospace;letter-spacing:.13em}
.send-button:hover{background:var(--burg)}.form-note{grid-column:1/-1;margin:0;color:var(--grey);font:10px "Courier New",monospace;letter-spacing:.08em}

/* Ending */
.ending{min-height:88svh;padding:115px 4vw 55px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 50% 60%,rgba(104,29,40,.18),transparent 30%),#090909;border-top:1px solid var(--line);overflow:hidden}
.ending-lockup{margin-top:48px;width:min(100%,1200px)}.who,.fay{font-weight:900;letter-spacing:-.065em;line-height:.8;white-space:nowrap}
.who{font-size:clamp(42px,9.2vw,142px);color:rgba(232,227,218,.11)}.fay{font-size:clamp(42px,9.2vw,142px);color:var(--wine)}
.bottom-email{margin-top:58px;width:max-content;font:14px "Courier New",monospace;border-bottom:1px solid var(--wine);padding-bottom:4px}
footer{display:flex;justify-content:space-between;padding:28px 4vw;color:var(--grey);font:10px "Courier New",monospace;letter-spacing:.18em}

@media(max-width:900px){
  .work-top{flex-direction:column}.filters{justify-content:flex-start}
  .project{grid-template-columns:90px minmax(0,1fr);gap:8px 12px}.type{grid-column:2}.year{display:none}
  .contact-grid{grid-template-columns:1fr;gap:55px}
}
@media(max-width:800px){
  .nav{padding:22px 20px}.nav nav{gap:14px}.hero{padding:135px 20px 35px;min-height:92svh}.hero-foot{flex-direction:column}
  .work-inner{padding:90px 20px 35px}.work-foot{margin-top:40px;flex-wrap:wrap}.work-foot span:last-child{width:100%}
  .section-head{padding:0 20px 35px;align-items:flex-start}.strip{padding-left:20px;padding-right:20px}.frame{width:82vw}
  .about{padding:100px 20px}.about-grid{grid-template-columns:1fr;gap:38px}
  .contact-section{padding:95px 20px 110px}.contact-form{grid-template-columns:1fr}.contact-form label,.contact-form label:nth-of-type(3),.contact-form label:nth-of-type(4),.send-button,.form-note{grid-column:1}
  .ending{padding:100px 20px 45px;min-height:72svh}.who,.fay{font-size:clamp(36px,11vw,78px)}.ending-lockup{width:100%}
  footer{padding:24px 20px;flex-direction:column;gap:14px}
}
@media(max-width:420px){.nav nav{font-size:10px;gap:10px}.who,.fay{font-size:10.6vw}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}