@font-face{font-family:Geologica;src:url('../assets/geologica.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Victor;src:url('../assets/victor-mono-thin.woff2') format('woff2');font-weight:100;font-display:swap}
:root{--hover-color:#929292;--edge:clamp(20px,1.953125vw,48px)}
*{box-sizing:border-box}
html{height:100%;overflow:hidden}
body{height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;margin:0;background:#080808;color:#f4f4ef;font-family:Geologica,sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}
a:hover{color:var(--hover-color)}
a:focus-visible{outline:2px solid var(--hover-color);outline-offset:6px}
/* Match the homepage name, including its top and left offsets. */
.topbar{padding:clamp(11px,1.0742vw,26px) var(--edge) 0;display:flex;align-items:flex-start}
.name{display:block;font-family:Geologica,sans-serif;font-weight:600;font-size:clamp(36px,4.8828125vw,100px);font-variation-settings:'wght' 600;line-height:1.32;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
/* Shared title metrics: Geologica 400, 50/1024 viewport units. */
.index{min-height:0;padding:clamp(16px,5vh,60px) var(--edge) 12px;display:flex;flex-direction:column}
.index h1{font-family:Geologica,sans-serif;font-size:calc(100vw / 1024 * 50);font-weight:400;line-height:1;letter-spacing:0;margin:0 0 clamp(12px,4vh,48px)}
.project-list{list-style:none;padding:0;margin:0;width:36vw;flex:1;min-height:0;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));max-height:470px}
.project-list li{position:relative;margin:0;isolation:isolate;display:flex;align-items:center}
.project-list li:has(a:hover),.project-list li:focus-within{z-index:2}
.project-list a{display:block;width:max-content;max-width:100%;padding:4px 0;font-size:min(clamp(25px,3vw,44px),4.5vh);line-height:1.2;letter-spacing:-.035em;transition:color .18s}
/* One large preview, anchored to the viewport rather than the project row. */
.preview-cloud{position:fixed;top:var(--preview-top,18vh);left:var(--preview-left,38vw);height:var(--preview-height,60vh);width:var(--preview-stage-width,50vw);display:none;align-items:flex-start;justify-content:flex-start;pointer-events:none}
.preview-cloud.is-visible{display:flex}
.preview-cloud img{display:none;width:var(--preview-width,auto);height:var(--preview-height,auto);max-width:100%;max-height:100%;object-fit:contain;flex-shrink:0;transform:translateX(var(--preview-offset,0px));box-shadow:0 8px 24px #0005}
.preview-cloud img.is-current{display:block}
footer{font:14px Victor,monospace;display:flex;justify-content:space-between;padding:12px var(--edge) 18px;color:#9b9b95}
@media(hover:none){.preview-cloud{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-list a{transition:none!important}}

@media(max-width:700px){
 .name{font-size:12.5vw;line-height:1;max-width:80vw}
 .topbar{padding:4.375vw 6.25vw 0}
 .index{padding:30px 6.25vw 12px}
 .index h1{font-size:12.5vw;line-height:1;margin-bottom:24px}
 .project-list{width:100%;max-height:none}
 .preview-cloud{display:none!important}
 .project-list a{font-size:min(7vw,4.3dvh)}
 footer{padding:12px 6.25vw max(18px,env(safe-area-inset-bottom));font-size:11px}
}