.spotlight-section { padding: 90px 0; background: var(--bm-surface-cool, #eef5f4); }
.spotlight-section[hidden] { display: none; }
.spotlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: start; }
.spotlight-card { background: var(--bg-1,#fcfbfa); border: 1px solid var(--border,#e8e5e0); border-radius: 22px; overflow: hidden; min-width: 0; }
.spotlight-card-body { padding: 24px; }
.spotlight-meta { font: 600 11px/1.7 var(--font-body, sans-serif); letter-spacing: .09em; text-transform: uppercase; color: #536b68; }
.spotlight-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.25; margin: 12px 0; overflow-wrap: anywhere; }
.spotlight-caption { white-space: pre-wrap; line-height: 1.7; overflow-wrap: anywhere; font-size: 15px; }
.spotlight-credit { font-size: 12px; line-height: 1.6; color: #666963; margin-top: 12px; }
.spotlight-cover { display: block; position: relative; width: 100%; padding: 14px; border: 0; background: #f3efea; cursor: pointer; }
.spotlight-cover img { display: block; width: 100%; height: 230px; object-fit: contain; }
.spotlight-photo-count { position: absolute; right: 22px; bottom: 22px; background: #fcfbfa; color: #333; padding: 5px 10px; border-radius: 30px; font: 600 12px var(--font-body,sans-serif); }
.spotlight-mark { font: 72px/1.2 var(--font-serif,serif); color: #de739e; padding: 20px 24px 0; }
.spotlight-read { display: inline-block; margin-top: 16px; color: #286e69; font-weight: 700; text-underline-offset: 4px; overflow-wrap: anywhere; }
.spotlight-featured { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; border-color: #dfb6c7; }
.spotlight-featured .spotlight-cover img { height: 310px; }
.spotlight-featured .spotlight-mark { display:flex; align-items:center; justify-content:center; background:#f9e8ef; }
.spotlight-footer { text-align: center; margin-top: 32px; }
.spotlight-footer button[hidden] { display: none; }
.spotlight-footer a, .spotlight-footer button, .spotlight-filters button { display: inline-block; padding: 12px 22px; border: 1px solid #b6c9c7; border-radius: 40px; color: #245f5b; background: #fcfbfa; font: 600 14px var(--font-body,sans-serif); cursor: pointer; }
.spotlight-filters { display:flex; gap: 8px; flex-wrap:wrap; margin: 0 0 30px; }
.spotlight-filters button[aria-pressed="true"] { background: #286e69; color:white; }
.spotlight-empty { color: #666963; padding: 24px 0; }
.spotlight-page-nav { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; }
.spotlight-page-nav a { color:inherit; }
.spotlight-page-nav .spotlight-wordmark { font-weight: 700; font-size: 18px; }
.spotlight-album { border:0; border-radius:20px; width: min(900px,calc(100% - 24px)); max-height:90dvh; padding:24px; background:#fcfbfa; color:#1d1d1c; }
.spotlight-album::backdrop { background:rgba(15,20,19,.82); }
.spotlight-album-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.spotlight-album-title { min-width:0; }
.spotlight-album-head h2 { font-family: var(--font-display); font-weight:400; font-size:30px; margin:0; }
.spotlight-album-link { margin-top:10px; }
/* #524: a long title squeezed the button until "Close" and "×" stacked in
   a tall pill. The title column takes the squeeze; the button never does. */
.spotlight-album-head button { position:sticky; top:0; flex:0 0 auto; white-space:nowrap; padding:12px 18px; border:1px solid #bbb; background:#fff; border-radius:30px; cursor:pointer; }
.spotlight-album figure { margin:0 0 28px; }
.spotlight-album img { display:block; max-width:100%; max-height:75dvh; margin:auto; object-fit:contain; }
.spotlight-album figcaption { text-align:center; font-size:14px; padding-top:12px; }
.spotlight-card button:focus-visible, .spotlight-filters button:focus-visible, .spotlight-album button:focus-visible { outline:3px solid #286e69; outline-offset:3px; }
@media(max-width:1000px) { .spotlight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .spotlight-album-head h2 { font-size:24px; } }
@media(max-width:600px) { .spotlight-section { padding:54px 0; } .spotlight-grid { grid-template-columns:1fr; } .spotlight-featured { grid-column:auto; display:block; } .spotlight-featured .spotlight-cover img { height:230px; } .spotlight-card-body { padding:20px; } }