/* The policy, the terms and the 404: the site's tokens and header (site.css), the title held on the left
   while the text reads on the right, as the questions are set on the home page. */

.page { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 7fr); padding: clamp(72px, 10vw, 140px) var(--m) var(--gap); }
.page > * { grid-column: 3; max-width: 68ch; }
.page > h1 { grid-column: 1; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(var(--bar-h) + 72px);
  margin: 0; font-size: var(--step-head); font-weight: 500; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.page .date { color: var(--muted); font-size: var(--step-small); }
.page .lead { font-size: var(--step-lead); line-height: 1.45; margin-top: 16px; }
.page h2 { font-size: var(--step-lead); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin-top: 56px; }
.page h3 { font-size: var(--step-body); font-weight: 600; margin-top: 28px; }
.page p, .page ul { margin-top: 14px; }
.page ul { padding-left: 1.2em; }
.page li + li { margin-top: 8px; }
.page code { background: var(--tone-2); padding: .05em .35em; border-radius: 6px; }
.page .note { margin-top: 28px; padding: 20px 24px; background: var(--tone); border-radius: var(--radius); }
.page .note p:first-child { margin-top: 0; }

.page-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding: 40px var(--m); background: var(--tone); font-size: var(--step-small); color: var(--muted); }
.page-foot nav { display: flex; gap: 24px; }
.page-foot a { color: var(--muted); }

@media (max-width: 899px) {
  .page { display: block; padding-inline: 20px; }
  .page > h1 { position: static; margin-bottom: 16px; }
}

body:has(> .page) { display: flex; flex-direction: column; min-height: 100svh; }
body:has(> .page) > .page { flex: 1; }