/* Kentra Signature showcases: the shared base, 1.2.0 (D-169). Each page sets its own tokens (--sans, --mono, --gut,
   --rib-*) and everything else inline. Motion here only runs with the runtime (html.js) and never with reduced
   motion (html.reduce). The page always scrolls natively; the only thing that may hold still is a stage's .hold
   frame, for at most 0.8 of a screen, with its .over copy scrolling across it. Since 1.2.0, for smoothness: no
   backdrop blur anywhere (a blur under a moving picture is redrawn every frame), no layer kept alive for nothing
   (will-change only where something moves every frame), a still grain, and no custom cursor. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,
picture,
canvas {
  display: block;
  max-width: 100%;
}
figure {
  margin: 0;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 3px;
}
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 14px;
  background: #fff;
  color: #000;
  font: 600 14px / 1 var(--sans);
  text-decoration: none;
}
.skip:focus {
  top: 44px;
}

/* The Kentra ribbon: slim, first thing on the page, never covering the design */
.k-rib {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding: 7px var(--gut);
  font: 450 12px / 1.3 var(--sans);
  letter-spacing: 0.01em;
  background: var(--rib-bg, #000);
  color: var(--rib-fg, #fff);
}
.k-rib p {
  margin: 0;
}
.k-rib b {
  font-weight: 600;
}
.k-rib a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--rib-accent, #fff);
  text-decoration: none;
  white-space: nowrap;
}
.k-rib a:hover span:first-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.k-rib .k-arrow {
  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
.k-rib a:hover .k-arrow {
  transform: translate(3px, -2px);
}
@media (max-width: 560px) {
  .k-rib {
    font-size: 11px;
  }
  .k-rib .k-long {
    display: none;
  }
}

/* The quote chip: appears once the hero has scrolled away */
.k-chip {
  position: fixed;
  right: var(--gut);
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 12px;
  font: 500 12px / 1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--chip-fg, #fff);
  background: var(--chip-bg, rgba(0, 0, 0, 0.88));
  border: 1px solid var(--chip-line, rgba(255, 255, 255, 0.14));
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.k-chip.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.k-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chip-dot, #fff);
  font-style: normal;
}
.no-js .k-chip {
  display: none;
}
@media (max-width: 760px) {
  .k-chip {
    left: 50%;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 10px 14px 10px 12px;
    font-size: 12px;
    transform: translate3d(-50%, 14px, 0);
  }
  .k-chip.show {
    transform: translate3d(-50%, 0, 0);
  }
  .k-chip .k-pre {
    display: none;
  }
}

/* Kinetic type: words rise from their own masks */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.02em 0.08em;
  margin: 0 -0.02em -0.08em;
}
.wi {
  display: inline-block;
}
.js .rv-in .wi {
  transition: transform 1.15s cubic-bezier(0.19, 1, 0.22, 1) calc(var(--i, 0) * 42ms);
}
.js .rv-wait .wi {
  transform: translate3d(0, 112%, 0);
}
.js [data-reveal] {
  transition:
    opacity 1s ease calc(var(--d, 0) * 90ms),
    transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) calc(var(--d, 0) * 90ms);
}
.js [data-reveal].rv-wait {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}

/* Photographs and their WebGL layer: the canvas takes over only when it is drawing the same picture */
.ph {
  position: relative;
  overflow: hidden;
}
.ph picture,
.ph img {
  width: 100%;
  height: 100%;
}
.ph img {
  object-fit: cover;
}
.gl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.gl-on > .gl-canvas {
  opacity: 1;
}
.gl-on > picture img,
.gl-on > img {
  visibility: hidden;
}

/* A scrubbed frame sequence (data-seq): its canvas covers the poster once it has drawn a frame */
.seq-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.seq-on > .seq-canvas {
  opacity: 1;
}
.seq-on > picture img {
  visibility: hidden;
}

/* A film (video[data-film]): over its poster picture, shown once it is playing (the runtime plays it only in view) */
video[data-film] {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}
video[data-film].on {
  opacity: 1;
}
.no-js video[data-film],
.reduce video[data-film] {
  display: none;
}

/* Objects moved on keyframes by the runtime (data-keys) */
.js [data-keys] {
  will-change: transform, opacity;
}
.reduce [data-keys] {
  will-change: auto;
}

/* Film grain over everything, very quiet, and still (1.2.0: it no longer shifts five times a second, which kept the
   screen redrawing even with nothing else moving) */
.grain {
  position: fixed;
  inset: 0;
  z-index: 65;
  pointer-events: none;
  opacity: var(--grain, 0.055);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Stages. A stage may hold its frame (.hold) for a short beat: its height is one screen plus --hold screens, and
   --hold is capped at .8 here, so no frame is ever held for more than 0.8 of a screen. Its .over layer is the copy
   that scrolls across the held frame, in the page's own flow, so the page visibly moves the whole time. Without
   the runtime, or with reduced motion, there is no hold: the frame and its copy stand one after the other. */
.js:not(.reduce) [data-hold] {
  height: calc(100svh * (1 + min(var(--hold, 0), 0.8)));
}
.js:not(.reduce) [data-hold] > .hold {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.js:not(.reduce) [data-hold] > .over {
  position: relative;
  margin-top: -100svh;
  height: calc(100svh * (1 + min(var(--hold, 0), 0.8)));
}
.no-js [data-stage],
.reduce [data-stage] {
  height: auto !important;
}
.no-js .hold,
.reduce .hold {
  position: relative !important;
}
.no-js [data-beat],
.reduce [data-beat] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Swipeable rows (phones): the browser's own horizontal scroll, snapping card by card */
.row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gut);
  padding: 0 var(--gut);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.row::-webkit-scrollbar {
  display: none;
}
.row > * {
  flex: 0 0 auto;
  scroll-snap-align: center;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  .k-chip,
  .grain,
  .gl-canvas,
  .seq-canvas,
  video[data-film] {
    display: none !important;
  }
  .gl-on > picture img,
  .gl-on > img,
  .seq-on > picture img {
    visibility: visible !important;
  }
}