:root {
  --bg: #ead9c3;
  --bg-soft: #f3e5d2;
  --ink: #a67362;
  --ink-soft: #b58775;
  --line: rgba(166, 115, 98, 0.5);
  --content: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(118deg,
      rgba(255,250,240,.0) 0%,
      rgba(255,250,240,.35) 22%,
      rgba(216,194,170,.18) 38%,
      rgba(255,250,240,.4) 54%,
      rgba(216,194,170,.14) 70%,
      rgba(255,250,240,.3) 86%,
      rgba(216,194,170,.1) 100%),
    radial-gradient(1200px 800px at 95% 0%, rgba(255,248,238,.5), transparent 55%),
    radial-gradient(1100px 700px at 0% 100%, rgba(255,246,234,.45), transparent 58%),
    var(--bg);
  font-family: "Cormorant", Georgia, serif;
  min-height: 100vh;
}

.page-shell {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 56px 64px 46px;
}

.hero {
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.logo-mark {
  width: clamp(250px, 29vw, 420px);
  height: auto;
  display: block;
  mix-blend-mode: darken;
  margin: 0 auto -4px;
}

.wordmark {
  font-size: clamp(72px, 8.3vw, 118px);
  line-height: .84;
  letter-spacing: .075em;
  font-weight: 400;
  margin-left: .075em;
}

.atelier-row {
  width: min(520px, 68vw);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 22px;
}

.line { height: 1px; background: var(--line); }
.atelier {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 18px;
  letter-spacing: .38em;
  font-weight: 300;
  margin-right: -.38em;
}

.tagline {
  margin: 46px 0 26px;
  font-size: clamp(24px, 2.15vw, 31px);
  line-height: 1.2;
  color: var(--ink-soft);
}

.small-rule {
  width: 52px;
  height: 1px;
  background: var(--line);
  display: block;
}

.launch-copy { margin-top: 29px; }
.eyebrow {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: .34em;
  font-weight: 300;
  margin-right: -.34em;
}

.launch-copy h1 {
  margin: 12px 0 0;
  font-size: clamp(50px, 5.2vw, 76px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .11em;
  margin-right: -.11em;
}

.teasers {
  width: min(100%, var(--content));
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.teaser-card { margin: 0; overflow: hidden; aspect-ratio: 1 / 1.18; }
.teaser-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact {
  width: min(100%, var(--content));
  margin: 34px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-title { margin-top: 26px; }
.contact-row {
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 20px;
}

.contact-row a {
  color: var(--ink);
  text-decoration: none;
  transition: opacity .18s ease;
}
.contact-row a:hover { opacity: .65; }
.contact-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ink);
  display: block;
}
.divider { width: 1px; height: 20px; background: var(--line); }

@media (max-width: 720px) {
  .page-shell { padding: 26px 18px 32px; }
  .logo-mark { width: min(68vw, 295px); margin-bottom: 4px; }
  .wordmark { font-size: clamp(50px, 16vw, 72px); }
  .atelier-row { width: min(86vw, 360px); gap: 13px; margin-top: 16px; }
  .atelier { font-size: 13px; letter-spacing: .31em; margin-right: -.31em; }
  .tagline { margin: 30px 8px 22px; font-size: 20px; line-height: 1.25; }
  .desktop-break { display: none; }
  .launch-copy { margin-top: 24px; }
  .eyebrow { font-size: 11px; letter-spacing: .27em; margin-right: -.27em; }
  .launch-copy h1 { font-size: clamp(38px, 12vw, 52px); letter-spacing: .08em; margin-right: -.08em; }
  .teasers {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 24px;
  }
  .teaser-card { aspect-ratio: auto; }
  .teaser-card img { height: auto; object-fit: contain; }
  .contact { margin-top: 30px; }
  .contact-title { margin-top: 22px; }
  .contact-row {
    margin-top: 20px;
    flex-direction: column;
    gap: 12px;
    font-size: 17px;
  }
  .icon { width: 13px; height: 13px; }
  .divider { display: none; }
}