@layer components {
.post-view {
  padding: 4rem 0 8rem;
  animation: fadeUp 0.35s ease;

  .post-back {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 4rem;
    transition: color 0.15s;
    text-transform: uppercase;
    text-decoration: none;

    &::before { content: '\2190'; }
    &:hover { color: var(--accent); }
  }

  :where(header) {
    margin-bottom: 3rem;

    .post-header-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.2rem;

      :where(time) {
        font-family: var(--mono);
        font-size: 0.68rem;
        color: var(--ink-faint);
        letter-spacing: 0.04em;
      }

      :where(span) {
        font-family: var(--mono);
        font-size: 0.64rem;
        color: var(--ink-faint);
        margin-left: auto;
      }
    }

    :where(h1) {
      font-size: 3.2rem;
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin-bottom: 1.2rem;
      text-wrap: pretty;
      margin-left: -0.04em;

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

    :where(p) {
      font-size: 1.1rem;
      font-style: italic;
      color: var(--ink-muted);
      line-height: 1.6;
      margin: 0;
    }
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

}