@font-face{font-family:"Antic";src:url("Antic-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap}
:root{
  --bg:#050607;--ink:#ECE8E1;--ink-dim:rgba(236,232,225,.62);--ink-faint:rgba(236,232,225,.34);
  --line:rgba(236,232,225,.18);
  --sans:"Antic","Optima","Gill Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(20px,4.2vw,64px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

.top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(20px,4vh,40px) var(--gut) 0;
}
.top .mark img{display:block;width:clamp(86px,11vw,118px);height:auto}
.top .home{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;transition:color .4s;padding:10px 0;
}
.top .home:hover{color:var(--ink)}

main{
  max-width:720px;margin:0 auto;
  padding:clamp(48px,11vh,110px) var(--gut) clamp(60px,12vh,120px);
}
h1{
  font-size:clamp(32px,5.2vw,56px);line-height:1.08;letter-spacing:-.018em;
  margin:0 0 .35em;font-weight:400;text-wrap:balance;
}
.dated{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 clamp(40px,7vh,72px);
}
h2{
  font-size:clamp(19px,2.3vw,25px);line-height:1.25;letter-spacing:-.008em;
  font-weight:400;margin:clamp(44px,7vh,76px) 0 .7em;text-wrap:balance;
}
h3{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:400;margin:2.2em 0 .8em;
}
p{margin:0 0 1.15em;color:var(--ink-dim)}
ul{margin:0 0 1.15em;padding-left:1.1em;color:var(--ink-dim)}
li{margin:.35em 0}
main a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  transition:border-color .4s}
main a:hover{border-color:var(--ink)}
strong{font-weight:400;color:var(--ink)}

.todo{color:#e0a76a;border-bottom:1px dotted #e0a76a}

.foot{
  border-top:1px solid var(--line);
  padding:clamp(28px,5vh,46px) var(--gut) clamp(34px,6vh,54px);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;
}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.foot a{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;transition:color .4s;
}
.foot a:hover{color:var(--ink)}
.foot a.mail{letter-spacing:.1em;text-transform:none}
.foot a[aria-current]{color:var(--ink)}
@media (max-width:600px){
  .foot{flex-direction:column;align-items:flex-start;gap:9px}
  .foot a{font-size:9.5px;letter-spacing:.2em}
}