/* Homepage: the real portrait is the hero; project links form a compact dock. */
.directory-hub{block-size:100svh;block-size:100dvh;min-block-size:560px;display:flex;flex-direction:column;position:relative;overflow:visible;padding:max(22px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.directory-hub .portrait-heading{position:relative;max-inline-size:980px;margin-inline:auto;padding:0;text-align:center;z-index:3}
.directory-hub .portrait-heading h1{font-size:18px;letter-spacing:.23em;color:#eee}
.directory-author{margin:5px 0 0;color:#999;font-size:10px;letter-spacing:.12em}
.directory-hub .portrait-world{display:contents}
.directory-hub .portrait-stage{position:absolute;inset:0;inline-size:100%;block-size:100%;margin:0;z-index:0}
/* Center the face in the open area above the dock; the hat may pass behind the header. */
.directory-hub #self-portrait,.directory-hub .portrait-fallback picture{transform:translateY(clamp(-140px,-14svh,-70px))}
.directory-hub #self-portrait{mask-image:linear-gradient(#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(#000 88%,transparent 100%)}
.directory-hub .portrait-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 76% 68% at 50% 43%,transparent 44%,#0005 65%,#000d 87%,#000 100%),linear-gradient(0deg,#000 0%,transparent 32%,transparent 90%,#000 100%)}
.directory-hub .portrait-fallback picture{block-size:100%;display:flex;align-items:center;justify-content:center}
.directory-hub .portrait-fallback img{object-fit:contain;inline-size:auto;block-size:auto;max-inline-size:100%;max-block-size:100%;mask-image:linear-gradient(#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(#000 88%,transparent 100%)}
.directory-hub .portrait-retry{position:absolute;top:max(70px,9svh);bottom:auto;left:auto;right:18px;z-index:3;min-block-size:36px;padding:5px 10px;background:#000b;border-radius:20px;font-size:10px}
.directory-hub .portrait-navigation{display:flex;flex-direction:column;align-items:center;gap:4px;inline-size:min(100%,1000px);padding:0;margin:auto auto 0;position:relative;z-index:3;pointer-events:none}
.directory-hub .portrait-audio{position:static;order:-1;align-self:flex-end;margin:0;z-index:2;pointer-events:auto}
.directory-hub .portrait-music{display:flex;align-items:center;justify-content:center;gap:7px;min-inline-size:54px;min-block-size:44px;padding:4px 10px}
.directory-hub .portrait-music svg{width:17px;height:17px}
.directory-hub .portrait-music-status{top:auto;bottom:100%;right:0}
.project-directory{inline-size:100%}
.directory-heading{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.project-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.project-card{flex:0 0 calc((100% - 16px)/3);min-inline-size:0;min-block-size:50px;display:flex;flex-direction:row;align-items:center;gap:9px;overflow:hidden;position:relative;margin:0;padding:0 0 0 10px;text-decoration:none;color:#ddd;background:linear-gradient(130deg,#19191e,#0e0e12);pointer-events:auto;border:1px solid #34343b;border-radius:9px;font-family:inherit;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform 160ms ease,border-color 160ms ease,background 160ms ease}
.project-art{position:relative;flex:none;display:grid;place-items:center;inline-size:32px;block-size:32px;overflow:hidden;border-radius:4px;background:#050505}
.project-art img{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.project-art-point-cloud img{object-fit:cover}
.project-art-wordmark{background:transparent}
.project-art.project-icon{background:transparent;color:#d3d6e0}
.project-icon svg{display:block;inline-size:26px;block-size:26px;max-inline-size:100%;max-block-size:100%}
.project-label{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:5px;flex:1;padding:8px 10px 8px 0;font-size:10px;line-height:1.4;font-weight:400;letter-spacing:.065em}
.project-open{display:none}
.project-card:focus-visible{outline:2px solid #ddd;outline-offset:3px;border-color:#c8c8d0}
.project-card:active{transform:scale(.975);border-color:#b1b1bd}
.project-card[aria-disabled=true]{cursor:default}
.game-shape{position:relative;width:25px;height:25px;transform:rotate(-14deg)}
.game-shape i{position:absolute;inset:4px;border:1px solid #89909e70;border-radius:3px;transform:rotate(30deg)}
.game-shape i:nth-child(2){transform:translate(3px,-3px) rotate(30deg);border-color:#c9d0dd90}
.game-shape i:nth-child(3){transform:translate(-3px,3px) rotate(30deg);border-color:#737d8c40}
.coming-soon{display:none}
.project-soon{display:block;margin-top:1px;font-size:9px;letter-spacing:.025em;color:#999}
@media(hover:hover){.project-card:not([aria-disabled=true]):hover{transform:translateY(-2px);border-color:#777784;background:linear-gradient(130deg,#202026,#0d0d11)}}
@media(max-width:760px){.project-card{flex-basis:calc((100% - 16px)/3)}}
@media(max-width:650px){.directory-hub .portrait-heading h1{font-size:15px}.directory-hub .portrait-stage{inline-size:100%;margin:0}.project-card{flex-basis:calc((100% - 8px)/2);min-block-size:48px;border-radius:8px}.project-label{font-size:11px}.project-art{inline-size:29px;block-size:29px}.directory-hub .portrait-navigation{padding-top:6px}}
@media(prefers-reduced-motion:reduce){.directory-hub .project-card{transition:none}.directory-hub .project-card:hover,.directory-hub .project-card:active{transform:none}}
.directory-hub:is([data-entry="idle"],[data-entry="entering"],[data-entry="gliding"]) .directory-author{visibility:hidden}
@media(max-width:360px){.project-card{padding-inline-start:8px;gap:7px}.project-art{inline-size:22px;block-size:25px}.project-label{padding-inline-end:8px}}