* {
    box-sizing: border-box;
}

.vert-fade {
    mask-image: linear-gradient(0deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.horiz-fade {
    mask-image: linear-gradient(90deg, transparent 0%, black 50%, black 100%);
}
.no-fade {
    z-index: 10;
}
html {
    /* how far between narrow displays (0) and wide displays (1) we are */
    --gliding-factor:clamp( 0px, (100vw - 400px) / (1200 - 400), 1px);
    /* multiply with px */
    --gf:var(--gliding-factor);
    /* multiply with pt */
    --gfpt:calc( 1.333 * var(--gliding-factor));

    /* Body padding for top, left, bottom and right */
    --body-padding:80px;
    --logo--left-overhang:-26px;
    @media (max-width: 600px) {
        --body-padding:40px;
        --logo--left-overhang:-26px;
    }
    @media (max-width: 450px) {
        --body-padding:20px;
        --logo--left-overhang:-13px;
    }

    --logo-height:calc( 48 * (1px - var(--gf)) +
                        96 * var(--gf));

    /* Additional left padding for gallery */
    --gallery-offset:0px;

    /* Font size */
    --tile-h1-size: calc( 30 * (1pt - var(--gfpt)) +
                          45 * var(--gfpt));
    --tile-h2-size: calc( 16 * (1pt - var(--gfpt)) +
                          19 * var(--gfpt));
    --tile-subheading-size: calc( 12 * (1pt - var(--gfpt)) +
                                  14 * var(--gfpt));
    --tile-h3-size: calc( 12 * (1pt - var(--gfpt)) +
                          14 * var(--gfpt));

    --body-font-size:calc( 12 * (1pt - var(--gfpt)) +
                          14 * var(--gfpt));
    --menu-font-size:calc(12 * (1pt - var(--gfpt)) +
                          14 * var(--gfpt));

    --gallery-heading-size:calc(24 * (1pt - var(--gfpt)) +
                          28 * var(--gfpt));
    --gallery-margin-top:4.8ex;

    --gallery-caption-font-size:calc(11 * (1pt - var(--gfpt)) +
                          14 * var(--gfpt));
    --gallery-caption-important-font-size:var(--gallery-caption-font-size);
    --general-font-size:calc( 11.5 * (1pt - var(--gfpt)) +
                              13 * var(--gfpt));

    /* main content image width, text width, overlapping text width */
    --main-image-width:calc( 100vw - 1 * var(--body-padding) - 560px - 20px);
    --main-image-max-height-base:540px; /* only used on wide screens */
    --main-image-max-height:var(--main-image-max-height-base);
    --main-textbox-width:560px;
    --main-textbox-text-width:680px;
    --main-textbox-wide-width:0px;  /* ... is reset further down */

    /* Making image much wider */
    /* --main-image-width:calc( 100vw - 1 * var(--body-padding) - 160px - 20px); */
    /* --main-textbox-width:160px; */

    /* narrower windows: shrink text */
    @media (max-width: 1200px) {
        --main-image-width:calc( 100vw - 1 * var(--body-padding) - 480px - 20px);
        --main-textbox-width:480px;
        --main-textbox-text-width:600px;
    }
    @media (max-width: 1100px) {
        --main-image-width:calc( 100vw - 1 * var(--body-padding) - 430px - 20px);
        --main-textbox-width:430px;
        --main-textbox-text-width:550px;
    }
    /* even narrower windows: widths snap back up and text wraps below image */
    @media (max-width: 1000px) {
        --main-image-width:720px;
        --main-textbox-width:560px;
        --main-textbox-text-width:680px;
        --main-textbox-wide-width:1000px;

        .horiz-fade {
            mask-image: none;
        }
    }

    /* Gallery image dimensions */
    --thumb-long-edge: calc( 200 * (1px - var(--gf)) +
                             330 * var(--gf));
    --thumb-short-edge: calc( var(--thumb-long-edge) / 1.5);

    /* Size and position of gallery-scroll-buttons */
    --arrow-button-width:calc(41 * (1pt - var(--gfpt)) +
                          48 * var(--gfpt));
    --arrow-button-offset:calc(9 * (1pt - var(--gfpt)) +
                          12 * var(--gfpt));

    /* ramdot, the rotated oblong after headings */
    --green:#56ac7a;
    --dark-green:#448961;
    --ramdot-width:0.9;
    --ramdot-height:calc(0.9 * 1.12 / 1.24);

    /* Gallery headings and tile captions */
    --pink:#e50b91;
    --dark-pink:#b70874;

    /* Make photo galleries width this much less than they would otherwise think. */
    /* JS may measure the scrollbar width and update this value. */
    --presumed-scrollbar-width:40px;

    /* Sizes for smaller galleries */
    --small-gallery-caption-font-size:calc(0.9 * var( --gallery-caption-font-size));
    --small-gallery-caption-important-font-size:calc(0.8 * var( --gallery-caption-font-size));
    --small-thumb-short-edge: calc( 0.8 * var(--thumb-short-edge));
    --small-thumb-long-edge: calc( 0.8 * var(--thumb-long-edge));

    /* Hamburger symbol sizes and positioning */
    --hamburger-height: calc( var(--menu-font-size) + 9px);
    --hamburger-width: calc(var(--hamburger-height) * 1.33);
    --hamburger-bar-height: calc(var(--hamburger-height) / 6);
    --hamburger-bar-gap: calc((var(--hamburger-height) - 3 * var(--hamburger-bar-height)) / 2);

    --hamburger-margin-top: calc( ( var(--logo-height) - var(--hamburger-height) ) / 2);
}

.wide-text {
    --main-textbox-text-width: max(
        var( --main-textbox-wide-width),
        calc( var( --main-textbox-width) + 240px));

    /* We could be more extreme in taking extra space */
    /* @media (min-width: 1400px) { */
    /*     --main-textbox-wide-width:calc( var( --main-textbox-width) + 440px); */
    /* } */
    /* @media (min-width: 1600px) { */
    /*     --main-textbox-wide-width:calc( var( --main-textbox-width) + 640px); */
    /* } */
}
/* Main image hides behind text if text is particularly wide text, like the dates page */
main.content.wide-text > :first-child {
    z-index:-10;
}

.gallery-button-background {
    fill: var(--green);
}
button:hover .gallery-button-background {
    fill: var(--dark-green);
}
.gallery-button-arrow {
    fill:white;
}

main.no-overlap {
    --main-textbox-text-width: var(--main-textbox-width);
}

@font-face
{
    font-family: "Bebas Neue Pro Expanded Bold";
    src: url("ttf/Bebas-Neue-Pro-Expanded-Bold-BF66cf3d77b066f.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}
@font-face
{
    font-family: "Bebas Neue Pro Expanded Extra Bold";
    src: url("ttf/Bebas-Neue-Pro-Expanded-ExtraBold-BF66cf3d793166e.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}
@font-face
{
    src: url("ttf/OpenSans-Bold.ttf") format("truetype");
    font-family: "OpenSans";
    font-weight: bold;
    font-style: normal;
}
@font-face
{
    src: url("ttf/OpenSans-Regular.ttf") format("truetype");
    font-family: "OpenSans";
    font-weight: normal;
    font-style: normal;
}
@font-face
{
    src: url("ttf/OpenSans-SemiBold.ttf") format("truetype");
    font-family: "OpenSans-SemiBold";
    font-weight: bold;
    font-style: normal;
}
@font-face
{
    src: url("ttf/RedditMono-Light.ttf") format("truetype");
    font-family: "RedditMono";
    font-weight: normal;
    font-style: normal;
}


h1, h2, h3,
header .menu, header .menu > input[type=text],
footer .menu,
#detailed-menu {
    font-family: "Bebas Neue Pro Expanded Extra Bold", sans;
}
.subheading, .details * {
    font-family: "Bebas Neue Pro Expanded Bold", sans;
}

html
{
    font-family: "OpenSans";
    font-size:var(--body-font-size);
}

code {
    font-family:OpenSans;
}

body
{
    background-color: black;
    color: white;
    margin: 0;
    padding-top: 23px;

    /* Stop mobile browser from auto-resizing certain containers */
    text-size-adjust: none;
    -moz-text-size-adjust: none;
}

h1, h2, h3
{
    margin-top: 0;
    margin-bottom:.75ex;
}
header {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-end;
    padding: 0 var(--body-padding);
    align-items: flex-start;
    margin-bottom: 52px;

    /* Align with main logo and hamburger */
    margin-top:var(--hamburger-margin-top);
}
@media (max-width: 30rem) {
    header {
        flex-wrap: wrap;
    }
}
header a.pagelogo {
    display:inline-block;
    height:var(--logo-height);
    margin-left:var(--logo--left-overhang);
    align-self:flex-start;
    margin-top:calc( -1 * var(--hamburger-margin-top));
}
header a.pagelogo img {
    height:100%;
}
.menu {
    flex-grow:0;
    font-size:var(--menu-font-size);
    letter-spacing: 0.01em;

    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:flex-end;
    gap:5px;

    position:relative; /* search-result is a child of the menu */
}
.menu.no-split {
    flex-grow:0;
    flex-wrap:nowrap;
    margin-top:0;
}
header .logo-burger-pair {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    flex-grow:1;
    align-self: flex-start;
    gap: calc( .75 * var(--menu-font-size));
    position:relative; /* detailed menu is a child of this pair */

    width:stretch;
    width:-moz-available;
    width:-webkit-fill-available;
}
.menu > .item {
    color:white;
    text-transform: uppercase;
    padding: 2px 0 2px 16px;
}
.menu > a.item {
    text-decoration: none;
}
.menu > input.item[type=text] {
    border:none;
    background-color:var(--green);
    min-width:10em;
    font-size:var(--menu-font-size);
    letter-spacing: 0.01em;
    padding: 2px 8px;
    margin-left:8px;
}

main.content a {
    color: inherit;
    text-decoration: none;
    color:var(--green);
}
.intro h1 {
    font-size:var(--tile-h1-size);
    line-height:2ex;
    width: min( calc( 100vw - 2 * var(--body-padding)), var(--main-textbox-text-width));
    margin-top:0;
    margin-bottom:0;
}
.intro h2 {
    font-size:var(--tile-h2-size);
    line-height:2ex;
    width: min( calc( 100vw - 2 * var(--body-padding)), var(--main-textbox-text-width));
    margin-top:.25ex;
    margin-bottom:0;
}
.intro h3 {
    font-size:var(--tile-h3-size);
    line-height:2ex;
    margin-top: 2ex;
    margin-bottom: .7ex;
}
.intro h1::after { /* ramdot after heading */
    width:calc(var(--tile-h1-size) * var(--ramdot-width));
    height:calc(var(--tile-h1-size) * var(--ramdot-height));
    border-radius:calc(var(--tile-h1-size) * .15 * var(--ramdot-width));
    background-color:var(--green);
}
.intro h1::after { /* ramdot after heading */
    content: "";
    display: inline-block;
    margin-left: calc(.33em * var(--ramdot-width));
    transform: translateY(2px) rotate(-15deg);
}
.intro .subheading {
    font-size: var(--tile-subheading-size);
    margin-top:.35ex;
    margin-bottom:2ex;
}
.intro .subheading > * {
    color:var(--green);
}
.intro .subheading > :not(:first-child) {
    padding-left:1em;
    border-left:1px solid var(--green);
}
.intro .subheading > :not(:last-child) {
    padding-right:1em;
    border-right:0px solid var(--green);
}
td {
    /* may be dialog text, so put person and text flush-top*/
    vertical-align: top;
}

/* Main image and heading and text */
main.content {
    display:flex;
    flex-direction:row-reverse;
    flex-wrap:wrap;
    justify-content:space-evenly;
    align-items:flex-start;
    padding: calc( 0.64 * var(--tile-h1-size)) 0 0 var(--body-padding);
}
main.content > :first-child { /* Main Image */
    width:calc( 100vw - 1 * var(--body-padding));
    max-width:min( calc( 100vw - 1 * var(--body-padding)),
                   max( var(--main-image-width), 50%));
    /* If image wraps, place it flush left */
    margin-right:auto;
    margin-left:0;
}
main.content:not(.no-overlap) > :first-child {
    /* Do not let main image mask pointer events,
       but do allow videos to mask pointer events. */
    pointer-events: none;
}
main.content > :last-child { /* Heading and text */
    max-width:min( calc( 100vw - 2 * var(--body-padding)),
                   var(--main-textbox-width));
    margin-right:auto;
}
p, table, ul, ol {
    font-family: "OpenSans";
    font-size:var(--general-font-size);
    line-height:3ex;
    margin:1em 0;
}
.detail[det] p,
.detail[det] table,
.detail[det] ul,
.detail[det] ol {
    font-size:calc( var(--general-font-size) * 11 / 12);
}

thead {
    line-height:0;
}
ul, ol {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
li {
    padding-left:1em;
    line-height:2.5ex;
}
li:not(:last-child) {
    margin-bottom:1.5ex;
}
li::before {
    content: "–";
    display: inline-block;
    width: 1em;
    margin-left:-1em;
}
main.content .intro p {
     /* TEXT OVERLAPS BOX */
    width: min( calc( 100vw - 2 * var(--body-padding)), var(--main-textbox-text-width));
}
main.content > :first-child img {
    width:100%;

    object-fit: cover;
    object-position: 50% 0%;

    transition: max-height 100ms ease;
}
main.content:not(.wide-text) > :first-child img {
    /* @media (min-width: 1200px) { */
        max-height:var(--main-image-max-height);
    /* } */
}
main.content > :first-child video {
    width:100%;
}
.audio-box {
    position:relative;
}
.audio-box .gallery-button-background {
    fill: transparent;
}
.audio-box .gallery-button-arrow {
    fill:var(--green);
}
.audio-box:hover .gallery-button-arrow {
    fill:var(--dark-green);
}
.audio-box svg {
    position:absolute;
    z-index:10;
    pointer-events: none;
    top:calc(50% - 0.5 * var(--arrow-button-width));
    right:calc(50% - 0.5 * var(--arrow-button-width));
    width:calc(var(--arrow-button-width) * 1.5);
    opacity:1;

    transition-property:opacity, top, right, width, filter, transform;
    transition-duration:2s, 2s, 2s, 2s, .1s, .1s;
    transition-timing-function:ease-in-out, ease-in-out, ease-in-out, ease-in-out, linear, linear;
}
.audio-box.playing svg {
    --arrow-button-width:192pt;
    opacity:0;
}
.audio-box svg:last-of-type { /* triangle in play-button */
    filter: drop-shadow( calc( var(--arrow-button-width) / 16) calc( var(--arrow-button-width) / 16) calc( var(--arrow-button-width) / 12) black);
}
.audio-box audio {
    margin-top:60px;
}
.audio-cover {
  display: block;
  width: 100%;
  cursor: pointer;
}
main.content > :first-child audio {
    width:100%;
}

/* home-made detail-summary-buttons */
.details {
    width: min( calc( 100vw - 2 * var(--body-padding)), var(--main-textbox-text-width));
    margin-top:3.5ex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 2ex;
}
/* Headings in home-made detail-summary-buttons and jump buttons */
.details > button, .details > a
{
    font-size: 10pt;
    display:inline-block;
    margin-right:1em;
    background:none;
    padding:0;
    border:none;
    text-decoration: none;
}
.details > * label {
    font-size: 10pt;
    cursor: pointer;
    background-color:var(--green);
    color:black;
    font-weight:bold;
    text-transform: uppercase;
    /* Refact me: these 8px reoccur in .detail and in .photo-gallery */
    padding:.5ex 8px;
}
.details > button label.on {
    background-color:white;
    color:black;
}
.details a[disabled] {
    pointer-events: none;
    opacity:.5;
}
.details a[disabled] label {
    background-color:var(--dark-green);
}

:root {
    --detail-opening-trans: max-height .35s ease-in .125s;
    --detail-closing-trans: max-height .35s ease-out 0s;
}

.detail[det] { /* The switchable content */
    /* Fixme: find -8px in photo gallery and then find a better solution. */
    margin-left:8px;
    overflow-y:clip;

    max-height:180ex;
    transition: var(--detail-opening-trans);

    padding:1px 0 0 0; /* This stops margins from spreading from invisible content */
    position:relative;
    top:-1px;          /* This accounts for the extra pixel introduced thereby */
}
.summary {
    padding-top:10px;
}

#popupInfoRadio_0:not(:checked) ~ .detail[det="popupInfoRadio_0"],
#popupInfoRadio_1:not(:checked) ~ .detail[det="popupInfoRadio_1"],
#popupInfoRadio_2:not(:checked) ~ .detail[det="popupInfoRadio_2"],
#popupInfoRadio_3:not(:checked) ~ .detail[det="popupInfoRadio_3"],
#popupInfoRadio_4:not(:checked) ~ .detail[det="popupInfoRadio_4"],
#popupInfoRadio_5:not(:checked) ~ .detail[det="popupInfoRadio_5"],
#popupInfoRadio_6:not(:checked) ~ .detail[det="popupInfoRadio_6"],
#popupInfoRadio_7:not(:checked) ~ .detail[det="popupInfoRadio_7"],
#popupInfoRadio_8:not(:checked) ~ .detail[det="popupInfoRadio_8"],
#popupInfoRadio_9:not(:checked) ~ .detail[det="popupInfoRadio_9"] {
    max-height:0px;
    transition:var(--detail-closing-trans);
}

/* The clickable header buttons, one on per content, one off per content */
#popupInfoRadio_0:not(:checked) ~ .details [det=popupInfoRadio_0] .on,
#popupInfoRadio_0:checked ~ .details [det=popupInfoRadio_0] .off,
#popupInfoRadio_1:not(:checked) ~ .details [det=popupInfoRadio_1] .on,
#popupInfoRadio_1:checked ~ .details [det=popupInfoRadio_1] .off,
#popupInfoRadio_2:not(:checked) ~ .details [det=popupInfoRadio_2] .on,
#popupInfoRadio_2:checked ~ .details [det=popupInfoRadio_2] .off,
#popupInfoRadio_3:not(:checked) ~ .details [det=popupInfoRadio_3] .on,
#popupInfoRadio_3:checked ~ .details [det=popupInfoRadio_3] .off,
#popupInfoRadio_4:not(:checked) ~ .details [det=popupInfoRadio_4] .on,
#popupInfoRadio_4:checked ~ .details [det=popupInfoRadio_4] .off,
#popupInfoRadio_5:not(:checked) ~ .details [det=popupInfoRadio_5] .on,
#popupInfoRadio_5:checked ~ .details [det=popupInfoRadio_5] .off,
#popupInfoRadio_6:not(:checked) ~ .details [det=popupInfoRadio_6] .on,
#popupInfoRadio_6:checked ~ .details [det=popupInfoRadio_6] .off,
#popupInfoRadio_7:not(:checked) ~ .details [det=popupInfoRadio_7] .on,
#popupInfoRadio_7:checked ~ .details [det=popupInfoRadio_7] .off,
#popupInfoRadio_8:not(:checked) ~ .details [det=popupInfoRadio_8] .on,
#popupInfoRadio_8:checked ~ .details [det=popupInfoRadio_8] .off,
#popupInfoRadio_9:not(:checked) ~ .details [det=popupInfoRadio_9] .on,
#popupInfoRadio_9:checked ~ .details [det=popupInfoRadio_9] .off {
    display:none;
}
#popupInfoRadio_0:focus-visible ~ .details [det=popupInfoRadio_0] label,
#popupInfoRadio_1:focus-visible ~ .details [det=popupInfoRadio_1] label,
#popupInfoRadio_2:focus-visible ~ .details [det=popupInfoRadio_2] label,
#popupInfoRadio_3:focus-visible ~ .details [det=popupInfoRadio_3] label,
#popupInfoRadio_4:focus-visible ~ .details [det=popupInfoRadio_4] label,
#popupInfoRadio_5:focus-visible ~ .details [det=popupInfoRadio_5] label,
#popupInfoRadio_6:focus-visible ~ .details [det=popupInfoRadio_6] label,
#popupInfoRadio_7:focus-visible ~ .details [det=popupInfoRadio_7] label,
#popupInfoRadio_8:focus-visible ~ .details [det=popupInfoRadio_8] label,
#popupInfoRadio_9:focus-visible ~ .details [det=popupInfoRadio_9] label
{
    background-color:var(--pink);
}


/* built-in detail-summary for intro text */
details {
    position:relative;
    margin-top:-.5ex;
    margin-bottom:1ex;
}
summary {
    list-style: none;
    text-transform:uppercase;
    color:var(--green);
    font-weight:bold;
    cursor: pointer;
    font-family: "Bebas Neue Pro Expanded Bold";
    font-size:13pt;
}
details[open] {
    padding-bottom:2ex;
}
details[open] > summary {
    list-style: none;
    position:absolute;
    bottom:0; /* Display summary at the bottom if details are open */
}
details[open] > summary .closed-text {
    display:none; /* Show different summary for opening ... */
}
details:not([open]) > summary .open-text {
    display:none; /* ... than for closing ... */
}
details {
    /* smooth opening and closing of detail content is rubbish because
   close will always be instantanious, since it is the browser
   removing the content. */
    /* Instead, rebuild closing with checkbox logic. */
}
details[open] {
}


main.galleries {
    padding-left: calc( var(--body-padding) + var(--gallery-offset));
    padding-right: 0;
}
main.galleries h3 {
    font-size:var(--gallery-heading-size);
    color: var(--pink);
    text-transform: uppercase;
    margin-top:var(--gallery-margin-top);
    margin-bottom:1.8ex;
}
main.galleries h3:first-of-type {
    margin-top: calc(0.5 * var(--gallery-margin-top));
}
main.galleries h3.small {
    color: var(--green);
    font-size:calc(0.8 * var(--gallery-heading-size));
    margin-top:calc(var(--gallery-margin-top) / 0.8);
}
.subcaption {
    font-size:85%;
    margin-left:1em;
    text-transform: initial;
}
.subcaption:before { content:"("; }
.subcaption:after { content:")"; }
main.galleries a {
    text-decoration: none;
}

.gallery {
    position: relative;
}
.scroll-container.small {
    --gallery-caption-font-size:var( --small-gallery-caption-font-size);
    --gallery-caption-important-font-size:var( --small-gallery-caption-important-font-size);
    --thumb-short-edge: var(--small-thumb-short-edge);
    --thumb-long-edge: var(--small-thumb-long-edge);

}
.scroll-container
{
    display: flex;
    width: fit-content;
    max-width:100%;
    overflow-x: scroll;
    overflow-y: clip;
    scroll-behavior: smooth;
    /* gap is caption's line-height (assumed 1.2em) plus padding (1ex = .5em) */
    gap: calc( 1.7 * var(--gallery-caption-font-size));
    box-sizing: border-box;

    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in Internet Explorer and Edge */
}
.scroll-container::-webkit-scrollbar
{
  display: none; /* Hide scrollbar in Chrome, Safari, Opera */
}
.scroll-container img {
    height: var(--thumb-short-edge);
    width: var(--thumb-long-edge);

    object-fit: cover;
    object-position: center;
}
.scroll-container.small img {
}
.scroll-container img.upright {
    height: var(--thumb-long-edge);
    width: var(--thumb-short-edge);
}
.scroll-container img.square {
    height: var(--thumb-long-edge);
    width: var(--thumb-long-edge);
}
.image-wrapper
{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
}
.image-wrapper span.caption
{
    width: var(--thumb-long-edge);
    background-color: #424242; /* grayscale of --pink */
    color: white;
    font-family: Bebas Neue Pro Expanded Extra Bold;
    font-size: var(--gallery-caption-font-size);
    letter-spacing: 0.01em;
    text-align: left;
    padding: .5ex .5em;
    flex-grow:1;
    min-height:5.52ex;
}
.image-wrapper span.force-bottom-right {
    margin-left:.5em;
    white-space: nowrap;
    position:relative;
    left:0;
}
.image-wrapper > span .important {
    font-size: var(--gallery-caption-important-font-size);
    color:var(--green);
}
.image-wrapper > span .important:last-child {
}
.image-wrapper > span .important:not(:first-child) {
    padding-left:.5em;
    border-left:1px solid var(--dark-green);
}
.image-wrapper > span .important:not(:last-child) {
    padding-right:.5em;
    border-right:1px solid var(--dark-green);
}
.arrow {
    position: absolute;
    z-index: 3;
    height: var(--arrow-button-width);
    top: calc(50% - 0.5 * var(--arrow-button-width));
    font-size:1cm;
    border:none;
    background-color: transparent;

    transition-duration:350ms, 50ms;
    transition-property:opacity, filter;
    transition-timing-function:ease-in-out, linear;

    filter: drop-shadow( calc( var(--arrow-button-width) / 16) calc( var(--arrow-button-width) / 16) calc( var(--arrow-button-width) / 12) black);
}
.arrow.hidden {
    opacity:0;
    pointer-events: none;
}
.arrow.left {
    left: var(--arrow-button-offset);
}
.arrow.right {
    right: var(--arrow-button-offset);
}
.arrow > img, .arrow > svg {
    height: 100%;
}
.arrow:active {
    transform: translateX(calc( var(--arrow-button-width) / 48)) translateY(calc( var(--arrow-button-width) / 48));
    filter: drop-shadow( 0 0 calc( var(--arrow-button-width) / 32) black);
}

/* Popups */
label[for^=popup_] img {
    transition-property:transform;
    transition-duration:.25s;
    transform-origin:center center;
}

#popup_1:checked ~ * label[for=popup_1] img {
    transform:scale(1.2);
}
#popup_2:checked ~ * label[for=popup_2] img {
    transform:scale(1.2);
}
#popup_3:checked ~ * label[for=popup_3] img {
    transform:scale(1.2);
}
#popup_4:checked ~ * label[for=popup_4] img {
    transform:scale(1.2);
}
#popup_5:checked ~ * label[for=popup_5] img {
    transform:scale(1.2);
}

footer {
    padding:
        12ex
        var(--body-padding)
        calc(27px + 0.5 * var(--logo-height))
        calc( var(--body-padding) + var(--gallery-offset));

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 4ex;

    background-image: url(Logo_RAM_white_green_green.svg);
    background-size: auto calc(0.5 * var(--logo-height));
    background-repeat: no-repeat;
    background-position: center bottom;
}

footer .menu {
    justify-content:space-between;
    gap:21px;
}
footer .menu > * {
    color:#c2c2c2;
    padding:0;
}


table.dates {
    width:min( calc( 100vw - 2 * var(--body-padding)), var(--main-textbox-text-width));
    background: linear-gradient(to right, #0000 0%, #00000040 90%, #0000 100%);
    line-height:initial;
    border-collapse:collapse;
    margin:2ex 0 0 0;
}
table.dates th {
    font-family: "Bebas Neue Pro Expanded Bold", sans;
    font-size: 11pt;
    text-transform: uppercase;
    text-align: center;
    padding: 1px 5px;
    background-color: var(--green);
    color: black;
}
table.dates td {
    padding:.75ex 0 .75ex 0;
    vertical-align:middle;
}
table.dates tr:not(:last-child) td {
    border-bottom:1px dotted #606060;
}
table.dates td:not(:first-child) {
    padding-left:10px;
}
table.dates td:not(:last-child) {
    padding-right:10px;
}

/* Day, date, time */
table.dates div.datetime {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap:9pt;
    word-spacing: 9pt;
    text-align:center;
    font-family:RedditMono;
}
table.dates span.day { font-size:200%; color:#e0e0e0; }
table.dates span.date { }
table.dates span.time { font-size:120%; font-weight:bold; }

.corona { font-size:80%; color: var(--green); }

/* Normal width:
 * three address lines, no breaks inside address lines
 * no breaks in progname
 */
.address-line, .progname {
    display:block;
    white-space:nowrap;
}
/* We could allow addresses to spread into one line, when there is space, */
/* and have the lines separated by commas */
/* @media (min-width: 1400px) { */
/*     .address-line { */
/*         display:inline-block; */
/*     } */
/*     .address-line:not(:last-child) { */
/*         margin-right:1em; */
/*     } */
/*     .address-line:not(:last-child):after { */
/*         content:", "; */
/*     } */
/* } */

/* Narrow width:
 * Address lines and progname break anywhere
 * narrowed table spacing
 */
@media (max-width: 750px) {
    .address-line, .progname {
        white-space:initial;
    }
}
@media (max-width: 780px) {
    table.dates td:not(:first-child) {
        padding-left:5px;
    }
    table.dates td:not(:last-child) {
        padding-right:5px;
    }
}

.photo-gallery {
    position:relative;
    margin-top:20px;
    width: calc(100vw - var(--presumed-scrollbar-width) - 0 * var(--body-padding));
    /* RefactMe: the -8px is the opposite of normal popup button detail's left margin */
    /* Fixme: this looks stupid if gallery is very short */
    margin-left: calc( -8px - var(--body-padding));

    border:45px solid black;
    border-right:none;
    border-left:none;

    background-color:black;
    padding-top: 18px;
    padding-bottom: 18px;
}
.photo-gallery-scroll-container {
    width:fit-content;
    max-width: calc(100vw - 0 * var(--body-padding) - var(--presumed-scrollbar-width));
    overflow-x: auto;

    display:flex;
    flex-wrap:nowrap;
    gap:45px; /* need not shrink with screen width */

    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in Internet Explorer and Edge */
}
.photo-box {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
}
.photo-box > img {
    height:calc( 2 * var(--thumb-short-edge)); /* probably too much for mobiles */
    width:calc( 2 * var(--thumb-short-edge));
    object-fit: cover;
    object-position: center;
}
.photo-box > .caption {
    display:none;
    flex-grow:1;
    font-family: Bebas Neue Pro Expanded Extra Bold;
    font-size: var(--gallery-caption-font-size);
    letter-spacing: 0.01em;
    padding:.5ex .5em;
    background-color:var(--green);
    color:black;
    width:calc( 2 * var(--thumb-short-edge));
}

/* Animation of play- and scroll-buttons */
.arrow {
    transition-property:filter, transform;
    transition-duration:.1s;
    transition-timing-function:linear;
}

/* short dates <-> long dates animation */

/* Checkbox that toggles between short and long dates list */
:root {
    --dates-opening-trans: max-height .35s ease-in .1s, opacity .15s ease-in 0s;
    --dates-closing-trans: max-height .20s ease-out 0s, opacity .20s ease-out 0s;
}

.dates-short, .dates-long {
    transition: var(--dates-opening-trans);
    overflow-y:clip;
    max-height:900ex;
    opacity:1;
    padding:1px 0 0 0;
    position:relative;
    top:-1px;
}
#dates-toggle:checked ~ .dates-short,
#dates-toggle:not(:checked) ~ .dates-long {
    max-height:0px;
    opacity:0;
    transition: var(--dates-closing-trans);
}
label[for=dates-toggle] {
  text-transform: uppercase;
  color: var(--green);
  font-weight: bold;
  cursor: pointer;
  font-family: "Bebas Neue Pro Expanded Bold";
  font-size: 13pt;
}

#detailed-menu {
    /* menu hangs from bottom of menu-burger-pair */
    position:absolute;
    top: 100%;
    left:0;
    z-index:51;

    width: 100%;
    box-sizing: border-box;

    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:.5ex;

    background-color:#000000c0;
}
#detailed-menu a {
    color:black;
    text-decoration:none;
    text-transform: initial;

    text-transform: uppercase;
    font-weight:bold;
    font-size:14pt;

    background-color:#c0c0c0;
    padding:.5ex .5em;
}
#search-result {
    /* results hang flush right from bottom of menu */
    position:absolute;
    top: 100%;
    right:0;
    z-index:50;

    /* If page is narrow, results will leave padding left (like main content)
     * and right (like menu) */
    width: 25em;
    max-width:calc(100vw - 2 * var(--body-padding) - var(--presumed-scrollbar-width));
    box-sizing: content-box;
    padding: 2ex 0 0 0;

    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:1ex;
}
#search-result > a {
    color:black;
    text-decoration:none;
    text-transform: initial;

    background-color:#c0c0c0;
    padding:1ex 1em;
}
#search-result > a > div:nth-child(1) {
    text-transform: uppercase;
    font-weight:bold;
    font-size:14pt;
}
#search-result > a > div:nth-child(2) {
    font-weight:bold;
    font-size:12pt;
}
#search-result > a > div:nth-child(3) {
    font-weight:bold;
    font-size:11pt;
    color:var(--pink);
}
#search-result > a > div:nth-child(3) > span {
}
#search-result > a > div:nth-child(3) > span:not(:first-child) {
    margin-left:.5em;
}
#search-result > a > div:nth-child(3) > span:not(:last-child) {
    margin-right:.5em;
}
#search-result > a > div:nth-child(4) {
    font-weight:normal;
    font-size:10pt;
    color:#404040;
}
#search-result > a > div:nth-child(4) > span {
}
#search-result > a > div:nth-child(4) > span:first-child:before {
    content:"... ";
}
#search-result > a > div:nth-child(4) > span:not(:first-child):before {
    content:"... – ...";
}
#search-result > a > div:nth-child(4) > span:last-child:after {
    content:" ...";
}

.hamburger {
    background: none;
    border: none;
    padding: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: var(--hamburger-width);
    height: var(--hamburger-height);
    cursor: pointer;

    flex-shrink: 0;
    flex-grow: 0;
}

.hamburger div {
    width: 100%;
    height: var(--hamburger-bar-height);
    background-color: var(--green);
    border-radius: calc(var(--hamburger-bar-height) / 2);
    transition-property: transform, opacity, height;
    transition-duration: 1s;
    transition-timing-function: ease;
    transform-origin: center;
}

#detailed-menu-toggle, #dates-toggle, input[type=radio]
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}
/* When clicked, the hamburger transitions into an X */
#detailed-menu-toggle:checked ~ *
.hamburger div:nth-child(1) {
    transform: translateY(calc(var(--hamburger-height) / 2 - var(--hamburger-bar-height) / 2)) rotate(-315deg);
}

#detailed-menu-toggle:checked ~ *
.hamburger div:nth-child(2) {
    opacity: 0;
    height: 0;
}

#detailed-menu-toggle:checked ~ *
.hamburger div:nth-child(3) {
    transform: translateY(calc(-1 * (var(--hamburger-height) / 2 - var(--hamburger-bar-height) / 2))) rotate(315deg);
}

#detailed-menu-toggle:not(:checked) ~ * #detailed-menu {
    display:none;
}



#detailed-menu-toggle:focus-visible ~ * .hamburger div,
.hamburger:hover div
{
    outline:none;
    background-color:var(--pink);
}
.menu > *:not(input):focus-visible,
.menu > *:not(input):hover,
main.content a:focus-visible,
main.content a:hover {
    outline:none;
    color:var(--pink);
}
summary:focus-visible,
summary:hover {
    outline:none;
    color:var(--pink);
}
.menu > input[type=text]:focus-visible {
    outline:none;
    background-color:var(--pink);
}
#search-result > a:focus-visible,
#search-result > a:hover,
#detailed-menu > a:focus-visible,
#detailed-menu > a:hover {
    outline:none;
    background-color:#d8d8d8;
}

@media (max-width: 920px) {
    header {
        flex-wrap:wrap;
    }
}