:root {
  --paper: #e0e0db;
  --ink: #111111;
  --navy: #253551;
  --rule: #bdbdb5;
  --muted: #55554e;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Syne Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 17px;
  line-height: 1.7;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 8px;
  top: 8px;
  background: #fff;
  padding: 8px 12px;
  z-index: 10;
}

a { color: var(--navy); }
a:hover { color: #000; }

.mono { font-family: "Syne Mono", monospace; }

/* top bar ---------------------------------------------------------------- */

.topbar {
  background: #000;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 24px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 18px; }

/* masthead --------------------------------------------------------------- */

.masthead {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 28px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: inline-block;
  text-decoration: none;
  line-height: 0;          /* no descender gap under the image */
}

.wordmark img {
  display: block;
  /* Sized by width: the mark is a 4:1 wordmark, so width is what governs
     how much of the measure it spans. 330px is a little under half the
     820px masthead, which keeps it a mark rather than a banner. */
  width: clamp(230px, 58vw, 330px);
  height: auto;
}

/* index cards ------------------------------------------------------------ */

.cards {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.card {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.card:only-child, .card:last-child { border-bottom: none; }

.thumb img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
}

.card h2 {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 8px;
}
.card h2 a { text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }

.byline {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dek { margin: 0 0 12px; font-size: 15px; }

.more a {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 2px solid var(--navy);
}

/* post ------------------------------------------------------------------- */

.post {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.post .hero {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 32px;
}

.post h1 {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 14px;
}

.post h2, .post h3, .post h4 {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.2;
  margin: 40px 0 12px;
}
.post h2 { font-size: 1.4rem; }
.post h3 { font-size: 1.2rem; }
.post h4 { font-size: 1.05rem; }

.post p { margin: 0 0 20px; }

.post blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--navy);
  color: #2a2a25;
}

.post ul, .post ol { margin: 0 0 20px; padding-left: 22px; }
.post li { margin-bottom: 8px; }

.post img { max-width: 100%; height: auto; display: block; }

.post figure {
  margin: 32px 0;
}
.post figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* Embedded video. The first post to carry any, so this is the whole of what
   the site knows about them: hold the frame at 16:9 and let it be as wide as
   the measure, rather than letting an iframe's default 300x150 decide. */
.post .video {
  margin: 32px 0;
  aspect-ratio: 16 / 9;
  background: #000;
}
.post .video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.post hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}

.notes {
  font-size: 14px;
  color: var(--muted);
}
.notes p { margin: 0 0 10px; }

.back {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}

/* footer ----------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--rule);
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
footer a { color: var(--navy); }

@media (max-width: 640px) {
  .card { grid-template-columns: 1fr; gap: 16px; }
  .masthead { padding-top: 36px; }
}