:root {
  --ink: #352820;
  --ink-muted: #7c6658;
  --bronze: #8e6a50;
  --bronze-dark: #654936;
  --cream: #f5ede6;
  --cream-deep: #e8d8cc;
  --glass: rgba(255, 252, 248, 0.68);
  --line: rgba(102, 75, 56, 0.16);
  --shadow: 0 22px 70px rgba(79, 51, 33, 0.14);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #eadbd0;
}

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 4%, rgba(255,255,255,.92), transparent 34%),
    linear-gradient(155deg, #f4ebe4 0%, #ead9cd 50%, #dfcbbd 100%);
  font-family: "Noto Kufi Arabic", "Geeza Pro", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.ambient-one {
  top: -12rem;
  left: -9rem;
  border: 1px solid rgba(110, 79, 58, .14);
  box-shadow: inset 0 0 0 4.5rem rgba(255,255,255,.12);
}

.ambient-two {
  right: -15rem;
  bottom: -13rem;
  border: 1px solid rgba(110, 79, 58, .12);
  box-shadow: inset 0 0 0 6.5rem rgba(255,255,255,.1);
}

.page-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(2rem, env(safe-area-inset-top)) 1rem max(1.75rem, env(safe-area-inset-bottom));
}

.profile {
  width: min(100%, 28rem);
  text-align: center;
}

.logo-wrap {
  position: relative;
  width: 8.75rem;
  aspect-ratio: 1;
  margin: 0 auto 1.1rem;
}

.logo-halo {
  position: absolute;
  inset: -.6rem;
  border: 1px solid rgba(104, 72, 51, .19);
  border-radius: 50%;
  animation: breathe 5s ease-in-out infinite;
}

.logo-halo::after {
  position: absolute;
  inset: .25rem;
  border: 1px dashed rgba(104, 72, 51, .13);
  border-radius: inherit;
  content: "";
}

.profile-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: .32rem solid rgba(255,255,255,.66);
  border-radius: 50%;
  box-shadow: 0 15px 42px rgba(70, 46, 31, .22), 0 2px 10px rgba(70, 46, 31, .12);
}

.camera-dot {
  position: absolute;
  right: .2rem;
  bottom: .55rem;
  width: 1.15rem;
  height: 1.15rem;
  border: 3px solid var(--cream);
  border-radius: 50%;
  background: linear-gradient(145deg, #b99376, #6f4d38);
  box-shadow: 0 4px 12px rgba(75, 48, 30, .22);
}

.identity { margin-bottom: 1.7rem; }

.eyebrow {
  margin: 0 0 .45rem;
  color: var(--bronze);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .38em;
}

h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .2rem .5rem;
  margin: 0;
  font-family: Georgia, "Times New Roman", "Geeza Pro", serif;
  font-size: clamp(1.72rem, 7vw, 2.15rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.025em;
}

h1 span:first-child { color: var(--bronze-dark); }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin-top: .55rem;
  color: #a7846b;
  font-size: .58rem;
}

.ornament i {
  width: 2.3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(113, 78, 54, .42));
}

.ornament i:last-child { transform: scaleX(-1); }

.social-links {
  display: grid;
  gap: .72rem;
}

.social-card {
  --accent: #7b5d48;
  position: relative;
  display: grid;
  grid-template-columns: 2.85rem 1fr 2rem;
  align-items: center;
  min-height: 4.85rem;
  padding: .7rem .82rem .7rem .75rem;
  overflow: hidden;
  color: var(--ink);
  text-align: right;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--glass);
  box-shadow: 0 8px 28px rgba(75, 49, 32, .07), inset 0 1px rgba(255,255,255,.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.social-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: .2rem;
  border-radius: inherit;
  background: var(--accent);
  content: "";
  opacity: .72;
  transition: width .25s ease, opacity .25s ease;
}

.social-card:hover,
.social-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(99, 68, 48, .27);
  background: rgba(255, 253, 250, .86);
  box-shadow: 0 16px 36px rgba(75, 49, 32, .12), inset 0 1px rgba(255,255,255,.9);
  outline: none;
}

.social-card.is-pressed { transform: translateY(0) scale(.985); }

.social-card:hover::before,
.social-card:focus-visible::before { width: .28rem; opacity: 1; }

.instagram { --accent: linear-gradient(180deg, #a8508f, #dc7956); }
.tiktok { --accent: #24201e; }
.snapchat { --accent: #d2ae24; }

.icon-box {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  color: #614837;
  border: 1px solid rgba(105, 76, 56, .12);
  border-radius: .9rem;
  background: rgba(247, 238, 230, .8);
}

.icon-box svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.icon-box .solid { fill: currentColor; stroke: none; }
.snapchat .icon-box svg { fill: none; stroke-width: 1.45; }
.tiktok .icon-box svg { stroke-width: 1.8; }

.link-copy {
  display: grid;
  gap: .12rem;
  padding-inline: .9rem;
}

.link-copy strong {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.link-copy small {
  color: var(--ink-muted);
  font-size: .77rem;
  font-weight: 500;
  letter-spacing: .035em;
}

.arrow {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--bronze);
  border-radius: 50%;
  transition: transform .25s ease, background-color .25s ease;
}

.arrow svg {
  width: 1.08rem;
  height: 1.08rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-card:hover .arrow,
.social-card:focus-visible .arrow {
  transform: translate(2px, -2px);
  background: rgba(126, 92, 68, .09);
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .62rem;
  margin-top: 1.35rem;
  color: rgba(83, 60, 45, .55);
}

footer p {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}

footer span { font-size: .42rem; }

.reveal {
  opacity: 0;
  transform: translateY(12px);
}

.is-ready .reveal {
  animation: reveal .62s cubic-bezier(.22,.8,.24,1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.025); opacity: 1; }
}

@media (min-width: 700px) {
  .page-shell { padding-block: 3rem; }
  .profile { width: min(100%, 29.5rem); }
  .logo-wrap { width: 9.5rem; }
  .social-card { min-height: 5.05rem; }
}

@media (max-height: 690px) {
  .page-shell { padding-block: 1.2rem; }
  .logo-wrap { width: 7rem; margin-bottom: .75rem; }
  .identity { margin-bottom: 1.05rem; }
  .eyebrow { margin-bottom: .25rem; }
  .ornament { margin-top: .3rem; }
  .social-card { min-height: 4.25rem; }
  footer { margin-top: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}