/* 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;
  /* The visible height, not the largest possible one: on iOS Safari plain vh
     ignores the browser toolbar, so the end of the page sat under it. */
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

.slide {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  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: 56.25em) {
  .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: 8.25rem;
  background: linear-gradient(to top, var(--color-bg) 40%, transparent);
  pointer-events: none;
  z-index: 25;
}

/* The same treatment at the top, behind the fixed name and counter, so
   scrolling text passes under them instead of through them. Solid where the
   header sits, then fading out. */
body.deck-body::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 5rem;
  background: linear-gradient(to bottom, var(--color-bg) 65%, 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: 40em) {
  .deck-hint {
    display: none;
  }
}

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

.deck-nav {
  pointer-events: auto;
  width: 3.25rem;
  height: 3.25rem;
  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 0.5rem 1.5rem 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 0.5rem 1.5rem 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) + 1rem);
  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);
  /* Larger than the eyebrow it borrows from: it's the only place the full
     name appears on the first screen. */
  font-size: var(--fs-body);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 40em) {
  /* Bottom padding at least as tall as the fade behind the controls, so the
     last thing in a section never ends up under it. */
  .slide {
    padding: var(--space-8) 0 var(--space-10);
  }

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

  .deck-controls {
    gap: var(--space-2);
  }

  .deck-nav {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* The cap leaves room for both arrows, their gaps and a gutter on each
     side, so the arrows never get pushed off-screen. On a 375px phone the row
     fits outright; on narrower ones the dots scroll inside the pill instead. */
  .deck-progress {
    gap: 0;
    max-width: calc(100vw - 2 * 2.5rem - 4 * var(--space-2));
    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. */
  /* 1.5rem (24px at default text size) keeps each dot at the minimum target
     size (WCAG 2.5.8) while packing them closer than the original 30px plus gap. */
  .deck-step {
    position: relative;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.875rem;
    padding: 0;
    font-size: 0;
    background: transparent;
  }

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

  /* One width for every section, sized to the longest label ("Testimonials"),
     so the row doesn't grow or shrink as you move between sections. */
  .deck-step.is-active {
    width: 6.5rem;
    height: auto;
    padding: var(--space-2) 0;
    font-size: var(--fs-tiny);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--color-control-active);
    color: var(--color-bg);
  }

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