:root{
  --bg:#0a0a0b;
  --fg:#f2f1ee;
  --dim:rgba(242,241,238,.62);
  --faint:rgba(242,241,238,.14);
  --card:#111113;
  --red:#ff3b30;
  --blue:#4a63ff;
  --violet:#9a5cff;
  --gutter:clamp(18px,4.5vw,56px);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);
  font:400 16px/1.55 var(--display);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px}

.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.label{display:flex;align-items:center;gap:10px;color:var(--dim)}
.sq{display:inline-block;width:7px;height:7px;background:var(--fg)}

/* progress line */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--fg);transform-origin:left}

/* background shards */
#shards{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* top bar */
.top{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 16px) var(--gutter) 16px;
  mix-blend-mode:difference;
}
.logo{
  border:1px solid var(--fg);border-radius:999px;padding:7px 16px;
  font-weight:600;font-size:14px;letter-spacing:.02em;
}
.logo sup{font-size:8px;margin-left:2px;vertical-align:super}
.menu-btn{
  background:none;border:0;color:var(--fg);cursor:pointer;
  display:flex;align-items:center;gap:12px;font:inherit;padding:8px 0;
}
.menu-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.menu-icon{position:relative;width:26px;height:12px;display:block}
.menu-icon i{position:absolute;left:0;right:0;height:1.5px;background:var(--fg);transition:transform .4s cubic-bezier(.7,0,.2,1),top .4s}
.menu-icon i:nth-child(1){top:1px}
.menu-icon i:nth-child(2){top:9px}
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(1){top:5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(2){top:5px;transform:rotate(-45deg)}

/* full screen menu */
.menu{
  position:fixed;inset:0;z-index:40;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--gutter) 40px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s cubic-bezier(.7,0,.2,1);
  visibility:hidden;
}
.menu[hidden]{display:flex}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu-words{margin-bottom:clamp(24px,5vh,48px)}
.menu-words a{
  display:block;overflow:hidden;
  font-weight:800;font-stretch:112%;text-transform:uppercase;
  font-size:clamp(52px,13vw,168px);line-height:.92;letter-spacing:-.02em;
}
.menu-words a span{display:inline-block;transform:translateY(105%);transition:transform .7s cubic-bezier(.2,.7,.1,1)}
.menu.open .menu-words li:nth-child(1) a span{transition-delay:.15s}
.menu.open .menu-words li:nth-child(2) a span{transition-delay:.21s}
.menu.open .menu-words li:nth-child(3) a span{transition-delay:.27s}
.menu.open .menu-words li:nth-child(4) a span{transition-delay:.33s}
.menu.open .menu-words a span{transform:none}
.menu-words a:hover span,.menu-words a:focus-visible span{background:#3a3a3c;box-shadow:0 0 0 .06em #3a3a3c}
.menu-small{display:flex;flex-direction:column;gap:4px;font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.menu-small a:hover{color:var(--dim)}
.menu-foot{position:absolute;left:var(--gutter);bottom:calc(env(safe-area-inset-bottom) + 22px);color:var(--dim)}

main,.foot{position:relative;z-index:1}
section{padding:0 var(--gutter)}

/* hero */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:120px;padding-bottom:clamp(40px,8vh,90px);position:relative;
}
.hero .label{margin-bottom:clamp(18px,3vh,32px)}
.hero h1{font-weight:850;font-stretch:125%;text-transform:uppercase;line-height:.88;letter-spacing:-.03em}
.hero h1 .serif{
  display:block;text-transform:none;font-size:clamp(34px,7vw,96px);
  margin-bottom:.1em;letter-spacing:-.01em;
}
.hero h1 .line{
  display:block;font-size:clamp(38px,10.4vw,200px);
  background:linear-gradient(100deg,var(--fg) 40%,rgba(242,241,238,.25) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h1 .line:nth-of-type(2){
  background:linear-gradient(100deg,var(--fg) 10%,var(--blue) 70%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;
}
.hero-sub{max-width:34ch;color:var(--dim);margin:clamp(22px,4vh,40px) 0 22px;font-size:17px}
.pill{
  align-self:flex-start;display:inline-flex;align-items:center;gap:22px;
  background:var(--fg);color:var(--bg);border-radius:999px;
  padding:14px 14px 14px 24px;font-weight:600;font-size:15px;
  transition:transform .3s,background .3s;
}
.pill svg{background:var(--bg);color:var(--fg);border-radius:50%;padding:8px;width:34px;height:34px;box-sizing:border-box}
.pill:hover{transform:translateY(-2px)}
.pill.big{font-size:clamp(18px,3vw,28px);padding:18px 18px 18px 30px}
.scroll-hint{position:absolute;right:var(--gutter);bottom:clamp(40px,8vh,90px);color:var(--dim)}

/* work */
.work{padding-top:clamp(80px,14vh,160px);padding-bottom:clamp(40px,8vh,100px)}
.section-head{margin-bottom:clamp(36px,6vh,72px)}
.section-head .label{margin-bottom:16px}
h2{font-weight:850;font-stretch:118%;text-transform:uppercase;line-height:.92;letter-spacing:-.025em;font-size:clamp(34px,9vw,132px);overflow-wrap:anywhere}
h2 .serif{display:block;text-transform:none;font-size:.52em;margin-bottom:.12em;letter-spacing:0}
.projects{border-top:1px solid var(--faint)}
.project{border-bottom:1px solid var(--faint);position:relative}
.project-link,.project-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px 20px;align-items:start;
  padding:clamp(22px,3.5vw,36px) 0;width:100%;
}
.project-link:hover .p-name,.project-link:focus-visible .p-name{font-style:normal}
.p-num{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:.7em;min-width:3ch}
.p-name{
  font-weight:800;font-stretch:112%;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(28px,7vw,104px);overflow-wrap:anywhere;min-width:0;transition:transform .5s cubic-bezier(.2,.7,.1,1),color .3s;
}
.project:hover .p-name{transform:translateX(.12em)}
.p-blurb{grid-column:2;color:var(--dim);max-width:52ch;font-size:15px}
.p-tags{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--faint);
  border-radius:999px;padding:5px 11px;color:var(--dim);
}
.chip.status{color:var(--fg)}
.chip.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fg);opacity:.5}
.chip.status.live::before{background:var(--red);opacity:1;box-shadow:0 0 8px var(--red)}
.p-meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;grid-column:3;grid-row:1}
.p-year{font-family:var(--mono);font-size:12px;color:var(--dim)}
.p-arrow{
  width:38px;height:38px;border:1px solid var(--faint);border-radius:50%;
  display:grid;place-items:center;transition:background .3s,color .3s,transform .3s;
}
.p-arrow svg{width:14px;height:14px}
a.project-link:hover .p-arrow{background:var(--fg);color:var(--bg);transform:rotate(45deg)}
.p-soon{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.p-thumb{display:none}

/* inline artwork on touch screens */
@media (hover:none),(max-width:820px){
  .p-thumb{
    display:block;grid-column:1 / -1;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin-top:6px;
    position:relative;
  }
}
.art{
  position:absolute;inset:0;
  background:
    conic-gradient(from 210deg at 70% 35%,hsl(var(--h) 90% 60% / .85),transparent 30%,hsl(calc(var(--h) + 60) 80% 50% / .6) 55%,transparent 80%),
    linear-gradient(160deg,hsl(var(--h) 40% 12%),#050506 70%);
}
.art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 41%,transparent 42%),
    linear-gradient(65deg,transparent 55%,rgba(255,255,255,.12) 56%,transparent 57%),
    linear-gradient(150deg,transparent 20%,rgba(255,255,255,.1) 21%,transparent 22%);
  mix-blend-mode:screen;
}

/* floating preview (desktop pointer) */
.preview{
  position:fixed;left:0;top:0;width:min(30vw,380px);aspect-ratio:4/5;z-index:30;pointer-events:none;
  border-radius:12px;overflow:hidden;opacity:0;transform:translate3d(-999px,-999px,0) scale(.9);
  transition:opacity .3s,scale .3s;
}
.preview.on{opacity:1}
.preview-art{position:absolute;inset:0}
.preview .mono{position:absolute;right:14px;bottom:12px;color:#fff;mix-blend-mode:difference}
@media (hover:none),(max-width:820px){.preview{display:none}}

/* about */
.about{padding-top:clamp(70px,12vh,150px);padding-bottom:clamp(70px,12vh,150px)}
.about .label{margin-bottom:28px}
.about-text{
  max-width:26em;font-size:clamp(22px,3.6vw,46px);line-height:1.2;letter-spacing:-.01em;font-weight:500;
}
.about-text strong{font-weight:800}
.about-text .serif{font-size:1.12em}

/* contact */
.contact{padding-top:clamp(40px,8vh,100px);padding-bottom:clamp(90px,16vh,200px)}
.contact .label{margin-bottom:18px}
.contact h2{margin-bottom:clamp(28px,5vh,52px)}

/* footer */
.foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px var(--gutter) calc(env(safe-area-inset-bottom) + 24px);
  border-top:1px solid var(--faint);color:var(--dim);
}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (max-width:560px){
  .project-link,.project-row{grid-template-columns:auto 1fr}
  .p-meta{grid-column:1 / -1;grid-row:auto;flex-direction:row;justify-content:space-between;align-items:center}
  .p-blurb,.p-tags{grid-column:1 / -1}
  .scroll-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}