/* Keep the webfont layout intact and tame wider Georgia metrics offline. */
@font-face {
  font-family: "Samoylov Display Fallback";
  src: local("Georgia");
  size-adjust: 96%;
}

/* Shared content axes for public pages outside the homepage section system. */
:root {
  --font-display: "Cormorant Garamond", "Samoylov Display Fallback", Georgia, serif;
  --site-shell-gutter: 32px;
  --site-shell-max: 1200px;
  --site-shell-inline: max(
    var(--site-shell-gutter),
    calc((100vw - var(--site-shell-max)) / 2)
  );
}

/* Reading pages keep their deliberate narrow measure inside the shared gutter. */
body .page-wrap,
body .legal-wrap,
body:has(#sign-form) .wrap {
  width: calc(100% - (2 * var(--site-shell-gutter)));
  margin-inline: auto;
  padding-inline: 0;
}

body .page-wrap { max-width: 760px; }
body .legal-wrap { max-width: 720px; }
body:has(#sign-form) .wrap { max-width: 680px; }

body :is(.page-title, .legal-title) {
  overflow-wrap: anywhere;
  hyphens: auto;
}

body .page-nav,
body .legal-nav {
  padding-inline: var(--site-shell-inline);
}

/* Catalog and exercise pages use one 1200px axis without nested side padding. */
body:has(.articles-wrap) > :is(.hero, .toolbar, .filter-panel, .articles-wrap),
body:has(.grid-wrap) > :is(.hero, .filters, .grid-wrap, .disclaimer-wrap) {
  width: calc(100% - (2 * var(--site-shell-gutter)));
  max-width: var(--site-shell-max);
  margin-inline: auto;
  padding-inline: 0;
}

/* The countries page keeps its footer background full bleed and aligns its content. */
body .countries-header,
body .countries-main {
  width: calc(100% - (2 * var(--site-shell-gutter)));
  max-width: var(--site-shell-max);
  margin-inline: auto;
}

body .countries-footer {
  padding-inline: var(--site-shell-inline);
}

/* Link page remains intentionally narrow, with the same minimum viewport gutter. */
body .links-page {
  width: min(calc(100vw - (2 * var(--site-shell-gutter))), 460px);
}

/* Shared page CTAs retain content sizing and true vertical centering. */
body :is(.page-cta a, .page-cta-btn) {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.2;
}

@media (max-width: 480px) {
  :root { --site-shell-gutter: 20px; }
}