.journal {
  display: grid;
  grid-template-columns: minmax(0, 1.415fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "feature heading" "feature notes";
  align-items: start;
  column-gap: clamp(20px, 1.65vw, 34px);
  row-gap: clamp(42px, 4.85vw, 92px);
  padding: clamp(68px, 7vw, 126px) var(--grid-rail) 0;
}

.journal-heading { grid-area: heading; }
.journal-heading h2 {
  font-size: clamp(32px, 2.38vw, 46px);
  font-weight: 600;
  line-height: 1.03;
}
.journal-heading .work-all { margin-top: clamp(16px, 1.35vw, 25px); }

.journal-feature { grid-area: feature; }
.journal-feature > a { display: block; }
.journal img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface);
}
.journal-feature img { aspect-ratio: 1.45; }
.journal-feature .journal-copy { margin-top: clamp(14px, 1.2vw, 22px); }

.journal-copy .mono {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
}
.journal-copy h3 {
  max-width: 21ch;
  font-size: clamp(20px, 1.62vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}
.journal-feature h3 {
  font-size: clamp(27px, 1.96vw, 38px);
  line-height: 1.03;
}
.journal-copy p {
  max-width: 46ch;
  margin-top: 10px;
  line-height: 1.45;
}
.journal article a:is(:hover, :focus-visible) h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .13em;
}

.journal-notes {
  display: grid;
  grid-area: notes;
  gap: 18px;
}
.journal-notes article + article {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.journal-notes a {
  display: grid;
  grid-template-columns: minmax(0, 44.5fr) minmax(0, 53.5fr);
  align-items: start;
  gap: clamp(12px, 1vw, 20px);
}
.journal-notes img { aspect-ratio: 4 / 3; }

@media (max-width: 880px) {
  .journal {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "heading" "feature" "notes";
    gap: 30px;
  }
}

@media (max-width: 500px) {
  .journal-notes a { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
  .journal-copy p { font-size: 14px; }
  .journal-copy .mono { margin-bottom: 7px; }
}