@charset "UTF-8";

:root {
  color-scheme: light;
  --ink: #dedfdd;
  --ink-soft: #d4d5d2;
  --paper: #2b2c2b;
  --muted: #686a68;
  --line: rgba(48, 50, 49, 0.16);
  --coral: #ad6857;
  --coral-dim: rgba(173, 104, 87, 0.14);
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  position: relative;
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(ellipse at 79% 20%, rgba(173, 104, 87, 0.045), transparent 32rem),
    radial-gradient(ellipse at 13% 55%, rgba(111, 117, 116, 0.12), transparent 34rem),
    var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  line-height: 1.7;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: min(40vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(83, 90, 87, 0.16);
  box-shadow: 0 0 0 34px rgba(83, 90, 87, 0.035), 0 0 0 76px rgba(83, 90, 87, 0.02);
  pointer-events: none;
}
body::before {
  top: -18vw;
  right: -15vw;
  background: radial-gradient(circle, rgba(105, 112, 108, 0.16), rgba(105, 112, 108, 0.08) 48%, rgba(105, 112, 108, 0.015) 70%, transparent 74%);
}
body::after {
  bottom: -24vw;
  left: -16vw;
  width: min(48vw, 680px);
  border-color: rgba(150, 100, 86, 0.18);
  box-shadow: 0 0 0 34px rgba(150, 100, 86, 0.04), 0 0 0 76px rgba(150, 100, 86, 0.025);
  background: radial-gradient(circle, rgba(173, 104, 87, 0.13), rgba(173, 104, 87, 0.065) 50%, rgba(173, 104, 87, 0.012) 70%, transparent 74%);
}

button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 5px;
}

.site-shell {
  position: relative;
  z-index: 1;
  width: min(1440px, calc(100% - 112px));
  margin-inline: auto;
}

.site-header {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.wordmark-mark {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--coral);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
}

.social-nav { display: flex; align-items: center; gap: 34px; }
.social-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  transition: color 180ms ease;
}
.social-nav a:hover { color: var(--coral); }
.social-icon { display: block; width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; }
.x-icon { width: 14px; height: 14px; }

.hero {
  position: relative;
  display: grid;
  min-height: min(780px, calc(100svh - 92px));
  grid-template-columns: 0.93fr 1.07fr;
  align-items: center;
  padding-block: 72px 108px;
}

.hero-copy { position: relative; z-index: 2; padding-inline-start: 8%; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 13px;
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 18px var(--coral); }

h1, p { margin-top: 0; }
h1 {
  margin-bottom: 24px;
  font-size: clamp(70px, 8.5vw, 132px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.085em;
}
h1 span { color: var(--paper); -webkit-text-stroke: 0; }
.hero-intro { max-width: 390px; margin: 0; color: var(--muted); font-size: 16px; line-height: 2; }

.hero-art { position: relative; height: 690px; isolation: isolate; }
.hero-orbit { position: absolute; display: block; border: 1px solid rgba(223, 128, 103, 0.24); border-radius: 50%; pointer-events: none; }
.hero-orbit-one { width: 430px; height: 430px; top: 77px; left: 70px; }
.hero-orbit-two { width: 545px; height: 545px; top: 20px; left: 14px; border-color: rgba(48, 50, 49, 0.09); }
.hero-spark { position: absolute; z-index: 2; color: var(--coral); font-family: var(--serif); }
.hero-spark-one { top: 125px; left: 49%; font-size: 30px; animation: twinkle 5s ease-in-out infinite; }
.hero-spark-four { top: 280px; right: 3%; font-size: 15px; animation: twinkle 6.4s ease-in-out infinite; }
.hero-spark-seven { top: 40%; left: 96%; font-size: 12px; animation: twinkle 5.5s ease-in-out infinite reverse; }
.hero-spark-ten { top: 87%; left: 92%; font-size: 17px; animation: twinkle 5.9s ease-in-out infinite; }
.hero-spark-fourteen { top: 34%; left: 98%; font-size: 16px; animation: twinkle 5.4s ease-in-out infinite; }

.art-card {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}
.art-card::after { display: none; }
.art-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-card {
  position: absolute;
  width: min(330px, 54%);
  aspect-ratio: 1.5;
  border-radius: 3px;
  transform: translate3d(var(--pointer-x, 0), var(--pointer-y, 0), 0);
  transition: transform 350ms ease-out;
}
.hero-card-back {
  z-index: 1;
  top: 18px;
  left: 5%;
  width: min(280px, 38%);
  rotate: -7deg;
  animation: drift-back 8s ease-in-out infinite;
}
.hero-card-front {
  z-index: 2;
  top: 34px;
  left: 58%;
  width: min(280px, 38%);
  aspect-ratio: 1.5;
  rotate: 6deg;
  animation: drift-front 7s ease-in-out infinite;
}
.art-card img { filter: brightness(var(--art-exposure, 1)) contrast(0.95) saturate(0.84); transition: filter 400ms ease; }
.hero-card-back img { --art-exposure: 1.06; }
.hero-card-front img { --art-exposure: 1.12; object-position: 48% center; }
.hero-card-three { z-index: 3; top: 350px; left: 0; width: min(250px, 34%); rotate: -4deg; animation: drift-third 8.2s ease-in-out infinite; }
.hero-card-four { z-index: 5; top: 165px; left: 31%; width: min(230px, 37%); aspect-ratio: 0.72; rotate: 3deg; animation: drift-fourth 8s ease-in-out infinite; }
.hero-card-five { z-index: 3; top: 365px; left: 65%; width: min(250px, 34%); rotate: 4deg; animation: drift-fifth 9.1s ease-in-out infinite; }
.hero-card-three img { --art-exposure: 1.04; }
.hero-card-four img { --art-exposure: 1.06; }
.hero-card-five img { --art-exposure: 1.1; }

@keyframes drift-front { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes drift-back { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes drift-third { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes drift-fourth { 0%, 100% { translate: 0 0; } 50% { translate: 0 12px; } }
@keyframes drift-fifth { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }
@keyframes twinkle { 0%, 100% { opacity: .45; scale: .9; } 50% { opacity: 1; scale: 1.12; } }

@media (min-width: 1500px) {
  .hero { min-height: 790px; }
  .hero-art { height: 730px; }
  .hero-card-back, .hero-card-front { width: 310px; }
  .hero-card-back { left: 8%; }
  .hero-card-front { left: 56%; }
}

@media (max-width: 900px) {
  .site-shell { width: min(100% - 56px, 720px); }
  .hero { min-height: auto; grid-template-columns: 1fr 1fr; padding-block: 58px 86px; }
  .hero-copy { padding-inline-start: 0; }
  h1 { font-size: clamp(68px, 11vw, 102px); }
  .hero-art { height: 610px; }
  .hero-orbit-one { width: 330px; height: 330px; top: 76px; left: 4%; }
  .hero-orbit-two { width: 410px; height: 410px; top: 35px; left: -7%; }
  .hero-card { width: 64%; }
  .hero-card-back { top: 18px; left: 1%; width: 44%; }
  .hero-card-front { top: 28px; left: 55%; width: 43%; }
  .hero-card-three { top: 335px; left: 0; width: 39%; }
  .hero-card-four { top: 175px; left: 30%; width: 40%; }
  .hero-card-five { top: 355px; left: 61%; width: 38%; }
}

@media (max-width: 600px) {
  body::before { top: -15vw; right: -28vw; width: 66vw; }
  body::after { bottom: -26vw; left: -28vw; width: 78vw; }
  .site-shell { width: calc(100% - 36px); }
  .site-header { min-height: 72px; }
  .wordmark { gap: 8px; font-size: 14px; }
  .wordmark-mark { width: 30px; height: 30px; font-size: 15px; }
  .social-nav { gap: 15px; }
  .social-nav a { font-size: 11px; }

  .hero { display: flex; flex-direction: column; align-items: stretch; padding-block: 56px 67px; }
  .hero-copy { align-self: flex-start; }
  .eyebrow { margin-bottom: 14px; font-size: 11px; }
  h1 { margin-bottom: 13px; font-size: clamp(68px, 18vw, 96px); line-height: 1.09; }
  .hero-intro { max-width: 100%; font-size: 13px; line-height: 1.9; }
  .hero-art { width: 100%; height: 560px; margin-top: 52px; }
  .hero-orbit-one { width: 270px; height: 270px; top: 56px; left: calc(50% - 135px); }
  .hero-orbit-two { width: 340px; height: 340px; top: 21px; left: calc(50% - 170px); }
  .hero-card { width: min(58%, 220px); }
  .hero-card-back { top: 8px; left: 0; width: 54%; }
  .hero-card-front { top: 8px; left: 51%; width: 48%; }
  .hero-card-three { top: 235px; left: 0; width: 47%; }
  .hero-card-four { top: 125px; left: 33%; width: min(38%, 142px); }
  .hero-card-five { top: 260px; left: 52%; width: 47%; }
  .hero-spark-one { top: auto; bottom: 108px; left: 8%; font-size: 25px; }
  .hero-spark-four { top: auto; right: 14%; bottom: 110px; font-size: 14px; }
  .hero-spark-seven { top: auto; bottom: 94px; left: 90%; }
  .hero-spark-ten { top: auto; bottom: 115px; left: 77%; }
  .hero-spark-fourteen { top: auto; bottom: 20px; left: 67%; }
}

@media (max-width: 360px) {
  .site-shell { width: calc(100% - 28px); }
  .social-nav { gap: 10px; }
  .hero-art { height: 530px; }
  .hero-spark-four { bottom: 45px; }
  .hero-card-back { width: 54%; }
  .hero-card-front { width: 48%; }
  .hero-card-four { left: 33%; width: 38%; }
  .hero-card-five { top: 270px; }
  .hero-orbit-two { width: 290px; height: 290px; left: calc(50% - 145px); }
}

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