/* Pages beside the start page (functions, legal): the landing page's header and footer,
   one readable column and no animation. */
html:has(> body.subpage) {
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
}

body.subpage {
  min-height:100dvh;
  height:auto;
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:0;
  background:var(--bg);
}

.subpage-content {
  flex:1;
  width:min(820px,100% - 32px);
  margin:0 auto;
  padding:clamp(48px,9dvh,96px) 0 clamp(64px,10dvh,112px);
}

.subpage-kicker {
  margin:0 0 12px;
  color:var(--primary);
  font-size:14px;
  font-weight:600;
}

.subpage-content h1 {
  margin:0;
  color:var(--ink);
  font-size:clamp(38px,5vw,64px);
  line-height:1;
  letter-spacing:-.05em;
}

.subpage-intro {
  max-width:65ch;
  margin:20px 0 0;
  color:var(--dim);
  font-size:18px;
  line-height:1.6;
}

.subpage .site-footer {
  margin-top:auto;
  border-top:1px solid var(--line);
}

/* Read out, not shown: e.g. what a check mark in a table means. */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}