/* ==========================================================================
   The Ideas School gallery. The deck as a page, slide by slide.
   Values from reference/build-source/gallery.html, scoped under .gp.
   ========================================================================== */

.gp { --hair: #DCD6C2 }
.gp section { padding: 188px 120px 110px 230px; position: relative }   /* the render's 170 + 18 */
.gp .n { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
         text-transform: uppercase; color: var(--mut) }
.gp h1 { font-size: 50px; font-weight: 800; letter-spacing: -1.8px; line-height: 1.06; margin: 20px 0 0 0; max-width: 1000px }
.gp .lede { font-size: 21px; line-height: 1.5; max-width: 900px; margin-top: 24px }
.gp .back { display: inline-block; font-size: 18px; font-weight: 800; letter-spacing: -.3px;
            border-bottom: 3px solid var(--yellow); padding-bottom: 4px; text-decoration: none; color: inherit }
.gp .slide { margin-top: 64px; max-width: 1250px }
.gp .slide img { width: 100%; height: auto; display: block; border-radius: 3px; border: 1px solid var(--hair) }
.gp .slide .cap { font-size: 18px; line-height: 1.5; color: #2C2E30; margin-top: 18px; max-width: 900px;
                  padding-left: 22px; border-left: 3px solid var(--yellow) }
.gp .slide .num { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--mut); margin-bottom: 14px }
.gp .getfile { margin-top: 96px; max-width: 1250px; padding-top: 34px; border-top: 1px solid var(--hair) }
.gp .getfile .t { font-size: 27px; font-weight: 800; letter-spacing: -.8px }
.gp .getfile .d { font-size: 18px; line-height: 1.5; color: var(--mut); margin-top: 12px; max-width: 760px }
.gp .getfile a { display: inline-block; margin-top: 22px; font-family: var(--mono); font-size: 14px;
                 letter-spacing: .06em; color: var(--ink); text-decoration: none;
                 border-bottom: 2px solid var(--yellow); padding-bottom: 3px }

@media (max-width: 1100px) {
  .gp section { padding-left: 96px; padding-right: 96px }
}
/* one slide per screen on a phone, as the render's own note says */
@media (max-width: 900px) {
  .gp section { padding: 52px 22px 72px 22px }
  .gp h1 { font-size: 30px; letter-spacing: -.9px; line-height: 1.1 }
  .gp h1 br { display: none }
  .gp .lede { font-size: 17px }
  .gp .slide { margin-top: 44px }
  .gp .slide .cap { font-size: 16px; padding-left: 16px }
  .gp .getfile { margin-top: 64px }
  .gp .getfile .t { font-size: 22px }
  .gp .getfile .d { font-size: 16px }
}

/* ── the click through ──────────────────────────────────────────────────────
   One sideways track, a slide to a screen, snapping. Swipes on a phone and
   scrolls sideways with no script; gallery.js adds the controls. */
.gp .gl { margin-top: 64px; max-width: 1250px }
.gp .gl-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
                overscroll-behavior-x: contain;
                scrollbar-width: none; outline: none }
.gp .gl-track::-webkit-scrollbar { display: none }
.gp .gl-track.gl-moving { scroll-snap-type: none }
.gp .gl .slide { flex: 0 0 100%; margin-top: 0; scroll-snap-align: start; scroll-snap-stop: always }
.gp .gl-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 20px;
               margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hair) }
.gp .gl-ctrl[hidden] { display: none }
.gp .gl-ctrl button { font: inherit; font-size: 18px; font-weight: 800; letter-spacing: -.3px;
                      color: var(--ink); background: none; border: 0; padding: 0 0 4px 0;
                      border-bottom: 3px solid var(--yellow); cursor: pointer }
.gp .gl-ctrl button:disabled { border-bottom-color: transparent; color: var(--mut); cursor: default; opacity: .5 }
.gp .gl-count { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; color: var(--mut) }
/* with the count in the controls, the per slide number is only for the no
   script version */
.gp .gl-on .slide .num { display: none }

@media (max-width: 900px) {
  .gp .gl { margin-top: 40px }
  .gp .gl-ctrl button { font-size: 16px }
  .gp .gl-count { font-size: 12px }
}
.gp .lede .gl-book { color: inherit; text-decoration: none; border-bottom: 3px solid var(--yellow); padding-bottom: 2px }