:root {
  --paper: #f1eee7;
  --ink: #171716;
  --red: #bd2d24;
  --line: rgba(23, 23, 22, .27);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Libre Baskerville", Georgia, serif;
}

main { padding: 20px 3.2vw 0; }
.masthead, footer, .eyebrow, .intro, .cover-caption, .issue-label, .issue p, .instagram {
  font-family: "DM Mono", "Courier New", monospace;
  font-size: 10px;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 13px 0 12px;
}
.wordmark { display: block; line-height: 0; }
.wordmark img {
  display: block;
  width: 126px;
  height: auto;
  mix-blend-mode: multiply;
}
.instagram { color: inherit; text-decoration: none; }
.instagram:hover { color: var(--red); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(260px, .62fr);
  gap: 7vw;
  min-height: calc(100vh - 98px);
  padding: clamp(48px, 10vh, 118px) 7.1vw 60px;
  border-bottom: 1px solid var(--ink);
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow { margin: 0 0 clamp(42px, 10vh, 122px); }
h1, h2 { margin: 0; font-weight: 400; letter-spacing: -.065em; line-height: .91; }
h1 { max-width: 760px; font-size: clamp(54px, 8.5vw, 142px); }
.intro { max-width: 410px; margin: auto 0 0; line-height: 1.7; text-transform: none; }

.cover-wrap { align-self: center; width: min(100%, 352px); }
.cover-placeholder {
  aspect-ratio: .69;
  position: relative;
  overflow: hidden;
  padding: 21px 19px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f4efe5;
  background: var(--red);
  font-family: "DM Mono", monospace;
}
.cover-placeholder::before, .cover-placeholder::after { content: ""; position: absolute; pointer-events: none; }
.cover-placeholder::before { width: 86%; aspect-ratio: 1; border: 1px solid rgba(244,239,229,.75); border-radius: 50%; top: 23%; left: 7%; }
.cover-placeholder::after { width: 1px; height: 100%; background: rgba(244,239,229,.45); left: 50%; top: 0; transform: rotate(32deg); }
.cover-kicker { z-index: 1; font-size: 14px; font-weight: 500; letter-spacing: -.05em; }
.cover-number { z-index: 1; align-self: center; font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(88px, 10vw, 138px); letter-spacing: -.12em; line-height: 1; }
.cover-note { z-index: 1; align-self: flex-end; font-size: 10px; line-height: 1.25; text-align: right; text-transform: uppercase; }
.cover-caption { margin: 11px 0 0; color: rgba(23,23,22,.65); letter-spacing: .02em; text-transform: none; }
.issue-cover { width: 100%; display: block; }

.issue { display: grid; grid-template-columns: 1.38fr .62fr; gap: 7vw; padding: clamp(65px, 11vw, 160px) 7.1vw; }
.issue-label { margin: 7px 0 0; }
h2 { font-size: clamp(48px, 7vw, 108px); }
h2 em { color: var(--red); }
.issue p { margin: 28px 0 0; max-width: 280px; line-height: 1.65; text-transform: none; }
footer { display: flex; justify-content: space-between; padding: 15px 3.2vw 18px; color: rgba(23,23,22,.72); }

@media (max-width: 700px) {
  main { padding: 14px 16px 0; }
  .masthead { padding: 9px 0; }
  .wordmark img { width: 112px; }
  .hero { grid-template-columns: 1fr; gap: 55px; min-height: auto; padding: 54px 8px 55px; }
  .eyebrow { margin-bottom: 45px; }
  h1 { font-size: clamp(51px, 16vw, 88px); }
  .intro { margin-top: 52px; font-size: 10px; }
  .cover-wrap { width: min(81vw, 340px); justify-self: center; }
  .issue { grid-template-columns: 1fr; gap: 35px; padding: 65px 8px 78px; }
  h2 { font-size: clamp(50px, 16vw, 78px); }
  footer { padding: 15px 16px 18px; }
}