/* The rows of the table are added by JavaScript and end up as direct children
   of the table, so the table styling of the theme, which addresses tbody, does
   not reach them. Separate the date from the name of the event ourselves, and
   keep the date on one line, it is one piece of information and reads badly
   broken after the weekday. */
#upcoming td:first-child {
  padding-inline-end: 1em;
  white-space: nowrap;
}

/* The table stands in a prose column, which the theme limits to 65 characters
   so that running text stays readable. A date and the name of an event next to
   each other do not fit into that, so the names were wrapped over several
   lines. Lift the limit off the column and put it back on everything in it
   except the table, which leaves the table room to grow while the text around
   it keeps its width. */
section.prose:has(> #upcoming) {
  max-width: none;
}

section.prose:has(> #upcoming) > :not(#upcoming) {
  max-width: 65ch;
  margin-inline: auto;
}

/* The theme lays a table out as a block, "table { display: block; overflow:
   auto }", so that a wide one can be scrolled sideways. A block fills its
   parent instead of shrinking to its content the way a table does, so across
   the whole width of the page the entries would stay at its left edge.
   fit-content asks for the width of the content, which the automatic margins
   then centre, and it never exceeds the column, so a display too narrow for
   the table still wraps the names instead of overflowing. */
#upcoming {
  width: fit-content;
  margin-inline: auto;
}