/* One clear opening screen, with the complete portfolio artwork visible. */
.ref-home>.ref-hero{width:100%;max-width:none;min-height:calc(100svh - 76px);height:calc(100svh - 76px);padding:18px 24px 26px;gap:0;display:flex;align-items:stretch;justify-content:center}
.ref-hero>.ref-title-frame{width:100%;max-width:none;height:100%;min-height:0;display:flex;flex-direction:column;margin:0;box-sizing:border-box}
.ref-hero>.ref-title-frame>.ref-bar{flex:none;height:30px}
.ref-hero .ref-title-dots{inset:31px 0 0}
.ref-hero h1{flex:1;min-height:0;padding:24px 32px;margin:0;display:flex;align-items:center;justify-content:center}
.ref-hero .portfolio-generated{display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-width:none;min-height:0}
.ref-hero .portfolio-generated .hero-portfolio-art{width:100%;height:100%;max-height:100%;object-fit:contain}
.ref-hero>.hero-sparkles{width:clamp(48px,6vw,90px);right:3%;top:24%;pointer-events:none}
@media(max-width:700px){.ref-home>.ref-hero{height:calc(100svh - 68px);min-height:calc(100svh - 68px);padding:12px 16px 20px}.ref-hero h1{padding:22px 12px}.ref-hero>.hero-sparkles{right:20px;top:29%;width:42px}}

/* Keep the artwork prominent without turning the hero into a full-screen panel. */
.ref-home>.ref-hero{height:auto;min-height:0;padding:clamp(28px,5vw,64px) 24px clamp(36px,6vw,72px);align-items:center}
.ref-hero>.ref-title-frame{width:min(100%, 960px);height:auto}
.ref-hero h1{padding:clamp(12px,2.5vw,30px)}
.ref-hero .portfolio-generated{height:auto;max-width:850px}
.ref-hero .portfolio-generated .hero-portfolio-art{height:auto}
.ref-hero>.hero-sparkles{right:max(24px,calc((100% - 960px)/2 - 16px))}
@media(max-width:700px){.ref-home>.ref-hero{padding:24px 16px 36px}.ref-hero>.hero-sparkles{right:18px;width:36px}}