/* ==========================================================================
   Inner pages: About, News, Blog, blog posts, Jobs.
   Built only from the tokens in tokens.css and the rules in system.css,
   which is still loaded after this file.
   ========================================================================== */

.page { max-width: var(--container-mid); }

/* Mono label, then the page title, then one line of subhead. */
.page-head > * + * { margin-top: var(--s-4); }
.page-head .caps { color: var(--eyebrow-mint); }
.page-lead { max-width: 52ch; }

.page-copy { margin-top: var(--s-8); max-width: 60ch; }

/* The footer is fixed underneath the sheet and revealed as the sheet scrolls
   away. A short page (News, Jobs) must still fill the screen, or the footer
   shows through below it before anyone scrolls. */
.sheet { min-height: 100vh; min-height: 100svh; }

/* ---- About ------------------------------------------------------------ */
.about-photo { margin-top: var(--s-12); margin-bottom: 0; }
.about-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}

/* ---- Blog list -------------------------------------------------------- */
.post-list { display: grid; gap: var(--s-6); margin-top: var(--s-12); }
.post-card {
  display: block; padding: var(--s-8);
  color: inherit; text-decoration: none;
  transition: box-shadow var(--dur) var(--ease);
}
.post-card > * + * { margin-top: var(--s-3); }
.post-card:hover { box-shadow: var(--shadow-lift); }
.post-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.post-card-more { display: inline-block; margin-top: var(--s-5); font-weight: var(--weight-semi); }

/* ---- Blog post -------------------------------------------------------- */
.post-back { margin-bottom: var(--s-8); }
.post-back a { color: var(--ink-3); text-decoration: none; }
.post-back a:hover { color: var(--ink); }

.prose { margin-top: var(--s-12); max-width: 68ch; }
.prose > * + * { margin-top: var(--s-5); }
.prose p, .prose li { font-size: var(--type-body); line-height: var(--leading-body); color: var(--ink-2); }
.prose h2 {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--type-display-4); line-height: var(--leading-snug);
  letter-spacing: var(--track-display); color: var(--ink);
  margin-top: var(--s-12);
}
.prose h3 {
  font-family: var(--font-sans); font-weight: var(--weight-semi);
  font-size: var(--type-subhead); line-height: var(--leading-subhead);
  color: var(--ink);
  margin-top: var(--s-8);
}
.prose h2 + *, .prose h3 + * { margin-top: var(--s-3); }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.post-next { margin-top: var(--s-16); padding-top: var(--s-10); border-top: 1px solid var(--hairline); }
.post-next .post-card { margin-top: var(--s-5); }