.page {
  --col-gutter: 40px;
  --footnote-width: min(340px, 30vw);
  --empty-col-width: 40px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--clr-bg-1-muted);
  overflow: hidden;
}

.content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 40px 24px;

  @media (max-width: 640px) {
    padding: 20px;
  }
}

.grid-layout {
  display: grid;
  grid-template-columns: var(--empty-col-width) 10fr var(--footnote-width);
  grid-template-areas: "empty content footnote";
  column-gap: var(--col-gutter);

}

/* NAVBAR */
.navbar {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;

  @media (max-width: 720px) {
    column-gap: 28px;
  }
}

/* navbar logo */
.navbar__logo-mark-wrapper {
  z-index: 1;
  justify-self: start;
  grid-column: empty;
  position: relative;
  display: flex;
  align-items: center;
}

.navbar__logo-mark {
  width: 28px;
  font-weight: 700;
  grid-area: empty;
}

.navbar__logo-slash {
  position: absolute;
  top: 40%;
  left: 48px;
  width: 2px;
  height: 28px;
  background-color: var(--clr-text-1);
  transform: rotate(32deg) scaleX(0.8) translateY(-50%);
  opacity: 0.3;

  @media (max-width: 720px) {
    left: 42px;
  }
}

.navbar__content {
  z-index: 1;
  grid-column: content / footnote;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.navbar__blog-name-wrapper {
  z-index: 0;
  display: flex;
  align-items: center;
}

.navbar__blog-name {
  font-family: var(--text-fontfamily-accent);
  font-size: 38px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--clr-text-1);
  white-space: nowrap;

  @media (max-width: 1020px) {
    font-size: 34px;
  }
}

.navbar__rss-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-1);
  margin-left: 20px;

  &:hover {
    text-decoration-line: underline;
  }

  @media (max-width: 1020px) {
    opacity: 0.4;
    margin-top: -14px;
    margin-left: 10px;
  }
}

/* navbar links */
.navbar__links {
  display: flex;
  gap: 32px;
  align-items: center;

  @media (max-width: 1020px) {
    display: none;
  }
}

.navbar__main-links {
  display: flex;
  gap: 20px;

  & a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    gap: 6px;
    color: var(--clr-text-1);
    text-decoration: none;

    &:hover {
      text-decoration-line: underline;
    }
  }
}

.navbar__join-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 6px 6px 8px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--clr-text-1);
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--clr-text-1), transparent 80%);
  text-decoration: none;

  &:hover {
    background-color: var(--clr-bg-4);
  }

  @media (max-width: 1020px) {
    font-weight: 600;
    font-size: 14px;
    padding: 10px 12px;
  }
}

.navbar__search {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

/* MOBILE MENU */
.navbar__mobile-menu {
  z-index: 1;
  display: none;
  flex-direction: column;
  position: absolute;
  background-color: var(--clr-bg-1);
  padding: 24px 40px 32px;
  width: 100%;
  top: 0;
  left: 0;

  @media (max-width: 640px) {
    padding: 24px 20px 32px;
  }
}

.navbar__mobile-menu--active {
  display: flex;
}

.navbar__mobile-menu__section {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 60px;
  gap: 16px;
}

.navbar__mobile-menu__links {
  & li {
    margin-bottom: 16px;
  }

  & a {
    /* font-size: 18px; */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.navbar__mobile-menu__button {
  display: none;
  pointer: cursor;
  position: relative;
  width: 32px;
  height: 32px;

  &:after,
  &:before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--clr-text-1);
    transition: transform 0.15s ease-in-out;
  }

  &:after {
    transform: translateY(calc(-50% - 6px));
  }

  &:before {
    transform: translateY(calc(-50% + 6px));
  }

  &:hover {
    &:after {
      transform: translateY(calc(-50% - 4px));
    }

    &:before {
      transform: translateY(calc(-50% + 4px));
    }
  }

  @media (max-width: 1020px) {
    display: flex;
  }
}

/* AUTHOR PAGE COM{PNENTS */
.bio-large {
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 670px;
  gap: 20px;
  margin: 40px auto 80px;

  @media (max-width: 640px) {
    margin: 20px auto 50px;
  }
}

.bio-large__avatar {
  width: 84px;
  height: 84px;
  border-radius: 20px;
}

.bio-large__title {
  font-family: var(--text-fontfamily-accent);
  font-size: 60px;
  line-height: 1.1;
  text-align: center;


  @media (max-width: 640px) {
    font-size: 48px;
  }
}

.bio-large__about {
  font-size: 15px;
  line-height: 1.6;
  color: var(--clr-text-2);
  text-align: center;

  @media (max-width: 640px) {
    font-size: 14px;
  }
}

.bio-large__links {
  display: flex;

  & a {
    text-decoration-line: underline;

    &:hover {
      color: var(--clr-theme-pop-element);
    }

    &:not(:last-child):after {
      content: '|';
      margin: 0 12px;
      color: var(--clr-text-2);
      font-size: 12px;
    }
  }
}

/* TAG PAGE COMPONENTS */
.tag-header {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  margin: 30px auto 60px;

  @media (max-width: 640px) {
    flex-direction: column;
    margin-bottom: 32px;
  }
}

.tag-header__query {
  font-family: var(--text-fontfamily-accent);
  font-size: 60px;
  margin: 0;
  line-height: 1.1;
  text-align: center;

  @media (max-width: 640px) {
    font-size: 52px;
  }
}

.tag-header__count {
  font-size: 16px;
  line-height: 1.6;
  color: var(--clr-text-2);
  text-align: center;

  @media (max-width: 640px) {
    font-size: 14px;
  }
}


/* UTILITY */
.hide-on-tablet {
  @media (max-width: 1020px) {
    display: none;
  }
}

.show-on-tablet {
  display: none;

  @media (max-width: 1020px) {
    display: flex;
  }
}

.hide-on-mobile {
  @media (max-width: 640px) {
    display: none;
  }
}

.show-on-mobile {
  display: none;

  @media (max-width: 640px) {
    display: flex;
  }
}

.reveal {
  display: flex;
  opacity: 0;
  transform: translateY(5px);
  animation: fade-in 0.3s ease-in-out forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}