.header nav { gap: 24px; }
.nav-purchase { color: var(--red); border-bottom: 1px solid currentColor; white-space: nowrap; }
.nav-purchase span { margin-left: 12px; }
.purchase-section { --section-colour: var(--magenta); background: var(--paper); }
.purchase-layout { display: grid; grid-template-columns: .8fr 1fr; gap: 10%; align-items: center; }
.purchase-cover { margin: 0; padding: 30px; background: var(--paper-light); display: flex; justify-content: center; }
.purchase-cover img { display: block; width: min(100%, 280px); height: auto; box-shadow: 8px 12px 24px color-mix(in srgb, var(--ink) 14%, transparent); }
.purchase-copy h2 { font-size: clamp(39px, 4.3vw, 58px); }
.purchase-copy h2 em { color: var(--magenta); }
.purchase-title { font-family: var(--serif); font-size: 25px; line-height: 1.3; margin-top: 30px; }
.purchase-author { color: var(--teal); font-size: 12px; line-height: 1.8; margin-top: 7px; }
.purchase-description { max-width: 420px; color: var(--muted); font-size: 13px; line-height: 1.9; margin-top: 20px; }
.purchase-isbn { color: var(--muted); font-size: 9px; letter-spacing: 1px; line-height: 1.8; margin-top: 20px; }
.purchase-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 27px; }
.purchase-button { background: var(--red); }
.purchase-button:hover { background: var(--magenta); }
.purchase-actions .text-link { color: var(--teal); font-size: 10px; }
.purchase-status { color: var(--muted); font-size: 10px; line-height: 1.8; margin-top: 14px; }
@media (max-width: 760px) {
  .header { height: auto; min-height: 120px; flex-wrap: wrap; padding-block: 20px; gap: 20px; }
  .header nav { width: 100%; justify-content: space-between; gap: 12px; font-size: 10px; }
  .header nav > a:first-child { display: block; }
  .nav-notebook { gap: 8px; }
  .nav-purchase span { margin-left: 5px; }
  .purchase-layout { grid-template-columns: 1fr; gap: 35px; }
  .purchase-cover { max-width: 360px; padding: 25px; width: 100%; justify-self: center; }
  .purchase-cover img { width: min(100%, 220px); }
  .purchase-copy h2 { font-size: 43px; }
  .purchase-title { margin-top: 25px; }
  .purchase-description { font-size: 12px; }
  .purchase-actions { gap: 18px; }
}
@media (max-width: 390px) {
  .header nav { gap: 8px; font-size: 9px; }
  .nav-notebook span, .nav-purchase span { display: none; }
}