@use 'sass:meta';

:root {
  --feat-aspect: 2;
  --site-nav-height: 60px;
}

#site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > main {
    flex: 1 1 auto;
    height: auto;
  }
}

.trademark-banner {
  height: 40px;
  background: gray;
}

.site-header, .site-footer {
  flex: 0 1 auto;
  min-height: max-content;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1;
}

#main, .site-footer {
  z-index: 0;
}

.blog-nav {
  position: sticky;
  height: var(--site-nav-height);
  top: var(--site-nav-height);
  z-index: 1;
}

.blog-index {}

.blog-single {}

.ph-footer {
  background-color: lightblue;
  height: 100px;
}

.push-feature {
  padding-bottom: calc(50% / var(--feat-aspect));
}

.frame-feature {
  max-width: 800px;
  margin: 0 auto;
}

.ph-featured {
  display: flex;
  &::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    padding-bottom: calc(100% / var(--feat-aspect));
  }
  // background-color: limegreen;
  margin-top: calc(-50% / var(--feat-aspect));
}