:root {
  color-scheme: light dark;
  --color-page: #ffffff;
  --color-ink: #0f0f0f;
  --color-line-strong: #a8a8a8;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-small: 0.8125rem;
  --font-size-base: 1rem;
  --font-size-display: clamp(2.25rem, 7vw, 4.5rem);
  --line-height-body: 1.65;
  --line-height-tight: 1.12;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-7: 3rem;
  --space-9: 6rem;
  --size-content: 44rem;
  --space-page: clamp(1rem, 4vw, 2rem);
  --radius-small: 0.25rem;
  --border-width: 1px;
  --duration-medium: 240ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-page: #0f0f0f;
    --color-ink: #f5f5f5;
    --color-line-strong: #565656;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  min-block-size: 100%;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}

a {
  color: inherit;
  text-decoration-color: var(--color-line-strong);
  text-underline-offset: var(--space-1);
}

a:focus-visible {
  outline: calc(var(--border-width) * 2) solid var(--color-ink);
  outline-offset: var(--space-1);
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  text-decoration-line: underline;
  text-decoration-color: var(--color-line-strong);
  text-underline-offset: var(--space-1);
}

.tooltip::after {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-start: 50%;
  z-index: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-small);
  background: var(--color-ink);
  color: var(--color-page);
  content: attr(data-tooltip);
  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(var(--space-1) * -1));
  transition:
    opacity var(--duration-medium) var(--ease-enter),
    transform var(--duration-medium) var(--ease-enter);
  white-space: nowrap;
}

.tooltip:hover::after,
.tooltip:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.tooltip:focus-visible {
  outline: calc(var(--border-width) * 2) solid var(--color-ink);
  outline-offset: var(--space-1);
}

.essay {
  inline-size: min(calc(100% - (var(--space-page) * 2)), var(--size-content));
  margin-inline: auto;
  padding-block: var(--space-9);
  animation: surface-enter var(--duration-medium) var(--ease-enter) both;
}

.logo {
  --logo-overlap: 0.20em;
  display: inline-flex;
  align-items: baseline;
  letter-spacing: 0;
}

.logo__image {
  display: block;
  inline-size: auto;
  block-size: 0.9145em;
}

.logo > span + span {
  margin-inline-start: calc(var(--logo-overlap) * -1);
}

.logo-text {
  white-space: nowrap;
}

.essay > .logo {
  align-items: flex-start;
  margin-block: 0 calc(var(--space-5) + var(--space-2));
  font-size: var(--font-size-display);
  font-weight: 500;
  line-height: var(--line-height-tight);
}

.essay > p {
  margin-block: 0 var(--space-5);
}

.essay address {
  margin-block-start: 0;
  font-style: normal;
}

.essay address p {
  margin-block: 0;
}

@keyframes surface-enter {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-4) / 2));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .essay {
    animation: none;
  }

  .tooltip::after {
    transition: none;
  }
}

@media (prefers-color-scheme: dark) {
  .logo__image {
    filter: invert(1) brightness(1.020833);
  }
}