/* Site-specific layer on top of Facet. Everything here uses Facet's own
   tokens, so both themes and light/dark keep working. */

/* The white paper: a real A4 sheet, square-cornered, lying on the fluid
   background. Below A4 width it gives up its fixed width and fills the
   viewport. */
.paper {
  width: min(210mm, 100%);
  min-height: 297mm;
  margin-inline: auto;
  padding: clamp(1.75rem, 6vw, 20mm) clamp(1.25rem, 5vw, 18mm);
  background: var(--surface);
  border: var(--border-element) solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow-overlay);
}

/* The sheet's own masthead — title block above the first section rule. */
.paper-masthead {
  padding-bottom: var(--space-stack);
  border-bottom: var(--border-element) solid var(--border);
}

/* Section rules inside the sheet, so parts read as parts of a document. */
.paper h2 {
  margin-top: var(--space-section);
  padding-top: var(--space-stack);
  border-top: var(--border-element) solid var(--border);
}

.paper-masthead + h2 {
  margin-top: var(--space-stack);
  border-top: none;
  padding-top: 0;
}

/* Anchored sections land below the sticky header, not behind it. */
main [id] {
  scroll-margin-block-start: 6rem;
}

/* Section intros and footnotes sit at reading measure but stay flush with
   the cards beside them, rather than centring themselves over the grid. */
.section-intro {
  max-width: var(--width-narrow);
}

/* The price line on a service card. */
.price {
  font-family: var(--font-numeric);
  font-size: var(--text-display);
  font-weight: var(--weight-heading);
  line-height: var(--leading-display);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Services sit side by side and stay the same height, so both actions line
   up at the bottom whatever the copy above them does. */
.package {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
}

.package .package-action {
  margin-top: auto;
}

/* The lead founder card: portrait beside the bio, stacking on phones. */
.founder-lead {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--space-card);
  align-items: start;
}

.founder-portrait {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  background: var(--fill);
}

@media (max-width: 40rem) {
  .founder-lead {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .founder-portrait {
    max-width: 12rem;
  }
}

/* Social links under the bio: small pills that wrap. */
.founder-links {
  flex-wrap: wrap;
}

@media print {
  .paper {
    width: auto;
    min-height: 0;
    border: none;
    box-shadow: none;
    padding: 0;
  }
}