/* Shared public typography and homepage layout. Four text styles: title, subtitle, body, highlighted body. */
:root {
  --ink: var(--brand-ink);
  --accent: var(--brand-primary);
  --line: var(--brand-grey);
  --paper: #fff;
  --title: 400 clamp(2.5rem, 5.8vw, 4.5rem)/1.08 Helvetica, Arial, sans-serif;
  --subtitle: 400 clamp(1.5rem, 2.5vw, 1.875rem)/1.25 Helvetica, Arial, sans-serif;
  --body: 400 1.125rem/1.65 Helvetica, Arial, sans-serif;
  --highlight: 700 1.125rem/1.65 Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0 auto; padding: 0 40px; max-width: 1080px; background: var(--paper); color: var(--ink); font: var(--body); overflow-wrap: anywhere; }
h1 { font: var(--title); letter-spacing: -.045em; margin: 28px 0; }
h2 { font: var(--subtitle); letter-spacing: -.025em; margin: 0; }
p { margin: 0 0 24px; }
strong, .highlight { font: var(--highlight); }
a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
header { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 36px 0; }
header .highlight { color: var(--ink); text-decoration: none; }
.introduction { padding: 64px 0 48px; max-width: 850px; }
.introduction > p { max-width: 620px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.section-row { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; padding: 48px 0; }
.section-row p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
section { scroll-margin-top: 24px; }
footer { padding-bottom: 40px; }
footer p { margin: 24px 0 8px; }
.skip { position: absolute; left: -10000px; }
.skip:focus { left: 20px; top: 10px; background: white; }
@media (max-width: 700px) {
  body { padding: 0 24px; }
  header { padding: 24px 0; flex-wrap: wrap; gap: 8px 24px; }
  .introduction { padding: 40px 0 24px; }
  .section-row { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
}
.public-navigation {
  flex-wrap: nowrap; align-items: center; padding: 12px 0;
  color: var(--ink); background: transparent;
}
.public-navigation nav { display: flex; flex: none; align-items: center; gap: 16px; min-height: 44px; margin-left: auto; }
.public-navigation .login-button { display: inline-block; border: 1px solid currentColor; padding: 6px 16px; font: var(--highlight); text-decoration: none; }

@media (max-width: 480px) {
  .public-navigation { flex-wrap: wrap; gap: 8px 16px; }
}