/* Article images: galleries, standalone photos, document links and the lightbox (see lightbox.js).
   Markup comes from the importer: <div class="gallery" data-count="N"><figure><a href=FULL><img></a><figcaption></figure>…</div>
   The layout counts tiles with CSS quantity queries, so it does not depend on data-count. */
.prose .gallery{--gap:8px;--tile:10px;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);margin:28px 0;padding:0;position:relative;counter-reset:more}
.prose .gallery>figure{grid-column:span 2;position:relative;aspect-ratio:4/3;margin:0;overflow:hidden;border-radius:var(--tile);background:var(--sky-2)}
.prose .gallery>figure>a{position:absolute;inset:0;display:block;cursor:zoom-in;border-radius:inherit}
.prose .gallery img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .3s}
.prose .gallery>figure>a:hover img{transform:scale(1.045);filter:brightness(1.05)}
.prose .gallery>figure>a:focus-visible{outline:3px solid #c8a24a;outline-offset:-3px;z-index:1}
.prose .gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;color:#fff;font-size:13px;line-height:1.35;pointer-events:none;
  background:linear-gradient(transparent,rgba(6,22,40,.78));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 1 image: full width, uncropped */
.prose .gallery>figure:only-child{grid-column:1/-1;aspect-ratio:auto}
.prose .gallery>figure:only-child>a{position:static}
.prose .gallery>figure:only-child img{height:auto;max-height:80vh;object-fit:contain}
/* 2 and 4 images: two per row */
.prose .gallery>figure:first-child:nth-last-child(2),.prose .gallery>figure:first-child:nth-last-child(2)~figure,
.prose .gallery>figure:first-child:nth-last-child(4),.prose .gallery>figure:first-child:nth-last-child(4)~figure{grid-column:span 3}
/* 3 images: one large + two */
.prose .gallery>figure:first-child:nth-last-child(3){grid-column:span 4;grid-row:span 2;aspect-ratio:auto}
/* 5 and 8: the first row has two wide tiles; 7: two rows of two, then three */
.prose .gallery>figure:first-child:nth-last-child(5),.prose .gallery>figure:first-child:nth-last-child(5)+figure,
.prose .gallery>figure:first-child:nth-last-child(8),.prose .gallery>figure:first-child:nth-last-child(8)+figure,
.prose .gallery>figure:first-child:nth-last-child(7),.prose .gallery>figure:first-child:nth-last-child(7)~figure:nth-child(-n+4){grid-column:span 3;aspect-ratio:3/2}

/* more than 9: show 9, the rest stay reachable in the lightbox; "+N" over the 9th tile */
.prose .gallery>figure:nth-child(n+10){position:absolute;width:1px;height:1px;visibility:hidden;counter-increment:more}
.prose .gallery>figure:nth-child(9):not(:last-child){grid-area:3/5/4/7}
.prose .gallery:has(>figure:nth-child(10))::after{content:"+" counter(more);grid-area:3/5/4/7;z-index:2;display:grid;place-items:center;border-radius:var(--tile);
  background:rgba(11,42,74,.66);color:#fff;font:700 clamp(24px,3.2vw,36px)/1 system-ui,sans-serif;letter-spacing:.5px;pointer-events:none;
  text-shadow:0 1px 8px rgba(0,0,0,.35)}

@media (max-width:600px){
  .prose .gallery{--gap:6px;--tile:8px;margin:20px 0}
  .prose .gallery>figure{grid-column:span 3!important;grid-row:auto!important;aspect-ratio:1/1!important}
  .prose .gallery>figure:first-child:nth-last-child(3){grid-row:span 2!important;aspect-ratio:auto!important}
  .prose .gallery>figure:first-child:nth-last-child(3)~figure{aspect-ratio:4/3!important}
  .prose .gallery>figure:only-child,.prose .gallery>figure:first-child:nth-last-child(odd):not(:nth-last-child(3)):not(:nth-last-child(n+7)){grid-column:1/-1!important;aspect-ratio:16/10!important}
  .prose .gallery>figure:only-child{aspect-ratio:auto!important}
  /* phones show 6 */
  .prose .gallery>figure:nth-child(n+7){position:absolute;width:1px;height:1px;visibility:hidden;counter-increment:more}
  .prose .gallery:has(>figure:nth-child(10))::after{content:none}
  .prose .gallery>figure:nth-child(6):not(:last-child){grid-area:3/4/4/7!important}
  .prose .gallery:has(>figure:nth-child(7))::after{content:"+" counter(more);grid-area:3/4/4/7;z-index:2;display:grid;place-items:center;border-radius:var(--tile);
    background:rgba(11,42,74,.66);color:#fff;font:700 26px/1 system-ui,sans-serif;pointer-events:none}
  .prose .gallery figcaption{font-size:12px;padding:16px 8px 6px}
}
.prose .gallery-caption{margin:-16px 0 26px;text-align:center;font-size:14px;color:var(--muted)}
.prose .gallery-caption::before{content:"";display:inline-block;width:18px;height:2px;background:#c8a24a;vertical-align:middle;margin-right:8px}

/* a single photo */
.prose .photo{margin:28px auto;text-align:center;clear:both}
.prose .photo>a{display:inline-block;max-width:100%;border-radius:10px;cursor:zoom-in;line-height:0;vertical-align:top}
.prose .photo img{display:block;width:auto;max-width:100%;height:auto;max-height:min(72vh,640px);border-radius:10px;
  box-shadow:0 1px 2px rgba(11,42,74,.08),0 6px 20px rgba(11,42,74,.08);transition:box-shadow .25s,transform .25s}
.prose .photo>a:hover img{box-shadow:0 2px 4px rgba(11,42,74,.1),0 12px 30px rgba(11,42,74,.16);transform:translateY(-1px)}
.prose .photo figcaption,.prose figure:not(.gallery figure)>figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted);text-align:center}
.prose .photo.alignleft,.prose .photo.alignright{float:left;clear:none;width:min(40%,320px);margin:4px 24px 12px 0}
.prose .photo.alignright{float:right;margin:4px 0 12px 24px}
/* --w/--h come from the img's width/height (web.photoSize): size the box before the file loads */
.prose .photo img[style*="--w"]{width:min(calc(var(--w) * 1px),calc(min(72vh,640px) * var(--w) / var(--h)));aspect-ratio:var(--w)/var(--h)}
.prose .photo.alignleft>a,.prose .photo.alignright>a{display:block}
.prose .photo.alignleft img,.prose .photo.alignright img{width:100%}
@media (max-width:600px){.prose .photo.alignleft,.prose .photo.alignright{float:none;width:auto;margin:20px auto}}

/* document link left by a WordPress file block */
.prose .file{margin:8px 0}
.prose .file a{display:inline-flex;gap:10px;align-items:flex-start;font-weight:600;text-decoration:none;line-height:1.4}
.prose .file a::before{content:"";flex:none;width:14px;height:18px;margin-top:2px;border-radius:2px;
  background:linear-gradient(225deg,transparent 4px,#c8a24a 4px 6px,transparent 6px),linear-gradient(currentColor,currentColor) 3px 7px/8px 2px no-repeat,linear-gradient(currentColor,currentColor) 3px 11px/8px 2px no-repeat;border:2px solid currentColor;opacity:.8}
.prose .file a:hover{text-decoration:underline}
/* download icon added next to previewable files (web.fileLinks); the title link opens the viewer */
.prose .file a.file-dl{display:inline-grid;place-items:center;vertical-align:-10px;width:34px;height:34px;margin:-6px 0 -6px 6px;border-radius:50%;color:var(--muted,#566377)}
.prose .file a.file-dl::before{content:none}
.prose .file a.file-dl:hover{background:var(--sky,#eaf1f8);color:var(--head,#0b2a4a);text-decoration:none}
.prose .file a.file-dl .i{width:18px;height:18px}
.prose .file:has(>.file-dl){display:flex;align-items:flex-start}.prose .file>a.file-dl{flex:none;margin:-5px 0 -5px 6px} /* a wrapped title keeps the icon beside it */
@media (max-width:640px){.prose .file>a.file-dl{width:44px;height:44px;margin:-10px -6px -10px 0}} /* phone tap target */

/* lightbox */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto 1fr auto;background:#06121f;color:#fff;opacity:0;transition:opacity .2s;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;touch-action:pan-y pinch-zoom}
.lb[hidden]{display:none}.lb.on{opacity:1}
.lb-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 0 20px;min-height:52px}
.lb-count{font-size:15px;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:#d7dee8}
.lb button{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .15s}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb button:focus-visible{outline:3px solid #c8a24a;outline-offset:2px}
.lb button[hidden]{display:none}
.lb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:8px 72px}
.lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.5);transition:opacity .2s}
.lb.loading .lb-img{opacity:.25}
.lb.loading .lb-stage::after{content:"";position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px;border:3px solid rgba(255,255,255,.25);border-top-color:#c8a24a;border-radius:50%;animation:lbspin .8s linear infinite}
@keyframes lbspin{to{transform:rotate(360deg)}}
.lb-prev,.lb-next{position:absolute;top:50%;margin-top:-24px;z-index:1}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-cap{margin:0 auto;padding:12px 20px 18px;max-width:900px;text-align:center;font-size:15px;line-height:1.45;color:#e9eef4;min-height:1.45em}
/* video (YouTube) in the same dialog: 16:9, as large as the window allows */
.lb-v .lb-img{display:none}
.lb-video{display:block;width:min(100%,calc((100vh - 190px)*16/9));aspect-ratio:16/9;height:auto;border:0;border-radius:6px;background:#000;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lb-video:focus-visible{outline:3px solid #c8a24a;outline-offset:3px}
.lb-v .lb-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 18px}
.lb-vt{font-weight:600;font-size:16px}
.lb-yt{color:#e8c56f;font-size:14px;text-decoration:none;white-space:nowrap}.lb-yt:hover{text-decoration:underline}
.lb-yt:focus-visible{outline:3px solid #c8a24a;outline-offset:2px;border-radius:2px}
@media (max-width:600px){
  .lb-stage{padding:4px 0}
  .lb .lb-prev,.lb .lb-next{width:42px;height:42px;margin-top:-21px;background:rgba(6,18,31,.6);box-shadow:0 0 0 1px rgba(255,255,255,.25)}.lb .lb-prev{left:6px}.lb .lb-next{right:6px}
  .lb-cap{padding:12px 16px 20px;font-size:14px}
  .lb-img{border-radius:0}
  .lb-video{width:100%;max-height:calc(100vh - 170px);border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .prose .gallery img,.prose .photo img,.lb,.lb-img{transition:none}
  .prose .gallery>figure>a:hover img,.prose .photo>a:hover img{transform:none}
  .lb.loading .lb-stage::after{animation-duration:2.4s}
}
.prose:has(>.photo.alignleft,>.photo.alignright){display:flow-root}
.prose .photo.alignleft img,.prose .photo.alignright img{max-height:none}
.prose hr.clear{clear:both}