/* =========================================================
   ECHO WEEKLY
   ========================================================= */


/* ==================== VARIABLES ==================== */

:root {

  --color-background: #FAF9F7;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F3F1ED;

  --color-text: #111111;
  --color-text-light: #666666;
  --color-text-muted: #8B8882;

  --color-border: #E7E1D8;
  --color-border-light: #EEECE8;

  --color-accent: #C9A96E;

  --font-heading: "Cormorant Garamond", serif;
  --font-body: "Inter", sans-serif;

  --fs-display: clamp(4rem, 7vw, 7rem);
  --fs-h1: clamp(3rem, 5vw, 4.8rem);
  --fs-h2: clamp(2.3rem, 4vw, 3.4rem);
  --fs-h3: 1.7rem;
  --fs-body-lg: 1.15rem;
  --fs-body: 1rem;
  --fs-small: .82rem;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --header-height: 88px;
  --container: 1240px;

  --transition: .45s cubic-bezier(.22,.61,.36,1);

}


/* ==================== DARK MODE ==================== */

body.dark-mode {

  --color-background: #111111;
  --color-surface: #171717;
  --color-surface-soft: #202020;

  --color-text: #F7F5F0;
  --color-text-light: #B8B5AF;
  --color-text-muted: #8D8982;

  --color-border: #303030;
  --color-border-light: #272727;

}


/* ==================== RESET ==================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {

  background: var(--color-background);
  color: var(--color-text);

  font-family: var(--font-body);
  font-size: var(--fs-body);

  line-height: 1.75;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  transition:
    background-color .3s ease,
    color .3s ease;

}


/* MAIN SITE HEADING SYSTEM */

h1,
h2,
h3,
h4 {

  font-family: var(--font-heading);

  font-weight: var(--fw-medium);

  line-height: 1.05;

  letter-spacing: -.4px;

}


p {
  color: var(--color-text-light);
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input,
textarea {
  font-family: inherit;
}


img {
  display: block;
  width: 100%;
}


ul {
  list-style: none;
}


/* ==================== CONTAINER ==================== */

.container {

  width: min(92%, var(--container));

  margin-inline: auto;

}


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

.header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  height: var(--header-height);

  z-index: 1000;

  background:
    color-mix(
      in srgb,
      var(--color-background) 92%,
      transparent
    );

  backdrop-filter: blur(18px);

  border-bottom:
    1px solid var(--color-border);

}


.header__inner {

  width: min(92%, var(--container));

  height: 100%;

  margin-inline: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


/* ==================== LOGO ==================== */

.logo {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
}

/* ==================== NAVIGATION ==================== */

.navbar__menu {

  display: flex;

  align-items: center;

  gap: 2rem;

}


.navbar__link {

  position: relative;

  color: var(--color-text-muted);

  font-family: var(--font-body);

  font-size: .73rem;

  font-weight: var(--fw-medium);

  letter-spacing: 1.1px;

  text-transform: uppercase;

  transition: var(--transition);

}


.navbar__link::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 1px;

  background: var(--color-accent);

  transition: width .35s ease;

}


.navbar__link:hover,
.navbar__link.active {

  color: var(--color-text);

}


.navbar__link:hover::after,
.navbar__link.active::after {

  width: 100%;

}


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

.navbar__toggle {

  display: none;

  border: 0;

  background: transparent;

  color: var(--color-text);

  font-size: 1.5rem;

  cursor: pointer;

}


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

.mobile-nav {

  display: none;

}


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

.weekly-hero {

  min-height: 78vh;

  display: flex;

  align-items: flex-end;

  padding-top:
    calc(var(--header-height) + 6rem);

  padding-bottom: 7rem;

  border-bottom:
    1px solid var(--color-border);

}


.weekly-hero__content {

  max-width: 850px;

}


.weekly-hero__eyebrow {

  display: inline-flex;

  align-items: center;

  gap: .7rem;

  margin-bottom: 1.5rem;

  color: var(--color-text-muted);

  font-family: var(--font-body);

  font-size: .72rem;

  font-weight: var(--fw-semibold);

  letter-spacing: 4px;

  text-transform: uppercase;

}


.weekly-hero__eyebrow::before {

  content: "";

  width: 30px;
  height: 1px;

  background: var(--color-accent);

}


.weekly-hero__title {

  margin-bottom: 2rem;

  font-family: var(--font-heading);

  font-size: clamp(4.5rem, 9vw, 9rem);

  font-weight: var(--fw-medium);

  line-height: .86;

  letter-spacing: -2px;

}


.weekly-hero__description {

  max-width: 560px;

  color: var(--color-text-light);

  font-family: var(--font-body);

  font-size: 1rem;

  line-height: 1.75;

}


/* ==================== ARCHIVE ==================== */

.weekly-archive {

  padding: 8rem 0 10rem;

}


/* ==================== SECTION HEADING ==================== */

.section-heading {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 2rem;

  margin-bottom: 4rem;

  padding-bottom: 1.5rem;

  border-bottom:
    1px solid var(--color-border);

}


.section-heading__eyebrow {

  display: block;

  margin-bottom: .5rem;

  color: var(--color-text-muted);

  font-family: var(--font-body);

  font-size: .72rem;

  font-weight: var(--fw-semibold);

  letter-spacing: 4px;

  text-transform: uppercase;

}


.section-heading__title {

  font-family: var(--font-heading);

  font-size: var(--fs-h2);

  font-weight: var(--fw-medium);

  line-height: 1.05;

  letter-spacing: -.5px;

}


.section-heading__count {

  color: var(--color-text-muted);

  font-family: var(--font-body);

  font-size: .72rem;

  font-weight: var(--fw-semibold);

  letter-spacing: 2px;

  white-space: nowrap;

}


/* ==================== WEEKLY ITEM ==================== */

.weekly-item {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  min-height: 540px;

  background: var(--color-surface);

  border:
    1px solid var(--color-border);

  overflow: hidden;

}


/* ==================== IMAGE ==================== */

.weekly-item__image {

  display: block;

  overflow: hidden;

  background: var(--color-surface-soft);

}


.weekly-item__placeholder {

  width: 100%;
  height: 100%;
  min-height: 540px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 1rem;

  background: var(--color-surface-soft);

  color: var(--color-text-muted);

  text-align: center;

  transition: var(--transition);

}


.weekly-item:hover
.weekly-item__placeholder {

  background: var(--color-border-light);

}


.weekly-item__placeholder span {

  font-family: var(--font-body);

  font-size: .65rem;

  font-weight: var(--fw-semibold);

  letter-spacing: 5px;

}


.weekly-item__placeholder strong {

  font-family: var(--font-heading);

  font-size: 5rem;

  font-weight: var(--fw-medium);

  line-height: .8;

  letter-spacing: 2px;

}


/* ==================== CONTENT ==================== */

.weekly-item__content {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 5rem;

}


.weekly-item__meta {

  display: flex;

  flex-wrap: wrap;

  gap: 1.5rem;

  margin-bottom: 2rem;

  color: var(--color-text-muted);

  font-family: var(--font-body);

  font-size: .72rem;

  font-weight: var(--fw-semibold);

  letter-spacing: 1.5px;

}


.weekly-item__category {

  display: block;

  margin-bottom: 1rem;

  color: var(--color-accent);

  font-family: var(--font-body);

  font-size: .7rem;

  font-weight: var(--fw-bold);

  letter-spacing: 2.5px;

  text-transform: uppercase;

}


.weekly-item__title {

  max-width: 600px;

  margin-bottom: 1.5rem;

  font-family: var(--font-heading);

  font-size: clamp(2.8rem, 5vw, 5rem);

  font-weight: var(--fw-medium);

  line-height: .98;

  letter-spacing: -.4px;

}


.weekly-item__description {

  max-width: 530px;

  margin-bottom: 2.5rem;

  color: var(--color-text-light);

  font-family: var(--font-body);

  font-size: 1rem;

  line-height: 1.75;

}


.weekly-item__link {

  display: inline-flex;

  align-items: center;

  gap: .7rem;

  width: fit-content;

  color: var(--color-text);

  font-family: var(--font-body);

  font-size: .72rem;

  font-weight: var(--fw-bold);

  letter-spacing: 1.5px;

  text-transform: uppercase;

  transition: var(--transition);

}


.weekly-item__link i {

  transition: transform .35s ease;

}


.weekly-item__link:hover {

  color: var(--color-accent);

}


.weekly-item__link:hover i {

  transform: translateX(5px);

}


/* ==================== ARCHIVE PLACEHOLDER ==================== */

.archive-placeholder {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  margin-top: 2rem;

  padding: 1.5rem 0;

  border-bottom:
    1px solid var(--color-border);

  color: var(--color-text-muted);

}


.archive-placeholder__number {

  font-family: var(--font-body);

  font-size: .65rem;

  font-weight: var(--fw-semibold);

  letter-spacing: 2px;

}


.archive-placeholder p {

  font-family: var(--font-body);

  font-size: .75rem;

  letter-spacing: 1px;

}


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

.footer {

  padding: 5rem 0 2rem;

  background: var(--color-surface);

  border-top:
    1px solid var(--color-border);

}


.footer__grid {

  display: grid;

  grid-template-columns:
    2fr 1fr 1fr;

  gap: 4rem;

  padding-bottom: 4rem;

}


.footer__logo {

  font-family: var(--font-heading);

  font-size: 2.15rem;

  font-weight: var(--fw-medium);

  letter-spacing: 1px;

  line-height: 1;

}


.footer__description {

  max-width: 260px;

  margin-top: 1rem;

  color: var(--color-text-muted);

  font-family: var(--font-body);

  font-size: .8rem;

  line-height: 1.7;

}


.footer__title {

  display: block;

  margin-bottom: 1.2rem;

  color: var(--color-text-muted);

  font-family: var(--font-body);

  font-size: .65rem;

  font-weight: var(--fw-semibold);

  letter-spacing: 2px;

  text-transform: uppercase;

}


.footer__column ul {

  display: flex;

  flex-direction: column;

  gap: .7rem;

}


.footer__column a {

  color: var(--color-text-light);

  font-family: var(--font-body);

  font-size: .78rem;

  transition: var(--transition);

}


.footer__column a:hover {

  color: var(--color-text);

}


.footer__bottom {

  display: flex;

  justify-content: space-between;

  gap: 2rem;

  padding-top: 1.5rem;

  border-top:
    1px solid var(--color-border);

  color: var(--color-text-muted);

  font-family: var(--font-body);

  font-size: .65rem;

  letter-spacing: .5px;

}


/* ==================== RESPONSIVE ==================== */

@media (max-width: 1100px) {

  .navbar__menu {
    gap: 1.2rem;
  }

  .weekly-item__content {
    padding: 3.5rem;
  }

}


@media (max-width: 900px) {

  .navbar {
    display: none;
  }

  .navbar__toggle {
    display: block;
  }

  .mobile-nav {

    position: fixed;

    top: var(--header-height);
    left: 0;

    width: 100%;

    padding: 2rem 4% 3rem;

    background: var(--color-background);

    border-bottom:
      1px solid var(--color-border);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
      opacity .35s ease,
      visibility .35s ease,
      transform .35s ease;

  }

  .mobile-nav.active {

    display: block;

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

  }

  .mobile-nav__menu {

    display: flex;

    flex-direction: column;

    gap: 1.3rem;

  }

  .mobile-nav__link {

    color: var(--color-text-light);

    font-family: var(--font-body);

    font-size: .73rem;

    font-weight: var(--fw-medium);

    letter-spacing: 1.1px;

    text-transform: uppercase;

  }

  .mobile-nav__link.active {
    color: var(--color-accent);
  }

  .weekly-item {

    grid-template-columns: 1fr;

  }

  .weekly-item__placeholder {

    min-height: 420px;

  }

}


@media (max-width: 768px) {

  .weekly-hero {

    min-height: 70vh;

    padding-top:
      calc(var(--header-height) + 4rem);

    padding-bottom: 5rem;

  }


  .weekly-hero__title {

    font-size: clamp(4rem, 15vw, 6rem);

  }


  .weekly-archive {

    padding: 6rem 0 7rem;

  }


  .section-heading {

    align-items: flex-start;

    flex-direction: column;

    gap: 1rem;

  }


  .weekly-item__content {

    padding: 3rem 2rem;

  }


  .weekly-item__title {

    font-size: 3.2rem;

  }


  .footer__grid {

    grid-template-columns: 1fr;

    gap: 2.5rem;

  }


  .footer__bottom {

    flex-direction: column;

    gap: .5rem;

  }

}


@media (max-width: 576px) {

  .weekly-hero {

    min-height: 65vh;

  }


  .weekly-hero__title {

    font-size: 3.8rem;

  }


  .weekly-hero__description {

    font-size: .9rem;

  }


  .weekly-item__placeholder {

    min-height: 300px;

  }


  .weekly-item__placeholder strong {

    font-size: 4rem;

  }


  .weekly-item__content {

    padding: 2.5rem 1.5rem;

  }


  .weekly-item__title {

    font-size: 2.8rem;

  }


  .weekly-item__meta {

    gap: .8rem;

  }

}