body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
}

/* Layers, top to bottom: the scrim (see tokens.css), the site's photo if it has one, and
   the mesh gradient. The gradient gives glass something to blur on sites without a photo;
   glass over flat white is invisible. The 45% peak strength is mirrored in
   crates/sitegen/src/contrast.rs. The layer is static: a moving full-screen photo behind
   blurred glass is distracting and costly on phones. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--scrim), var(--scrim)),
    var(--bg-image) center / cover no-repeat,
    radial-gradient(40% 40% at 15% 10%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
    radial-gradient(35% 35% at 85% 22%, color-mix(in srgb, var(--accent-alt) 45%, transparent), transparent 70%),
    radial-gradient(45% 45% at 60% 92%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
}

a { color: var(--link); text-underline-offset: .2em; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-md);
}
.skip-link:focus { top: 1rem; }

.site-header, main, .site-footer {
  width: min(100% - 2.5rem, 44rem);
  margin-inline: auto;
}
.site-header { padding-top: 1.5rem; }
.site-name {   /* also a .glass panel: all text sits on glass, never on the bare background */
  display: inline-block;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
}

.hero {   /* also a .glass panel */
  padding: clamp(1.5rem, 6vw, 3.5rem);
  margin-block: clamp(1.5rem, 6vw, 3.5rem) 1.25rem;
}
.hero h1 {
  font-size: clamp(2.25rem, 6vw + .5rem, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: .6rem;
}

/* RULE: all text sits on a glass panel (the header name, hero, panels and disclaimer), so
   contrast.rs can bound the background behind it. Bare text over a photo cannot be bounded. */
.lede {
  font-size: clamp(1.1rem, 1.6vw + .8rem, 1.35rem);
  max-width: 34rem;
}

.panel {
  padding: clamp(1.25rem, 4vw, 2rem);
  margin-bottom: 1.25rem;
}
.panel h2 {
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}
.panel p { color: var(--ink); }
.panel p + p { margin-top: .75rem; }

.site-footer { padding-block: .5rem 6rem; }
.disclaimer {   /* also a .glass panel */
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: .875rem;
  color: var(--ink-soft);
}
.disclaimer p { color: inherit; }