.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.header-bg {
  height: 100lvh;
  background: linear-gradient(290deg, var(--gray-500) 0%, var(--gray-100) 100%);
  animation: fadeIn var(--transition-xxl) forwards;
}

.header-bg::after {
  height: 45%;
  background: linear-gradient(-4deg, var(--gray-100) 15%, transparent 85%);
}

.page-content {
  margin-top: 0;
}

.hero {
  width: 100%;
  height: 100%;
  min-height: 100svh;
  margin-top: 67px;
  margin-top: var(--header-height, 67px);
  perspective: 1000px;
}

.hero .inner {
  width: 100%;
  max-width: var(--body-max-width-with-gutter);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin: 0 auto;
}

.hero .inner .blog-posts.lg {
  display: none;
}

.hero .content {
  margin-top: 36px;
  text-align: center;
}

.hero .content .title {
  color: var(--primary-900);
  font-family: var(--font-display);
  font-size: var(--font-size-display-md);
  line-height: 1;
  font-weight: var(--font-weight-display-md);
  letter-spacing: var(--font-letterspacing-display-md);
  margin: 0;
  text-shadow: 16px 8px 16px rgba(31, 33, 31, 0.5);
  translate: -100vw;
  animation: slideInFromLeft var(--transition-spring-lg) forwards;
  animation-delay: 0.1s;
}

.hero .content .subtitle {
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
  text-shadow: 16px 8px 16px rgba(31, 33, 31, 0.5);
  translate: -100vw;
  animation: slideInFromLeft var(--transition-spring-lg) forwards;
  animation-delay: 0.2s;
}

.hero .content .cta {
  font-family: var(--font-display);
  display: inline-block;
  background-color: var(--accent-300);
  color: var(--accent-900);
  font-weight: 900;
  line-height: 1;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  padding: 14px 16px 12px;
  border: 0.5px solid var(--accent-400);
  border-radius: var(--radius-sm);
  -webkit-text-decoration: none;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 16px 8px 16px rgba(31, 33, 31, 0.5);
  transition: background-color var(--transition-md), border-color var(--transition-md);
  translate: -100vw;
  animation: slideInFromLeft var(--transition-spring-lg) forwards;
  animation-delay: 0.3s;
}

@media (hover: hover) {
  .hero .cta:hover {
    background-color: var(--accent-400);
    border-color: var(--accent-500);
  }
}

.hero .cta:focus {
  background-color: var(--accent-400);
  border-color: var(--accent-500);
}

@media (min-width: 37.5em) {
  .hero {
    margin-top: 79px;
    margin-top: var(--header-height, 79px);
  }

  .hero .content {
    margin-top: 48px;
    text-align: left;
  }

  .hero .title {
    font-size: var(--font-size-display-lg);
    font-weight: var(--font-weight-display-lg);
    letter-spacing: var(--font-letterspacing-display-lg);
  }

  .hero .subtitle {
    font-size: 2rem;
    letter-spacing: 0.07em;
  }
}

@media (min-width: 62.5em) {
  .hero {
    margin-top: 96px;
    margin-top: var(--header-height, 96px);
  }

  .header-bg::after {
    height: 30%;
    background: linear-gradient(-2deg, var(--gray-100) 15%, transparent 75%);
  }

  .hero .inner {
    display: flex;
    gap: 24px;
  }

  .hero .inner .blog-posts.lg {
    flex: 1 1 fit-content;
    display: block;
    position: relative;
    margin-top: 48px;
    transition: margin-top var(--transition-spring-md);
  }

  .hero .inner .blog-posts.lg .card .text-content {
    min-height: 160px;
  }

  .hero .inner .blog-posts.lg .card .title,
  .hero .inner .blog-posts.lg .card .title a {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-h4);
    letter-spacing: var(--font-letterspacing-h4);
    line-height: var(--font-line-height-h4);
  }

  .hero .inner .blog-posts.lg .card .description {
    font-size: var(--font-size-text-md);
    line-height: var(--font-line-height-text-md);
    font-weight: var(--font-weight-text-md);
    letter-spacing: var(--font-letterspacing-text-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .hero .inner .blog-posts.lg .card .meta {
    font-size: var(--font-size-text-sm);
    line-height: var(--font-line-height-text-sm);
    font-weight: var(--font-weight-text-sm);
    letter-spacing: var(--font-letterspacing-text-sm);
  }

  .hero .inner .blog-posts.lg .card-list li {
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
    z-index: 3;
    perspective: 1000px;
    animation: slideInFromRight var(--transition-spring-lg) forwards;
    animation-delay: 1.1s;
    transform: rotate3d(0.5, 0.5, 1, -2deg);
    translate: 100vw;
    transition:
      transform var(--transition-sm), box-shadow var(--transition-sm), opacity var(--transition-sm), top var(--transition-spring-md), right var(--transition-spring-md);
  }

  .hero .inner .blog-posts.lg .card-list li .card {
    box-shadow: 24px 28px 36px rgba(31, 33, 31, 0.54);
  }

  .hero .inner .blog-posts.lg .card-list li:nth-of-type(2) {
    top: 170px;
    right: 60px;
    z-index: 2;
    animation-delay: 0.9s;
  }

  .hero .inner .blog-posts.lg .card-list li:nth-of-type(2) .card {
    box-shadow: 36px 32px 32px rgba(31, 33, 31, 0.6);
  }

  .hero .inner .blog-posts.lg .card-list li:nth-of-type(3) {
    top: 340px;
    right: 120px;
    z-index: 1;
    animation-delay: 0.7s;
  }

  .hero .inner .blog-posts.lg .card-list li:nth-of-type(3) .card {
    box-shadow: 42px 48px 28px rgba(31, 33, 31, 0.72);
  }

  .hero .inner .blog-posts.lg .more-posts {
    position: absolute;
    top: 725px;
    right: 120px;
    transform: rotate3d(0.5, 0.5, 1, -2deg);
    z-index: 4;
    translate: 100vw;
    animation: slideInFromRight var(--transition-spring-lg) forwards;
    animation-delay: 0.7s;
    transition:
      transform var(--transition-sm), top var(--transition-spring-md), right var(--transition-spring-md);
  }

  @media (hover: hover) and (pointer: fine) {
    .hero .inner .blog-posts.lg .card-list:has(:is(li:nth-of-type(2), li:nth-of-type(3)):hover) li:nth-of-type(1),
    .hero .inner .blog-posts.lg .card-list:has(li:nth-of-type(3):hover) li:nth-of-type(2) {
      opacity: 0;
      top: -100%;
    }

    .hero .inner .blog-posts.lg .card-list li:hover {
      transform: rotate3d(0, 0, 0, 0deg) scale(1.05);
      box-shadow: 48px 56px 48px rgba(31, 33, 31, 0.8);
    }

    .hero .inner .blog-posts.lg:has(.card-list li:nth-of-type(3):hover) .more-posts {
      transform: rotate3d(0, 0, 0, 0deg) scale(1.05) translateY(15px);
    }
  }

  @media (hover: none) and (pointer: coarse) {
    .hero .inner .blog-posts.lg .card-list:has(:is(li:nth-of-type(2), li:nth-of-type(3)):active) li:nth-of-type(1),
    .hero .inner .blog-posts.lg .card-list:has(li:nth-of-type(3):active) li:nth-of-type(2) {
      opacity: 0;
      top: -100%;
    }

    .hero .inner .blog-posts.lg .card-list li:has(:active) {
      transform: rotate3d(0, 0, 0, 0deg) scale(1.05);
      box-shadow: 48px 56px 48px rgba(31, 33, 31, 0.8);
    }

    .hero .inner .blog-posts.lg:has(.card-list li:nth-of-type(3):active) .more-posts {
      transform: rotate3d(0, 0, 0, 0deg) scale(1.05) translateY(15px);
    }
  }

  .hero .inner .blog-posts.lg .card-list:has(:is(li:nth-of-type(2), li:nth-of-type(3)) :focus-visible) li:nth-of-type(1),
  .hero .inner .blog-posts.lg .card-list:has(li:nth-of-type(3) :focus-visible) li:nth-of-type(2) {
    opacity: 0;
    top: -100%;
  }

  .hero .inner .blog-posts.lg .card-list li:has(:focus-visible) {
    transform: rotate3d(0, 0, 0, 0deg) scale(1.05);
    box-shadow: 48px 56px 48px rgba(31, 33, 31, 0.8);
  }

  .hero .inner .blog-posts.lg:has(.card-list li:nth-of-type(3) :focus-visible) .more-posts {
    transform: rotate3d(0, 0, 0, 0deg) scale(1.05) translateY(15px);
  }
}

@media (min-width: 75em) {
  .hero .inner .blog-posts.lg {
    margin-top: 24px;
  }

  .hero .inner .blog-posts.lg .card-list li {
    top: 0;
    right: 240px;
  }

  .hero .inner .blog-posts.lg .card-list li:nth-of-type(2) {
    top: 165px;
    right: 120px;
  }

  .hero .inner .blog-posts.lg .card-list li:nth-of-type(3) {
    top: 330px;
    right: 0px;
  }

  .hero .inner .blog-posts.lg .more-posts {
    top: 715px;
    right: 0px;
  }
}

@media (orientation: landscape) and (max-height: 31.25em) {
  .header-bg::after {
    height: 45%;
    background: linear-gradient(-1deg, var(--gray-100) 15%, transparent 85%);
  }
}

@media (orientation: landscape) and (max-height: 42.1875em) {
  .hero .inner .blog-posts.lg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .content .title,
  .hero .content .subtitle,
  .hero .content .cta,
  .hero .inner .blog-posts.lg .card-list li,
  .hero .inner .blog-posts.lg .more-posts {
    animation: none;
    translate: 0;
    opacity: 1;
  }

  .header-bg,
  .header-bg::after {
    animation: none;
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  0% {
    translate: 100vw;
  }
  100% {
    translate: 0;
  }
}

@keyframes slideInFromLeft {
  0% {
    translate: -100vw;
  }
  100% {
    translate: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.card {
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  background-color: var(--gray-200);
  border-radius: var(--radius-md);
  border: 0.5px solid var(--gray-300);
  box-shadow: var(--shadow-elevation-2);
  container-type: inline-size;
}

.card .card-image {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.card .text-content {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

@container (min-width: 21.25rem) {

.card .text-content {
    padding: 12px;
    gap: 12px;
}
  }

@container (min-width: 31.25rem) {

.card .text-content {
    padding: 16px;
    gap: 16px;
}
  }

.card .title,
.card .title a,
.card .title a:visited {
  color: var(--primary-800);
  -webkit-text-decoration: none;
  text-decoration: none;
  margin: 0;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--font-line-height-h4);
  letter-spacing: var(--font-letterspacing-h4);
}

@container (min-width: 21.25rem) {

.card .title,
.card .title a,
.card .title a:visited {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    line-height: var(--font-line-height-h3);
    letter-spacing: var(--font-letterspacing-h3);
}
  }

@container (min-width: 31.25rem) {

.card .title,
.card .title a,
.card .title a:visited {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-h2);
    line-height: var(--font-line-height-h2);
    letter-spacing: var(--font-letterspacing-h2);
}
  }

.card .description {
  margin: 0;
  color: var(--primary-900);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-text-md);
  line-height: var(--font-line-height-text-md);
  letter-spacing: var(--font-letterspacing-text-md);
}

@container (min-width: 21.25rem) {

.card .description {
    font-size: var(--font-size-text-lg);
    font-weight: var(--font-weight-text-lg);
    line-height: var(--font-line-height-text-lg);
    letter-spacing: var(--font-letterspacing-text-lg);
}
  }

.card .metas {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-top: auto;
}

.card .metas .meta {
  color: var(--gray-700);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-text-sm);
  line-height: var(--font-line-height-text-sm);
  letter-spacing: var(--font-letterspacing-text-sm);
}

@container (min-width: 21.25rem) {

.card .metas .meta {
    font-size: var(--font-size-text-md);
    font-weight: var(--font-weight-text-md);
    line-height: var(--font-line-height-text-md);
    letter-spacing: var(--font-letterspacing-text-md);
}
  }

.card .metas .meta.post-count,
.card .metas .meta.date {
  flex-shrink: 0;
}

.card .metas .meta.role,
.card .metas .meta.series,
.card .metas .meta.category {
  text-align: right;
  -webkit-text-decoration: none;
  text-decoration: none;
}

section.intro {
  width: 100%;
  max-width: var(--body-max-width);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin: 0 auto;
  text-align: center;
  bottom: -100%;
  transition: bottom var(--transition-spring-lg);
}

section.intro.sticky {
  pointer-events: none;
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom) - 275px);
}

section.intro.sticky .inner .content {
  opacity: 0;
}

section.intro .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

section.intro .inner .content {
  max-width: 486px;
  transition: opacity var(--transition-sm);
  min-height: 176px;
}

section.intro .inner .content > h2 {
  color: var(--primary-700);
}

section.intro .inner .content > p {
  text-wrap: pretty;
}

@media (max-width: 25em) {
  section.intro .inner .content > h2 {
    font-size: var(--font-size-h3);
  }
}

@media (min-width: 26.5625em) {
  section.intro .inner .content {
    min-height: 152px;
  }

  section.intro.sticky {
    bottom: calc(env(safe-area-inset-bottom) - 275px);
  }
}

@media (min-width: 37.5em) {
  section.intro .inner .content {
    min-height: 0;
    min-height: initial;
  }

  section.intro.sticky {
    bottom: calc(env(safe-area-inset-bottom) - 395px);
  }
}

@media (min-width: 62.5em) {
  section.intro.sticky {
    bottom: calc(env(safe-area-inset-bottom) - 235px);
  }

  section.intro .inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
  }

  section.intro .inner .headshot,
  section.intro .inner .content {
    flex: 1 1 486px;
  }
}

@media (orientation: landscape) and (max-height: 31.25em) {
  section.intro.sticky {
    pointer-events: all;
    position: static;
  }

  section.intro.sticky .inner .content {
    opacity: 1;
  }
}

.page-content {
  --gap: 100px;
  max-width: none;
  max-width: initial;
  padding: 0;
  padding: initial;
  display: flex;
  flex-direction: column;
  gap: 100px;
  gap: var(--gap);
}