@font-face {
  font-family:Local;
  src:local("Helvetica Neue");
}
@font-face {
  font-family:"Space Grotesk";
  src:url("fonts/SpaceGrotesk-Variable.ttf") format("truetype");
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
}
* {
  box-sizing:border-box;
}
:root {
  --bg:#e8e7e2;
  --ink:#22231f;
  --line:#b5b5ad;
  --soft:#66685e;
  --gutter:clamp(20px,4vw,64px);
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Local,Arial,sans-serif;
  transition:background .3s,color .3s;
}
:root.dark {
  --bg:#22231f;
  --ink:#e8e7e2;
  --line:#5d5f54;
  --soft:#bbbdb0;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
button:focus-visible,a:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:6px;
}
.micro {
  font-family:"Courier New",monospace;
  font-size:10px;
  line-height:1.5;
  letter-spacing:.08em;
}
.site-header {
  width:100%;
  max-width:1600px;
  margin-inline:auto;
  height:88px;
  min-height:88px;
  padding:16px var(--gutter);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--line);
}
.wordmark {
  position:relative;
  display:block;
  justify-self:start;
  width:55px;
  height:43px;
  font-family:"Space Grotesk",Arial,sans-serif;
  font-synthesis:none;
  font-weight:700;
  font-size:43px;
  letter-spacing:-5px;
  line-height:43px;
}
.wordmark-letter {
  display:block;
}
.wordmark-star {
  position:absolute;
  top:5px;
  right:0;
  display:block;
  width:20px;
  height:20px;
}
@media(max-width:520px) {
  .site-header {
    height:77px;
    min-height:77px;
    gap:8px;
  }
  .wordmark {
    width:46px;
    height:34px;
    font-size:34px;
    line-height:34px;
  }
  .wordmark-star {
    width:17px;
    height:17px;
    top:3px;
  }
}