/* The whole page as a full-screen slide deck. Slides stack vertically and
   the deck is a native scroll-snap container, so a plain mouse wheel, a
   trackpad, touch, the scrollbar, or the on-screen arrows all move between
   slides — no gesture-specific handling required. */

html, body.deck-body {
  height: 100%;
  overflow: hidden;
}

.deck {
  position: relative; /* makes each slide's offsetTop deck-relative */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.slide {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding: var(--space-9) 0 var(--space-10);
}

.slide .container {
  width: 100%;
}

.slide--intro h1 {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-5);
}

.slide--intro .lead {
  max-width: 54ch;
}

.slide--work .work-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .slide--work .work-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Deck chrome: controls fixed to viewport ---- */

/* Content scrolls underneath the fixed controls, so fade it out rather than
   letting text collide with them. */
body.deck-body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 132px;
  background: linear-gradient(to top, var(--color-bg) 40%, transparent);
  pointer-events: none;
  z-index: 25;
}

.deck-chrome {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--space-5);
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* Bottom-left, clear of the centred controls and of slide body text. */
.deck-hint {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 30;
  margin: 0;
  font-size: var(--fs-tiny);
  color: var(--color-text-muted);
}

/* Whether the hint clears the centred control row depends on the number of
   sections and the length of their names, so deck.js measures it and toggles
   visibility rather than us guessing a breakpoint. Mobile hides it outright —
   there is no keyboard to hint at. */
@media (max-width: 640px) {
  .deck-hint {
    display: none;
  }
}

.deck-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  pointer-events: auto;
}

.deck-nav {
  pointer-events: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(28, 27, 24, 0.08);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.deck-nav:hover {
  background: var(--color-control-active);
  border-color: var(--color-control-active);
  color: var(--color-bg);
  transform: translateY(-1px);
}

.deck-nav:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

.deck-nav:disabled:hover {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}

.deck-progress {
  display: flex;
  gap: var(--space-1);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-1);
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(28, 27, 24, 0.08);
}

.deck-step {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: var(--space-2) var(--space-4);
  border-radius: 100px;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.deck-step:hover {
  color: var(--color-text);
}

.deck-step.is-active {
  background: var(--color-control-active);
  color: var(--color-bg);
}

.deck-counter {
  position: fixed;
  top: var(--space-5);
  right: calc(var(--space-5) + 16px);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  z-index: 30;
}

.deck-counter #deck-current {
  color: var(--color-text);
  font-weight: 600;
}

/* Typography comes from .eyebrow on the element itself; this places it and
   keeps the name in sentence case rather than the eyebrow's uppercase. */
.deck-wordmark {
  position: fixed;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 30;
  margin: 0;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .slide {
    padding: var(--space-8) 0 var(--space-9);
  }

  .deck-chrome {
    bottom: var(--space-4);
    gap: var(--space-2);
  }

  .deck-nav {
    width: 40px;
    height: 40px;
  }

  .deck-progress {
    max-width: calc(100vw - var(--space-7));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .deck-progress::-webkit-scrollbar {
    display: none;
  }

  /* Phone: the section names won't all fit, so every step collapses to a dot
     and only the current one keeps its label. The button stays a comfortable
     tap target; ::before draws the small visible dot inside it. */
  .deck-step {
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 0;
    background: transparent;
  }

  .deck-step::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
  }

  .deck-step.is-active {
    width: auto;
    height: auto;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-tiny);
    background: var(--color-control-active);
    color: var(--color-bg);
  }

  .deck-step.is-active::before {
    display: none;
  }
}