:root {
  --backdrop: #0e1116;
  --light: #edeeea;

  --inset: clamp(1.25rem, 4vw, 3rem);

  /* Logo width in the top-right corner. */
  --brand-width: clamp(89px, 10.2vw, 166px);

  /* The lockup is centred inside its viewBox with 1.9% horizontal and 2.54%
     vertical padding. Pulling that back puts the artwork's own edges — not the
     SVG box's — on the corner inset. */
  --brand-trim-x: calc(var(--brand-width) * -0.01903);
  --brand-trim-y: calc(var(--brand-width) * -0.01555);

  /* Visible artwork spans 1491/1550 of the SVG box. */
  --brand-art-width: calc(var(--brand-width) * 0.96194);

  --contact-size: 48px;
}

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

/* The gradient under the photograph is what shows if the image is missing. */
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: end;
  padding: var(--inset);

  background-color: var(--backdrop);
  background-image:
    url("assets/background.webp"),
    radial-gradient(120% 90% at 70% 20%, #253040 0%, var(--backdrop) 70%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Keeps the white mark and icon legible over a light or busy photograph. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Corner vignette carries the white mark over the bright sky; the linear pass
     under it is light so the artwork keeps its daylight. */
  background:
    radial-gradient(58% 42% at 100% 0%, rgb(8 10 14 / 58%) 0%, rgb(8 10 14 / 0%) 100%),
    linear-gradient(
      to bottom,
      rgb(8 10 14 / 18%) 0%,
      rgb(8 10 14 / 5%) 38%,
      rgb(8 10 14 / 38%) 100%
    );
}

.brand {
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: block;
  width: var(--brand-width);
  height: auto;
  margin-top: var(--brand-trim-y);
  margin-right: var(--brand-trim-x);
  opacity: 0.9;
}

/* 404 only — the landing page carries no copy. */
.notice {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background-color: rgb(8 10 14 / 35%);
  backdrop-filter: blur(2px);
  color: var(--light);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.notice a {
  color: inherit;
}

.contact {
  grid-row: 3;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--contact-size);
  height: var(--contact-size);
  /* Centred on the logo artwork's vertical axis, not flush with its edge. */
  margin-right: calc((var(--brand-art-width) - var(--contact-size)) / 2);
  border: 1px solid rgb(237 238 234 / 45%);
  border-radius: 50%;
  color: var(--light);
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

.contact svg {
  width: calc(var(--contact-size) * 0.4);
  height: calc(var(--contact-size) * 0.4);
}

.contact:hover,
.contact:focus-visible {
  background-color: rgb(237 238 234 / 16%);
  border-color: var(--light);
}

.contact:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .contact {
    transition-duration: 0.01ms;
  }
}