:root {
  --article-ink: #000000;
  --article-width: 620px;
}

.blog-article-page main {
  color: var(--article-ink);
}

.article-hero {
  width: 100%;
  height: clamp(245px, 33vw, 530px);
  display: block;
  object-fit: cover;
  object-position: center 48%;
}

.article {
  width: min(var(--article-width), calc(100% - 48px));
  margin: 0 auto;
  padding: 56px 0 80px;
}

.article-header {
  text-align: center;
}

.article-meta {
  margin: 0 0 15px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
}

.article-meta span {
  padding: 0 5px;
}

.article-header h1 {
  margin: 0;
  font-family: 'Forum', serif;
  font-size: clamp(38px, 3.7vw, 54px);
  font-weight: 400;
  line-height: 1.08;
}

.article-rule {
  width: 52px;
  height: 2px;
  display: block;
  margin: 24px auto 58px;
  background: currentColor;
}

.article-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.75;
}

.article-body p {
  margin: 0 0 25px;
}

.article-body section {
  margin-top: 29px;
}

.article-body h2 {
  margin: 0 0 23px;
  font-family: 'Forum', serif;
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.15;
}

.article-navigation {
  display: flex;
  justify-content: center;
  margin-top: 66px;
}

.article-navigation .site-button {
  min-width: 190px;
}

.article-intro--split {
  min-height: 495px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  background: #f1eae2;
}

.article-intro__content {
  width: min(100%, 430px);
  align-self: center;
  justify-self: end;
  padding: 58px 68px 58px 24px;
}

.article-intro__content h1 {
  margin: 0;
  font-family: 'Forum', serif;
  font-size: clamp(40px, 3.7vw, 54px);
  font-weight: 400;
  line-height: 1.08;
}

.article-intro__content .article-rule {
  margin: 26px 0 37px;
}

.article-intro__content > p:not(.article-meta) {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.article-main-image {
  width: 100%;
  height: 100%;
  min-height: 495px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.editorial-article {
  width: min(980px, calc(100% - 64px));
  margin: 0 auto;
  padding: 64px 0 0;
}

.editorial-opening {
  margin: 0 auto 66px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
}

.editorial-opening p {
  margin: 0;
}

.editorial-sections {
  display: grid;
}

.editorial-row {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: 50px;
  padding: 0 0 48px;
  border-bottom: 1px solid #d7d2cd;
}

.editorial-row + .editorial-row {
  padding-top: 42px;
}

.editorial-row:last-child {
  padding-bottom: 54px;
  border-bottom: 0;
}

.editorial-row--image-first {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.editorial-copy h2 {
  margin: 0;
  font-family: 'Forum', serif;
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.15;
}

.editorial-rule {
  width: 29px;
  height: 2px;
  display: block;
  margin: 19px 0 27px;
  background: currentColor;
}

.editorial-copy p {
  margin: 0 0 23px;
  font-size: 14px;
  line-height: 1.7;
}

.editorial-copy p:last-child {
  margin-bottom: 0;
}

.editorial-image {
  width: 100%;
  aspect-ratio: 1.45 / 1;
  display: block;
  object-fit: cover;
  object-position: center;
}

.color-swatches {
  display: flex;
  gap: 12px;
  margin: -5px 0 25px;
}

.color-swatches span {
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 50%;
  background: #f1ede5;
}

.color-swatches span:nth-child(2) { background: #d8cdbf; }
.color-swatches span:nth-child(3) { background: #b9b8ad; }
.color-swatches span:nth-child(4) { background: #929ea3; }
.color-swatches span:nth-child(5) { background: #956848; }

.article-cta {
  padding: 48px 24px 52px;
  background: #f1eae2;
  text-align: center;
}

.article-cta h2 {
  margin: 0;
  font-family: 'Forum', serif;
  font-size: clamp(38px, 3.5vw, 50px);
  font-weight: 400;
  line-height: 1.1;
}

.article-cta .article-rule {
  margin: 25px auto 27px;
}

.article-cta p {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.7;
}

.article-cta .site-button {
  min-width: 190px;
}

.article-hero--event {
  object-position: center 43%;
}

.gallery-article {
  width: min(1000px, calc(100% - 64px));
  margin: 0 auto;
  padding: 56px 0 80px;
}

.gallery-article__header .article-rule {
  margin-bottom: 57px;
}

.article-photo-row,
.article-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.article-photo-row img,
.article-gallery img {
  width: 100%;
  aspect-ratio: 1.26 / 1;
  display: block;
  object-fit: cover;
  object-position: center;
}

.gallery-article__body {
  width: min(var(--article-width), 100%);
  margin: 66px auto 0;
  font-size: 14px;
  line-height: 1.75;
}

.gallery-article__body p {
  margin: 0 0 25px;
}

.gallery-article__body p:last-child {
  margin-bottom: 0;
}

.gallery-article__body h2 {
  margin: 0 0 25px;
  font-family: 'Forum', serif;
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.15;
}

.article-feature-image {
  width: min(620px, 100%);
  aspect-ratio: 1.26 / 1;
  display: block;
  margin: 58px auto 0;
  object-fit: cover;
  object-position: center;
}

.article-feature-image + .gallery-article__body {
  margin-top: 46px;
}

.article-gallery {
  margin-top: 62px;
  row-gap: 16px;
}

.article-gallery-navigation {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.article-gallery-navigation .site-button {
  min-width: 190px;
}

@media (max-width: 800px) {
  .article-intro--split {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .article-intro__content {
    width: min(100% - 40px, 620px);
    justify-self: center;
    padding: 48px 0;
  }

  .article-main-image {
    min-height: 0;
    aspect-ratio: 1.5 / 1;
  }

  .editorial-row,
  .editorial-row--image-first {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .editorial-row--image-first .editorial-image {
    order: 2;
  }

  .article-photo-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-photo-row img:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 8px);
    justify-self: center;
  }

  .article-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .article-hero {
    height: clamp(220px, 67vw, 340px);
  }

  .article {
    width: min(100% - 40px, var(--article-width));
    padding: 44px 0 64px;
  }

  .article-rule {
    margin-bottom: 44px;
  }

  .article-body {
    font-size: 15px;
    line-height: 1.75;
  }

  .article-body p {
    margin-bottom: 23px;
  }

  .article-body section {
    margin-top: 34px;
  }

  .article-navigation {
    margin-top: 52px;
  }

  .editorial-article {
    width: min(100% - 40px, 980px);
    padding-top: 48px;
  }

  .editorial-opening {
    margin-bottom: 50px;
    font-size: 15px;
  }

  .editorial-row {
    padding-bottom: 42px;
  }

  .editorial-row + .editorial-row {
    padding-top: 38px;
  }

  .editorial-copy p,
  .article-intro__content > p:not(.article-meta),
  .article-cta p {
    font-size: 15px;
  }

  .article-cta {
    padding: 44px 20px 48px;
  }

  .article-cta p br {
    display: none;
  }

  .gallery-article {
    width: min(100% - 40px, 1000px);
    padding: 44px 0 64px;
  }

  .gallery-article__header .article-rule {
    margin-bottom: 44px;
  }

  .gallery-article__body {
    margin-top: 48px;
    font-size: 15px;
  }

  .article-feature-image {
    margin-top: 46px;
  }

  .article-feature-image + .gallery-article__body {
    margin-top: 40px;
  }

  .article-gallery {
    margin-top: 46px;
  }

  .article-gallery-navigation {
    margin-top: 48px;
  }
}

@media (max-width: 420px) {
  .article-photo-row,
  .article-gallery {
    grid-template-columns: 1fr;
  }

  .article-photo-row img:last-child {
    grid-column: auto;
    width: 100%;
  }
}