/* Two columns on a wide screen. On a phone the menu comes first, then the
   text, then the rest of the sidebar. */
:root { --ink:#111; --paper:#fff; --quiet:#666; --rule:#ccc; --link:#00449e; }

body {
  margin: 0 auto; padding: 2em 1em; max-width: 58em;
  font-family: Georgia, "Times New Roman", serif; font-size: 18px;
  line-height: 1.5; color: var(--ink); background: var(--paper);
  display: grid; grid-template-columns: 14em 1fr; gap: 0 3em; align-items: start;
}
a { color: var(--link); }

.sidebar      { grid-column: 1; font-size: .88em; line-height: 1.4; }
.sidebar-top  { grid-row: 1; }
.sidebar-extra{ grid-row: 2; padding-bottom: 2em; }
main          { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
footer        { grid-column: 2; grid-row: 3; }

.sidebar .portrait { width: 100%; max-width: 9em; height: auto; margin-bottom: .8em; }
h1.sitename { font-size: 1.15em; margin: 0 0 .2em; line-height: 1.25; }
h1.sitename a { color: var(--ink); text-decoration: none; }
.tagline { margin: 0 0 1.2em; color: var(--quiet); font-style: italic; }
.sidebar h2 { font-size: .8em; text-transform: uppercase; letter-spacing: .06em;
              color: var(--quiet); margin: 1.6em 0 .4em; font-weight: normal; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin-bottom: .3em; }
ul.menu { font-size: 1.05em; }
ul.menu li { margin-bottom: .35em; }
.count { color: var(--quiet); font-size: .85em; }
.feed { margin-top: 1.6em; }

main h2 { font-size: 1.3em; margin: 1.6em 0 .5em; }
main h2:first-child { margin-top: 0; }
main h3 { font-size: 1.05em; margin-bottom: .2em; }
.date { color: var(--quiet); font-size: .85em; }
.note { margin-bottom: 1.6em; }
ul.list { list-style: none; padding-left: 0; }
ul.list li { margin-bottom: .4em; }
img { max-width: 100%; height: auto; }
.figure { margin: 1.2em 0; }
.tagline-inline { color: var(--quiet); font-size: .9em; }
footer { color: var(--quiet); border-top: 1px solid var(--rule);
         margin-top: 3em; padding-top: 1em; }

@media (max-width: 45em) {
  body { display: flex; flex-direction: column; padding: 1.2em 1em; }
  .sidebar-top   { order: 1; border-bottom: 1px solid var(--rule);
                   padding-bottom: 1em; margin-bottom: 1.5em; }
  main           { order: 2; }
  .sidebar-extra { order: 3; border-top: 1px solid var(--rule);
                   margin-top: 2em; padding-top: .5em; }
  footer         { order: 4; margin-top: 1.5em; }
  .sidebar .portrait { max-width: 6em; float: right; margin-left: 1em; }
  ul.menu { display: flex; flex-wrap: wrap; gap: 0 1em; }
}

@media (prefers-color-scheme: dark) {
  :root { --ink:#ddd; --paper:#111; --quiet:#999; --rule:#444; --link:#7ab7ff; }
}