:root{
  --bg:#fff;
  --fg:#05080b;
  --muted:#6f7377;
  --line:#d7d7d7;
  --link:#05080b;
  --max:1260px;
  --nav:255px;
  --gap:70px;
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.42;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.skip{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip:focus{
  left:20px;
  top:20px;
  width:auto;
  height:auto;
  z-index:99;
  background:#fff;
  padding:.5rem .75rem;
  border:1px solid var(--fg);
}

.page{
  max-width:var(--max);
  min-height:100vh;
  margin:0 auto;
  display:grid;
  grid-template-columns:var(--nav) 1fr;
  column-gap:var(--gap);
  padding:38px 44px 70px 44px;
}

.site-header{
  grid-column:1 / -1;
  position:relative;
  min-height:86px;
}
.brand{display:inline-block;text-decoration:none}
.brand img{display:block;width:197px;height:auto}
.brand-light{display:none}

.nav-column{grid-column:1;grid-row:2}
.main-nav{
  padding-top:10px;
  font-size:15px;
  line-height:1.35;
}
.main-nav ul{
  list-style:none;
  margin:0;
  padding:0;
}
.main-nav li{margin:0 0 8px 0}
.main-nav ul ul{
  margin:4px 0 14px 18px;
}
.main-nav a{
  color:var(--link);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.main-nav a:hover,
.main-nav a:focus,
.main-nav a.current{
  border-bottom-color:var(--fg);
}

.content{
  grid-column:2;
  grid-row:2;
  max-width:770px;
  padding-top:0;
}
.project-icon{
  margin:0 0 30px 0;
  width:100%;
  max-width:650px;
}
.project-icon img{
  display:block;
  width:100%;
  max-width:650px;
  height:auto;
}

.essay h1{
  font-size:34px;
  line-height:1.08;
  font-weight:700;
  margin:0 0 8px 0;
  letter-spacing:-.015em;
}
.essay h2{
  font-size:25px;
  line-height:1.2;
  font-weight:700;
  margin:0 0 28px 0;
  letter-spacing:-.01em;
}
.essay h3{
  font-size:20px;
  line-height:1.25;
  font-weight:700;
  margin:30px 0 8px 0;
}
.essay p{
  margin:0 0 17px 0;
}
.essay .kicker{
  margin:0 0 4px 0;
}
.essay .date{
  margin:0 0 30px 0;
  color:var(--muted);
}
.essay a{
  color:var(--link);
  text-decoration:none;
  border-bottom:1px solid var(--fg);
}
.essay a:hover,
.essay a:focus{
  color:var(--muted);
  border-bottom-color:var(--muted);
}
.essay ul{
  margin:0 0 22px 0;
  padding:0;
  list-style:none;
}
.essay li{
  margin:0 0 2px 0;
}
.essay li::before{content:"- "}

@media (max-width:900px){
  .page{
    display:block;
    padding:28px 24px 54px 24px;
  }
  .site-header{min-height:70px}
  .brand img{width:172px}
  .nav-column{margin:0 0 34px 0}
  .content{max-width:100%}
  .project-icon{max-width:100%;margin-bottom:24px}
  .essay h1{font-size:30px}
  .essay h2{font-size:22px}
}

@media (prefers-color-scheme: dark){
  body{background:#05080b;color:#fff}
  :root{--fg:#fff;--link:#fff;--muted:#b8b8b8;--line:#333}
  .brand-dark{display:none}
  .brand-light{display:inline-block}
  .skip:focus{background:#05080b;color:#fff;border-color:#fff}
  .project-icon{filter:invert(1)}
}