p>.extra{color:var(--f-weak);margin-left: 1ch;}
.compat { font-family: sans-serif }

#avatar {
  display: flex;
  flex-direction: row;
  place-items: center;
}
#avatar > img {
  border-radius: 999px;
  border: 4px solid var(--b);
  box-shadow: 0 0 0 3px currentColor;
  background: #387c9d;
}
.p-note a, nav ul::before { color: #ff568d; }

nav ul { display: flex; list-style: none; margin: 1em 0; }
nav li + li::before { content: '•'; margin: 0 1ch; color: var(--f-weak); }
nav li a { font-weight: unset }
nav ul::before { content: '⥽'; margin: 0 1ch; }

#contact ul { list-style: none }
#contact ul > li + li { margin-top: .3em }
#contact ul a { font-weight: unset }
#contact ul li { color: var(--f-subtler) }

.item {
  font-weight: unset;
  display: flex;
  flex-direction: row;
  padding: 1.8em;
  padding-left: 1.4em;
  background: #2b102b;
  border: 1px dashed var(--f-border);
  border-radius: 18px;
}
.item + .item { border-top: 1px solid var(--f-border) }
.item > span:nth-child(2) { flex-grow: 1 }
a.item:hover { text-decoration: none }
a.item:hover h2 { text-decoration: underline wavy currentColor 1px }
.item h2 { font-size: 1em }
.item p { color: var(--f-subtler) }
.item h3:not(:first-child) { margin-top: 1em }
.item h3 {
  color: var(--f-weak);
  font-size: 1em;
  border-bottom: 1px solid var(--f-border);
}
.item .heading-note {
  margin-left: 2em;
  font-style: italic;
  margin-top: .5em;
}
.item ul {
  list-style-type: none;
  margin: .5em 0;
}
.item ul li::before { content: "•"; margin: 0 1ch; color: var(--f-weak); font-weight: bold; }

dl a { display: block; font-weight: unset; }
dl dt {
  display: inline;
  font-weight: 700;
}
dl dt::after { content: ": " }
dl dd {
  display: inline;
  margin: 0;
  color: var(--f-subtler);
}
.webring {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.webring .spacer { flex-grow: 1 }
.webring .arrow {
  font-weight: unset;
  margin-left: 1em;
  font-family: var(--monospace);
}

.item .icon, #contact .icon { margin-right: .5em }
.item .icon { color: var(--f-weak) }

@media(width<=512px) {
  #avatar {
    place-items: start;
    flex-direction: column;
  }
}

@media(prefers-color-scheme:light) {
  #avatar > img {background: #b3667f}
  .p-note a, nav ul::before { color: unset; }
  .item { background: #fff7f6; }
}

#tv {
  border:none;
  display:block;
}