@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');
:root{color-scheme:dark;--paper:#eeece4;--ink:#171715;--accent:#f9562b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink);color:var(--paper)}
body{font-family:'Manrope','Arial',sans-serif;-webkit-font-smoothing:antialiased}
.identity{min-height:100svh;display:flex;flex-direction:column;padding:28px 4vw 20px;overflow:hidden}
.masthead{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid #eeece434}
.monogram{font-size:22px;font-weight:800;letter-spacing:-1.5px}.monogram span{color:var(--accent);padding:0 5px}.edition{font-size:12px;letter-spacing:.15em}
.composition{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:38px 0 44px;min-height:620px}
.registration{display:flex;justify-content:space-between;font-family:monospace;font-size:12px;letter-spacing:.08em;color:#b0afa7;margin-bottom:18px}
h1{position:relative;z-index:1;margin:0;font-size:clamp(84px,20.4vw,350px);font-weight:800;letter-spacing:-.075em;line-height:.89}
.name{display:block;white-space:nowrap}.period{color:var(--accent)}
.suffix{display:block;width:max-content;letter-spacing:-.035em;margin-top:.09em;font-weight:500}
.accent{position:absolute;right:1.5%;bottom:55px;width:28%;aspect-ratio:1;background:var(--accent);display:grid;place-items:center;border-radius:50%;}
.accent span{width:45%;height:45%;border:1px solid var(--ink);border-radius:50%;position:relative}
.accent span:before,.accent span:after{content:'';position:absolute;left:50%;top:50%;background:var(--ink);transform:translate(-50%,-50%)}
.accent span:before{width:145%;height:1px}.accent span:after{width:1px;height:145%}
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid #eeece434;font-size:12px;letter-spacing:.09em} .footer-mark{font-size:28px;line-height:1;color:var(--accent)}
::selection{background:var(--accent);color:var(--ink)}
.motion-control{font:inherit;font-size:12px;letter-spacing:.12em;background:none;border:0;color:var(--paper);min-height:44px;padding:8px 0 8px 16px;cursor:pointer}.motion-control span{color:var(--accent);margin-left:8px}.motion-control:focus-visible{outline:1px solid var(--accent);outline-offset:5px}
.name{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.letter{display:inline-block;animation:letter-in 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.15s + var(--i)*75ms)}
.suffix{animation:suffix-in 1.4s .5s cubic-bezier(.16,1,.3,1) both}
h1{translate:calc(var(--mx,0)*-5px) calc(var(--my,0)*-3px)}
.accent{translate:calc(var(--mx,0)*12px) calc(var(--my,0)*8px);animation:orb-arrive 1.5s .35s cubic-bezier(.16,1,.3,1) both}
.accent span{animation:orbit 24s linear infinite}
.accent span:before{animation:stretch 7s ease-in-out infinite alternate}
.footer-mark{display:inline-block;animation:orbit 32s linear infinite}
.masthead,.registration,footer{animation:detail-in 1.2s .2s ease both}
.motion-paused *,.page-hidden *{animation-play-state:paused!important}
@keyframes letter-in{from{transform:translateY(115%) rotate(5deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
@keyframes suffix-in{from{transform:translateY(35px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes orb-arrive{from{transform:scale(.65);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes detail-in{from{opacity:0}to{opacity:1}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes stretch{from{width:110%}to{width:165%}}
@media(prefers-reduced-motion:reduce){.identity *{animation:none!important;translate:none!important}.motion-control{display:none}}
@media(min-width:1600px){.identity{padding-inline:max(4vw,calc((100vw - 1600px)/2))}h1{font-size:320px}}
@media(max-width:700px){.identity{padding:22px 6vw 22px}.masthead{padding-bottom:20px}.edition{font-size:12px}.composition{min-height:540px;padding:35px 0 48px}.registration{margin-bottom:28px}h1{font-size:19.5vw;line-height:1}.suffix{font-size:1.72em;margin-top:.03em}.accent{width:32%;bottom:79px;right:0}footer{font-size:10px;letter-spacing:.06em}.footer-mark{font-size:24px}}
@media(max-height:700px) and (min-width:701px){.composition{min-height:440px}h1{font-size:min(17vw,190px)}.accent{width:23%;bottom:45px}}