:root { --paper: #fbfbfa; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { background: var(--paper); }
.page { position: relative; min-height: 100svh; overflow: hidden; background: var(--paper); }
.identity { position: absolute; left: clamp(8.2vw, 9.7vw, 10.5vw); top: clamp(23vh, 25vh, 27vh); width: clamp(235px, 20vw, 305px); }
.name-art, .profession-art { display:block; width:100%; height:auto; opacity:0; transform: translateY(.35px); }
.name-art { animation: reveal 1.95s cubic-bezier(.22,.61,.36,1) .62s forwards; }
.profession-art { animation: reveal 1.95s cubic-bezier(.22,.61,.36,1) 1.12s forwards; }
.continued-wrap { position:absolute; left:clamp(8.2vw, 9.7vw, 10.5vw); bottom:clamp(9vh, 10.5vh, 12vh); width: clamp(150px, 13.2vw, 205px); }
.continued-art { display:block; width:100%; height:auto; opacity:0; transform: translateY(.35px); animation: reveal 1.9s cubic-bezier(.22,.61,.36,1) 2.48s forwards; }
@keyframes reveal { to { opacity:1; transform:translateY(0); } }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
@media (max-width:700px) { .identity { left:11vw; top:27vh; width:clamp(205px, 61vw, 265px); } .continued-wrap { left:11vw; bottom:12vh; width:clamp(135px, 41vw, 175px); } }
@media (prefers-reduced-motion: reduce) { .name-art, .profession-art, .continued-art { animation:none; opacity:1; transform:none; } }