:root {
  color-scheme: light;
  --snow: #ffffff;
  --ivory: #faf8f4;
  --cream: #f3e0e7;
  --blush: #fadde4;
  --pearl: #e8e5e8;
  --rose: #c97898;
  --ink: #7b5364;
  --handle: #87556b;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--ivory); }

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(250, 221, 228, .8), transparent 28rem),
    var(--ivory);
  font-family: Inter, Arial, sans-serif;
}

.link-page {
  width: min(100% - 2rem, 34rem);
  min-height: 100vh;
  margin: 0 auto;
  padding: 1.75rem 0 2rem;
  text-align: center;
}

.profile { display: grid; justify-items: center; }

.bow {
  display: block;
  width: min(12.75rem, 46vw);
  height: auto;
  margin: -1.15rem 0 -2.2rem;
  mix-blend-mode: multiply;
}

h1 {
  margin: .65rem 0 .1rem;
  color: #dd87aa;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3rem, 13vw, 4.85rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .95;
}

h1 span { letter-spacing: -.13em; }

.rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100%, 20rem);
  gap: .7rem;
  margin: 1.5rem 0 .95rem;
  color: #f08eb3;
  font-size: .86rem;
}

.rule::before,
.rule::after {
  height: 1px;
  background: #eeb1c6;
  content: "";
}

.mood {
  margin: 0;
  color: #ed8daf;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.15;
}

.error-code {
  margin: .9rem 0 .2rem;
  color: #ed8daf;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
}

.error-copy {
  max-width: 23rem;
  margin: 1.75rem auto 1.25rem;
  color: var(--ink);
  line-height: 1.55;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: .7rem 1.1rem;
  border: 1px solid rgba(201, 120, 152, .55);
  border-radius: .35rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 .4rem 1.2rem rgba(166, 110, 133, .08);
  font-weight: 600;
  text-decoration: none;
}

.back-link:hover { background: var(--blush); }
.back-link:focus-visible { outline: 3px solid #e98bac; outline-offset: 3px; }

.links {
  display: grid;
  gap: .8rem;
  margin-top: 2.25rem;
}

.social-link {
  display: grid;
  grid-template-columns: 1.2rem max-content max-content .52rem;
  align-items: center;
  justify-content: center;
  width: min(100%, 18.5rem);
  min-height: 3.6rem;
  gap: .55rem;
  margin: 0 auto;
  padding: .7rem 1rem;
  border: 1px solid rgba(201, 120, 152, .42);
  border-radius: .35rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 .4rem 1.2rem rgba(166, 110, 133, .08);
  font-size: 1.06rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.social-link::after {
  width: .52rem;
  height: .52rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.social-icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
}

.link-name { min-width: 0; }

.social-link small {
  color: var(--handle);
  font-size: .9rem;
  font-weight: 500;
}

.social-link:hover { background: var(--blush); box-shadow: 0 .55rem 1.5rem rgba(166, 110, 133, .15); transform: translateY(-2px); }
.social-link:focus-visible { outline: 3px solid #e98bac; outline-offset: 3px; }
.social-link:active { transform: translateY(0); }

@media (max-width: 28rem) {
  .link-page { width: min(100% - 1.25rem, 34rem); }
  .social-link { padding-left: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .social-link { transition: none; }
}