/*****************************************************************************/
/***                                                                       ***/
/***  The header.                                                          ***/
/***                                                                       ***/
/*****************************************************************************/
/* The logo is one element, which travels from the hero's wordmark position. */
#site-header {
  position: fixed;
  left: var(--site-padding-x);
  right: var(--site-padding-x);
  top: var(--site-padding-y);
  z-index: 10;
  font-family: var(--serif-font);
  font-size: calc(22 * var(--screen-unit));
  font-weight: 400;
  letter-spacing: 0.015em;
  user-select: none;
  -webkit-user-select: none;
}
#site-header.is-light {
  color: var(--color-black);
}
#site-header.is-light .o-dashline {
  --dashline-color: var(--color-black);
}
#site-header.is-light #site-header-logo {
  color: var(--color-black);
}
#site-header-logo {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  color: var(--color-white);
  opacity: 0;
  text-decoration: none;
}
/*
  The pills' middle is level with the middle of a 36-unit word (24 on phones)
  set at the header's top.  The word's line box is 0.74 of its size, so it is
  moved down 0.37 x (36 - size) units to center it on the pills.
*/
#site-header-logo-text {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: calc(22 * var(--screen-unit));
  margin-top: calc((36 - 22) * 0.37 * var(--screen-unit));
  line-height: 0.74;
  letter-spacing: var(--wordmark-tracking);
  white-space: nowrap;
  padding-right: 0.1em;
}
/*
  The pills: the call to action (an outline) and the menu (solid cream, with a
  dot which becomes a cross).  Their colors swap over the cream field.
*/
#site-header-actions {
  position: absolute;
  right: 0;
  top: -0.62em;
  z-index: 12;
  display: flex;
  gap: 0.55em;
  font-family: var(--display-font);
  font-size: var(--btn);
  letter-spacing: 0.02em;
}
/*
  Frosted, so whatever lies behind a pill is blurred away.  Clear glass let the
  hero mat's grid lines show through it while the hover fill faded in.
*/
.hpill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  height: 3.1em;
  padding: 0 1.55em;
  border-radius: 3em;
  border: 1px solid rgb(243 235 220 / 0.55);
  background: rgb(15 13 10 / 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-white);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  will-change: transform;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.hpill:hover {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}
/*
  Opaque in every state (white, the accent, black on the light theme), so the
  pills' backdrop blur never shows through it, and it is dropped: each backdrop
  costs the compositor a pass over everything behind it, every frame, while
  the 3D is live.
*/
#site-header-menu-btn {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
  padding-left: 1.3em;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#site-header-menu-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
#site-header-menu-btn i {
  position: relative;
  width: 0.8em;
  height: 0.8em;
}
#site-header-menu-btn i::before,
#site-header-menu-btn i::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease-drop);
}
#site-header-menu-btn i::before {
  transform: translateY(-0.19em);
}
#site-header-menu-btn i::after {
  transform: translateY(0.19em);
}
#site-header.is-menu-active #site-header-menu-btn i::before {
  transform: rotate(45deg);
}
#site-header.is-menu-active #site-header-menu-btn i::after {
  transform: rotate(-45deg);
}
#site-header-menu-btn span:nth-of-type(2) {
  display: none;
}
#site-header.is-menu-active #site-header-menu-btn span:nth-of-type(1) {
  display: none;
}
#site-header.is-menu-active #site-header-menu-btn span:nth-of-type(2) {
  display: inline;
}
/*
  The label which shows ("Menu", or "Close" once open) rises in as the icon
  turns: each is shown from display: none, so it starts from its starting
  style.  It moves by 'transform'; the magnet (ui/magnetic.js) moves the first
  label by 'translate', which keeps its own spring here.
*/
#site-header-menu-btn > span {
  transition-property: translate, opacity, transform;
  transition-duration: 0.7s, 0.25s, 0.25s;
  transition-timing-function: var(--ease-spring), var(--ease-out), var(--ease-out);
}
#site-header-menu-btn.is-magnet > span {
  transition-duration: 0.18s, 0.25s, 0.25s;
  transition-timing-function: ease-out, var(--ease-out), var(--ease-out);
}
@starting-style {
  #site-header-menu-btn > span {
    opacity: 0;
    transform: translateY(0.5em);
  }
}
#site-header.is-light .hpill {
  border-color: rgb(15 13 10 / 0.5);
  background: rgb(243 235 220 / 0.3);
  color: var(--color-black);
}
#site-header.is-light .hpill:hover,
#site-header.is-light #site-header-menu-btn {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
#site-header-blocker {
  position: fixed;
  inset: 0;
  background: #0f0d0acc;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  /*
    Hidden, not only clear, while the menu is shut: on an iPhone Safari gives
    its status bar and toolbar the color of a fixed layer with a background
    at the screen's edges, even a clear one, so this painted both bands flat
    black over the scene.
  */
  visibility: hidden;
  transition:
    opacity 0.35s,
    visibility 0s 0.35s;
}
#site-header.is-menu-active #site-header-blocker {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.35s;
}

/*
  The menu: a cream card of numbered chapters, and a dark call-to-action card
  under it, dropping from the corner under the pills (transform and opacity
  only).
*/
#site-menu {
  position: absolute;
  right: 0;
  top: calc(var(--btn) * 3.1);
  z-index: 11;
  width: min(27em, calc(100vw - var(--site-padding-x) * 2));
  font-family: var(--display-font);
  font-size: calc(19 * var(--screen-unit));
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  visibility: hidden;
  transition: visibility 0s 0.45s;
}
#site-header.is-menu-active #site-menu {
  visibility: visible;
  transition-delay: 0s;
}
#site-menu-card,
#site-menu-cta,
#site-menu-contact {
  border-radius: 1.4em;
  opacity: 0;
  transform: translate3d(0, -1.2em, 0) scale(0.97);
  transform-origin: 100% 0;
  transition:
    opacity 0.3s,
    transform 0.45s var(--ease-drop);
}
#site-header.is-menu-active #site-menu-card,
#site-header.is-menu-active #site-menu-cta,
#site-header.is-menu-active #site-menu-contact {
  opacity: 1;
  transform: none;
}
#site-header.is-menu-active #site-menu-cta {
  transition-delay: 0.06s;
}
#site-header.is-menu-active #site-menu-contact {
  transition-delay: 0.12s;
}
#site-menu-card {
  background: var(--color-white);
  color: var(--color-black);
  padding: 1.5em 1.6em 1.1em;
}
.site-menu-caption {
  opacity: 0.5;
  margin-bottom: 0.9em;
}
#site-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#site-menu li {
  border-top: 1px solid rgb(15 13 10 / 0.14);
}
#site-menu li a {
  display: flex;
  align-items: baseline;
  gap: 1.1em;
  padding: 0.42em 0 0.5em;
  color: inherit;
  text-decoration: none;
}
.site-menu-num {
  font-family: var(--mono-font);
  font-size: 0.72em;
  opacity: 0.5;
  min-width: 1.6em;
}
.site-menu-name {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 2.35em;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: transform 0.35s var(--ease-drop);
}
#site-menu li.is-active .site-menu-name {
  font-style: italic;
  transform: translate3d(0.25em, 0, 0);
}
@media (hover: hover) {
  #site-menu li a:hover .site-menu-name {
    font-style: italic;
    transform: translate3d(0.25em, 0, 0);
  }
  #site-menu-cta:hover #site-menu-cta-title svg {
    transform: translate3d(0.25em, 0, 0);
  }
} /* A touch screen keeps :hover on after a tap. */
#site-menu li.is-active .site-menu-num {
  opacity: 1;
  color: var(--color-accent-deep);
}
#site-menu-cta {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding: 1.3em 1.6em 1.4em;
  background: var(--color-accent);
  color: var(--color-black);
  text-decoration: none;
}
#site-menu-cta .sub2 {
  opacity: 0.7;
}
#site-menu-cta-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 2.35em;
  line-height: 1;
  letter-spacing: -0.02em;
}
#site-menu-cta-title svg {
  width: 0.8em;
  height: 0.8em;
  transition: transform 0.35s var(--ease-drop);
}
#site-menu-contact {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.6em;
  background: #1c1915;
  color: var(--color-white);
}
#site-menu-contact a {
  text-decoration: none;
  white-space: nowrap;
}
#site-menu-contact a:hover {
  color: var(--color-accent);
}
@media (max-width: 767.98px) {
  #site-header-logo-text {
    font-size: calc(15 * var(--screen-unit));
    margin-top: calc((24 - 15) * 0.37 * var(--screen-unit));
  }
  #site-header-actions {
    top: -0.9em;
  }
  #site-menu {
    font-size: calc(14 * var(--screen-unit));
    top: calc(var(--btn) * 3.4);
  }
  #site-menu-contact {
    flex-direction: column;
    gap: 0.6em;
  }
}

/*
  The scroll prompt: a dot which bobs (up, down and back in the first second
  of every two, then still) beside the word "Scroll".  The hero shows one
  (#hero-scroll); the other (#scroll-prompt, ui/scroll-prompt.js) stands
  centered above the scroll cue wherever a set piece has played on its own
  and waits for a scroll.  The dot moves only while the prompt shows.
*/
.scroll-prompt {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--mono-font);
  font-weight: 400;
  white-space: nowrap;
  text-shadow: 0 1px 12px #0008;
  opacity: 0;
  will-change: opacity;
}
.scroll-prompt i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 1px 12px #0008;
}
.scroll-prompt.is-shown i {
  animation: scroll-prompt-bob 2s ease-in-out infinite;
}
@keyframes scroll-prompt-bob {
  15% {
    transform: translateY(-0.3em);
  }
  35% {
    transform: translateY(0.3em);
  }
  50%,
  100% {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-prompt.is-shown i {
    animation: none;
  }
}
/* Above the cue's ring (2.6em), whichever anchor the cue is at. */
#scroll-prompt {
  position: absolute;
  left: 50%;
  bottom: 3.5em;
  transform: translateX(-50%);
}

/*
  The run's progress bar (ui/run-progress.js): a small rounded cream bar on a
  faint cream track, in a dark translucent pill (blurring what is behind it),
  centered on the scroll cue's row; its fill slides in from the left as the
  opening's searches play.  The pill keeps the cream legible on the old
  sites' pale pages as well as on the dark ones, with one color throughout:
  at 60% it holds the fill to 4:1 or more on a white page; at 42% it was
  2.4:1 there.
*/
#run-progress {
  position: fixed;
  left: 50%;
  bottom: calc(var(--site-padding-y) + var(--sub2) * 1.3);
  z-index: 10;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgb(14 12 10 / 0.6);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 50%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#run-progress b {
  position: relative;
  display: block;
  width: 56px;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-white) 25%, transparent);
}
#run-progress i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-white);
  transform: translateX(-100%);
}

/*
  The scroll cue: a ring which fills through the chapter (with a bobbing arrow
  inside), then the chapter's number and name.  It slides between left, center
  and right anchors.
*/
#site-footer {
  position: fixed;
  left: var(--site-padding-x);
  right: var(--site-padding-x);
  bottom: var(--site-padding-y);
  z-index: 10;
  pointer-events: none;
}
#site-footer.is-light {
  color: var(--color-black);
}
#site-footer-scroll {
  position: absolute;
  left: 0;
  bottom: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: 0.9em;
  will-change: transform;
}
#site-footer-scroll-icon {
  position: relative;
  width: 2.6em;
  height: 2.6em;
  font-size: var(--sub2);
  will-change: transform;
}
#site-footer-scroll-icon > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#site-footer-scroll-icon .cue-track {
  opacity: 0.28;
  stroke-width: 1;
}
#cue-progress {
  stroke-width: 1.6;
}
#site-footer-scroll-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7em;
  height: 0.7em;
  margin: -0.6em 0 0 -0.35em;
}
#site-footer-scroll-arrow svg {
  position: absolute;
  width: 0.7em;
  height: 0.7em;
}
#site-footer-scroll-arrow svg:nth-child(1) {
  top: -0.3em;
  opacity: 0;
}
#site-footer-scroll-arrow svg:nth-child(2) {
  top: 0.2em;
}
#site-footer-scroll-text {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  white-space: nowrap;
}
#cue-num {
  font-family: var(--mono-font);
  font-weight: 400;
  opacity: 0.6;
}

/*
  The scroll indicator at the right edge: a cream tab which tracks the page's
  progress.
*/
#scroll-indicator {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: calc(var(--vh) * 100);
  z-index: 20;
}
/*
  The scrollbar: a slim rounded pill (its width, color and position are set in
  chrome.js).
*/
#scroll-indicator__bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 72px;
  border-radius: 999px;
  background: rgb(243 235 220 / 0.45);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: transform;
  transition: background-color 0.3s;
}
/* A wider, invisible grab area around the thin pill. */
#scroll-indicator__bar::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  right: -6px;
}
#scroll-indicator__bar.is-active {
  background: rgb(243 235 220 / 0.85);
}
#scroll-indicator__bar.is-light {
  background: rgb(12 10 10 / 0.35);
}
#scroll-indicator__bar.is-light.is-active {
  background: rgb(12 10 10 / 0.7);
}
.is-scroll-dragging,
.is-scroll-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

/*
  Preview and Live (ui/livesim.js): the pill on the simulator's two pictures,
  and the overlay the live page opens in (the morphing sheet's canvas, a note
  while the page loads, and the page).
*/
.live-pill {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 2em;
  background: rgb(15 13 10 / 0.84);
  border: 1px solid rgb(243 235 220 / 0.22);
  font-family: var(--mono-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: auto;
}
.live-pill[hidden] {
  display: none;
}
.live-pill button {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 1.15em;
  border: 0;
  border-radius: 2em;
  background: none;
  color: rgb(243 235 220 / 0.72);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s;
}
.live-pill button:hover {
  color: var(--color-white);
}
.live-pill button[aria-pressed='true'] {
  background: var(--color-white);
  color: var(--color-black);
}
.live-pill.is-live button[aria-pressed='true'] {
  background: var(--color-accent);
}
.live-pill button:focus-visible {
  outline: 1.5px dashed var(--color-accent);
  outline-offset: 2px;
}
.live-pill b {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-accent);
  animation: live-pulse 1.6s ease-in-out infinite;
}
.live-pill.is-live b {
  background: var(--color-black);
}
/* In the page's header band, clear of its panels and controls
   (sim-joints.html). */
.wearable-gallery-item > .live-pill {
  position: absolute;
  left: 50%;
  top: 2.5%;
  transform: translateX(-50%);
  z-index: 3;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.7);
}
#grip-zoom-box__desc .live-pill {
  margin-top: 1.1em;
}
.live-pill.is-loading b {
  animation-duration: 0.5s;
}
/*
  The live page: an iframe the size of the window, which fades in over the
  morphing sheet (a canvas under it) once that has carried the picture to the
  screen.  Without the sheet it is scaled and clipped to the picture's box
  (the transform and the clip-path are set by livesim.js), then opened to the
  screen.  The picture the sheet carries is hidden meanwhile.
*/
.wearable-gallery-item.is-away {
  opacity: 0;
}
#live-sim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
#live-sim.is-open {
  pointer-events: auto;
}
#live-sim-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#live-sim-sheet[hidden] {
  display: none;
}
#live-sim-window {
  position: absolute;
  inset: 0;
  will-change: clip-path;
}
#live-sim iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  border: 0;
  background: #0f0d0a;
  transform-origin: 0 0;
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity 0.38s ease;
}
#live-sim.is-shown iframe {
  opacity: 1;
}

/*
  The page's own pointer (ui/cursor.js): a dot on the pointer, and a ring
  trailing it.  Both sit on the pointer's place by a transform, with their own
  boxes centered on that point.  Nothing in it is scaled by a transform: the
  ring is an SVG circle whose radius the script sets, and the dot shrinks by
  its size.  A scaled border-radius circle showed a seam cross through its
  center in Firefox while it grew.
*/
html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}
#cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  mix-blend-mode: difference;
}
#cursor.is-on {
  opacity: 1;
}
#cursor-dot,
#cursor-ring {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
#cursor-dot::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transition:
    border-radius 0.2s,
    width 0.2s,
    height 0.2s,
    left 0.2s,
    top 0.2s;
}
#cursor-dot.is-press::before {
  left: -1.8px;
  top: -1.8px;
  width: 3.6px;
  height: 3.6px;
}
#cursor-dot.is-text::before {
  left: -1px;
  top: -11px;
  width: 2px;
  height: 22px;
  border-radius: 1px;
}
#cursor-ring svg {
  position: absolute;
  left: -30px;
  top: -30px;
  overflow: visible;
}
#cursor-ring circle {
  fill: rgb(255 255 255 / 0);
  stroke: rgb(255 255 255 / 0.75);
  transition:
    fill 0.25s,
    stroke 0.25s,
    opacity 0.25s;
}
#cursor-ring.is-text circle {
  opacity: 0;
}
/* A press draws the ring in (ui/cursor.js) and brightens its line; no fill. */
#cursor.is-down #cursor-ring circle {
  stroke: #fff;
}