/* Orb Studio — Walkthrough page (orbstudio.space/walkthrough/)
   Layout + typography only — tokens, header, footer, buttons, dots/aurora,
   .win frame and .pill all come from site.css, loaded first. */

.wt-hero {
  padding: 132px 0 30px;
  border-bottom: 1px solid var(--line-soft);
}
.wt-hero h1 { margin: 10px 0 14px; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.wt-hero .lead { color: var(--muted); max-width: 42em; }
.wt-hero .lead strong { color: var(--text); }

.wt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.wt-meta .pill.accent { border-color: rgba(201, 107, 255, 0.35); color: var(--rim); }

/* ---------- the framed embed ---------- */

.wt-video { padding: 46px 0 30px; }

.video-frame { width: min(1160px, 100%); margin: 0 auto; }

.win-bar .frame-dur { margin-left: auto; color: var(--glass); }

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 2468 / 1350;
  background: #05060c;
}
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

.frame-caption { margin-top: 16px; text-align: center; }

/* ---------- chapters ---------- */

.wt-chapters { padding-top: 20px; }

.chapters-col { max-width: 720px; margin: 0 auto; }

.chapter-list {
  list-style: none;
  margin-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.chapter-item {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.chapter-t { flex: 0 0 auto; min-width: 50px; color: var(--violet); }
.chapter-label { color: var(--text); font-size: 0.98rem; }

.wt-cta { margin-top: 44px; }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .wt-hero { padding: 112px 0 26px; }
  .wt-video { padding: 30px 0 20px; }
  .chapter-item { gap: 14px; padding: 14px 2px; }
  .chapter-t { min-width: 44px; font-size: 0.68rem; }
}