@font-face{
font-family:"Neue Haas Unica Pro";
src:url("fonts/NeueHaasUnicaPro-Regular.woff2") format("woff2");
font-weight:400;
font-style:normal;
font-display:swap;
}

:root{
--page-margin:10px;
--measure:440px;
--font-size:12px;
--line-height:15px;
--letter-spacing:0;
}

*{box-sizing:border-box;}

html,
body{
margin:0;
height:100%;
}

body{
background:#fff;
color:#000;
font-family:"Neue Haas Unica Pro",Arial,sans-serif;
font-size:var(--font-size);
font-weight:400;
line-height:var(--line-height);
letter-spacing:var(--letter-spacing);
font-kerning:normal;
font-feature-settings:"kern","liga","clig","calt";
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

.page{
position:relative;
min-height:100svh;
padding:var(--page-margin);
}

.introduction{
width:min(
var(--measure),
calc(100vw - (var(--page-margin) * 2))
);
}

p{margin:0;}

p + p{margin-top:15px;}

.name{white-space:nowrap;}

.contact{
position:absolute;
left:var(--page-margin);
bottom:var(--page-margin);
color:inherit;
text-decoration:none;
}

.contact:hover,
.contact:focus-visible{
text-decoration:underline;
text-underline-offset:.12em;
}

@media (max-height:500px), (max-width:600px){
.page{
display:flex;
flex-direction:column;
gap:40px;
}
.contact{
position:static;
margin-top:auto;
}
}