/* Base: design tokens, reset, typography, icons and shared buttons */
:root {
  color-scheme: dark;
  --bg: #111113;
  --panel: #1c1c20;
  --surface: #161518;
  --ink: #f7f4f5;
  --muted: #bbb5b9;
  --pink: #fb4c9c;
  --pink-hover: #ff70b2;
  --on-pink: #161014;
  --line: #ffffff1a;
  --gutter: max(5vw, 22px);
  /* Sharp corners are part of the brand: buttons and cards keep a 2px radius */
  --radius: 2px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  /* --sticky-header-height is set by js/header.js */
  scroll-padding-top: calc(var(--sticky-header-height, 0px) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Horizontal clipping lives on <html>, never on <body>: an overflow value on body would make
     it a scroll container and break the sticky header (old browsers fall back to hidden) */
  overflow-x: hidden;
  overflow-x: clip;
  /* No double-tap zoom: on phones a quick double tap during a flick zoomed the page (pinch zoom still works) */
  touch-action: manipulation
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 1.125rem/1.55 Assistant, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

img,
video {
  max-width: 100%
}

img {
  height: auto
}

h1,
h2,
h3 {
  text-wrap: balance
}

p {
  text-wrap: pretty
}

a {
  color: inherit;
  text-decoration: none
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 5px
}


/* Icons come from the sprite at the top of index.html */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.accent {
  color: var(--pink)
}

.logo {
  font: 700 clamp(1.3rem, 3vw, 1.875rem)/1 'Space Grotesk', sans-serif;
  letter-spacing: -1.5px;
  direction: ltr
}

.logo b {
  color: var(--pink)
}

.eyebrow {
  display: block;
  color: var(--pink);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: .9375rem;
  text-wrap: balance
}

.buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 25px;
  background: var(--pink);
  color: var(--on-pink);
  font-weight: 800;
  font-size: 1rem;
  border-radius: var(--radius);
  /* Button text never wraps: otherwise the width jumped and the label broke into two lines on phones
     (e.g. while the web font was still loading) */
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s
}

/* <button class="button"> (e.g. the lead form): drop the browser's border and font */
button.button {
  border: 0;
  font-family: inherit;
  cursor: pointer
}

.button.secondary {
  background: #0000002e;
  color: var(--ink);
  border: 1px solid #ffffff8c
}

.text-link {
  font-weight: 800;
  font-size: 1rem;
  color: var(--pink)
}

/* Swipe carousels: native touch scrolling without a visible scrollbar */
.no-scrollbar,
.portfolio-grid,
.workshop-posters-grid,
.workshop-moments-grid,
.artbox-video-grid,
.artbox-image-grid {
  -ms-overflow-style: none;
  scrollbar-width: none
}

.no-scrollbar::-webkit-scrollbar,
.portfolio-grid::-webkit-scrollbar,
.workshop-posters-grid::-webkit-scrollbar,
.workshop-moments-grid::-webkit-scrollbar,
.artbox-video-grid::-webkit-scrollbar,
.artbox-image-grid::-webkit-scrollbar {
  display: none
}

/* Hover effects only for real pointers: on touch screens a tap would trigger them and they would
   stick while scrolling (elements jumping and scaling) */
@media (hover: hover) and (pointer: fine) {

  nav a:hover,
  .text-link:hover {
    color: var(--pink)
  }

  .button:hover {
    background: var(--pink-hover);
    transform: translateY(-2px)
  }

  .button.secondary:hover {
    background: #0000002e;
    border-color: var(--pink);
    color: var(--pink)
  }
}

@keyframes softBounce {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(7px)
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important
  }
}