.project-container{z-index:2;align-items:start;width:100%;margin:0;display:grid;position:relative}@media (min-width:768px){.project-container{grid-template-columns:min(400px,20vw) 2fr;max-width:1600px}}.project-info{grid-gap:4em;grid-template-columns:1fr;gap:4em;display:grid}.project-info p{margin-bottom:.5em}.title{font-family:var(--font-header);z-index:10;text-box:trim-both cap alphabetic;margin:.1em 0 .375em;font-size:clamp(1.5em,1.5em + 3vw,5em);font-weight:400;line-height:1;position:relative}.subtitle{font-size:clamp(1em,2vw,1.5em);font-weight:400}.thumb{z-index:0;width:100%;max-width:100vw;position:sticky;top:0;overflow:visible}@media (min-width:768px){.thumb{min-width:100px;max-width:min(25vw,400px);margin-bottom:2rem;position:relative}}.thumb img{-o-object-fit:contain;object-fit:contain;-o-object-position:top center;object-position:top center}.thumb .blurhash{width:100%;height:100%;position:absolute;inset:0}@media (min-width:768px){.thumb .thumb-overlay{display:none}}.thumb .thumb-overlay .bottom-fade{z-index:100;background:linear-gradient(color(from var(--color-bg) srgb r g b / .5) 0%, var(--color-bg) 50%);position:absolute;inset:0}@media (min-width:768px){.mobile-thumb{display:none}}.big-thumb{display:none}@media (min-width:768px){.big-thumb{display:block}}.project-body{z-index:10;padding:1em;position:relative}@media (min-width:768px){.project-body{padding:1em 2em 10em}}.tag{text-transform:uppercase;letter-spacing:.05em;border:1px solid color(from var(--color-fg) srgb r g b / .5);border-radius:100em;padding:.25em 1em;font-size:.75em;font-weight:550;line-height:1}.project-tags{flex-flow:wrap;align-items:center;gap:.25em .2em;margin:.5em 0 1em;display:flex}
.details-container{border-top:.5px solid var(--color-fg);margin-top:1.5em;container:details/inline-size}.detail{grid-gap:.5em;border-bottom:.5px solid var(--color-fg);gap:.5em;width:100%;padding:.5em 0;display:grid}@container (min-width:600px){.detail{grid-template-columns:2fr 3fr}}.detail-header{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;margin-top:.1em;font-size:.875em;font-style:normal;font-weight:600}.detail-body{font-style:normal;font-weight:400}
.audio-progress-bar{-webkit-user-select:none;user-select:none;touch-action:none;cursor:pointer;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.audio-progress-track{background-color:color(from var(--color-fg) srgb r g b / .5);flex-grow:1;height:2px;position:relative}.audio-progress-range{background-color:var(--color-fg);height:100%;position:absolute}.audio-progress-seeker{background-color:var(--color-fg);transform-origin:50%;z-index:2;width:2px;height:.7em;transition:height .2s,width .2s,left .1s;display:block}.audio-progress-bar:hover .audio-progress-seeker,.audio-progress-bar.is-playing .audio-progress-seeker{width:1px;height:3em}.audio-progress-hover-bar{transform-origin:50%;opacity:0;z-index:1;background-color:#f88;width:1px;height:3em;position:absolute}@media (min-width:768px){.audio-progress-bar:hover .audio-progress-hover-bar{opacity:.5}}
.track-box{grid-gap:.5em;grid-template-columns:auto 4fr auto 1fr;align-items:center;gap:.5em;transition:background-color .2s,opacity .2s;display:grid;position:relative}.track-box:hover{background-color:color(from var(--color-bg) srgb calc(r + .075) calc(g + .075) calc(b + .075));opacity:1!important}@media (min-width:768px){.track-box{grid-template-columns:3fr auto 2fr}}.track-box.dim .track-title h5,.track-box.dim .track-time,.track-box.dim .audio-progress-bar{opacity:.4}.tracks-title{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1em;font-size:.875em;font-style:normal;font-weight:600}.track-title{flex-direction:row;justify-content:space-between;align-items:center;padding-top:.25em;padding-bottom:.25em;display:flex;position:relative}.track-time{text-align:right;font-family:var(--font-mono);-webkit-user-select:none;user-select:none;width:5ch;font-size:.8em}.play-pause{font-family:var(--font-mono), monospace;z-index:2;text-align:center;opacity:0;width:100%;height:100%;color:var(--color-fg);background-color:#0000;border:none;padding:.25em 0;transition:opacity .2s,background-color .2s;display:none;position:absolute;top:0;left:0;cursor:pointer!important}.play-pause:hover,.play-pause:focus-visible{background-color:color(from var(--color-bg) srgb calc(r + .075) calc(g + .075) calc(b + .075) / .8);opacity:1}@media (min-width:768px){.play-pause{display:block}}.play-pause-mobile{color:var(--color-fg);border:none;border-left:.5px solid var(--color-fg);border-right:.5px solid var(--color-fg);background-color:#0000;place-items:center;height:100%;display:grid}@media (min-width:768px){.play-pause-mobile{display:none}}.seeker{background:var(--color-fg);pointer-events:none;width:2px;height:.5em;transition:width 75ms,height 75ms;position:absolute;top:50%;transform:translate(-50%,-50%)}.seeker-box{cursor:pointer;width:100%;height:100%;position:relative}.seeker-box:hover .seeker{width:1px;height:100%;transition:width 75ms,height 75ms}.track-divider{border-top:.25px solid var(--color-fg);width:100%;height:0}.tracklist{margin-top:2em;margin-bottom:2em}.h3{margin-bottom:.5em}
main.main-container{grid-gap:2em;gap:2em;display:grid;position:absolute;inset:0}@media (min-width:768px){main.main-container{grid-template-columns:auto 3fr}}.projects{background-color:var(--color-bg);z-index:10;position:relative}@media (min-width:768px){.projects{margin-top:14vw}}.projects{container-type:inline-size}section#about{z-index:20;max-width:100vw;margin:10rem 0;padding:1em;position:relative}@media (min-width:768px){section#about{padding:1em 0}}section#about p{max-width:66ch;margin:0 0 .75em;line-height:1.5}section#about h2{font-family:var(--font-header);margin-bottom:.5em;font-size:clamp(1.5em,1.5em + 3vw,5em);line-height:.95}.contact-link{font-family:var(--font-header);margin-bottom:2em;padding:1rem;font-size:2em;transition:scale .3s,color .3s}.contact-link:before{content:"→";margin-right:.5em;transition:transform .3s,color .3s;display:inline-block;position:relative;top:-.1em;transform:rotate(-45deg)scale(1.3)}.contact-link:hover{color:var(--color-emph)}.contact-link:hover:before{transform:rotate(-45deg)translate(.1em)scale(1.3)}@media (min-width:768px){.contact-link{padding:0}}
header{z-index:1;width:100%;max-width:100vw;padding:1em;position:sticky;top:0;overflow-x:visible}@media (min-width:768px){header{width:min(25vw,420px);height:100vh}}header h3{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;margin:2em 0 .5em;font-size:.75em;font-style:normal;font-weight:500}header h3:first-of-type{margin-top:2.5em}header a{transition:font-weight .2s,color .2s}header a:hover{color:var(--color-emph);font-weight:450}@media (min-width:768px){header .active a,header a.active{color:var(--color-emph);font-weight:600}}.h1-container{width:100%;overflow:hidden}@media (min-width:768px){.h1-container{overflow:visible}}.h1-container h1{font-family:var(--font-header);cursor:pointer;text-wrap:no-wrap;transform-origin:0 0;text-box:trim-both cap alphabetic;width:100vw;margin:0 0 .25em;padding-top:.1em;font-style:normal;font-weight:400;line-height:.95}.tagline{letter-spacing:-.01em;font-size:clamp(1em,1em + 1vw,1.25em);line-height:1.2}.tags{flex-direction:column;justify-content:space-around;align-items:center;width:100%;display:flex}.tags h2{text-transform:uppercase;letter-spacing:.05em;padding:.25em;font-style:normal;font-weight:300;line-height:1}.dot{background:var(--color-fg);transform-origin:50%;width:.05em;height:.35em;transform:rotate(45deg)}.nav{margin:0;padding:0;list-style:none}.nav li{padding:0}.theme-switcher{margin-top:32px;position:relative}@media (min-width:768px){.theme-switcher{position:absolute;bottom:1em;left:1em}}
.switch-container{place-items:center;width:max-content;display:grid;position:relative;overflow:clip}.switch-container .switch-indicator{display:none}@media (min-width:768px){.switch-container .switch-indicator{pointer-events:none;background-color:color(from var(--color-bg) srgb calc(r + .125) calc(g + .125) calc(b + .125));place-items:center;transition:opacity .2s;display:grid;position:absolute;inset:0}}@media (min-width:768px){.switch-container .ToggleGroup{opacity:0}.switch-container:hover .switch-indicator{opacity:0}.switch-container:hover .ToggleGroup{opacity:1}}.ToggleGroup button{all:unset}.ToggleGroup{background-color:color(from var(--color-bg) srgb calc(r - .075) calc(g - .075) calc(b - .075));box-shadow:inset 0 2px 10px var(--color-bg);border-radius:8px;transition:opacity .2s;display:inline-flex}button.ToggleGroupItem{background-color:color(from var(--color-bg) srgb calc(r - .075) calc(g - .075) calc(b - .075));color:var(--color-fg);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:32px;height:32px;margin-left:1px;font-size:16px;line-height:1;display:flex}button.ToggleGroupItem>svg{transition:transform .2s}button.ToggleGroupItem:hover{background-color:color(from var(--color-bg) srgb calc(r + .1) calc(g + .1) calc(b + .1))}button.ToggleGroupItem:hover>svg{transform:scale(1.25)}button.ToggleGroupItem:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px;margin-left:0}button.ToggleGroupItem.last{border-top-right-radius:8px;border-bottom-right-radius:8px}button.ToggleGroupItem[aria-checked=true]{background-color:var(--color-fg);color:var(--color-bg)}button.ToggleGroupItem:focus-visible{box-shadow:inset 0 0 0 2px var(--color-accent);position:relative}
.TooltipContent{color:var(--color-bg);background-color:var(--color-emph);-webkit-user-select:none;user-select:none;will-change:transform, opacity;border-radius:4px;padding:6px 8px;font-size:14px;line-height:1;animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);box-shadow:0 10px 38px -10px #0e121659,0 10px 20px -15px #0e121633}.TooltipContent[data-state=delayed-open][data-side=top]{animation-name:slideDownAndFade}.TooltipContent[data-state=delayed-open][data-side=right]{animation-name:slideLeftAndFade}.TooltipContent[data-state=delayed-open][data-side=bottom]{animation-name:slideUpAndFade}.TooltipContent[data-state=delayed-open][data-side=left]{animation-name:slideRightAndFade}.TooltipArrow{fill:var(--color-emph)}@keyframes slideUpAndFade{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes slideRightAndFade{0%{opacity:0;transform:translate(-2px)}to{opacity:1;transform:translate(0)}}@keyframes slideDownAndFade{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes slideLeftAndFade{0%{opacity:0;transform:translate(2px)}to{opacity:1;transform:translate(0)}}