@charset "UTF-8";

/* =====================
  header
===================== */
@layer style {
  .header {
    position: sticky;
    inset: var(--nudge-2) auto;
    z-index: 22;
    display: block grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: flex-start;
    padding-block: 0;
    padding-inline: var(--nudge-2);
    margin-inline: var(--nudge-2);
    container-type: inline-size;

    @media (width <=768px) {
      padding-inline: var(--nudge-1);
      margin-inline: var(--nudge-1);
    }

    /* ==== logo ==== */
    .logo {
      display: block grid;
      gap: 0 var(--nudge-2);
      align-items: center;
      font-weight: 600;

      img {
        grid-row: 1 / 3;
        grid-column: 1 / 2;
        inline-size: var(--nudge-5);
      }

      h1 {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        margin-block: calc((1em - 1lh) / 2);
        font-size: var(--nudge-3);
        color: var(--purple);
      }

      p {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        font-size: calc(12 / 16 * 1rem);
        font-style: italic;
      }
    }
  }
}