/* Felis. One accent (the spine), system type, true black for the stage. */
:root {
  --nav-h: 52px;
  --nav-muted: #5e5e63;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --faint: #86868b;
  --paper: #ffffff;
  --mist: #f5f5f7;
  --line: #d2d2d7;
  --night: #000000;
  --night-2: #1d1d1f;
  --spine: #0071e3;
  --link: #0066cc;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Notice strip (local copies only) and local navigation */
.nav-sentinel {
  height: 1px;
  margin-bottom: -1px;
}

.private-strip {
  margin: 0;
  padding: 8px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));
  background: var(--mist);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: 0;
  text-align: center;
}

/* Local nav: pinned to the top edge across the full width, so every section is one tap away. Plain at the top of the
   page; once the page scrolls under it, frosted with a hairline. The section being read is set in ink with a short
   rule under it (aria-current, kept by page.js). Where the links do not fit, they form one row that scrolls sideways. */
.localnav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  background: var(--paper);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.localnav.is-stuck {
  border-bottom-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .localnav.is-stuck {
    background: rgba(255, 255, 255, 0.97);
  }
}

.localnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1024px;
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left));
}

.crumbs {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  white-space: nowrap;
}

.crumbs a {
  color: var(--nav-muted);
  font-size: 14px;
}

.crumbs .divider {
  color: var(--line);
  font-size: 14px;
}

.crumbs .product {
  color: var(--ink);
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.crumbs .product:hover {
  text-decoration: none;
}

.localnav-links {
  position: relative;
  display: flex;
  min-width: 0;
  margin: 0 -10px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.localnav-links::-webkit-scrollbar {
  display: none;
}

/* Edge fades, set by page.js only while more links lie that way */
.localnav-links.fade-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
  mask-image: linear-gradient(to right, transparent, #000 28px);
}

.localnav-links.fade-end {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 28px);
  mask-image: linear-gradient(to left, transparent, #000 28px);
}

.localnav-links.fade-start.fade-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.localnav-links li {
  flex: none;
}

.localnav-links a {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  color: var(--nav-muted);
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.localnav-links a:hover,
.localnav-links a[aria-current="true"] {
  color: var(--ink);
  text-decoration: none;
}

.localnav-links a[aria-current="true"]::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
}

.localnav-links a:focus-visible {
  outline-offset: -4px;
}

/* A jump from the nav lands each heading below the pinned bar */
main,
.section {
  scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}

/* Hero: the name, the tagline, then the film edge to edge */
.hero {
  padding: 92px max(22px, env(safe-area-inset-right)) 48px max(22px, env(safe-area-inset-left));
  text-align: center;
}

.hero-name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(72px, 12vw, 128px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.hero-name .half {
  display: inline-block;
}

.hero-name .front {
  transform-origin: 100% 62%;
}

.hero-name .rear {
  transform-origin: 0% 62%;
}

@media (prefers-reduced-motion: no-preference) {
  /* The two halves of the name twist against each other and settle, once, as the page opens. */
  .hero-name .front {
    animation: settle-front 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
  }

  .hero-name .rear {
    animation: settle-rear 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
  }
}

@keyframes settle-front {
  from {
    transform: rotate(-12deg) translateY(0.05em);
  }

  to {
    transform: none;
  }
}

@keyframes settle-rear {
  from {
    transform: rotate(10deg) translateY(0.05em);
  }

  to {
    transform: none;
  }
}

.hero-tagline {
  max-width: 19em;
  margin: 18px auto 0;
  font-family: var(--display);
  font-size: clamp(21px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: -0.015em;
}

/* Authors, in Frank's order, under the tagline; linked names keep a quiet underline. */
.hero-authors {
  max-width: 46em;
  margin: 22px auto 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: balance;
}

.author {
  white-space: nowrap;
}

.hero-authors a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hero-authors a:hover {
  color: var(--link);
  text-decoration-color: currentColor;
}

.hero-authors sup,
.hero-footnote sup {
  margin-left: 1px;
  font-size: 0.7em;
}

.hero-footnote {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.hero-footnote span + span {
  margin-left: 16px;
}

/* Code and technical report: not out yet. Quiet pills that read as "coming soon", with nothing to click. */
.hero-resources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.resource {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 980px;
  background: var(--mist);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.3;
  cursor: default;
}

.resource-name {
  font-weight: 600;
}

.resource-state {
  color: var(--muted);
  font-size: 12px;
}

/* Read count and like: the Research Notes widget (files/note-metrics.js; look copied from files/research-notes.css).
   Absent on local copies. On the public site its line is reserved and fades in once a count arrives. */
.felis-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  min-height: 36px;
  margin: 16px 0 0;
  color: #68727b;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.felis-metrics[hidden] {
  display: none;
}

.felis-metrics.is-live {
  visibility: visible;
  opacity: 1;
}

.felis-metrics .note-like {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin: 0;
  padding: 4px 9px;
  border: 1px solid #dfe3e7;
  border-radius: 3px;
  background: transparent;
  color: #596773;
  font: inherit;
  cursor: pointer;
}

.felis-metrics .note-like .fa {
  font-size: 16px;
}

.felis-metrics .note-like:hover:not(:disabled),
.felis-metrics .note-like[aria-pressed="true"] {
  border-color: #80534b;
  color: #80534b;
  background: #faf6f4;
}

.felis-metrics .note-like:focus-visible {
  outline: 2px solid #80534b;
  outline-offset: 3px;
}

.felis-metrics .note-like:disabled {
  cursor: default;
  color: #858b91;
}

.felis-metrics .note-metrics-status {
  color: #737c85;
  font-size: 11px;
}

.felis-metrics .note-metrics-status:empty {
  display: none;
}

.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 84vh;
  overflow: hidden;
  background: var(--mist);
}

.hero-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sound for the teaser: shown only when the film has an audio track */
.sound {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: 20px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
}

.sound[hidden] {
  display: none;
}

.sound svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.sound .icon-on,
.sound[aria-pressed="true"] .icon-off {
  display: none;
}

.sound[aria-pressed="true"] .icon-on {
  display: block;
}

/* Media slots and the note shown until a file is delivered */
.slot {
  position: relative;
}

.slot-note {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 16px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.slot.is-missing > .slot-note {
  display: flex;
}

.slot.is-missing > video,
.slot.is-missing > img {
  visibility: hidden;
}

/* "Loading…" over a film that is waiting for data (page.js adds .is-loading to its box after half a second) */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 500 14px/1 var(--text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.loading::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
}

.is-loading > .loading {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .loading::before {
    animation: loading-spin 0.8s linear infinite;
  }
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Sections */
.section {
  padding: 128px max(22px, env(safe-area-inset-right)) 128px max(22px, env(safe-area-inset-left));
}

.band-mist {
  background: var(--mist);
}

.band-night {
  background: var(--night);
  color: #f5f5f7;
}

.section-head {
  max-width: 980px;
  margin: 0 auto 56px;
}

.section-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(34px, 4.8vw, 56px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.025em;
}

.section-sub {
  max-width: 34em;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(19px, 1.7vw, 21px);
  line-height: 1.38;
}

.band-night .section-sub {
  color: var(--faint);
}

/* Overview */
.statement {
  max-width: 980px;
  margin: 0 auto 56px;
  font-family: var(--display);
  font-size: clamp(27px, 3.3vw, 40px);
  font-weight: 600;
  line-height: 1.125;
  letter-spacing: -0.022em;
}

/* Even line breaks for headlines, no lone last words in body text */
.hero-tagline,
.statement,
.section-title,
.overview-grid h2 {
  text-wrap: balance;
}

.body-copy,
.section-sub {
  text-wrap: pretty;
}

.overview-grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 48px;
  max-width: 980px;
  margin: 0 auto;
}

.overview-grid h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -0.015em;
}

.body-copy {
  max-width: 36em;
  margin: 0;
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.52;
}

/* The real robot: two photographs on black */
.real-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto 96px;
}

.real-photo {
  margin: 0;
}

.real-photo .slot {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 20px;
  background: #000;
}

.real-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.real-photo .slot-note {
  color: var(--faint);
}

.real-caption {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Where the motors are: six against twelve */
.motors {
  max-width: 980px;
  margin: 96px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.motor-row {
  display: grid;
  grid-template-columns: 240px 1fr 64px;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
}

.motor-name {
  font-size: 17px;
  font-weight: 600;
}

.dots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
}

.dot.spine {
  background: var(--spine);
}

.motor-count {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: right;
}

.motor-row.other .motor-name,
.motor-row.other .motor-count {
  color: var(--muted);
  font-weight: 500;
}

.motor-row.other .dot {
  background: #c7c7cc;
}

.motors figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.key.spine {
  background: var(--spine);
}

/* Mid-air righting film: plays once in view, then rests on its last frame with a replay button */
.righting-film {
  max-width: 980px;
  margin: 0 auto 72px;
}

.film {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  background: #000;
}

.film > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film > .slot-note {
  color: var(--faint);
}

.replay {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 500 15px/1 var(--text);
  cursor: pointer;
}

.replay[hidden] {
  display: none;
}

.replay svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Mid-air righting: one black panel, the phase names set as text beside the figure's rows */
.righting {
  max-width: 980px;
  margin: 0 auto;
}

.righting-panel {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 24px;
  background: #000;
}

.phases {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: phase;
}

.phases li {
  position: absolute;
  top: var(--y);
  right: 12px;
  left: 32px;
  padding-left: 34px;
  counter-increment: phase;
  transform: translateY(-50%);
}

.phases li::before,
.phase-marks span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #f5f5f7;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.phases li::before {
  content: counter(phase);
  position: absolute;
  top: 1px;
  left: 0;
}

.phase-name {
  display: block;
  color: #f5f5f7;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.phase-time {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.righting-image {
  background: #000;
}

.righting-image img {
  display: block;
  width: 100%;
  height: auto;
}

.phase-marks {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .righting img,
  .real-photo img {
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .righting .slot.is-ready img,
  .real-photo .slot.is-ready img {
    opacity: 1;
  }
}

.player-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  text-wrap: balance;
}

.figure-credit {
  display: block;
  margin-top: 6px;
  color: var(--faint);
  font-size: 12px;
}

.figure-credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
}

.righting figcaption,
.righting-film figcaption,
.player-caption {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  text-wrap: balance;
}

/* Locomotion: one stage, the render large, the simulation inset */
.player {
  max-width: 1080px;
  margin: 0 auto;
}

/* Motion picker: a strip of preview frames under the stage */
.motion-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.thumb {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.thumb-frame {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #e8e8ed;
  opacity: 0.55;
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

.thumb-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb.no-poster .thumb-frame img {
  visibility: hidden;
}

.thumb-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
  transition: color 0.25s ease;
}

.thumb:hover .thumb-frame {
  opacity: 0.85;
}

.thumb[aria-pressed="true"] .thumb-frame {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

.thumb[aria-pressed="true"] .thumb-label {
  color: var(--ink);
  font-weight: 600;
}

.thumb:focus-visible {
  outline: none;
}

.thumb:focus-visible .thumb-frame {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--link);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.stage {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  background: var(--mist);
}

.stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inset {
  position: absolute;
  right: 2.5%;
  bottom: 4.5%;
  z-index: 1;
  width: 27%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #e8e8ed;
  /* A hairline ring keeps the inset distinct now that both films share a dark floor. */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.inset > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inset > .slot-note {
  padding: 6px;
  font-size: 11px;
  line-height: 1.3;
}

/* Modular legs: the comparison still above the second stage */
.legs-compare {
  max-width: 1080px;
  margin: 0 auto 72px;
}

.legs-still {
  overflow: hidden;
  border-radius: 24px;
  background: #e8e8ed;
}

.legs-still:not(.is-ready) {
  aspect-ratio: 16 / 9;
}

.legs-still img {
  display: block;
  width: 100%;
  height: auto;
}

.legs-compare figcaption {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.band-mist .stage {
  background: #e8e8ed;
}

.band-mist .thumb-frame {
  background: #dcdce1;
}

.band-mist .thumb[aria-pressed="true"] .thumb-frame {
  box-shadow: 0 0 0 2px var(--mist), 0 0 0 4px var(--ink);
}

.band-mist .inset {
  background: #dcdce1;
}

/* Dance: black stage, large tiles, one quiet play button */
.dances {
  display: grid;
  gap: 80px;
  max-width: 1080px;
  margin: 0 auto;
}

.dance {
  margin: 0;
}

.tile {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: var(--night-2);
}

.tile > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile > .slot-note {
  color: var(--faint);
}

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.play:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.05);
}

.play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  fill: currentColor;
}

.tile.is-playing > .play,
.tile.is-missing > .play {
  opacity: 0;
  pointer-events: none;
}

.dance-note {
  max-width: 1080px;
  margin: 56px auto 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

.dance figcaption {
  margin-top: 18px;
  color: #f5f5f7;
  font-size: 17px;
  font-weight: 600;
}

.dance figcaption .song {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-size: 14px;
  font-weight: 400;
}

.band-night a:focus-visible,
.band-night button:focus-visible {
  outline-color: #2997ff;
}

/* Timeline */
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.timeline li {
  position: relative;
  padding-top: 30px;
}

.timeline li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.tl-year {
  display: block;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.tl-place {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.tl-title {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 600;
}

.tl-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.tl-people {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.tl-people + .tl-people {
  margin-top: 2px;
}

.tl-note a,
.tl-people a {
  color: var(--link);
}

.is-placeholder {
  color: #aeaeb2;
}

/* Credits */
.credits {
  padding: 36px max(22px, env(safe-area-inset-right)) 56px max(22px, env(safe-area-inset-left));
  background: var(--mist);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
}

.credits-inner {
  max-width: 980px;
  margin: 0 auto;
}

.credits p {
  margin: 0 0 10px;
}

.credits .back {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* Reading list: one band per group (its name on the left on wide screens), each work as its year, then the title
   (a link to the DOI or the source), the authors and venue, and one quiet note. page.js folds long groups. */
.reading {
  max-width: 980px;
  margin: 0 auto;
}

.reading-intro {
  max-width: 40em;
}

.ref-group {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0 40px;
  padding: 36px 0 26px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 16px);
}

.ref-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.01em;
}

.ref-count {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.ref-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ref {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0 16px;
  padding: 0 0 20px;
}

.ref[hidden] {
  display: none;
}

.ref-year {
  padding-top: 2px;
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.ref-title {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

a.ref-title {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a.ref-title:hover {
  color: var(--link);
  text-decoration-color: currentColor;
}

.ref-meta,
.ref-note {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.ref-meta {
  color: var(--ink-2);
}

.ref-note {
  color: var(--muted);
}

.ref-more {
  grid-column: 2;
  justify-self: start;
  min-height: 44px;
  margin: 0 0 0 64px;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--link);
  font: 500 14px/1 var(--text);
  cursor: pointer;
}

.ref-more:hover {
  background: rgba(0, 0, 0, 0.08);
}

.ref-more[hidden] {
  display: none;
}

.ref-group[hidden] {
  display: none;
}

.reading {
  scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 16px);
}

/* "Show more" for the groups after the first three */
.reading-more {
  display: block;
  min-height: 44px;
  margin: 28px auto 0;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  color: var(--link);
  font: 500 15px/1 var(--text);
  white-space: nowrap;
  cursor: pointer;
}

.reading-more:hover {
  border-color: currentColor;
}

/* Narrow screens */
@media (max-width: 1068px) {
  .motor-row {
    grid-template-columns: 200px 1fr 56px;
  }
}

@media (max-width: 734px) {
  :root {
    --nav-h: 48px;
  }

  .localnav-inner {
    gap: 6px;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }

  /* Phones: the product name, then all six links in one row (right-aligned when they fit, scrolling when not) */
  .crumbs a:not(.product),
  .crumbs .divider {
    display: none;
  }

  .localnav-links {
    flex: 1 1 auto;
  }

  .localnav-links li:first-child {
    margin-left: auto;
  }

  .hero {
    padding: 64px max(20px, env(safe-area-inset-right)) 36px max(20px, env(safe-area-inset-left));
  }

  .hero-tagline {
    margin-top: 14px;
  }

  .section {
    padding: 88px max(20px, env(safe-area-inset-right)) 88px max(20px, env(safe-area-inset-left));
  }

  .section-head {
    margin-bottom: 40px;
  }

  .statement {
    margin-bottom: 36px;
  }

  .real-photos {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 64px;
  }

  .real-photo .slot {
    border-radius: 16px;
  }

  .overview-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .body-copy {
    font-size: 17px;
  }

  .motors {
    margin-top: 64px;
  }

  .motor-row {
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
  }

  .motor-row .dots {
    grid-column: 1 / -1;
    order: 3;
    gap: 8px;
  }

  .dot {
    width: 15px;
    height: 15px;
  }

  .motor-count {
    font-size: 28px;
  }

  .motion-strip {
    gap: 10px;
  }

  .thumb-frame {
    border-radius: 8px;
  }

  .thumb-label {
    font-size: 12px;
  }

  .stage,
  .film,
  .righting-panel {
    border-radius: 16px;
  }

  .righting-film {
    margin-bottom: 48px;
  }

  .replay {
    right: 12px;
    bottom: 12px;
    height: 36px;
    padding: 0 14px 0 10px;
    font-size: 14px;
  }

  /* Phones: numbers on the figure's rows, the phase list under it */
  .righting-panel {
    display: flex;
    flex-direction: column;
  }

  .righting-panel .phases {
    order: 2;
    padding: 4px 16px 10px;
  }

  .phases li {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0 11px 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transform: none;
  }

  .phases li:first-child {
    border-top: 0;
  }

  .phases li::before {
    top: 11px;
  }

  .phase-name {
    font-size: 15px;
  }

  .phase-time {
    margin: 0;
  }

  .phase-marks {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .phase-marks span {
    position: absolute;
    top: var(--y);
    left: 1%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    transform: translateY(-50%);
  }

  .tile {
    border-radius: 16px;
  }

  .inset {
    width: 36%;
    border-radius: 8px;
  }

  .dances {
    gap: 56px;
  }

  .play {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
  }

  .play svg {
    width: 22px;
    height: 22px;
  }

  .reading-intro {
    font-size: 17px;
    line-height: 1.47;
  }

  .ref-group {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 0 18px;
  }

  .ref-head {
    margin-bottom: 18px;
  }

  .ref {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0 12px;
  }

  .ref-title {
    font-size: 16px;
  }

  .ref-more {
    grid-column: 1;
    margin-left: 52px;
  }

  .timeline {
    grid-template-columns: 1fr;
    gap: 0;
    margin-left: 6px;
    padding-left: 26px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .timeline li {
    padding: 0 0 32px;
  }

  .timeline li::before {
    top: 9px;
    left: -32px;
  }

  .tl-year {
    font-size: 28px;
  }
}