.opening{display:none}
.opening-active .opening{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#ead1d2;color:#4e292b;clip-path:inset(0);touch-action:none}
html.opening-active,html.opening-active body{overflow:hidden}
.opening-word{position:absolute;top:50%;translate:0 -50%;font:300 clamp(.65rem,1.65vw,1.35rem)/1 "Avenir Next Condensed","Arial Narrow",sans-serif;letter-spacing:.28em}
.opening-word:first-child{left:6vw}
.opening-word:last-child{right:6vw}
.opening-box{display:grid;place-content:center;justify-items:center;gap:.8rem;width:clamp(6rem,18vw,13rem);aspect-ratio:1;border:1px solid #a9717a80}
.opening-box svg{height:clamp(3.4rem,10vw,7.5rem);width:auto;overflow:visible}
.opening-box output{font:300 1rem "Avenir Next Condensed","Arial Narrow",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.12em}
@media(prefers-reduced-motion:reduce){.opening-active .opening{display:none}}