/* Both pages share one stable frame, independent of their content styles. */
html { scrollbar-gutter: stable; overflow-y: scroll; }
html body { margin: 0; min-width: 280px; }
html body > header {
  box-sizing: border-box;
  background: #123e3e;
  color: white;
  padding: 28px max(clamp(16px, 3vw, 36px), calc((100% - 1500px) / 2 + clamp(16px, 3vw, 36px)));
}
html body > header small { display: block; font-size: 12px; line-height: 18px; letter-spacing: .5px; color: #acd4ca; }
html body > header h1 { font-size: 28px; line-height: 42px; margin: 12px 0; font-weight: 700; word-break: keep-all; }
html body > header p { font-size: 14px; line-height: 24px; color: #d0e3da; margin: 14px 0; }
html body > header nav { display: flex; gap: 8px; flex-wrap: nowrap; margin: 22px 0 0; }
html body > header nav a {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 16px; border: 1px solid #6b9990; border-radius: 8px;
  font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: none;
  color: #d9ebe5; background: transparent; white-space: nowrap;
}
html body > header nav a[aria-current="page"] { background: #d9ede3; color: #123e3e; border-color: #d9ede3; }
html body > header nav a:focus-visible { outline: 3px solid #e1ad3a; outline-offset: 3px; }
html body > main { box-sizing: border-box; width: 100%; max-width: 1500px; min-width: 0; margin: 0 auto; padding: 28px clamp(16px, 3vw, 36px); }
@media (max-width: 700px) {
  html body > header { padding: 22px 12px; }
  html body > header h1 { font-size: clamp(21px, 5.7vw, 27px); line-height: 1.5; }
  html body > header p { line-height: 24px; }
  html body > header nav { gap: 8px; }
  html body > header nav a { flex: 1 1 0; min-width: 0; padding: 12px 6px; font-size: 12px; }
  html body > main { padding: 16px 12px; }
}