/* Pinterest-inspired masonry magazine — display only visual covers. */
.reading-collection{padding-bottom:80px}
.pin-board{display:block;columns:5;column-gap:15px;max-width:1450px;margin:auto}
.pin-card{display:inline-block;vertical-align:top;width:100%;break-inside:avoid;margin:0 0 15px!important;padding:0!important;border:0!important;line-height:0;background:transparent;contain:layout style}
.pin-link{display:block;position:relative;border-radius:19px;overflow:hidden;isolation:isolate;text-decoration:none;background:#eee9e2;aspect-ratio:var(--pin-ratio);box-shadow:none;outline-offset:4px;transition:transform .22s ease,box-shadow .22s ease;line-height:1.2}
.pin-link img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.pin-link .author-poster{width:100%;height:100%;aspect-ratio:auto;border-radius:0;padding:clamp(15px,2vw,28px)}
.pin-link .author-poster b{font-size:clamp(17px,1.6vw,33px);line-height:1.06}
.pin-link .author-poster small{font-size:clamp(9px,.8vw,11px)}
.pin-link .author-poster span{font-size:10px}
.pin-hover{position:absolute;z-index:2;inset:auto 0 0;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82));padding:50px 15px 16px;font-size:14px;font-weight:700;line-height:1.35;opacity:0;transform:translateY(5px);transition:opacity .18s,transform .18s;pointer-events:none}
.pin-link:hover,.pin-link:focus-visible{transform:translateY(-2px);box-shadow:0 9px 24px rgba(30,20,15,.13)}
.pin-link:hover .pin-hover,.pin-link:focus-visible .pin-hover{opacity:1;transform:none}
.pin-card:nth-child(7n+2) .pin-link{border-radius:28px}
.pin-card:nth-child(9n+5) .pin-link{border-radius:14px}
@media(max-width:1200px){.pin-board{columns:4;column-gap:13px}.pin-card{margin-bottom:13px!important}.pin-link .author-poster b{font-size:clamp(18px,2vw,30px)}}
@media(max-width:850px){.pin-board{columns:3;column-gap:12px}.pin-card{margin-bottom:12px!important}.pin-link{border-radius:16px}.pin-link .author-poster{padding:16px}.pin-link .author-poster b{font-size:clamp(16px,2.8vw,25px)}}
@media(max-width:580px){.reading-collection{padding-left:10px;padding-right:10px}.pin-board{columns:2;column-gap:10px}.pin-card{margin-bottom:10px!important}.pin-link{border-radius:15px}.pin-link .author-poster{padding:13px}.pin-link .author-poster b{font-size:clamp(15px,4vw,24px)}.pin-link .author-poster span{font-size:9px}.pin-link .author-poster small{font-size:8px}.pin-hover{display:none}}
@media(max-width:340px){.pin-board{column-gap:7px}.pin-card{margin-bottom:7px!important}.pin-link .author-poster b{font-size:14px}}
@media(hover:none){.pin-link:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.pin-link,.pin-hover{transition:none}}


/* Editorial pinboard: restrained reflected-light accents, 2026-10-11 */
.pin-board .pin-link{position:relative;isolation:isolate;transition:transform .28s ease,box-shadow .28s ease,filter .28s ease}
.pin-board .pin-link::before{content:"";position:absolute;z-index:5;inset:-35%;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.05) 43%,rgba(255,255,255,.38) 49%,rgba(255,255,255,.07) 55%,transparent 64%);transform:translateX(-155%) skewX(-12deg);opacity:0;pointer-events:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .pin-board .pin-card:nth-child(7n+2) .pin-link::before{animation:pinLightSweep 17s ease-in-out 1.4s infinite}
  .pin-board .pin-card:nth-child(11n+5) .pin-link::before{animation:pinLightSweep 21s ease-in-out 7s infinite}
  .pin-board .pin-card:nth-child(13n+7) .pin-link::before{animation:pinLightSweep 25s ease-in-out 12s infinite}
  .pin-board .pin-link:hover,.pin-board .pin-link:focus-visible{transform:translateY(-4px) scale(1.012);filter:saturate(1.065);box-shadow:0 17px 38px rgba(20,20,25,.20)}
  .pin-board .pin-link:hover::before,.pin-board .pin-link:focus-visible::before{animation:pinHoverSweep .85s ease-out both!important}
}
@keyframes pinLightSweep{0%,73%{transform:translateX(-155%) skewX(-12deg);opacity:0}75%{opacity:.9}84%{transform:translateX(155%) skewX(-12deg);opacity:.65}87%,100%{transform:translateX(155%) skewX(-12deg);opacity:0}}
@keyframes pinHoverSweep{0%{transform:translateX(-155%) skewX(-12deg);opacity:0}15%{opacity:.92}100%{transform:translateX(155%) skewX(-12deg);opacity:0}}
@media(hover:none){.pin-board .pin-link::before{display:none}.pin-board .pin-link{filter:none}}
@media(prefers-reduced-motion:reduce){.pin-board .pin-link,.pin-board .pin-link::before{animation:none!important;transition:none!important;transform:none!important}.pin-board .pin-link::before{display:none}}