.openstories {
	max-inline-size: var(--maximum);
	margin-inline: auto;
  --side: 400px;
  display: flex;
  gap: .75ch;

  > a {
		vertical-align: bottom;
		align-self: end;
  }

  details {
    flex: 1 0;
    display: block;
		height: 1.75ex;
		align-self: end;
    inline-size: 0;
  }

	details:focus,:hover > summary {
		border-color: var(--mix-5);
	}

  details > summary {
    list-style-type: "";
    background-color: var(--mix-2);
		border: solid var(--mix-3);
		border-width: 1px 1px 1px 1px;
    height: 100%;
  }

  details[open] {
    flex: 0 1 1ch;
    inline-size: 80%;
    max-inline-size: var(--side);
    position: relative;
  }

  details[open] > summary {
    background-color: var(--foreground);
		border: solid var(--mix-5);
		border-width: 1px 1px 0 1px;
  }

  details[open] > summary::after {
    content: "";
    display: block;
    inline-size: var(--side);
    height: 0;
  }

  details > figure {
    z-index: 999;
    position: absolute;
    border: solid var(--mix-5);
    border-width: 0 1px 1px 1px;
    background-color: var(--background);
    margin: 0;
    display: flex;
    inline-size: 100%;
    max-inline-size: var(--side);
    flex-direction: column;
  }

  details > figure > figcaption {
    word-wrap: anywhere;
    width: 100%;
    padding: 0.5ex 1ch;
    border: solid var(--mix-5);
    border-width: 1px 0 0 0;
  }

  details > figure > div {
    display: flex;
    justify-content: space-between;
    padding: 0.5ex 1ch;
  }

  details > figure time {
    text-align: right;
  }

  details > figure picture {
    height: max-content;
    text-align: center;
    line-height: var(--side);
  }

  details > figure img {
		display: block;
    height: max-content;
		max-inline-size: 100%;
    text-align: center;
  }

  details > figure video {
    inline-size: 100%;
    max-inline-size: var(--side);
  }
}
.project {
  margin: 1.5ex 2ch;
  --block-height: 50px;
  --ratio: 1;
  p {
    margin: 0;
  }
  div {
	  display: flex;
    gap: 0.5em;
    padding: 0.5em 0.5em 0 0.5em;
    flex-wrap: wrap;
  }
  picture,
  img {
    height: var(--block-height);
    max-inline-size: calc(var(--block-height) * var(--ratio));
  }
}
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;
	}
}