/* Beauty Secret Journal Landing */

.bs-journal-landing {
  --cream: #FAF7F2;
  --beige: #F0EAE0;
  --beige-mid: #E2D9CC;
  --brown: #5C4A38;
  --brown-dark: #3A2E22;
  --gold: #A8894A;
  --gold-light: #C9A96E;
  --muted: #8A7A6A;
  --text: #3A2E22;
  --rule: rgba(168,137,74,.28);
  --ff-serif: 'Cormorant Garamond', Georgia, serif;
  --ff-sans: 'Jost', Arial, sans-serif;
  --max: 1040px;
  width: 100%;
  background: var(--cream);
  color: var(--text);
  overflow: hidden;
}

.bs-journal-landing,
.bs-journal-landing * {
  box-sizing: border-box;
}

.bs-journal-landing a {
  color: inherit;
  text-decoration: none;
}

.bs-journal-landing img {
  display: block;
  width: 100%;
  height: auto;
}

.bs-journal-landing__wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.bs-journal-landing__intro {
  padding: 7rem 0 4.5rem;
  background: var(--cream);
}

.bs-journal-landing__eyebrow,
.bs-journal-card__date,
.bs-journal-card__more {
  display: block;
  font-family: var(--ff-sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.bs-journal-landing__eyebrow {
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.bs-journal-landing h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--ff-serif);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--brown-dark);
}

.bs-journal-landing__page-text {
  max-width: 620px;
  margin-top: 2rem;
  font-family: var(--ff-serif);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.9;
  color: var(--muted);
}

.bs-journal-landing__posts {
  padding: 5rem 0 7rem;
}

.bs-journal-hero-post {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--beige);
}

.bs-journal-hero-post__link {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 520px;
}

.bs-journal-hero-post__image {
  min-height: 520px;
  overflow: hidden;
  background: var(--beige-mid);
}

.bs-journal-hero-post__image img {
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  filter: sepia(6%) saturate(88%);
  transition: transform .7s ease;
}

.bs-journal-hero-post:hover .bs-journal-hero-post__image img {
  transform: scale(1.035);
}

.bs-journal-hero-post__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.5rem 4rem;
}

.bs-journal-hero-post .bs-journal-card__date {
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.bs-journal-hero-post h1 {
  max-width: 780px;
  margin: 0 0 1.5rem;
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--brown-dark);
}

.bs-journal-hero-post p {
  max-width: 620px;
  margin: 0 0 2.25rem;
  font-family: var(--ff-serif);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.9;
  color: var(--text);
}

.bs-journal-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  margin-top: 3.5rem;
  background: var(--beige-mid);
  border: 1.5px solid var(--beige-mid);
}

.bs-journal-card {
  min-height: 280px;
  background: var(--cream);
  transition: background .25s;
}

.bs-journal-card:hover {
  background: #fff;
}

.bs-journal-card__link {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.bs-journal-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--beige-mid);
}

.bs-journal-card__image img {
  height: 100%;
  object-fit: cover;
  filter: sepia(6%) saturate(88%);
  transition: transform .7s ease;
}

.bs-journal-card:hover .bs-journal-card__image img {
  transform: scale(1.04);
}

.bs-journal-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 2rem 1.75rem;
}

.bs-journal-card__date {
  color: var(--gold);
  margin-bottom: 1rem;
}

.bs-journal-card h2 {
  margin: 0 0 1rem;
  font-family: var(--ff-serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 300;
  line-height: 1.24;
  color: var(--brown-dark);
}

.bs-journal-card p {
  margin: 0 0 1.75rem;
  font-family: var(--ff-serif);
  font-size: .95rem;
  line-height: 1.75;
  color: var(--muted);
}

.bs-journal-card__more {
  margin-top: auto;
  color: var(--brown-dark);
}

.bs-journal-card__more::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  margin-top: .7rem;
  background: var(--gold);
  transition: width .3s ease;
}

.bs-journal-hero-post:hover .bs-journal-card__more::after,
.bs-journal-card:hover .bs-journal-card__more::after {
  width: 48px;
}

@media (max-width: 960px) {
  .bs-journal-landing__intro {
    padding: 5rem 0 3.5rem;
  }

  .bs-journal-landing__posts {
    padding-top: 3.5rem;
  }

  .bs-journal-hero-post__link {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .bs-journal-hero-post__image,
  .bs-journal-hero-post__image img {
    min-height: 0;
  }

  .bs-journal-hero-post__image {
    aspect-ratio: 16 / 10;
  }

  .bs-journal-hero-post__image img {
    height: 100%;
  }

  .bs-journal-hero-post__body {
    padding: 3.5rem 2.5rem;
  }

  .bs-journal-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .bs-journal-landing__wrap {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .bs-journal-landing__intro {
    padding: 4rem 0 3rem;
  }

  .bs-journal-landing h1 {
    font-size: 2.6rem;
  }

  .bs-journal-landing__posts {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
  }

  .bs-journal-hero-post__body {
    padding: 3rem 1.5rem;
  }

  .bs-journal-card-grid {
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
  }

  .bs-journal-card {
    min-height: 0;
  }
}