/* posts/post page */
body.t-post > main > article {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: full;

  > * {
    grid-column: content;
  }

  > header.page-header {
    grid-column: full;
    display: grid;
    grid-template-columns: subgrid;
    background-image: linear-gradient(
      to right,
      transparent 0%,
      oklch(from currentColor l c h / 0.15) 10%,
      oklch(from currentColor l c h / 0.15) 90%,
      transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom;

    & h1 {
      grid-column: content-start / wide-end;
      grid-template-columns: none;
      /* margin-inline: 0; */
    }

    .page-title {
      /* same rule but harder, undoing previous wide rule to get the text to line up at the left */
      max-inline-size: none;
      margin: 0 0 0.16em;
      text-wrap: pretty;

      &.is-short-title {
        font-size: clamp(2.75rem, 7vw, 5.5rem);
      }
    }

    .summary {
      margin-block-end: 0.65em;
    }

    .date-location {
      margin-block-end: var(--space-xs);
    }

    > figure {
      grid-column: wide;
      display: grid;
      grid-template-columns: subgrid;
      overflow: hidden;

      > img {
        width: 100%;
        display: block;
        grid-column: 1 / -1;
        aspect-ratio: 1;
        object-fit: cover;
      }

      > figcaption {
        grid-column: content;
      }
    }
  }

  .text {
    grid-template-columns: subgrid;
    display: grid;
    grid-column: full;

    > * {
      grid-column: content;
    }

    video {
      max-width: 100%;
    }

    /* body media placement — content (default) / wide / full */
    > .wide {
      grid-column: wide;
    }

    > .full {
      grid-column: full;
    }

    > figure.wide,
    > figure.full {
      display: grid;
      grid-template-columns: subgrid;

      > img,
      > a,
      > video,
      > iframe {
        grid-column: 1 / -1;
        width: 100%;
        display: block;
      }

      > figcaption {
        grid-column: content;
      }
    }

    > .breakout {
      grid-column: full;
      display: grid;
      grid-template-columns: subgrid;
      overflow: hidden;

      > img,
      > video,
      > iframe {
        width: 100%;
        display: block;
        grid-column: full;
        object-fit: cover;
      }

      > figcaption {
        grid-column: content;
      }

      &.left {
        grid-column: full-start / content-end;

        img,
        video,
        iframe {
          grid-column: full-start / content-end;
        }
      }

      &.right {
        grid-column: content-start / full-end;

        img,
        video,
        iframe {
          grid-column: content-start / full-end;
        }
      }
    }
  }
}

body.t-post article {
  > header {
    padding-top: 3rem;
    margin-bottom: 3rem;
  }

  .blog-notice {
    margin: 2rem 0;
    padding: 1rem 2rem;
    background-color: var(--color-panel);
    color: var(--color-panel-ink);
    border-radius: var(--rounded);
    line-height: var(--line-height-0);
  }

  .text > p:first-of-type {
    font-size: var(--font-size-2);
    line-height: var(--line-height-0);
    margin-bottom: var(--space-l);
    text-wrap: pretty;

    &::first-line {
      font-variant-caps: all-small-caps;
      letter-spacing: 0.08em;
      color: var(--color-title);
    }
  }

  > footer {
    /* dl.meta brings its own margin — just a quiet breather before related */
    padding: var(--space-xl) 0 var(--space-s);

    p:not(.folio-stamp) {
      color: var(--color-copper);
    }
  }
}