/* Citizens of Cabot — photo album pages */
.album .album__intro{max-width:760px;margin:0 auto}
.album__key ul{list-style:none;columns:2;column-gap:28px;margin:4px 0 14px;font-size:16.5px}
.album__key li{padding:2px 0;break-inside:avoid}
.album__key li strong{display:inline-block;width:1.3em;color:var(--navy)}
.article .album__key h4{margin-top:0}
.album__key p{font-size:15.5px !important;margin-bottom:0 !important}
.album__other{font-style:italic}

.album__index{background:var(--cream);border:1px solid var(--parchment-deep);padding:0;margin:8px 0 10px}
.album__index summary{cursor:pointer;padding:14px 20px;font-size:17px;color:var(--navy);list-style:none}
.album__index summary::-webkit-details-marker{display:none}
.album__index summary:before{content:"\25B8";display:inline-block;width:1.1em;transition:transform .15s}
.album__index[open] summary:before{transform:rotate(90deg)}
.album__index ul{list-style:none;columns:2 320px;column-gap:34px;padding:4px 22px 18px;font-size:15.5px;line-height:1.45}
.album__index li{break-inside:avoid;padding:3px 0 3px 1.1em;text-indent:-1.1em;color:var(--ink-soft)}
.album__ipages{white-space:nowrap;color:var(--ink)}
.album__ipages a{text-decoration:none;border-bottom:1px solid rgba(140,59,43,.35)}
.album__ipages a:hover{border-bottom-color:var(--rust)}
.album__nopage{font-style:italic;font-size:14px}

.album__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:26px 20px;margin:18px 0 10px}
.article .album__page{margin:0;scroll-margin-top:24px}
.album__page a{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;background:#fff;
  border:1px solid var(--parchment-deep);box-shadow:2px 3px 0 rgba(138,109,59,.14);padding:6px;transition:transform .15s,box-shadow .15s}
.album__page a:hover,.album__page a:focus-visible{transform:translateY(-2px);box-shadow:3px 6px 10px rgba(60,40,10,.18)}
.album__page a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.article .album__page img{width:auto;height:auto;max-width:100%;max-height:100%;border:0;border-radius:0}
.article .album__page figcaption{text-align:left;font-style:normal;margin-top:8px;line-height:1.35}
.album__num{display:block;font-variant:small-caps;letter-spacing:.04em;color:var(--ink);font-size:15px}
.album__names{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;color:var(--ink-soft)}
.album__page.is-target a{outline:3px solid var(--rust);outline-offset:3px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:1000;background:#15110b;display:none;flex-direction:column}
.lb.is-open{display:flex}
.lb__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;color:#efe6d0;font-size:15px}
.lb__label{font-variant:small-caps;letter-spacing:.05em;font-size:17px;white-space:nowrap}
.lb__cap{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d8ccb2;font-style:italic}
.lb button{background:none;border:1px solid rgba(239,230,208,.35);color:#efe6d0;font:inherit;cursor:pointer;
  border-radius:3px;min-width:42px;height:40px;padding:0 10px;font-size:18px}
.lb button:hover,.lb button:focus-visible{background:rgba(239,230,208,.12);outline:none;border-color:#efe6d0}
.lb__stage{flex:1;min-height:0;position:relative;overflow:auto;display:flex;align-items:flex-start;justify-content:center;
  padding:0 58px 16px;touch-action:pan-y pinch-zoom}
.lb__img{display:block;margin:auto;max-width:100%;max-height:100%;background:#fff;box-shadow:0 4px 30px rgba(0,0,0,.5);cursor:zoom-in}
.lb.is-zoom .lb__stage{align-items:flex-start;justify-content:flex-start}
.lb.is-zoom .lb__img{max-width:none;max-height:none;width:auto;cursor:zoom-out}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px !important;font-size:26px !important;
  background:rgba(18,14,8,.55) !important}
.lb__prev{left:6px}.lb__next{right:6px}
.lb.is-zoom .lb__nav{position:fixed}
@media(max-width:640px){
  .album__grid{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .album__key ul{columns:1}
  .lb__stage{padding:0 4px 70px}
  .lb__nav{top:auto;bottom:10px;transform:none;position:fixed}
  .lb__cap{display:none}
}
