/* Clips archive (/clips/) and clip pages (/clips/<slug>). Layers on hub.css. */
.topbar .tb-word { opacity: 1; }
.tb-link[aria-current="page"] { color: var(--text); }
.clips-wrap { width: min(1120px, 100%); margin: 0 auto; padding: calc(var(--topbar) + 3rem) var(--gutter) 2rem; position: relative; z-index: 0; }
.clips-head { text-align: center; margin-bottom: 2.5rem; }
.clips-kicker { font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.clips-head h1 { font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; margin: 0.5rem 0 0.8rem; }
.clips-head p { color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.6; }
.clips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 1.25rem; }
.clip { border-radius: 22px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.9rem; margin: 0; }
.clip.is-feature { grid-column: 1 / -1; }
.clip.is-tall { grid-row: span 2; }
.frame { position: relative; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(25, 214, 232, 0.18) inset; }
.frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.wide .frame, .feature .frame { aspect-ratio: 16 / 9; }
.is-tall .frame, .tall .frame { aspect-ratio: 9 / 16; flex: 1; }
/* Phones in portrait get the 9:16 cut of clips that have one (clips.js swaps the file). */
.frame.is-vert { aspect-ratio: 9 / 16; width: min(100%, 440px, calc(80vh * 9 / 16)); margin: 0 auto; flex: none; }
.clip figcaption { padding: 0 0.5rem 0.4rem; }
.clip-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.45rem; }
.clip-tag { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); border: 1px solid var(--rim-hi); border-radius: 999px; padding: 0.2rem 0.6rem; background: rgba(0, 0, 0, 0.6); }
.clip-len, .clip-date { font-size: 0.78rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.clip h2 { font-size: clamp(1.1rem, 2.4vw, 1.4rem); letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.clip h2 a { color: inherit; text-decoration: none; }
.clip h2 a:hover, .clip h2 a:focus-visible { color: var(--cyan); }
.is-feature h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.clip p { color: var(--muted); line-height: 1.55; font-size: 0.95rem; }
.clip .more { display: inline-block; margin-top: 0.6rem; font-size: 0.88rem; text-decoration: none; }
.soon { text-align: center; margin: 3rem auto 0; max-width: 620px; border-radius: 20px; padding: 1.5rem; }
.soon h2 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.soon p { color: var(--muted); line-height: 1.6; }
.soon .row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.1rem; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.2rem; border-radius: 12px; text-decoration: none; font-weight: 600; border: 1px solid var(--rim-hi); background: rgba(0, 0, 0, 0.6); color: var(--cyan); }
.btn.is-primary { background: var(--cyan); color: #041014; border: 0; }

/* A single clip page */
.crumbs { font-size: 0.85rem; color: var(--faint); margin-bottom: 1rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--cyan); }
.item-head { max-width: 780px; margin-bottom: 1.5rem; }
.item-head h1 { font-size: clamp(1.9rem, 5.5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0.6rem 0 0.9rem; }
.item-head .lede { color: var(--text); opacity: 0.86; line-height: 1.6; font-size: 1.05rem; }
.item-player { border-radius: 22px; padding: 0.75rem; }
.item-player.tall .frame { width: min(100%, 440px, calc(80vh * 9 / 16)); margin: 0 auto; }
.item-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.item-body section { border-radius: 20px; padding: 1.25rem 1.4rem; }
.item-body h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
.moments { list-style: none; display: grid; gap: 0.85rem; }
.moments time { display: inline-block; min-width: 3.2em; color: var(--cyan); font-variant-numeric: tabular-nums; font-weight: 600; }
.moments b { color: var(--text); font-weight: 600; }
.moments p, .facts dd, .item-body p { color: var(--muted); line-height: 1.55; font-size: 0.95rem; }
.moments button { all: unset; cursor: pointer; }
.moments button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem; }
.facts dt { color: var(--faint); font-size: 0.85rem; }
.facts dd { font-size: 0.9rem; }
.try { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.related { margin-top: 2.5rem; }
.related h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.related ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.related li a { display: block; border-radius: 16px; padding: 0.6rem; text-decoration: none; color: var(--text); height: 100%; }
.related img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 0.6rem; background: #000; }
.related span { display: block; padding: 0 0.3rem 0.3rem; font-weight: 600; font-size: 0.95rem; }
.related li a:hover span, .related li a:focus-visible span { color: var(--cyan); }
.related .all { text-align: center; margin-top: 1.2rem; }

@media (max-width: 760px) {
  .clips { grid-template-columns: minmax(0, 1fr); }
  .clip.is-tall { grid-row: auto; }
  .is-tall .frame { max-height: 78vh; aspect-ratio: 9 / 16; width: min(100%, 440px); margin: 0 auto; flex: none; }
  .item-body { grid-template-columns: minmax(0, 1fr); }
  .related ul { grid-template-columns: minmax(0, 1fr); }
}