/* Post layout, owned by the blog rather than by the Main App's Tailwind
   bundle.

   Everything else here is styled by /dist/output.css, and that stays true:
   colors, .docs-prose, and every utility on a Hugo layout still come from
   there. What could not come from there is this file's content, for one
   mechanical reason. static/output.css is gitignored and built during the
   Main App's image build, so a Hugo layout that starts using a utility
   Tailwind has not emitted yet gets that utility only after the app is
   rebuilt and deployed. A pull request that touches blog/** rebuilds the
   blog and nothing else, so a layout change expressed in new utilities
   renders unstyled in its own preview — which is exactly when someone is
   trying to look at it. This file is synced with the site, so it is correct
   in the preview on the first build.

   Keep that split. Reach for a utility first; put a rule here only when the
   utility it needs would be a new one. */

/* Column arithmetic, in one place because the three widths have to add up
   and are otherwise spread across two files.

   Standard (>= 1024px), unchanged from the two-column layout that preceded
   the rail move:  1040 - 48 padding = 992 = 240 rail + 64 gap + 688 article.
   The prose caps at 704, so the 688 track is what sets the measure.

   Wide (>= 1344px), where the sidenote moves into the margin:
   1280 - 48 padding = 1232 = 240 rail + 48 gap + 944 article, and the
   article splits 704 prose + 32 + 208 note. The 944 is the number that
   binds: it is why the gap tightens to 48 here rather than staying at 64,
   and why the note is 208px rather than Fly.io's 240. Widen the note and
   either the measure or the rail has to give.

   The breakpoint is the container plus room for a scrollbar and a margin,
   not a device width. Below it the note falls back to an inline block, which
   is the same thing Fly.io's does and is a complete design on its own. */

.post-page {
  max-width: 1040px;
}

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .post-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 4rem;
  }
  /* The rail is second in the document so the post itself comes first to a
     screen reader and to any client that ignores this file. */
  .post-rail {
    order: -1;
  }
}

@media (min-width: 1344px) {
  .post-page {
    max-width: 1280px;
  }
  .post-layout {
    gap: 3rem;
  }
  /* Out of flow, so the paragraphs either side of the note close up and it
     sits beside them. With no `top`, the note keeps the vertical position it
     would have had in flow. Two notes less than a note's height apart will
     therefore overlap; space them, or leave them inline. */
  .sidenote {
    position: absolute;
    left: 100%;
    width: 208px;
    margin: 0 0 0 2rem;
    padding: 0 0 0 1rem;
    background: none;
    border-radius: 0;
    border-width: 0 0 0 1px;
  }
  /* The margin says what the label said. */
  .sidenote-label {
    display: none;
  }
}