:root {
  --ink: #2f2426;
  --muted: #7f7073;
  --paper: #fffaf7;
  --line: rgba(74, 47, 54, 0.15);
  --pink: #e98dab;
  --pink-deep: #bd4c72;
  --pink-mid: #f2b7c8;
  --pink-pale: #fbe1e8;
  --blush: #f7cdd8;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}

body {
  color: var(--ink);
  font-family: "Helvetica Neue", "Avenir Next", Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.page {
  position: relative;
  display: grid;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 48%, rgba(245, 176, 195, 0.14), transparent 29%),
    linear-gradient(135deg, #fffdfa 0%, #fff9f6 53%, #fff5f4 100%);
}

.site-header,
.site-footer {
  position: relative;
  z-index: 5;
  display: grid;
  align-items: center;
  padding-inline: clamp(24px, 4.7vw, 76px);
}

.site-header {
  height: clamp(58px, 5.4vw, 72px);
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-decoration: none;
}

.brand-mark {
  width: 30px;
  overflow: visible;
  fill: var(--pink);
}

.brand-mark circle {
  fill: #fff3f6;
}

.contact-button {
  display: inline-flex;
  height: 40px;
  padding: 0 18px;
  align-items: center;
  border: 1px solid rgba(74, 47, 54, 0.2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
}

.hero {
  display: grid;
  min-height: 0;
  grid-template-columns: 49% 51%;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  padding: clamp(30px, 5vh, 62px) 28px clamp(28px, 4vh, 48px) clamp(24px, 7.5vw, 122px);
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 6% 12%, rgba(233, 141, 171, 0.08), transparent 27%),
    #211a1c;
  color: #fff8f6;
}

.eyebrow {
  margin: 0 0 clamp(19px, 3.3vh, 35px);
  color: var(--pink);
  font-size: clamp(8px, 0.68vw, 10px);
  font-weight: 700;
  letter-spacing: 0.2em;
}

.eyebrow span {
  display: inline-block;
  margin-inline: 9px;
  color: #f8ceda;
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-size: 1.35em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
}

h1 {
  max-width: 730px;
  margin: 0;
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-size: clamp(62px, 6.7vw, 108px);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.86;
}

h1 em {
  display: block;
  color: var(--pink-deep);
  font-weight: 400;
}

.hero-description {
  max-width: 470px;
  margin: clamp(24px, 4.2vh, 46px) 0 0;
  color: rgba(255, 244, 242, 0.64);
  font-size: clamp(13px, 1.03vw, 16px);
  line-height: 1.7;
}

.market-focus {
  display: grid;
  max-width: 510px;
  margin-top: clamp(27px, 5vh, 54px);
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 240, 237, 0.16);
  border-bottom: 1px solid rgba(255, 240, 237, 0.16);
}

.market-focus div {
  display: flex;
  min-width: 0;
  padding: 14px 8px 14px 0;
  flex-direction: column;
  gap: 6px;
}

.market-focus div + div {
  padding-left: 15px;
  border-left: 1px solid rgba(255, 240, 237, 0.16);
}

.market-focus span {
  color: var(--pink);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.market-focus strong {
  color: rgba(255, 248, 246, 0.88);
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-size: clamp(11px, 0.88vw, 14px);
  font-weight: 400;
  white-space: nowrap;
}

.art-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
}

.art-frame {
  position: relative;
  width: min(43vw, 76vh);
  aspect-ratio: 1;
  animation: art-arrive 1.15s cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.type-ring {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center;
  animation: ring-turn 38s linear infinite;
}

.type-ring text {
  fill: rgba(98, 61, 71, 0.68);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4.3px;
}

.outer-disc {
  position: absolute;
  inset: 8.5%;
  padding: 4.2%;
  border: 1px solid rgba(186, 75, 111, 0.17);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.44);
  box-shadow:
    0 28px 75px rgba(139, 64, 87, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  animation: disc-drift 7s ease-in-out infinite;
}

.inner-disc {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.83), transparent 25%),
    linear-gradient(145deg, #fae1e7 2%, #f4c4d1 47%, #eca4b9 100%);
  box-shadow:
    inset 18px 12px 44px rgba(255, 255, 255, 0.5),
    inset -16px -18px 40px rgba(168, 68, 100, 0.09);
}

.inner-disc::before,
.inner-disc::after {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(145, 58, 87, 0.09);
  border-radius: 50%;
  content: "";
}

.inner-disc::before {
  inset: 11%;
}

.inner-disc::after {
  inset: 23%;
}

.disc-label {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 4.5%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(79, 40, 52, 0.53);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.18em;
  transform: translateY(-50%) rotate(-90deg);
}

.disc-label i {
  width: 22px;
  height: 1px;
  background: rgba(79, 40, 52, 0.25);
}

.branch-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 20% 85%;
  animation: branch-breathe 6s ease-in-out infinite;
}

.branch-lines {
  fill: none;
  stroke: rgba(114, 61, 73, 0.64);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.branch-lines path:first-child {
  stroke-width: 3;
}

.petal {
  fill: rgba(255, 247, 248, 0.84);
  stroke: rgba(181, 72, 107, 0.2);
  stroke-width: 0.8;
}

.petal circle {
  fill: var(--pink-deep);
  stroke: none;
}

.falling-petals {
  fill: rgba(255, 243, 246, 0.82);
  stroke: rgba(181, 72, 107, 0.18);
  stroke-width: 0.8;
}

.floating-leaves {
  fill: rgba(175, 98, 119, 0.52);
  stroke: rgba(124, 59, 78, 0.2);
  stroke-width: 0.75;
}

.floating-leaves path {
  transform-box: fill-box;
  transform-origin: center;
  animation: leaf-drift 4.8s ease-in-out infinite;
}

.floating-leaves path:nth-child(2n) {
  fill: rgba(255, 241, 245, 0.72);
  animation-delay: -1.6s;
}

.floating-leaves path:nth-child(3n) {
  animation-delay: -3.1s;
  animation-duration: 6s;
}

.floating-leaves path:nth-child(4n) {
  fill: rgba(190, 86, 121, 0.36);
  animation-delay: -4.2s;
}

.site-footer {
  position: relative;
  height: clamp(48px, 5vw, 66px);
  border-top: 1px solid var(--line);
  background: rgba(255, 250, 247, 0.97);
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: height 650ms cubic-bezier(0.75, 0, 0.2, 1);
}

.site-footer.is-open {
  height: clamp(118px, 14vh, 138px);
}

.contact-details {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 26px clamp(24px, 7.5vw, 122px) 16px;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition:
    opacity 300ms ease 40ms,
    transform 500ms cubic-bezier(0.65, 0, 0.25, 1);
}

.site-footer.is-open .contact-details {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.contact-details > p {
  margin: 0;
  color: var(--pink-deep);
  white-space: nowrap;
}

.contact-links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3.5vw, 55px);
}

.contact-links a {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--ink);
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-size: clamp(14px, 1.25vw, 20px);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-transform: none;
}

.contact-links a span {
  color: var(--muted);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.contact-links i {
  width: 1px;
  height: 40px;
  background: var(--line);
}

.footer-toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(74, 47, 54, 0.16);
  border-radius: 50%;
  background: var(--paper);
  color: var(--pink-deep);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    top 650ms cubic-bezier(0.75, 0, 0.2, 1),
    background 250ms ease;
}

.site-footer.is-open .footer-toggle {
  top: 18px;
}

.footer-flower {
  display: block;
  color: var(--pink-deep);
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1;
  transition: transform 650ms cubic-bezier(0.65, 0, 0.25, 1);
}

.site-footer.is-open .footer-flower {
  transform: rotate(135deg);
}

.footer-toggle:hover {
  background: var(--pink-pale);
}

@keyframes ring-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes art-arrive {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateX(90px) scale(0.72) rotate(-8deg);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1) rotate(0);
  }
}

@keyframes disc-drift {
  50% {
    transform: translateY(-7px);
  }
}

@keyframes branch-breathe {
  50% {
    transform: rotate(1.2deg) scale(1.008);
  }
}

@keyframes leaf-drift {
  0%,
  100% {
    transform: translate(0, 0) rotate(-4deg);
  }

  50% {
    transform: translate(3px, -7px) rotate(7deg);
  }
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 48% 52%;
  }

  .hero-copy {
    padding-left: 43px;
  }

  .art-frame {
    width: min(50vw, 68vh);
  }

  .market-focus div:nth-child(3) {
    display: none;
  }

  .market-focus {
    grid-template-columns: repeat(2, 1fr);
  }

  .market-focus div:nth-child(2) {
    border-right: 1px solid rgba(255, 240, 237, 0.16);
  }
}

@media (max-width: 720px) {
  .page {
    min-height: 580px;
    background:
      radial-gradient(circle at 60% 72%, rgba(245, 176, 195, 0.14), transparent 28%),
      linear-gradient(145deg, #fffdfa, #fff6f5);
  }

  .site-header {
    height: 58px;
    padding-inline: 21px;
  }

  .contact-button {
    height: 36px;
    padding-inline: 14px;
  }

  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .hero-copy {
    padding: 24px 24px 0;
    justify-content: flex-start;
  }

  .eyebrow {
    margin-bottom: 14px;
    font-size: 7px;
  }

  h1 {
    font-size: clamp(48px, 14.2vw, 70px);
    line-height: 0.86;
  }

  .hero-description {
    max-width: 430px;
    margin-top: 17px;
    font-size: 12px;
    line-height: 1.5;
  }

  .market-focus {
    display: none;
  }

  .art-stage {
    margin-top: -4px;
  }

  .art-frame {
    width: min(82vw, 40vh);
  }

  .type-ring text {
    font-size: 8px;
  }

  .site-footer {
    height: 44px;
    padding-inline: 21px;
    font-size: 7px;
  }

  .site-footer.is-open {
    height: 132px;
  }

  .contact-details {
    padding: 29px 24px 10px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
  }

  .contact-links {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .contact-links a {
    font-size: 14px;
  }

  .contact-links i {
    width: 100%;
    height: 1px;
  }
}

@media (max-height: 700px) and (min-width: 721px) {
  .site-header {
    height: 56px;
  }

  .site-footer {
    height: 42px;
  }

  .hero-copy {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .eyebrow {
    margin-bottom: 15px;
  }

  h1 {
    font-size: clamp(52px, 6vw, 78px);
  }

  .hero-description {
    margin-top: 21px;
  }

  .market-focus {
    margin-top: 25px;
  }

  .art-frame {
    width: min(40vw, 68vh);
  }
}

@media (max-height: 700px) and (max-width: 720px) {
  .hero-copy {
    padding-top: 15px;
  }

  .eyebrow {
    margin-bottom: 9px;
  }

  h1 {
    font-size: clamp(42px, 11.8vw, 56px);
  }

  .hero-description {
    margin-top: 11px;
  }

  .art-frame {
    width: min(64vw, 33vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-frame,
  .type-ring,
  .outer-disc,
  .branch-art,
  .floating-leaves path {
    animation: none;
  }

  .site-footer,
  .contact-details,
  .footer-toggle,
  .footer-flower {
    transition: none;
  }
}