/* Shared touch navigation: one circular language, one safe-area baseline. */
:root{--ui-bottom:max(16px,env(safe-area-inset-bottom));--ui-left:max(16px,env(safe-area-inset-left));--ui-right:max(16px,env(safe-area-inset-right));--ui-spectrum:linear-gradient(112deg,#ff265c,#ffb638 17%,#b4ff56 32%,#23ffc8 47%,#38b6ff 63%,#a94cff 80%,#ff265c)}
.ui-orb,body #music,.directory-hub .portrait-music,.viewer button:is(.close,.previous,.next),.photo-controls [data-center]{box-sizing:border-box;display:grid;place-items:center;width:46px;height:46px;min-width:46px;min-height:46px;padding:11px;border:1px solid #7778;border-radius:50%;background:#111c;color:#ddd;box-shadow:0 3px 18px #0006;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(8px)}
.ui-orb:hover,body #music:hover{background:#25252ae6;border-color:#bbbc}
.ui-orb:focus-visible{outline:2px solid white;outline-offset:4px}
.ui-back{position:fixed!important;left:var(--ui-left)!important;bottom:var(--ui-bottom)!important;top:auto!important;z-index:20;letter-spacing:normal!important}
.ui-orb svg{display:block;flex:none;pointer-events:none}
body #music{right:var(--ui-right);bottom:var(--ui-bottom);font-size:18px}
[data-music-icon] .music-waves{display:none}[data-music-icon][data-playing="true"] .music-waves{display:initial}[data-music-icon][data-playing="true"] .music-muted{display:none}
.directory-hub .portrait-music-label{display:none}
.directory-hub .portrait-music svg{width:20px;height:20px}
.directory-hub .portrait-audio{padding-bottom:4px}
/* Rounded, weighty title; the white base remains while a spectrum wave passes. */
@font-face{font-family:LuckyRound;src:url('/twin-star/assets/fonts/fredoka-latin.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
.directory-hub .portrait-heading h1,#home-name-origin{font-family:LuckyRound,'Arial Rounded MT Bold',sans-serif;font-weight:700;letter-spacing:.045em;position:relative;font-size:clamp(30px,4vw,54px);line-height:1.2;color:#f4f4f4;text-shadow:0 2px 20px #0009}
.directory-hub .portrait-heading .name-spectrum,#home-name-origin::after{position:absolute;inset:0;pointer-events:none;background:var(--ui-spectrum);background-size:300% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;animation:ui-spectrum-flow 11.7s ease-in-out infinite,ui-spectrum-breathe 11.7s ease-in-out infinite}
@keyframes ui-spectrum-flow{0%{background-position:0% 50%}38%{background-position:38% 35%}64%{background-position:64% 65%}100%{background-position:100% 50%}}
@keyframes ui-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}}
/* Contact card and its independent, thumb-friendly dismiss button. */
#home-contact{overflow:visible;max-block-size:calc(100dvh - 32px);padding:0 0 66px;border:0;background:transparent;box-shadow:none}
#home-contact .contact-window-content{max-height:calc(100dvh - 116px);overflow:auto;border:1px solid #34343b;border-radius:14px;background:linear-gradient(145deg,#15151a,#09090c);box-shadow:0 24px 90px #000b}
#home-contact .contact-window-content header{justify-content:center;text-align:center;margin-bottom:20px}
.contact-window-dismiss{position:absolute;bottom:0;left:50%;transform:translateX(-50%);margin:0}
#home-contact .contact-window-dismiss button{margin:0}
#home-contact .contact-window-link{position:relative;justify-content:center;gap:12px;overflow:hidden}
#home-contact .contact-window-text{flex:0 1 auto;text-align:center}
#home-contact .contact-window-arrow{display:none}
#home-contact .contact-window-label,#home-contact .contact-window-value{text-align:center}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
#home-contact .contact-window-link::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--ui-spectrum);background-size:300% 200%;animation:ui-spectrum-flow 11.7s ease-in-out infinite,ui-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}}
/* Photography: centered title, fixed corners, centered photo paging. */
.site-header{justify-content:center;padding:30px 0 34px}
.site-header h1{font-size:16px;letter-spacing:.1em;text-align:center;color:#ddd}
.gallery{padding-bottom:92px}
.viewer[open]{padding:18px 18px calc(var(--ui-bottom) + 72px);gap:0}
.viewer .viewer-top{height:0;min-height:0;padding:0}
.viewer .close{position:fixed;left:var(--ui-left);bottom:var(--ui-bottom);z-index:12}
.viewer .viewer-bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--ui-bottom);width:min(234px,calc(100% - 148px));height:46px;min-height:46px;justify-content:center;gap:12px;z-index:10}
.viewer .counter{min-width:40px;text-align:center;white-space:nowrap}
.viewer .photo-controls{position:fixed;top:auto;left:auto;right:var(--ui-right);bottom:calc(var(--ui-bottom) + 60px);width:46px;z-index:12}
.viewer .photo-controls [data-center]{border:1px solid #7778}
.viewer .sensor-status{bottom:calc(var(--ui-bottom) + 122px);max-width:75vw}
/* A single apparel card, with its back control independent of the content. */
.brand-header{height:0;min-height:0}
/* Point Cloud gallery: exhibit art and centered captions do the explaining. */
main:has(>.exhibits)>header{justify-content:center;padding:30px 0 34px}
main:has(>.exhibits)>header h1{font-size:16px;letter-spacing:.08em;text-align:center;color:#ddd}
.exhibit>div{justify-content:center;text-align:center}
.exhibit>div h2{width:100%;text-align:center}
.pointcloud-music{position:fixed!important;right:var(--ui-right)!important;bottom:var(--ui-bottom)!important;top:auto!important;z-index:30}
.exhibit-heading h1{text-align:center}
@media(max-width:600px){.directory-hub .portrait-heading h1,#home-name-origin{font-size:clamp(26px,7.8vw,39px);letter-spacing:.025em}.site-header,main:has(>.exhibits)>header{padding:24px 0 28px}.site-header h1,main:has(>.exhibits)>header h1{font-size:15px}.viewer .viewer-bottom{gap:6px}.viewer .counter{font-size:10px;min-width:32px}}
@media(prefers-reduced-motion:reduce){.directory-hub .portrait-heading .name-spectrum,#home-name-origin::after,#home-contact .contact-window-link::before{animation:none;opacity:.45}}
@media(forced-colors:active){.directory-hub .portrait-heading .name-spectrum,#home-name-origin::after,#home-contact .contact-window-link::before{display:none}}

#home-name-origin::after{content:attr(data-name)}
html:has(.viewer[open]){scrollbar-gutter:auto}
.exhibit-heading{grid-template-columns:minmax(0,1fr)}
.exhibit-heading h1{padding-right:0}
/* Smaller Boldonse name with a silver spectrum wave. */
@font-face{font-family:LuckyBoldonse;src:url('/site/fonts/Boldonse-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.directory-hub .portrait-heading h1,#home-name-origin{font-family:LuckyBoldonse,sans-serif;font-weight:400;font-size:clamp(19px,2.2vw,29px);letter-spacing:.025em;line-height:1.6;color:#dedfe3}
.directory-hub .portrait-heading .name-spectrum,#home-name-origin::after{background-image:linear-gradient(112deg,#626976,#eef1f7 17%,#a9b2c1 32%,#fff 47%,#929cab 63%,#e4e8ef 80%,#626976);animation:ui-spectrum-flow 11.7s ease-in-out infinite,ui-spectrum-breathe 11.7s ease-in-out infinite}
/* Compact the dock while keeping the four established destinations. */
.directory-hub .portrait-navigation{inline-size:min(calc(100% - 24px),400px);gap:4px}
.directory-hub .project-grid{gap:5px}
.directory-hub .project-card{min-block-size:42px;padding-inline:12px;gap:8px}
.directory-hub .project-label{padding-block:7px;font-size:10px;letter-spacing:.05em}
.directory-hub .project-art,.directory-hub .project-icon svg{inline-size:20px;block-size:20px}
.directory-hub .portrait-audio{padding-bottom:0}
/* Apparel is now a top-aligned portal rather than a centered interlude. */
.brand-selection{margin:0 auto;padding:14px 0 96px}
.brand-intro{margin-bottom:22px}
/* Photography owns a music button inside each view, including its modal. */
.photography-music,.viewer .photography-music{position:fixed;right:var(--ui-right);bottom:var(--ui-bottom);top:auto;left:auto;z-index:30;width:46px;height:46px;padding:11px;min-height:46px;border:1px solid #7778;background:#111c;border-radius:50%;display:grid;place-items:center}
@media(max-width:600px){.directory-hub .portrait-heading h1,#home-name-origin{font-size:clamp(15px,4.6vw,19px);letter-spacing:.01em}.brand-selection{padding:14px 0 96px}.directory-hub .project-label{font-size:10px}}

/* The home view always fits the app viewport, including shorter phones. */
.directory-hub{min-block-size:0;min-height:0;block-size:100dvh;height:100dvh;overflow:hidden}

/* Persistent home navigation and an in-page top-edge scroll shortcut. */
#site-home{position:fixed;z-index:60;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:36px;height:36px;display:grid;place-items:center;box-sizing:border-box;border:1px solid #7776;border-radius:50%;background:#101014b8;color:#ddd;backdrop-filter:blur(6px);text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#site-home:hover{border-color:#aaa;background:#222c}
#site-home:focus-visible,#scroll-top:focus-visible{outline:2px solid #eee;outline-offset:2px}
#scroll-top{position:fixed;z-index:55;top:0;left:60px;right:60px;height:max(16px,env(safe-area-inset-top));padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation}

#site-home[hidden]{display:none}