/* Journal. Viewport is hero + tabs + featured post. */

.journal-hero {
  padding: 80px 10px;
  background: var(--color-ink);
}

.journal-hero__inner {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
}

.journal-hero__copy,
.journal-hero__lead {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 10px;
}

.journal-hero__copy {
  gap: 30px;
}

.journal-hero__copy .home-kicker__rule {
  width: 4%;
  flex: 0 0 4%;
}

.journal-hero__headlines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journal-hero h1 {
  font-family: var(--font-serif);
  font-size: var(--text-display-size);
  font-weight: 300;
  line-height: var(--text-display-line);
  color: var(--color-cream);
}

.journal-hero__sub {
  font-family: var(--font-serif);
  font-size: var(--text-display-size);
  font-weight: 300;
  font-style: italic;
  line-height: var(--text-display-line);
  color: #f6f1e969;
}

.journal-hero__lead {
  justify-content: flex-end;
}

.journal-hero__lead p {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  color: var(--color-cream-80);
}

.blog-tab {
  display: flex;
  flex-direction: column;
}

.journal-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1px;
  padding-left: 56px;
  background: #fff;
}

.journal-tabs button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 35px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text);
  background: #fff;
  border-bottom: 2px solid #fff;
  cursor: pointer;
}

.journal-tabs button[aria-selected="true"] {
  color: var(--color-near-black);
  border-bottom-color: var(--color-bronze-ink);
}

.journal-featured {
  display: flex;
}

.journal-featured__copy,
.journal-featured__media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
}

.journal-featured__copy {
  gap: 20px;
  padding: 72px 50px 72px 56px;
  background: #232320;
}

.journal-featured__media {
  padding: 72px 56px 72px 50px;
  background: #2e2e2b;
}

.journal-featured__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.journal-featured__cats,
.journal-featured__cats a {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.journal-featured h2 {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 300;
  line-height: 55px;
  color: var(--color-cream);
}

.journal-featured h2 a {
  color: inherit;
}

.journal-featured__excerpt {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 25px;
  color: var(--color-cream-80);
}

@media (max-width: 1024px) {
  .journal-hero {
    min-height: 500px;
    padding: 40px 10px;
  }

  .journal-hero__inner,
  .journal-featured {
    flex-direction: column;
  }

  .journal-hero__copy,
  .journal-hero__lead,
  .journal-featured__copy,
  .journal-featured__media {
    width: 100%;
  }

  .journal-hero__sub {
    font-size: 50px;
    line-height: 60px;
  }

  .journal-tabs {
    padding-left: 20px;
  }

  .journal-featured__copy {
    padding: 40px 10px 40px 20px;
  }

  .journal-featured__media {
    padding: 40px 20px 40px 10px;
  }
}

@media (max-width: 767px) {
  .journal-featured__copy,
  .journal-featured__media {
    padding: 20px;
  }

  .journal-tabs button {
    padding: 12px 16px;
  }
}