:root{
  --ground:#141311;
  --bone:#F2EDE3;
  --amber:#FFAB2E;
  --instrument:#7FA8C9;
  --meta:#8A8378;
  --rule:#3A362E;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--ground);
  color:var(--bone);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

.wrap{
  max-width:660px;
  margin:0 auto;
  padding:80px 24px 64px;
}

.mark{
  font-family:var(--display);
  font-weight:800;
  font-size:15px;
  letter-spacing:.28em;
  color:var(--amber);
  margin:0 0 28px;
}

h1{
  font-size:44px;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.05;
  margin:0 0 20px;
  text-wrap:balance;
}

.lede{
  font-size:18px;
  color:#C4BDB1;
  margin:0;
  max-width:56ch;
}

section{
  margin-top:52px;
  padding-top:28px;
  border-top:1px solid var(--rule);
}

h2{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--meta);
  margin:0 0 18px;
}

p{font-size:16.5px;color:#C4BDB1;margin:0 0 16px;max-width:60ch;}
p:last-child{margin-bottom:0;}

h3{
  font-size:17px;
  font-weight:600;
  margin:28px 0 10px;
  letter-spacing:-0.01em;
  color:var(--bone);
}

ul{margin:0 0 16px;padding-left:22px;}
li{font-size:16.5px;color:#C4BDB1;margin-bottom:9px;max-width:58ch;}

.links{list-style:none;padding:0;display:grid;gap:0;}
.links li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--rule);
  margin:0;
}
.links li:last-child{border-bottom:none;}
.links span{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--meta);
}

a{color:var(--amber);text-decoration:none;border-bottom:1px solid transparent;}
a:hover{border-bottom-color:var(--amber);}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

footer{
  margin-top:64px;
  padding-top:24px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--meta);
  letter-spacing:.03em;
}
footer a{color:var(--instrument);}
footer a:hover{border-bottom-color:var(--instrument);}

.updated{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--meta);
  letter-spacing:.04em;
  margin-bottom:32px;
}

.back{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.06em;
  display:inline-block;
  margin-bottom:36px;
}

@media (max-width:560px){
  .wrap{padding:52px 20px 48px;}
  h1{font-size:33px;}
}