*, *::before, *::after{
box-sizing:border-box;
}

html{
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}

body{
margin:0;
font-family:var(--sans);
font-size: 17px;
line-height: 1.7;
color:var(--body);
background: var(--cream);
}

img{
max-width:100%;
display: block;
height: auto;
}

h1, h2,h3, h4{
color: var(--ink);
font-weight: 700;
letter-spacing: -0.02em;
line-height:1.15;
margin: 0 0 var(--s-2);
}

h1{
font-size:clamp(2.4rem, 5.2vw, 4rem);
}

h2{
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

h3{
font-size: 1.25rem;
letter-spacing:-0.01em;
}

p{
margin: 0 0 var(--s-2);
}

a{
color: var(--teal);
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

ul{
margin: 0;
padding:0;
list-style: none;
}

:focus-visible{
outline: 3px solid var(--teal-bright);
outline-offset: 3px;
border-radius: 4px;
}

.skip-link{
position: absolute;
top: -60px;
left: var(--s-2);
z-index: 999;
background: var(--ink);
color: var(--white);
padding: 12px 20px;
border-radius: 0 0 8px 8px;
transition:top 0.2s var(--ease);
}

.skip-link:focus{
top: 0;
}

.ascii{
font-family:var(--mono);
white-space: pre;
line-height: 1.1;
letter-spacing: 0.06em;
color: var(--mustard);
font-size: 0.72rem;
margin: 0;
}

.eyebrow{
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--coral);
margin: 0 0 var(--s-2);
font-weight: 600;
}

.lede{
font-size: 1.12rem;
max-width: 62ch;
}

.visually-hidden{
position: absolute;
width: 1px;
height:1px;
overflow: hidden;
clip:rect(0 0 00);
white-space: nowrap;
}