:root {
  --bg: #050505;
  --fg: #f2f2ed;
  --muted: #9b9b93;
  --line: #31312e;
  --max: 1180px;
  --mono: "Helvetica Neue", Arial, sans-serif;
  --serif: "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .25em; }
.shell { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

.site-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}
.wordmark {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .18em;
}
nav { display: flex; gap: 18px; }

.latest {
  min-height: 62vh;
  padding: 72px 0;
  border-bottom: 1px solid var(--line);
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.section-head h1 {
  margin: 0;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.section-head a { color: var(--muted); font-size: .78rem; }

.essay-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.essay-list li { border-bottom: 1px solid var(--line); }
.essay-list li > a {
  display: grid;
  grid-template-columns: 150px 1fr 32px;
  gap: 18px;
  align-items: baseline;
  padding: 22px 0;
}
.essay-date { color: var(--muted); font-size: .8rem; }
.essay-title {
  font-family: var(--mono);
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
}
.essay-arrow { text-align: right; }

.eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}
.page-header {
  padding: 96px 0 52px;
  border-bottom: 1px solid var(--line);
}
.page-header h1 {
  margin: 12px 0;
  font-family: var(--mono);
  font-size: clamp(3.2rem, 8vw, 7rem);
  font-weight: 400;
  line-height: .95;
}
.essay-list--full { margin-bottom: 80px; }

.link-list {
  list-style: none;
  padding: 0;
  margin: 0 0 80px;
  border-top: 1px solid var(--line);
}
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
}
.link-list a span { color: var(--muted); }
.link-featured a { align-items: flex-start; }
.link-featured .link-copy {
  display: grid;
  gap: 8px;
  color: var(--fg);
}
.link-featured strong { font-weight: 400; }
.link-featured small {
  max-width: 720px;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.55;
}
.link-featured .link-arrow { flex: 0 0 auto; }

.essay {
  max-width: 900px;
  margin: 0 auto;
  padding: 100px 0 110px;
}
.essay-header {
  padding-bottom: 55px;
  border-bottom: 1px solid var(--line);
}
.essay-header h1 {
  margin: 14px 0 20px;
  font-family: var(--mono);
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}
.lede {
  max-width: 740px;
  color: #c6c6bf;
  font-family: var(--mono);
  font-size: .95rem;
}
.essay-body {
  max-width: 720px;
  margin: 64px auto 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.75;
}
.essay-body h2 {
  margin-top: 2.5em;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.35em;
  line-height: 1.2;
}
.essay-body blockquote {
  margin: 2em 0;
  padding-left: 24px;
  border-left: 1px solid var(--fg);
  font-size: 1.2em;
}
.essay-body a { text-decoration: underline; text-underline-offset: .2em; }

.manifesto {
  max-width: 820px;
  margin: 0 auto;
  padding: 100px 0 120px;
}
.manifesto p {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.45;
}

.site-footer {
  min-height: 110px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
  color: var(--muted);
  font-size: .7rem;
  text-transform: uppercase;
}
.site-footer span:last-child { text-align: right; }

@media (max-width: 760px) {
  .shell { width: min(calc(100% - 28px), var(--max)); }
  .site-header { align-items: flex-start; padding: 22px 0; gap: 20px; }
  nav { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .essay-list li > a { grid-template-columns: 1fr 26px; gap: 10px; }
  .essay-date { grid-column: 1 / -1; }
  .site-footer { grid-template-columns: 1fr; padding: 28px 0; }
  .site-footer span:last-child { text-align: left; }
  .essay { padding-top: 72px; }
}