@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: #f5f5f5;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-border: rgba(204, 0, 0, 0.14);
  --text: #222222;
  --muted: #5f5f5f;
  --accent: #cc0000;
  --accent-dark: #b30000;
  --shadow: 0 20px 60px rgba(34, 34, 34, 0.08);
  --radius-xl: 2rem;
  --radius-lg: 1.25rem;
  --radius-full: 999px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(204, 0, 0, 0.06), transparent 28%),
    linear-gradient(180deg, #fafafa 0%, var(--background) 100%);
  color: var(--text);
  font-family: "Titillium Web", system-ui, sans-serif;
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.confetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.confetti-piece {
  position: absolute;
  top: -12vh;
  border-radius: 0.2rem;
  opacity: 0;
  animation-name: confetti-fall;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.confetti-piece:nth-child(4n + 1),
.confetti-piece:nth-child(4n + 2) {
  background: #cc0000;
}

.confetti-piece:nth-child(4n + 3) {
  background: #222222;
}

.confetti-piece:nth-child(4n) {
  background: #ffffff;
  border: 1px solid rgba(34, 34, 34, 0.1);
}

.confetti-piece-1 {
  left: 3%;
  width: 0.45rem;
  height: 1.35rem;
  animation-delay: 0ms;
  animation-duration: 1450ms;
  --confetti-drift: -1.2rem;
  --confetti-rotate: 420deg;
}

.confetti-piece-2 {
  left: 7%;
  width: 0.72rem;
  height: 0.78rem;
  animation-delay: 130ms;
  animation-duration: 1680ms;
  --confetti-drift: 2.4rem;
  --confetti-rotate: 610deg;
}

.confetti-piece-3 {
  left: 11%;
  width: 0.55rem;
  height: 1.0rem;
  animation-delay: 40ms;
  animation-duration: 1580ms;
  --confetti-drift: -2.8rem;
  --confetti-rotate: 530deg;
}

.confetti-piece-4 {
  left: 14%;
  width: 0.6rem;
  height: 1.18rem;
  animation-delay: 220ms;
  animation-duration: 1760ms;
  --confetti-drift: 1.7rem;
  --confetti-rotate: 700deg;
}

.confetti-piece-5 {
  left: 18%;
  width: 0.8rem;
  height: 0.74rem;
  animation-delay: 95ms;
  animation-duration: 1510ms;
  --confetti-drift: -3.5rem;
  --confetti-rotate: 485deg;
}

.confetti-piece-6 {
  left: 21%;
  width: 0.48rem;
  height: 1.42rem;
  animation-delay: 15ms;
  animation-duration: 1630ms;
  --confetti-drift: 2.1rem;
  --confetti-rotate: 650deg;
}

.confetti-piece-7 {
  left: 24%;
  width: 0.65rem;
  height: 0.92rem;
  animation-delay: 180ms;
  animation-duration: 1820ms;
  --confetti-drift: -1.9rem;
  --confetti-rotate: 760deg;
}

.confetti-piece-8 {
  left: 28%;
  width: 0.58rem;
  height: 1.08rem;
  animation-delay: 60ms;
  animation-duration: 1490ms;
  --confetti-drift: 3.2rem;
  --confetti-rotate: 440deg;
}

.confetti-piece-9 {
  left: 31%;
  width: 0.75rem;
  height: 0.76rem;
  animation-delay: 260ms;
  animation-duration: 1710ms;
  --confetti-drift: -2.3rem;
  --confetti-rotate: 620deg;
}

.confetti-piece-10 {
  left: 35%;
  width: 0.5rem;
  height: 1.28rem;
  animation-delay: 120ms;
  animation-duration: 1560ms;
  --confetti-drift: 1.1rem;
  --confetti-rotate: 560deg;
}

.confetti-piece-11 {
  left: 39%;
  width: 0.68rem;
  height: 0.88rem;
  animation-delay: 30ms;
  animation-duration: 1660ms;
  --confetti-drift: -3.1rem;
  --confetti-rotate: 690deg;
}

.confetti-piece-12 {
  left: 42%;
  width: 0.54rem;
  height: 1.12rem;
  animation-delay: 210ms;
  animation-duration: 1880ms;
  --confetti-drift: 2.7rem;
  --confetti-rotate: 810deg;
}

.confetti-piece-13 {
  left: 46%;
  width: 0.46rem;
  height: 1.38rem;
  animation-delay: 75ms;
  animation-duration: 1520ms;
  --confetti-drift: -1.4rem;
  --confetti-rotate: 470deg;
}

.confetti-piece-14 {
  left: 49%;
  width: 0.78rem;
  height: 0.72rem;
  animation-delay: 155ms;
  animation-duration: 1740ms;
  --confetti-drift: 3.5rem;
  --confetti-rotate: 640deg;
}

.confetti-piece-15 {
  left: 53%;
  width: 0.56rem;
  height: 1.04rem;
  animation-delay: 20ms;
  animation-duration: 1610ms;
  --confetti-drift: -2.6rem;
  --confetti-rotate: 575deg;
}

.confetti-piece-16 {
  left: 57%;
  width: 0.62rem;
  height: 1.16rem;
  animation-delay: 240ms;
  animation-duration: 1790ms;
  --confetti-drift: 1.8rem;
  --confetti-rotate: 730deg;
}

.confetti-piece-17 {
  left: 60%;
  width: 0.7rem;
  height: 0.8rem;
  animation-delay: 110ms;
  animation-duration: 1470ms;
  --confetti-drift: -3.8rem;
  --confetti-rotate: 455deg;
}

.confetti-piece-18 {
  left: 64%;
  width: 0.44rem;
  height: 1.45rem;
  animation-delay: 50ms;
  animation-duration: 1690ms;
  --confetti-drift: 2.2rem;
  --confetti-rotate: 605deg;
}

.confetti-piece-19 {
  left: 67%;
  width: 0.74rem;
  height: 0.75rem;
  animation-delay: 190ms;
  animation-duration: 1590ms;
  --confetti-drift: -1.7rem;
  --confetti-rotate: 545deg;
}

.confetti-piece-20 {
  left: 71%;
  width: 0.52rem;
  height: 1.1rem;
  animation-delay: 85ms;
  animation-duration: 1830ms;
  --confetti-drift: 3.1rem;
  --confetti-rotate: 785deg;
}

.confetti-piece-21 {
  left: 74%;
  width: 0.66rem;
  height: 0.9rem;
  animation-delay: 10ms;
  animation-duration: 1540ms;
  --confetti-drift: -2.1rem;
  --confetti-rotate: 495deg;
}

.confetti-piece-22 {
  left: 78%;
  width: 0.57rem;
  height: 1.2rem;
  animation-delay: 230ms;
  animation-duration: 1720ms;
  --confetti-drift: 1.3rem;
  --confetti-rotate: 670deg;
}

.confetti-piece-23 {
  left: 82%;
  width: 0.79rem;
  height: 0.73rem;
  animation-delay: 140ms;
  animation-duration: 1650ms;
  --confetti-drift: -3.3rem;
  --confetti-rotate: 590deg;
}

.confetti-piece-24 {
  left: 85%;
  width: 0.49rem;
  height: 1.3rem;
  animation-delay: 35ms;
  animation-duration: 1770ms;
  --confetti-drift: 2.9rem;
  --confetti-rotate: 720deg;
}

.confetti-piece-25 {
  left: 89%;
  width: 0.63rem;
  height: 0.98rem;
  animation-delay: 170ms;
  animation-duration: 1500ms;
  --confetti-drift: -1.5rem;
  --confetti-rotate: 435deg;
}

.confetti-piece-26 {
  left: 93%;
  width: 0.53rem;
  height: 1.14rem;
  animation-delay: 65ms;
  animation-duration: 1860ms;
  --confetti-drift: 3.7rem;
  --confetti-rotate: 750deg;
}

.confetti-piece-27 {
  left: 96%;
  width: 0.71rem;
  height: 0.82rem;
  animation-delay: 250ms;
  animation-duration: 1570ms;
  --confetti-drift: -2.9rem;
  --confetti-rotate: 565deg;
}

.confetti-piece-28 {
  left: 5%;
  width: 0.47rem;
  height: 1.36rem;
  animation-delay: 100ms;
  animation-duration: 1670ms;
  --confetti-drift: 1.9rem;
  --confetti-rotate: 695deg;
}

.confetti-piece-29 {
  left: 9%;
  width: 0.76rem;
  height: 0.77rem;
  animation-delay: 25ms;
  animation-duration: 1810ms;
  --confetti-drift: -3.6rem;
  --confetti-rotate: 505deg;
}

.confetti-piece-30 {
  left: 13%;
  width: 0.59rem;
  height: 1.06rem;
  animation-delay: 200ms;
  animation-duration: 1530ms;
  --confetti-drift: 2.5rem;
  --confetti-rotate: 660deg;
}

.confetti-piece-31 {
  left: 17%;
  width: 0.67rem;
  height: 0.94rem;
  animation-delay: 145ms;
  animation-duration: 1730ms;
  --confetti-drift: -1.1rem;
  --confetti-rotate: 580deg;
}

.confetti-piece-32 {
  left: 23%;
  width: 0.51rem;
  height: 1.22rem;
  animation-delay: 55ms;
  animation-duration: 1600ms;
  --confetti-drift: 3.3rem;
  --confetti-rotate: 740deg;
}

.confetti-piece-33 {
  left: 27%;
  width: 0.73rem;
  height: 0.79rem;
  animation-delay: 235ms;
  animation-duration: 1780ms;
  --confetti-drift: -2.4rem;
  --confetti-rotate: 450deg;
}

.confetti-piece-34 {
  left: 33%;
  width: 0.45rem;
  height: 1.4rem;
  animation-delay: 90ms;
  animation-duration: 1480ms;
  --confetti-drift: 1.6rem;
  --confetti-rotate: 625deg;
}

.confetti-piece-35 {
  left: 37%;
  width: 0.64rem;
  height: 0.96rem;
  animation-delay: 5ms;
  animation-duration: 1700ms;
  --confetti-drift: -3.2rem;
  --confetti-rotate: 550deg;
}

.confetti-piece-36 {
  left: 41%;
  width: 0.55rem;
  height: 1.09rem;
  animation-delay: 185ms;
  animation-duration: 1620ms;
  --confetti-drift: 2.8rem;
  --confetti-rotate: 770deg;
}

.confetti-piece-37 {
  left: 45%;
  width: 0.77rem;
  height: 0.71rem;
  animation-delay: 125ms;
  animation-duration: 1840ms;
  --confetti-drift: -1.8rem;
  --confetti-rotate: 490deg;
}

.confetti-piece-38 {
  left: 51%;
  width: 0.5rem;
  height: 1.26rem;
  animation-delay: 45ms;
  animation-duration: 1550ms;
  --confetti-drift: 3.6rem;
  --confetti-rotate: 680deg;
}

.confetti-piece-39 {
  left: 55%;
  width: 0.69rem;
  height: 0.86rem;
  animation-delay: 215ms;
  animation-duration: 1750ms;
  --confetti-drift: -2.7rem;
  --confetti-rotate: 600deg;
}

.confetti-piece-40 {
  left: 59%;
  width: 0.58rem;
  height: 1.15rem;
  animation-delay: 70ms;
  animation-duration: 1640ms;
  --confetti-drift: 1.4rem;
  --confetti-rotate: 710deg;
}

.confetti-piece-41 {
  left: 63%;
  width: 0.8rem;
  height: 0.74rem;
  animation-delay: 160ms;
  animation-duration: 1800ms;
  --confetti-drift: -3.9rem;
  --confetti-rotate: 465deg;
}

.confetti-piece-42 {
  left: 69%;
  width: 0.46rem;
  height: 1.32rem;
  animation-delay: 115ms;
  animation-duration: 1460ms;
  --confetti-drift: 2.0rem;
  --confetti-rotate: 635deg;
}

.confetti-piece-43 {
  left: 73%;
  width: 0.61rem;
  height: 1.02rem;
  animation-delay: 20ms;
  animation-duration: 1685ms;
  --confetti-drift: -1.3rem;
  --confetti-rotate: 570deg;
}

.confetti-piece-44 {
  left: 77%;
  width: 0.54rem;
  height: 1.18rem;
  animation-delay: 245ms;
  animation-duration: 1585ms;
  --confetti-drift: 3.0rem;
  --confetti-rotate: 790deg;
}

.confetti-piece-45 {
  left: 81%;
  width: 0.74rem;
  height: 0.81rem;
  animation-delay: 150ms;
  animation-duration: 1765ms;
  --confetti-drift: -2.2rem;
  --confetti-rotate: 515deg;
}

.confetti-piece-46 {
  left: 87%;
  width: 0.52rem;
  height: 1.24rem;
  animation-delay: 80ms;
  animation-duration: 1515ms;
  --confetti-drift: 1.2rem;
  --confetti-rotate: 655deg;
}

.confetti-piece-47 {
  left: 91%;
  width: 0.68rem;
  height: 0.89rem;
  animation-delay: 175ms;
  animation-duration: 1715ms;
  --confetti-drift: -3.4rem;
  --confetti-rotate: 585deg;
}

.confetti-piece-48 {
  left: 95%;
  width: 0.57rem;
  height: 1.11rem;
  animation-delay: 30ms;
  animation-duration: 1595ms;
  --confetti-drift: 2.6rem;
  --confetti-rotate: 735deg;
}
a {
  color: inherit;
}

.page {
  width: min(100% - 2rem, 48rem);
  margin: 0 auto;
  padding: 2rem 0;
}

.bio-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  padding: 2rem 1.25rem;
}

.hero {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
}

.hero-photo {
  width: min(17rem, 72vw);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 0.35rem solid #ffffff;
  box-shadow: 0 18px 40px rgba(34, 34, 34, 0.12);
}

.hero-copy {
  width: 100%;
}

h1,
.section-title,
.link-button {
  letter-spacing: 0.01em;
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.02;
  font-weight: 700;
}

.role {
  margin: 0.55rem 0 0;
  color: var(--accent);
  font-size: clamp(1.05rem, 3vw, 1.55rem);
  font-weight: 600;
}

.divider {
  width: 4rem;
  height: 0.18rem;
  border-radius: var(--radius-full);
  background: var(--accent);
  margin: 1.35rem auto;
}

.bio {
  width: min(100%, 34rem);
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.08rem;
}

.socials-section {
  margin-top: 2.5rem;
}

.section-title {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}

.social-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(34, 34, 34, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(34, 34, 34, 0.05);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(204, 0, 0, 0.28);
  color: var(--accent);
  box-shadow: 0 16px 28px rgba(34, 34, 34, 0.08);
}

.social-link .fab,
.social-link .fas {
  font-size: 1.28rem;
  line-height: 1;
}

.links-section {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.4rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid rgba(204, 0, 0, 0.4);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.84);
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.12rem;
  font-weight: 600;
  box-shadow: 0 16px 36px rgba(34, 34, 34, 0.04);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease;
}

.link-button:hover,
.link-button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--accent-dark);
  box-shadow: 0 20px 36px rgba(34, 34, 34, 0.09);
}

.link-button-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #ffffff;
  border-color: transparent;
}

.link-button-primary:hover,
.link-button-primary:focus-visible {
  color: #ffffff;
  background: linear-gradient(180deg, #d00000 0%, var(--accent-dark) 100%);
}

.footer {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(204, 0, 0, 0.28);
  text-align: center;
  color: var(--muted);
  font-size: 0.98rem;
}

.footer p {
  margin: 0.2rem 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -8vh, 0) rotate(0deg) scale(0.8);
  }

  10% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--confetti-drift, 1.5rem), 92vh, 0) rotate(var(--confetti-rotate, 540deg)) scale(1);
  }
}

.social-link:focus-visible,
.link-button:focus-visible {
  outline: 0.18rem solid rgba(204, 0, 0, 0.22);
  outline-offset: 0.18rem;
}

@media (min-width: 48rem) {
  .page {
    width: min(100% - 2.5rem, 56rem);
    padding: 2.5rem 0;
  }

  .bio-card {
    padding: 3rem;
  }

  .hero {
    gap: 1.75rem;
  }

  .social-list {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confetti {
    display: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}