/* v2.css - the simpler site (2 October 2026).

   Loaded after site.css and possibilities.css on every main page. Adds: the
   swipeable carousel (the research example), the app chips, the early-access
   steps, and a shorter rhythm for sections. Earlier pages are kept whole in
   _archive/2026-10-02-before-simpler-site/. */

.lean { padding: clamp(48px, 7vw, 96px) 0; }
.lean .h2 { max-width: 24ch; }
.oneline { color: var(--muted); max-width: 52ch; margin-top: 14px; font-size: 1.05rem; line-height: 1.55; }

/* ------------------------------------------------------------ carousel */
.swipe { position: relative; }
.swipe .track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 14px;
  border-radius: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.swipe .track::-webkit-scrollbar { display: none; }
.swipe .slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}
.swipe .slide img {
  display: block;
  width: 100%;
  aspect-ratio: 1100 / 690;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--raise);
}
.swipe .slide figcaption {
  margin-top: 12px;
  font-size: 0.95rem;
  color: var(--ink);
}
.swipe .slide figcaption span { font-family: var(--mono); color: var(--accent); font-size: 0.78rem; margin-right: 10px; letter-spacing: 0.08em; }
.swipe .nav2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.swipe .nav2 button.arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line2); background: rgba(10, 16, 22, 0.55); color: var(--ink);
  font: inherit; font-size: 1.1rem; cursor: pointer;
}
.swipe .nav2 button.arrow:hover { border-color: var(--accent); color: var(--accent); }
.swipe .nav2 button.arrow:disabled { opacity: 0.35; cursor: default; border-color: var(--line2); color: var(--ink); }
.swipe .dots { display: flex; gap: 7px; flex: 1; justify-content: center; }
.swipe .dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: 0; background: var(--line2); cursor: pointer;
}
.swipe .dots button[aria-current="true"] { background: var(--accent); width: 22px; border-radius: 4px; }
.swipe .hint { font-size: 0.82rem; color: var(--dim); white-space: nowrap; }

/* ------------------------------------------------------------ apps as chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips span {
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--raise);
  font-size: 0.9rem; color: var(--ink);
}
.chips span.star { border-color: var(--accent-s); color: var(--accent); }
.chipgroup { margin-top: 26px; }
.chipgroup h3 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.2em; color: var(--dim); font-weight: 500; }

/* ------------------------------------------------------------ early access */
.ea { max-width: 560px; margin: 0 auto; }
.ea .stepsv { list-style: none; padding: 0; margin: 0 0 22px; counter-reset: s; }
.ea .stepsv li {
  counter-increment: s;
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.ea .stepsv li:first-child { border-top: 0; }
.ea .stepsv li::before {
  content: counter(s);
  font-family: var(--mono); color: var(--accent); font-size: 0.85rem;
  width: 22px; flex: 0 0 22px;
}
.ea .stepsv li.done { color: var(--dim); }
.ea .alt { text-align: center; margin-top: 14px; font-size: 0.92rem; color: var(--dim); }
.ea .alt a { color: var(--accent); }

/* ------------------------------------------------------------ footer, shorter */
.footline { margin-top: 18px; }

/* the carousel must never widen its grid cell (390 px overflow, 2 Oct) */
.scene > * { min-width: 0; }
.swipe, .swipe .track { min-width: 0; max-width: 100%; }