/* =====================================================================
   Virtual museum © 2026 Michael Bycroft. 
   Code written with help from Claude (Anthropic).
   Inspired by image viewers on webpages of the British Museum, Science Museum (London), Gallica, 
   and NASA, and by countless real-life museum exhibits.
   Free to reuse for non-commercial purposes provided this notice is kept. If you use this,
   I'd love to hear about it! Contact: m.bycroft@warwick.ac.uk
   ===================================================================== */

/* =====================================================================


   HOW THIS FILE IS ORGANISED (search for the capitalised headings):
     1. SETTINGS .............. colours, and the sizes you are most likely to tweak
     2. PAGE .................. featured block, gallery, loading spinner
     3. MODAL AND SLIDES ...... the full-screen overlay, photo, layers
     4. CAPTION PANEL ......... caption text, series menu, sources
     5. POPOUTS ............... help box (over the photo) and panner (in the caption panel)
     6. NAV PANEL ............. buttons, zoom bar, icons
     7. TOOLTIPS
     8. MAXIMISED IMAGE ....... the image fills the screen; the caption shrinks to a small box on top of it
     9. RESPONSIVE ............ every @media rule that changes the layout, kept together at the
                                end so that it overrides the general rules above it

   Colours used throughout (search for these to restyle):
     #2d2d2d  dark panel background      #9a9a9a  button grey       #fcfbfb  button hover
     #e5e4e4 / #d2d1d1  text on the dark panel      #818181  thin border lines

   Browser support: current Chrome, Edge, Firefox and Safari (desktop, iOS and Android).
   Features that older browsers lack (container queries, @property, scrollbar-gutter) are
   used only for finishing touches; the slideshow still works without them.
   ===================================================================== */


/* =====================================================================
   1. SETTINGS
   All the slide's size variables live here, on the slide itself, so every rule below can use
   them. The phone and portrait overrides are in the RESPONSIVE section at the end.
   ===================================================================== */
.mySlides {
  --nav-w: 40px;                 /* width of the strip on the right that holds the nav panel */
  --mx-border: #5a5a5a;           /* the faint grey lines round the maximised caption box and nav panel (30% darker than #818181) */
  --nav-extra: 0px;              /* extra strip width while an image is maximised (see MAXIMISED IMAGE) */
  --min-caption: 200px;          /* least width the caption panel may be squeezed to (wide, thin photos) */

  /* help box: its gap to the photo's edges, and its widest size (phones and portrait: see RESPONSIVE) */
  --help-margin: 20px;
  --help-max-w: 400px;

  /* the little cross in the corner of each popout (same svg as the nav panel's cross, at 60% of its size) */
  --cross-color: lightgreen;
  --cross-hover: black;
  --cross-size: calc(var(--ico-close) * 0.6);

  /* NAV ICONS. The nav buttons are SVG line icons (their shapes live in NAV_ICONS in the JS). They are
     drawn in the button's own colour, so the hover colour change works unchanged.
       --ico-stroke   line thickness in screen pixels, the same at every icon size
       --ico-xxx      the icon's box size in px (each icon is drawn on a 20-unit grid; the visible shape
                      is smaller than the box, as the shapes keep some margin)
     Computers use these sizes; phones and short screens use the second set (see RESPONSIVE).
     The button's tap area is set separately (its height/width in the NAV PANEL section). */
  --ico-stroke: 1.5px;
  --ico-close: 30px;
  --ico-prev: 30px;
  --ico-next: 30px;
  --ico-menu: 30px;
  --ico-max: 24px;               /* the maximise / minimise icon */
  --ico-zoom: 30px;
  --ico-popbtn: 30px;            /* the panner and help icons at the bottom of the nav panel */
  --ico-corner: 30px;            /* the exit cross in the text panel's corner (upright phones) */
}

/* Makes padding and borders count inside an element's width/height (affects the whole page) */
* {
  box-sizing: border-box;
}


/* =====================================================================
   2. PAGE: featured block, gallery, loading spinner
   ===================================================================== */

/* ----- FEATURE BLOCK: large image + title at the top of the page.
   Stacks vertically on narrow screens (see RESPONSIVE). ----- */
.feature {
  width: 100%;
  display: flex;
  align-items: center;
}

.image-box img {
  display: block;
  max-width: 300px;
  width: 100%;
  height: auto;
}

.title-box {
  flex: 1;
  padding-left: 30px;
  text-align: left;
  margin-top: 0;
}

/* !important: the host page's own heading styles would otherwise win */
.title-box h2 {
  margin: 0 0 10px !important;
}

/* ----- GALLERY: one thumbnail per series.
   .thumb width sets the thumbnail size; gap sets the spacing. ----- */
.gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  padding: 20px 0 0 0;
}

.thumb {
  width: 200px;
  margin-bottom: 20px;
}

.thumb h4 {
  margin: 15px 0 0 0 !important;
  text-align: center !important;
}

.thumb img {
  width: 200px;
  display: block;
}

.thumb-week {
  margin: 8px 0 0 0;               /* gap between the title and the week text */
  text-align: center !important;
  font-size: 11pt;
}

.cursor {
  cursor: pointer;
}

/* Gallery images light up slightly on hover */
.image-box img,
.thumb img {
  transition: filter 0.25s ease;
}
.image-box img:hover,
.thumb img:hover {
  filter: brightness(1.10);        /* 1 = unchanged; try 1.08 for subtler, 1.2 for stronger */
}

/* Acknowledgment under the gallery */
.acknowledgment {
  margin: 70px 0 0 0;
  font-size: 11pt;
  text-align: left;
}

/* ----- LOADING SPINNER + FADE-IN (the script adds/removes these; see startLoader() and revealContent()) -----
   While loading, #feature, #gallery and the acknowledgment carry .ss-pending (invisible but still
   laid out, so lazy images and measurements keep working). When the key images are ready the spinner
   fades out (LOADER_FADE_MS in the script, keep equal to the .ss-loader transition) and the content fades in. */
.feature, .gallery, .acknowledgment {
  transition: opacity 0.6s ease;
}
.ss-pending {
  opacity: 0;
}
.ss-loader {
  display: flex;
  justify-content: left;
  padding: 40px 0 0 200px;
  transition: opacity 0.3s ease;
}
.ss-loader.ss-fade {
  opacity: 0;
}
.ss-loader img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: ss-spin 4s linear infinite;      /* 4s per turn: raise for slower */
}
.ss-loader img.ss-ready {
  opacity: 1;
}
.ss-ring {                                    /* fallback if there is no loading image */
  width: 50px;
  height: 50px;
  border: 4px solid #ccc;
  border-top-color: #555;
  border-radius: 50%;
  animation: ss-spin 1.2s linear infinite;
}
@keyframes ss-spin {
  to { transform: rotate(360deg); }
}

/* Loading / error message */
.loadmsg {
  font-family: Arial, sans-serif;
  color: #555;
  display: flex;
  align-items: center;
  gap: 20px;
}


/* =====================================================================
   3. MODAL AND SLIDES
   ===================================================================== */

/* ----- MODAL: the full-screen slideshow overlay -----
   Hidden until the script sets display:block. The script then adds the class .modal-visible,
   and the transition below fades it in. (Fade length: 0.25s here, and 250 in hideModal() in the script.) */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;                  /* height = top to bottom of what is actually visible. NOT 100vh/100dvh: on real
                                 phones those units can be wrong (taller than the visible area, especially
                                 around fullscreen), which made the slide too tall: photo cut off, caption
                                 squashed, nav row pushed off screen. In true fullscreen the browser sizes
                                 this element to the screen itself. */
  z-index: 1000;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.modal.modal-visible {
  opacity: 1;
  transform: scale(1);
}

/* ----- SLIDES -----
   Each slide is a row: [image] [caption panel], plus the nav panel pinned to the slide's right edge.
   The script shows one slide at a time (display: flex) and hides the rest (display: none). */
.mySlides {
  position: relative;               /* the nav panel and the help box are positioned against the slide */
  padding-right: calc(var(--nav-w) + var(--nav-extra));      /* reserves the strip the nav panel sits in */
  display: flex;
  justify-content: center;          /* centres the image+caption pair as a unit, so leftover space from a
                                       narrow/portrait image splits evenly on both sides instead of only
                                       on the right */
  width: 100%;
  height: 100%;                     /* exactly as tall as the modal (see .modal above) */
  overflow: hidden;
  background-color: #2d2d2d;        /* matches .caption-container's own background, so any leftover space
                                       next to a narrow/portrait image blends in rather than showing as
                                       a blank gap */
}

/* The image "window". It clips the photo when zoomed in; the zoom script moves and scales
   the <img> inside it, so nothing here needs changing for zoom to work. */
.image-container {
  height: 100%;
  flex-shrink: 0;
  transform: translateX(-1px);      /* hides the left border (the caption panel draws the seam instead) */
  position: relative;
  overflow: hidden;                 /* clips the zoomed image */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* The grey side borders live on an overlay, because borders on the <img> itself would be scaled up
   along with the zoom. */
.image-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 /* border: 1px solid #818181; */
  pointer-events: none;
  transition: opacity 0.4s ease;
}
/* when a maximised image shrinks back, the border is the last thing to return (it fades in once the glide is over) */
.mySlides.mx-out .image-container::after {
  opacity: 0;
  transition: none;
}

.image-container img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transform-origin: 0 0;
  pointer-events: none;             /* drags register on the container, not the <img> */
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.3s ease;
}

/* Fade the photo in once it has loaded (the script adds .loaded), so a slow download doesn't
   visibly "paint down" the screen */
.image-container > img:not(.loaded) {
  opacity: 0;
}

.image-container.zoomable           { touch-action: none;       /* lets the script handle pinch itself */
                                      cursor: zoom-in; }        /* magnifying glass: click to zoom to the clicked spot */
.image-container.can-pan            { cursor: grab; touch-action: none; }   /* once zoomed in: open hand (overrides zoom-in) */
.image-container.can-pan.dragging   { cursor: grabbing; }

/* ----- WIDE, THIN PHOTOS (landscape only) -----
   --min-caption = the least width the caption panel may be squeezed to. If the photo at full height would
   leave less, its height shrinks instead (it stays hard against the top; the dark slide background fills the
   space below). The script sets --ar (width/height of the photo) and the class .has-ar on the slide.
   Needs container query units (all current browsers). The +1px pushes the bottom border off the screen when
   the photo is full height, so it only shows when the photo is shorter. */
@media (orientation: landscape) {
  .mySlides.has-ar {
    container-type: size;
  }
  .mySlides.has-ar .image-container {
    height: min(calc(100cqh + 1px), max(80px, calc((100cqw - var(--min-caption)) / var(--ar))));
    aspect-ratio: var(--ar);
  }
}

/* ----- LAYERS: overlay images on top of the photo -----
   .layers is exactly the size of the fitted photo and gets the same zoom transform as the photo (set in
   render() in the script). The long .layer selector beats the general '.image-container img' rules. */
.layers {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  pointer-events: none;
}

.image-container .layers .layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none !important;
  object-fit: fill;
  opacity: 0;                       /* the script sets the sheet's opacity when the layer is switched on */
  transition: opacity 0.4s ease;    /* fade in/out time */
  pointer-events: none;
}


/* =====================================================================
   4. CAPTION PANEL
   Right of the photo in landscape, below it in portrait. Holds the scrolling text (.info), the panner
   and the nav panel (.nav-container). In landscape the nav panel is pulled out of the flow and pinned to
   the slide's right edge; in portrait it sits below the text.
   ===================================================================== */
.caption-container {
  flex: 1;
  min-width: 0;
  max-width: 500px;                 /* the caption's own 400px + its 20px left/right padding: keeps the dark
                                       panel from ballooning when a narrow/portrait photo leaves lots of
                                       leftover width */
  padding: 15px 3px 0 20px;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;                /* the panel itself doesn't scroll (only .info does) */
  background-color: #2d2d2d;

  font-family: Garamond, "EB Garamond", "Adobe Garamond Pro", "Noto Serif", "Roboto Slab", -apple-system, BlinkMacSystemFont, serif;
}

/* Column: scrolling text, with the nav panel pinned beside it (landscape) or below it (portrait) */
.caption {
  max-width: 600px;
  width: 100%;
  align-self: stretch;              /* fill the panel's full height */
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The scrolling text area: the only part of the panel that scrolls.
   Inside are .maintext (the caption) and .list (the series menu); the script toggles which one shows. */
.info {
  display: block;
  flex: 1 1 auto;
  min-height: 0;                    /* lets it shrink and scroll instead of growing past the panel */
  overflow-y: auto;                 /* menu or main text scrolls here */
  overflow-x: hidden;
  margin-bottom: 0;
  scrollbar-gutter: stable;         /* so the scrollbar doesn't change the text width */
  padding-right: 10px;
}

/* Slim dark-grey scrollbar: just a thumb, no track and no arrows (Chrome, Edge, Safari) */
.info::-webkit-scrollbar              { width: 7px; }
.info::-webkit-scrollbar-track        { background: transparent; }
.info::-webkit-scrollbar-button       { display: none; }
.info::-webkit-scrollbar-thumb        { background: #464646; border-radius: 0; transition: background 0.3s ease; }
.info::-webkit-scrollbar-thumb:hover  { background: #4d4d4d; }

/* Firefox ignores the rules above, and Chrome would ignore them if it saw the rule below,
   so this is fenced off for browsers that lack ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
  .info { scrollbar-width: thin; scrollbar-color: #4a4949 transparent; }
}

/* ----- series menu ----- */
.list {
  display: none;
  line-height: 1.6;
  margin-top: -5px;
}

/* Wrapped titles sit tightly (1.2); the extra space between one item and the next is put back
   as a bottom margin, so only the lines *within* a long title get closer */
.listitem {
  color: #e5e4e4;
  font-size: 17pt;
  line-height: 1.2;
  margin-bottom: 0.8em;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
}

/* 'All weeks' heading at the top of the menu: same look as the items below it, but bold.
   (Not clickable, so no hover colour or pointer cursor.) */
.listhead {
  color: #fcfbfb;
  font-size: 17pt;
  font-weight: bold;
  line-height: 1.2;
  margin-top: 5px;
  margin-bottom: calc(10px + 0.8em);
  letter-spacing: 0.06em;
  user-select: none;
  -webkit-user-select: none;
}

/* ----- caption text ----- */
.maintext {
  color: #d2d1d1;
  font-size: 13pt;
  line-height: 1.4;
}

.title {
  display: inline;                  /* so the slide number can sit on the same line */
  color: #e5e4e4;
  font-size: 17pt;
  padding-top: 0 !important;        /* !important: the host page's own styles would otherwise add space */
  margin-top: 0 !important;
  line-height: 1.2 !important;
}

.numbertext {
  display: inline;                  /* follows straight on from the title */
  margin-left: 8px;                 /* gap between the title and the number */
  font-size: 11pt;
  color: #afaeae;
  margin-top: 0;
}

/* The caption itself: keeps line breaks typed into the spreadsheet cell.
   (Written as '.maintext .caption-text' so it beats the phone rule for '.maintext' margins.) */
.maintext .caption-text {
  white-space: pre-line;
  margin-top: 25px;
}

/* ----- SOURCES: sits under the caption text, same look but 2pt smaller on computers -----
   The block is only built when the sheet's 'sources' cell has text (see buildSlideshow in the script). */
.sources {
  color: #a3a2a2;                   /* dimmer grey than the caption (#d2d1d1) but still easy to read on #2d2d2d */
  font-size: 11pt;
  line-height: 1.25;                /* tighter lines, like footnotes */
  margin-top: 30px;                 /* gap between the last line of the caption and the 'Sources' heading */
  margin-bottom: 10px;
}
.sources-line {
  width: 30px;
  height: 20px;
  border-top: solid 1px #a3a2a2;
}
.sources-text {
  white-space: pre-line;            /* keep line breaks typed into the spreadsheet cell */
}

/* ----- LAYER LINKS: tagged words in the caption that switch a layer on/off ----- */
.layer-link {
  cursor: pointer;
  text-decoration: none;
  border-bottom: 2px dotted #d2d1d1;   /* a border draws on every browser; iPhone Safari didn't draw a dotted text-decoration */
  padding-bottom: 0;                   /* gap between the text and the dots: raise to move the dots down */
  transition: color 0.3s ease, background-color 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
}
.layer-link:hover {
  color: #fcfbfb;
}
.layer-link.layer-on {
  color: #fcfbfb;
  background-color: rgba(255, 255, 255, 0.16);
  border-bottom-style: solid;
}
.layer-link:focus-visible {
  outline: 1px solid #9a9a9a;
  outline-offset: 2px;
}

/* ----- text fades in when it re-occupies the space of a popout that has left -----
   The script (withInfoReveal) masks the newly uncovered strip at the bottom of .info (height --reveal-d)
   and fades it in. Needs @property; without it (older Firefox) the text simply appears at once. */
@property --reveal-a { syntax: '<number>'; inherits: false; initial-value: 1; }
.info.info-reveal {
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(rgba(0,0,0,var(--reveal-a)), rgba(0,0,0,var(--reveal-a)));
          mask-image: linear-gradient(#000, #000), linear-gradient(rgba(0,0,0,var(--reveal-a)), rgba(0,0,0,var(--reveal-a)));
  -webkit-mask-size: 100% calc(100% - var(--reveal-d)), 100% var(--reveal-d);
          mask-size: 100% calc(100% - var(--reveal-d)), 100% var(--reveal-d);
  -webkit-mask-position: top, bottom;
          mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.info.info-reveal-go {
  transition: --reveal-a 0.4s ease;           /* keep the same as INFO_REVEAL_MS in the script */
}


/* =====================================================================
   5. POPOUTS: boxes that pop into view on the slide
   - The HELP BOX sits inside the photo (bottom right on computers, bottom centre on upright phones).
   - The PANNER (small map) sits at the bottom of the caption panel.
   Each is hidden unless the script adds its '-on' class, and fades in/out via its '-vis' class.
   ===================================================================== */

/* The little cross in the corner of each popout. Colour: set by --cross-color; --cross-hover on hover. */
.popout-cross {
  position: absolute;
  /* the drawn X sits 30% in from the top and 10% in from the right of its svg box, so these offsets
     put the visible cross exactly 8px from the top and right of the frame */
  top: calc(8px - var(--cross-size) * 0.3);
  right: calc(8px - var(--cross-size) * 0.1);
  width: var(--cross-size);
  height: var(--cross-size);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--cross-color);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease;
}
.popout-cross::before {                       /* a slightly bigger target than the drawn X */
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}
/* (two separate rules: a browser that doesn't know :focus-visible would throw away a combined rule) */
.popout-cross:hover       { color: var(--cross-hover); }
.popout-cross:focus-visible { color: var(--cross-hover); outline: none; }
.popout-cross .ico {
  width: 100%;
  height: 100%;
}

/* ----- HELP BOX -----
   .help-container is an invisible layer that the script (fitHelp) sizes to exactly cover the photo. It
   lets clicks through to the photo; only the box itself catches them.
   .help-box is placed inside that layer using the --help-margin and --help-max-w settings above:
     - computers / sideways phones: bottom RIGHT corner of the photo
     - upright screens (see RESPONSIVE): bottom CENTRE of the photo
   It grows upwards as the text gets longer. If it grows taller than the photo, the script adds .help-spill,
   which pins it to the TOP of the photo instead so that the extra height runs down past the photo's bottom
   edge (into the caption area when upright). Looks like the hover tooltips. */
.help-container {
  display: none;
  position: absolute;
  z-index: 7;                       /* above the photo, caption text and nav panel */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;    /* keep the same as HELP_FADE_MS in the script */
}
.help-container.help-on  { display: block; }
.help-container.help-vis { opacity: 1; }
.help-container.help-vis .help-box { pointer-events: auto; }

.help-box {
  position: absolute;
  right: var(--help-margin);
  bottom: var(--help-margin);
  width: fit-content;
  max-width: min(var(--help-max-w), calc(100% - 2 * var(--help-margin)));
  background: white;
  color: black;
  border: solid 1px black;
  padding: 15px;
  border-radius: 4px;
  font-size: 11pt;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
.help-box.help-spill {
  top: var(--help-margin);
  bottom: auto;
  overflow-y: auto;                 /* the script also sets a max-height, so very long help scrolls */
}
.help-line {
  margin-bottom: 0.6em;             /* blank space between the lines of a help message (1em = a full blank line) */
}
.help-line:first-child {
  padding-right: 22px;              /* keeps the first line clear of the cross */
}
.help-line:last-child {
  margin-bottom: 0;
}
.help-cross {
  --cross-color: #8a8a8a;
}

/* ----- PANNER: small map of the zoomed photo, with a green window showing the visible area -----
   .popout-container is the panner's holder, at the bottom of .caption (a sibling of .info and .nav-container).
   The script sets the size of .panner-img (as large as fits: the full width of this box's content area, max
   300px tall including the border) and the size/position of .panner-window. Fades in and out. It takes its
   place in the layout, so the caption text stops above it. */
.popout-container {
  position: relative;
  z-index: 2;                       /* above the photo; below the nav panel (z-index 5) so that tooltips overlay it */
  flex: 0 0 auto;                   /* never shrinks: .info gives up space instead */
  margin-top: auto;                 /* stays at the bottom even when .info is hidden */
}

.panner-container {
  display: none;
  flex: 0 0 auto;
  margin-top: 20px;                 /* gap between the caption text and the panner */
  margin-bottom: 10px;
  padding: 0 25px 0 0;
  opacity: 0;
  border-radius: 8px;
  pointer-events: none;             /* a faded-out panner can't be grabbed */
  transition: opacity 0.3s ease;    /* keep the same as PANNER_FADE_MS in the script */
}
.panner-container.panner-on  { display: block; }
.panner-container.panner-vis { opacity: 1; pointer-events: auto; }

/* The frame carries the thin grey border (same grey as the main photo's side borders).
   The window is positioned against the frame's padding edge, so it sits just inside the border. */
.panner-frame {
  position: relative;
  display: block;
  width: fit-content;
  border: 1px solid #818181;
  border-radius: 8px;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
}
.panner-img {
  display: block;
  pointer-events: none;             /* drags register on the window, never on the <img> */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  border-radius: 8px;
}
.panner-window {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;                      /* the script overrides all four once the photo is zoomed */
  height: 100%;
  border: 3px solid lightgreen;
  border-radius: 8px;
  cursor: grab;                     /* open hand on hover, closed hand while dragging (as on the main photo) */
  touch-action: none;
}
.panner-window.dragging {
  cursor: grabbing;
}

/* The slide's layers, drawn small on top of the panner image (under the green window) */
.panner-layers {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.panner-layers .panner-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none !important;
  object-fit: fill;
  opacity: 0;                       /* the script sets the layer's opacity when it is switched on */
  transition: opacity 0.4s ease;
  pointer-events: none;
}


/* =====================================================================
   6. NAV PANEL: buttons + zoom bar, pinned to the right edge of the slide
   (upright screens move it below the text: see RESPONSIVE)
   ===================================================================== */
.nav-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--nav-w);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 5px 5px 0;
}
.nav-container,
.nav-container * {
  -webkit-user-select: none;
  user-select: none;
}

.buttonx {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* Nav buttons. The icons draw themselves in this colour (see NAV ICONS below). */
.prevx, .nextx, .maxbtn, .menu, .closex, .popbtn {
  color: #9a9a9a;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;   /* no grey flash when tapped on iPhone/Android */
  touch-action: manipulation;                 /* no double-tap-to-zoom delay on phones */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-right: 8px;
}

.closex {
  margin-right: 7px;
}

.popbtn:hover,
.closex:hover,
.closex:focus,
.prevx:hover,
.nextx:hover,
.maxbtn:hover,
.menu:hover,
.listitem:hover {
  color: #fcfbfb;
  text-decoration: none;
  cursor: pointer;
}

/* ----- the icons that open the popouts (panner map, help), pinned to the bottom of the nav panel -----
   The panner icon is hidden until the photo is zoomed in (the script adds .on). The help icon is always there.
   Landscape phones: sits in the column just under the '-' button. Portrait: sits in the row, right of the +/-. */
.nav-popout {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: calc(100% - 5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.popbtn.panner_button    { display: none; }

/* ----- MAXIMISE / MINIMISE BUTTON: sits just above the zoom bar's + button.
   When the photo is too small to maximise the script adds .mx-off: the icon becomes invisible but keeps its
   size, so the other icons don't move (on phones, where space is short, it gives up its space instead) ----- */
.maxbtn {
  margin-top: 50px;                 /* gap below the last button (this used to be the zoom bar's margin) */
}
.maxbtn.mx-off {
  visibility: hidden;
  pointer-events: none;
}
.popbtn.panner_button.on { display: inline-flex; }

/* ----- ZOOM BAR (vertical):   +  /  slider  /  -   -----
   Sits below the buttons in the nav panel. The script moves the thumb and the white filled line (via the
   --fill variable) and hides the whole bar for photos too low-res to be worth zooming. Phones show only the
   + and - buttons (see RESPONSIVE).
   The bar is invisible until the zoomable original has loaded, then fades in: the script adds .zoombar-on;
   while 'pending' the bar keeps its space but can't be seen or touched. Off = instant (no transition on the
   base state, so it vanishes with the other nav buttons); on = fades in over 1.2s. */
.zoombar {
  --zl: 150px;                      /* visual length of the vertical slider */
  display: flex;
  flex-direction: column;           /* + at top, slider, - at bottom */
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 4px;                  /* gap below the maximise button */
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.zoombar.zoombar-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.2s ease, visibility 0s;
}

.zbtn {
  color: #9a9a9a;
  text-decoration: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  margin-right: 8px;
}

/* The slider is laid out horizontally, then rotated -90deg so min is at the bottom (next to the - button).
   (The doubled class '.zoom.zoom' raises its specificity above the browser's own range-input styles.) */
.zoom.zoom {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  flex: none;
  width: var(--zl);
  max-width: none !important;
  height: 16px;                     /* the grab area; the visible line is the 1.5px drawn below */
  margin: calc((var(--zl) - 16px) / 2) calc(var(--zl) / -2);   /* reserve the rotated footprint: ~zero width, --zl of height */
  transform: rotate(-90deg);
  background: linear-gradient(to right, white var(--fill, 2px), #9a9a9a var(--fill, 2px)) center / 100% 1.5px no-repeat;
}

.zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 16px;
  background: #9a9a9a;
  cursor: pointer;
  transition: background 0.3s ease;
}
.zoom::-moz-range-thumb {
  width: 4px;
  height: 16px;
  border: none;
  background: #9a9a9a;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* Hover: the - and + buttons and the slider's thumb (the little dash) go white, like the other buttons.
   The thumb also stays white while being dragged (:active), and hovering anywhere on the slider counts,
   since the thumb itself is only 4px wide. The -webkit and -moz versions must be separate rules: browsers
   throw away a whole rule if any selector in it is unrecognised. */
.zbtn:hover {
  color: #fcfbfb;
}
.zoom:hover::-webkit-slider-thumb,
.zoom:active::-webkit-slider-thumb {
  background: #fcfbfb;
}
.zoom:hover::-moz-range-thumb,
.zoom:active::-moz-range-thumb {
  background: #fcfbfb;
}

/* ----- EXIT CROSS IN THE TEXT PANEL'S CORNER (upright phones only; hidden everywhere else) ----- */
.closex-corner {
  display: none;
}

/* while the image grows or shrinks (.mx-anim) the cross is invisible, then fades back in at the end */
.mySlides.mx-anim .closex-corner {
    opacity: 0;
    transition: none;
    pointer-events: none;
  }

/* ----- NAV ICONS (all devices): the sizes come from the --ico-xxx settings at the top of this file ----- */
.ico {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ico-stroke);
  stroke-linecap: butt;
  stroke-linejoin: miter;
  overflow: visible;
  pointer-events: none;             /* clicks and long-presses go to the button itself */
}
.ico * {
  vector-effect: non-scaling-stroke;   /* the line stays --ico-stroke thick however big the icon is */
}
.closex .ico        { width: var(--ico-close);  height: var(--ico-close); }
.prevx .ico         { width: var(--ico-prev);   height: var(--ico-prev); }
.nextx .ico         { width: var(--ico-next);   height: var(--ico-next); }
.menu .ico          { width: var(--ico-menu);   height: var(--ico-menu); }
.maxbtn .ico        { width: var(--ico-max);    height: var(--ico-max); }
.zbtn .ico          { width: var(--ico-zoom);   height: var(--ico-zoom); }
.popbtn .ico        { width: var(--ico-popbtn); height: var(--ico-popbtn); }
.closex-corner .ico { width: var(--ico-corner); height: var(--ico-corner); }

/* No iOS "save/copy" pop-up when a button is pressed and held */
.prevx, .nextx, .maxbtn, .menu, .closex, .popbtn, .closex-corner, .zbtn {
  -webkit-touch-callout: none;
}

/* nav buttons: whatever the host site does to focused/pressed links, they go back to grey (hover stays white) */
.mySlides .nav-container a:focus,
.mySlides .nav-container a:active,
.mySlides .closex-corner:focus,
.mySlides .closex-corner:active { color: #9a9a9a !important; outline: none; }
.mySlides .nav-container a:hover,
.mySlides .closex-corner:hover { color: #fcfbfb !important; }


/* =====================================================================
   7. TOOLTIPS
   ===================================================================== */

/* Hover tooltips (computers only): a small CSS-only popup built from the data-tooltip attribute, with a
   delay before it appears. In landscape the popup opens to the LEFT of its button (the nav panel is on the
   right edge). Upright screens move them above the buttons (see RESPONSIVE). */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% - 1px);
  transform: translateY(-50%);
  background: white;
  color: black;
  border: solid 1px black;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11pt;
  font-family: Arial, sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  transition-delay: 0s;
  z-index: 10;
}

[data-tooltip]:hover::after {
  opacity: 1;
  transition-delay: 1s;             /* hover must linger this long before it appears */
}

/* Never show hover tooltips on touch devices, whatever the screen size: (hover: none) / (pointer: coarse)
   catch genuine touchscreens (a large tablet included), since a touch interface can't "hover". Also hidden on
   phone-sized windows, for consistency with the text-size rules in RESPONSIVE. Touch screens get the
   press-and-hold bubble below instead. */
@media (hover: none), (pointer: coarse), (max-width: 600px), (max-height: 600px) {
  [data-tooltip]::after {
    display: none !important;
  }
}

/* Touch tooltip: the script adds this bubble to the slideshow when a button is held down for a moment
   (same look as the hover tooltips). While a nav button is held the script puts .no-select on the slideshow
   so Chrome doesn't start highlighting nearby text. */
.touch-tip {
  position: absolute;
  z-index: 100001;
  background: white;
  color: black;
  border: solid 1px black;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11pt;
  font-family: Arial, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.touch-tip.touch-tip-on {
  opacity: 1;
}
.no-select,
.no-select * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}



/* =====================================================================
   8. MAXIMISED IMAGE
   The script adds the class .mx to a slide when its image is maximised. The image's window (.image-container)
   then covers the whole screen except the nav panel (the script sets its width and height, and moves/scales the
   photo inside it exactly as for zooming), and the caption panel becomes a small box floating over the image:
   the title and slide number, plus a short caption from the sheet's 'Short caption' column.
   While the image grows (1.5s) the script also moves the photo; see maximise in the script.
   ===================================================================== */

/* the short caption only exists to be shown when maximised */
.short-caption {
  display: none;
}

/* the photo's window covers the screen. (position: absolute takes it out of the row of image + caption.) */
.mySlides.mx .image-container {
  position: absolute;
  left: 0;
  top: 0;
  flex: none;
  transform: none;
  background: #2d2d2d;              /* spare space above/below/beside the photo: the same colour as the nav panel */
}
.mySlides.mx .image-container::after {
  display: none;                    /* no grey border lines on a maximised photo */
}

/* the caption panel stays in place (it still holds the nav panel) but looks empty... */
.mySlides.mx .caption-container {
  background: transparent;
  padding: 0;
}

/* ...because its text box (.info) floats over the image instead, at the top left of the screen.
   (.mx-cap is added to the slide a moment after .mx when the image grows, and kept a moment longer when it shrinks,
   so that the old caption and the small one can fade out and in at different times: see enterMax in the script.)
   Its width is set by the script (--mx-cap-w): as wide as the normal caption panel, or wider if the title
   and slide number would otherwise need two lines. Its height is only what the text needs.
   Landscape: the title/number line is exactly as tall as the nav panel is wide (--mx-band). The box has thin grey
   lines on its free sides (right and bottom) and a small rounded corner where they meet. */
.mySlides.mx-cap .info {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  z-index: 3;
  flex: none;
  width: var(--mx-cap-w, 100px);
  max-height: 100%;                 /* a long menu scrolls instead of running off the screen */
  padding: 0 10px 0 10px; border: none;   /* no borders on phones, as in normal mode */
  border-right: 0px solid var(--mx-border);
  border-bottom: 0px solid var(--mx-border);
  border-bottom-right-radius: 8px;
  background: #2d2d2d;
}
.mySlides.mx-cap .maintext { margin-top: 0;}    /* (phones normally leave 5px above the title) */
.mySlides.mx-cap .title,
.mySlides.mx-cap .numbertext {
  white-space: nowrap;              /* title + number stay on one line (the box widens to fit them) */
  line-height: var(--mx-band, 1.2) !important;
  font-size: 9pt;
}
.mySlides.mx-cap .numbertext {
  line-height: 1 !important;        /* (the title's tall line sets the height of the line) */
}
/* text 2pt smaller than usual: the slide title, and the menu's heading and items */
.mySlides.mx-cap .title { font-size: 12pt; font-weight: bold; }
.mySlides.mx-cap .listitem,
.mySlides.mx-cap .listhead { font-size: 12pt; margin-top: 0px; margin-bottom: 10px;}
.mySlides.mx-cap .list {
  margin-top: 0;
  padding-bottom: 12px;
}
.mySlides.mx-cap .listhead {
  margin-top: 0;
  line-height: var(--mx-band, 1.2);
}
/* only the short caption shows, 25px under the title like the full caption does */
.mySlides.mx-cap .maintext .caption-text,
.mySlides.mx-cap .sources {
  display: none;
}
.mySlides.mx-cap .short-caption.has-text {
  display: block;
  margin-top: -5px;
  padding-bottom: 10px;
  white-space: pre-line;
  font-size: 12pt;
}
/* The old caption fades out quickly at the start of the glide, and the small box fades in quickly near its end
   (and the reverse when the image shrinks: the small box fades out early, the full caption fades in late).
   .mx-ghost = the old caption, held in place while it fades; .mx-capin = a caption fading in. */
.mySlides.mx-ghost .info,
.mySlides.mx-out.mx-cap .info {
  animation: mx-fadeout 0.3s ease both;
}
.mySlides.mx-capin .info {
  animation: mx-fadein 0.35s ease both;
}
@keyframes mx-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes mx-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* while the photo shrinks back it may be bigger than its window: let it show */
.mySlides.mx-out .image-container {
  overflow: visible;
  z-index: 1;
}

/* the panner sits in the bottom-right corner of the visible photo (the script sets right and bottom) */
.mySlides.mx .popout-container {
  position: absolute;
  width: 300px;
  margin: 0;
}
.mySlides.mx .panner-container {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
.mySlides.mx .panner-frame {
  margin-left: auto;                /* hugs the right-hand corner, whatever size the panner is */
}

/* ----- landscape: the nav panel's strip is 5px wider while maximised, with a thin grey line down its left edge.
   (The line is drawn by the slide itself, not the nav panel, so it sits exactly on the strip's edge on every screen.) ----- */
@media (orientation: landscape) {
  .mySlides.mx {
    --nav-extra: 5px;
  }
  .mySlides.mx,
  .mySlides.mx-cap {
    --mx-band: calc(var(--nav-w) + 5px);
  }
  .mySlides.mx::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: calc(var(--nav-w) + var(--nav-extra));
    border-left: none;
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .mySlides.mx-gliding::after {
    opacity: 0;                       /* the line down the nav panel appears last, once the glide is over */
    transition: none;
  }
  .mySlides.mx .nav-container {
    right: 0;
    width: calc(var(--nav-w) + var(--nav-extra));
    padding-right: 0;               /* (its normal 5px is what keeps the icons centred in the narrower strip) */
  }
  .mySlides.mx .nav-popout { width: 100%; }   /* (normally 5px narrower, to match the padding removed above) */
}


/* =====================================================================
   9. RESPONSIVE
   Everything below changes the layout for particular screens. Keep it LAST in the file so that it
   overrides the general rules above. The blocks run roughly from "narrow" to "upright".
   ===================================================================== */

/* ----- Narrow screens: the featured image and its title stack instead of sitting side by side ----- */
@media (max-width: 600px) {
  .feature {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 20px;
  }

  .title-box {
    margin-left: 0;
    padding-top: 10px;
    padding-left: 15px;
    text-align: left;
    width: 300px;
  }

  .thumb-week,
  .thumb h4 {
    text-align: left !important;
    padding-left: 15px !important;
  }
}

/* ----- Upright screens: stack the photo above the caption instead of side by side.
   Nothing forces the orientation: the layout simply follows whichever way the phone is actually held, so a
   rare portrait-shaped photo would still display correctly if one is ever added. ----- */
@media (orientation: portrait) {
  .mySlides {
    flex-direction: column;
    padding-right: 0;
    --help-margin: 5px;             /* the help box sits at the bottom CENTRE of the photo, 5px from its edges... */
    --help-max-w: 600px;            /* ...and is only limited by the photo's width (the cap matters on big tablets) */
  }

  .image-container {
    width: 100%;
    height: auto;
    flex-shrink: 0;
  }

  .image-container img {
    width: 100%;
    height: auto;
    max-width: none;
  }

  .caption-container {
    position: relative;             /* the corner exit cross is positioned against the text panel */
    flex: 1;
    min-height: 0;                  /* lets .info scroll within its share of the remaining height instead of
                                       being pushed taller than it */
    width: 100%;
  }

  .help-box {                       /* bottom centre: equal side margins, with the box centred between them */
    left: var(--help-margin);
    right: var(--help-margin);
    margin: 0 auto;
  }
}

/* ----- No panner on phones or in upright layouts (same query as PANNER_OFF_QUERY in the script) ----- */
@media (max-width: 600px), (max-height: 600px), (orientation: portrait) {
  .panner-container {
    display: none !important;
  }
}

/* ----- Phones, and any short screen -----
   Checks BOTH width and height (not just width) so it also catches a phone actually held sideways in real
   landscape, where width is large but height is small. */
@media (max-width: 600px), (max-height: 600px) {
  .mySlides {
    --nav-w: 30px;
    --ico-stroke: 2px;
    --ico-close: 32px;
    --ico-prev: 32px;
    --ico-next: 32px;
    --ico-menu: 32px;
    --ico-max: 32px;
    --ico-zoom: 32px;
    --ico-popbtn: 32px;
    --ico-corner: 28px;
  }

  .buttonx {
    gap: 0;
    width: 25px;
  }

  /* Reading text: 1pt smaller than on computers, because phones don't have Garamond and show a larger
     fallback serif. If Garamond ever does load on phones, add the 1pt back. */
  .title    { font-size: 15pt; }
  .numbertext { font-size: 10pt; }
  .maintext { font-size: 11pt; margin-top: 5px; }   /* not negative: a negative margin pushed the top of the title out of the scrolling box and clipped it */
  .listitem,
  .listhead { font-size: 14pt; }
  .help-box { font-size: 10pt; }
  .sources-text {font-size: 10pt;}

  .list { margin-top: 0; }                           /* same clipping fix for the menu's first line */
  .caption-container { padding-top: 10px; padding-left: 15px; }

  .zoom { display: none !important; }                /* no slider on phones: just the + and - buttons */
  .maxbtn.mx-off { display: none; }                  /* ...and an unusable maximise icon gives up its space */
  .mySlides.mx-cap .info { padding: 0 10px 0 15px; }
  .mySlides.mx-cap .title { font-size: 10pt; font-weight: bold;}    
             /* (phones' text is already 2pt smaller: and this is 2pt smaller again) */
  .mySlides.mx-cap .maintext {font-size: 10pt;}
  .mySlides.mx-cap .listhead { font-size: 10pt; font-weight: bold; }
  .mySlides.mx-cap .listitem {font-size: 10pt; font-weight: normal;}
  .mySlides.mx-cap .short-caption.has-text {font-size: 10pt; font-weight: normal;}

  /* No 1px borders on the photo at all */
  .image-container { transform: none; }              /* (the 1px shift only existed to hide the left border) */
  .image-container::after { display: none; }
}

/* ----- Phone held sideways -----
   The buttons form a tall column and the screen is short, so the - button used to run off the bottom.
   Slightly tighter spacing and a smaller zoom block get everything on screen. If a very short screen still
   can't fit it all, the nav column can scroll (scrollbar hidden). The help box gets smaller margins and a
   narrower maximum width than on computers. */
@media (orientation: landscape) and (max-height: 600px) {
  .mySlides {
    --nav-w: 35px;                  /* strip reserved for the nav: 5px wider, because the nav moves 5px left... */
    --help-margin: 10px;
    --help-max-w: 300px;
  }
  .nav-container {
    right: 5px;                     /* ...nudged 5px left, keeping its own width */
    width: 30px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .nav-container::-webkit-scrollbar { display: none; }
  .buttonx { gap: 5px; }
  .maxbtn { margin-top: 4px; }
  .zoombar { margin-top: 4px; gap: 0; }
  .zbtn { height: 36px; }
  .nav-popout { position: static; width: 100%; margin-top: 5px; }
  .caption-container { padding-top: 10px; }
}

/* ----- Touch devices held upright always get just the + and - buttons, whatever width the browser reports ----- */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .zoom { display: none !important; }
}

/* ----- Upright screens: the nav panel drops below the info text, left-justified, as a horizontal row ----- */
@media (orientation: portrait) {
  .nav-container {
    position: relative;             /* (not static) so its z-index lifts the tooltips above the popouts */
    z-index: 5;
    width: auto;
    margin-top: 0;                  /* .popout-container's auto margin keeps both at the bottom even if the text is hidden */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    flex-shrink: 0;
  }
  .buttonx {
    flex-direction: row;
    width: auto;
  }
  .prevx, .nextx, .maxbtn, .menu, .closex, .popbtn {
    width: auto;
    min-width: 30px;                /* upright screens use automatic widths, so give each a touch-sized minimum */
  }

  .nav-popout {                     /* sits in the row, right of the +/- buttons */
    position: static;
    flex-direction: row;
    width: auto;
    margin-left: 10px;
    gap: 5px;
  }
  .popbtn { margin-right: 0; }

  .prevx { margin-right: 5px; }
  .nextx { margin-right: 5px; }
  .menu  { margin-right: 6px; }

  .zoombar {
    flex-direction: row-reverse;    /* shows as  -  slider  +  */
    width: auto;
    margin: 0 0 0 10px;
  }
  .zbtn { width: 36px; }
  .zoom {                           /* un-rotate the slider (hidden on phones anyway) */
    transform: none;
    width: 120px;
    margin: 0;
  }

  /* tooltips go above the buttons in the row; the two end buttons get tooltips aligned to their own edge
     instead, so a long tooltip can't be cut off by the screen edge */
  [data-tooltip]::after {
    top: auto;
    bottom: 125%;
    right: auto;
    left: 50%;
    transform: translateX(calc(-50% + 5px));    /* centred on the button, then 5px to the right */
  }
  .prevx[data-tooltip]::after                          { left: 0; transform: none; }
  .zoombar .zbtn:first-child[data-tooltip]::after      { left: auto; right: 0; transform: none; }
  .nav-popout .popbtn:last-child[data-tooltip]::after  { left: auto; right: 0; transform: none; }

  .maxbtn { margin-top: 0; }

  /* maximised: the photo takes the screen above the nav row, and the small caption box runs right across the
     top of the screen over it (text left-aligned, 10px padding all round) */
  .mySlides.mx .caption-container { position: static; }
  .mySlides.mx .nav-container { margin-top: auto; }   /* (stays at the bottom, as the photo no longer pushes it) */
  .mySlides.mx-cap .info {
    left: 0;
    right: 0;
    width: auto;
    padding: 10px;
    text-align: left;
    border-right: none;
    border-bottom-right-radius: 0;
  }
  .mySlides.mx-cap .short-caption.has-text,
  .mySlides.mx-cap .list { padding-bottom: 0; margin-top: 8px;}
  .mySlides.mx-cap .title,
  .mySlides.mx-cap .numbertext { white-space: normal; }   /* the box is as wide as the screen, so a long title just wraps */
}

/* ----- Upright phones: nav row centred on the screen -----
   The caption panel has 20px padding on the left and 3px on the right (15px and 3px on phones), so the row
   is pulled 17px left (margin) to put its centre on the middle of the screen rather than the middle of the text. */
@media (orientation: portrait) and (max-width: 600px) {
  .nav-container {
    justify-content: center;
    margin-left: -17px;
    margin-bottom: 10px;            /* nav row nudged 5px up */
  }

  .closex { display: none; }        /* the nav row's own cross is replaced by the corner one */
  .closex-corner {
    display: flex;
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 6;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #9a9a9a;
    background: #2d2d2d;            /* same as the panel, so text scrolling underneath doesn't show through */
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: 0.3s ease;
  }
  .closex-corner:hover { color: #fcfbfb; }
  .info::before {                   /* keeps the first lines of text clear of the corner cross */
    content: "";
    float: right;
    width: 40px;
    height: 34px;
  }

  /* prev on the left, next on the right (the DOM order is for the sideways layout) */
  .prevx        { order: 1; }
  .nextx        { order: 2; }
  .menu         { order: 3; }

  .zoomOut { margin-bottom: -12px; }

  .caption-container { padding-top: 10px; }         /* title nudged 5px down (was 10px) */

  .ss-loader {                                      /* spinner in the middle of the screen */
    justify-content: center;
    padding-left: 0;
  }
}