/* ==========================================================================
   العاصمة — «عدسة العاصمة», the page (home.html's lens band, whole)
   The band's own rules come from home.css; these are only what the page
   adds to them: its headings one level up, the play mark as a button that
   plays in place, a day's videos beside its contact sheet.
   ========================================================================== */

/* the page names itself with the band's title, and the stage's story one level below it */
.lens--page .lens__title h1 { font-size: var(--fs-h2); font-weight: 800; }
.lens--page .lens__story h2 { font-size: var(--fs-h2); font-weight: 800; max-width: 22ch; color: #F4F5F6; }
.lens--page { padding-bottom: 0; }

/* the play mark plays where it stands */
button.play { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 700; }
.lens__player { position: absolute; inset: 0; z-index: 4; background: #0C0E11; }
.lens__player :is(iframe, video) { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; }

/* a page without a video or a photo to stage */
.lens-head { padding-block: var(--s-7) var(--s-5); display: grid; gap: var(--s-3); }

/* one day: its contact sheet, then its videos */
.lens-day { padding-block: var(--s-6) 0; }
.lens-day .contact { margin-top: var(--s-4); }
.lens-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--s-6); }
.lens-videos .story { display: grid; gap: 10px; align-content: start; }
.lens-videos .frame { position: relative; }
@media (max-width: 900px) { .lens-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lens-videos { grid-template-columns: 1fr; } }

.lens-pages { padding-block: var(--s-6) var(--s-8); }