@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/BarlowCondensed-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/BarlowCondensed-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@property --checker-red {
  syntax: "<color>";
  inherits: false;
  initial-value: #da2228;
}

:root {
  color-scheme: dark;
  --red: #da2228;
  --black: #101010;
  --cream: #f8f4e9;
  --square: min(6.25vw, 80px);
  --panel-columns: 14;
  --panel-rows: 6;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  background-color: var(--black);
  color: var(--cream);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: max(var(--square), env(safe-area-inset-top), env(safe-area-inset-bottom));
  --checker-red: var(--red);
  background-color: var(--black);
  background-image: conic-gradient(
    var(--black) 25%,
    var(--checker-red) 0 50%,
    var(--black) 0 75%,
    var(--checker-red) 0
  );
  background-size: calc(var(--square) * 2) calc(var(--square) * 2);
  /* The panel and tile share a centre; even square counts align every edge. */
  background-position: center;
  animation: checkerboard-breathe 12s ease-in-out infinite alternate;
}

.identity {
  flex: 0 0 auto;
  width: calc(var(--square) * var(--panel-columns));
  height: calc(var(--square) * var(--panel-rows));
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--black);
  /* A crisp black edge covers subpixel seams when Preview scales the page. */
  box-shadow: 0 0 0 1px var(--black);
  text-align: center;
}

h1 {
  display: flex;
  justify-content: center;
  column-gap: 0.17em;
  margin: 0;
  max-width: 100%;
  font-size: clamp(78px, 12.15vw, 172px);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  animation: settle-in 650ms ease-out both;
}

.contact-links {
  display: flex;
  gap: 34px;
  margin-top: 52px;
  animation: links-fade-in 500ms ease-out 650ms backwards;
}

.contact-links:focus-within {
  animation: none;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-width: 150px;
  min-height: 52px;
  padding: 10px 2px;
  border-bottom: 1px solid rgb(248 244 233 / 40%);
  color: var(--cream);
  text-decoration: none;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.025em;
  transform: translateY(0);
  transition:
    color 260ms ease,
    border-color 260ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.link-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

.facebook-icon {
  width: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .contact-link:hover {
    color: #ff555a;
    border-color: #ff555a;
    transform: translateY(-2px);
  }
}

.contact-link:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 8px;
  color: var(--cream);
  border-color: var(--red);
}

@keyframes settle-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes links-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Only the red gently changes; the square boundaries never move. */
@keyframes checkerboard-breathe {
  from {
    --checker-red: #da2228;
  }
  to {
    --checker-red: #ce2026;
  }
}

@media (max-width: 760px) {
  :root {
    --square: 10vw;
    --panel-columns: 8;
    --panel-rows: 12;
  }

  .identity {
    padding: 32px 16px;
  }

  h1 {
    flex-direction: column;
    gap: 0.075em;
    font-size: clamp(72px, 23.5vw, 160px);
  }

  .contact-links {
    gap: 24px;
    margin-top: 42px;
  }

  .contact-link {
    min-width: 116px;
    gap: 9px;
    font-size: 20px;
  }
}

@media (min-width: 481px) and (max-width: 760px) {
  :root {
    --panel-rows: 8;
  }
}

@media (max-width: 360px) {
  .contact-links {
    gap: 18px;
  }

  .contact-link {
    min-width: 106px;
    font-size: 19px;
  }
}

@media (max-height: 540px) and (min-width: 761px) {
  .contact-links {
    margin-top: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page,
  h1,
  .contact-links {
    animation: none;
  }

  .contact-link {
    transition: none;
  }

  .contact-link:hover {
    transform: none;
  }
}