@font-face{font-family:BarlowCondensed;src:url("/assets/fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:PlexMono;src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --paper:#f1f1ee;
  --black:#080808;
  --line:#30302e;
  --muted:#999995;
  --mono:PlexMono,"Courier New",monospace;
  --display:BarlowCondensed,Impact,"Arial Narrow",sans-serif;
  --gutter:clamp(24px,3.6vw,70px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--black);color:var(--paper);font:400 10px/1.5 var(--mono);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--paper);color:var(--black)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--paper);outline-offset:6px}
button:disabled{opacity:.45;cursor:default}
img{display:block;max-width:100%;height:auto}
.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:1000;padding:16px 22px;background:var(--paper);color:var(--black);transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}

.hero{position:relative;min-height:480px;height:64svh;max-height:720px;isolation:isolate;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.055;background-image:url("/assets/grain.svg")}
.hero-logo{position:absolute;z-index:3;left:50%;top:47%;transform:translate(-50%,-50%);width:clamp(240px,27vw,370px);pointer-events:none}

.projects{border-top:1px solid var(--line)}
.project-section{position:relative;min-height:100svh;background:var(--black);border-bottom:1px solid var(--line)}
.project-link{position:relative;display:flex;align-items:center;min-height:max(680px,100svh);padding:90px var(--gutter);overflow:clip;isolation:isolate}
.project-visual{position:absolute;inset:0 0 0 27%;z-index:-2;overflow:hidden}
.project-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--black) 0%,#080808b8 17%,#08080825 46%,transparent 72%)}
.project-image{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.86) contrast(1.1);transform:scale(1.015);transition:transform 1.2s cubic-bezier(.2,.6,.3,1)}
.project-copy{position:relative;z-index:1;padding:15px 0;max-width:70%}
.project-name{font:700 clamp(106px,14.4vw,236px)/.82 var(--display);letter-spacing:-.022em;margin:0}
.project-name>span{display:block}
.project-domain{display:flex;align-items:center;gap:25px;font-size:11px;letter-spacing:.035em;margin-top:42px;width:fit-content}
.project-domain>span{font:30px/1 Arial,sans-serif;transition:transform .25s}
.project-link:is(:hover,:focus-visible) .project-image{transform:scale(1.045)}
.project-link:is(:hover,:focus-visible) .project-domain>span{transform:translate(4px,-4px)}
.project-link:focus-visible{outline-offset:-6px}
.project-link:focus-visible .project-domain{text-decoration:underline;text-underline-offset:6px}
.project--grave-shift .project-image{object-position:58% center;filter:grayscale(1) brightness(1.35) contrast(1.1)}
.project--best .project-visual{inset:8% -6% 8% 34%}
.project--best .project-image{object-fit:contain;filter:grayscale(1) brightness(.87)}
.project--best .project-visual::after{background:linear-gradient(90deg,var(--black),#08080890 14%,transparent 42%)}
.project--camp-grizzly .project-visual{inset:2% 2% 2% 33%}
.project--camp-grizzly .project-image{object-fit:contain;object-position:center;filter:grayscale(1)}
.project--camp-grizzly .project-visual::after{background:linear-gradient(90deg,var(--black),transparent 26%)}

.footer{display:flex;align-items:center;justify-content:space-between;margin:0 var(--gutter);padding:30px 0;color:var(--muted);font-size:9px;letter-spacing:.025em}
.footer-symbol{font:24px/1 Georgia,serif;color:var(--paper);margin-left:-68px}
.footer>a{font:23px/1 Arial,sans-serif;color:var(--paper);display:grid;place-items:center;min-width:44px;min-height:44px}

.cursor{display:none;position:fixed;top:0;left:0;z-index:999;align-items:center;justify-content:space-between;width:32px;height:34px;pointer-events:none;color:var(--paper);font:400 34px/1 Georgia,serif;mix-blend-mode:difference;will-change:transform;opacity:0;transition:width .18s,height .18s,opacity .12s}
.cursor-center{position:absolute;left:50%;top:50%;width:3px;height:3px;background:currentColor;transform:translate(-50%,-50%);opacity:0;transition:opacity .18s}
.cursor.is-hovering{width:46px}
.cursor.is-hovering .cursor-center{opacity:1}
.cursor.is-down{width:25px}
@media(hover:hover) and (pointer:fine){.custom-cursor,.custom-cursor a,.custom-cursor button{cursor:none}.custom-cursor .cursor{display:flex}.custom-cursor .cursor.is-visible{opacity:1}}

@media(max-width:1050px){
  .project-name{font-size:15.8vw}
  .project-visual{left:18%}
  .project--best .project-visual{left:29%}
  .project--camp-grizzly .project-visual{left:25%}
}
@media(max-width:580px){
  :root{--gutter:22px}
  .hero{min-height:400px;height:58svh;max-height:540px}
  .hero-logo{width:54vw;min-width:0;max-width:240px}
  .project-section{min-height:92svh}
  .project-link{min-height:max(660px,92svh);padding:0 var(--gutter) 58px;align-items:flex-end}
  .project-visual{inset:0 0 22%}
  .project-visual::after{background:linear-gradient(0deg,var(--black),#0808088a 26%,transparent 65%)}
  .project-copy{max-width:100%;padding:0}
  .project-name{font-size:clamp(90px,28vw,162px);line-height:.84}
  .project-domain{font-size:10px;margin-top:28px;gap:22px}
  .project-domain>span{font-size:26px}
  .project--grave-shift .project-image{object-position:58% center}
  .project--best .project-visual{inset:2% -9% 24%}
  .project--best .project-visual::after{background:linear-gradient(0deg,var(--black),transparent 50%)}
  .project--camp-grizzly .project-visual{inset:0 1% 20%}
  .project--camp-grizzly .project-image{object-position:50% 22%}
  .project--camp-grizzly .project-visual::after{background:linear-gradient(0deg,var(--black),transparent 47%)}
  .footer{font-size:8px;padding-bottom:19px}
  .footer-symbol{font-size:22px;margin-left:-43px}
}
@media(max-width:360px){
  :root{--gutter:18px}
  .project-name{font-size:28vw}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .custom-cursor,.custom-cursor a{cursor:url("/assets/cursor.svg") 16 16,crosshair}
  .custom-cursor button,.custom-cursor a:hover{cursor:url("/assets/cursor.svg") 16 16,pointer}
  .custom-cursor .cursor{display:none!important}
}
@media(forced-colors:active){
  .cursor{display:none!important}
  .project-section{border-color:CanvasText}
  .project-visual{display:none}
  .custom-cursor,.custom-cursor a,.custom-cursor button{cursor:auto}
}