:root {
  color-scheme: dark;
  --breath-duration: 6.8s;
  --breath-ease: cubic-bezier(.37, 0, .35, 1);
}

* { box-sizing: border-box; }

html { background: #000; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #e9e0c9;
  font-family: "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 64px 24px 24px;
}

.holding-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 22px;
}

.breathing-n {
  display: block;
  width: clamp(158px, 15vw, 186px);
  height: auto;
  transform-origin: 50% 82%;
  animation: arch-breathe var(--breath-duration) var(--breath-ease) infinite;
}

h1 {
  margin: 20px 0 0;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .035em;
  animation: phrase-breathe var(--breath-duration) var(--breath-ease) infinite;
}

h1 em {
  font-family: Baskerville, "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.015em;
}

footer {
  padding: 20px 24px max(42px, env(safe-area-inset-bottom));
}

footer nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

footer a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  opacity: .58;
  border-radius: 4px;
  transition: opacity .25s ease, transform .25s ease;
  touch-action: manipulation;
}

footer a:hover { opacity: 1; transform: translateY(-2px); }
footer a:focus-visible { opacity: 1; outline: 2px solid #ffc978; outline-offset: 5px; }
footer img { display: block; filter: brightness(0) invert(1); }

@keyframes arch-breathe {
  0%, 100% { transform: translateY(.4px) scale(.988, .996); filter: brightness(.87); }
  42% { transform: translateY(-.7px) scale(1.033, 1.052); filter: brightness(1.16); }
  49% { transform: translateY(-.65px) scale(1.031, 1.05); filter: brightness(1.15); }
}

@keyframes phrase-breathe {
  0%, 100% { opacity: .78; }
  42%, 49% { opacity: .94; }
}

@media (max-width: 600px) {
  main { padding-top: 48px; }
  .breathing-n { width: 164px; }
  h1 { font-size: 21px; margin-top: 18px; }
  h1 em { font-size: 32px; }
  footer { padding-bottom: max(34px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .breathing-n, h1 { animation: none; }
  footer a { transition: none; }
  footer a:hover { transform: none; }
}