/*------------------------------------*\
    ESSAY HEADER (hero)
    - Hover reveal caption, subtle zoom on image.
  \*------------------------------------*/
  .essay-header {
    margin-bottom: 3rem;
    text-align: center;
  }

  .essay-header__figure {
    position: relative;
    margin: 0 0 2rem 0;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 21/9;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
  }

  .essay-header__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
  }

  .essay-header__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
    color: #fff;
    font-size: .9rem;
    text-align: left;
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
  }

  .essay-header__figure:hover .essay-header__image { transform: scale(1.05); }
  .essay-header__figure:hover .essay-header__caption { transform: translateY(0); }

  .essay-header__meta-container { padding: 0 1rem; }
  .essay-header__title { margin-bottom: .5rem; }
  .essay-header__category { font-size: 1rem; color: #666; margin-bottom: 1.5rem; }

  .essay-header__meta {
    text-align: center;
    font-size: .9rem;
    color: #666;
    margin-bottom: 2rem;
  }

  .essay-header__meta .essay-header__byline,
  .essay-header__meta .essay-header__date {
    display: block;
    margin-bottom: .25rem;
  }

  .essay-header__reading-time {
    font-size: .85rem;
    color: #888;
    font-style: italic;
    margin: 0;
  }