/* Gallery, photo page and guidelines. Same warm tokens as the share page. Mobile first; controls at least 44px; nothing wider than the screen. */
.bp-pub {
	--bp-ink: #231f1a;
	--bp-soft: #5c554b;
	--bp-line: #cfc6b8;
	--bp-paper: #fffdf8;
	--bp-tint: #f6f0e4;
	--bp-accent: #8c2a1c;
	--bp-accent-ink: #fff;
	--bp-focus: #0b5cad;
	box-sizing: border-box;
	width: 100%;
	max-width: 70rem;
	margin: 0 auto;
	padding: 1rem 16px 3rem;
	color: var(--bp-ink);
	font-size: 1.0625rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.bp-pub *, .bp-pub *::before, .bp-pub *::after { box-sizing: border-box; }
.bp-pub h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 .5rem; }
.bp-pub h2 { font-size: 1.3rem; line-height: 1.3; margin: 0 0 .5rem; }
.bp-pub a { color: var(--bp-accent); }
.bp-pub :focus-visible { outline: 3px solid var(--bp-focus); outline-offset: 2px; }
.bp-lead { font-size: 1.15rem; color: var(--bp-soft); margin: 0 0 1rem; }

.bp-pub .bp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem 1.1rem; font: inherit; font-weight: 600; text-decoration: none; color: var(--bp-accent); background: #fff; border: 2px solid var(--bp-accent); border-radius: 6px; cursor: pointer; }
.bp-pub .bp-btn:hover { background: var(--bp-tint); }
.bp-pub .bp-btn-quiet { color: var(--bp-ink); border-color: #8a8173; }
.bp-pub .bp-btn-main-inline { color: var(--bp-accent-ink); background: var(--bp-accent); }
.bp-pub .bp-btn-main-inline:hover { background: #6f2015; }
.bp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0; }

/* Tag filter chips */
.bp-filter ul, .bp-taglist { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.bp-chip-link { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .95rem; text-decoration: none; color: var(--bp-ink) !important; border: 2px solid var(--bp-line); border-radius: 999px; background: #fff; }
.bp-chip-link:hover { background: var(--bp-tint); }
.bp-chip-link[aria-current="page"] { border-color: var(--bp-accent); background: var(--bp-tint); font-weight: 600; }

/* Uncropped grid: rows are justified by each photo's own aspect ratio (--r = width / height). */
.bp-grid { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.bp-card { flex: calc(var(--r) * 100) 1 calc(var(--r) * 13rem); min-width: 0; margin: 0; background: var(--bp-tint); }
.bp-card a { display: block; }
.bp-card picture, .bp-card img { display: block; width: 100%; height: auto; }
.bp-grid::after { content: ""; flex-grow: 1000000; }
.bp-card:hover img { opacity: .92; }

.bp-empty { padding: 2rem 1rem; text-align: center; background: var(--bp-tint); border-radius: 8px; }
.bp-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.bp-pageno { color: var(--bp-soft); }

/* Photo page */
.bp-crumbs { margin: 0 0 .75rem; }
.bp-hero { margin: 0 0 1rem; text-align: center; background: var(--bp-tint); border-radius: 6px; }
.bp-hero picture, .bp-hero img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.bp-hero img { max-height: 85vh; width: auto; }
.bp-photo-body { max-width: 42rem; margin: 0 auto; }
.bp-caption { font-size: 1.2rem; margin: 0 0 .75rem; }
.bp-context { color: var(--bp-soft); margin: 0 0 1rem; }
.bp-facts { margin: 1rem 0; border-top: 2px solid var(--bp-line); }
.bp-facts > div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .65rem 0; border-bottom: 1px solid var(--bp-line); }
.bp-facts dt { flex: 0 0 6rem; font-weight: 600; }
.bp-facts dd { flex: 1 1 12rem; margin: 0; }
.bp-bio { display: block; color: var(--bp-soft); font-size: .95rem; }
.bp-3d { display: inline-block; min-height: 44px; line-height: 44px; margin-left: .5rem; font-weight: 600; }
.bp-copied { color: var(--bp-soft); font-size: .95rem; }
.bp-photo-missing { display: flex; align-items: center; justify-content: center; min-height: 14rem; padding: 1rem; color: var(--bp-soft); background: var(--bp-tint); }
.bp-more { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--bp-line); }

/* Guidelines */
.bp-guidelines { max-width: 44rem; margin: 0 auto; }
.bp-guidelines section { margin: 1.75rem 0; padding-top: 1.25rem; border-top: 2px solid var(--bp-line); }
.bp-guidelines li { margin: .35rem 0; }
.bp-toc ul { columns: 2 14rem; list-style: none; padding: 0; margin: 1rem 0; }
.bp-toc a { display: inline-block; min-height: 44px; line-height: 44px; }
.bp-agent { font-style: normal; padding: .75rem 1rem; background: var(--bp-tint); border-radius: 6px; }
.bp-agent-todo { padding: .75rem 1rem; background: var(--bp-tint); border-radius: 6px; font-weight: 600; }

/* Loves: a heart on each card (over the photo's corner) and on the photo page. Hidden until love.js is ready, so there is no dead button without JavaScript. */
.bp-love { display: inline-flex; align-items: center; gap: .15rem; visibility: hidden; }
.bp-love.is-ready { visibility: visible; }
.bp-love-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; color: var(--bp-accent); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.bp-love-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.bp-love-btn[aria-pressed="true"] svg { fill: currentColor; }
.bp-love-btn:hover { background: rgba(140, 42, 28, .1); }
.bp-love-n { min-width: 0; padding-right: .35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bp-card { position: relative; }
.bp-card .bp-love { position: absolute; right: 6px; bottom: 6px; background: rgba(255, 253, 248, .92); border-radius: 999px; }
.bp-card .bp-love:not(:has(.bp-love-n:not(:empty))) { gap: 0; }
.bp-actions .bp-love { margin-right: .25rem; padding: 0 .25rem 0 0; border: 2px solid var(--bp-line); border-radius: 999px; background: #fff; min-height: 48px; }
.bp-love-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bp-love-ts { position: fixed; bottom: 8px; left: 8px; z-index: 5; }
@media (prefers-reduced-motion: no-preference) {
	.bp-love-btn svg { transition: transform .15s ease; }
	.bp-love-btn[aria-pressed="true"] svg { transform: scale(1.12); }
}

@media (min-width: 700px) {
	.bp-pub h1 { font-size: 2.1rem; }
	.bp-card { flex-basis: calc(var(--r) * 15rem); }
}
@media (prefers-reduced-motion: no-preference) {
	.bp-card img { transition: opacity .15s ease; }
}

/* /photos/report/ */
.bp-report { max-width: 40rem; margin: 0 auto; }
.bp-report fieldset { margin: 1rem 0; padding: 0; border: 0; }
.bp-report legend { font-weight: 600; margin-bottom: .25rem; }
.bp-report .bp-radio { display: flex; align-items: center; gap: .65rem; min-height: 44px; font-weight: 400; cursor: pointer; }
.bp-report .bp-radio input { width: 1.4rem; height: 1.4rem; accent-color: var(--bp-accent); }
.bp-report label { display: block; font-weight: 600; margin-bottom: .25rem; }
.bp-report .bp-radio, .bp-report .bp-hp label { font-weight: 400; }
.bp-report textarea, .bp-report input[type="email"] { display: block; width: 100%; min-height: 48px; padding: .6rem .7rem; font: inherit; color: var(--bp-ink); background: #fff; border: 2px solid #8a8173; border-radius: 6px; }
.bp-report textarea { min-height: 7rem; resize: vertical; }
.bp-report-status { min-height: 1.5rem; margin: .5rem 0; font-weight: 600; }
.bp-report-status.is-error { color: #a02222; }
.bp-soft { color: var(--bp-soft); }

/* Contributor page and badges */
.bp-badges { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .5rem 0; padding: 0; }
.bp-badge { padding: .25rem .7rem; border: 2px solid var(--bp-accent); border-radius: 999px; background: var(--bp-tint); font-size: .9rem; font-weight: 600; }

/* The contributor page */
.bp-by-head { margin: 0 0 1rem; }
.bp-by-bio { font-size: 1.15rem; margin: 0 0 .5rem; }
.bp-by-since, .bp-by-link { color: var(--bp-soft); margin: .25rem 0; }
.bp-by-photos { margin-top: 1.5rem; }

/* Photo of the Month: the archive and the small card from [bp_photo_of_the_month] */
.bp-potm-grid { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.bp-potm-item { margin: 0; }
.bp-potm-photo { display: block; border-radius: 8px; overflow: hidden; background: var(--bp-tint); }
.bp-potm-photo img { display: block; width: 100%; height: auto; }
.bp-potm-meta { padding: .5rem 0 0; }
.bp-potm-meta p { margin: 0; }
.bp-potm-month { font-weight: 700; }
.bp-potm-credit { color: var(--bp-soft); }
.bp-potm-card { margin: 1.5rem 0; max-width: 28rem; }
.bp-potm-card img { display: block; width: 100%; height: auto; border-radius: 8px; }
.bp-potm-card figcaption { padding: .5rem 0 0; }