/* Photo pages, in the 2008 design language: white blocks on a blue ground.
 * Every selector maps 1:1 to a class the builder emits — the HTML did not change
 * to get this look. See style.css for what is recovered and what is chosen.
 */

body.photos { margin: 0; }

/* ---- head / foot: blocks like everything else ---- */

.site-head {
  background: var(--block); box-shadow: var(--shadow); border-bottom: 0;
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 14px 20px; margin: 0 auto 20px; max-width: var(--w);
}
.site-name { font-family: var(--head); font-weight: 700; font-size: 18px;
             text-decoration: none; color: var(--ink); }
.site-nav { display: flex; gap: 18px; margin-left: auto; }
.site-nav a { text-decoration: none; text-transform: lowercase; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current] { color: var(--ink); font-weight: 600; }

.site-foot {
  background: var(--block); box-shadow: var(--shadow); border-top: 0;
  max-width: var(--w); margin: 24px auto 0; padding: 12px 20px;
  font-family: var(--mono); font-size: 11px; color: var(--ink3);
}

/* ---- feed ---- */

.feed, .photo-index, .search-page, .map-page, .post-single {
  max-width: var(--w); margin: 0 auto; padding: 0;
}

.feed-head { background: var(--block); box-shadow: var(--shadow);
             padding: 26px 30px 22px; margin-bottom: 20px; }
.feed-title { font-family: var(--head); font-weight: 700; font-size: 30px;
              margin: 0 0 4px; letter-spacing: -.01em; }
.feed-meta { margin: 0 0 16px; color: var(--ink2); font-size: 14px; }
.feed-count { font-weight: 600; color: var(--ink); }

.feed-controls { display: flex; gap: 28px; flex-wrap: wrap;
                 padding-top: 14px; border-top: 1px solid var(--rule); }
.control { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.control-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--ink3); }
.sort-current { font-weight: 600; font-size: 14px; }
.sort-link, .filter-link { font-size: 14px; }
.sort-btn, .filter-btn { cursor: pointer; background: none; border: 1px solid var(--rule2);
                         padding: 2px 9px; font: inherit; font-size: 13px; color: var(--link); }
.sort-btn:hover, .filter-btn:hover { border-color: var(--ink); }
.sort-btn[aria-pressed="true"], .filter-btn[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500;
}
.control--filter { gap: .35rem; }

.fb-tab { text-decoration: none; font-size: 14px; padding: 3px 12px; border: 1px solid var(--rule2); color: var(--link); }
.fb-tab:hover { border-color: var(--ink); }
.fb-tab.sel { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500; }

.pager { background: var(--block); box-shadow: var(--shadow);
         display: flex; gap: 20px; align-items: baseline; padding: 10px 20px;
         margin-bottom: 20px; font-size: 14px; }
.pager-status { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); }
.pager-next { margin-left: auto; }
.pager--bottom { margin: 20px 0 0; }

/* ---- posts: each one its own white block ---- */

.post-list { display: flex; flex-direction: column; gap: 20px; }
.post[hidden] { display: none; }
.post { background: var(--block); box-shadow: var(--shadow); padding: 20px 24px 18px; }

.post-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: 12px; }
.post-account { font-weight: 600; text-decoration: none; }
.post-permalink { text-decoration: none; }
.post-permalink:hover .post-date { color: var(--accent); text-decoration: underline; }
.post-date { color: var(--ink2); font-size: 14px; }
.post-place { font-family: var(--mono); font-size: 11px; color: var(--ink3); text-decoration: none; }
.post-place:hover { color: var(--accent); }
.post-crosspost, .post-origin { font-family: var(--mono); font-size: 10.5px; color: var(--ink3); }

.post-gallery { display: grid; gap: 4px; }
.post-gallery--single { grid-template-columns: 1fr; }
.post-gallery--multi { grid-template-columns: repeat(2, 1fr); }
.post-media { width: 100%; height: auto; display: block; background: #f0f0ee; }
.post-media-link { display: block; }
/* Videos carry a real poster and their true width/height attributes, so the browser
   already knows their shape. Do NOT also force width:100% — that stretches the element
   to the column, max-height then caps it, and object-fit letterboxes the video inside
   a box of the wrong ratio. That is where the black bars came from. Let width follow
   the aspect, cap the height, centre it. */
.post-media--video {
  width: auto; max-width: 100%; max-height: 80vh;
  margin-inline: auto; background: #000;
}

.post-caption { margin: 14px 0 12px; max-width: 66ch; line-height: 1.6; }
.hashtag { color: var(--ink3); }

.post-foot { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
             padding-top: 12px; border-top: 1px solid var(--rule); }
.post-tags { display: flex; gap: .35rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.post-tag { display: contents; }
.tag { text-decoration: none; border: 1px solid var(--rule2); padding: 1px 7px;
       font-family: var(--mono); font-size: 10.5px; color: var(--ink2); }
.tag:hover { border-color: var(--ink); color: var(--ink); }

.post-source { font-family: var(--mono); font-size: 10.5px; color: var(--ink3);
               text-decoration: none; border-bottom: 1px solid var(--rule2); }
.post-source:hover { color: var(--accent); border-color: var(--accent); }

/* ---- comments, harvested from the public feed ---- */

.post-comments { margin: 12px 0 0; border-top: 1px solid var(--rule); padding-top: 10px; }
.post-comments summary { cursor: pointer; font-family: var(--mono); font-size: 11px;
                         color: var(--ink3); list-style: none; }
.post-comments summary::-webkit-details-marker { display: none; }
.post-comments summary::before { content: "▸ "; }
.post-comments[open] summary::before { content: "▾ "; }
.post-comments summary:hover { color: var(--ink); }
.cmt-list { list-style: none; padding: 0; margin: 10px 0 0;
            display: flex; flex-direction: column; gap: 7px; }
.cmt { display: flex; gap: .5rem; align-items: baseline; font-size: 14px; line-height: 1.5; }
.cmt-user { font-weight: 600; text-decoration: none; flex: none; }
.cmt-user:hover { text-decoration: underline; }
.cmt-text { color: var(--ink2); min-width: 0; }
.cmt-likes { margin-left: auto; font-family: var(--mono); font-size: 10.5px;
             color: var(--ink3); flex: none; }
.cmt-likes::after { content: " ♥"; }

/* Full comment thread on a Facebook permalink page (author + text, no counts) */
.post-thread { max-width: 680px; margin: 22px auto 0; padding: 16px 0 0;
               border-top: 1px solid var(--rule); }
.post-thread-head { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }

.post-metrics { display: flex; gap: .9rem; list-style: none; padding: 0; margin: 0 0 0 auto;
                font-family: var(--mono); font-size: 11px; }
.metric-value { font-weight: 600; color: var(--ink); }
.metric-label { color: var(--ink3); margin-left: .25rem; }

.feed-empty { background: var(--block); box-shadow: var(--shadow); padding: 20px;
              font-family: var(--mono); font-size: 13px; color: var(--ink3); }

/* ---- permalink ---- */

.post-single-title { font-family: var(--head); font-weight: 700; font-size: 24px;
                     margin: 0 0 14px; color: #fff; max-width: 60ch; line-height: 1.3; }
.post-nav { background: var(--block); box-shadow: var(--shadow);
            display: flex; gap: 20px; padding: 12px 20px; margin-top: 20px; font-size: 14px; }
.post-nav-next { margin-left: auto; }

/* ---- index ---- */

.photo-index { display: grid; gap: 20px; }
.index-title { font-family: var(--head); font-weight: 700; font-size: 30px; margin: 0 0 4px; color: #fff; }
.index-section { background: var(--block); box-shadow: var(--shadow); padding: 22px 26px 24px; }
.index-heading { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--ink3); margin: 0 0 10px; font-weight: 400; }
.index-note { color: var(--ink3); font-size: 13px; margin: -6px 0 12px; }

.account-list, .tag-list, .year-list { list-style: none; padding: 0; margin: 0; }
.account-row, .tag-row, .year-row { display: flex; justify-content: space-between;
                                    padding: 7px 0; border-bottom: 1px solid var(--rule); }
.account-row:last-child, .tag-row:last-child, .year-row:last-child { border-bottom: 0; }
.account-link, .tag-link, .year-link { text-decoration: none; }
.account-link:hover, .tag-link:hover, .year-link:hover { text-decoration: underline; }
.account-count, .tag-count, .year-count { font-family: var(--mono); font-size: 12px; color: var(--ink3); }

.year-nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.year-nav .year-link { font-family: var(--mono); font-size: 12px; }
.year-link--current { font-weight: 700; color: var(--ink); }

/* ---- search ---- */

.search-head { background: var(--block); box-shadow: var(--shadow);
               padding: 26px 30px 22px; margin-bottom: 20px; }
.search-title { font-family: var(--head); font-weight: 700; font-size: 30px; margin: 0 0 4px; }
.search-meta { color: var(--ink2); font-size: 14px; margin: 0 0 14px; }
.search-form { display: flex; gap: .5rem; align-items: center; margin: 0 0 .5rem; }
.search-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
                text-transform: uppercase; color: var(--ink3); }
.search-input { flex: 1; padding: 8px 10px; font: inherit; border: 1px solid var(--rule2); background: #fff; }
.search-input:focus { border-color: var(--ink); outline: none; }
.search-clear { cursor: pointer; background: none; border: 1px solid var(--rule2);
                padding: 7px 12px; font: inherit; font-size: 13px; }
.search-status { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); margin: .25rem 0; }
.search-hints { list-style: none; display: flex; gap: .4rem; flex-wrap: wrap; padding: 0; margin: .5rem 0 0; }
.hint-btn { cursor: pointer; background: none; border: 1px solid var(--rule2);
            padding: 1px 7px; font-family: var(--mono); font-size: 11px; color: var(--ink2); }
.hint-btn:hover { border-color: var(--ink); color: var(--ink); }

.search-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.search-result { background: var(--block); box-shadow: var(--shadow); border-top: 0; }
.search-link { display: flex; gap: 14px; padding: 12px 16px; text-decoration: none;
               align-items: flex-start; color: inherit; }
.search-link:hover { background: #f7f7f5; }
.search-thumb { width: 72px; height: 72px; object-fit: cover; flex: none; background: #f0f0ee; }
.search-thumb--video { background: rgba(0,0,0,.08); }
.search-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.search-caption { line-height: 1.45; }
.search-nocaption { color: var(--ink3); }
.search-meta-line { display: flex; gap: .6rem; flex-wrap: wrap; font-family: var(--mono);
                    font-size: 11px; color: var(--ink3); }
.search-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .25rem; list-style: none; padding: 0; }
.search-hit { background: #fff3d6; font-weight: 600; }
.search-empty { background: var(--block); box-shadow: var(--shadow); padding: 20px;
                font-family: var(--mono); font-size: 13px; color: var(--ink3); }

/* ---- map ---- */

.map-head, .map-elsewhere, .map-regions { background: var(--block); box-shadow: var(--shadow);
                                          padding: 22px 26px; margin-bottom: 20px; }
.map-title { font-family: var(--head); font-weight: 700; font-size: 30px; margin: 0 0 6px; }
.map-meta { color: var(--ink2); margin: 0; max-width: 62ch; }
.map-figure { background: var(--block); box-shadow: var(--shadow); padding: 20px; margin: 0 0 20px; }
.map-svg { max-height: 80vh; width: auto; height: auto; display: block; margin: 0 auto; color: var(--ink); }
.map-dot circle { fill: currentColor; opacity: .5; transition: opacity .15s, r .15s; }
.map-dot:hover circle { opacity: 1; r: 5; }
.map-caption { font-family: var(--mono); font-size: 11px; color: var(--ink3);
               margin-top: 12px; text-align: center; }
.map-far, .map-region-list { list-style: none; padding: 0; margin: 0; columns: 2; }
.map-far-item, .map-region { display: flex; justify-content: space-between; padding: 5px 0;
                             gap: 2rem; border-bottom: 1px solid var(--rule); }
.map-far-count, .map-region-count { font-family: var(--mono); font-size: 12px; color: var(--ink3); }
.map-subhead { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
               color: var(--ink3); margin: 0 0 10px; font-weight: 400; }

@media (max-width: 40rem) {
  .post-gallery--multi { grid-template-columns: 1fr; }
  .post { padding: 14px 16px; }
  .feed-head, .search-head { padding: 18px 18px 16px; }
  .map-far, .map-region-list { columns: 1; }
}

/* who reacted, from the harvested top-reactors */
.post-reactors { margin-top: 4px; font-size: 12px; color: var(--ink3, #6e7982); }
.post-reactors-more { color: var(--ink3, #6e7982); }

/* harvested likers — names, linking back to profiles */
.post-likers { margin-top: 6px; font-size: 13px; }
.post-likers > summary { cursor: pointer; color: var(--ink3, #6e7982); font-family: var(--mono, monospace); font-size: 12px; }
.lk-list { margin-top: 6px; line-height: 1.7; }
.lk-user { color: var(--link, #1a4b7a); text-decoration: none; }
.lk-user:hover { text-decoration: underline; }