:root {
  --bg: #f7f5f1;
  --text: #111111;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, sans-serif;
}

.page {
  width: min(1440px, 100%);
  min-height: 100vh;

  margin: 0 auto;
  padding: 160px 80px 80px;

  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
}
.logo {
  grid-column: 2 / span 8;

  font-family: Baskerville, serif;
  font-size: clamp(60px, 9vw, 138px);
  font-weight: 400;

  transform: translateX(400px);
  margin-bottom: 180px;
}

.method {
  grid-column: 1 / span 4;

  font-family: Baskerville, serif;
  font-size: clamp(40px, 5vw, 74px);
  line-height: 1.45;

  margin-bottom: 240px;
}

.description {
  grid-column: 2 / span 6;

  font-size: clamp(24px, 2.7vw, 40px);
  line-height: 1.25;

  margin-bottom: 320px;
}

.contact {
  grid-column: 2 / span 2;

  display: flex;
  flex-direction: column;
  gap: 12px;

  font-size: 25px;

  margin-bottom: 180px;
}

.contact a {
  color: inherit;
}

.email {
  text-decoration: none;
}

.social {
  text-decoration: underline;
}

.edition {
  grid-column: 1 / span 3;

  font-size: 14px;
  line-height: 1.3;
  color: #666666;
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 768px) {

  .page {
    padding: 90px 40px 70px;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 0;
  }

  .logo,
  .method,
  .description,
  .contact,
  .edition {
    grid-column: 1 / -1;
  }

  .logo {
    font-size: clamp(52px, 14vw, 72px);
    white-space: nowrap;
    margin-bottom: 120px;
  }

  .method {
    font-size: 54px;
    line-height: 1.2;
    margin-bottom: 140px;
  }

  .description {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 120px;
  }

  .contact {
    font-size: 22px;
    margin-bottom: 120px;
  }

  .edition {
    font-size: 14px;
    line-height: 1.3;
  }
}