/* W5 V56 — COMPACT VERTICAL RHYTHM
   Global spacing pass requested by Mar.
   Keep sections visually distinct, but stop giving every section a ballroom. */

:root {
  --w5-section-gap: clamp(38px, 4.2vw, 58px);
  --w5-section-gap-small: clamp(26px, 3vw, 40px);
}

/* The faded divider should sit close to the section it closes. */
.ruled-section::after {
  margin-top: var(--w5-section-gap-small) !important;
}

/* Main page intros: same family, tighter vertical footprint. */
.about-intro,
.projects-intro,
.webseries-intro,
.blog-intro,
.news-intro,
.faq-intro,
.contact-intro,
.content-intro,
.library-intro {
  padding-top: clamp(38px, 4.2vw, 58px) !important;
}

/* Major page sections. These used to range as high as 90–155px. */
.about-simple,
.about-w5,
.about-now,
.portal-section,
.future-projects,
.more-projects,
.project-desk,
.current-series,
.bonus-fiction,
.reading-room,
.blog-desk,
.newsroom,
.news-desk,
.question-index,
.faq-chapter,
.faq-desk,
.routing,
.elsewhere,
.before-writing,
.contact-desk,
.content-reference,
.work-notes,
.content-desk,
.related-notes,
.post-destinations {
  padding-top: var(--w5-section-gap) !important;
}

/* Large inter-section margins that created the most visible empty bands. */
.section-heading,
.future-heading,
.more-heading,
.project-desk__heading,
.reading-room__heading,
.blog-desk__heading,
.news-desk__heading,
.faq-desk__heading,
.contact-desk__heading,
.content-desk__heading {
  margin-bottom: var(--w5-section-gap-small) !important;
}

.about-simple__intro,
.contact-intro__rule,
.faq-intro__rule,
.news-intro__rule,
.blog-intro__rule,
.content-rule {
  margin-top: var(--w5-section-gap-small) !important;
  margin-bottom: var(--w5-section-gap-small) !important;
}

/* Several utility blocks used giant bottom margins as pseudo-section gaps. */
.routing,
.elsewhere,
.before-writing,
.question-index,
.newsroom {
  margin-bottom: var(--w5-section-gap) !important;
}

/* Pull the footer closer to the page body too. */
main {
  padding-bottom: 38px !important;
}

.site-footer {
  margin-top: 38px !important;
  padding-top: 48px;
}

/* About specifically: the screenshot target is roughly the same amount
   of air above and below its faded rule. */
.about-intro.ruled-section::after {
  margin-top: 30px !important;
}

.about-simple {
  padding-top: 42px !important;
}

@media (max-width: 720px) {
  :root {
    --w5-section-gap: 38px;
    --w5-section-gap-small: 26px;
  }

  .about-intro,
  .projects-intro,
  .webseries-intro,
  .blog-intro,
  .news-intro,
  .faq-intro,
  .contact-intro,
  .content-intro,
  .library-intro {
    padding-top: 34px !important;
  }

  main {
    padding-bottom: 28px !important;
  }

  .site-footer {
    margin-top: 28px !important;
  }
}