/* PB Field Guide — public grid, captions, lightbox. */

.pbis {
	position: relative;
	--pbis-row-target: 320px;
	--pbis-gap: 6px;
	container-type: inline-size;
	--pbis-radius: 3px;
	--pbis-ink: #fff;
	--pbis-muted: rgba(255, 255, 255, .72);
	--pbis-accent: #fff;
	--pbis-font: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	margin: 0;
	padding: 0;
	font-family: var(--pbis-font);
}

/* The stream sits inside post content, so the theme's body styles reach it: serif faces, link
   colours, underlines, figure margins and figcaption spacing. Everything the stream draws is
   stated here, at a specificity that beats the usual `.entry-content figure` style of rule. */
.pbis .pbis-grid,
.pbis .pbis-item,
.pbis .pbis-item > a,
.pbis .pbis-item img {
	margin: 0;
	padding: 0;
	border: 0;
	max-width: none;
	float: none;
	clear: none;
	box-shadow: none;
	list-style: none;
}

.pbis .pbis-item img {
	border-radius: 0;
	vertical-align: top;
}

.pbis .pbis-cap {
	margin: 0;
	border: 0;
	max-width: none;
	box-shadow: none;
}

.pbis .pbis-cap,
.pbis .pbis-cap a,
.pbis .pbis-foot,
.pbis .pbis-more {
	font-family: var(--pbis-font);
	font-style: normal;
}

.pbis figcaption {
	margin: 0;
	padding: 0;
	text-align: left;
	color: var(--pbis-ink);
	font-size: inherit;
}

.pbis .pbis-cap a,
.pbis .pbis-cap a:link,
.pbis .pbis-cap a:visited,
.pbis .pbis-cap a:hover,
.pbis .pbis-cap a:focus,
.pbis .pbis-cap a:active {
	color: var(--pbis-ink);
	text-decoration: none;
	border: 0;
	box-shadow: none;
	background: none;
}

/* The standfirst above the photographs. */
.pbis .pbis-intro {
	margin: 0 auto clamp(12px, 2vw, 22px);
	padding: 0;
	max-width: 62ch;
	font-family: var(--pbis-font);
	font-size: clamp(12.5px, 1.05vw, 15px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.55;
	letter-spacing: .005em;
	color: #56585c;
	text-align: center;
	text-wrap: pretty;
}

.pbis .pbis-intro a,
.pbis .pbis-intro a:link,
.pbis .pbis-intro a:visited {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-color-scheme: dark) {
	.pbis .pbis-intro { color: #b7bac0; }
}

/* Reaching the bag name is not the same gesture on the two kinds of screen. Both sentences are
   printed and one is shown, so the right one survives a cached page. display:none also keeps the
   other out of the accessibility tree, so a screen reader hears one instruction, not two. */
.pbis .pbis-intro-hint { display: none; }
.pbis .pbis-hint-hover { display: inline; }

@media (hover: none) {
	.pbis .pbis-hint-hover { display: none; }
	.pbis .pbis-hint-touch { display: inline; }
}

/* A shortcode pasted into the editor with inline code formatting wraps the whole stream in
   <code>, and because a div cannot live inside a paragraph the parser re-opens that <code>
   around every block after it: the rail, each photo, the standfirst, all in monospace on a grey
   ground. The page should be fixed, but the stream should not look broken while it is. */
.pbis code,
.pbis kbd,
.pbis samp,
.pbis pre {
	font: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	white-space: inherit;
}

/* Fluid "justified" rows: each tile is as wide as its aspect ratio wants at the target row
   height, then rows grow proportionally to fill the container. Pure CSS, keeps article order. */
/* Row height shrinks with the container: wide layouts get 4–5 photos per row, narrow columns
   2–3, and phones two portraits side by side. */
.pbis-grid,
.pbis-probe {
	--pbis-row: min(var(--pbis-row-target), 42cqw);
}

@container (max-width: 520px) {
	.pbis-grid,
	.pbis-probe {
		--pbis-row: min(var(--pbis-row-target), 70cqw);
	}
}

.pbis-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pbis-gap);
	margin: 0;
	padding: 0;
}

.pbis-grid::after {
	content: "";
	flex-grow: 1000000;
	min-width: calc(var(--pbis-row) * 0.5);
}

.pbis-item {
	--r: 0.75;
	position: relative;
	/* Each tile is its own query container, so captions size against the photo they sit on. */
	container-type: inline-size;
	flex-grow: calc(var(--r) * 100);
	flex-basis: calc(var(--r) * var(--pbis-row));
	width: calc(var(--r) * var(--pbis-row));
	max-width: calc(var(--r) * var(--pbis-row) * 1.6);
	aspect-ratio: var(--r);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--pbis-radius);
	background: #ececec;
	opacity: 1;
	transition: opacity .35s ease, transform .35s ease;
}

/* Once JS has measured the rows, tiles get exact pixel sizes. */
.pbis-grid.is-justified .pbis-item {
	flex: none;
	max-width: none;
	aspect-ratio: auto;
}

.pbis-grid.is-justified::after { display: none; }

.pbis-probe {
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	width: 0;
	height: var(--pbis-row);
}

.pbis-item.is-new {
	animation: pbis-in .45s ease both;
}

@keyframes pbis-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.pbis-item.is-removing {
	opacity: 0;
	transform: scale(.94);
}

.pbis-link {
	display: block;
	position: absolute;
	inset: 0;
	outline: none;
}

.pbis-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

@media (hover: hover) {
	.pbis-item:hover img { transform: scale(1.03); }
}

/* Caption overlay: bag name + shop pill on a soft gradient. */
.pbis .pbis-cap {
	font-family: var(--pbis-font);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 40px 12px 11px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	background: linear-gradient(to top, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0) 100%);
	color: var(--pbis-ink);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: .01em;
	text-transform: none;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}

/* Only the links inside a caption take clicks; everywhere else on the photo opens the lightbox. */
.pbis-cap a { pointer-events: auto; }

.pbis-item:hover .pbis-cap,
.pbis-item:focus-within .pbis-cap {
	opacity: 1;
	transform: none;
}

/* A touch screen has no hover, so the caption used to sit open over every photograph at once:
   two lines of bag name and a Shop pill on a thumbnail the size of a stamp. The photos are left
   alone there and the lightbox carries the name and the link, which is what the standfirst says. */
@media (hover: none) {
	.pbis .pbis-cap:not(.pbis-cap-cover) {
		display: none;
	}
}

.pbis .pbis-name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pbis-name a { transition: opacity .2s; }
.pbis-name a:hover { opacity: .82; }

.pbis .pbis-shop,
.pbis .pbis-shop:link,
.pbis .pbis-shop:visited {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--pbis-accent);
	color: #111;
	font-family: var(--pbis-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s, transform .2s;
}

.pbis .pbis-shop:hover { filter: brightness(1.08); transform: translateY(-1px); color: #000; }

/* Set cover: the article's featured image opens its run of photos, so it is always labelled. */

/* The scrim covers the whole photo and fades to fully transparent. An overlay that starts
   part-way down, or stops at a non-zero alpha, draws a visible line across the picture. The many
   stops approximate an eased ramp, which is what keeps it from banding. */
.pbis .pbis-cap-cover {
	opacity: 1;
	transform: none;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 18px;
}

.pbis-set {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	width: 100%;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.pbis-ico {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	opacity: .85;
}

.pbis-set-when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 16px;
	font-size: clamp(10px, 2.4cqw, 12px);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pbis-muted);
}

.pbis-set-date,
.pbis-set-place {
	display: inline-flex;
	align-items: center;
	gap: .45em;
}

/* The one clickable thing on a cover. The photo itself is inert: it is the story's lead image,
   already inside the article, so there is nothing to open it for. */
.pbis .pbis-set-count,
.pbis .pbis-set-count:link,
.pbis .pbis-set-count:visited {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-size: clamp(16px, 5.4cqw, 30px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.005em;
	color: var(--pbis-ink);
	text-decoration: none;
	transition: opacity .2s;
}

.pbis .pbis-set-count:hover { opacity: .85; }

/* The arrow says where the link goes. */
.pbis-set-arrow::before {
	content: "\2192";
	display: block;
	font-weight: 400;
	transition: transform .25s ease;
}

.pbis .pbis-set-count:hover .pbis-set-arrow::before {
	transform: translateX(5px);
}

/* On a narrow photo the name and the Shop pill stop fighting over one line. */
@container (max-width: 250px) {
	.pbis .pbis-cap {
		flex-direction: column;
		align-items: flex-start;
		gap: 7px;
		padding: 34px 10px 10px;
	}

	.pbis .pbis-name {
		-webkit-line-clamp: 3;
		font-size: 12px;
	}

	.pbis .pbis-cap-cover {
		padding: 10px;
	}
}

.pbis-item.is-cover .pbis-cap-cover {
	background:
		radial-gradient(120% 88% at 50% 50%, rgba(0, 0, 0, .46) 0%, rgba(0, 0, 0, .41) 34%, rgba(0, 0, 0, .30) 58%, rgba(0, 0, 0, .19) 78%, rgba(0, 0, 0, .11) 100%),
		linear-gradient(to top,
			rgba(0, 0, 0, .34) 0%,
			rgba(0, 0, 0, .30) 12%,
			rgba(0, 0, 0, .24) 26%,
			rgba(0, 0, 0, .18) 40%,
			rgba(0, 0, 0, .13) 54%,
			rgba(0, 0, 0, .09) 68%,
			rgba(0, 0, 0, .05) 82%,
			rgba(0, 0, 0, .02) 92%,
			rgba(0, 0, 0, 0) 100%);
	transition: opacity .25s ease;
}

.pbis-item.is-cover:hover .pbis-cap-cover {
	opacity: .92;
}

/* Moderator shortcut from a cover to the story's edit screen, where the Place field lives.
   It is an anchor, so the colour has to be stated for every link state at a specificity that
   beats the theme's own link rules, or the icon draws in the theme's link blue. */
.pbis .pbis-edit,
.pbis .pbis-edit:link,
.pbis .pbis-edit:visited,
.pbis .pbis-edit:hover,
.pbis .pbis-edit:focus,
.pbis .pbis-edit:active {
	position: absolute;
	top: 8px;
	right: 44px;
	z-index: 3;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 20, 20, .75);
	color: #fff;
	text-decoration: none;
	box-shadow: none;
	opacity: 0;
	transition: opacity .2s, background .2s;
}

.pbis-item:hover .pbis-edit,
.pbis-item:focus-within .pbis-edit,
.pbis .pbis-edit:focus { opacity: 1; }

.pbis .pbis-edit:hover { background: #000; color: #fff; }
.pbis .pbis-edit svg { width: 15px; height: 15px; display: block; }
@media (hover: none) { .pbis .pbis-edit { opacity: .85; } }

/* Remove button, injected for moderators only. */
.pbis-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 20, 20, .75);
	color: #fff;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s, background .2s;
	padding: 0;
}

.pbis-item:hover .pbis-remove,
.pbis-item:focus-within .pbis-remove,
.pbis-remove:focus { opacity: 1; }
.pbis-remove:hover { background: #c00; }
.pbis-remove-set:hover { background: #a00; }
@media (hover: none) { .pbis-remove { opacity: .85; } }

/* Footer: load more / end. */
.pbis-sentinel { height: 1px; }

.pbis-foot {
	font-family: var(--pbis-font);
	text-align: center;
	padding: 28px 0 8px;
	color: #777;
	font-size: 13px;
	letter-spacing: .04em;
}

.pbis-more {
	appearance: none;
	font-family: var(--pbis-font);
	border: 1px solid #ccc;
	background: #fff;
	color: #111;
	padding: 10px 22px;
	border-radius: 999px;
	font: inherit;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}

.pbis-more:hover { border-color: #111; }
.pbis-more[disabled] { opacity: .5; cursor: default; }

.pbis-end { margin: 8px 0 0; }
.pbis-error { color: #b00; }

.pbis-toast {
	font-family: var(--pbis-font);
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 100000;
	background: #111;
	color: #fff;
	padding: 12px 18px;
	border-radius: 8px;
	font-size: 14px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
	display: flex;
	gap: 16px;
	align-items: center;
}

.pbis-toast button {
	appearance: none;
	background: none;
	border: 0;
	color: #7fd0ff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
}

/* Lightbox */
.pbis-lb {
	font-family: var(--pbis-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(8, 8, 8, .96);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	opacity: 0;
	transition: opacity .2s ease;
}

.pbis-lb.is-open { opacity: 1; }

.pbis-lb-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 72px 12px;
	box-sizing: border-box;
}

.pbis-lb-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
	user-select: none;
	-webkit-user-drag: none;
	transition: transform .24s cubic-bezier(.2, .7, .3, 1), opacity .24s ease;
	will-change: transform;
}

/* The swipe cue: shown once, on the kind of screen that can swipe, and gone the moment it is. */
.pbis-lb-cue {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translate(-50%, 8px);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(20, 20, 22, .62);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
	color: #fff;
	font-family: var(--pbis-font, sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}

.pbis-lb-cue.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

.pbis-lb-cue svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	opacity: .9;
}

.pbis-lb-cue.is-on svg:first-child { animation: pbis-cue-left 1.5s ease-in-out infinite; }
.pbis-lb-cue.is-on svg:last-child { animation: pbis-cue-right 1.5s ease-in-out infinite; }

@keyframes pbis-cue-left {
	0%, 100% { transform: translateX(0); opacity: .55; }
	50% { transform: translateX(-4px); opacity: 1; }
}

@keyframes pbis-cue-right {
	0%, 100% { transform: translateX(0); opacity: .55; }
	50% { transform: translateX(4px); opacity: 1; }
}

.pbis-lb-cap {
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 24px 26px;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
}

/* Every link in the lightbox is plain white text: no underline, no theme link colour, and no
   second underline on hover. Hover is a small opacity shift instead. */
.pbis-lb a,
.pbis-lb a:link,
.pbis-lb a:visited,
.pbis-lb a:hover,
.pbis-lb a:focus,
.pbis-lb a:active {
	color: inherit;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	background: none;
}

.pbis-lb a { transition: opacity .2s; }
.pbis-lb a:hover { opacity: .78; }
.pbis-lb a:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 3px; border-radius: 2px; }

.pbis-lb-name {
	font-weight: 700;
	font-size: clamp(16px, 2.2vw, 21px);
	line-height: 1.25;
	letter-spacing: -.005em;
	color: #fff;
}

.pbis-lb-date {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #9a9a9a;
}

.pbis-lb .pbis-lb-shop,
.pbis-lb .pbis-lb-shop:link,
.pbis-lb .pbis-lb-shop:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 0;
	padding: 9px 20px;
	border-radius: 999px;
	background: var(--pbis-accent, #fff);
	color: #111;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.pbis-lb .pbis-lb-shop:hover { opacity: 1; filter: brightness(.92); color: #000; }

.pbis-lb-src { display: block; margin-top: 12px; font-size: 12px; color: #9a9a9a; letter-spacing: .03em; }
.pbis-lb .pbis-lb-src a { color: #e2e2e2; font-weight: 500; }

.pbis-lb-btn {
	position: absolute;
	appearance: none;
	border: 0;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	transition: background .2s;
	padding: 0;
}

.pbis-lb-btn:hover { background: rgba(255, 255, 255, .2); }

/* The close is drawn rather than typed: the × character renders at a fraction of its font size,
   so a 30px glyph reads as a speck on a phone. Two strokes are the size they say they are. */
/* Sized and placed to sit entirely inside the stage's top padding: 10 + 48 = 58, against 64px
   of padding, so a tall photograph stops short of it rather than sliding underneath. */
.pbis-lb-close {
	top: 10px;
	right: 10px;
	width: 48px;
	height: 48px;
}

.pbis-lb-close svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.1;
	stroke-linecap: round;
}
.pbis-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.pbis-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.pbis-lb-btn[disabled] { opacity: .25; cursor: default; }
.pbis-lb-count { position: absolute; top: 24px; left: 24px; font-size: 12px; font-weight: 500; color: #999; letter-spacing: .1em; }

body.pbis-lb-open { overflow: hidden; }

@supports not (width: 1cqw) {
	.pbis-grid, .pbis-probe { --pbis-row: var(--pbis-row-target); }
	@media (max-width: 700px) { .pbis-grid, .pbis-probe { --pbis-row: 220px; } }
}

@media (max-width: 700px) {
	/* 6 + 44 = 50 against 56px of padding. */
	.pbis-lb-stage { padding: 56px 8px 8px; }
	.pbis-lb-prev, .pbis-lb-next { display: none; }

	.pbis-lb-close {
		top: 6px;
		right: 6px;
		width: 44px;
		height: 44px;
		background: rgba(255, 255, 255, .14);
	}

	.pbis-lb-close svg { width: 20px; height: 20px; }
	.pbis-lb-count { top: 18px; left: 16px; }
	.pbis-lb-cap { padding-bottom: 20px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.pbis-item, .pbis-item img, .pbis-cap, .pbis-lb { transition: none; animation: none; }
	.pbis-lb-img { transition: none; }
	.pbis-lb-cue, .pbis-lb-cue svg { transition: opacity .2s ease; animation: none; }
}

/* ---------------------------------------------------------------- timeline rail

   A floating pane of frosted glass: a blurred, saturated sample of whatever scrolls behind it,
   a bright hairline along the top edge for the specular catch, and a soft shadow to lift it off
   the page. Where backdrop-filter is unavailable it falls back to a solid panel. */

.pbis-rail {
	position: fixed;
	left: clamp(10px, 1.6vw, 26px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	display: none;
	flex-direction: column;
	gap: 6px;
	max-height: min(76vh, 640px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 9px 7px;
	border-radius: 20px;
	font-family: var(--pbis-font);
	color: #16181c;
	background: rgba(248, 248, 250, .92);
	scrollbar-width: none;
}

.pbis-rail::-webkit-scrollbar { width: 0; height: 0; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pbis-rail {
		background: rgba(252, 252, 253, .55);
		-webkit-backdrop-filter: blur(26px) saturate(180%);
		backdrop-filter: blur(26px) saturate(180%);
	}
}

.pbis-rail {
	border: 1px solid rgba(255, 255, 255, .55);
	box-shadow:
		0 12px 38px rgba(0, 0, 0, .17),
		0 2px 8px rgba(0, 0, 0, .08),
		inset 0 1px 0 rgba(255, 255, 255, .85),
		inset 0 -1px 0 rgba(255, 255, 255, .28);
}

.pbis.has-rail .pbis-rail { display: flex; }

.pbis-rail ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pbis-rail button {
	appearance: none;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 5px 9px;
	border-radius: 12px;
	text-align: left;
	transition: background .18s ease, color .18s ease;
}

/* display:flex above would otherwise beat the browser's own [hidden] rule. */
.pbis-rail button[hidden] { display: none; }

.pbis-rail button:hover { background: rgba(0, 0, 0, .07); }
.pbis-rail button:focus-visible { outline: 2px solid #2f6fed; outline-offset: 1px; }

.pbis-rail .pbis-rail-top {
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: #16181c;
	color: #fff;
	margin-bottom: 2px;
}

.pbis-rail .pbis-rail-top:hover { background: #000; color: #fff; }

.pbis-rail-y {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
}

.pbis-rail-year + .pbis-rail-year { margin-top: 2px; }

.pbis-rail-months {
	display: none;
	padding-left: 4px;
	margin-top: 1px;
}

.pbis-rail-year.is-open .pbis-rail-months { display: block; }

.pbis-rail .pbis-rail-m {
	font-size: 12px;
	font-weight: 500;
	color: #43474e;
	padding: 3px 9px;
}

.pbis-rail-tick {
	width: 5px;
	height: 5px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: currentColor;
	opacity: .32;
	transition: opacity .18s ease, transform .18s ease;
}

.pbis-rail-label { flex: 1 1 auto; }

.pbis-rail-n {
	font-size: 10px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	opacity: .48;
}

.pbis-rail .pbis-rail-m.is-active,
.pbis-rail .pbis-rail-y.is-active {
	background: rgba(0, 0, 0, .085);
	color: #000;
	font-weight: 700;
}

.pbis-rail-m.is-active .pbis-rail-tick {
	opacity: 1;
	transform: scale(1.5);
}

@media (prefers-color-scheme: dark) {
	.pbis-rail {
		color: #f2f3f5;
		background: rgba(28, 28, 30, .92);
		border-color: rgba(255, 255, 255, .14);
		box-shadow:
			0 12px 38px rgba(0, 0, 0, .5),
			inset 0 1px 0 rgba(255, 255, 255, .16);
	}

	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.pbis-rail { background: rgba(30, 30, 32, .58); }
	}

	.pbis-rail .pbis-rail-m { color: #c9ccd2; }
	.pbis-rail button:hover { background: rgba(255, 255, 255, .1); }
	.pbis-rail .pbis-rail-m.is-active,
	.pbis-rail .pbis-rail-y.is-active { background: rgba(255, 255, 255, .14); color: #fff; }
	.pbis-rail .pbis-rail-top { background: #f4f5f7; color: #16181c; }
	.pbis-rail .pbis-rail-top:hover { background: #fff; color: #000; }
}

/* Not enough room beside the photos for a rail. */
@media (max-width: 1180px) {
	.pbis.has-rail .pbis-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pbis-rail button, .pbis-rail-tick { transition: none; }
}

/* The banner that says the stream is parked at a month rather than at the top. */
.pbis-jumped {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 var(--pbis-gap);
	padding: 10px 16px;
	border-radius: 12px;
	background: rgba(0, 0, 0, .055);
	font-family: var(--pbis-font);
	font-size: 13px;
	letter-spacing: .02em;
}

.pbis-jumped button {
	appearance: none;
	border: 1px solid rgba(0, 0, 0, .2);
	background: none;
	font: inherit;
	font-weight: 700;
	color: inherit;
	padding: 5px 14px;
	border-radius: 999px;
	cursor: pointer;
}

.pbis-jumped button:hover { border-color: #111; }

.pbis-grid.is-busy { opacity: .45; transition: opacity .15s ease; }

/* ---------------------------------------------------------------- ad units

   A unit spans the full width and sits between two whole rows of photographs. It takes up no
   room at all until it has an ad in it: no padding, no label, nothing. The page's own GPT
   configuration collapses the empty div inside, but the label and spacing around it are ours,
   and an "ADVERTISEMENT" caption floating over blank space is worse than no unit. Once one
   comes back unsold the whole box goes. */

.pbis .pbis-ad {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	font-family: var(--pbis-font);
	text-align: center;
	overflow: hidden;
}

.pbis .pbis-ad.is-filled { padding: 14px 0; }
.pbis .pbis-ad.is-empty { display: none; }

.pbis .pbis-ad-label {
	display: none;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #9a9a9a;
}

.pbis .pbis-ad.is-filled .pbis-ad-label { display: block; }

.pbis .pbis-ad-slot { display: block; max-width: 100%; }