/* 2023-07-02 10:38 */

/* There's nothing to be gained by allowing images to overflow the right
   margin.  Panning is annoying and they can zoom if they want to.
   Unfortunately, this has the side-effect that any img specifying an
   explicit height will squash instead of scaling down proportionally.
   Height attributes must be expunged or changed to auto. */
img {max-width: 100%}

/* Picture on the left, text on the right, changing to a vertical layout when
   the screen is narrow.  The width of the picture must be provided.

   Unexplained bug:
   The width of the txt column has to be reduced by a fudge factor or it
   always wraps.  32px suffices for Firefox but Chrome needs more.  If not
   for this, the txt column could just use flex-grow: 1.

   Known problem:
   It's a documented behavior of flex containers that margins don't
   "collapse."  This can result in a doubled vertical margin between
   paragraphs of text when the pictxt div is followed by a regular paragraph.
   If you put paragraph tags around the img, you'll get a doubled margin
   above the div.
*/
.pictxt {display: flex; flex-wrap: wrap}
.pictxt .pic {width: auto; text-align: center}
.pictxt .txt {width: calc(100vw - var(--w) - 64px);
	      margin: 0em 0em 0em 1em}
@media (max-width: 1000px) {
  .pictxt .pic {width: 100vw}
  .pictxt .txt {width: 100vw; margin: 0em 0em 0em 0em}
}

/* A pile of things that all have a reasonable fixed size.  Stacks from the
   left and does not center regardless of screen width.  Internally, content
   is centered by default.  This is good for images with captions but bad for
   pre text.

   Known problem:
   https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
   Results in extra vertical gap between rows when the content is img.
   display: block breaks the ability to put two images side by side in the
   first column, so instead I've reduced the vertical gap to compensate.
*/
.fixflx {display: flex; flex-wrap: wrap; gap: 4px 8px}
.fixflx .fix {width: auto; text-align: center}

/* No-indent list.  Nested lists need indenting but the root list can be
   flush with the left margin of surrounding text.

   padding-left: 1em is an approximate hack that looks right for unordered
   lists and *nearly* right for ordered lists that don't count higher than
   single digits.  There is no good way to do it.

   You can automatically apply this based on context using CSS selectors.
   I choose to be simple and dumb.  When you want no indent, say noindent.
*/
ul.noindent {padding-left: 1em}
ol.noindent {padding-left: 1.1em}

/* Increase the space between the number and text of ordered lists so it
   looks like 2 spaces after the period.  Another approximate hack. */
ol>li {padding-left: 0.2em}