/* Shared shell for interior pages (about, contact, privacy, terms) */
.page {
  width: min(760px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 140px 0 90px;
}
.page .kicker { margin-bottom: 10px; }
.page h1 {
  font-family: var(--f-display); font-weight: 560;
  font-size: clamp(34px, 5vw, 50px); line-height: 1.06; margin-bottom: 22px;
}
.page h2 {
  font-family: var(--f-display); font-weight: 560; font-size: 24px;
  margin: 38px 0 12px;
}
.page p, .page li { color: color-mix(in srgb, var(--paper) 78%, transparent); margin-bottom: 14px; }
.page ul { padding-left: 22px; }
/* :not(.btn) — otherwise this beats .btn-solid on specificity and paints
   brass text on the brass button, making the label invisible. */
.page a:not(.btn) { color: var(--brass); }
.page .updated { font-family: var(--f-mono); font-size: 12.5px; color: color-mix(in srgb, var(--paper) 50%, transparent); margin-bottom: 34px; }
.page-cta {
  clear: both; /* float sits over this box otherwise */
  margin-top: 30px; padding: 24px; border: 1px dashed rgba(194,161,77,.4);
  border-radius: 12px;
}
.page-cta p { margin-bottom: 14px; }

/* Founder portrait — floats beside the bio on desktop, stacks on mobile */
.portrait {
  float: right; width: 232px; margin: 4px 0 18px 26px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(194,161,77,.3); box-shadow: var(--shadow);
}
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait figcaption {
  padding: 9px 12px; background: var(--pine-900);
  font-family: var(--f-label); font-size: 12.5px; line-height: 1.35;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}
@media (max-width: 620px) {
  .portrait { float: none; width: 100%; max-width: 320px; margin: 4px 0 22px; }
}