:root { color-scheme: light dark; --bg: #fff; --fg: #1c1c1c; --muted: #8a8a85; --rule: #c9c9c4; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0a0a0a; --fg: #ededed; --muted: #8f8f8a; --rule: #4d4d4a; }
}

body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; }
main { max-width: 500px; margin: 0 auto; padding: 15vh 24px 96px; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
.home { text-decoration: none; }
.home:hover { text-decoration: underline; text-decoration-color: var(--rule); }
.muted { color: var(--muted); }
section { margin-top: 40px; }
section:first-of-type { margin-top: 22px; }

/* home: the cube that becomes the June Automation orb */
.june { white-space: nowrap; }
.june [data-cube-orb] { display: inline-block; width: 1em; height: 1em; vertical-align: -0.13em; margin-right: 0.3em; }

/* writing index */
.posts { list-style: none; margin: 10px 0 0; padding: 0; }
.posts li { margin-top: 6px; }

/* a post */
article h1 { font: inherit; font-weight: 600; margin: 0 0 22px; }
article p + p { margin-top: 1em; }

/* one-letter links (X) get a larger hit area without changing how they look */
a.short { padding: 0.2em 0.35em; margin: -0.2em -0.35em; }

.nowrap { white-space: nowrap; }

/* very large monitors: scale the type up a step so the column doesn't look lost */
@media (min-width: 2400px) {
  body { font-size: 19px; }
  main { max-width: 560px; }
}