.witness-page{padding:58px 0 0}
.witness-heading{max-width:520px;margin-bottom:42px}
.witness-heading h1{font-size:58px;margin:0 0 22px}
.witness-heading p{margin:0;font-size:16px;line-height:1.85;color:var(--text)}
.witness-filters{display:flex;align-items:center;flex-wrap:wrap;gap:18px;border-bottom:1px solid var(--line);padding:14px 0 18px;margin-bottom:20px;color:var(--muted);font-size:14px;position:sticky;top:var(--sticky-header-height);z-index:30;background:rgba(7,6,10,.9);backdrop-filter:blur(14px);transition:background .16s ease,box-shadow .16s ease,border-color .16s ease}
.witness-filters.is-stuck{background:rgba(7,6,10,.98);border-bottom-color:rgba(238,228,207,.26);box-shadow:0 18px 34px rgba(0,0,0,.36),0 -1px 0 rgba(238,228,207,.12)}
.witness-filters button{border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer;white-space:nowrap}
.witness-filters button:hover,.witness-filters button.active{color:var(--accent)}
.witness-filters span{opacity:.62}
/* True masonry via CSS multi-column: cards flow top-to-bottom into balanced
   columns and keep each photo's own aspect ratio (height:auto), so portrait and
   landscape shots sit side by side without cropping or gaps — the Tumblr look.
   `break-inside:avoid` keeps a card from splitting across a column boundary. */
.witness-mosaic{column-count:4;column-gap:16px;margin-bottom:26px}
.witness-photo{position:relative;break-inside:avoid;margin:0 0 16px;overflow:hidden;background:#100f0e;border:1px solid rgba(238,228,207,.08);box-shadow:0 5px 16px rgba(0,0,0,.42);transition:box-shadow .18s ease,transform .18s ease}
.witness-photo:hover{box-shadow:0 12px 30px rgba(0,0,0,.55);transform:translateY(-2px)}
.witness-photo[hidden]{display:none}
.witness-photo img{display:block;width:100%;height:auto;filter:brightness(.82)}
/* Dim the masonry while a filter switch is fetching its first page. */
.witness-mosaic[data-loading]{opacity:.35;transition:opacity .15s ease}
/* Copyright toast shown when a visitor right-clicks a photo (gallery/lightbox). */
.witness-copyright-toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,12px);z-index:1000;max-width:min(90vw,440px);padding:11px 18px;background:rgba(7,6,10,.94);color:var(--text);border:1px solid rgba(238,228,207,.2);border-radius:6px;font-size:13px;line-height:1.5;text-align:center;box-shadow:0 14px 34px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.witness-copyright-toast.is-visible{opacity:1;transform:translate(-50%,0)}
/* Tumblr-style caption strip below each photo: title + heart/count row, tags. */
.witness-caption{padding:11px 13px 13px}
.witness-caption-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.witness-caption-title{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.4;color:var(--text);letter-spacing:.01em;overflow-wrap:break-word}
.witness-caption-tags{display:block;margin-top:6px;font-size:12px;line-height:1.65;color:var(--muted);word-break:break-word}
.witness-open:hover ~ .witness-caption .witness-caption-title{color:var(--accent)}
/* Per-card like: outline heart that fills red once this visitor has liked it. */
.witness-like{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;line-height:1.4;cursor:pointer;padding:0}
.witness-heart{font-size:14px;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--muted);transition:color .15s ease,transform .15s ease}
.witness-like.is-liked .witness-heart{color:#e0245e;-webkit-text-stroke-color:#e0245e}
.witness-like:hover .witness-heart{transform:scale(1.16)}
.witness-likecount{font-variant-numeric:tabular-nums}
.witness-like:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* The photo is a button so it opens the lightbox; strip button chrome. */
.witness-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;line-height:0}
.witness-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.witness-open:hover img{filter:brightness(1)}
/* ── Cover badges ── */
.witness-badge{position:absolute;pointer-events:none;z-index:2;color:#f4ecd8}
/* Multi-item count, top-right, with a stacked-frames glyph. */
.witness-badge-count{top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;font-size:12px;line-height:1;font-variant-numeric:tabular-nums;background:rgba(7,6,10,.66);border:1px solid rgba(238,228,207,.22);border-radius:999px;backdrop-filter:blur(6px)}
.witness-badge-count::before{content:"";width:11px;height:11px;border:1.4px solid currentColor;border-radius:2px;box-shadow:2.5px -2.5px 0 -1.4px rgba(7,6,10,.66),3.9px -3.9px 0 -1.4px currentColor}
/* Video play affordance, centred. */
.witness-badge-play{top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(7,6,10,.5);border:1px solid rgba(238,228,207,.3);backdrop-filter:blur(4px)}
.witness-badge-play::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #f4ecd8}
.witness-open:hover .witness-badge-play{background:rgba(7,6,10,.66)}

.witness-empty{margin:0 0 26px;color:var(--muted);font-size:15px}

/* ── Load more ── */
.witness-more{display:flex;justify-content:center;padding:14px 0 40px}
/* `.witness-more` sets display:flex, which beats the UA [hidden] rule, so the
   JS `hidden` toggle needs an explicit override or the button never hides at
   the end of a feed (or under an empty filter). */
.witness-more[hidden]{display:none}
.witness-more button{border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:14px;padding:10px 26px;cursor:pointer;border-radius:2px;transition:color .16s ease,border-color .16s ease}
.witness-more button:hover:not(:disabled){color:var(--accent);border-color:rgba(238,228,207,.32)}
.witness-more button:disabled{opacity:.5;cursor:default}
/* Spinner shown inside the load-more button while a page is fetching. */
.witness-more button.is-loading{color:transparent;position:relative}
.witness-more button.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(238,228,207,.28);border-top-color:var(--accent);border-radius:50%;animation:witness-spin .7s linear infinite}
@keyframes witness-spin{to{transform:rotate(360deg)}}

@media(max-width:980px){
  .witness-page{padding:42px 0 0}
  .witness-heading{margin-bottom:32px}
  .witness-heading h1{font-size:42px}
  .witness-heading p{font-size:14px}
  .witness-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;font-size:13px}
  .witness-filters span{display:none}
  .witness-filters button{text-align:left;white-space:normal}
  .witness-mosaic{column-count:3;column-gap:10px}
  .witness-photo{margin-bottom:10px}
}

@media(max-width:760px){
  .witness-mosaic{column-count:2}
}

@media(max-width:460px){
  .witness-mosaic{column-count:1}
}

/* ── Lightbox (native <dialog>) ── */
body.lightbox-open{overflow:hidden}
.lightbox{border:0;padding:32px;max-width:100vw;max-height:100vh;width:100%;height:100%;background:transparent;color:var(--text)}
.lightbox:not([open]){display:none}
.lightbox[open]{display:flex;align-items:center;justify-content:center;gap:8px}
.lightbox::backdrop{background:rgba(5,4,8,.95);backdrop-filter:blur(6px)}
.lightbox-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}

/* Polaroid frame: a warm yellow card that hugs the photo, with the title and
   like control in a band below it (title left, heart + count right).
   `width:fit-content` sizes the frame to the image; the meta band is width:0 +
   min-width:100% so its long title never widens the frame (a percentage min
   is ignored while the frame measures its content, then fills it at layout) —
   without that trick a nowrap title stretched the yellow out past the photo. */
.lightbox-frame{--frame:#e9c23f;background:var(--frame);padding:12px 12px 0;border-radius:4px;box-shadow:0 26px 80px rgba(0,0,0,.6);width:fit-content;max-width:min(94vw,1200px);display:flex;flex-direction:column}
.lightbox-media{display:flex;min-height:0}
.lightbox-img,.lightbox-video{display:block;max-width:min(90vw,1176px);max-height:74vh;object-fit:contain}
.lightbox-img[hidden],.lightbox-video[hidden]{display:none}
.lightbox-video{width:auto;background:#000}
/* The band under the photo. Dark ink on the yellow, roomier at the bottom. */
.lightbox-meta{box-sizing:border-box;width:0;min-width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 4px 16px;color:#231d07}
.lightbox-titlewrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.lightbox-title{font-size:15px;font-weight:600;line-height:1.32;letter-spacing:.01em;overflow-wrap:break-word}
.lightbox-title[hidden]{display:none}
.lightbox-counter{font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:rgba(35,29,7,.62)}
.lightbox-counter[hidden]{display:none}
/* Like: outline heart that fills red once this visitor has liked (toggle). */
.lightbox-like{flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:#231d07;font:inherit;font-size:15px;cursor:pointer;padding:2px 2px}
.lightbox-heart{font-size:19px;line-height:1;color:transparent;-webkit-text-stroke:1.4px #231d07;transition:color .15s ease,transform .15s ease}
.lightbox-like.is-liked .lightbox-heart{color:#e0245e;-webkit-text-stroke-color:#e0245e}
.lightbox-like:hover .lightbox-heart{transform:scale(1.12)}
.lightbox-likecount{font-variant-numeric:tabular-nums;font-weight:600}
.lightbox-like:focus-visible{outline:2px solid #231d07;outline-offset:3px;border-radius:4px}

.lightbox-close{position:absolute;top:18px;right:22px;width:40px;height:40px;border:0;background:transparent;color:var(--text);font-size:30px;line-height:1;cursor:pointer;border-radius:8px;z-index:2}
.lightbox-close:hover,.lightbox-nav:hover{color:var(--accent)}
.lightbox-nav{flex:0 0 auto;width:52px;height:52px;border:0;background:rgba(255,255,255,.04);color:var(--text);font-size:30px;line-height:1;cursor:pointer;border-radius:50%}
/* Reserve the arrow's space when hidden (visibility, not display) so stepping
   to/from the first/last slide does not shift the centred photo. */
.lightbox-nav.is-hidden{visibility:hidden}
.lightbox-close:focus-visible,.lightbox-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:640px){.lightbox{padding:14px;gap:4px}.lightbox-nav{width:40px;height:40px;font-size:24px}.lightbox-img,.lightbox-video{max-height:66vh}.lightbox-title{font-size:14px}}