Readable article opening

<article class="article-opening">
  <p class="article-opening__section">Notes on making</p>
  <h1>The useful calm of a page you can understand.</h1>
  <p class="article-opening__summary">When structure, style, and content stay visible, changing a page feels less like configuration and more like making.</p>
  <p class="article-opening__byline">By Mira Chen · <time datetime="2026-08-27">August 27, 2026</time></p>
</article>

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: clamp(1.5rem, 8vw, 6rem);
  background: #f7efe6;
  color: #2b151d;
  font-family: Georgia, "Times New Roman", serif;
}

.article-opening {
  width: min(100%, 48rem);
  margin-inline: auto;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  border-left: 0.6rem solid #d76572;
}

.article-opening__section {
  margin: 0 0 1rem;
  color: #8e2f50;
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-opening h1 {
  max-width: 15ch;
  margin: 0 0 1.5rem;
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.article-opening__summary {
  max-width: 38rem;
  margin: 0 0 2rem;
  color: #4a2c35;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  line-height: 1.55;
}

.article-opening__byline {
  margin: 0;
  color: #7a5560;
  font-family: system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 750;
}