.dateline {
	display: flex;
	span {
		display: inline-block;
		margin: 0;
	}
	time {
		flex: 0 0 auto;
	}
	.line {
		margin-inline: 0ch;
		flex: 0 1 calc(.25ch * var(--duration));
		align-self: center;
		border-top: 1px solid var(--mix-2);
	}
}
.post-header {
  p {
    margin: 0.25em 0;
  }
  a {
    font-size: 0.75em;
  }
}
article {
		line-height: 1.55;
		& img {
			height: max-content;
		}
		p > code {
  		font-size: 0.9em;
			background-color: var(--mix-1);
			border: solid var(--mix-2);
			border-width: 1px 1px 1px 1px;
			padding: 0.1ex 0.5ch;
			wrap: nowrap;
		}
		pre {
			max-inline-size: min(var(--available), var(--maximum));
			min-inline-size: min(var(--available), var(--measure));
			inline-size: min-content;
			font-family: monospace;
			background-color: var(--mix-1);
			overflow-x: auto;
			border: 1px solid var(--mix-2);
			padding: 1ex 1ch;
			p {
				margin-block-end: 0;
				code {
					border-width: 0;
				}
			}
		}
		pre:has(+ div.any-width) {
			min-inline-size: unset;
		}
		figure.snippet {
			margin-inline: 0;
			pre {
				margin: 0;
			}
			figcaption {
				display: inline-block;
				font-size: 0.9em;
				padding-bottom: 0.5ex;
				border: solid var(--mix-2);
				border-width: 1px 1px 0 1px;
			}
		}
		@media (prefers-color-scheme: dark) {
			p:has(+ div.invert.light) img {
				filter: invert(1);
			}
		}
	}
a.home {
	font-size: var(--s-1);
	position: sticky;
	display: inline-block;
	top: 0;
	padding: 0 0 0 .5ch;
	margin-inline-start: max(calc(-1 * var(--gutter)), calc((100vw - var(--maximum))/2 - (var(--gutter) + 2ch)));
	margin-inline-end: 0;
	margin-block-start: 0.5ex;
	opacity: 0.5;
}

a.home:nth-of-type(2) {
	position: static;
	padding: 0;
	margin-inline-start: 0
}
.mmmeon {
  display: inline-block;
  a {
    display: flex;
    text-decoration: none;
    &:hover {
      text-decoration: none;
    }
  }
}
.redacted * {
      visibility: hidden;
      font-size: 0;
  }
  .redacted::after {
	  visibility: visible;
	  font-size: 1rem;
	  inline-size: var(--chars);
	  content: "";
	  height: var(--s1);
	  padding: 0.25ch 0;
	  vertical-align: middle;
	  display: inline-block;
	  background: var(--mix-1);
		border: 1px solid var(--mix-2);
	  color: var(--accent);
	}
.sitemap {
  display: grid;
  text-align: center;
  justify-content: space-between;
  grid-auto-flow: row dense;
	border: 1px solid var(--mix-2);
	background: var(--mix-1);
	padding: 1em;
  flex: 1 2;
  a {
    padding: 0 0.25;
		align-self: center;
  }
  #home {
    grid-area: 10 / 10;
  }
  #about {
    grid-area: 9 / 11;
  }
  #work {
    grid-area: 11 / 9;
  }
  #moss {
    grid-area: 12 / 9;
  }
  #ara {
    grid-area: 11 / 8;
  }
  #colophon {
    grid-area: 13 / 11;
  }
  #uses {
    grid-area: 10 / 12;
  }
  #projects {
    grid-area: 11 / 11;
  }
  #awesomewm {
    grid-area: 11 / 12;
  }
  #posts {
    grid-area: 9 / 9;
  }
  #htmlday {
    grid-area: 8 / 8;
  }
  #now {
    grid-area: 8 / 12;
  }
  #ai {
    grid-area: 11 / 13;
  }
  #files {
    &:before {
      content: ".";
    }
    grid-area: 12 / 13;
  }
  #map {
    grid-area: 1 / 20;
    text-align: right;
  }
  #log {
    grid-area: 20 / 20;
    text-align: right;
  }
  #feeds {
    grid-area: 20 / 1;
  }
  #stories {
    grid-area: 12 / 10;
  }
	#webc-scoped {
		grid-area: 7 / 8;
	}
}
footer {
  margin: 1em 0 0 0;
  border-top: 1px solid var(--foreground);
  padding: 1em 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  @media screen and (max-inline-size: 500px) {
    grid-template: auto / 1fr;
  }
  > * {
    flex: 1 1;
    flex-basis: calc(var(--measure) / 2);
  }
  p {
    margin: 0.75em 0em;
  }
  ul {
    display: flex;
    margin: 0.75em 0em;
    gap: 0.5em;
    padding: 0;
    li {
      display: block;
    }
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --foreground: hsl(0 0% 100%);
    --background: hsl(0 5% 5%);
    --accent: hsl(0 0% 34%);
    --a: hsl(211, 42%, 75%);
    --visited: hsl(285, 69%, 80%);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --foreground: hsl(0 0% 0%);
    --background: hsl(0 0% 100%);
    --accent: hsl(0 0% 90%);
    --a: hsl(225, 90%, 48%);
    --visited: hsl(265, 67%, 50%);
  }
}

:root {
  --mix-1: color-mix(in hsl, var(--background) 95%, var(--foreground) 5%);
  --mix-2: color-mix(in hsl, var(--background) 85%, var(--foreground) 15%);
  --mix-3: color-mix(in hsl, var(--background) 75%, var(--foreground) 25%);
  --mix-4: color-mix(in hsl, var(--background) 65%, var(--foreground) 35%);
  --mix-5: color-mix(in hsl, var(--background) 55%, var(--foreground) 45%);
  --mix-6: color-mix(in hsl, var(--background) 45%, var(--foreground) 55%);
  --clear: rgba(0, 0, 0, 0);
  --gutter: 1.5rem;
  --measure: 55rem;
  --ratio: 1.15;
  --maximum: calc(var(--measure) * var(--ratio));
  --available: calc(100vw - 2*var(--gutter));
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
}

* {
  box-sizing: border-box;
  max-inline-size: var(--measure);
}

html {
	scroll-behavior: smooth;
}

html,
body,
div,
header,
main,
table,
figure {
  max-inline-size: none;
}

@supports (scrollbar-gutter: stable) {
  * {
    scrollbar-gutter: stable;
  }
}

html {
  font-size: calc(1rem + 0.05vw);
  padding: 0;
  tab-size: 4;
  font-family:
    sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
  font-feature-settings: normal;
  font-variation-settings: normal;
}

nav,
section,
footer,
article {
  max-inline-size: var(--maximum);
  margin-inline: auto;
}

body {
  background: var(--background);
  color: var(--foreground);
  margin: 0;
  padding: 0 var(--gutter);
}

h1 {
  font-size: var(--s3);
}

h2 {
  font-size: var(--s2);
}

h3 {
  font-size: var(--s1);
}

h4 {
  font-size: var(--s0);
}

h5 {
  font-size: var(--s-1);
}

a {
  color: var(--a);
  text-decoration: none;
  &:visited {
    color: var(--visited);
  }
  &:hover,
  &:focus {
    text-decoration: underline;
    text-underline-offset: 0.2ex;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 35%);
  }
  transition: color 200 linear;
}

img {
	max-inline-size: var(--maximum);
  inline-size: 100%;
  font-style: italic;
  text-wrap: balance;
  text-align: center;
}

time {
  text-transform: lowercase;
}

ul {
  padding-inline-start: 0.75ch;
  li {
    list-style-type: none;
  }
}

.font\:heavyset {
  font-size: var(--s6);
  font-weight: 600;
}

.font\:bold {
  font-weight: 800;
}

.font\:uppercase {
  text-transform: uppercase;
}

.font\:small {
  font-size: var(--s-1);
}

.a\:not {
  color: var(--foreground);
  &:visited {
    color: var(--foreground);
  }
  &:hover {
    text-decoration: none;
  }
}

.flex {
  display: flex;
}

.bg-text {
  padding: 0.25ex 1ch 0.35ex 1ch;
  background: var(--mix-1);
  border: 1px solid var(--mix-2);
}

.lc {
  text-transform: lowercase;
}

table {
	max-inline-size: min(var(--available), var(--maximum));
	min-inline-size: min(var(--available), var(--measure));
	inline-size: var(--maximum);
  overflow: scroll;
	display: grid;
  grid: auto / repeat(auto-fill, 1fr));

  :has(tr > *:nth-child(1)) { --count: 1; }
  :has(tr > *:nth-child(2)) { --count: 2; }
  :has(tr > *:nth-child(3)) { --count: 3; }
  :has(tr > *:nth-child(4)) { --count: 4; }

	thead {
		background-color: var(--mix-1);
    margin-bottom: .5ex;
		th {
		font-weight: unset;
		}
	}
  thead, tbody, tr {
		display: grid;
		grid-column: 1 / calc(var(--count) + 1);
		grid-template-columns: subgrid;
    text-align: left;
  }
  thead, tbody{
	  border: 1px solid var(--mix-2);
  }
	tr {
    &:nth-child(2) {
      background-color: yellow;
    }
	}
	tr:nth-child(even) {
		background-color: var(--mix-1);
	}
	th, td {
		padding: .5ex 1ch;
	}
}