@media print {

  @page {
    margin: 1.5cm;
  }

  /* The dark theme is routed through these variables almost everywhere,
     so redefining them here fixes most background/text contrast issues
     site-wide without having to override individual selectors. */
  :root {
    --color-primary:          #000000;
    --color-background:       #FFFFFF;
    --color-background-blue:  #FFFFFF;
    --color-body:              #FFFFFF;
    --color-footer-primary:   #FFFFFF;
    --color-footer-secondary: #FFFFFF;
    --color-text:              #000000;
    --color-text-hover:       #444444;
    --color-text-cta:          #000000;
    --color-text-cta-hover:   #000000;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  body {
    background: #FFFFFF;
  }

  /* Fixed positioning isn't reliable in print, and none of the nav/menu
     controls are usable on paper. */
  header {
    position: static;
  }

  main {
    padding-top: 0;
  }

  .section-blue {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* The nav/CTA button are hidden above, leaving the right side of the
     header's row empty - pull the title section up by the header's full
     height (negative margin) so it moves into that empty space instead
     of stacking below it, and match the header row's own box model
     (padding/height) so the h1 lands at the same vertical center as the
     logo. */
  main > section:first-child {
    margin-top: calc(-1 * (var(--padding-header-top) + var(--padding-header-bottom) + var(--height-header)));
    padding-top: var(--padding-header-top);
    padding-bottom: var(--padding-header-bottom);
    height: var(--height-header);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    /* The negative margin above pulls this section up into the header's
       row - combined with the section { break-inside: avoid } rule
       further down, that confuses some print engines' page-fit math and
       pushes the whole section onto page 2 instead of rendering it
       overlapping page 1's top. It's just a single h1, no real risk of
       splitting, so it doesn't need break protection anyway. */
    break-inside: auto;
    page-break-inside: auto;
  }

  main > section:first-child h1 {
    margin: 0;
  }

  /* The founder hero carries a photo and name/role alongside the heading,
     not just an h1 like the other pages' first section - squeezing it into
     the header's 50px row (like the rule above does) would clip the photo,
     so it opts back out to a normal, self-contained block instead. */
  main > section.founder-layout:first-child {
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
    justify-content: center;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .founder-layout img {
    height: 100px;
  }

  .menu-toggle,
  .hamburger-button,
  .header-buttons-wrapper,
  .cta-button {
    display: none !important;
  }

  /* An interactive embed can't render on paper. */
  .map-frame {
    display: none;
  }

  .footer-list-sections section:first-child {
    display: none;
  }

  .footer-list-sections section:has(#footer-contact-heading) {
    display: none;
  }

  .footer-list-sections section:has(#footer-services-heading) {
    display: none;
  }

  /* Safari's print engine can fail to resolve footer's width:100% (from
     footer.css) as a definite containing-block width, which collapses
     .footer-main's margin:0 auto centering instead of applying it.
     Centering via the parent's flexbox alignment instead of the child's
     auto margins sidesteps that ambiguity. footer-legal has no max-width
     of its own (full-bleed background bar) so it needs align-self:stretch
     to keep spanning the page instead of shrinking to its text width. */
  footer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-main {
    height: 110px;
    margin-bottom: 10px;
    padding-bottom: 0;
  }

  /* height:30px (footer.css) reserves room beyond the text itself, and
     the copyright <p> still inherits the sitewide p { margin-top: 10px }
     from main.css since footer.css never resets it - both add to the
     gap above the copyright line on top of footer-main's own padding. */
  .footer-legal {
    align-self: stretch;
    height: auto;
    padding: 4px 2rem;
  }

  .footer-legal p {
    margin: 0;
  }

  footer,
  section {
    background: none;
    border-color: #CCCCCC;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }

  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* FAQ spoilers stay collapsed on screen, but paper has no click target -
     force every answer visible and drop the +/x indicator so the printed
     page reads like a normal Q&A list. */
  .faq-question::after {
    display: none;
  }

  .faq-answer {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  img {
    max-width: 100% !important;
  }

}