/* pylondb.com: dark only. A picture strip with no words, one headline, then a section per video. */
:root {
  color-scheme: dark;
  --ground: #0b1624;
  --panel: #12233a;
  --line: #22384f;
  --text: #e4ebf3;
  --muted: #a5b5c9;
  --amber: #e39a2d;
  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  /* Short enough that the headline and its line show without scrolling. */
  --strip-h: clamp(240px, min(40vw, 100svh - 380px), 640px);
  --slide-w: min(64vw, 1180px, var(--strip-h) * 1.9);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--text); }
body { font: 16px/1.55 var(--display); }

.top { position: absolute; inset-inline: 0; top: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 56px) 16px; pointer-events: none; }
.top a { pointer-events: auto; }
.mark { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; font-stretch: 85%; color: var(--text); text-decoration: none; text-shadow: 0 1px 14px var(--ground); }
.mark svg { width: 24px; height: 24px; }
.mark b, .lede p em { color: var(--amber); font-style: normal; }
.lede p em { font-weight: 600; }
.contact { color: var(--muted); text-decoration: none; font-size: 15px; text-shadow: 0 1px 14px var(--ground); }
.contact:hover, .contact:focus-visible { color: var(--text); }

/* The strip: one picture in the centre slot, dimmed neighbours either side, a thin scroll bar to go back.
   The track's side padding, half its width each, lets the first and last pictures reach the centre.
   50%, not 50vw: vw counts the page's vertical scroll bar, so 100vw of padding made the track wider
   than the page and the whole page scrolled sideways by the scroll bar's width. */
.strip { position: relative; padding-top: 64px; }
.track { display: flex; gap: 2vw; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: 50%; padding-bottom: 14px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; outline: none; }
.track::-webkit-scrollbar { height: 6px; }
.track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.track::-webkit-scrollbar-track { background: transparent; }
/* Each slot is as wide as its picture (--ar, width over height, set per slide), so a narrow
   picture's neighbours sit close beside it rather than across a wide empty margin. */
.slide { flex: 0 0 min(var(--slide-w), var(--strip-h) * var(--ar, 1.6)); height: var(--strip-h); scroll-snap-align: center; display: grid; place-items: center; margin: 0;
  opacity: .22; filter: blur(1.5px) saturate(.7); transform: scale(.94); transition: opacity .5s ease, filter .5s ease, transform .5s ease; }
.slide.on { opacity: 1; filter: none; transform: none; }
/* Sized against the slot itself: a percentage max-height does not resolve in an auto-height grid row,
   which let tall charts overflow the strip and lose their bottom edge. */
.slide img { width: 100%; max-height: var(--strip-h); height: auto; object-fit: contain; border-radius: 6px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 66%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 66%, transparent 100%); }
.pic { position: relative; width: 100%; }
.pic img { display: block; }
.tag { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  font: 600 14px var(--display); font-stretch: 92%; letter-spacing: .01em; color: var(--ground);
  background: var(--amber); border-radius: 999px; padding: 5px 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.strip::before, .strip::after { content: ""; position: absolute; top: 64px; height: var(--strip-h); width: 10vw; z-index: 2; pointer-events: none; }
.strip::before { left: 0; background: linear-gradient(to right, var(--ground), transparent); }
.strip::after { right: 0; background: linear-gradient(to left, var(--ground), transparent); }

/* The caption shows while the mouse is on the centre picture, or, on a phone, once the picture is
   tapped, until the next tap anywhere else. It never covers the picture or the headline: where there
   is room it sits beside the picture, over the dimmed neighbour (.side, placed by site.js);
   otherwise it takes the headline's place while it shows. */
.info { position: absolute; z-index: 3; top: calc(64px + var(--strip-h) + 6px); left: 50%; transform: translateX(-50%);
  width: min(760px, var(--slide-w) - 170px); padding: 12px 18px 8px;
  background: rgba(18, 35, 58, .97); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.strip.side .info { top: calc(64px + var(--strip-h) / 2); transform: translateY(-50%); }
.strip.show .info { opacity: 1; visibility: visible; }
.strip.show.fading .info { opacity: 0; transition: opacity 2s ease, visibility 2s; }
.lede { transition: opacity .25s ease; }
.strip.show:not(.side) + .lede { opacity: 0; }
.info h2 { font-size: 18px; font-stretch: 90%; margin: 0 0 4px; }
.info p { margin: 0 0 4px; font-size: 15px; color: var(--muted); max-width: 80ch; }
.info .how { color: var(--text); }
.info .credit { font-size: 12.5px; color: #7f90a6; }

/* The headline, the video sections and the footer are centred in the window. */
.lede, #videos, footer { max-width: 1040px; margin-inline: auto; padding-inline: 20px; }
.lede { padding-block: 40px 56px; text-align: center; }
h1 { font-stretch: 82%; font-weight: 700; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.06; margin: 0 auto 14px; max-width: 34ch; text-wrap: balance; }
h1 em { font-style: normal; color: var(--amber); }
.lede p { color: var(--muted); font-size: 18px; margin: 0 auto; max-width: 60ch; text-wrap: balance; }

/* Below the headline, one section per video: title, one line, then the video. The first starts 24 px
   below the bottom of the first screen: .first, the strip and the headline, is at least a screen
   tall less 40 px, and #videos adds 64 px. Plain CSS, so it holds whatever order the pictures and
   fonts arrive in, and when the window is resized; a short screen just puts the 64 px after the
   headline. A section's width follows from a height cap and its own shape (--ar, set by site.js),
   so a square video fits a laptop screen whole and a 16:9 one fills the column; the section is that
   wide, centred. The video stays invisible, plain page colour, until it first plays (.started,
   site.js). */
.first { min-height: calc(100vh - 40px); min-height: calc(100svh - 40px); }
#videos { padding-top: 64px; }
.feature { width: min(100%, min(80svh, 720px) * var(--ar, 1.7778)); margin: 0 auto; padding-bottom: 64px; text-align: center; }
.feature + .feature { margin-top: 160px; }
.feature h2 { font-stretch: 85%; font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; margin: 0 0 6px; }
.fsum { color: var(--muted); font-size: 17px; margin: 0 auto 22px; max-width: 60ch; }
.feature video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 1.7778); border-radius: 8px;
  opacity: 0; transition: opacity .8s ease; }
.feature video.started { opacity: 1; }

footer { border-top: 1px solid var(--line); padding-block: 32px calc(48px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.contact-line { font-size: 17px; margin: 0 0 10px; text-wrap: balance; }
.contact-line a { color: var(--amber); text-underline-offset: 3px; }
.credits { color: #7f90a6; font-size: 12.5px; max-width: 90ch; margin: 0 auto; text-wrap: balance; }

@media (max-width: 700px) {
  :root { --slide-w: 86vw; --strip-h: 62vw; }
  .tag { font-size: 12px; top: 8px; padding: 3px 12px; }
  .info { position: static; display: none; box-shadow: none; width: auto; margin: 10px 7vw 0; transform: none; }
  .strip.show:not(.side) + .lede { opacity: 1; }
  .strip.show .info { display: block; }
}