@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/open-sans-condensed-light.ttf") format("truetype");
}

@font-face {
  font-family: "Bad Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/bad-script-latin.woff2") format("woff2");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: #292929;
  background: #f3f3f3 url("assets/pattern.jpg") repeat;
  background-size: 960px 960px;
  font-family: "Open Sans Condensed", "Arial Narrow", sans-serif;
  font-weight: 300;
}

.page {
  min-height: 100svh;
  padding: clamp(90px, 14.45vw, 278px) 24px 150px;
}

.composition {
  position: relative;
  width: min(100%, 960px);
  margin-inline: auto;
  isolation: isolate;
}

.brand {
  position: relative;
  z-index: 2;
  width: 408px;
  max-width: 48%;
  margin: 0 auto;
  line-height: 0;
}

.brand img { display: block; width: 100%; height: auto; }

.ceramic { position: absolute; height: auto; pointer-events: none; }
.ceramic--fruit { width: 360px; top: 205px; left: 22px; z-index: 1; }
.ceramic--cup { width: 280px; top: -65px; right: 73px; z-index: 1; }
.ceramic--botanical { width: 270px; top: 370px; right: -20px; z-index: 1; }

.intro {
  position: relative;
  z-index: 3;
  margin-top: 35px;
  text-align: center;
  font-size: 28px;
  line-height: 1.42;
}

.intro p { margin: 0; }
.intro .invitation { margin-top: 0; }
.socials { display: flex; justify-content: center; gap: 19px; margin-top: 31px; }

.social {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  color: #171717;
  text-decoration: none;
  font: 400 44px/1 "Bad Script", cursive;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.social--vk { background: #b8c6d2; }
.social--telegram { background: #bdd6d9; }
.social--max { background: #d3d2ea; }
.social:hover { transform: translateY(-5px); box-shadow: 0 8px 20px #30303016; }
.social:focus-visible { outline: 2px solid #383838; outline-offset: 6px; }

@media (min-width: 1921px) {
  .page { padding-top: 278px; }
}

@media (max-width: 1000px) {
  .page { padding-top: 130px; padding-bottom: 85px; }
  .brand { width: 360px; }
  .ceramic--fruit { width: 34%; left: 1%; top: 180px; }
  .ceramic--cup { width: 27%; right: 4%; top: -50px; }
  .ceramic--botanical { width: 28%; right: 1%; top: 240px; }
  .intro { font-size: 26px; }
}

@media (max-width: 640px) {
  body { background-size: 650px 650px; }
  .page { padding: 85px 20px 55px; }
  .brand { width: 280px; max-width: 74%; }
  .ceramic--cup { width: 35%; right: -5px; top: -48px; }
  .ceramic--fruit { width: 40%; left: -12px; top: 140px; }
  .ceramic--botanical { width: 33%; right: -9px; top: 225px; }
  .intro { margin-top: 68px; font-size: 25px; line-height: 1.4; }
  .desktop-break { display: none; }
  .intro .invitation { margin-top: 12px; }
  .socials { gap: 16px; margin-top: 25px; }
  .social { width: 74px; height: 74px; font-size: 39px; }
}

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