/*
Style sheet that mimics the home page style, for use in hand-edited pages.

See the manual:
https://www.w3.org/2023/10/geek-week-style-project/how-to-use.html

Created by Bert Bos <bert@w3.org>
during Geek Week 2023 (23-27 October)
Last modified: $Date: 2025/11/22 12:40:39 $ by $Author: bbos $
*/

@import "../2019/09/TPAC-template/fonts/iconmonstr-iconic-font.css";
@import "../2019/09/TPAC-template/fonts/fontawesome-basic.css";

@font-face {
  font-family: Noto Sans;
  font-style: normal;
  font-weight: 400;
  src: local(Noto Sans), local(NotoSans),
    url("https://www.w3.org/assets/website-2021/fonts/notosans/notosans-regular.woff2") format("woff2"),
    url("https://www.w3.org/assets/website-2021/fonts/notosans/notosans-regular.woff") format("woff");
}
@font-face {
  font-family: Noto Sans;
  font-style: italic;
  font-weight: 400;
  src: local(Noto Sans Italic), local(NotoSans-Italic),
    url("https://www.w3.org/assets/website-2021/fonts/notosans/notosans-italic.woff2") format("woff2"),
    url("https://www.w3.org/assets/website-2021/fonts/notosans/notosans-italic.woff") format("woff");
}
@font-face {
  font-family: Noto Sans;
  font-style: normal;
  font-weight: 700;
  src: local(Noto Sans Bold), local(NotoSans-Bold),
    url("https://www.w3.org/assets/website-2021/fonts/notosans/notosans-bold.woff2") format("woff2"),
    url("https://www.w3.org/assets/website-2021/fonts/notosans/notosans-bold.woff") format("woff");
}
@font-face {
  font-family: Noto Sans;
  font-style: italic;
  font-weight: 700;
  src: local(Noto Sans Bold Italic), local(NotoSans-BoldItalic),
    url("https://www.w3.org/assets/website-2021/fonts/notosans/notosans-bolditalic.woff2") format("woff2"),
    url("https://www.w3.org/assets/website-2021/fonts/notosans/notosans-bolditalic.woff") format("woff");
}

html {color-scheme: only light dark} /* only = disable Chromium's heuristics. */
body {font: normal 1em/1.5 Noto Sans, Trebuchet MS, Geneva, sans-serif;
  color: #111; background: #fff; margin: 0 5vw 2rem}

h2 {margin-top: 6.25rem; margin-bottom: 1rem;
  font-size: 1.69875rem; line-height: 1.24}
@media (min-width: 49.375em) {h2 {font-size: 2.125rem}}
h3 {margin-top: 2em; margin-bottom: 1rem; font-size: 1.5rem; line-height: 1.4}
header {font-weight: normal}
code, samp, pre {
  font-family: Monaco, "Lucida Console", "Courier New", monospace;
  font-size: 0.9em; hyphens: none; orphans: 3; page-break-before: avoid;
  text-transform: none; widows: 3}
pre {padding: 0 0 0 1em; border-left: 3px solid #005a9c}
address {font-style: normal}

/* DETAILS elements have V-shaped markers on the right. */
summary h3, summary h2, summary h1 {display: inline}
summary {display: block}	/* Remove the marker */
summary::-webkit-details-marker {display: none} /* Safari */
summary::before {content: "\f078"; /* chevron down */; float: right;
  content: "\f078" / "";
  font-family: "Font Awesome 6 Free"; line-height: 1; font-weight: 900;
  font-size-adjust: 0.523; width: 2em; text-align: right}
[open] > summary::before {content: "\f077";
  content: "\f077" / "" /* chevron up */}

/* Links. Difference from home page style: no side padding for links
   (0.125rem); no extra offet for underlines (0.25em). */
:link {color: #005797}
:visited {color: #75336c}
:link, :visited {/*text-underline-offset: 0.25em*/}
:link:hover, :visited:hover {color: #002a56}
:focus {background: linear-gradient(to top,#000 0.2em,#f9dc4a 0.2em);
  color: #000; text-decoration: none; outline: none}
:focus img:not(.icon), img:not(.icon):focus {background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #000, 0 0 0 8px #f9dc4a}
:link:active, :visited:active {color: #000}
:link svg, :visited svg {fill: currentColor}

/* Class=here is meant for links inside headings that point to the
   heading itself. On hover, the link is shown next to the heading, so
   it can be bookmarked. The anchor text should be short (<2em), or
   empty. If it is empty, a pilcrow sign (¶) will be shown. Some pages
   use the class "self-link", which is also accepted. */
.here, .self-link {display: none}
:hover > .here, :hover > .self-link {display: block; float: left;
  padding-right: 0.33em; width: 2em; margin-left: -2.33em; text-align: right}
.here:empty::before, .self-link:empty::before {content: "¶"; content: "¶" / ""}

/* Short, small text. */
.note {font-size: 0.9em /*0.9375rem*/}

/* Lists. */
ul:not([class]), ol:not([class]), ol.counter {padding-left: 2.4em;
  margin-top: 1em; margin-bottom: 1em}
li {margin: 0.75em 0}
ul ul:not([class]), ul ol:not([class]), ol ul:not([class]), ol ol:not([class]) {
  margin-top: 0.75em; margin-bottom: 0.75em}

/* Lists with 1, 1.1, 1.1.1... numbering. */
ol.counter ::marker {
  content: counters(list-item, ".") ". "}

/* Definition lists are not indented. With class=inline, all DT and DD
   that belong together are on the same line. With class=grid, the DT
   and DD form two columns. */
dt {font-weight: bold}
dd {margin: 0}
dt + dd, dd + dd {margin-top: 0.25em}
dd + dt {margin-top: 1em; /*margin-top: 0.5em*/}
dl.inline dt, dl.inline dd {display: inline}
dl.inline dd + dt::before {content: ""; display: block;
  height: 1em; /*height: 0.5em*/}
dl.grid {display: grid; grid: "a b" / max-content 1fr; gap: 1em}
dl.grid dt {grid-column: 1}
dl.grid dd {grid-column: 2}
dl.grid dt + dd, dd + dd, dl.grid dd + dt {margin-top: 0}

/* Tables are full width, striped, and with white-on-blue column headers. */
table {border: 1px solid #cac9c9; border-collapse: collapse;
  margin-bottom: 1rem; margin-top: 1rem}
table {width: 100%}
@media (min-width: 49.375em) {
  body > table {width: calc(100% - 100vw + 44.4375rem + 10vw)}
}
th[scope="col"], thead {background-color: #002a56; color: #fff}
th {vertical-align: bottom}
th, td, table caption {padding: 0.75rem}
tbody tr:nth-child(2n) {background-color: rgba(206, 205, 205, 0.5)}
td {vertical-align: text-top}
th[colspan] {border-left: thin solid; border-right: thin solid}

/* Restrict images to the width of the paragraph they are in. */
img {max-width: 100%}
.icon {max-width: 1.5em; width: auto; height: 1em; vertical-align: middle}

/* An element with class "fifty-fifty" is a text block with an image
   (or something else) on the side (or above, on narrow windows). The
   first child element is put on the side: right by default, left if
   the class "reverse" is combined with "fifty-fifty". */
.fifty-fifty {margin-top: 6.25rem; margin-bottom: 1em}
.fifty-fifty > :first-child {margin-top: 0}
.fifty-fifty > video:first-child, .fifty-fifty > object:first-child,
.fifty-fifty > img:first-child, .fifty-fifty > svg:first-child {
  width: auto; height: auto;
  max-height: 20rem} /* If the first child is an image, limit its size */
.fifty-fifty > :first-child > :first-child {margin-top: 0}
.fifty-fifty > :first-child + * {margin-top: 1rem}
@media (min-width: 77.78em) {
  .fifty-fifty {padding: 0 38rem 0 0}
  .fifty-fifty::after {content: ""; display: block; height: 0; clear: both}
  .fifty-fifty.lead {padding-right: calc((100vw - 70rem) / 2 + 38rem)}
  .fifty-fifty > :first-child {float: right; margin: 0 -38rem 0 0;
    box-sizing: border-box; width: 100%}
  .fifty-fifty > img:first-child, .fifty-fifty > svg:first-child {
    width: auto; max-width: 100%; max-height: none}
  .fifty-fifty > :first-child + * {margin-top: 0}
  .fifty-fifty.reversed {padding-right: 0; padding-left: 38rem}
  .fifty-fifty.reversed > :first-child {float: left; margin: 0 0 0 -38rem}
}

/* Class "crosslinks" makes white text on blue. The blue extends to
   the edges of the window. An H2 is smaller inside crosslinks. */
.crosslinks {background: #103852; /* not #002a56, but like TPAC */
  color: #FFF; margin-top: 6.25rem;
  margin-bottom: 6.25rem; padding-top: 3.125rem; padding-bottom: 3.125rem}
.crosslinks::after {content: ""; display: block; height: 0; clear: both}
.crosslinks h2 {font-size: 1.5rem; line-height: 1.4}
.crosslinks > :first-child {margin-top: 0}
.crosslinks > :last-child {margin-bottom: 0}
.crosslinks :link:not(:focus), .crosslinks :visited:not(:focus) {color: inherit}
.crosslinks [href=""]::before {content: "➔ "; content: "➔ " / "this page: "}

/* Class "gray" makes a block with a light gray background. If there
   are DETAILS elements inside, they get a white background, rounded
   corners and a box shadow. */
.gray {background: #f8f8fb; margin-top: 6.25rem; margin-bottom: 6.25rem;
       padding-top: 3.125rem; padding-bottom: 3.125rem}
.gray::after {content: ""; display: block; height: 0; clear: both}
.gray > :first-child {margin-top: 0}
.gray > :last-child {margin-bottom: 0}
.gray > * {max-width: 44.4375rem}
.gray.wide > * {max-width: none}
.gray details {margin-top: 1em; margin-bottom: 1em; background: #fff;
  padding: 1.5625em; border-radius: 0.375em;
  box-shadow: -0.0625rem 0.0625rem 0.25rem rgba(55, 70, 95, 0.12)}

/* Class "cards" lays out its children as cards in a grid of up
   to 4 columns, depending on available space. If the card starts with
   an image, stretch it to the width of the card. */
.cards {display: flex; flex-wrap: wrap; margin-top: 2rem;
  margin-bottom: 2rem; padding: 0; gap: 2rem}
.cards > * {list-style: none; margin: 0; padding: 0;
  width: 10em; width: max-width: 100%; min-width: 18%; flex: auto 1;
  background: #fff; color: #111; border-radius: 0.25rem}
.cards :link:not(:focus) {color: #005797}
.cards :visited:not(:focus) {color: #75336c}
.cards > :link:not(:focus), .cards > :visited:not(:focus) {
  text-decoration: none; color: #111}
.cards > :link:hover, .cards > :visited:hover, .cards > :link:focus,
.cards > :visited:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #000, 0 0 0 8px #f9dc4a}
.cards > :focus img {box-shadow: none} /* Undo the effect of ':focus img' */
.cards > * > :first-child {margin-top: 0}
.crosslinks .cards > *, .gray .cards > * {padding: 1.25rem} /* Add padding */
.cards > * > svg:first-child, .cards > * > img:first-child {
  display: block; margin: 0 auto 1em; width: 100%}
/* Inside a wide section, the cards can be wider: */
.wide .cards > *, .wide.cards > * {width: 15em}
.cards h3 {margin-top: 1rem; font-size: 1.125rem; line-height: 1.5}

/* A grid with up to six columns of square cells with ample space,
   meant for company logos. (Six columns if combined with class
   "wide", otherwise three.) The script on the home page generates six
   elements of the form <figure><img></figure> inside the element with
   this class. */
.members-grid {display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem; margin-top: 2.5rem; margin-bottom: 1rem}
.members-grid > * {padding: 1.5rem; margin: 0; background: #fff; color: #111;
  display: flex; align-items: center; text-align: center; height: 7.8rem;
  width: calc(7.8rem - 16px/6) /* room for scrollbar */}
.members-grid img, .members-grid > * > * {display: block; max-height: 100%}

/* Buttons and links with class=button or class=button--alt. */
button, .button, .button--alt {display: inline-block; vertical-align: middle;
  border: solid 2px #005797; border-radius: 1.5rem;
  font-size: 0.875rem; font-weight: bold; line-height: 1.5;
  font-family: inherit; outline: 2px solid transparent; outline-offset: -2px;
  padding: 0.6875rem 1.5rem; text-decoration: none}
button, .button {background: #005797; color: #fff}
.button--alt {background: none; color: #005797}
button:disabled {background: #bdbdbd; border-color: #bdbdbd;
  box-shadow: none; color: #303030; cursor: not-allowed}
.button--alt:disabled {background: none}
button:not(:disabled):hover, .button:hover {background: #002a56;
  color: #fff; border-color: #002a56}
.button--alt:not(:disabled):hover {background: #cbe0fb; color: #002a56}
button:not(:disabled):focus, button:not(:disabled):active, .button:focus,
.button:active, .button--alt:not(:disabled):focus,
.button--alt:not(:disabled):active {color: #000; background: #f9dc4a;
  border-color: #000}

/* note--warning, note--info, note-success and note-error. Warnings
   for unmaintained pages or similar. */
.note--warning, .note--info, .note--success, .note--error {
  border: 0.3rem solid #c28605; margin-top: 1.875rem;
  margin-bottom: 1.875rem; display: block; padding: 1.5rem}
.note--info {border-color: #103852 /* not #002a56 */}
.note--success {border-color: #046704}
.note--error {border-color: #a82615}
.note--warning > :first-child,.note--info > :first-child,
.note--success > :first-child, .note--error > :first-child {margin-top: 0}
.note--warning > :last-child, .note--info > :last-child,
.note--success > :last-child, .note--error > :last-child {margin-bottom: 0}
.note--warning h2, .note--info h2, .note--success h2, .note--error h2 {
  font-size: 1.5rem; line-height: 1.4}

/* Invisible elements for accessibility and the skip link. */
.visuallyhidden:not(:focus):not(:active), .skip-link:not(:focus):not(:active) {
  border: 0; clip: rect(0 0 0 0); clip-path: inset(100%); height: 1px;
  overflow: hidden; padding: 0; position: absolute; white-space: nowrap;
  width: 1px}
.skip-link {padding: 0.625em 0.9375em; margin: 0; position: absolute; left: 0;
  top: 0; z-index: 1}

/* Class banner make a light blue block with a smaller font size. It
   used for a warning ("This is a new website. Give feedback to help
   us improve it.") at the top of some pages. */
.banner {background: #cbe0fb; color: #111; font-size: 0.875rem;
  line-height: 1.4285714286; margin-bottom: 0; margin-top: 0;
  padding-bottom: 0.625rem; padding-top: 0.625rem; display: block}
.banner p {margin-top: 0; margin-bottom: 0}
.acl-member {background: #ddb0c8; color: #000}
.acl-private, .acl-user {background: #237978; color: #fff}
.acl-team {background: #ec7070; color: #000}

/* The global navigation menu looks like a menubar. The NAV is
   expected to contain a mix of A and DETAILS elements. The DETAILS
   elements function as dropdown menus and should contain a SUMMARY
   and a UL or MENU. The UL/MENU in turn contains LIs with A elements.

   The menubar.js script adds a button with class=hamburgermenu after
   the first menu item and hides or unhides it based on the viewport's
   width (more than 500px or not).
 */
#global-nav {font-weight: bold; line-height: 1.6875em;
  /*border-bottom: solid 1px #bdbdbd;*/ min-height: 6em; position: relative;
  padding-top: 1.5em; padding-bottom: 1.5em}
#global-nav :link:not(:hover):not(:focus),
#global-nav :visited:not(:hover):not(:focus) {color: inherit}
#global-nav li {margin: 0; padding: 0; list-style: none}
#global-nav * {display: inline}	/* For IE */
#global-nav summary {display: none} /* For IE */
#global-nav a {margin-left: 1em; white-space: nowrap} /* For IE */
#global-nav > a:first-child {position: absolute;
  top: 4.5em; transform: translate(0, -50%);
  margin: 0 0 0 -8.9375em; padding: 0}
#global-nav a, #global-nav summary {white-space: nowrap; text-decoration: none}
#global-nav > a, #global-nav summary {padding: 0 0.3125em 0 0.3125em;
  margin-right: 1em}
#global-nav #account-login-link {margin-left: auto; margin-right: 0;
  font-weight: normal; font-size: 87.5%}
#global-nav #account-login-link img {max-width: 2em; height: 2em;
  width: 2.3em; border-radius: 50%}
#global-nav > :link:hover:not(:focus),
#global-nav > :visited:hover:not(:focus),
#global-nav summary:hover:not(:focus) {
  background: linear-gradient(to top,#005a9c 0.2em,transparent 0.2em)}
@supports (position: absolute) { /* Exclude IE, for it doesn't know DETAILS */
  #global-nav a {margin-left: 0; white-space: normal}
  #global-nav {display: flex; flex-wrap: wrap; align-items: center}
  #global-nav summary, #global-nav > a {display: block}
  #global-nav > [href=""]:not(:focus) {/* Current page underlined */
    background: linear-gradient(to top,#000 0.2em,transparent 0.2em)}
  #global-nav ul, #global-nav menu {position: absolute; z-index: 2;
    background: #fff; padding: 0.3em; margin: 0; box-shadow: 0 2px 4px #000}
  #global-nav ul a, #global-nav menu a {display: block; padding: 0.25em 0.5em}
  #global-nav ul :focus, #global-nav menu :focus {color: #000}
  @media (max-width: 31em) {
    #global-nav ul, #global-nav menu {margin-left: -4vw; margin-right: 4px}
  }
}
#global-nav [open] > summary::before, #global-nav summary::before {
  content: none}
#global-nav [open] > summary::-webkit-details-marker,
#global-nav summary::-webkit-details-marker {display: none} /* Safari */
#global-nav summary::after {content: " ⌄"; content: " ⌄" / ""}
#global-nav > a:first-child img { /* W3C logo*/
  /*border-right: thin solid; padding-right: 1.625em;*/
  width: 6em}
#global-nav a img {vertical-align: middle}
/* Put the button that shows/hides the menu bar on the right. Remove
   the blue style that buttons normally have. */
.hamburgermenu {margin: 0 0 0 auto; font-size: 2rem; border-radius: 0;
  border: none; background: none; color: inherit}
.hamburgermenu > * {transform: rotate(0deg);
  transition: transform 0.3s}
.hamburgermenu svg {vertical-align: bottom}
.hamburgermenu[aria-expanded="true"] > * {transform: rotate(-90deg)}
/* On windows of 500px or narrower (the value used by menubar.js), the
   menu bar items after the hamburger button are put below each other
   (by giving them a width of 100%) and the sub-menus pop up
   overlapping the menu bar, but offset to the right. */
@media (max-width: 500px) {
  #global-nav > a, #global-nav summary, #global-nav > button {
    padding: 0.2em 0}
  #global-nav ul, #global-nav menu {margin-left: 4em; margin-right: 4px;
    top: 1.5em; /*left: 0; right: 0*/}
  #global-nav > [open] > summary {outline: solid #888}
  .hamburgermenu ~ * {width: 100%}
}

/* Language menu. Differences from home page style: Uses link colors
   of instead of black. Uses medium font size instead of 0.875rem. */
#lang-nav {text-align: right; margin-top: 0; margin-bottom: 0; color: #111;
  background: #f8f8fb; padding-bottom: 0.75rem; padding-top: 0.75rem}
#lang-nav *:not(a) {display: contents}
#lang-nav a *  {display: inline}
#lang-nav a {margin-left: 2em}

/* Footer. */
footer, .footer, #endmatter, .endmatter, address {padding-top: 2rem;
  border-top: solid 1px #bdbdbd; clear: both; font-size: 0.875rem}
body > footer, .footer, #endmatter, .endmatter, body > address {
  margin-top: 6.25rem; margin-bottom: 1rem}
.crosslinks + footer, .crosslinks + .footer, .crosslinks + #endmatter,
.crosslinks + address, .gray + footer, .gray + .footer, .gray + #endmatter,
.gray + address, .lead + footer, .lead + .footer, .lead + #endmatter,
.lead + address {margin-top: -6.25rem} /* No margin after blue or gray block */
main:has( > .crosslinks:last-child, > .gray:last-child, > .lead:last-child) +
  :is(footer, .footer, #endmatter, address) {margin-top: -6.25rem}
footer address, .footer address, #endmatter address, .endmatter address {
  border-top: none; margin: 1rem 0;
  padding: 0 0 0 1em; border-left: 3px solid #f9c818}
footer :link, footer :visited {color: inherit}
section footer {padding-top: 0}
blockquote > footer {padding-top: 0; border-top: none; /* Fix for /about page */
  font-size: 1em}

/* Breadcrumbs. The element with id=breadcrumb must contain A
   elements, either as its only children or wrapped in one or more
   DIV, OL and LI elements. If the last of the A elements is not a
   direct child of the breadcrumbs element, it must have an
   aria-current attribute to indicate it is indeed the last one. */
#breadcrumb {display: flex; flex-wrap: wrap; background: #f8f8fb;
  margin-top: 0; margin-bottom: 0; padding-bottom: 1em; padding-top: 1em;
  align-items: center}
#breadcrumb *:not(a) {display: contents}
#breadcrumb a *  {display: inline}
#breadcrumb > a:not(:last-child), #breadcrumb * a:not([aria-current]) {
  margin-right: 1.9em; position: relative}
#breadcrumb > a:not(:last-child)::after,
#breadcrumb * a:not([aria-current])::after {content: ""; border-style: solid;
  border-width: 0.1em 0.1em 0 0; position: absolute; right: -0.9em; top: 50%;
  height: 0.5em; width: 0.5em; transform: translate(0,-50%) rotate(45deg)}
#breadcrumb > a:last-child, #breadcrumb a[aria-current] {font-weight: bold;
  text-decoration: none}
#breadcrumb a {color: inherit; font-size: 0.9375rem}

/* Blockquote. Add class "pull-quote" to make the text bold and turn
   the text and the left border blue. Difference from home page style:
   the gray left border of normal blockquotes is not indented. */
blockquote, blockquote + .attribution {
  padding: 1.25rem 0 1.25rem 1.875rem; position: relative}
blockquote {margin-left: 0}
body * blockquote {margin-left: 0; margin-right: 0}
blockquote > :first-child {margin-top: 0}
blockquote > :last-child {margin-bottom: 0}
blockquote::before, .attribution::before {background-color: #bdbdbd; left: 0;
  width: 0.1875rem; content: ""; height: 100%; position: absolute; top: 0}
blockquote + .attribution {margin-top: -2.5rem}
.pull-quote, .pull-quote + .attribution {font-size: 1.125rem;
  color: #75336c; font-weight: bold}
.pull-quote::before, .pull-quote + .attribution::before,
.pull-quote::before, .pull-quote .attribution::before {
  background-color: #75336c; border-radius: 0.3125rem; width: 0.625rem}

/* Post list, wide, gray block, with horizontal rules between the children. */
.post-list {background: #f8f8fb}
.post-list > * {margin: 0; padding-bottom: 1.875rem; padding-top: 1.875rem;
  max-width: 44.4375rem; display: block}
.post-list > * + * {border-top: 1px solid #bdbdbd}

/* Class people-list creates a list of elements, separated by long
   horizontal rules, that each have a small photo in the upper left
   corner. */
.people-list {margin-top: 1rem; margin-bottom: 1rem}
.people-list > * {margin: 0; padding: 1.875rem 0 1.875rem 8rem; display: block;
  clear: left}
.people-list::after {content: ""; display: block; height: 0; clear: both}
.people-list > * > * {max-width: calc(44.4375rem - 8rem)}
.people-list > * > :first-child {float: left; width: 6.5rem;
  margin: 0 0 1.875rem -8rem}
.people-list > * > img:first-child {aspect-ratio: 1/1; object-fit: cover;
  border-radius: 50%; border: 1px solid}
.people-list > * > *:first-child + * {margin-top: 0}
.people-list > * > *:last-child {margin-bottom: 0}
.people-list > * + * {border-top: 1px solid #bdbdbd; padding-top: 1.875rem}

/* Class event-list creates a list of elements that each have a
   somewhat rounded blue border on the left, a slight drop shadow, and
   two columns. The first child of each element (typically containing
   a date and time) is put in the right-hand column. Furthermore, if
   that first child starts with an image, that image is sized like an
   icon and the text after it displayed with a hanging indent.

   Differences from home page style: first child's font size is 1em
   instead of 0.9375rem. No thin left border on the first child. No
   top padding on the first child. H2 has font size 1.5em instead of
   0.9375rem. */
.event-list {margin-top: 1rem; margin-bottom: 1rem; padding: 0}
.event-list > * {display: block; margin: 1rem 0;
  padding: 1rem 45% 1rem 1rem; border-left: 0.375rem solid #1bc0d7;
  border-radius: 0.25rem; box-shadow: -1px 1px 4px 0 rgba(55, 70, 95, 0.12);
  background-color: #fff; color: #111}
.event-list > *::after {content: ""; display: block; height: 0; clear: both}
.event-list > * > :first-child {float: right; width: 80%;
  margin: 0 calc(-1rem - 81.818%) 0 0}
.event-list > * > :first-child > :first-child {margin-top: 0}
.event-list > * > :first-child > img,
.event-list > * > :first-child > svg {max-width: 1.5em; height: 1.5em;
  float: left}
.event-list > * > :first-child > img ~ *,
.event-list > * > :first-child > svg ~ * {margin-left: 2em}
.event-list > * > :first-child > img + *,
.event-list > * > :first-child > svg + *,
.event-list > * > :first-child + * {margin-top: 0}
.event-list > * > :first-child > :last-child {margin-bottom: 0}
.event-list h2 {font-size: 1.5em}

/* Standard footer, with id=global-footer or class=global-footer. */
#global-footer, .global-footer {font-size: 0.875rem; margin-top: 6.25rem;
  margin-bottom: 1rem; display: grid; grid: "a b" "c c" / 1fr auto; gap: 1rem}
#global-footer div, .global-footer div {display: contents}
body > footer #global-footer, .footer #global-footer, #endmatter #global-footer,
.endmatter #global-footer, body > footer .global-footer, .footer .global-footer,
#endmatter .global-footer, .endmatter .global-footer {margin-top: 1rem}
#global-footer ul, .global-footer ul {padding: 0; margin: 0; line-height: 2}
#global-footer li, .global-footer li {display: inline-block;
  white-space: nowrap; margin: 0 1.4em 0 0}
#global-footer ul + ul li, .global-footer ul + ul li {margin: 0 0 0 1.4em}
#global-footer ul:first-child li:first-child,
.global-footer ul:first-child li:first-child {margin-left: 0}
#global-footer ul + ul li:last-child, .global-footer ul + ul li:last-child {
  margin-right: 0}
#global-footer p, .global-footer p {margin: 0}
#global-footer .icon, .global-footer .icon {max-width: 1.5em; height: 1.5em}

/* Aspect ratios. If applied to images, scale the image to fill the
   space and crop either to top and bottom or the left and right. From
   widest to narrowest: Warning: As of October 2023, 'aspect-ratio' is
   still an experimental property. */
.ratio-16-9 {aspect-ratio: 16/9; object-fit: cover}
.ratio-16-10 {aspect-ratio: 16/10; object-fit: cover}
.ratio-3-2 {aspect-ratio: 3/2; object-fit: cover}
.ratio-4-3 {aspect-ratio: 4/3; object-fit: cover}
.ratio-1-1 {aspect-ratio: 1/1; object-fit: cover}

/* Table of contents. */
.toc {font-size: medium}
ul.toc, .toc > ul {padding: 0 0 0 1em; border-left: 3px solid #005a9c;
  list-style: none}
.toc li {padding-top: 0.625rem; padding-bottom: 0.625rem; margin: 0}
.toc h2 {font-size: 100%; font-weight: normal; margin-top: 1.875rem}

/* H1 and class=lead. */
h1 {font-size: 2.0625rem; line-height: 1.3; text-wrap: balance}
.lead {font-size: 1.4375rem; line-height: 1.4}
@media (min-width: 49.375em) {h1 {font-size: 2.625rem; line-height: 1.4}}
h1, .lead {background: #f8f8fb; margin-top: 0; /*margin-bottom: 0;*/
  margin-bottom: 6.25rem; padding-bottom: 1.875rem; padding-top: 4.375rem}
.h1::after, .lead::after {content: ""; display: block; height: 0; clear: both}
h1:has(+ .lead)::after, .lead:has(+ .lead)::after {content: none}
h1 + .lead, .lead + .lead {padding-top: 0; margin-top: -6.25rem}
.lead > :first-child, .lead > .related:first-child + * {margin-top: 0}
.lead h1 {padding-bottom: 0; padding-top: 0; margin-bottom: 0}

/* Forms. Differences from home page style: no change from the default
   style for fieldset, checkbox and label. */
form {background: #f3f3f6; padding: 1.5em; margin-top: 1em; margin-bottom: 1em;
  border-radius: 0.25em}
input[type="search"] {width: 100%; border: 2px solid;
  padding: 0.4em 0.4em 0.4em 2.5em; background: 0.4em 50% / auto 1em
    url(../Icons/search.svg) no-repeat #fff}
form details h2 {margin-top: 1rem}

/* A label on the /TR page and other tag-like elements. Difference
   from home page style: font size is inherited instead of 0.875rem */
.maturity-level, .tag {background: rgba(206, 205, 205, 0.5);
  border-radius: 0.25rem; display: inline-block; margin-bottom: 0.3125rem;
  padding: 0.15625rem 0.3125rem}
.tag + .tag, .maturity-level + .maturity-level {margin-left: 1em}
.tag:has(+ .tag) {margin-right: 1em} /* If :has() is supported, use this... */
.tag:has(+ .tag) + .tag {margin-left: 0} /* ... and undo the margin-left */

/* Class "related" is typically for navigation to related pages that
   make up a mini-site together with the current page. The element
   gets a blue bar above, a thin gray rule on the left, an H2 is
   displayed smaller, and if there is a UL, it is displayed without
   bullets. */
.related {border-top: solid 10px #005a9c; padding-top: 1.25em;
  padding-left: 1.25em; margin-top: 6.25rem; /*margin-bottom: 1rem;*/
  margin-bottom: 6.25rem;
  background: 0 1.25em / 1px 100% no-repeat linear-gradient(#bdbdbd,#bdbdbd)}
.lead .related {font-size: medium}
.related > :first-child, .related > :first-child > :first-child {margin-top: 0}
.related h2 {font-size: 1.25rem}
.related ul {padding-left: 0; list-style: none}
.related ul > li {margin: 1.25em 0}
.related [href=""] {color: #777; text-decoration: none}
@media (min-width: 25em) {
  .lead > .related {float: right; margin-left: 2rem; width: auto;
    margin-bottom: 1rem; max-width: calc(50% - 1rem)}
}

/* Dark mode, when displayed on a system that uses a dark color scheme. */
@media (prefers-color-scheme: dark) {
  .can-invert {filter: invert(1)}
  body {background: #000; color: #eee}
  :link {color: hsl(205,100%,70%)}
  :visited {color: hsl(292,80%,87%)}
  :link:hover, :visited:hover {color: hsl(210,97%,80%)}
  :focus {color: #eee; background:
    linear-gradient(to top,#eee 0.2em,hsl(50,94%,25%) 0.2em)}
  :focus img:not(.icon), img:focus:not(.icon) {background: #000;
    box-shadow: 0 0 0 2px #000, 0 0 0 5px #fff, 0 0 0 8px hsl(50,94%,25%)}
  :link:active, :visited:active {color: #fff}
  table {border-color: hsl(0,0%,26%)}
  th[scope="col"] {background-color: hsl(210,97%,73%); color: #000}
  tbody tr:nth-child(2n) {background-color: hsla(0, 0%, 28%, 0.5)}
  .crosslinks {background: hsl(204,67%,29%)}
  .gray {background-color: #202028}
  .gray details {background: #000;
    box-shadow: 0.0625rem -0.0625rem 0.25rem hsla(218,27%,89%,0.12)}
  .cards > * {background: #000; color: #eee}
  .cards :link:not(:focus) {color: hsl(205,100%,70%)}
  .cards :visited:not(:focus) {color: hsl(292,80%,87%)}
  .cards > :link:not(:focus), .cards > :visited:not(:focus) {color: #eee}
  .cards > :link:hover, .cards > :visited:hover, .cards > :link:focus,
  .cards > :visited:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #000, 0 0 0 8px hsl(50,94%,25%)}
  button, .button {color: #eee}
  .button--alt {color: #eee}
  button:disabled {background: hsl(0,0%,26%); border-color:hsl(0,0%,26%);
    color: hsl(0,0%,81%)}
  .button--alt:not(:disabled):hover {background: hsl(214,86%,11%);
    color: hsl(210,97%,73%)}
  button:not(:disabled):focus, button:not(:disabled):active, .button:focus,
  .button:active, .button--alt:not(:disabled):focus,
  .button--alt:not(:disabled):active {color: #eee;
    background: hsl(50,94%,25%); border-color: #eee}
  .note--info {border-color: hsl(204,67%,29%)}
  .banner {background: #00473f; color: #eee}
  .acl-member {background: #75336c; color: #eee}
  .acl-private, .acl-user {background: #237978; color: #fff}
  #global-nav > :link:hover:not(:focus),
  #global-nav > :visited:hover:not(:focus),
  #global-nav summary:hover:not(:focus) {
    background: linear-gradient(to top,hsl(205,100%,69%) 0.2em,
      transparent 0.2em)}
  #global-nav > [href=""]:not(:focus) {/* Current page underlined */
    background: linear-gradient(to top, #eee 0.2em,transparent 0.2em)}
  #global-nav ul, #global-nav menu {background: #000;
    box-shadow: 0 2px 4px hsl(205,100%,69%)}
  #global-nav ul :focus, #global-nav menu :focus {color: #eee}
  footer, .footer, #endmatter, .endmatter, address {border-top-color: #424242}
  .pull-quote, .pull-quote + .attribution {color: hsl(250, 39%, 73%)}
  .pull-quote::before, .pull-quote + .attribution::before,
  .pull-quote::before, .pull-quote .attribution::before {
    background-color: hsl(250, 39%, 73%)}
  .event-list > * {border-left-color: #1598aa; background-color: #000;
    color: #eee; box-shadow: -1px 1px 4px 0 hsl(205,100%,69%)}
  #breadcrumb, .post-list, h1, .lead {background: #202028}
  #lang-nav {background: #202028}
  form {background: #28282F}
  input[type="search"] {background: 0.4em 50% / auto 1em
    url(../Icons/search.svg) no-repeat #000}
  fieldset {border-color: #eee}
  .related {border-top-color: hsl(205,100%,69%);
    background: 0 1.25em / 1px 100% no-repeat
      linear-gradient(hsl(0,0%,26%),hsl(0,0%,26%))}
}

/* If the BODY has a class of "default", "home", "event", "group",
   "post" or "listing", the light gray background is omitted from
   breadcrumbs, H1 and lead paragraphs. */
body.default #breadcrumb, body.default h1, body.default .lead,
body.listing #breadcrumb, body.listing h1, body.listing .lead,
body.event #breadcrumb, body.event h1, body.event .lead,
body.group #breadcrumb, body.group h1, body.group .lead,
body.post #breadcrumb, body.post h1, body.post .lead,
body.home #breadcrumb, body.home h1, body.home .lead {
  background: none}

/* Elements whose padding extends to the window edge: */
.crosslinks, body > footer, .footer, #endmatter, .endmatter, body > address,
.post-list, .people-list, h1, .lead, #breadcrumb, #global-nav, .gray, .banner,
#lang-nav {margin-left: -5vw; margin-right: -5vw;
  padding-left: 5vw; padding-right: 5vw}
#global-nav {padding-left: calc(5vw + 8.9375em)}
@media (min-width: 49.375em) {
  /* Maximum width of 44.4375rem for most content: */
  body > * {margin-right: calc(90vw - 44.4375rem)}
  /* Class=wide and certain other types of content can be wider: */
  .wide, .fifty-fifty, form, #global-footer, .global-footer {max-width: none;
    margin-right: 5vw}
  /* The same, when nested inside a narrower element: */
  body * .wide, body * .fifty-fifty, body * #global-footer, body * form,
  body * .global-footer {margin-right: calc(44.4375rem - 90vw)}
  /* When wide elements are nested inside each other, reset the margin. */
  .wide .wide, .wide .fifty-fifty, .wide form,
  .endmatter #global-footer, .endmatter .global-footer,
  footer #global-footer, footer .global-footer {margin-right: 0}
  /* Elements whose padding extends to the window edge: */
  .crosslinks, body > footer, .footer, #endmatter, .endmatter, body > address,
  .post-list, .people-list, h1, .lead, #breadcrumb, #global-nav, .gray,
  .banner, #lang-nav {margin-right: -5vw}
  /* The same, when nested inside another element: */
  body * .crosslinks, body * .footer, body * #endmatter,
  body * .endmatter, body * .post-list, body * .people-list, body * h1,
  body * .lead, body * #breadcrumb, body * #global-nav, body * .gray,
  body * .banner, body * #lang-nav {
    margin-right: calc(44.4375rem - 100vw + 5vw)}
  /* Elements that extend to the edge nested inside each other: */
  .lead h1, .gray .wide, .gray .post-list, .gray .people-list {
    max-width: none; margin-right: 0}
  /* Narrow, centered block */
  .center {margin-left: calc(45vw - 44.4375rem / 2);
    margin-right: calc((100vw - 44.4375rem) / 2 - 5vw)}
  body * .center {
    margin-left: calc(45vw - 44.4375rem / 2);
    margin-right: calc(44.4375rem / 2 - 45vw)}
}
@media (min-width: 77.78em) {
  body > * {margin-left: calc(45vw - 35rem);
    margin-right: calc(45vw - 9.4375rem)}
  /* Class=wide and certain other types of content can be 70rem wide. */
  .wide, .fifty-fifty, form, #global-footer, .global-footer {
    margin-right: calc(45vw - 35rem)}
  /* The same, when nested inside a narrower element: */
  body * .wide, body * .fifty-fifty, body * #global-footer, body * form,
  body * .global-footer {margin-right: -25.5625rem}
  /* When wide elements are nested inside each other, reset the margin. */
  .wide .wide, .wide .fifty-fifty, .wide form,
  .endmatter #global-footer, .endmatter .global-footer,
  footer #global-footer, footer .global-footer {margin-right: 0}
  /* Elements whose padding extends to the window edge: */
  .crosslinks, body > footer, .footer, #endmatter, .endmatter, body > address,
  .post-list, .people-list, h1, .lead, #breadcrumb, #global-nav, .gray,
  .banner, #lang-nav {margin-left: -5vw; margin-right: -5vw;
    padding-left: calc((100vw - 70rem) / 2);
    padding-right: calc((100vw - 70rem) / 2)}
  #global-nav {padding-left: calc((100vw - 70rem) / 2 + 8.9375em)}
  /* The same, when nested inside another element: */
  body * .crosslinks, body * .footer, body * #endmatter,
  body * .endmatter, body * .post-list, body * .people-list, body * h1,
  body * .lead, body * #breadcrumb, body * #global-nav, body * .gray,
  body * .banner, body * #lang-nav {margin-left: calc((70rem - 100vw) / 2);
    margin-right: calc(9.4375rem - 50vw)}
  /* Elements that extend to the edge nested inside each other: */
  .lead h1, .gray .wide, .gray .post-list, .gray .people-list {
    margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0}
  /* Combined gray and fifty-fifty have 38rem extra padding on one side: */
  .gray.fifty-fifty {padding-right: calc((100vw - 70rem) / 2 + 38rem)}
  .gray.fifty-fifty.reversed {padding-left: calc((100vw - 70rem) / 2 + 38rem);
    padding-right: calc((100vw - 70rem) / 2)}
  /* Narrow, centered block: */
  body * .center {margin-left: 12.78125rem; margin-right: -12.78125rem}
}