@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}
@font-face{font-family:Silver;src:url("/assets/fonts/silver-wordmark.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;size-adjust:150%;ascent-override:65%;descent-override:15%;line-gap-override:0%}

:root{
  color-scheme:dark;
  --paper:#f1f1ee;
  --black:#000000;
  --line:#30302e;
  --muted:#999995;
  --mono:PlexMono,"Courier New",monospace;
  --display:BarlowCondensed,Impact,"Arial Narrow",sans-serif;
  --gutter:clamp(24px,3.6vw,70px);
  --hero-inset:clamp(28px,7vw,100px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
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:100dvh;border-bottom:1px solid var(--line);isolation:isolate;overflow:hidden}
.hero,.project-section{scroll-snap-align:start;scroll-snap-stop:always}
.wordmark{--mark-size:min(clamp(148px,20vw,260px),32dvh);position:absolute;top:var(--hero-inset);left:var(--hero-inset);width:calc(var(--mark-size)*1.88);max-width:calc(100% - var(--hero-inset)*2);margin:0;font-weight:400}
.wordmark-row{display:block;white-space:nowrap;line-height:1;letter-spacing:-.055em;font-synthesis:none}
.wordmark-symbol{height:calc(var(--mark-size)*1.04);padding-left:.24em;font-size:var(--mark-size);letter-spacing:.06em}
.wordmark-null{height:calc(var(--mark-size)*.72);font-size:calc(var(--mark-size)*.58)}
.wordmark-set{height:calc(var(--mark-size)*.5);font-size:calc(var(--mark-size)*.42);text-align:right}
[data-face="mingliu"]{font-family:"MingLiU-ExtB","MingLiU","Times New Roman",serif;font-weight:400}
[data-face="barlow"]{font-family:var(--display);font-weight:700}
[data-face="georgia"]{font-family:Georgia,serif;font-weight:400}
[data-face="silver"]{font-family:Silver,"Courier New",monospace;font-weight:400}
[data-face="plex"]{font-family:var(--mono);font-weight:400}
[data-face="impact"]{font-family:Impact,"Arial Narrow",sans-serif;font-weight:400}
[data-face="courier"]{font-family:"Courier New",Courier,monospace;font-weight:400}
[data-face="arial"]{font-family:"Arial Black",Arial,Helvetica,sans-serif;font-weight:900}

.project-section{position:relative;display:grid;min-height:max(540px,100dvh);background:var(--black);border-bottom:1px solid var(--line)}
.project-link{position:relative;display:flex;align-items:center;min-height:0;padding:clamp(40px,9dvh,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%,#000000b8 17%,#00000025 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 min(clamp(106px,14.4vw,236px),24dvh)/.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),#00000090 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:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;margin:0 var(--gutter);padding:30px 0;color:var(--muted);font-size:9px;letter-spacing:.025em;scroll-snap-align:end;scroll-snap-stop:always}
.footer>a{font:23px/1 Arial,sans-serif;color:var(--paper);display:grid;place-items:center;min-width:44px;min-height:44px}
.footer>.footer-symbol{font:24px/1 Georgia,serif}
.footer>a:last-child{justify-self:end}

.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.is-hovering{width:46px}
.cursor.is-down{width:25px}
@media(any-hover:hover) and (any-pointer:fine){
  body,body a,body button{cursor:url("/assets/cursor.svg?v=2") 16 16,url("/assets/cursor.png") 16 16,crosshair}
  .cursor-ready,.cursor-ready a,.cursor-ready button{cursor:none}
  .custom-cursor .cursor{display:flex}
  .custom-cursor .cursor.is-visible{opacity:1}
}

.colophon{max-width:760px;padding:clamp(32px,7vw,100px);font:14px/1.8 var(--mono)}
.colophon h1{font:700 76px/1 var(--display);margin:70px 0 45px}
.colophon p{margin:0 0 32px}
.colophon a{text-decoration:underline;text-underline-offset:4px}
.error-page{min-height:100dvh;padding:var(--hero-inset);display:grid;align-content:center;justify-items:start;gap:36px}
.error-page .wordmark{--mark-size:120px;position:relative;top:auto;left:auto;max-width:100%}
.error-page h1{font:inherit;margin:0}

@media(max-width:1050px){
  .project-name{font-size:min(15.8vw,24dvh)}
  .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}
  .project-link{padding:0 var(--gutter) 58px;align-items:flex-end}
  .project-visual{inset:0 0 22%}
  .project-visual::after{background:linear-gradient(0deg,var(--black),#0000008a 26%,transparent 65%)}
  .project-copy{max-width:100%;padding:0}
  .project-name{font-size:min(clamp(90px,28vw,162px),22dvh);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>.footer-symbol{font-size:22px}
}
@media(max-width:360px){
  :root{--gutter:18px}
  .project-name{font-size:min(28vw,22dvh)}
}
@media(max-height:539px){
  html{scroll-snap-type:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .cursor-ready,.cursor-ready a,.cursor-ready button{cursor:url("/assets/cursor.svg?v=2") 16 16,url("/assets/cursor.png") 16 16,crosshair}
  .custom-cursor .cursor{display:none!important}
}
@media(forced-colors:active){
  .cursor{display:none!important}
  .project-section{border-color:CanvasText}
  .project-visual{display:none}
  body,body a,body button,.cursor-ready,.cursor-ready a,.cursor-ready button{cursor:auto}
}