.early-sketches {
  padding: clamp(56px, 7vw, 92px) 20px;
  background: linear-gradient(145deg, #f2e4c5, #dfc69c);
  border-top: 1px solid #ba955c;
  scroll-margin-top: 72px;
}

.early-sketches-inner { max-width: 1080px; margin: 0 auto; }
.early-sketches-header { max-width: 700px; margin: 0 auto 38px; text-align: center; }
.early-sketches-header .kicker { margin: 0 0 10px; color: #7a3825; letter-spacing: .18em; }
.early-sketches-header h2 { margin: 0 0 14px; color: #54251b; font: 600 clamp(1.85rem, 3.3vw, 2.8rem)/1.15 var(--display); }
#early-sketches-title { scroll-margin-top: 90px; }
.early-sketches-header p:last-child { margin: 0; color: #5f4835; font-size: 1.1rem; line-height: 1.65; }
.early-sketches-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.early-sketch { min-width: 0; margin: 0; padding: 10px 10px 0; background: #f9efd9; border: 1px solid #b39360; box-shadow: 0 12px 30px #5d3c1b26; }
.early-sketch-wide { grid-column: 1 / -1; }
.early-sketch a { display: block; overflow: hidden; background: #e7d6b6; }
.early-sketch a:focus-visible { outline: 3px solid #7a3825; outline-offset: 3px; }
.early-sketch img { display: block; width: 100%; height: auto; }
.early-sketch figcaption { padding: 16px 12px 19px; color: #66503b; font-size: .92rem; line-height: 1.55; }
.early-sketch figcaption strong { display: block; margin-bottom: 3px; color: #6a2b20; font: 600 1rem var(--display); }
.early-sketch figcaption span { display: block; }

@media (max-width: 680px) {
  .early-sketches { padding-inline: 14px; }
  .early-sketches-grid { grid-template-columns: 1fr; gap: 20px; }
  .early-sketch-wide { grid-column: auto; }
}