/* =========================================
   DABBIES JOURNAL
   CORE STYLES
========================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: #050505;
  color: #fff;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
}


/* =========================================
   HEADER
========================================= */

.journal-header {
  width: 100%;

  padding: 24px 6vw;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);
}


.journal-brand {
  color: #fff;

  text-decoration: none;

  font-size: 20px;
  font-weight: 700;

  letter-spacing: -0.04em;
}


.journal-nav {
  display: flex;
  align-items: center;

  gap: 28px;
}


.journal-nav a {
  color:
    rgba(255, 255, 255, 0.55);

  text-decoration: none;

  font-size: 13px;

  transition:
    color 0.2s ease;
}


.journal-nav a:hover,
.journal-nav a.active {
  color: #fff;
}


/* =========================================
   HERO
========================================= */

.journal-hero {
  max-width: 1100px;

  margin: 0 auto;

  padding:
    120px 6vw
    90px;
}


.journal-eyebrow {
  display: inline-block;

  margin-bottom: 24px;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.16em;

  color:
    rgba(255, 255, 255, 0.45);
}


.journal-hero h1 {
  margin: 0;

  max-width: 850px;

  font-size:
    clamp(48px, 8vw, 104px);

  line-height: 0.95;

  letter-spacing: -0.065em;
}


.journal-hero p {
  max-width: 520px;

  margin: 30px 0 0;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 17px;

  line-height: 1.65;
}


/* =========================================
   FEATURED
========================================= */

.journal-featured {
  padding: 0 6vw;
}


.featured-article {
  max-width: 1100px;

  margin: 0 auto;

  padding: 56px;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.015)
    );
}


.article-meta {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 30px;

  color:
    rgba(255, 255, 255, 0.4);

  font-size: 10px;

  letter-spacing: 0.12em;
}


.featured-article h2 {
  max-width: 760px;

  margin: 0;

  font-size:
    clamp(32px, 5vw, 64px);

  line-height: 1;

  letter-spacing: -0.055em;
}


.featured-article p {
  max-width: 600px;

  margin: 24px 0 0;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 16px;

  line-height: 1.7;
}


.article-link {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-top: 34px;

  color: #fff;

  text-decoration: none;

  font-size: 13px;
  font-weight: 600;
}


.article-link span {
  transition:
    transform 0.2s ease;
}


.article-link:hover span {
  transform: translate(3px, -3px);
}


/* =========================================
   JOURNAL SECTION
========================================= */

.journal-section {
  max-width: 1100px;

  margin: 0 auto;

  padding:
    120px 6vw;
}


.section-heading {
  margin-bottom: 40px;
}


.section-heading > span {
  display: block;

  margin-bottom: 12px;

  color:
    rgba(255, 255, 255, 0.4);

  font-size: 10px;

  letter-spacing: 0.16em;
}


.section-heading h2 {
  margin: 0;

  font-size: 38px;

  letter-spacing: -0.045em;
}


/* =========================================
   ARTICLE GRID
========================================= */

.article-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 16px;
}


.article-card {
  min-height: 330px;

  padding: 28px;

  display: flex;
  flex-direction: column;

  border:
    1px solid rgba(255, 255, 255, 0.09);

  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.025);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}


.article-card:hover {
  transform: translateY(-4px);

  border-color:
    rgba(255, 255, 255, 0.2);

  background:
    rgba(255, 255, 255, 0.04);
}


.article-card-top {
  display: flex;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 55px;

  color:
    rgba(255, 255, 255, 0.35);

  font-size: 9px;

  letter-spacing: 0.12em;
}


.article-card h3 {
  margin: 0;

  font-size: 25px;

  line-height: 1.05;

  letter-spacing: -0.04em;
}


.article-card p {
  margin: 18px 0 0;

  color:
    rgba(255, 255, 255, 0.48);

  font-size: 13px;

  line-height: 1.6;
}


.article-card a {
  margin-top: auto;

  padding-top: 28px;

  color: #fff;

  text-decoration: none;

  font-size: 12px;
  font-weight: 600;
}


.article-card a span {
  margin-left: 5px;
}


/* =========================================
   FOOTER
========================================= */

.journal-footer {
  padding:
    30px 6vw;

  display: flex;
  justify-content: space-between;

  border-top:
    1px solid rgba(255, 255, 255, 0.08);

  color:
    rgba(255, 255, 255, 0.35);

  font-size: 11px;
}


.journal-footer div {
  display: flex;

  gap: 20px;
}


.journal-footer a {
  color:
    rgba(255, 255, 255, 0.4);

  text-decoration: none;
}


.journal-footer a:hover {
  color: #fff;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

  .journal-header {
    padding: 20px;
  }


  .journal-nav {
    gap: 16px;
  }


  .journal-nav a {
    font-size: 11px;
  }


  .journal-hero {
    padding:
      90px 20px
      70px;
  }


  .journal-hero h1 {
    font-size:
      clamp(48px, 15vw, 72px);
  }


  .journal-hero p {
    font-size: 15px;
  }


  .journal-featured {
    padding: 0 20px;
  }


  .featured-article {
    padding: 30px;

    border-radius: 16px;
  }


  .featured-article h2 {
    font-size: 34px;
  }


  .journal-section {
    padding:
      80px 20px;
  }


  .article-grid {
    grid-template-columns: 1fr;
  }


  .article-card {
    min-height: 280px;
  }


  .journal-footer {
    padding: 25px 20px;

    flex-direction: column;

    gap: 18px;
  }

}