/* NOTE PAGE STYLES

   Loaded by the stream and by every note page. Notes are generated as bare
   structure — nothing emits styling of its own — so everything a note looks
   like is decided here. Edit this file to restyle the whole site at once; no
   republishing needed. */

html {
  scrollbar-gutter: stable both-edges;
}

body {
  font-size: 14px;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
  background: #ffffff;
  max-width: 65ch;
  margin: 1rem auto;
  padding: 0 1rem;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin-top: 1em;
  margin-bottom: 0.3em;
  font-weight: 500;
}

h1 { font-size: 1.5em; }
h2 { font-size: 1.35em; }
h3 { font-size: 1.15em; }
h4 { font-size: 1.05em; }

/* PARAGRAPHS */
p {
  margin-top: 0;
  margin-bottom: 0.75em;
}

/* LINKS

   One treatment everywhere: grey, underlined. Nothing on the site competes for
   attention by colour, so a link is marked by the underline alone and the page
   stays a single tone. */
a {
  color: #555;
  text-decoration: underline;
}

a:hover {
  color: #1a1a1a;
  background: #f0f0f0;
}

/* LISTS */
ul, ol {
  margin-bottom: 0.75em;
  padding-left: 1.25em;
}

li {
  margin-bottom: 0.25em;
}

/* BLOCKQUOTES */
blockquote {
  margin: 0.75em 0;
  padding-left: 1em;
  border-left: 3px solid #ddd;
  font-style: italic;
  color: #555;
}

/* CODE */
code {
  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
  font-size: 0.9em;
  background: #f5f5f5;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

pre {
  background: #f5f5f5;
  padding: 1em;
  overflow-x: auto;
  border-radius: 3px;
  line-height: 1.4;
}

pre code {
  background: none;
  padding: 0;
}

/* HORIZONTAL RULES */
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1em 0;
}

/* NOTE TITLE

   A note that opens with a bolded line has that line as its title. It is a
   real heading rather than a bold paragraph, so it names the page in the
   outline and in the tab as well as on screen. h1 on the note's own page, h2
   in the stream, where it is one article among many — one rule for both. */
.title {
  margin: 0 0 0.6em;
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* NOTE BODY

   The note itself. The slug is the note's only name and it already sits in the
   title bar and the URL, so it is deliberately not repeated on the page. */
main {
  margin-top: 3rem;
}

main > :first-child {
  margin-top: 0;
}

/* DATESTAMP

   Right-aligned under the note, and the note's own permalink — the one thing
   on the page worth copying. */
.stamp {
  margin: 0.5em 0 0;
  text-align: right;
  font-size: 0.85em;
}

/* SOURCE

   Where a note is about something published elsewhere, the link to it sits with
   the datestamp rather than in the prose, so a note that came in as a share
   reads like every other note until the footer. */
p.source {
  margin: 1.25em 0 0;
  text-align: right;
  font-size: 0.85em;
}

/* NOTE FOOTER

   Datestamp left, navigation right, on one line. The nav is pushed over with an
   auto margin rather than space-between so that it still sits right on a
   standing page, where there is no stamp for it to be spaced apart from. */
footer.notefoot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em 1.5em;
  margin: 2em 0 1em;
  font-size: 0.9em;
}

footer.notefoot .stamp {
  margin: 0;
  text-align: left;
  font-size: inherit;
}

footer.notefoot .adjacent {
  margin-left: auto;
}

/* HOME / PREVIOUS / NEXT

   Any of the three may be absent — the ends of the stream have no neighbour on
   one side, and a standing page has neither — so the separators are emitted
   with the links they lead to rather than assumed. */
nav.adjacent {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6em;
}

nav.adjacent .sep {
  color: #ccc;
}

/* STREAM

   The front page: every note in full, newest first. It carries no heading —
   the page title and the URL already say what it is. */
article:first-of-type {
  margin-top: 3rem;
}

article + article {
  border-top: 1px solid #ddd;
  margin-top: 1.5em;
  padding-top: 1.5em;
}

article > :first-child {
  margin-top: 0;
}