/* Portada móvil: título y retrato comparten escena. Solo se carga hasta 640 px. */
.hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto;align-items:start;gap:0;min-height:0;padding:20px 0 48px;overflow:clip}
.hero-copy{display:contents}
.hero-copy>.eyebrow{grid-column:1/-1;grid-row:1;position:relative;z-index:2;margin:0 0 12px;font-size:8px;letter-spacing:.15em}
.hero h1{grid-column:1;grid-row:2;align-self:start;position:relative;z-index:2;font-size:clamp(23px,7.2vw,45px);line-height:.98;letter-spacing:-.065em;margin:0;padding:18px 0 0;white-space:nowrap}
.hero .hero-name{font-size:clamp(8px,2.4vw,11px);letter-spacing:.2em;line-height:1.5;margin-bottom:14px}
.hero .outline{-webkit-text-stroke:.7px #d6d7dc}
.hero-art{grid-column:1/-1;grid-row:2;position:relative;align-self:end;width:100%;height:410px;margin:0;overflow:visible;z-index:1}
.hero-art:before{inset:-8% -25% 0 -55%;background:radial-gradient(ellipse at 62% 45%,#6D0AC975,transparent 67%)}
.hero-art .portrait{width:100%;height:100%;max-width:none;right:-8%;bottom:0;object-fit:contain;object-position:right bottom}
.hero-art .orbit{left:-30%;top:16%;width:140%;height:66%;border-color:#17CFD345}
.hero-art .orbit-two{left:-21%;width:128%;border-color:#F58DDF35}
.hero-art .art-label,.hero-art .art-caption{display:none}
.hero-copy>.intro{grid-column:1/-1;grid-row:3;position:relative;z-index:2;max-width:100%;font-size:13px;line-height:1.7;margin:16px 0 0}
.hero .actions{grid-column:1/-1;grid-row:4;position:relative;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 0}
.hero .actions .button{min-height:50px;font-size:12px;padding:11px 15px}
.hero .sylph-welcome{grid-column:1/-1;grid-row:5;position:relative;z-index:2;margin:17px 0 0;font-size:10px;max-width:100%}
.hero .sylph-welcome img{width:30px;height:35px}
.hero-bottom{bottom:12px;font-size:6px;letter-spacing:.14em;gap:8px}
@media(max-width:360px){.hero .actions{gap:10px}.hero .actions .button{padding:11px 12px;gap:9px;font-size:11px}.hero .actions .discord-button img{width:25px;height:25px}.hero-copy>.intro{font-size:12px}.hero .sylph-welcome{font-size:9px}}