:root {
  --grid-margin: 32px;
  --grid-max-width: 1600px;
  --grid-gap: 32px;
  --page: #fff;
  --ink: #141414;
  color-scheme: light;
  color: var(--ink);
  background: var(--page);
  font: 500 16px/24px system-ui, sans-serif;
}

body {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding-inline: var(--grid-margin);
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
}

main {
  display: grid;
  gap: 16px;
  width: calc((100% - 11 * var(--grid-gap)) * 5 / 12 + 4 * var(--grid-gap));
  min-width: min(100%, 540px);
}

@media (max-width: 600px) {
  :root { --grid-margin: 20px; }
  main { width: 100%; }
}

h1, p {
  margin: 0;
}

h1 {
  font: inherit;
}

main > p { font-weight: 400; }

.smile { position: relative; display: inline-block; vertical-align: 2px; }
.smile-ready .smile-reference { visibility: hidden; }
.smile-baseline { display: inline-block; width: 0; height: 0; }
.smile-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: currentColor; pointer-events: none; }
.smile:not(.smile-ready) .smile-svg { visibility: hidden; }
.smile-svg text { font: inherit; }
.smile-eye text { transform-box: fill-box; transform-origin: center; }

.contact-links {
  display: flex;
  gap: 5px;
  position: relative;
}

.contact-links > :is(a, button) {
  color: inherit;
  font: inherit;
  text-decoration: none;
  background: linear-gradient(#ececef, #ececef) left bottom / 100% 4px no-repeat;
  transition: background-size 320ms cubic-bezier(.22, 1, .36, 1);
}

.email-copy {
  border: 0;
  padding: 0;
  cursor: pointer;
}

.contact-links > :is(a, button):is(:hover, :focus-visible) { background-size: 100% 100%; }
:focus-visible { outline: 2px solid #2765ed; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .contact-links > :is(a, button) { transition: none; }
}

.copy-status:not(.copy-error) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.copy-error {
  position: absolute;
  top: calc(100% + 4px);
  color: #58585d;
}

.contact-hearts { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.contact-tooltip, .contact-heart { position: absolute; user-select: none; will-change: transform, opacity; }
.contact-tooltip { padding: 0 4px; background: var(--ink); color: var(--page); white-space: nowrap; }
.contact-heart { line-height: 1; }

.local-status {
  position: absolute;
  inset: auto var(--grid-margin) 30px;
  text-align: center;
  color: #86868b;
  font-weight: 400;
}