:root {
  /* CSS: A px is not a pixel. A px is not a pixel. A px is not a pixel. A px is not a pixel. Not on screen and not in print. It is a misnomer. */
  /* CSS: A px is an unfathomable entity; an ever-changing magic number that, in mysterious ways, tends to produce workable results. Hopefully. */
  --content-width: 640px; /* was: 41rem */
  --content-width-max: min( 33em, 100% ); /* keep lines of text short for readability. goal: 55 - 75 characters */ /* should not need adjustment */
  --content-font: var(--main-font, serif);
  --content-font-sc: var(--main-font-sc, sans-serif);
  --line-height: 1.6em; /* 3.2ex, 2.32rem - about 1.5<unitless> */ /* needs to be relative unit for scaling */ /* headings may need extra room */
  --content-margin: 3.6rem; /* inline-margin for main content */
  --inside-margin: 1.8em; /* used for first-line-indent, blockquote, lesser headings */
  --nav-font: var(--header-font);
  /* --main-font-size: clamp( 1rem, 2.1vw, 4vw ); */ /* 1.9rem, 1rem */
  --main-font-size: clamp( 1rem, 1.7vw, 1.7vw ); /* last value is useless; just set it to same as middle value */
  --intro-animation-duration: 3.5s;
  --nav-ol-block-padding: 0.6rem;
  --none: none; /* only so it can be used below */
  --no: var(--none, 0); /* set to none, fallback to 0 */ /* could be called 'none-or-zero', but 'no' is easier to work with for most people */
    /* some properties require 0, others 'none' to be hidden. */
    /* '--no' allows the use of one single variable to switch both kinds of properties. */
    /* '--show-header' can be set by custom site css. */
    /*   If set, '--show-header' will evaluate to 'none' and fallback to zero for properties that don't work with 'none' */
    /*   If '--show-header' is not set, the value will become 'undefined' and result in a no-op */
    /* '--show-header' can be thought of as '--zero-or-none-if-header-disabled', */
    /* but '--show-header' is a more intuitive name for people to change site layout */
  --bg-image-background-attachment: fixed;
}

/* vertical text rhythm: use multiples of body text line-height for header line-heights, top- and bottom margins */

@font-face {
  font-family: "URWPalladioL";
  src:
    local("URWPalladioL-Roma"),
    local("TeXGyrePagella-Regular"),
    local("PalatinoLinotype-Roman"),
    local("PalatinoLTStd-Roman"),
    local("PalatinoNova-Regular"),
    url("/.simplicity/.skeleton/font/URWPalladioL-Roma.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "URWPalladioL";
  src:
    local("URWPalladioL-Ital"),
    local("TeXGyrePagella-Italic"),
    local("PalatinoLinotype-Italic"),
    local("PalatinoNova-Italic"),
    url("/.simplicity/.skeleton/font/URWPalladioL-Ital-temp.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "URWPalladioL";
  src:
    local("URWPalladioL-Bold"),
    local("TeXGyrePagella-Bold"),
    local("PalatinoLinotype-Bold"),
    local("PalatinoNova-Bold"),
    url("/.simplicity/.skeleton/font/URWPalladioL-Bold-temp.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "URWPalladioL";
  src:
    local("URWPalladioL-BoldItal"),
    local("TeXGyrePagella-BoldItalic"),
    local("PalatinoLinotype-BoldItalic"),
    local("PalatinoNova-BoldItalic"),
    url("/.simplicity/.skeleton/font/URWPalladioL-BoldItal-temp.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "TeXPalladioL-SC";
  src:
    local("TeXPalladioL-SC"),
    local("TeXGyrePagella-Regular"),
    local("PalatinoLinotype-Roman"),
    local("PalatinoNova-Imperial"),
    url("/.simplicity/.skeleton/font/TeXPalladioL-SC.woff2") format("woff2");
    /* observation: TeXGyrePagella's small caps raise the baseline? The text is set too high. */
  font-weight: normal;
  font-feature-settings: "smcp" 1;
  /* font-synthesis: none; */ /* can this be used here? */
  /* font-style: normal; */
  /* font-variant: small-caps */ /* does this work? this way? */
}

html {
  height: 100%;
}

body {
  height: 100%; /* less than 100% to prevent vert. scrollbars from footer - needs a better solution */ /* was 95, should be ok now with 100 */
  overflow-x: hidden; /* hack: prevent horizontal scrollbars in small-screen view */
  overflow-y: scroll; /* always show scrollbar. Prevents non-full pages from centering menu off-center */
  display: flex; /* to enable sticky footer */
  flex-direction: column;
  /* background-color: #3f0220; */
  background-color: var(--main-bg-color);
  /* background-image: var(--intro-bg-image);
  background-repeat: no-repeat;
  background-size: 95vmin;
  background-position: center 55%;
  background-attachment: var(--bg-image-background-attachment); */
  font-family: var(--content-font);
  font-size: var(--main-font-size);
  color: var(--main-text-color);
  caret-color: var(--main-contrast-color);
  margin-block-start: 0rem;
  margin-block-end: 0rem;
  margin-inline-start: 0rem;
  margin-inline-end: 0rem;
}

body::before {
  content: "";
  background-color: var(--main-bg-color);
  background-image: var(--body-bg-image);
  background-blend-mode: luminosity;
  filter: var(--body-bg-filter);
  background-attachment: var(--bg-image-background-attachment);
  background-repeat: var(--bg-repeat);
  background-size: var(--bg-size);
  background-position-x: center;
  background-position-y: var(--bg-position-y);
  /* display: block; */
  position: fixed;
  width: inherit;
  height: inherit;
  left: 0rem;
  right: 0rem;
  z-index: -1;
}

::selection {
  /* text-shadow: 1px 1px 1px var(--main-bg-color); */
  background-color: var(--main-contrast-color);
  color: var(--main-bg-color);
}

@keyframes openingOld {
  0% {
    opacity: 0;
    z-index: 40;
  }
  36% {
    opacity: 1;
    z-index: 40;
	}
  54% {
    opacity: 1;
    z-index: 40;
	}
  90% {
    opacity: .15;
    z-index: 40;
	}
  100% {
    opacity: 0.00;
    z-index: -210; /* 'initial' breaks some clients (old firefox, no js) */
  }
}

@keyframes opening {
  0% {
    background-color: black;
    opacity: 0;
    z-index: 40;
  }
  9% {
    opacity: 1;
    z-index: 40;
	}
  64% {
    background-color: var(--main-bg-color);
    opacity: 1;
    z-index: 40;
  }
  91% {
    opacity: 1;
    z-index: 40;
	}
  99% {
    opacity: .15;
    z-index: 40;
	}
  100% {
    opacity: 0.00;
    z-index: -210; /* 'initial' breaks some clients (old firefox, no js) */
  }
}


.introImage,
.introImage::after {
  background-image: var(--intro-bg-image);
  /* opacity: 0; */
  /* opacity: 0.05; */
  /* display: none; */ /* enabled via JavaScript */
  /* transition: opacity 1.5s ease-in-out; */
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -210;
  position: fixed;
  background-color: var(--main-bg-color); /* to overlay background image and make animation visible */
  background-repeat: no-repeat;
  background-size: 96vmin;
  background-position: center 55%;
  /* animation-name for *main* is set via JavaScript the first time for each session. */
  /* animation-name for *this* is set to 'opening' via JavaScript. */
  animation-name: none; /* if you change timing here, change delay for animation on main to match */
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-duration: var(--intro-animation-duration);
  animation-direction: normal;
  animation-fill-mode: both;
}

@keyframes content {
  0% {
    opacity: 0;
  }
  36% {
   opacity: 1;
  }
  54% {
    opacity: 1;
  }
}

.bgimage-static,
.bgimage-static::after {
  background-image: var(--intro-bg-image);
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -200;
  position: fixed;
  background-repeat: no-repeat;
  background-size: 95vmin;
  background-position: center 55%;
  background-attachment: fixed;
}

header {
  color: var(--header-text-color);
  min-height: var(--show-header); /* allow main content to start at the top of the page if no header is shown */
    /* testme: how to do this only if header is 'empty'? Probably easiest to overwrite in site css */
  /* height: 2.8rem; */ /* prevent rounded corners from creating artifacts interacting with nav / .breadCrumbs */
  /* border-start-start-radius: 3rem; */ /* -start- values need to be equal to nav > ul values in navigation.css */
  /* border-start-end-radius: 3rem; */
  /* border-end-start-radius: 1.6rem; */
  /* border-end-end-radius: 1.6rem; */
  margin: 0rem;
  padding-block-start: 0rem;
  /* padding-block-end: var(--nav-ol-block-padding); */ /* is this really nav-ol-block-padding or independent number? */
  /* background-color: var(--header-bg-color); */
}

header a {
  color: var(--header-link-color);
}

main {
  position: relative;
  flex: 1 0 auto;
  font-family: var(--content-font); /* is this redundant? */
  text-align: justify;
  hyphens: auto; /* not yet supported by all browsers */
  hanging-punctuation: first, allow-end, last; /* not yet supported by most browsers */
  line-height: var(--line-height);
  /* max-width: 70%; */ /* this has no effect */
  border-radius: var(--main-border-radius);
  /* min-height: max-content; */
  z-index: 0; /* auto makes things weird (blockquote disappearing) */
  animation-name: none; /* this is set to 'content' via JavaScript the first time for each session */
  animation-timing-function: ease-out;
  /* animation-delay is set via JavaScript. */
  /* animation-delay: var(--intro-animation-duration); */
  animation-iteration-count: 1;
  animation-duration: 3s;
  animation-direction: normal;
  animation-fill-mode: both;
  --main-border-color: #ffffff22;
  /*
  border-inline-start: 2rem solid var(--main-border-color);
  border-inline-end: 2rem solid var(--main-border-color); */
  /* border-block-start: 1.24rem solid var(--main-border-color); */ /* golden ratio */
  /* border-block-end: 1.24rem solid var(--main-border-color); */
  padding-block-start: 0.9rem;
  padding-block-end: 3.6rem;
  margin-inline-start: 2rem;
  margin-inline-end: 2rem;
  /* margin-block-start: 3.6rem; */ /* larger than collapsed nav menu */
  /* 3.6rem is the desired top-margin. the others are calculated from 0, since the header is set to 0 height. */
  /* this is very fragile if visible header height changes... */
  /* margin-block-start: 0.2rem; */ /* 4.5rem is desired for large screens */
  margin-block-start: var(--show-header, clamp( 0.2rem, 10vh, 4.5rem ) ); /* allow content to start from the top if header is hidden */
  margin-block-end: 3.6rem;
}

main:focus {
  outline:none;
}

/* for background image */
/* main, #pageFooter, footer .websiteInfo { */
main {
  background-image: var(--content-bg-image);
  background-color: var(--content-bg-color);
  background-blend-mode: multiply;
  background-attachment: var(--bg-image-background-attachment);
  background-repeat: var(--bg-repeat);
  background-size: var(--bg-size);
  background-position-x: center;
  background-position-y: var(--bg-position-y);
}

/* this is needed for .draft */
.mainContentWrapper {
  background-image: inherit;
  background-color: inherit;
  background-blend-mode: inherit;
  background-attachment: inherit;
  background-repeat: inherit;
  background-size: inherit;
  background-position-x: center;
  background-position-y: inherit;
}

#main + * { /* first element after anchor - any element */
  /* margin-block-start: 4ex; */ /* position "skip to content" / #main anchor so that top/beginning of text is not cut off */
                                 /* doesn't seem to be necessary anymore - if enabled, need to revert for printing */
}

/* for background image */
/* footer .contactinfo, footer .websiteInfo { */
/* footer .contactinfo { */
footer .contactinfo, #pageFooter, footer .websiteInfo {
  background-image: var(--footer-bg-image);
  background-color: var(--footer-bg-color);
  background-blend-mode: multiply;
  background-attachment: var(--bg-image-background-attachment);
  background-repeat: var(--bg-repeat);
  background-size: var(--bg-size);
  background-position-x: center;
  background-position-y: var(--bg-position-y);
}

footer {
  /* position: absolute; */
  right: 0;
  left: 0;
  bottom: 0;
  color: color: var(--footer-text-color);
  /* padding-block-start: 0rem; */
  /* padding-inline-end: 2rem; */
  /* padding-block-end: 1.5rem; */
  margin-block-start: 1rem;
  margin-block-end: 1.5rem; /* fixme: gives too much margin on non-full pages */
  margin-inline-start: 0rem;
  margin-inline-end: 0rem;
}

footer a {
  color: var(--footer-link-color);
}

.websiteInfo {
  display: inline-block;
  font-size: 0.8em;
  color: var(--footer-text-color); /* was: --nav-link-empty-color */
  vertical-align: baseline;
  text-align: end;
  min-width: min-content; /* should be max-content, but with line-breaks if it doesn't fit */
  border-start-start-radius: 1rem;
  border-end-start-radius: 1rem;
  user-select: none;
  padding-block-start: 0.25rem;
  padding-block-end: 0.4rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5em;
  margin-block-end: 0.8em;
}

/* some overwrites if footer is shown to make .websiteInfo aligned with #pageFooter */
/* (instead of as a separate float-out) */
#pageFooter:not(:empty) + .websiteInfoWrapper > .websiteInfo {
  width: 100%;
  border-start-start-radius: 0rem;
  border-end-start-radius: 0rem;
  padding-block-start: 1.2em;
  padding-block-end: 1.2em;
  padding-inline-start: 0rem;
  margin-block-end: 0em;
}

/* only have bottom margin if websiteInfo is disabled */
#pageFooter:not(:empty) + .websiteInfoWrapper, #pageFooter:not(:empty) + .websiteInfoWrapper > .websiteInfo {
  margin-block-end: 0em;
}

em {
  font-style: italic; /* italics may not be default UA style */
}

strong {
  font-weight: bold;
}

.websiteInfoWrapper {
  display: block;
}

.websiteInfoInner {
  display: inline;
}

#pageFooter:not(:empty) + .websiteInfoWrapper .websiteInfoInner {
  margin-inline-end: calc( 0.8em + 1.5em );
}

.contactinfoWrapper, .websiteInfoWrapper {
  /* display: block; */ /* ATTN: if you change this, also change display for .contactinfoWrapper below! */
  box-sizing: border-box;
  text-align: end;
  margin-inline-start: 0rem; /* 1.5rem for 'floating' effect */
  margin-inline-end: 0rem;
  /* width: 100%; */
}

.websiteInfo a {
  /* padding-inline-end: 1rem; */ /* line up with contactinfo label above */
}

#pageFooter:empty + .websiteInfoWrapper .websiteInfoInner {
  padding-inline-end: 0.8rem; /* account for dot, line up end of text with contactinfo label above */
}

.contactinfoWrapper {
  display: var(--show-contactinfo, block); /* allow contactinfo in footer to be hidden. Temporary fix, need to have this configurable. */
  margin-block-end: 1.9em; /* fixme: gives too much margin on non-full pages */
}

main h1, main h2, main h3, main h4, main h5, main h6 {
  line-height: calc( var(--line-height) * 1 ); /* to ignore height set via x-height by main */
  letter-spacing: 0.07em;
  hyphens: none;
  text-indent: 0em; /* do not indent headings, even if they are inside a paragraph */
  word-wrap: break-word; /* don't cut off words that are wider than the viewport of narrow screens */
  page-break-after: avoid; /* old browsers */
  break-after: avoid;
  /* margin-inline-start: 1.75rem; */ /* left-hanging headings */
  /* margin-inline-end: 1.75rem; */
  margin-block-start: calc( var(--line-height) * 1 ); /* multiple of line height for vertical alignment */
  margin-block-end: calc( var(--line-height) * 0 );
}

/* firefox (sometimes?) doesn't honor headings' break-after, leaving the heading at the end of the page */
/*    to 'fix' this uglyness, allow break after heading. Makes no sense, but produces the desired result. */
h1 + .paragraph, h2 + .paragraph, h3 + .paragraph, h4 + .paragraph, h5 + .paragraph, h6 + .paragraph {
  page-break-inside: initial; /* old browsers */
  break-inside: initial;
}

main h1 {
  font-size: 1.6em;
  letter-spacing: 0.02em;
  margin-block-start: calc( var(--line-height) * 0.8 );
  margin-block-end: calc( var(--line-height) * 0.2 );
}

main h1:first-of-type {
  margin-block-start: calc( var(--line-height) * 0.5 );
}

main h1:first-of-type + * { /* fixme: do this without not */
  margin-block-start: calc( var(--line-height) * 1 );
}

main h2 {
  font-size: 1.2em;
}

main h3 {
  font-family: var(--content-font-sc);
  font-size: 1.1em;
  font-weight: normal; /* font doesn't have bold small caps */
  /* text-decoration: dotted underline; */
  /* border-block-start: 1px solid var(--main-text-color); */ /* nice, but moves text down by border-width */
  /* border-inline-start: 1px solid var(--main-text-color); */ /* nice in combination with padding-inline-start */
  /* padding-inline-start: 0.8em; */
}

main h4 {
  font-size: 1em;
  text-indent: var(--inside-margin);
}

main h5 {
  font-family: var(--content-font-sc);
  font-size: 0.9em;
  font-weight: normal;
  text-indent: var(--inside-margin);
}

main h6 {
  font-size: 0.9em;
  font-weight: normal;
  text-indent: var(--inside-margin);
}

/* general classes */
.width-percent-45 {
  width: 45%;
}

.width-percent-100 {
  width: 100%;
}

/* This corresponds to ( '--content-width' - 1px ). Remember to keep in sync. */
@media screen and ( max-width: 639px ) {
  /* for small screens, make h1 and h2 headings 1 'size' smaller */
  /*   this means h3 will be equal to h4 in size */
  /* adapted from Firefox */
  h1 {
    font-size: 1.5em;
    margin-block-start: .83em;
    margin-block-end: .83em;
  }

  h2,
  :is(article, aside, nav, section)
  h1 {
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
  }
  /* end changed heading sizes */

}

/* Same value as when hamburger menu starts to be shown. Remember to keep in sync. */
/* FIXME: this is a temporary hack that needs to go away. */
@media ( max-width: 1279px ) {

  .navContactHighlight {
    /* position: relative; */ /* enable tooltip to be absolutely positioned */
  }

  .navContactHighlight .tooltip-em:hover::before, .navContactHighlight .tooltip-em:focus-within::before {
    /* display: none; */ /* fixme: temporarily, until position fix is in (it only shows cut-off border as it is now) */

    /* fixme: this makes it show at the top of the screen. Not optimal, but working. Note however that it may cover the link! */
    /* position: absolute; */
    width: 75%; /* ensure em.add breaks before edge of screen on narrow screens. */
    top: calc( var(--line-height) * -5 );
    inset-inline-start: 0.2em;
    /* needed to allow clicks to work even when tooltip covers link. However, if links other than the tooltipped-link are underneath, this would activate that link. Terrible idea. */
    /* pointer-events: none; */
  }

}

/* Eschew the 'p' paragraph element, for it is weird and unwieldy. */
/* Also see https://css-tricks.com/some-html-is-optional/#comment-1751388 */
/* instead, use a div to create proper 'logical' paragraphs */
/* html default: display: block, margin-block-*: 1em; */
.paragraph {
  /* display: block; */
  page-break-inside: avoid; /* old browsers */
  break-inside: avoid;
  orphans: 2; /* minimum number of lines for new paragraph on old page. Otherwise start on new page. */
  widows: 3; /* minimum number of lines for current paragraph on new page. otherwise start on new page. */
  margin-block-start: 0rem;
  margin-block-end: 0ex;
  /* margin-block-start: 1em; */ /* default html paragraph style */
  /* margin-block-end: 1em; */
}

.paragraph + .paragraph {
  text-indent: var(--inside-margin); /* either indent successive paragraphs ... */
  /* margin-block-start: calc( var(--line-height) * 1 ); */ /* ... or give them margin */
  margin-block-end: 0rem;
}

/* to manually choose paragraph style with block margin instead of first-line-indent */
/* although, there are only automatic paragraphs in Simplicity... */
.paragraph + .paragraph.paragraphStyleMargin {
  text-indent: 0em;
  margin-block-start: calc( var(--line-height) * 1 );
}

main ul, main ol {
  text-indent: 0em; /* reset indent from 2nd and successive paragraphs */
  /* margin-block-start: calc( var(--line-height) * 1.5 ); */ /* set lists apart a little */ /* this breaks the 'line grid'... */
  /* margin-block-end: calc( var(--line-height) * 1.5 ); */ /* visual synchronicity aids the reader */
}

/* do not indent first level */
main ul > li > ul, main ol > li > ol {
  margin-block-start: 0em;
  margin-block-end: 0em;
}

/* some space for 2nd level lists */
main ul > li > ul li:first-of-type {
  margin-block-start: calc( var(--line-height) * 0.5 );
}

main ul > li > ul li:last-of-type{
  margin-block-end: calc( var(--line-height) * 0.5 );
}

/* have some breathing room between top-level list items */
main li + li {
  margin-block-start: calc( var(--line-height) * 0.5 ); /* was -end */ /* this breaks the 'line grid', though... */
}

/* remove extraneous space between 2nd and deeper level li items */
main li li + li {
  margin-block-start: 0em; /* was -end. Check that nothing breaks and remove this comment. */
}

/* hanging bullets */
main li {
  list-style-position: outside;
}

:lang(ar) {
  font-style: normal; /* arabic does not use italics */
}

main li:lang(ar) {
  list-style-type: arabic-indic;
}
/* fixme: support for other number systems */

/* do not indent first level lists */
main ul, main ol {
  padding-inline-start: 0em;
}

/* indent 2nd and deeper levels */
main ul ul, main ol ol {
  padding-inline-start: 1em;
}

.mainContentWrapper {
  position: relative; /* needed for z-index, and also a really good idea to be able to position children. */
  z-index: inherit; /* auto makes blockquote disappear */
  /* For small screens, minimize margins. But leave enough space for hanging bullets. */
  margin-inline-start: 2.6em;      /* this should be enough for up to 3-digit hanging bullet items. */
  /* There's no bullet points at the end of the line, so we can minimize the margin. */
  /* margin-inline-end: 1.2em; */  /* More space for content is paramount, even if -end-margin is uneven. */
  /* both inline sides need to have equal margin, or block-images will be off-center. */
  /*   and the only way to prevent or fix this off-centering is with the _still_ unimplemented parent selector (:has). */
  /* Sacrifice hanging bullets for narrow screens? */
  margin-inline-end: 2.6em;
}

a {
  color: var(--link-color);
  text-decoration-color: var(--main-contrast-color);
  font-style: italic;
  /* box-shadow: 0px 3px 3px violet; */
  /* text-shadow: 1px 0px 3px #ca6036, -1px 0px 3px #ca6036; */
  transition: box-shadow ease-out 0.2s;
  padding-block-end: 2px;
}

main :not(.citeref) a:visited {
  text-decoration-color: var(--nav-selected-highlight-color); /* is this too bright? */
}

main :not(.citeref) a:visited:focus, main :not(.citeref) a:visited:hover {
  text-decoration-color: inherit; /* when using a link, it should be styled the same, whether visited or not */
}

main .citeref a:visited {
  /* text-decoration-color: var(--main-contrast-color); */
}

/* fix browser jumping too far below target */
a.anchor {
  display: block;
  visibility: hidden;
  padding-block-start: 0em; /* is this necessary? */
  padding-block-end: 0em; /* don't create extra space */
}

a.anchor::before {
  content: "";
  display: block;
  visibility: hidden;
  height: 2em;
  margin-block-start: -2em;
}

/* external links */
a[href^="http://"]::after, a[href^="https://"]::after {
  content: "↗";
  display: inline-block; /* text-decoration doesn't work in ::after. inline-block removes underlining. */ 
  padding-inline-start: 0.5ch;
  padding-inline-end: 0.4ch;
  font-style: normal; /* don't distort icon from italics */
  top: -0.3em; /* superscript */
  font-size: 0.83em;
  line-height: 1em; /* prevent line-height from becoming larger */
  position: relative; /* make line-height work */
}

/* mailto links */
main a[href^="mailto:"]::after {
  content: "✉";
  display: inline-block; /* text-decoration doesn't work in ::after. inline-block removes underlining. */ 
  padding-inline-start: 0.5ch;
  padding-inline-end: 0.4ch;
  font-style: normal; /* don't distort icon from italics */
  top: -0.3em; /* superscript */
  font-size: 0.83em;
  line-height: 1em; /* prevent line-height from becoming larger */
  position: relative; /* make line-height work */
}

/* make empty 'links' non-responsive */
a.nolink, a.nolink:hover, a.nolink:active, a.nolink:focus {
  color: var(--link-empty-color);
  cursor: default;
  /* font-style: normal; */
  background-color: inherit;
  outline-style: none;
  outline-width: 0rem;
  box-shadow: none;
}

header nav {
  user-select: none; /* prevent bullet points on copy/paste (rich text) of whole page */
}

header nav, header nav a {
  font-family: var(--nav-font);
  font-style: normal;
}

/* keep text column narrow enough for comfortable reading */
/* main:not(div), main:not(a), main:not(img) { */
/* fixme: avoid using :not */
main { /* Was main:not:(.poster) like below.check if everything works, then remove this comment. */
  max-width: min( var(--content-width-max), 100% ); /* keep lines of text ( and everything else ) short for readability. goal: 55 - 75 characters */
  margin-inline-start: auto; /* center main horizontally. */
  margin-inline-end: auto;
}

main form {
  padding-inline-start: 0rem; /* use whole content width for narrow screens */
  margin-inline-start: 0rem;
  margin-inline-end: 0rem;
}

main form label, main form input, main form textarea {
  width: 100%; /* for narrow screens, make form elements use available width */
}

main form input, main form textarea {
  padding-inline-start: 0.2em; /* don't squish text to border */
  padding-inline-end: 0.2em;
}

footer .contactinfo input[type="submit"] {
  /* position: absolute; */
  /* width: 90%; */
  /* font-size: 1.5rem; */
  /* top: 100%; */
  /* bottom: 1rem; */
  /* inset-inline-end: 2rem; */
  /* height: 3.5rem; */
}

footer .contactinfo {
  /* float: inline-end; */
  display: inline-block;
  box-sizing: border-box;
  vertical-align: baseline;
  text-align: start;
  min-width: min-content; /* should be max-content, but with line-breaks if it doesn't fit */
  /* width: 80.9%; */ /* prevent linebreak when there's enough space */
  /* height: 2.5rem; */
  border-start-start-radius: 1rem;
  border-end-start-radius: 1rem;
  user-select: none;
  padding-block-start: 0.25rem;
  padding-block-end: 0.3em;
  padding-inline-start: 1.5rem;
  /* padding-inline-start: 0rem; */ /* if width: 100% and parent text-align: end or center. hacky. */
  padding-inline-end: 1.5rem;
  margin-inline-start: 0rem; /* if width: 100% and parent text-align is start or center */
  /* Why is this needed? And why is this limited? Why doesn't -inline-end work? */
  /* margin-inline-start: -1.5rem; */ /* if width: 100% and parent text-align: end. hacky. */
  /* inset-inline-end: 1.5rem; */
  /* margin-inline-start: auto; */
  /* margin-inline-end: 1.5rem; */
}

footer .contactinfo input {
  box-shadow: none;
}

footer .contactinfo a, footer .contactinfo input {
  padding-inline-start: 0.8em;
  padding-inline-end: 0.8em;
  border-radius: var(--nav-border-radius); /* make this the same as the menu borders for consistency */
}

footer .contactinfo a:hover, footer .contactinfo a:focus {
  outline-style: none;
}

footer .contactinfo[hidden] {
  display: none; /* prevent duplicate links with js disabled (display: above makes it visible) */
}

footer .contactinfo input[type="submit"] {
  color: var(--link-color);
  text-decoration-line: underline;
  text-decoration-color: var(--main-contrast-color);
  font-style: italic;
}

#pageFooter:not(:empty) {
  /* background-color: darkolivegreen; */
  font-size: 0.8em;
  text-align: justify;
  padding-block-start: 1.5em;
  padding-block-end: 1em;
  padding-inline-start: 2.3em; /* 1em */
  padding-inline-end: 2.3em; /* 1.5em */
  margin-block-start: 1.9em;
  margin-block-end: 0em; /* 1.8em */
}

/* can't use #pageFooterInner, as there's not css selector for empty-or-only-empty-childs */
/* and we need to select depending on whether the footer is shown or not */
/*
#pageFooter > #pageFooterInner {
  padding-inline-start: 1.5em;
  padding-inline-end: 0.8em;
} */

/* assemble em.add from parts - IF link is an em address */	
main a.showme > noscript[data-link=""]::after, footer a.showme[data-link=""]::after {
  content: attr(data-who) "@" attr(data-where) "." attr(data-end) '';
  /* use margin instead of a prefixed space to prevent box-shadow from extending to previous line in case of break. */
  margin-inline-start: calc( 1em * 0.5 );
}

/* show link verbatim if it is any other type of URI */
main a.showme > noscript:not([data-link=""])::after, footer a.showme:not([data-link=""])::after {
  content: attr(data-link);
  margin-inline-start: calc( 1em * 0.5 );
}

input[type="submit"], button[type="submit"] {
  background-color: initial;
  color: inherit;
  cursor: pointer;
  font-family: var(--content-font);
  font-style: normal;
  font-size: 1.5rem;
  text-decoration: none;
  border-radius: 1rem;
  outline-style: none;
  outline-width: 1px;
  border: none;
}

/* not for header/footer */
main input[type="submit"], main button[type="submit"] {
  box-shadow: 0px 0px 2px 1px var(--main-contrast-color);
  margin-block-start: 1em; /* not sure this is always wanted, but seems like sane default */
  margin-block-end: 1em;
}

.navContactHighlight input[type="submit"] {
  font-family: var(--nav-font);
  /* font-size: 1.3rem; */
}

main input[type="submit"]::before, main button[type="submit"]::before {
  font-size: 1.5em;
  white-space: pre;
  content: "⤷ ";
}

main form *:invalid {
  box-shadow: 0px 0px 2px 4px var(--main-bg-color);
}

main input[type="submit"]:dir(rtl)::before, main button[type="submit"]:dir(rtl)::before {
  content: "⤶ ";
}

main input[type="submit"]::after, main button[type="submit"]::after {
  font-size: 1.5em;
  white-space: pre;
  /* display: inline-block;
  transform: rotateY(-180deg); */
  content: " ⤶";
}

main input[type="submit"]:dir(rtl)::after, main button[type="submit"]:dir(rtl)::after {
  content: " ⤷"; /* :dir(rtl) - only working in firefox, apr-2020 */
	             /* workaround: [dir="rtl"], but needs dir attribute on the tags, does not inherit */
}

/* for keyboard navigation */
input[type="submit"]:focus, input[type="submit"]:hover,
button[type="submit"]:focus, button[type="submit"]:hover,
a:focus, a:hover,
video:hover, video:focus,
audio:hover, audio:focus {
  color: var(--main-contrast-color);
  outline-style: none;
  outline-width: 2px;
  outline-color: var(--main-contrast-color);
  box-shadow: 0px 0px 7px 1px var(--main-contrast-color);
  /* filter: drop-shadow( 0px 0px 7px var(--main-contrast-color) ); */ /* box-shadow doesn't respect box outline */ /* drop-shadow is annoying for text */
}

/* As anchor's box-shadow doesn't respect child's box outline, we need to set the box-shadow on the child directly. */
/* img can't receive focus, so select on anchoer's focus. */
/* note that this still leaves the UGLY misplaced box-shadow of the <a>, which _can't_ be fixed until :has is supported. */
a:focus img:not(.inline), a:hover img:not(.inline) {
  box-shadow: 0px 0px 7px 1px var(--main-contrast-color);
}

main div a { /* should only apply to a's with an img child. Not possibly in css, so don't put img's within divs.  */
  /* display: block; */ /* fixes 'random long clickable block' below image. Now the block is around the image (still too large though). */
  /* padding-block-end: inherit; */ /* needed to prevent jumping content below upon hover */
}

main a {
  padding-inline-start: 1px; /* only for screen. give box-shadow a little breathing room so text won't touch border. */
  padding-inline-end: 1px;
}

main a, footer a { /* not in navigation, as this creates ugly artifacts with rounded menu corners */
  border-radius: 0.2rem;
}

a:focus, a:hover {
 /* outline-style: none; */
}

a:hover {
  outline-style: none; /* outline only on focus */
}

body input[type="submit"]:active,
body input[type="submit"]:focus,
body input[type="submit"]:hover,
button[type="submit"]:active,
button[type="submit"]:focus,
button[type="submit"]:hover,
body header nav a:active, a:active {
  /* outline-style: dotted; */ /* groove */
  outline-width: 8px;
}

input[type="submit"]:active,
button[type="submit"]:active,
body header nav a:active, a:active {
  /* outline-style: dotted; */
  /* outline-width: 24px; */
  box-shadow: 0px 0px 7px 4px var(--nav-selected-highlight-color);
}

div.debug {
  color: #cacaca;
  background-color: #000000a0;
}

.hideScrollbars {
  scrollbar-width: none;
}

/* infobox */
.infobox {
  line-height: var(--line-height); /* only needed if font-size is changed and infobox spans more than one line */
  border: 6px double var(--infobox-border-color);
  padding-block-start: 0.2em;
  padding-block-end: 0.2em;
  padding-inline-start: 0.3em;
  padding-inline-end: 0.3em;
  margin-block-start: var(--line-height);
  margin-block-end: var(--line-height);
}

main div.templateTitle { /* the 'main div' here is to override '+ *' for margin-block-start */
  display: inline-block; /* make vertical margin work */
  font-family: var(--content-font-sc);
  letter-spacing: 0.06em;
  /* margin-inline-start: 1.75rem; */ /* same as headings */
  margin-block-start: inherit; /* template title does not need extra margin */
  margin-block-end: calc( var(--line-height) * 1 );
}

.mainContentWrapper > .templateTitle + .lastModified {
  /* add space after lastModified date, but only if it is at the beginning of the page. */
  /* i.e. not in directoryIndex or in content text, for example */
  margin-block-end: calc( var(--line-height) * 1 );
}

/* blockquote and cite in html need to be <blockquote></blockquote><cite></cite>,
   with NO WHITESPACE INSIDE each element. (As opposed to the more logical cite wrapped inside blockquote)
   This is so that templates can include blockquotes that, if not used on any particular page,
   will be made invisible via css. Otherwise, the blockquote's block margin would always occupy space,
   as it's impossible to select an empty-or-only-empty-children element in css.
*/

blockquote {
  --blockquote-margin-block-start: calc( var(--line-height) * 1 );
}

blockquote + cite {
  --blockquote-margin-block-end: calc( var(--line-height) * 1 );
}

blockquote {
  font-style: italic;
  letter-spacing: 0.1em;
  position: relative;
  page-break-inside: avoid; /* sad old browsers */
  break-inside: avoid; /* works, but needs extra top-margin to not cut off giant quotes */
  margin-inline-start: var(--inside-margin);
  margin-inline-end: 1em; /* for narrow screens, make quote text as wide as possible while still having distinct margins. */
  margin-block-start: var(--blockquote-margin-block-start);
  margin-block-end: calc( var(--blockquote-margin-block-start) * 0.5 ); /* only small margin since cite element is not inside blockquote */
}

blockquote, cite {
  text-indent: 0; /* do not inherit indent if inside a paragraph */
  font-size: 94%;
  /* balancing act: adjust line-height in accordance with font-size, or maintain line spacing? (especially important for two facing pages) */
  /*    For online pageless text, proper line-height in relation to text is more important. */
  /*    For printed text, maintaining line spacing may be more important. So for print, maybe just leave font-size and line-height as is. */
  line-height: calc( var(--line-height) * 0.95 );
}

blockquote:empty, cite:empty {
  display: none; /* for when a template includes blockquote, but the actual page doesn't use it */
}

blockquote:not(:empty)::before {
  --quote-sign-font-size: 12; /* needs to be a unitless number to be useable in the a calc() division denominator below */
  content: "”";
  /* display: block; */
  position: absolute;
  color: var(--quote-mark-color);
  font-size: calc( var(--quote-sign-font-size) * 1em ); /* to make the unitless number ems, multiply by 1 */
  line-height: 0em; /* do not mess with line height */
  /* inset-inline-start: calc( -1em / 12 * 1 ); */ /* fixme: use inset-inline-start once supported by browsers */
  /* normal quote mark in front of text:
  font-size: 3em;
  top: 1em; */
  /* put quote sign on line. Make it 4x size of parent font-size. */
  top: calc( ( 1em / var(--quote-sign-font-size) ) * 4 ); /* At least one number must have a unit (em). */
  z-index: -10;
  /* margin-inline-start: -2.2rem; */ /* ??? */
}

blockquote + cite {
  display: block;
  color: var(--quote-cite-color);
  font-style: italic;
  /* font-size: 92%; */
  line-height: 0rem;
  margin-inline-start: var(--inside-margin);
  margin-block-start: calc( var(--blockquote-margin-block-start) * 0.5 );
  margin-block-end: calc( var(--blockquote-margin-block-end) * 1.5 );
}

blockquote + cite::before {
  content: "\00000a— ";
}

sub, sup {
  line-height: 1em; /* do not allow sub and sup to make line higher */
}

.poetry {
  white-space: pre;
}

.tooltip-em::before {
  display: none;
  position: absolute;
  word-wrap: anywhere;
  font-family: var(--content-font-sc);
  background-color: var(--main-contrast-color);  
  color: var(--main-bg-color);
  text-shadow: none;
  border-radius: 1em;
  padding-block-start: 0.3em;
  padding-block-end: 0.3em;
  padding-inline-start: 0.8em;
  padding-inline-end: 0.8em;
  margin-block-start: calc( var(--line-height) * -2.4 ); /* more distance for tooltip to accomodate for possible wrapping */
  z-index: 5; /* prevent menu items from overlapping tooltip */
}

/* for elements too close to the top, tooltip must go below */
/* fixme: how can I do this automatically, without an extra class? */
nav .tooltip-em::before {
  width: max-content; /* do not break on wide screens */
  margin-block-start: calc( var(--line-height) * 1.4 );
}

.tooltip-em:hover::before, .tooltip-em:focus-within::before {
  display: inline-block;
  inset-inline-end: 1em; /* prevents tooltip from covering link and word-wrapping too eagerly in no-js footer */
}

/* display tooltip for link generated from 'data-' attributes, for em.add. */
/* assemble em.add from parts - IF link is an em address */	
.tooltip-em[data-link=""]::before {
  content: attr(data-who) "@" attr(data-where) "." attr(data-end);
}

/* show link verbatim if it is any other type of URI */
.tooltip-em:not([data-link=""])::before {
  content: attr(data-link);
}

main a.showme > noscript::after {
  /* display: none; */
  opacity: 0;
  /* display: inline-block; */ /* removes underline */
  white-space: pre; /* keep leading space */
  /* content: ' (' attr(data-who) '@' attr(data-where) '.' attr(data-end) ')'; */ /* show link target */
}

main a.showme:hover > noscript::after, main a.showme:focus noscript::after {
  /* showing on inline on hover is not optimal (content shift), but tooltips are not possible to position correctly in css */
  /* and it is important to show link destination */
  /* changing display (= inserting and removing content) for 'text-align: justify' elements, */
  /*   causes jumping and impossibility to make hover work, depending on the content */
  /* display: inline-block; */
  opacity: 1;
}

.c_nojs input.c_url {
  display: none; /* hide field */
}

/***** OLD LEADERS IMPLEMENTATION: BEGIN ******/
/* these do not end-align large numbers (4 digits) properly */
.dottedList {
  display: block;
}

.dottedList dl {
  width: 100%;
  margin-inline-start: inherit; /* doesn't inherit it from parent? It's too wide */
  margin-inline-end: inherit;
  margin-block-start: 0rem;
}

.dottedList dt {
  display: inline-block;
  width: 89%;
  overflow: hidden;
  /* white-space: nowrap; */
  /* max-width: 76%; */ /* hack to fix right column going off screen when screen is narrow */
  max-block-size: var(--line-height);
}

.dottedList dd {
  width: 11%;
  display: inline-block;
  text-align: end;
  vertical-align: top; /* put text back onto its baseline (it is below, otherwise) */
  /* overflow: hidden; */
  white-space: nowrap;
  margin-inline-start: 0rem; /* should be 0rem - larger because of hack for small displays  */
}

.dottedList dt::after {
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
  margin-inline-start: 1rem;
  margin-inline-end: 0.6rem;
}
/***** OLD LEADERS IMPLEMENTATION: END ******/


/* ////////// DOT LEADERS: BEGIN                ////////// */

:root {
  --leaders-inline-padding: 0.5em; /* space before and after leaders */
}

.leaders {
  padding-inline-start: 0;
  padding-inline-end: 0;
  /*
  margin-block-start: var(--line-height);
  margin-block-end: var(--line-height); */
}

.leaders li {
  display: table;
}

.leaders li div {
  display: table-cell;
}

.leaders li div:first-child { /* text before leaders */
  position: relative;
  overflow: hidden; /* prevent underrunning the end item */
}

.leaders li div:first-child:after { /* the actual leaders */
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
  position: absolute;
  margin-inline-start: var(--leaders-inline-padding);
  inline-size: 100%;
}

.leaders li div + div { /* text after leaders */
  text-align: end;
  inline-size: 0.01%; /* hacky trick. Needed to make the leaders work. */
  vertical-align: bottom; /* keep text aligned in case text before leaders gets broken into multiple lines. */
  padding-inline-start: var(--leaders-inline-padding);
}

/* ////////// DOT LEADERS: END                  ////////// */


/* typography: raised first letter*/
/*
p::first-letter {
  font-size: 3em;
  vertical-align: baseline;
  margin-inline-end: 0.05em;
} */

/* fancy style for raised first letter */
/*
  p::first-letter {
  background-color: var(--main-bg-color);
  background-image: linear-gradient( transparent 69%, var(--main-contrast-color) 69%, var(--main-contrast-color) 81%, transparent 81% );
  background-blend-mode: luminosity;
  border-start-start-radius: 1em;
  border-end-end-radius: 1em;
} */

/* hide elements visually but not for screen readers */
.UNUSED-hidden {
  position: absolute;
  left: -100000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.noBlockStartMargin {
  margin-block-start: 0rem;
}

priceList dd {
  font-family: var(--content-font-sc);
  letter-spacing: 2px;
}

.citeref > a {
  page-break-before: avoid; /* old browsers */
  break-before: avoid; /* keep cite reference on same line as preceeding word */
  font-style: normal; /* remove italics */
}

.citeref > a {
  /* display: inline-block; */ /* make min-inline-size have effect */ /* Fixme: this can lead to huge spaces before a reference mark */
  min-inline-size: 1em; /* tiny links are pointless */
}

/* insert comma between consecutive citerefs */
.citeref + .citeref::before {
  /* content: ','; */ /* can't do this :(. The web has a tendency to prevent simplicity. */
  /* Need adjacent sibling selector that works as adjacent sibling selector instead of adjacent-or-separated-by-text sibling selector. */
}

/* and a hacky attempt... */
.citerefSeparator::before {
  display: inline-block; /* this causes text-decoration to be set to none. */
                         /* Note that it's still part of the link (hover etc), but normal appearance of separator is proper, not underlined. */
  content: '\002009,';   /* 002009 is 'thin space' */
}

.references {
  display: block;
  /* margin-inline-start: var(--content-margin); */
  /* margin-inline-end: var(--content-margin); */
  margin-block-start: calc( var(--line-height) * 2 );
}

/*
.references:empty {
  display: none;
} */

.references cite {
  display: block;
  font-style: normal; /* don't print references in all italics */
}

/* automatically number references */
/* this _would_ be useful, if there were a way to populate a references list at the end of the document */
/*
main {
  counter-reset: references;
}

.citeref > a {
  counter-increment;
}

references cite {
  content: counter( references ) ') ';
}
*/

.sequence {
  position: relative;
  /* display: block; */
  text-align: end; /* prevent tearing-open of words */
  margin-block-start: calc( var(--line-height) * 2 );
  /* margin-inline-end: 1.6rem; */ /* align with main */
  /* margin-inline-end: 1.75rem; */ /* align with h1 within main */
  /* margin-block-start: -2rem;
  margin-block-end: 1rem; */
  float: inline-end; /* fixme: don't use float! */
  user-select: none;
}

.sequencePrev {
  /* position: absolute;
  inset-inline-start: 0rem; */
}

.sequencePrev + .sequenceNext {
  margin-inline-start: 1.2rem; /* only add margin if both links are present*/
}

.sequenceNext {
  /* position: absolute;
  inset-inline-end: 0rem; */
}

.sequencePrev::before {
  content: "<\0000a0"; /* non-breaking space to 'glue' sign to same line */
}

.sequenceNext::after {
  content: "\0000a0>";
}

.directoryIndex > li {
  break-inside: avoid; /* keep entries and their lastModified info on the same page */
}

.directoryIndexLastModified, .lastModified {
  /* text-align: start; */ /* why did I add this? Seems unnecessary */
  font-size: 0.74em;
  color: var(--main-text-faded-color);
  font-style: italic;
  /* margin-inline-start: 0.74em; */
}

.draft {
  /* content: "✍\00fe0e \000020DRAFT ✍\00fe0e"; */
  display: block; /* with position: sticky, inline disables transforms, making putting text inline and not rotated */
  position: sticky; /* absolute or sticky */
  font-weight: bold;
  font-size: 1.1em;
  letter-spacing: 0.2em;
  /* line-height: min-content; */
  text-align: center;
  word-wrap: break-word;
  color: var(--main-contrast-color);
  background-color: var(--main-bg-color);
  /* inset-inline-end: min( 3rem, 3vw ); */ /* keep close to edge on narrow displays */
  /* top: -2.1rem; */ /* this and rotateZ below are approximate values to connect the borders to borders of main */
  top: 2rem; /* needed for sticky */
  /* width: fit-content; */
  /* block-size: calc( var(--line-height ) * 1 ); */
  max-block-size: calc( var(--line-height ) * 2 ); /* this & overflow: prevent filling the whole height if draft message spans more than one line */
  text-overflow: ellipsis; /* show ellipsis if text is too long */
  overflow-y: hidden; /* make ellipsis show */
  white-space: nowrap; /* make ellipsis show */
  /* height: fit-content; */ /* 2em */
  border-block-start: 0.4rem solid #d05252;
  border-inline-end: 0.4rem solid #950c39;
  border-block-end: 0.4rem solid #950c39;
  border-inline-start: 0.4rem solid #d05252;
  /* transform: rotateZ(167deg) rotateX(180deg) rotateY(180deg); */
  pointer-events: none;
  user-select: none;
  z-index: 10;
  padding-inline-start: 0.2em; /* increase chance of long text fitting in one line */
  padding-inline-end: 0.2em;
  /* margin-inline-start: calc( var(--inside-margin) + 0.1em ); */
  margin-block-start: 0em; /* for narrow screens, don't move it up into the bredcrumbs. Leave it in content area. */
  margin-block-end: 2.6em;
}

/* How can I do this only if .draft is present? Need parent selector... */
.draft ~ * { /* ok, this is a start */
  color: var(--main-bg-color);
  /* background: inherit; */ /* when bg filters are used, this may produce low contrast */
  background-blend-mode: inherit;
  background-color: var(--main-contrast-color); 
  padding-inline-start: 0.3em;
  padding-inline-end: 0.3em;
  border-inline: 0.5rem solid var(--main-bg-color);
}

.draft ~ *::selection {
  color: var(--main-contrast-color);
  background-color: var(--main-bg-color);
}

.draft ~ * a:hover {
  background-color: var(--content-bg-color); /* overwrite draft style to prevent link from seeming inert */
}

/* tinted background for lightbox */
#fullscreenShade::before {
  content: '';
  display: block;
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  background-color: hsl( 0deg 0% 0% / 90% );
  width: 100vw;
  height: 100vh;
}

/* allow header to be covered by lightbox */
.preserve3d {
  transform-style: preserve-3d;
}

/* lightbox item: makes the element cover the whole screen (maintaining aspect) */
main img.lightboxItem, main video.lightboxItem:not(:fullscreen), main audio.lightboxItem {
  display: block; /* to center images that are normally inline */
  position: fixed;
  max-width: 100vw;
  max-height: 100vh;
  /* inset-block-start: 50%; */
  inset-inline-start: 50%;
  transform: translateY( -50% ); /* translateX( -50%) */
  border-style: none; /* was !important */
  margin-block-start: 0em;
  margin-block-end: 0em;
  z-index: 40;
}

/* hide visually, without moving it off-screen, and
   keep it available for keyboard and sceen readers  */
.visuallyhidden {
  position: absolute; /* !important */
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); /* deprecated, only fallback for old browsers */
  clip-path: inset(50%);
  white-space: nowrap; /* added line */ /* https://a11yproject.com/posts/how-to-hide-content/ */
  margin: -1px; padding: 0px; border: 0px; /* needed? */
}

/* just hide. */
.hidden {
  display: none;
}

@media not print {
  .printOnly {
    display: none; /* only show when printed */
  }
}

/* otherwise covers whole page, disabling keyboard use */
a.skipTo {
  height: initial;
  width: initial;
  user-select: none;
}

/* basically, reset .visuallyhidden */
a.skipTo:focus, a.skipTo:active {
  position: initial;
  /* background-color: var(--main-bg-color); */ /* ensure legibility */
  background-color: var(--nav-menu-bgcolor);
  background-image: var(--body-bg-image);
  background-blend-mode: multiply;
  background-attachment: var(--bg-image-background-attachment);
  background-repeat: var(--bg-repeat);
  background-size: var(--bg-size);
  background-position-x: center;
  background-position-y: var(--bg-position-y);
  height: max-content;
  width: max-content;
  overflow: initial;
  clip: initial;
  clip-path: initial;
  white-space: initial;
  outline-style: dotted;
  outline-offset: -1rem; /* make outline show */
  box-shadow: none;
  border-start-start-radius: 1rem;
  border-start-end-radius: 1rem;
  border-end-start-radius: 0rem;
  border-end-end-radius: 0rem;
  padding: 1.4rem; /* arbirtary value, to make outline show*/
  margin: initial;
}

/* if called 'scrollToTop', will be blocked by ad blocker */
a.skipToTop {
  display: inline-block;
  position: sticky;
  background-color: var(--main-bg-color);
  top: calc( 100vh - 12rem );
  width: 3rem;
  font-size: 2.6rem;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  user-select: none;
  z-index: 10;
  border: 1px solid var(--main-contrast-color);
  border-radius: 50%;
}

.skipToTop:focus, .skipToTop:hover {
  background-color: var(--main-bg-color);
  /* border: 1px solid var(--main-contrast-color); */
  transform: scale(1.08);
  transition: transform ease-in-out 0.5s;
}

.skipToTopWrapper {
  display: block;
  display: none; /* it's broken */
  /* outline: 1px solid white; */ /* show moving area */
  position: absolute;
  /* width: 3rem; */
  /* height: 100%; */
  height: calc( 100% - 32vw ); /* why does this seem to 'work' ? super hacky */
  /* min-height: max-content; */
  /* max-height: max-content; */
  inset-inline-end: 0rem;
  /* inset-inline-start: 70%; */ /* same as body. hacky, and will not work when main starts to shrink */
  top: 100vh;
  overflow-y: visible;
  margin-inline-end: 1rem;
}

/* why would anyone want borders or margins around their fullscreen elements applied by default? */
main img, main video:not(:fullscreen), main audio {
  /* max-width: calc( var(--content-width) - 1em ); */ /* leave a little margin on the sides */ /* This does not work below 1280px wide viewport */
  max-width: calc( 100% - ( 2 * 4vw ) - 1rem ); /* fixme: some magic numbers... but seems to work allright */
  /* border: var(--image-border-width) outset var(--main-contrast-color); */
  padding: 1px;
  margin-inline-start: 0rem;
  margin-inline-end: 0rem;
  margin-block-start: 1.25rem;
  margin-block-end: 1.25rem;
}

img.inline, video.inline, audio.inline {
  /* make inline media work like characters, on the baseline and without space around them. */
  padding-block-start: 0;
  padding-block-end: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* limit to height of viewport. Useful if default is to limit images and videos to viewport height. */
main .fullheight {
  width: auto;
  max-height: 100%;
}

/* limit to height of viewport. Useful if default is to allow images and videos to be as tall as needed. */
main .screenheight {
  width: auto;
  max-height: 100vh;
}

main a:not(:empty) { /* should be 'main a:has(> img)', but is not implemntd yet */
  margin-inline-start: 0rem; /* keep image centered, even if inside a link */
}

main form textarea {
  /* max-width: 15rem; */
  display: flex; /* what's this? Do we want this? */
  flex-direction: column;
  white-space: pre; /* for sane behaviour */
}

form label { /* this needs to include only labels within a form to not break navigation */
  /* max-width: 15rem; */
  float: inline-start;
  margin-inline-end: 1rem;
  text-align: start;
}

input[type=text] {
  display: block;
  margin-block-start: 0.1rem;
  margin-block-end: 0.6rem;
  width: 100%; /* This may (will?) not always be desirable, but will at least ensure they stay within main. max-width does not work? */
               /* also, width is having a weird base - it's not taken from parent? */
}

form input[type=text], form textarea {
  font-size: 1em;
  line-height: calc( var(--line-height) * 1 );
  max-width: 100%; /* allow form input fields to use the whole content area width */
}

img, video, audio { /* hmm, not sure about audio? */
  display: block; /* assume most visual media will be given its own space, i.e. non-inline */
  /* margin-inline-end: 3.2rem; */ /* fix to center images in rtl documents. Not sure why they go off-center in the first place. */
}

.inline, .inline {
  display: inline; /* to override default media display mode */
}

.poster {
  direction: ltr; /* fix to center images in rtl documents */ /* is this needed for above, too? e.g., non-postered images and videos? */
  margin-inline-start: 0; /* center image */
  margin-inline-end: 0;
}

.poster:focus, .poster:hover {
  box-shadow: none;
}

.poster {
  /* fixme: poster is not scalable on mobile and too tiny. Is this still an issue? */
  max-width: 93vw; /* allow poster images to be a bit wider than text column */
  /* width: 100vw; */ /* max-width will not go beyond width, so set width to 100vw */
  height: auto;
  /* left: 50%;
  right: 50%; */
  /* width: 90vw; */
  /* 100 / parent_width_%_of_body * desired_width */
  /* margin-inline-start: 20vw;
  margin-inline-end: 20vw; */
  /* border: 2px solid #ca6036; */
  border: none;
}

main .poster, main img:not(.inline), main video:not(.inline), main audio:not(.inline) {
  /* center horizontally */
  position: relative;
  left: 50%; /* fixme: does this need to be left and not inset-inline-start? Does it matter in combination with translateX? */
  transform: translateX(-50%);
}

.strikethrough {
  text-decoration: line-through;
}

/* ////////// MEDIA-GRID WITH COLUMNS: BEGIN    ////////// */

main .gallery .lightboxItemLinkActive {
  position: fixed; /* absolute doesn't work well for images close to bottom */
  max-width: max-content; /* needed to not extend image href outside of image, to allow clicking beside image to close lightbox */
  inset-inline-start: 50%;
  inset-block-start: 50%;
  /* box-shadow: none !important; */
  outline: none; /* prevent unsightly 'ants' from default style */
  transform: translateX( -50% ) translateY( -50% );
  z-index: 40;
}

/* begin 'nice frame' */

/* a nice, subtle frame. Only for videos. */
main .gallery video.lightboxItemLinkActive {
  box-shadow: 0px 0px 6px 0px grey;
  padding-inline-start: 5px;
  padding-inline-end: 5px;
  padding-block-start: 5px;
  padding-block-end: 5px;	
}

main .gallery video.lightboxItem {
  max-height: 96vh; /* needed for 'frame' to show on block-edges */
}

/* only if 'nice frame' is shown */
/*
main .gallery video.lightboxItem {
  margin-block-start: var(--lightbox-wrapper-margin);
  margin-block-end: var(--lightbox-wrapper-margin);
} */

/* end 'nice frame' */

/* .gallery .lightboxItem:hover, .gallery .lightboxItemLinkActive:focus */
.gallery .galleryItemLinkWrapper .lightboxItem, .gallery .lightboxItem {
  box-shadow: none;
}

/* need to use :not(.inline) for img to override earlier style */
.gallery img:not(.inline).lightboxItem, .gallery .lightboxItem {
  border: none;
}

.gallery video:not(.inline):not(.poster):not(:fullscreen) {
  border: none;
}

main .gallery audio.lightboxItemLinkActive {
  max-width: 100vw; /*  audio element seems not to have a working max-content, so need to set this separately */
  background-color: black;
  border-style: solid; /* make the player size (padding) visible */
  border-color: var(--main-contrast-color);
  border-radius: 1em;
  padding-block-start: 2em; /* make the player large enough to not accidentally dismiss */
  padding-block-end: 2em;
}

main .gallery audio.lightboxItemLinkActive {
  max-width: 100vw; /*  audio element seems not to have a working max-content, so need to set this separately */
}

main .mainContentWrapper video.lightboxItemLinkActive, audio.lightboxItemLinkActive {
  width: auto; /* confine time seeker to video width */
  transform: translateX( -50% ) translateY( -50% );
}

/*
:root {
  --lightbox-wrapper-margin: 1em;
} */
/* only for video, compensate for block margin. Let images be completely fullscreen. */
/* used when video is 'framed', i.e. box-shadow or border */
/*
main .mainContentWrapper video.lightboxItemLinkActive {
  transform: translateX( -50% ) translateY( calc( -50% - var(--lightbox-wrapper-margin) ) );
} */

.gallery .lightboxItemLinkActive img {
  inset-inline-start: auto;
  margin-inline-start: auto;
  margin-inline-end: auto;
  transform: none;
}

main[data-hasgallery] {
  width: var(--content-width-max);
}

.gallery {
  /* column-count: 1; */ /* set more columns in media queries */
  /* column-width: 250px; */
  column-width: max( 180px, max( 200px, 16vw ) ); /* the last max value of the last max indicates the maximum number of columns (100vw / value) */
  /* column-width: clamp( max( 100px, 2vw ), max( 450px, 20vw ), max( 200px, 25vw) ); */
  /* inset-inline-start: 0; */ /* was this needed? */
}

.gallery > * {
  width: 100%;
}

.gallery > a.galleryItemLinkWrapper {
  display: block; /* align column start */
  box-shadow: none; /* remove phantom box shadow before / after link */
  padding-inline-start: 0em;
  padding-inline-end: 0em;
  padding-block-start: 0em;
  padding-block-end: 0em;
  margin-block-end: 1em;
}

.gallery audio.galleryItem {
  margin-block-end: 1em; /* for narrow displays */
}

.gallery img, .gallery video:not(:fullscreen), .gallery audio {
  border-width: 2px !important;
  max-width: 100%; /* was !important */
  padding-block-start: 0em;
  padding-block-end: 0em;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

.gallery .galleryItemLinkWrapper img.lightboxItem {
  padding-inline-start: 0em;
  padding-inline-end: 0em;
  padding-block-start: 0em;
  padding-block-end: 0em;
}

.gallery audio {
  width: 96vw;
}


/* new breakpoints, when leaving margin as-is (i.e., not filling whole screen ) */

.gallery {
  --column-count: 1;
}

@media ( min-width: 400px ) {
  .gallery {
    --column-count: 2;
  }
}

@media ( min-width: 828px ) { /* was: 540px */
  .gallery {
    --column-count: 3;
  }
}

@media ( min-width: 1280px ) {
  .gallery {
    --column-count: 4;
  }
}

@media ( min-width: 2600px ) {
  .gallery {
    --column-count: 5;
  }
}


@media (min-width: 240px) {
  /* can't use ID, element, class... as otherwise variable would not be visible outside */
  [data-hasgallery] {
    --content-width: 100vw; /* if gallery is present on page, use whole width */
  }
}

/* on small screens, rotate video */
@media ( orientation: portrait ) {
  .gallery video.lightboxItem.lightboxItemLinkActive:not(:fullscreen) {
    transform: translateX(-50%) translateY(-50%) rotateZ(270deg);
    /* vh is physical device height, vw is physical device width */
    /* when rotated, this does not change. But width is width of element, which is rotated. */
    /* max-width: 100vh; */
    max-width: calc( 100vh - 1.4em ); /* 96vh */ /* because of rotate, use vh for width */
    max-height: calc( 100vw - 1.4em ); /* 96vw */ /* because of rotate, use wv for height */
    /* box-shadow: none; */
  }
}

/* ////////// MEDIA-GRID WITH COLUMNS: END      ////////// */


/* Begin Error 404 Not Found */
#errorNotfoundPlayerControls {
  margin-inline-start: revert; /* center */
  margin-inline-end: revert;
  width: 100%;
  text-align: center;
}

.errorNotfoundPlayerToggle {
  color: black;
  background-color: inherit;
  font-size: 6em;
  cursor: pointer;
  border-color: var(--main-contrast-color);
  border: 0px;
  transition: transform 0.9s ease;
}

.errorNotfoundPlayerToggle:only-child {
  left: inherit;
  margin-inline-start: auto; /* inline-center if there is only one dancer */
  margin-inline-end: auto;
}

#errorNotfoundPlayerControls img.errorNotfoundPlayerToggle {
  border-style: none;
  width: 15vmax;
}

.errorNotfoundPlayerToggle:nth-child(odd) {
  color: var(--link-color);
  transform: rotateY(180deg);
}

.errorNotfoundPlayerToggle:nth-last-child(1) {
  /* transform: rotateX(180deg); */
}

.errorNotfoundPlayerToggle:nth-child(3n+1) {
  color: var(--main-contrast-color);
}

@media print {
  #errorNotfoundPlayerControls .errorNotfoundPlayerToggle {
    color: initial;
  }

  .errorNotfoundPlayerToggle {
    filter: saturate(0%); /* text-shadow trick above doesn't work with emojis? */
  }

}

/* End Error 404 Not Found */

/* arbitrary number a little larger than 320 used on the smallest screens */
@media ( min-height: 336px ) {
  main {
    margin-block-start: var(--show-header, clamp( 0.2rem, 10vh, 4.5rem ) ); /* allow content to start from the top on short-height screens */
    /* fixme: this really shouldn't use a media query! */
  }
}

/* Same value as '--content-width'. Remember to keep in sync. */
/* Sadly, dynamic media queries with variables are not possible yet in css. Maybe env() will provide a solution. */
@media ( min-width: 640px ) { /* needs to coincide with navigation style */
  main { /* fixme: is this still needed? */
    /* When screen size reaches '--content-width', content-box would jump-shrink to include inline margins. */
    /*   This min-width prevents content-box from shrinking, allowing a smooth width increase up to '--content-width', */
    /*   and then only let inline margins begin to grow once there's enough space */
    /* fixme: get rid of :not */
    min-width: var(--content-width);
    /* for wider screens, allow main to expand beyond '--content-width' to a value based on font size to keep line-length optimal. */
    max-width: var(--content-width-max);
  }

  /* main img:not(.inline), main video:not(.inline):not(:fullscreen) { */
  /* fixme: this is too convoluted. Need more simplicity here! */
  main img:not(.inline):not(.poster), main video:not(.inline):not(.poster):not(:fullscreen) {
    border: var(--image-border-width) outset var(--main-contrast-color);
    padding: 3px;
    box-sizing: border-box; /* keep image within main content margin */
  }

  .mainContentWrapper {
    margin-inline-start: var(--content-margin); /* the intended margins for larger screens */
    margin-inline-end: var(--content-margin);
  }

  main form label, main form input, main form textarea {
    width: revert; /* for narrow screens, make form elements use available width */
  }

  input[type="submit"]:active,
  button[type="submit"]:active,
  body header nav a:active, a:active {
    /* outline-style: dotted; */
    /* outline-width: 24px; */
    box-shadow: 0px 0px 7px 4px var(--nav-selected-highlight-color);
  }

  .draft {
    line-height: calc( var(--line-height ) * 2 ); /* if same as height, it will center text vertically */
    padding-inline-start: 1em;
    padding-inline-end: 1em;
    margin-block-start: -1.6em;
  }

  blockquote {
    margin-inline-end: var(--inside-margin); /* set margin to desired margin, undoing tight margin for narrow screens */
  }

  .tooltip::before, .tooltip-em::before {
    margin-block-start: calc( var(--line-height) * -1.5 ); /* we have enough space to not wrap, so minimize the distance */
  }

}

/* this used to be inside @min-width: 1280px - why? */
.poster img, main img, .poster video, main video {
  /* Ensure *tall* images don't become uncomfortably tall. */
  /* There is no general solution possible. */
  /* Super tall but narrow images, such as infographics, need to be allowed to be as 100% width allows. Even if that means many times vw. */
  /*   these need to be dealt with separately, with class 'fullheight'. */	  
  max-height: 100vh;
  width: auto; /* needed to keep aspect ratio */
  /* fixme: remove this? or make it max-width: 100%?*/
}

@media ( min-width: 1280px ) { /* keep aligned with navigation */
  body {
    /* temp workaround to prevent vert scrollbars for poster images. breaks mobile scrolling, so only for larger displays. */
    overflow-x: hidden; /* does this still break mobile scrolling? */
  }

  footer {
    /* padding-inline-end: 0rem; */
    padding-block-end: 0rem;
    /* margin-block-end: 1.5rem; */
    /* min-width: min-content; */
  }

}

@media print {


  :root {
    --main-font-size: 1rem;
  }

  header {
    background-image: none;
    line-height: 1rem; /* larger than 1rem introduces page-break after header?! */
  }

  header .breadCrumbs {
    border-inline-start-style: none;
    border-inline-end-style: none;
    border-block-start-style: none;
    border-block-end-style: none;
  }

  body {
    /* display: flex; */ /* otherwise, only first page is printable in firefox */
    /* block: everything prints, but only header on first page, main starts on 2nd page*/
    /*          - see header's line-height above for workaround */
    display: block;
    color: black;
    background-image: none;
  }

  body::before {
    display: none; /* do not print background */
  }

  main {
    margin-block-start: 0;
    padding-block-start: 0;
  }

  main {
    width: initial; /* fill width of paper */
    max-width: initial;
  }

  main img:not(.inline), main video:not(.inline) { /* video? Maybe it'll show the poster frame. */
    display: inline-grid; /* hacky, inline-grid to make break-inside work */ /* block *should* also work */
    page-break-inside: avoid; /* old browsers */
    break-inside: avoid; /* only works with inline-grid? */
  }

  main .poster {
    margin-inline-start: 0rem; /* otherwise, images are not centered */
  }

  main img, main video {
    max-width: 100%; /* ensure images do not get cut off */
  }

  /* we really want all media without borders - but we need to override :not, and .inline images should not have a border to begin with. */
  main img:not(.inline), main video:not(.inline), main audio:not(.inline) {
    border: none;
  }

  main .fullheight {
    max-height: 100vh;
  }

  /* assemble em.add. from parts. href-attribute is matched against original in-html value */	
  /* main a.showme[href^="#"]::after { */
  main a.showme[data-who][data-link=""]::after {
    display: inline-block;
    content: "[" attr(data-who) "@" attr(data-where) "." attr(data-end) "]";
  }

  .draft {
    color: black;
    border-color: black;
    border-width: 0.1em;
    margin-block-start: 2em; /* prevent squished top by reverting negative margin */
    margin-block-end: var(--line-height); /* keep connected to heading */
  }

  .draft ~ * {
    border-color: grey;
    border-width: 0.1em;
  }

  .sequence {
    display: none;
  }

  .infobox {
    border-color: black;
    border-width: 5px; /* border looks very heavy otherwise */
  }

  footer, footer .contactinfoWrapper {
    margin-block-end: 0rem; /* avoid empty page after footer */
  }

  footer::after {
    /* content: "\0000a0Happy dancing!"; */ /* disable for now */
    display: block;
    width: max-content;
    break-before: avoid; /* only print if it wouldn't cause an extra page to be printed..? how? */
    break-inside: avoid;
    break-after: avoid;
    padding-block-end: 0rem;
    margin-inline-start: calc( var(--inside-margin) * 2 );
    margin-inline-end: 100%;
    margin-block-start: 2rem;
    margin-block-end: 0rem;
  }

  footer .contactinfo {
    font-size: inherit; /* hide for print? */
    min-width: max-content;
    padding-inline-end: var(--content-margin); /* align with body text */
  }

  /*
  #pageFooter {
    display: none;
  } */

  /* hide all footer elements except those with class 'doNotHideForPrint' */
  /* Note: this assumes all footer text that should print to be within some element (div) */
  #pageFooter > #pageFooterInner > *:not(.doNotHideForPrint) {
    display: none;
  }

  #pageFooter:not(:empty) {
    margin-inline-start: var(--content-margin); /* for print, make footer align with main text */
    margin-inline-end: var(--content-margin);
    padding-inline-start: 0em;
    padding-inline-end: 0em;
  }

  footer .websiteInfo {
    display: none;
  }

  .citeref > a {
    min-inline-size: initial; /* beautiful typography is important. No need for enlarged links on paper. */
  }

  a::after {
    font-family: var(--content-font); /* print links unobtrusively */ /* fixme: investigate: is this desirable? */
    font-weight: normal;
  }

  a[href] {
    text-decoration: none;
  }

  a > noscript {
    display: none; /* we already print the link destination from the anchor directly. Avoid duplicate. */
  }

  main a {
    padding-inline-start: 0px; /* no extra space for links. It looks ugly. */
    padding-inline-end: 0px;
  }

  /* show link destination after link text */
  /* a[href^="http"]:not( [href*="sharkdance.org"] )::after { */
  /* a[href^="http://"]::after, a[href^="https://"]::after { */ /* only external links */
  /* fixme: how to exclude images? */
  main a[href]::after {
    content: "[" attr(href) "]"; /* unicode nbsp: \0000a0, '&nbsp;' doesn't work in css */
    display: inline-block; /* text-decoration does not work for ::after elements. This stops underlining. */
    opacity: 1;
    padding-inline-start: 0.6ch;
    padding-inline-end: initial; /* this and below: reset from @screen */
    top: initial;
    font-size: 1em;
    font-weight: normal;
  }

  main a[href^="#"]::after {
    display: none; /* do not show link target for page-internal links */
  }

  blockquote:not(:empty)::before {
    color: transparent; /* hide actual text (the small quote sign) */
    text-shadow: 0px 0px 0px #cacaca; /* hack to print huge quote mark in grayscale */
  }

  .templateTitle {
    margin-block-end: calc( var(--line-height) * 0.25 ); /* was 0.5rem */
  }

  .dottedList dd {
    width: 9%; /* FIXME: it's not pretty. Hack to not cut off right column. right Margin is not properly inherited. */
  }

  main input[type="submit"], main button[type="submit"] {
    box-shadow: 0px 0px 7px 1px black; /* do not print in color */
  }

  p::first-letter { /* no fancy initial capitals for printing */
    font-size: inherit;
    margin-inline-end: revert;
    background: inherit;
    border-radius: inherit;
    margin-block-start: inherit;
  }

  :invalid {
    box-shadow: none; /* do not print colored markers for invalid form elements */
  }

}

.smallcaps, .oldStyleNumerals {
  font-family: var(--content-font-sc);
}