/* Design Vallée: the site's styles. They come from the logo explorations' styles.css (design-valley-logo-brand),
   where the site was a tab (?website): its own section, and the few shared rules its elements use. */

:root {
  --page: #06032a;
  --ink: #151515;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
/* Reduced motion: every jump lands at once (website.js asks for 'auto', which follows this) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* The valley scrolls by its own rail: no scrollbar from the browser; and not at all while the intro plays (website.js) */
html.is-valley { scrollbar-width: none; }
html.is-valley::-webkit-scrollbar { display: none; }
html.is-playing { overflow: hidden; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.55 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The name's frame: the intro's square, the logo's circle in it (.mark) and the name (.cv-title), as the
   explorations' covers lay them out */
.mark { flex: none; aspect-ratio: 1; }
.cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 2.4%;
  overflow: hidden;
  container-type: inline-size;
  font: inherit;
  color: inherit;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 18px 36px -24px rgba(20, 20, 45, 0.4);
}
.cover .mark { position: absolute; display: block; aspect-ratio: 1; }
.cover .cv-title { position: absolute; display: flex; flex-direction: column; color: var(--ink); white-space: nowrap; font-kerning: normal; }
.cover .cv-l { display: block; }
.fin .cv-title { will-change: transform, opacity; }

/* ── The site: the intro, playing by itself once, then the episodes as pins down the valley ── */
.is-site { --cream: #fcead2; --night: #16164a; --glass: rgba(18, 16, 52, 0.66); --site-font: 'Inter', ui-sans-serif, system-ui, sans-serif; background: #06032a; color: var(--cream); }
.site { font-family: var(--site-font); font-feature-settings: 'cv11', 'ss01'; }
.site-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Without JavaScript there is no valley: a line on the night, and the way to the list of episodes (index.html's
   <noscript>) */
.site-noscript { max-width: 40em; margin: 0 auto; padding: 38vh 24px 0; font: 16px/1.6 var(--site-font); text-align: center; text-wrap: balance; }
.site-noscript a { color: var(--cream); text-underline-offset: 3px; }
.site-noscript a:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* The scene: the sky, the name in the intro's square, then the sun and the land. As tall as the screen is with a
   phone's toolbars gone (100lvh), whether they show or not: they come and go as the scroll turns, and the scene keeps
   its size (resized, its canvases would be cleared and drawn again: a glitch of a few frames); they only cover its foot. */
.site-stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 0; overflow: hidden; background: #06032a; }
.site-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.site-stage canvas[hidden] { display: none; }
.site-stage canvas.site-scene { z-index: 0; } /* the engine's own canvas: the sky, under the name */
.site-stage canvas.site-land { z-index: 2; } /* a second engine's: the land, over the name */
.site-stage canvas.site-glow { z-index: 3; } /* a third's: the pins, over the land, floating on their own */
.site-stage canvas.site-hdr { z-index: 4; pointer-events: none; } /* HDR displays: the light past white, added over the scene (WebGPU) */
.site .site-frame.cover { position: absolute; z-index: 1; aspect-ratio: auto; border-radius: 0; overflow: visible; box-shadow: none; background: none; pointer-events: none; }
.site-track { position: relative; z-index: 1; pointer-events: none; }
.site-track section { display: block; }

/* The header: the name settles into it once it is out */
.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  pointer-events: none;
}
.site-head > * { pointer-events: auto; }
/* À propos at one end, Écouter le dernier épisode at the other: clear of the name in the sky, which is between them
   (where it isn't, an iPad across, the button says Écouter alone: website.js, fitListen) */
.site-nav { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 8px; }
.site-nav a, .site-listen {
  display: inline-flex;
  align-items: center;
  height: 32px;
  font: 500 13px/1 var(--site-font);
  color: rgba(252, 234, 210, 0.78);
  text-decoration: none;
  padding: 0 16px;
  border-radius: 999px;
  transition: color 0.15s, background-color 0.15s;
}
.site-nav a { border: 1px solid rgba(252, 234, 210, 0.3); background: rgba(18, 16, 52, 0.3); color: var(--cream); }
.site-nav a:hover { background: rgba(252, 234, 210, 0.12); border-color: rgba(252, 234, 210, 0.55); }
.site-listen { border: 0; background: var(--cream); color: var(--night); font-weight: 600; white-space: nowrap; cursor: pointer; }
.site-listen:hover { background: #fff; }
/* What the keyboard reaches is ringed in cream (the header's links and button, the pins, the cards, the end's chips,
   the player) */
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }

/* The cue on the first screen */
.site-cue {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 12;
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0;
  transform: translateX(-50%);
  font: 600 13px/1 var(--site-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(252, 234, 210, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: color 0.4s;
}
.site-cue.is-dark { color: rgba(22, 22, 74, 0.85); } /* (over a light ground: website.js reads what is behind it) */
.site-cue i { display: block; width: 2px; height: 40px; border-radius: 1px; background: linear-gradient(currentColor, transparent); transform-origin: top; animation: site-cue 2.4s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
@keyframes site-cue {
  0% { transform: scaleY(0); opacity: 1; }
  55% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(12px); opacity: 0; }
}
.site:not(.is-ready) .site-cue { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .site-cue i { animation: none; } } /* (its line, still) */

/* The end: set over the scene as the scroll brings it */
.site-end {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 15;
  width: min(640px, calc(100vw - 48px));
  transform: translate(-50%, calc(-50% + var(--dy, 0px)));
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.site-end.is-on { pointer-events: auto; }
.site-eyebrow { margin: 0 0 16px; font: 500 11px/1 var(--site-font); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(252, 234, 210, 0.72); }
.site-end h2 { margin: 0; font: 600 clamp(26px, 4vw, 46px)/1.08 'Unbounded', sans-serif; letter-spacing: -0.03em; text-wrap: balance; }
.site-lede { margin: 24px auto 0; max-width: 50ch; font-size: 16.5px; line-height: 1.55; color: rgba(252, 234, 210, 0.86); text-wrap: pretty; }
.site-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.site-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border: 1px solid rgba(252, 234, 210, 0.3);
  border-radius: 999px;
  background: rgba(18, 16, 52, 0.3);
  color: var(--cream);
  font: 500 12.5px/1 var(--site-font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.site-chip:hover { background: rgba(252, 234, 210, 0.12); border-color: rgba(252, 234, 210, 0.55); }
.site-chip--up { background: var(--cream); border-color: var(--cream); color: var(--night); font-weight: 600; }
.site-chip--up:hover { background: #fff; }
.site-small { margin: 24px auto 0; max-width: 60ch; font: 11px/1.6 var(--site-font); color: rgba(252, 234, 210, 0.5); }
.site-small a { color: inherit; text-underline-offset: 2px; }
.site-small a:hover { color: var(--cream); }

/* The pins: the shader draws each in the scene (a ball on a stake, its number printed on it, its light on the
   ground). Over the ball the page lays a button, and beside it the card. Sizes are in em of the list, which
   follows the screen (--ui). A pin's --near (its card coming in) comes from the scroll, and so does how far its card
   is open, which the page draws (website.js: cardShape, drawCard). */
.site-pins { position: fixed; inset: 0; z-index: 10; margin: 0; padding: 0; list-style: none; font-size: calc(16px * var(--ui, 1)); pointer-events: none; }
.site:not(.is-ready) .site-pins { visibility: hidden; }
.site-nav.is-off { pointer-events: none; }
.site-nav.is-gone { visibility: hidden; } /* faded away: out of reach */

/* The first stop of the keyboard: the list of episodes, past the valley; shown only once it has focus */
.site-skip {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--night);
  font: 600 13px/1 var(--site-font);
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}
.site-skip:focus { transform: none; }
.pin { position: absolute; left: 0; top: 0; will-change: transform; --near: 0; --cs: 1; --hr: 24px; --gap: 32px; }
.pin-head {
  position: absolute;
  left: calc(-1 * var(--hr));
  top: calc(-1 * var(--hr) + var(--lift, 0px)); /* on the ball, which floats and rises to its card; the card holds still */
  width: calc(2 * var(--hr));
  height: calc(2 * var(--hr));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  pointer-events: none;
}
.pin.is-live .pin-head { pointer-events: auto; }
.site .pin-head:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }

/* A card: frosted glass over the scene, as in the design (Figma: Episode card), with continuous corners: 32px,
   smoothed at 60%, which the page draws (src/squircle.js) as its outline (clip-path: path()) and as the lines round
   the card and round its cover (.pin-edge); its border-radius only stands in until it does, and holds them. As the
   camera comes to its pin it grows, in one move, from the small card (its cover alone, 4px of glass round it, 188px
   on a 16px type) to the open card (the cover over the text, 8px round them, the text's column 20.5em): the page
   sizes it and its cover, the cover's corners concentric with the card's (32px less the padding), and scales its text,
   laid out once at the column's width. Its spacing is on the site's 8px grid. Its middle is at the ball's, as far as
   the screen lets it (--dy, from the ball to its top, set by the page). */
.pin-card {
  position: absolute;
  left: var(--gap);
  top: var(--dy, calc(-24px - 1.2em)); /* (until the page places it) */
  width: calc(11.25em + 8px); /* (the small card's, until the page sizes it) */
  height: calc(11.25em + 8px);
  border-radius: 32px;
  background: rgba(20, 16, 58, 0.5); /* no drop shadow */
  color: #fff;
  opacity: var(--near);
  transform: scale(var(--cs));
  transform-origin: 0 0;
  text-align: left;
  pointer-events: none;
}
.pin.is-left .pin-card { left: auto; right: var(--gap); transform-origin: 100% 0; }
/* The glass, and the blur as a card comes and goes (set by the page), only on a card that shows. */
.pin.is-seen .pin-card { backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); }
.pin:not(.is-seen) .pin-card { visibility: hidden; }
.pin.is-near .pin-card { pointer-events: auto; cursor: pointer; }
.pin.is-focus .pin-card { cursor: auto; }
.pin-edge { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.pin-edge path:first-child { stroke: rgba(252, 234, 210, 0.14); } /* inside the card's edge */
.pin-edge path:last-child { stroke: rgba(252, 234, 210, 0.16); } /* outside the cover's */
.pin-cover { /* (placed and sized by the page) */
  position: absolute;
  left: 4px;
  top: 4px;
  width: 11.25em;
  height: 11.25em;
  border-radius: 28px;
  object-fit: cover;
  background: rgba(252, 234, 210, 0.08); /* (until it is in) */
}
/* The text, at its column's width whatever the card's: placed and scaled by the page, under the cover, and coming in
   as the card opens. */
.pin-text {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 20.5em;
  padding: 0 8px 8px;
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
}
.pin.is-focus .pin-text { pointer-events: auto; }
.pin-name { display: flex; flex-direction: column; gap: 4px; }
.pin-meta { margin: 0; font: 500 0.75em/1.3 var(--site-font); letter-spacing: 0.005em; color: rgba(255, 255, 255, 0.66); font-variant-numeric: tabular-nums; }
.pin-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font: 500 1em/1.22 'Unbounded', sans-serif;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.pin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pin-play, .pin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font: 600 0.82em/1 var(--site-font);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}
.pin-play { background: var(--cream); color: var(--night); }
.pin-play:hover { background: #fff; }
.pin-play-icon { flex: none; }
.pin-link { background: rgba(255, 255, 255, 0.24); color: #fff; }
.pin-link:hover { background: rgba(255, 255, 255, 0.34); }
.pin-quote { margin: 0; font: italic 400 0.9em/1.4 var(--site-font); color: #fff4e2; text-wrap: pretty; }
.pin-sum {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.82em;
  line-height: 1.5;
  color: rgba(252, 234, 210, 0.8);
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.pin-detail { margin: 0; font-size: 0.8em; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }

/* Small screens: the open card at the foot of the screen, as far from it as from the sides (the cards behind peek out
   above it), fading and blurring in and out with the scroll */
.site-sheet {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 18;
  max-width: 480px; /* (a short window's, wider than a phone: in the middle, clear of the rail) */
  margin: 0 auto;
  font-size: 16px;
  --open: 0;
  opacity: var(--open);
  filter: blur(calc((1 - var(--open)) * 10px));
  transform: translateY(calc((1 - var(--open)) * 16px));
  pointer-events: none;
}
.site-sheet.is-on { pointer-events: auto; }
.site-sheet .pin-card { /* one card of the stack, set by the page (placeStack): all the same height, bottom edges together */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  height: 224px;
  padding: 16px;
  overflow: hidden;
  transform-origin: 50% 0; /* (those behind peek out above it) */
  background: #14103a; /* the desktop's glass (rgba(20, 16, 58, 0.5)), solid; those behind fainter (placeStack) */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  cursor: auto;
}
.site-sheet .pin-card.is-top { pointer-events: auto; }
.site-sheet .pin-card > :not(.pin-edge) { opacity: var(--face, 1); } /* the cards behind: their glass only, their text as they come on top */
/* A phone's card, small and always as tall, its corners as continuous (the page draws them at its size): a small
   cover in the top-left corner, first, which holds its size, its corners concentric with the card's (32px less its
   16px inset); beside it the line, title (two lines) and guest (one); then two lines of summary, and the buttons at
   its foot; no quote. */
.site-sheet .pin-cover { left: 16px; top: 16px; width: 56px; height: 56px; border-radius: 16px; }
.site-sheet .pin-text { position: static; width: auto; height: 100%; padding: 0; gap: 0; opacity: 1; pointer-events: auto; }
.site-sheet .pin-name, .site-sheet .pin-detail { padding-left: 72px; }
.site-sheet .pin-title { -webkit-line-clamp: 2; font-size: 0.96em; }
.site-sheet .pin-detail { order: 1; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-sheet .pin-quote { display: none; }
.site-sheet .pin-sum { order: 2; margin-top: auto; padding-top: 8px; -webkit-line-clamp: 2; }
.site-sheet .pin-actions { order: 3; margin-top: 8px; }
.site:has(.site-player:not([hidden])) .site-sheet { bottom: 120px; } /* (as far above the player: 16px, its 88px, 16px) */
@media (prefers-reduced-motion: no-preference) { .site-sheet { transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1); } } /* (up as it comes, down as it goes) */

/* À propos and an episode's Détails: dialogs over the valley, the camera up on a mountain top (À propos) or down by
   the episode's ball (Détails) behind them; the card comes in as the camera arrives (--in, set by the page). The page
   stays where it was under them. */
html.is-about, html.is-details { overflow: hidden; }
.site-about, .site-details {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px 16px;
  overflow-y: auto;
  border: 0;
  background: none;
  color: var(--cream);
  overscroll-behavior: contain;
}
.site-about[open] { display: grid; place-items: center; }
/* (Détails at the foot of a narrow screen, under the ball; above the player, when it shows) */
.site-details { padding: 16px; }
.site-details[open] { display: grid; grid-template-rows: minmax(0, 1fr); place-items: end center; }
/* (on a wide screen, to the left of the view: the valley and the sun, to the right of it) */
@media (min-width: 960px) {
  .site-about, .site-details { padding: 32px 32px 32px max(32px, 7vw); }
  .site-about[open] { justify-items: start; }
  .site-details[open] { place-items: center start; }
}
/* (and the two above the player while it shows: 24px under it, its 88px, 16px over it; 16px under it where the cards
   are the stack) */
.site:has(.site-player:not([hidden])) :is(.site-about, .site-details) { padding-bottom: 128px; }
@media (max-width: 719px), (max-height: 559px) {
  .site:has(.site-player:not([hidden])) :is(.site-about, .site-details) { padding-bottom: 120px; }
}
.site-about::backdrop, .site-details::backdrop { background: none; }
/* Their card: the episodes' glass, its continuous corners and its edge (drawn by the page at its size; round until
   then) */
.site-card {
  position: relative;
  border-radius: 32px;
  background: rgba(20, 16, 58, 0.5);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  color: var(--cream);
  opacity: var(--in, 0);
  transform: translateY(calc((1 - var(--in, 0)) * 16px));
}
.about-card { width: min(576px, 100%); padding: 40px 40px 32px; }
/* (the focus on the card as it opens, website.js: no ring, it is not a control) */
.about-card:focus, .details-scroll:focus { outline: none; }
.about-card h2 { margin: 0; padding-right: 48px; font: 500 clamp(28px, 4vw, 40px)/1.12 'Unbounded', sans-serif; letter-spacing: -0.02em; }
.about-lede { margin: 16px 0 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.about-text { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: rgba(252, 234, 210, 0.82); text-wrap: pretty; }
.about-by { margin: 16px 0 0; font-size: 14px; color: rgba(252, 234, 210, 0.72); }
.about-by b { font-weight: 600; color: var(--cream); }
.about-h { margin: 24px 0 8px; font: 500 11px/1 var(--site-font); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(252, 234, 210, 0.72); }
.about-contacts { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.about-contacts a { font-weight: 600; color: var(--cream); text-underline-offset: 3px; }
.about-contacts span { margin-left: 8px; font-size: 13px; color: rgba(252, 234, 210, 0.66); }
.about-card .site-chips { justify-content: flex-start; margin-top: 0; }
/* (the ×: concentric with the card's corner, its 20px radius 12px in from the card's 32px, website.js's CARD_R; in
   Détails, with its cover's 24px, 8px in, too) */
.card-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(252, 234, 210, 0.12);
  color: var(--cream);
  cursor: pointer;
}
.card-close svg { display: block; }
.card-close:hover { background: rgba(252, 234, 210, 0.22); }
/* (Détails: the card's own edge, its cover's corners concentric with the card's, set by the page) */
.site-card > .pin-edge path { stroke: rgba(252, 234, 210, 0.14); }
.details-card {
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  max-height: min(60dvh, 640px);
  font-size: 16px;
}
@media (min-width: 960px) { .details-card { max-height: 100%; } }
/* (where the cards are the stack, solid as they are) */
@media (max-width: 719px), (max-height: 559px) {
  .details-card { background: #14103a; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.details-card .card-close { background: rgba(20, 16, 58, 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.details-card .card-close:hover { background: rgba(20, 16, 58, 0.72); }
.details-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 8px 16px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(252, 234, 210, 0.3) transparent;
  border-radius: inherit;
}
.details-cover {
  display: block;
  flex: none;
  width: calc(100% + 16px);
  margin: 0 -8px 4px;
  aspect-ratio: 1;
  border-radius: 24px;
  object-fit: cover;
  background: rgba(252, 234, 210, 0.08); /* (until it is in) */
}
.details-title { margin: 0; font: 500 1.25em/1.22 'Unbounded', sans-serif; letter-spacing: -0.02em; text-wrap: pretty; }
.details-sum { margin: 0; font-size: 0.88em; line-height: 1.6; color: rgba(252, 234, 210, 0.82); text-wrap: pretty; }
.details-more .about-h { margin-top: 8px; }
.details-more .site-chips { justify-content: flex-start; margin-top: 0; }
.details-page { margin: 4px 0 0; font-size: 0.88em; }
.details-page a { font-weight: 600; color: var(--cream); text-underline-offset: 3px; }

/* The rail: every episode, newest at the top, and where the camera is */
.site-rail { position: fixed; right: 24px; top: 50%; z-index: 20; height: min(60vh, 560px); transform: translateY(-50%); opacity: var(--rail, 0); pointer-events: none; }
.site.has-rail .site-rail { pointer-events: auto; }
/* The whole track answers the pointer (the nearest tick to it); the ticks grow round it as it comes near, as a
   dock does (--m, eased in and out by the page) */
.rail-track { position: relative; width: 64px; height: 100%; cursor: pointer; touch-action: none; }
.rail-tick { --m: 0; position: absolute; right: 16px; width: 24px; height: 8px; margin-top: -4px; padding: 0; border: 0; background: none; pointer-events: none; }
.rail-tick::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: calc(8px + 16px * var(--m));
  height: calc(1px + 3px * var(--m));
  border-radius: 2px;
  background: var(--cream);
  opacity: calc(0.42 + 0.58 * var(--m));
  transform: translateY(-50%);
}
.rail-tick::after {
  content: attr(data-label);
  position: absolute;
  right: 32px;
  top: 50%;
  max-width: 320px;
  padding: 8px 12px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(18, 16, 52, 0.82);
  color: var(--cream);
  font: 500 12px/1.2 var(--site-font);
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.rail-tick.is-hover::after { opacity: 1; }
.rail-track.is-pointed .rail-tick::after { transition: none; } /* the label follows the pointer at once (the ticks' growth is eased by the page) */
.rail-year { position: absolute; right: 48px; transform: translateY(-50%); font: 500 10px/1 var(--site-font); letter-spacing: 0.08em; color: rgba(252, 234, 210, 0.58); pointer-events: none; transition: opacity 0.14s; }
.rail-track.is-pointed .rail-year { opacity: 0.35; }
/* where the camera is: a small sun on the ticks' right, of the hour's colour (--sun-1…3, --sun-glow, set by the
   page); it can be dragged up and down, as a scroll bar's thumb */
.rail-now {
  position: absolute;
  right: 0;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--sun-1, #fff3d6), var(--sun-2, #ffc46b) 50%, var(--sun-3, #ff7038));
  box-shadow: 0 0 12px 3px var(--sun-glow, rgba(255, 160, 80, 0.55));
  cursor: grab;
  touch-action: none;
  transition: transform 0.15s ease-out;
}
.rail-now::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; } /* easier to take */
.rail-now:hover, .site.is-dragging .rail-now { transform: scale(1.25); }
.site.is-dragging, .site.is-dragging .rail-now { cursor: grabbing; }

/* The player: an episode's audio, one more card of the valley at the foot of the screen, glass as the cards are (solid
   as theirs where they are the stack): its cover, what it is, its title, where it is in it, 15 s back, Pause, 30 s on
   and ×. Its corners (24px) and its cover's (concentric with them: 16px) are continuous, drawn by the page at its
   size, as its edge is; round until then. */
.site-player {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(600px, calc(100vw - 48px));
  height: 88px;
  padding: 8px 16px 8px 8px;
  border-radius: 24px;
  background: rgba(20, 16, 58, 0.5);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  color: var(--cream);
  transform: translateX(-50%);
}
.site-player[hidden] { display: none; }
.pl-cover { flex: none; width: 72px; height: 72px; border-radius: 16px; object-fit: cover; background: rgba(252, 234, 210, 0.08); }
.pl-text { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; } /* (its lines no wider than it, however narrow) */
.pl-meta { margin: 0; overflow: hidden; font: 500 12px/16px var(--site-font); letter-spacing: 0.005em; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.66); }
/* (its title on one line: cut short, or, too long for it, scrolling along it as a music player's does (website.js),
   faded out at its ends) */
.pl-title { margin: 0; overflow: hidden; font: 500 14px/18px 'Unbounded', sans-serif; letter-spacing: -0.02em; color: #fff; }
.pl-run { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-copy { display: none; }
.pl-title.is-long {
  margin-left: -8px;
  padding-left: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 24px), transparent);
}
.pl-title.is-long .pl-run { display: inline-flex; gap: 48px; overflow: visible; text-overflow: clip; will-change: transform; }
.pl-title.is-long .pl-copy { display: inline; }
/* (where it is: the time so far, the line, filled as far (--p, from the page), and the episode's length; the line's
   handle shows under the pointer, as it is taken, and always on a touch screen) */
.pl-time { display: flex; align-items: center; gap: 8px; margin-top: 2px; font: 500 11px/16px var(--site-font); font-variant-numeric: tabular-nums; color: rgba(252, 234, 210, 0.7); }
.pl-seek { flex: 1; min-width: 0; height: 16px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; --p: 0%; }
.pl-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--cream) var(--p), rgba(252, 234, 210, 0.18) var(--p)); }
.pl-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(252, 234, 210, 0.18); }
.pl-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--cream); }
.pl-seek::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--cream); -webkit-appearance: none; appearance: none; transform: scale(0); transition: transform 0.15s ease-out; }
.pl-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--cream); transform: scale(0); transition: transform 0.15s ease-out; }
.pl-seek:is(:hover, :active, :focus-visible)::-webkit-slider-thumb { transform: none; }
.pl-seek:is(:hover, :active, :focus-visible)::-moz-range-thumb { transform: none; }
@media (hover: none) {
  .pl-seek::-webkit-slider-thumb { transform: none; }
  .pl-seek::-moz-range-thumb { transform: none; }
}
/* (its buttons: Pause, cream as a card's Écouter; 15 s back and 30 s on, soft; ×, a ghost, filled only under the
   pointer) */
.pl-buttons { display: flex; flex: none; align-items: center; gap: 8px; }
.pl-buttons button {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(252, 234, 210, 0.12);
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.pl-buttons button:hover { background: rgba(252, 234, 210, 0.2); }
.pl-buttons svg { display: block; }
.pl-buttons .pl-toggle { width: 48px; height: 48px; background: var(--cream); color: var(--night); }
.pl-buttons .pl-toggle:hover { background: #fff; }
.pl-buttons .pl-close { background: none; color: rgba(252, 234, 210, 0.72); }
.pl-buttons .pl-close:hover { background: rgba(252, 234, 210, 0.12); color: var(--cream); }
/* (where the cards are the stack: as far from the sides and the foot of the screen as it, and solid as its cards) */
@media (max-width: 719px), (max-height: 559px) {
  .site-player {
    left: 16px;
    right: 16px;
    bottom: 16px;
    gap: 12px;
    width: auto;
    max-width: 480px;
    margin: 0 auto;
    padding: 8px 12px 8px 8px;
    background: #14103a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }
}
/* (on a phone, Pause and × only: the lock screen has 15 s back and 30 s on) */
@media (max-width: 511px) {
  .pl-buttons .pl-back, .pl-buttons .pl-fwd { display: none; }
  .pl-buttons { gap: 4px; }
  .pl-buttons .pl-close { width: 32px; height: 32px; }
}

@media (max-width: 719px) {
  .site-head { padding: 16px; }
  .site-nav a, .site-listen { padding: 0 12px; }
  .about-card { padding: 32px 24px 24px; }
  .site-rail { display: none; }
  .site-lede { font-size: 15px; }
}
@media (max-width: 359px) {
  .site-nav a, .site-listen { padding: 0 10px; font-size: 12px; }
}