.catalog-grid .guide-card:nth-child(3n + 1) { background: #f5bd4c; }
.catalog-grid .guide-card:nth-child(3n + 2) { background: var(--paper-2); }
.catalog-grid .guide-card:nth-child(3n) { background: #ddc49f; }

/* Handwritten subheadings inside guide and practicum sections. */
.seo-page .numbered-section > h3:not(.prompt-title),
.seo-page .seo-body > h3:not(.prompt-title) {
  margin: 28px 0 12px;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Keep decorative yellow callouts and their shadows clear of the next heading. */
.seo-page .seo-body blockquote,
.seo-page .seo-body .main-principle {
  position: relative;
  z-index: 1;
}

.seo-page .seo-body blockquote + h2,
.seo-page .seo-body blockquote + h3,
.seo-page .seo-body .main-principle + h2,
.seo-page .seo-body .main-principle + h3,
.seo-page .seo-body .main-principle + .numbered-section {
  margin-top: 44px;
}

.seo-page .seo-body > .numbered-section {
  clear: both;
}

/* SEO CTA can sit outside .seo-body; reserve space for its rotation and shadow. */
.seo-page > .seo-cta {
  position: relative;
  z-index: 1;
  margin-bottom: 72px;
}

.seo-page > .seo-cta + section {
  clear: both;
  margin-top: 0;
}

@media (max-width: 480px) {
  .seo-page .seo-body blockquote + h2,
  .seo-page .seo-body blockquote + h3,
  .seo-page .seo-body .main-principle + h2,
  .seo-page .seo-body .main-principle + h3,
  .seo-page .seo-body .main-principle + .numbered-section {
    margin-top: 36px;
  }

  .seo-page > .seo-cta {
    margin-bottom: 52px;
  }
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  border: 3px solid var(--ink);
  background: var(--ochre);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  padding: 11px 15px;
  font: 900 14px/1 "Segoe Print", "Comic Sans MS", cursive;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) rotate(-1deg);
  transition: opacity .2s, visibility .2s, transform .2s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(-1deg);
}

.back-to-top:hover { background: var(--paper-2); transform: translateY(-2px) rotate(.5deg); }
.back-to-top:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }

@media (max-width: 480px) {
  .back-to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; padding: 0; font-size: 0; }
  .back-to-top .back-to-top-arrow { font-size: 24px; }
}