/* Layout and type. Every color and font comes from /assets/theme.css, which the app generates from
   site_settings (theme.light, theme.dark, font.heading, font.body, font.logo, font.faces). */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-weight:var(--font-body-weight);
  display:flex;align-items:center;justify-content:center;
}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:var(--font-heading-weight)}
a{color:var(--primaryText);text-underline-offset:.2em;text-decoration-color:var(--sky)}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:40rem;padding:3rem 16px;text-align:center}
.logo img{display:block;width:clamp(112px,32vw,160px);height:auto;margin:0 auto 1.5rem;border-radius:28px}
/* The wordmark is the logo: always the logo font, never the heading font. */
.wordmark{margin:0;font-family:var(--font-logo);font-weight:var(--font-logo-weight);font-size:clamp(2.1rem,8vw,3.4rem);letter-spacing:-.015em;line-height:1.05}
.hello{color:var(--hello)}
.home{color:var(--home)}
.projects{display:block;font-family:var(--font-logo);font-weight:var(--font-logo-weight);font-size:.36em;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:.6rem;margin-right:-.32em}
.soon{margin:2rem 0 .5rem;font-size:1.15rem;letter-spacing:.02em;color:var(--ink)}
.lede{margin:0 auto;max-width:30rem;font-size:1.15rem;line-height:1.6;color:var(--ink)}