:root {
  --paper: #f3f0e8;
  --ink: #11110f;
  --red: #ff1b12;
  --muted: #6f6d67;
  --line: #bebbb2;
  --white: #fffdf8;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Futura, "Futura PT", "Century Gothic", Avenir, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
.masthead { display: flex; justify-content: space-between; align-items: flex-start; width: min(100% - 48px, 1440px); margin: 0 auto; padding: 22px 0 18px; border-bottom: 1px solid var(--ink); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { display: block; width: 72px; height: auto; mix-blend-mode: multiply; }
.brand span, .wordmark { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.descriptor { margin: 0; font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .051em; line-height: 1.35; text-align: right; text-transform: uppercase; }
.intro { display: grid; grid-template-columns: 1fr 3fr; width: min(100% - 48px, 1440px); margin: 0 auto; padding: 76px 0 88px; }
.eyebrow { margin: 0; color: var(--red); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .073em; text-transform: uppercase; }
.intro h1 { max-width: 920px; margin: -8px 0 0; font-size: clamp(2.95rem, 6.65vw, 6.84rem); font-weight: 500; letter-spacing: -.048em; line-height: .98; }
.intro-copy { grid-column: 2; max-width: 520px; margin: 32px 0 0; font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.25; }
.archive { width: min(100% - 48px, 1440px); margin: 0 auto; border-top: 1px solid var(--ink); }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--ink); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .051em; text-transform: uppercase; }
.section-heading h2 { margin: 0; font: inherit; text-transform: uppercase; }
.section-heading > span { color: var(--red); font-size: 11px; }
.empty-state { display: grid; place-items: center; min-height: 310px; text-align: center; }
.empty-state span { color: var(--red); font-size: 56px; font-weight: 600; letter-spacing: .12em; }
.empty-state p { margin: 10px 0 0; font-size: 18px; }
.post { display: grid; border-bottom: 1px solid var(--ink); }
.post--has-media { grid-template-columns: 150px minmax(260px, .8fr) minmax(0, 2.8fr); }
.post--text-only { grid-template-columns: 150px minmax(0, 1fr); }
.post--video { grid-template-columns: 150px minmax(0, 1fr); }
.post--video .post-meta { grid-column: 1; grid-row: 1 / span 3; }
.post-video-title { grid-column: 2; padding: 18px 8% 28px 42px; }
.post-video-title h3 { max-width: 980px; margin: 0; font-size: clamp(1.73rem, 3.33vw, 3.86rem); font-weight: 500; letter-spacing: -.039em; line-height: 1.06; }
.post--video .post-media { grid-column: 2; }
.post--video .post-video-copy { grid-column: 2; padding-top: 32px; }
.post-meta { padding: 18px 18px 18px 0; font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.post-meta span { display: block; margin-bottom: 10px; color: var(--red); }
.post-media { display: grid; align-content: center; margin: 0; background: #ddd9cf; overflow: hidden; }
.post-media img, .post-media video { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.post-media--video { background: #000; }
.post-media--video video { aspect-ratio: 16 / 9; height: auto; min-height: 0; max-height: none; object-fit: contain; }
.post-media--audio { align-content: center; min-height: 220px; padding: 28px; background: var(--ink); color: var(--white); }
.post-media audio { display: block; width: 100%; }
.post-media figcaption { margin-top: 14px; font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase; }
.post-copy { padding: 18px 8% 64px 42px; }
.post-copy h3 { max-width: 980px; margin: 0 0 34px; font-size: clamp(1.73rem, 3.33vw, 3.86rem); font-weight: 500; letter-spacing: -.039em; line-height: 1.06; }
.post-copy p, .post-copy div, .post-copy li, .post-copy blockquote { max-width: 980px; font-family: var(--serif); font-size: clamp(.972rem, 1.458vw, 1.256rem); font-weight: 400; letter-spacing: normal; line-height: 1.46; }
.post-copy p, .post-copy div { margin: 0 0 1em; }
.post-copy strong, .post-copy b { font-weight: 700; }
.post-copy em, .post-copy i { font-style: italic; }
.post-copy ul, .post-copy ol { max-width: 980px; margin: 0 0 1.2em; padding-left: 1.4em; }
.post-copy li { margin-bottom: .35em; }
.post-copy blockquote { margin: 1.4em 0; padding-left: 1em; border-left: 3px solid var(--red); font-style: italic; }
.post-copy a { text-decoration-thickness: 1px; text-underline-offset: .15em; }
.footer { display: grid; grid-template-columns: 1fr 1fr auto; width: min(100% - 48px, 1440px); margin: 80px auto 0; padding: 14px 0 28px; border-top: 1px solid var(--ink); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.footer a { color: var(--muted); }
@media (max-width: 700px) {
  .masthead, .intro, .archive, .footer { width: calc(100% - 28px); }
  .masthead { padding-top: 14px; }
  .brand { gap: 9px; }
  .brand img { width: 52px; }
  .descriptor { display: none; }
  .intro { grid-template-columns: 1fr; padding: 52px 0 58px; }
  .intro h1 { margin-top: 24px; font-size: clamp(3.23rem, 16.15vw, 4.75rem); }
  .intro-copy { grid-column: 1; margin-top: 24px; }
  .post { grid-template-columns: 1fr; }
  .post--video .post-meta { grid-column: 1; grid-row: auto; }
  .post-video-title, .post--video .post-media, .post--video .post-video-copy { grid-column: 1; }
  .post-video-title { padding: 24px 0; }
  .post-video-title h3 { font-size: 2rem; }
  .post-meta { display: flex; justify-content: space-between; padding-right: 0; }
  .post-meta span { margin: 0; }
  .post-media img, .post-media video { min-height: 230px; max-height: 68vh; }
  .post-media--video video { min-height: 0; max-height: none; }
  .post-media--audio { min-height: 160px; }
  .post-copy { padding: 24px 0 52px; }
  .post-copy h3 { font-size: 2rem; }
  .post-copy p, .post-copy div, .post-copy li, .post-copy blockquote { max-width: none; }
  .footer { grid-template-columns: 1fr auto; gap: 10px; }
  .footer span:nth-child(2) { display: none; }
}