html {
  font-size: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  margin: 0;
  font-family: ui-monospace, monospace;
}

body {
  --border: 1px solid black;
  --border-horiz: var(--border);
  --border-vert: var(--border);
  --pad-vert: 0.5lh;
  --pad-horiz: 1ch;

  height: 100vh;
  overflow-y: hidden;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas:
    "header header header"
    "column1 column2 column3"
    "footer footer footer";
  gap: 0;

  margin: 0;

  > header { grid-area: header; padding: var(--pad-vert) var(--pad-horiz); }
  > footer { grid-area: footer; padding: var(--pad-vert) var(--pad-horiz); }

  > :is(header, section, footer):not(:first-of-type) { border-left: var(--border-horiz); }
  > header { border-bottom: var(--border-vert); }
  > footer { border-top: var(--border-vert); }

  > :is(header, footer) p { margin: 0; }

  > section {
    min-height: 10lh;
    overflow-y: scroll;

    > header:first-child {
      background-color: white;
      padding-inline: var(--pad-horiz);

      position: sticky;
      top: 0px;
      z-index: 1000;

      &:has(:first-child) {
        border-bottom: var(--border-vert);
        padding-block: var(--pad-vert);
      }
    }

    > :is(h2, p, ol) { margin-inline: var(--pad-horiz); }
    p + p { margin-block-start: 1lh; }
    p + h2 { margin-block-start: 2lh; }

    ol {
      list-style-position: inside;
      padding-inline: 0;

      li:not(:last-child) {
        margin-block-end: 1lh;
      }
    }

    .photostream-item, img { max-width: 100%; }
    .photostream-item {
      position: relative;
      margin: var(--pad-vert) var(--pad-horiz);

      header {
        position: absolute;
        top: 0.5lh;
        left: 0.5ch;

        padding: 0.25rem;

        background-color: white;
      }

      &, a, img { line-height: 1; }

      a {
        display: block;
        line-height: 0;
      }
    }
  }
}

@media screen and (max-width: 840px) {
  body {
    --border-horiz: ;

    display: flow;
    overflow-y: scroll;

    section { overflow-y: initial; }

    section:not(:last-of-type) { border-bottom: var(--border-vert); }

    section:has(.photostream-item) {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--pad-vert) var(--pad-horiz);

      header {
        grid-column: span 2;
      }

      .photostream-item {
        margin: 0;
      }
    }
  }
}