*,
*::before,
*::after { box-sizing: border-box; }

html,
body { height: 100%; }

body {
  margin: 0;
  background: #F7EEE6;
  color: #4B1F16;
  font: 400 15px/1.6 'Avenir Next', Avenir, 'Helvetica Neue', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  padding: 6vmin 24px;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The mark breathes on its own — the animation lives inside logo.svg, which
   also carries the prefers-reduced-motion fallback. */
.logo {
  width: clamp(240px, 46vw, 460px);
  height: auto;
  display: block;
}

/* The tagline is live text, not part of the logo. Its size is the logo's clamp
   scaled by 0.0400 — the ratio the caption held inside the lockup — so
   the two stay in proportion at every width. */
.tagline {
  /* The logo already carries 34 units of padding below the wordmark, so this
     only needs to top it up. */
  margin: clamp(4px, 1vw, 12px) 0 0;
  font-size: clamp(9.6px, 1.84vw, 18.4px);
  letter-spacing: 0.368em;
  /* letter-spacing appends a trailing space after the last glyph, which pulls
     the run half a space left of the box centre. Matching padding on the left
     puts it back. */
  padding-left: 0.368em;
  color: #A38878;
  text-transform: lowercase;
}