@font-face{font-family:Archivo;src:url('/assets/archivo-black.ttf') format('truetype');font-weight:900;font-display:swap}
:root{color-scheme:dark;--wall:#112a3a;--white:#fcfbf5;--sky:#80ccec;--sun:#ffd33e}
*{box-sizing:border-box}
body{margin:0;background:var(--wall);color:var(--white);font-family:Archivo,sans-serif}
::selection{background:var(--sky);color:var(--wall)}
main{width:min(100%,580px);margin:auto;padding:22px 0 0}
h1{margin:0 0 16px;text-align:center;font-family:Archivo,sans-serif;font-size:clamp(44px,8vw,66px);line-height:1;letter-spacing:-.04em;font-weight:900}
.wordmark{display:inline-block;color:#fff;text-decoration:none;white-space:nowrap}
a:focus-visible{outline:3px solid var(--sky);outline-offset:5px}
.meme{position:relative;width:100%;container-type:inline-size}
.meme>img{display:block;width:100%;height:auto}
.helmet{position:absolute;left:24.5%;top:36.2%;width:29%;display:flex;transform:rotate(2deg);z-index:2}
.helmet a{position:relative;display:grid;place-items:center;flex:1;aspect-ratio:1;min-height:44px;color:#142b37;text-decoration:none;border-radius:50%;transition:transform .18s ease-out,background-color .18s ease-out}
.helmet svg{display:block;width:63%;height:63%;max-width:32px;max-height:32px;fill:currentColor}
.helmet .envelope{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.helmet a:hover{transform:translateY(-4px) rotate(-5deg);background:#fff6}.helmet a:focus-visible{outline-color:#142b37;background:#fff6}
.tooltip{position:absolute;bottom:110%;left:50%;transform:translateX(-50%);font:14px Archivo,sans-serif;background:var(--white);color:var(--wall);padding:5px 8px;white-space:nowrap;visibility:hidden;border-radius:2px}
.helmet a:hover .tooltip,.helmet a:focus-visible .tooltip{visibility:visible}
.annotation{position:absolute;left:68%;top:31.5%;width:28%;font:900 clamp(12px,3.2cqw,18px)/1.2 Archivo,sans-serif;transform:rotate(7deg);pointer-events:none}
.annotation svg{position:absolute;width:110%;height:auto;left:-77%;top:95%;fill:none;stroke:var(--white);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.skip-link{position:fixed;top:-100px;left:12px;background:var(--white);color:var(--wall);padding:12px;z-index:4}.skip-link:focus{top:12px}
@media(min-width:700px) and (min-height:760px){main{width:min(580px,calc((100svh - 116px)*.7964));min-width:440px}}
@media(max-width:600px){main{padding-top:24px}h1{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.helmet a{transition:none}}