@charset "UTF-8";
:root {
  /*--old-site-blue: rgb(52,152,220);*/
  /*--old-site-red: rgb(173,20,87);*/
  --font-sans-serif: "Mulish", sans-serif;
  --font-serif: "PT Serif", serif;
  --font-tabular-figures: "Mulish", monospace;
  --font-default: var(--font-sans-serif);
  --font-article-content: var(--font-sans-serif);
  --font-chat-bubble: var(--font-sans-serif);
  --font-tweet: 'Helvetica Neue', sans-serif;
  --font-toot: var(--font-sans-serif);
  /* could use 300 to reduce bolder text in dark mode */
  --darkmode-font-weight-default: 400;
  --lightmode-font-weight-default: 400;
  --darkmode-bgcolor: 32 33 40;
  --darkmode-fgcolor: 248 248 242;
  --darkmode-accent: 52 152 220;
  --darkmode-link: 52 152 220;
  --lightmode-bgcolor: 248 248 242;
  --lightmode-fgcolor: 32 36 40;
  --lightmode-accent: 60 180 255;
  --lightmode-link: 60 180 255;
  --darkmode-twitter-bgcolor: 21 32 43;
  --darkmode-twitter-fgcolor: 255 255 255;
  --darkmode-twitter-accent: 29 155 240;
  --lightmode-twitter-bgcolor: 255 255 255;
  --lightmode-twitter-fgcolor: 0 0 0;
  --lightmode-twitter-accent: 29 155 240;
  --darkmode-mastodon-bgcolor: 40 44 55;
  --darkmode-mastodon-fgcolor: 255 255 255;
  --darkmode-mastodon-border-color: 57 63 79;
  --lightmode-mastodon-bgcolor: 255 255 255;
  --lightmode-mastodon-fgcolor: 0 0 0;
  --lightmode-mastodon-border-color: 192 205 217;
  --darkmode-chat-blue-bgcolor1: 75 184 251 /* p3: 106 182 245 */;
  --darkmode-chat-blue-bgcolor2: 0 122 255 /* p3: 52 120 246 */;
  --darkmode-chat-blue-fgcolor: 254 254 254;
  --darkmode-chat-gray-bgcolor1: /* adjusted for legibility */ 64 64 66 /* p3: 38 38 41 */;
  --darkmode-chat-gray-bgcolor2: /* adjusted for legibility */ 64 64 66 /* p3: 38 38 41 */;
  --darkmode-chat-gray-fgcolor: 254 254 254;
  --darkmode-chat-green-bgcolor1: 49 215 90 /* p3: 106 212 106 */;
  --darkmode-chat-green-bgcolor2: 52 198 89 /* p3: 101 196 102 */;
  --darkmode-chat-green-fgcolor: 254 254 254;
  --lightmode-chat-blue-bgcolor1: 75 184 251 /* p3: 106 182 245 */;
  --lightmode-chat-blue-bgcolor2: 0 122 255 /* p3: 52 120 246 */;
  --lightmode-chat-blue-fgcolor: 254 254 254;
  --lightmode-chat-gray-bgcolor1: 233 233 234;
  --lightmode-chat-gray-bgcolor2: 233 233 234;
  --lightmode-chat-gray-fgcolor: 0 0 0;
  --lightmode-chat-green-bgcolor1: 49 215 90 /* p3: 106 212 106 */;
  --lightmode-chat-green-bgcolor2: 52 198 89 /* p3: 101 196 102 */;
  --lightmode-chat-green-fgcolor: 254 254 254;
  --font-weight-default: var(--darkmode-font-weight-default);
  --bgcolor: var(--darkmode-bgcolor);
  --fgcolor: var(--darkmode-fgcolor);
  --accent: var(--darkmode-accent);
  --link: var(--darkmode-link);
  --twitter-bgcolor: var(--darkmode-twitter-bgcolor);
  --twitter-fgcolor: var(--darkmode-twitter-fgcolor);
  --twitter-accent: var(--darkmode-twitter-accent);
  --mastodon-bgcolor: var(--darkmode-mastodon-bgcolor);
  --mastodon-fgcolor: var(--darkmode-mastodon-fgcolor);
  --mastodon-border-color: var(--darkmode-mastodon-border-color);
  --chat-blue-bgcolor1: var(--darkmode-chat-blue-bgcolor1);
  --chat-blue-bgcolor2: var(--darkmode-chat-blue-bgcolor2);
  --chat-blue-fgcolor: var(--darkmode-chat-blue-fgcolor);
  --chat-gray-bgcolor1: var(--darkmode-chat-gray-bgcolor1);
  --chat-gray-bgcolor2: var(--darkmode-chat-gray-bgcolor2);
  --chat-gray-fgcolor: var(--darkmode-chat-gray-fgcolor);
  --chat-green-bgcolor1: var(--darkmode-chat-green-bgcolor1);
  --chat-green-bgcolor2: var(--darkmode-chat-green-bgcolor2);
  --chat-green-fgcolor: var(--darkmode-chat-green-fgcolor); }

@media (prefers-color-scheme: light) {
  :root {
    --font-weight-default: var(--lightmode-font-weight-default);
    --bgcolor: var(--lightmode-bgcolor);
    --fgcolor: var(--lightmode-fgcolor);
    --accent: var(--lightmode-accent);
    --link: var(--lightmode-link);
    --twitter-bgcolor: var(--lightmode-twitter-bgcolor);
    --twitter-fgcolor: var(--lightmode-twitter-fgcolor);
    --twitter-accent: var(--lightmode-twitter-accent);
    --mastodon-bgcolor: var(--lightmode-mastodon-bgcolor);
    --mastodon-fgcolor: var(--lightmode-mastodon-fgcolor);
    --mastodon-border-color: var(--lightmode-mastodon-border-color);
    --chat-blue-bgcolor1: var(--lightmode-chat-blue-bgcolor1);
    --chat-blue-bgcolor2: var(--lightmode-chat-blue-bgcolor2);
    --chat-blue-fgcolor: var(--lightmode-chat-blue-fgcolor);
    --chat-gray-bgcolor1: var(--lightmode-chat-gray-bgcolor1);
    --chat-gray-bgcolor2: var(--lightmode-chat-gray-bgcolor2);
    --chat-gray-fgcolor: var(--lightmode-chat-gray-fgcolor);
    --chat-green-bgcolor1: var(--lightmode-chat-green-bgcolor1);
    --chat-green-bgcolor2: var(--lightmode-chat-green-bgcolor2);
    --chat-green-fgcolor: var(--lightmode-chat-green-fgcolor); } }
html {
  /* prevent comically large text on landscape iPhones by default */
  /* users can still perform their own font-size adjustments */
  -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-default);
  font-weight: var(--font-weight-default);
  font-size: 14pt;
  background: rgb(var(--bgcolor));
  color: rgb(var(--fgcolor)); }

img {
  width: auto;
  height: auto; }

div.block-navbar {
  margin: 12px;
  font-size: 14pt;
  font-weight: 400;
  text-align: left; }
  div.block-navbar a.parent {
    text-decoration: none;
    color: rgb(var(--fgcolor));
    opacity: 0.5; }
    div.block-navbar a.parent:hover {
      opacity: 1; }

/* hero image at the top of blog posts */
div.block-hero {
  background-size: cover;
  background-position: center center;
  height: calc(min(50vw,40vh));
  /* experimental new design */
  /*-webkit-mask-image: -webkit-gradient(
  	linear,
  	left 90%,
  	left bottom,
  	from(rgba(0,0,0,0.25)),
  	to(rgba(0,0,0,0))
  );
  position: relative;
  z-index: -1;*/
  /*height: 360px;
  margin-bottom: -340px;*/
  /*height: auto;
  aspect-ratio: 4/1;
  margin-bottom: calc(-25vw + 20px);*/ }

article {
  padding: 0 1em; }

header.block-header {
  margin: 12px 0;
  text-align: center; }
  header.block-header .title {
    font-size: 24pt;
    text-wrap: balance; }
  header.block-header .subtitle,
  header.block-header .byline {
    font-weight: 400; }
  header.block-header .byline {
    opacity: 0.7;
    font-size: 12pt; }

/* links list on main index */
ul.linktree {
  list-style-type: none;
  padding: 0;
  margin: 30px auto;
  width: 300px;
  font-size: 16pt; }
  ul.linktree li {
    margin: 0;
    text-align: center; }
  ul.linktree a {
    display: inline-block;
    padding: 6px 20px;
    color: rgb(var(--fgcolor));
    text-decoration: none; }
    ul.linktree a:hover:before, ul.linktree a:focus:before {
      content: "👉";
      margin-right: 10px; }
    ul.linktree a:hover:after, ul.linktree a:focus:after {
      content: "👈";
      margin-left: 10px; }

/* articles list on blog index */
ul.articles {
  list-style-type: none;
  padding: 0;
  margin: 30px auto;
  width: 100%;
  max-width: 500px;
  font-size: 16pt; }
  ul.articles .date {
    font-size: 10pt; }
  ul.articles li {
    margin: 0;
    padding: 4px;
    margin-bottom: 16px; }
  ul.articles a {
    display: inline;
    color: rgb(var(--fgcolor));
    text-decoration: none;
    /* artificially expand the hit region */
    padding: 5px;
    margin: -5px; }
    ul.articles a:hover:after, ul.articles a:focus:after {
      content: "👈";
      margin-left: 10px; }

/* the actual article content */
.block-content {
  font-family: var(--font-article-content);
  max-width: 800px;
  margin: 40px auto;
  /* needs rework as it's liable to overflow off the side of mobile screens */
  	/*& [data-title] {
  		text-decoration: underline;
  		text-decoration-style: dotted;
  		cursor: default;
  		position: relative;
  
  		&:hover::after {
  			content: attr(data-title);
  			position: absolute;
  
  			top: -8px;
  			left: 50%;
  			transform: translate(-50%, -100%);
  
  			width: 300px;
  			padding: 5px;
  			border-radius: 10px;
  			border: 2px solid rgb(var(--accent));
  			background: rgb(var(--bgcolor));
  			color: rgb(var(--fgcolor));
  			text-align: center;
  		}
  	}*/
  /* marker for footnotes */ }
  .block-content div.warning-banner {
    background: rgb(var(--bgcolor));
    color: #ee3333;
    border: 2px solid #ee3333;
    border-radius: 15px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: sticky;
    top: 1em;
    z-index: 999; }
  .block-content hr {
    width: 60px;
    height: 0px;
    margin: 2em auto;
    border: none;
    border-top: 2px solid rgb(var(--accent)); }
  .block-content a {
    color: rgb(var(--fgcolor));
    text-decoration-style: solid;
    text-decoration-color: rgb(var(--link));
    text-decoration-thickness: 2px;
    text-underline-offset: 3px; }
    .block-content a:hover {
      text-decoration-skip-ink: none;
      text-decoration-thickness: 4px;
      text-underline-offset: 1px; }
  .block-content sup {
    vertical-align: top;
    position: relative;
    font-size: 0.7em; }
  .block-content table {
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap; }
  .block-content th {
    border-bottom: 1px solid rgb(var(--fgcolor)); }
  .block-content td {
    border-top: 1px dotted rgb(var(--fgcolor)); }
  .block-content td, .block-content th {
    padding: 2px 12px;
    border-left: 1px solid rgb(var(--fgcolor)); }
    .block-content td:first-child, .block-content th:first-child {
      border-left: none; }
  .block-content ul {
    padding-left: 1.5em; }
  .block-content p, .block-content ul, .block-content pre, .block-content blockquote, .block-content video, .block-content > div {
    margin: 1em 0; }
  .block-content h1, .block-content h2, .block-content h3, .block-content h4, .block-content h5, .block-content h6 {
    margin-left: -0.3em; }
  .block-content .overflow-x-auto {
    overflow-x: auto; }
  .block-content .wide {
    position: relative;
    width: 1200px;
    max-width: 100vw;
    left: calc(max(-50vw,-600px) + 50%); }
  .block-content .verywide {
    position: relative;
    width: 1600px;
    max-width: 100vw;
    left: calc(max(-50vw,-800px) + 50%); }
  .block-content .fullwide {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: calc(-50vw + 50%); }
  .block-content .flex-row {
    gap: 1em;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center; }
    .block-content .flex-row img {
      margin: 0; }
  .block-content blockquote {
    background: rgb(var(--accent)/0.1);
    border-left: 2px solid rgb(var(--accent));
    padding: 12px 16px;
    width: fit-content;
    border-radius: 12px;
    /* so the margin-collapse doesn't mess with the padding */ }
    .block-content blockquote > p:first-child, .block-content blockquote > blockquote:first-child {
      margin-top: 0; }
    .block-content blockquote > p:last-child, .block-content blockquote > blockquote:last-child {
      margin-bottom: 0; }
    .block-content blockquote cite {
      opacity: 0.7;
      font-size: 10pt; }
    .block-content blockquote.twitter-tweet {
      font-family: var(--font-tweet);
      padding: 20px;
      margin: 0 auto;
      color: rgb(var(--twitter-fgcolor));
      background: rgb(var(--twitter-bgcolor));
      border: 1px solid rgb(var(--twitter-accent));
      border-radius: 16px;
      max-width: auto; }
    .block-content blockquote.pullquote {
      background: none;
      border: none;
      padding: 0;
      margin: 0px auto;
      text-align: center;
      font-size: 16pt;
      text-wrap: balance;
      /* only supported on chrome canary at time of writing */ }
      .block-content blockquote.pullquote cite {
        line-height: 1.5em;
        display: block; }
  .block-content span.flow {
    display: inline-block; }
  .block-content img, .block-content video {
    margin-left: auto;
    margin-right: auto;
    max-height: 85vh; }
  .block-content p code {
    font-size: 0.9em;
    font-weight: bold; }
  .block-content pre {
    border: 2px solid rgb(var(--accent));
    border-radius: 4px;
    background: rgba(127, 127, 127, 0.1);
    padding: 8px;
    font-size: 0.7em;
    /*overflow: scroll;*/
    white-space: pre-wrap; }
  .block-content div.yt-embed {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9; }
    .block-content div.yt-embed iframe {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%; }
  .block-content div.footnote {
    /*& > ol > li:target::before {
    	content: '👉';
    	position: absolute;
    	margin-left: -2.25em;
    	font-size: 1.5em;
    	margin-top: -0.25em;
    }*/
    /*& > ol > li:target::marker {
    	font-size: 1.3em;
    	font-weight: bold;
    }
    & > ol:has(li:target) > li:not(:target) {
    	opacity: 0.5;
    }*/ }
    .block-content div.footnote > ol > li:target {
      border: 2px solid rgb(var(--accent));
      border-radius: 10px;
      padding: 10px;
      margin-left: -12px; }
      .block-content div.footnote > ol > li:target > p {
        margin: 0; }
  .block-content div.chat-conversation {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; }
  .block-content video.chat-bubble {
    padding: 0; }
  .block-content .chat-bubble {
    font-family: var(--font-chat-bubble);
    padding: 0.45em 0.8em;
    border-radius: 1.2em;
    background-attachment: fixed;
    width: fit-content;
    max-width: 80%;
    line-height: 1.4; }
    .block-content .chat-bubble.blue {
      color: rgb(var(--chat-blue-fgcolor));
      /*background-image: linear-gradient(to bottom, rgb(var(--chat-blue-bgcolor1)), rgb(var(--chat-blue-bgcolor2)));*/
      background: rgb(var(--chat-blue-bgcolor2)); }
    .block-content .chat-bubble.gray {
      color: rgb(var(--chat-gray-fgcolor));
      /*background-image: linear-gradient(to bottom, rgb(var(--chat-gray-bgcolor1)), rgb(var(--chat-gray-bgcolor2)));*/
      background: rgb(var(--chat-gray-bgcolor2)); }
    .block-content .chat-bubble.green {
      color: rgb(var(--chat-green-fgcolor));
      /*background-image: linear-gradient(to bottom, rgb(var(--chat-green-bgcolor1)), rgb(var(--chat-green-bgcolor2)));*/
      background: rgb(var(--chat-green-bgcolor2)); }
    .block-content .chat-bubble.left {
      margin-right: auto;
      /*margin-left: 0.25em;*/ }
    .block-content .chat-bubble.right {
      margin-left: auto;
      /*margin-right: 0.25em;*/ }
    .block-content .chat-bubble.left + .left, .block-content .chat-bubble.right + .right {
      margin-top: -0.9em; }
  .block-content .toots {
    background: rgb(var(--mastodon-bgcolor));
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto; }
    .block-content .toots .toot {
      width: auto;
      margin: auto;
      margin-top: -1px; }
  .block-content .toot {
    font-family: var(--font-toot);
    background: rgb(var(--mastodon-bgcolor));
    color: rgb(var(--mastodon-fgcolor));
    border: 1px solid rgb(var(--mastodon-border-color));
    padding: 1em;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto; }
    .block-content .toot .author {
      font-weight: bold; }
    .block-content .toot .handle {
      font-size: 0.8em;
      opacity: 0.5; }
    .block-content .toot .time {
      font-size: 0.8em;
      margin-left: 0.5em;
      float: right;
      opacity: 0.5; }
    .block-content .toot .text {
      font-size: 0.9em;
      display: inline-block;
      margin: 0.5em 0; }
      .block-content .toot .text:last-child {
        margin-bottom: 0; }
    .block-content .toot img {
      width: 100%;
      display: inline-block; }
    .block-content .toot .attachment {
      font-size: 0.9em;
      display: inline-block; }

/* links at the bottom of the page */
div.footer-links {
  text-align: center; }
  div.footer-links a {
    color: rgb(var(--fgcolor));
    text-decoration: underline;
    text-decoration-style: dotted; }
    div.footer-links a:hover {
      text-decoration-style: solid; }

footer {
  margin: 30px 0;
  font-size: 10pt;
  text-align: center; }

/* larger hit area for devices without fine-grained pointer control (i.e. mobile touchscreens) */
@media (any-pointer: coarse) {
  ul.linktree a {
    padding-top: 8px;
    padding-bottom: 8px; } }
todo {
  background: red;
  color: white;
  padding: 2px; }
  todo:before {
    content: 'TODO: '; }

/*@media (prefers-contrast: more) {
	:root {
		--darkmode-bgcolor: 0 0 0;
		--darkmode-fgcolor: 255 255 255;
		--darkmode-accent: 255 0 255;
		--darkmode-link: 255 0 255;

		--lightmode-bgcolor: 255 255 255;
		--lightmode-fgcolor: 0 0 0;
		--lightmode-accent: 255 0 255;
		--lightmode-link: 255 0 255;
	}

	.content {
		& a {
			color: rgb(var(--fgcolor));
			font-weight: bold;
			text-decoration-style: solid;
			text-decoration-color: rgb(var(--accent));
			text-decoration-thickness: 2px;

			&:hover {
				border: 2px solid rgb(var(--accent));
				margin: -2px;
			}
		}

		& blockquote {
			border: 1px solid rgb(var(--fgcolor));
			border-left-width: 3px;
			background: none;
		}
	}
}*/
/* slightly smaller font size on mobile to keep words-per-line vaguely sensible */
@media only screen and (max-width: 500px) {
  body {
    font-size: 12pt; } }

/*# sourceMappingURL=style.css.map */