.px-open{background:none; border:0; padding:0; margin:0; cursor:pointer;
         font:inherit; letter-spacing:inherit; text-transform:inherit;
         color:inherit; text-decoration:underline;
         text-underline-offset:3px}
.px-open:hover,.px-open:focus-visible{color:var(--p050)}

dialog.px{width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px);
          padding:0; border:1px solid var(--p600); border-radius:4px;
          background:var(--p800); color:var(--p050); overflow:auto}
dialog.px::backdrop{background:rgba(3,10,13,.72)}
.px-in{padding:var(--s3)}
.px-head{display:flex; align-items:baseline; justify-content:space-between;
         gap:var(--s2); margin-bottom:var(--s2)}
.px-head h2{margin:0; font:500 20px/1.2 var(--sans); color:var(--p050)}
.px-x{background:none; border:1px solid var(--p600); border-radius:2px;
      color:var(--p200); font:400 13px/1 var(--mono); padding:6px 10px;
      cursor:pointer}
.px-x:hover,.px-x:focus-visible{color:var(--p050); border-color:var(--p200)}
.px p,.px li{font:400 15px/1.5 var(--sans); color:var(--p200); margin:0}
.px-lead{color:var(--p050) !important; margin-bottom:var(--s2) !important}
.px-row{padding:var(--s2) 0; border-top:1px solid var(--p600)}
.px-row h3{margin:0 0 4px; font:500 15px/1.4 var(--sans); color:var(--p050)}
.px-row p + p{margin-top:var(--s1)}
.px ul{list-style:none; padding:0; margin:0}
.px-cols li{display:flex; gap:var(--s1); align-items:flex-start}
.px-cols li + li,.px-hts li + li{margin-top:var(--s1)}
.px b{color:var(--p050); font-weight:500; margin-right:4px}
.px-sw{flex:none; width:16px; height:16px; margin-top:3px;
       border-radius:2px; box-shadow:0 0 0 1px rgba(243,244,241,.25)}
.px-foot{padding-top:var(--s2); border-top:1px solid var(--p600)}
.px-foot a{color:var(--p050); text-underline-offset:3px; margin-left:4px}

@media (max-width:560px){
  .px-in{padding:var(--s2)}
}



.pics p{max-width:none}
.pics .intro .lead{max-width:none}
.pics .eyebrow{display:block; margin-bottom:var(--s2)}
.pics .cols2{display:grid; grid-template-columns:repeat(2, 1fr);
   gap:var(--s4)}
.pics .cols2 p{margin:0}
.pics .readgrid{list-style:none; margin:0; padding:0; display:grid;
   grid-template-columns:repeat(3, 1fr); gap:var(--s3) var(--s4)}
.pics .readgrid li{margin:0; font:400 16px/1.5 var(--sans);
   color:var(--p200)}
.pics .readgrid b{display:block; margin-bottom:4px}
.pics .places{display:grid; grid-template-columns:repeat(3, 1fr);
   gap:var(--s2) var(--s4); margin:0 0 var(--s3)}
.pics .places b{display:block; font:500 15px/1.5 var(--sans);
   color:var(--p050)}
.pics .places span{font:400 14px/1.5 var(--mono); color:var(--p200)}
.pics .shapes{display:grid; grid-template-columns:repeat(4, 1fr);
   gap:var(--s3); margin:0 0 var(--s3)}
.pics figure{margin:0}
.pics figure img{display:block; width:100%; aspect-ratio:16/9;
   object-fit:cover; border-radius:2px; background:var(--p800)}
.pics figcaption{margin-top:var(--s1); font:400 14px/1.4 var(--sans);
   color:var(--p200)}
.pics figcaption b{display:block}
@media (max-width:820px){
  .pics .cols2,.pics .readgrid,.pics .places{grid-template-columns:1fr;
     gap:var(--s2)}
  .pics .shapes{grid-template-columns:repeat(2, 1fr); gap:var(--s2)}
}