:root {
	--magazine-width:   min(75rem, 95vw);
	--magazine-columns: 2;
	--magazine-col-gap: 2.5rem;
}

.magazine {
  /* Break out of the narrow body column */
  width: var(--magazine-width);
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  columns:     var(--magazine-columns);
  column-gap:  var(--magazine-col-gap);
  column-rule: var(--border-width) solid var(--border);
}

/* Full width elements reset the column flow */
.magazine h2,
.magazine h3,
.magazine h4,
.magazine hr,
.magazine figure {
  column-span: all;
}

/* All blocks start on the same height */
.magazine :is(h2, h3, h4, hr, figure) + *,
.magazine blockquote:not(.aside) + * {
  margin-block-start: 0;
}

/* Pull-quote: override the default left-border blockquote style */
.magazine blockquote {
  column-span: all;
  text-align: center;
  font-size: 1.15em;
  margin-inline: 2rem;
  padding: 0.5rem 0;
  border-inline-start: none;
  border-top:    var(--border-width) solid var(--accent);
  border-bottom: var(--border-width) solid var(--accent);
}

/* In-column blockquote — stays within its column rather than spanning. */
.magazine blockquote.aside {
  column-span: none;
  text-align: revert;
  font-size: revert;
  margin-inline: revert;
  padding: 0.75rem 0.8rem;
  border-inline-start: revert;
}

/* Avoid splitting a paragraph across columns mid-sentence */
.magazine p {
  break-inside: avoid-column;
  orphans: 3;
  widows: 3;
}

/* Default to single column for narrow screens */
@media (max-width: 720px) {
  .magazine {
    columns: 1;
    column-rule: none;
  }
}