/* Public pages wear the site theme (theme.css), like the homepage. Their page
   styles read the older token names, so those point at the theme here. */
.es-theme.public-page {
  --canvas: var(--paper); --surface: var(--card); --subtle: var(--paper-2);
  --rule: #cddad8; --soft: var(--teal-soft); --signal: var(--teal);
  --display: var(--serif); --body: var(--sans);
  --column-gap: clamp(32px, 5vw, 72px); --section-space: 88px;
  font-size: 16px; line-height: 1.65;
}
.public-page :is(h1, h2, h3, figure, blockquote, dl, dd) { margin: 0; }
.public-page img { max-width: 100%; display: block; height: auto; }
.public-page section[id] { scroll-margin-top: 100px; }
.public-page .page-width, .public-page .es-width { width: min(var(--width), calc(100% - 48px)); margin-inline: auto; }
.public-page > main { overflow: visible; }
/* The floating header rides over each page's opening, as on the homepage. */
.public-page .h-header { margin-bottom: -68px; }
.public-page .small-label { display: block; font: 600 14px/1.5 var(--sans); color: var(--teal); }
.public-page .quiet-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--teal); }
.public-page .quiet-link:hover { color: var(--ink); }
.public-page h2 { font-family: var(--serif); font-size: clamp(32px, 3.4vw, 46px); font-weight: 500; line-height: 1.12; letter-spacing: -.02em; }
/* Buttons in page content take the theme's button. */
.public-page :is(.home-button, .es-button) { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: 600 16px/1 var(--sans); letter-spacing: -.01em; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.public-page :is(.home-button, .es-button):hover { background: #193532; }
.public-page :is(.home-button, .es-button):active { transform: scale(.985); }
.public-page .es-button span { font-size: 18px; line-height: 1; }
.public-page .es-text-link { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--teal); }
.public-page .es-text-link:hover { color: var(--ink); }
.h-footer [aria-current='page'] { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) {
  .public-page { --section-space: 60px; }
  .public-page .page-width, .public-page .es-width { width: calc(100% - 32px); }
  .public-page .h-header { margin-bottom: -60px; }
}
@media print { .public-page .h-header, .public-page .h-footer, .public-page .skip-link { display: none; } }