/* Shared skeleton for the three directions. No viewport-height units: the renders are taken in a very tall window. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }

.nav, .hero, .stats, .block, .foot { width: min(1180px, 100% - 48px); margin-inline: auto; }

.nav { display: flex; align-items: center; gap: 32px; padding: 26px 0; }
.nav nav { display: flex; gap: 28px; margin-left: auto; }
.btn { display: inline-block; padding: 12px 20px; font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: center; padding: 56px 0 64px; }
.place { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats div { display: flex; flex-direction: column; }

.block { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; padding: 64px 0; }
.prose p + p { margin-top: 1em; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card ul { margin-top: 12px; }
.card li { position: relative; padding-left: 22px; }
.card li + li { margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.timeline li { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; padding: 16px 0; }
.timeline .when { grid-row: span 2; }
.timeline .where:empty { display: none; }

.trio { grid-template-columns: repeat(3, 1fr); }
.forms { grid-template-columns: 1fr 1fr; }
.form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.form label { display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 14px; }
.form input, .form textarea { width: 100%; padding: 12px 14px; font: inherit; }

/* The popup that shows a form's answer (forms.js): the browser's own dialog, which it centres. A closed one is not shown,
   so nothing here sets `display` on .popup itself. While it is open the page behind it does not scroll (.popup-open),
   and where the page showed a scrollbar its room is kept (.popup-bar), so the page does not shift sideways. */
.popup { width: min(440px, 100% - 40px); max-width: none; padding: 0; border: 0; overscroll-behavior: contain; }
.popup-box { display: flex; flex-direction: column; gap: 24px; align-items: flex-end; padding: 32px; }
.popup-say { width: 100%; overflow-wrap: break-word; }
.popup .btn { min-width: 120px; min-height: 44px; border: 0; text-align: center; }
html.popup-open { overflow: hidden; }
html.popup-bar { scrollbar-gutter: stable; }

.foot { display: flex; justify-content: space-between; padding: 32px 0 48px; font-size: 14px; }

@media (max-width: 760px) {
  .popup-box { padding: 22px; }
  .popup .btn { width: 100%; }
  .nav, .hero, .stats, .block, .foot { width: calc(100% - 40px); }
  .nav nav { display: none; }
  .nav-cta { margin-left: auto; font-size: 13px; padding: 10px 14px; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 24px 0 40px; }
  .portrait { order: -1; width: 148px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .block, .trio, .forms { grid-template-columns: 1fr; gap: 24px; padding: 44px 0; }
  .cards { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; }
  .timeline .when { grid-row: auto; }
  .actions .btn { flex: 1 1 100%; text-align: center; }
}