@layer base {
  :root {
    --border-radius: 8px;
  }

  html {
    font-size: 125%;
  }

  body {
    display: grid;
    grid-template-columns: 1fr min(80ch, 80vw) 1fr;
    grid-template-rows: min-content 1fr min-content;
    padding-inline: 4vw;

    > header {
      grid-column: 1/-1;
    }

    > main {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: subgrid;

      > * {
        grid-column: 2/3;
      }

      > .full-bleed {
        grid-column: 1/-1;
      }
    }

    > footer {
      grid-column: 1/-1;
      margin-block-start: 2ex;

      search form {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1ex;

        input {
          min-width: 0;
        }
      }
    }
  }

  .h-feed {
    display: flex;
    flex-direction: column;
    gap: 2ex;
  }
}

@layer components {
  .h-entry {
    pre {
      padding: 1rem;
    }
  }
}


@layer components {
  .draft-notice {
    margin-block-end: 2ex;
    padding: 1ex 1em;
    border: 2px dashed var(--clr-border);
    border-radius: 8px;
    background: light-dark(
      oklch(95% 0.08 85deg),
      oklch(30% 0.08 85deg)
    );
  }
}