/* bellacat.io — holding page.
   One typeface, three sizes, a great deal of air. */

:root {
  color-scheme: light dark;

  --paper: #faf9f6;
  --ink: #1b1a17;
  --muted: #6b675e;
  --accent: #3a5a78;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Times New Roman", serif;

  --gutter: clamp(1.5rem, 6vw, 7rem);
  --edge: clamp(1.75rem, 5vh, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111210;
    --ink: #e9e6df;
    --muted: #9a968d;
    --accent: #a9c2d9;
  }
}

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

html {
  background-color: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: var(--edge) var(--gutter);
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.55;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: grid;
  align-content: center;
  /* the optical centre sits a little above the true one */
  padding-block-end: clamp(1rem, 7vh, 5rem);
}

.wordmark {
  /* hangs the B's left sidebearing past the margin */
  margin: 0 0 0 -0.03em;
  font-size: clamp(2.75rem, 1.25rem + 7.6vw, 7rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.022em;
}

.lede {
  max-width: 26ch;
  margin: clamp(1.5rem, 3.5vh, 2.25rem) 0 0;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.contact {
  margin: clamp(2.75rem, 8vh, 5rem) 0 0;
}

.contact-label {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
  /* tracked out so small caps read as a label, not as a word */
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.email {
  color: var(--ink);
  font-size: clamp(1.125rem, 1.05rem + 0.45vw, 1.5rem);
  letter-spacing: -0.004em;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 220ms ease, text-decoration-color 220ms ease;
}

.email:hover,
.email:focus-visible {
  color: var(--accent);
  text-underline-offset: 0.3em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 1px;
}

.colophon {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

/* Entrance is opt-IN: a UA that never evaluates this query paints the
   resting state, so content can never be stranded at opacity: 0. */
@media (prefers-reduced-motion: no-preference) {
  .wordmark,
  .lede,
  .contact,
  .colophon {
    animation: settle 900ms cubic-bezier(0.2, 0.6, 0.3, 1) both;
  }

  .lede {
    animation-delay: 80ms;
  }

  .contact {
    animation-delay: 160ms;
  }

  .colophon {
    animation-delay: 240ms;
  }
}

/* `from` only — the resting state is each element's own computed style. */
@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
}

/* landscape phone: the above-centre offset would otherwise force a scroll */
@media (max-height: 32rem) {
  main {
    padding-block-end: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
  }
}