/* The artwork occupies the breathing room between the name and the menu. */
.directory-hub{min-block-size:590px;gap:10px}
.directory-hub .portrait-heading h1{font-size:clamp(19px,2vw,25px);letter-spacing:.23em}
.directory-hub .directory-author{font-size:clamp(18px,2.3vw,28px);letter-spacing:.1em;line-height:1.35;margin-top:5px;color:#c8c8ce}
.directory-hub .point-cloud-stage{position:relative;inset:auto;flex:1 1 auto;min-block-size:180px;inline-size:min(100%,1100px);align-self:center;overflow:hidden}
.directory-hub .point-cloud-stage::after{background:linear-gradient(#000 0%,transparent 12%,transparent 84%,#000 100%);z-index:1}
#home-point-cloud{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.directory-hub .portrait-navigation{margin:0 auto;flex:none}
/* Exact TWO-STAR Shop spectrum, rhythm, and one-pixel masked seam. */
:root{--control-spectrum:linear-gradient(112deg,#ff265c,#ffb638 17%,#b4ff56 32%,#23ffc8 47%,#38b6ff 63%,#a94cff 80%,#ff265c)}
@keyframes home-spectrum-flow{0%{background-position:0% 50%}38%{background-position:38% 35%}64%{background-position:64% 65%}100%{background-position:100% 50%}}
@keyframes home-spectrum-breathe{0%,8%,100%{opacity:.18}19%{opacity:.92}34%{opacity:.4}48%{opacity:.98}61%{opacity:.2}73%{opacity:.88}89%{opacity:.18}}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
.directory-hub .project-card[data-project="contact"]::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background-image:var(--control-spectrum);background-size:300% 200%;animation:home-spectrum-flow 11.7s ease-in-out infinite,home-spectrum-breathe 11.7s ease-in-out infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}}
@media(max-width:600px){.directory-hub{gap:6px;padding-top:max(18px,env(safe-area-inset-top))}.directory-hub .directory-author{font-size:21px}.directory-hub .portrait-heading h1{font-size:17px}.directory-hub .point-cloud-stage{margin:0 -18px;inline-size:calc(100% + 36px)}}
@media(max-height:650px){.directory-hub{min-block-size:540px;padding-top:12px;gap:4px}.directory-hub .directory-author{font-size:18px}.directory-hub .project-grid{gap:7px}.directory-hub .portrait-music{min-block-size:36px}}
@media(prefers-reduced-motion:reduce){.directory-hub .project-card[data-project="contact"]::before{animation:none;opacity:.6}}
@media(forced-colors:active){.directory-hub .project-card[data-project="contact"]::before{display:none}}

/* Full-screen constellation; navigation and name float over the artwork. */
@font-face{font-family:LuckyDisplay;src:url('/two-star/assets/fonts/space-grotesk-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
.directory-hub .portrait-heading h1{font-family:LuckyDisplay,'Helvetica Neue',sans-serif;font-size:clamp(24px,3.3vw,44px);font-weight:500;letter-spacing:.18em;line-height:1.3;text-shadow:0 2px 22px #000,0 1px 5px #000}
#home-name-origin{font-family:LuckyDisplay,'Helvetica Neue',sans-serif;font-weight:500;letter-spacing:.18em;font-size:clamp(24px,3.3vw,44px)}
.directory-hub .point-cloud-stage{position:absolute;inset:0;inline-size:100%;block-size:100%;min-block-size:0;max-inline-size:none;margin:0;flex:none;z-index:0}
.directory-hub .point-cloud-stage::after{background:linear-gradient(#0007,transparent 15%,transparent 80%,#0004)}
.directory-hub .portrait-navigation{margin:auto auto 0}
@media(max-width:600px){.directory-hub .portrait-heading h1{font-size:clamp(22px,6vw,30px);letter-spacing:.14em}.directory-hub .point-cloud-stage{inline-size:100%;margin:0}}