/* PG Index Band — scoped to .pg-index-band. Ported from the DRobb About index. */

.pg-index-band{ background:var(--pg-bone); padding:140px 56px 100px; border-top:1px solid var(--pg-ink-hair); }
.pg-index-band .container{ max-width:1100px; margin:0 auto; }
.pg-index-band .head{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--pg-ink-hair); padding-bottom:18px; margin-bottom:56px; }
.pg-index-band .head h2{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-size:clamp(32px,3.6vw,48px); line-height:1; letter-spacing:-.014em; text-transform:lowercase; color:var(--pg-ink); }
.pg-index-band .head h2 em{ font-style:italic; color:var(--pg-terracotta); }
.pg-index-band .head .meta{ font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.28em; font-size:10px; color:var(--pg-ink-soft); }
.pg-index-band ul{ list-style:none; margin:0; padding:0; }
.pg-index-band li{ display:grid; grid-template-columns:64px 1fr auto auto; align-items:baseline; gap:24px; padding:22px 0; border-bottom:1px solid var(--pg-ink-hair); transition:padding-left 600ms var(--pg-ease); }
.pg-index-band li:hover{ padding-left:12px; }
.pg-index-band li .num{ font-family:var(--pg-font-display); font-weight:300; font-style:italic; font-size:22px; color:var(--pg-terracotta); }
.pg-index-band li .title{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 72; font-size:clamp(18px,1.8vw,22px); color:var(--pg-ink); line-height:1.2; }
.pg-index-band li .title em{ font-style:italic; color:var(--pg-terracotta); }
.pg-index-band li .meta-mini{ font-family:var(--pg-font-italic); font-style:italic; font-size:14px; color:var(--pg-ink-soft); }
.pg-index-band li .pg{ font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.24em; font-size:10px; color:var(--pg-ink-soft); }

@media (max-width:768px){
  .pg-index-band{ padding:96px 24px; }
  .pg-index-band li{ grid-template-columns:40px 1fr; gap:6px 16px; }
  .pg-index-band li .meta-mini, .pg-index-band li .pg{ grid-column:2; }
}