* { box-sizing: border-box; }
body {
  margin: 0;
  color: #17211c;
  background: #f3efe3;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
main { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 54px 0 76px; }
.picture-layout { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 6vw, 76px); align-items: start; }
.picture-frame { margin: 0; background: #e8e1d1; border: 1px solid #cbc3ae; }
.picture-frame img { display: block; width: 100%; max-height: 74vh; object-fit: contain; }
.picture-frame figcaption { padding: 12px 14px; color: #637068; border-top: 1px solid #cbc3ae; font-size: .78rem; line-height: 1.45; }
.eyebrow { margin: 0 0 14px; color: #205f50; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0 0 24px; max-width: 650px; font: 400 clamp(2.6rem, 6vw, 5.7rem)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.intro { margin: 0 0 40px; color: #435148; font: 400 1.14rem/1.65 Georgia, serif; }
.reading { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid #d5cfbe; }
.reading section { padding: 22px 22px 22px 0; }
.reading section + section { padding-left: 22px; border-left: 1px solid #d5cfbe; }
h2 { margin: 0 0 12px; font: 600 1.22rem/1.2 Georgia, serif; }
ul { margin: 0; padding-left: 1.2rem; }
li { margin: 0 0 10px; color: #4c5851; line-height: 1.5; }
.next { display: inline-block; margin-top: 34px; color: #205f50; font-weight: 800; text-underline-offset: 4px; }
@media (max-width: 780px) {
  main { width: min(100% - 24px, 1180px); padding-top: 36px; }
  .picture-layout { grid-template-columns: 1fr; }
  .picture-frame { max-width: 620px; }
}
@media (max-width: 520px) {
  .reading { grid-template-columns: 1fr; }
  .reading section { padding: 20px 0; }
  .reading section + section { padding-left: 0; border-left: 0; border-top: 1px solid #d5cfbe; }
}