/* Общие стили — фон, шрифты, заголовки */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap");

@font-face {
  font-family: "Classy Vogue";
  src: url("../fonts/Classyvogueregular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #e63b3b;
  --work-shadow-gradient: linear-gradient(
    145deg,
    #ff8a8a 0%,
    #e63b3b 38%,
    #b01818 72%,
    #6b0a0a 100%
  );
  --black: #1c1c1c;
  --nav-gray: #3a3a3a;
  --white: #ffffff;
  --paper-color: #ededeb;
  --paper-image: url("../images/fabric-bg.jpg");
  --font-display: "Classy Vogue", Georgia, serif;
  --font-body: "Montserrat", "Segoe UI", sans-serif;
  --container: 1100px;
  --nav-height: 72px;
}

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

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

body {
  font-family: var(--font-body);
  color: var(--black);
  background-color: var(--paper-color);
  background-image: var(--paper-image);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  line-height: 1.55;
}

/* Intro must not flash fabric-bg before Home paper loads. */
body.is-home-intro {
  background-color: #f4f1ea;
  background-image: url("../images/home-paper-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.home-intro-skipped {
  background-color: var(--paper-color);
  background-image: var(--paper-image);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.container {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 400;
}

.display-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.2rem);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--black);
}

.display-title--hero {
  font-size: clamp(4rem, 14vw, 8.5rem);
  line-height: 0.82;
}