/* 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; }
}
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 played by the scroll, 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 */
.site-stage { position: fixed; inset: 0; 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; }
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.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:hover { color: var(--cream); background: rgba(252, 234, 210, 0.09); }
.site-listen { margin-left: 8px; border: 0; background: var(--cream); color: var(--night); font-weight: 600; 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: 500 10.5px/1 var(--site-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(252, 234, 210, 0.72);
  opacity: 0;
  pointer-events: none;
}
.site-cue i { display: block; width: 1px; height: 40px; background: linear-gradient(rgba(252, 234, 210, 0.85), rgba(252, 234, 210, 0)); 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-end::before {
  content: '';
  position: absolute;
  inset: -16% -20%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(10, 8, 34, 0.6), rgba(10, 8, 34, 0.32) 55%, rgba(10, 8, 34, 0));
}
.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); }

/* 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 top is 24px + 1.2em over the
   ball's middle. */
.pin-card {
  position: absolute;
  left: var(--gap);
  top: calc(-24px - 1.2em - var(--up, 0px)); /* (--up: raised by the page, if it must, to keep its foot on the screen) */
  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 calc(24px + 1.2em);
  text-align: left;
  pointer-events: none;
}
.pin.is-left .pin-card { left: auto; right: var(--gap); transform-origin: 100% calc(24px + 1.2em); }
/* 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, fading and blurring in and out with the scroll */
.site-sheet {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 64px;
  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% 100%;
  background: color-mix(in srgb, #1c1645, #0c0924 calc(var(--back, 0) * 50%)); /* solid, darker the farther back */
  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): its line,
   title (two lines), guest (one), two lines of summary, and the buttons at its foot; a small cover in the top-right
   corner, beside the first lines only, which holds its size, its corners concentric with the card's (32px less its
   16px inset); no quote. */
.site-sheet .pin-cover { left: auto; right: 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-right: 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: 128px; }

/* 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 */
.site-player {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(576px, calc(100vw - 32px));
  padding: 8px 12px 8px 8px;
  border-radius: 16px; /* concentric with the cover's (8px) at its 8px inset */
  background: rgba(18, 16, 52, 0.74);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(252, 234, 210, 0.14), 0 22px 44px -22px rgba(0, 0, 0, 0.7);
  color: var(--cream);
  transform: translateX(-50%);
}
.site-player[hidden] { display: none; }
.pl-cover { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.pl-text { display: grid; flex: 1; gap: 4px; min-width: 0; margin: 0; }
.pl-text b { font: 500 11px/1 var(--site-font); color: rgba(252, 234, 210, 0.62); font-variant-numeric: tabular-nums; }
.pl-text span { overflow: hidden; font: 600 13px/1.25 var(--site-font); white-space: nowrap; text-overflow: ellipsis; }
.pl-toggle { position: relative; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--cream); cursor: pointer; }
.pl-toggle::before { content: ''; position: absolute; left: 16px; top: 14px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--night); }
.pl-toggle.is-on::before { left: 15px; top: 14px; width: 3px; height: 12px; border: 0; background: var(--night); box-shadow: 7px 0 0 var(--night); }
.pl-seek { flex: none; width: 120px; accent-color: #ffc46b; }
.pl-time { flex: none; font: 11px/1 var(--site-font); color: rgba(252, 234, 210, 0.7); white-space: nowrap; }
.pl-close { flex: none; padding: 4px 8px; border: 0; background: none; color: rgba(252, 234, 210, 0.7); font: 20px/1 var(--site-font); cursor: pointer; }
.pl-close:hover { color: #fff; }

@media (max-width: 719px) {
  .site-head { padding: 16px; }
  .site-nav a { display: none; }
  .site-listen { padding: 0 12px; }
  .site-rail { display: none; }
  .site-lede { font-size: 15px; }
  .pl-seek { display: none; }
}