/* ==========================================================================
   Pankaj Yogpeeth — prose.css
   The reading engine for page bodies written in Manage (service sections today;
   blog and article bodies can opt in by wrapping their HTML the same way).

   One wrapper class, .pyp-prose, styles the PLAIN elements inside it: h2, h3,
   p, ul/ol, blockquote, table, figure, details. Nothing in the content carries
   a class or an inline style (config/content-blocks.php renders bare markup),
   so the editor can only ever write content, and every page reads the same.

   The only hooks in the content are ones it needs anyway: h2[id] for the
   "On this page" links, and data-cols on a gallery <figure> (the per-row choice
   from Manage). assets/js/prose.js adds everything with behaviour at runtime:
     .pyp-prose__table    the card around each table (row cards on phones)
     .pyp-prose__zoom     a single photo you can open
     .pyp-prose__gallery  a gallery figure, its tiles (.pyp-prose__tile) and "+N"
     .pyp-lightbox        the photo viewer
   Images load natively lazily (the site's image filter adds loading="lazy");
   the script only adds the placeholder and fade-in. Staff preview wraps hidden
   sections in .pyp-preview-hidden (core.css).

   Same idea as owf's .owf-prose and zc's .zc-naud-prose, in this site's
   brand: Jost throughout, forest and leaf greens.
   ========================================================================== */

.pyp-prose {
	--pyp-prose-ink: #13221a;
	--pyp-prose-text: #3a4d42;
	--pyp-prose-soft: #63776b;
	--pyp-prose-line: rgba(15, 59, 39, 0.1);
	--pyp-prose-tint: #f3f7f1;
	--pyp-prose-radius: 20px;
	--pyp-prose-anchor: calc(var(--pyp-navbar-h, 64px) + 28px);

	counter-reset: pyp-prose-h2;
	color: var(--pyp-prose-text);
	/* The site's primary face (Jost). Its x-height is smaller than Inter's, so the size is a step up. */
	font-family: var(--cnvs-primary-font, 'Jost', sans-serif);
	font-size: clamp(16.5px, 0.3vw + 15.5px, 18.5px);
	font-weight: 400;
	line-height: 1.74;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

.pyp-prose > :first-child { margin-top: 0; }
.pyp-prose > :last-child { margin-bottom: 0; }


/* Headings ----------------------------------------------------------------
   H2 opens a chapter: a hairline across the column, a numbered pill, a large
   forest title. H3 is a section inside it: smaller, green, led by a short bar,
   so the two never read as the same level. */
.pyp-prose h2 {
	counter-increment: pyp-prose-h2;
	position: relative;
	/* Even rhythm: the space above the rule is twice the space below the title,
	   and the space between the rule and the pill matches the space below the title. */
	margin: 36px 0 18px;
	padding-top: 18px;
	border-top: 1px solid var(--pyp-prose-line);
	color: var(--pyp-forest);
	font-family: var(--pyp-font-menu);
	font-size: clamp(27px, 1.3vw + 20px, 38px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.025em;
	text-wrap: balance;
	scroll-margin-top: var(--pyp-prose-anchor);
}

/* "Chapter 01" pill */
.pyp-prose h2::before {
	content: 'Chapter ' counter(pyp-prose-h2, decimal-leading-zero);
	display: table;
	margin-bottom: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(29, 112, 68, 0.1);
	color: var(--pyp-green);
	font-family: var(--pyp-font-sans);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pyp-prose h2::after {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	width: 56px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--pyp-green), var(--pyp-leaf));
}

.pyp-prose > h2:first-child {
	margin-top: 0;
}

.pyp-prose h3 {
	position: relative;
	margin: 30px 0 8px;
	padding-left: 16px;
	color: var(--pyp-green-hover);
	font-family: var(--pyp-font-menu);
	font-size: clamp(19px, 0.35vw + 17.4px, 21.5px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.012em;
	text-wrap: balance;
	scroll-margin-top: var(--pyp-prose-anchor);
}

.pyp-prose h3::before {
	content: '';
	position: absolute;
	top: 0.2em;
	bottom: 0.2em;
	left: 0;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--pyp-green), var(--pyp-leaf));
}

.pyp-prose h2 + h3 {
	margin-top: 18px;
}

.pyp-prose h4 {
	margin: 22px 0 6px;
	color: var(--pyp-prose-ink);
	font-size: 1.02em;
	font-weight: 650;
	line-height: 1.4;
}


/* Text --------------------------------------------------------------------- */
.pyp-prose p {
	margin: 0 0 0.65em;
}

/* A heading or block after a paragraph brings its own space; the paragraph's would add to it */
.pyp-prose p:last-child,
.pyp-prose p:has(+ :is(ul, ol, .pyp-prose__table, table, figure)) {
	margin-bottom: 0.4em;
}

/* The opening paragraph is the lead: a size up, a shade darker. */
.pyp-prose > p:first-child {
	color: #2b3d33;
	font-size: 1.12em;
	line-height: 1.72;
}

.pyp-prose :is(strong, b) {
	color: var(--pyp-prose-ink);
	font-weight: 650;
}

.pyp-prose em {
	color: inherit;
}

.pyp-prose a {
	color: var(--pyp-green);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(29, 112, 68, 0.32);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color var(--pyp-dur-fast) var(--pyp-ease-out), text-decoration-color var(--pyp-dur-fast) var(--pyp-ease-out);
}

.pyp-prose a:hover {
	color: var(--pyp-green-hover);
	text-decoration-color: currentColor;
}

.pyp-prose a:focus-visible {
	border-radius: 4px;
	outline: 2px solid var(--pyp-green);
	outline-offset: 2px;
}

.pyp-prose hr {
	height: 1px;
	margin: 40px 0;
	border: 0;
	background: linear-gradient(90deg, var(--pyp-prose-line), rgba(15, 59, 39, 0));
	opacity: 1;
}


/* Lists ---------------------------------------------------------------------
   Bullets are small green check marks; numbered lists get round number badges. */
.pyp-prose ul,
.pyp-prose ol {
	margin: 6px 0 1.4em;
	padding: 0;
	list-style: none;
}

.pyp-prose li {
	position: relative;
	margin: 0 0 0.6em;
	padding-left: 34px;
}

.pyp-prose li:last-child {
	margin-bottom: 0;
}

.pyp-prose li > p {
	margin: 0;
}

.pyp-prose ul > li::before {
	content: '';
	position: absolute;
	top: 0.32em;
	left: 0;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: rgba(29, 112, 68, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7044' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.pyp-prose ol {
	counter-reset: pyp-prose-ol;
}

.pyp-prose ol > li {
	counter-increment: pyp-prose-ol;
}

.pyp-prose ol > li::before {
	content: counter(pyp-prose-ol);
	position: absolute;
	top: 0.28em;
	left: 0;
	display: grid;
	place-items: center;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var(--pyp-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pyp-prose li > :is(ul, ol) {
	margin: 0.6em 0 0;
}


/* Highlight (blockquote) ------------------------------------------------- */
.pyp-prose blockquote {
	position: relative;
	margin: 32px 0;
	padding: 24px 26px 24px 66px;
	border: 0;
	border-radius: var(--pyp-prose-radius);
	background: linear-gradient(135deg, rgba(29, 112, 68, 0.1), rgba(156, 207, 104, 0.1));
	color: var(--pyp-forest);
	font-family: var(--pyp-font-menu);
	font-size: clamp(17.5px, 0.4vw + 15.8px, 20px);
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.01em;
}

.pyp-prose blockquote::before {
	content: '\201C';
	position: absolute;
	top: 14px;
	left: 22px;
	color: rgba(29, 112, 68, 0.38);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 56px;
	line-height: 1;
}

.pyp-prose blockquote p {
	margin-bottom: 0.6em;
}

.pyp-prose blockquote > :last-child {
	margin-bottom: 0;
}


/* Tables ---------------------------------------------------------------------
   Frosted glass, 4px corners: a translucent mint pane (blurred, with a light
   catching its top edge), a header band in small forest capitals, hairlines
   between rows and between columns, the first column as the row's label.
   A hovered row lights up green and its text steps forward. prose.js puts each
   table in the pane (.pyp-prose__table); without the script the bare table
   still scrolls inside its own box. */
.pyp-prose__table,
.pyp-prose > table {
	/* The pane reaches out by exactly the cells' side padding, so the text in the first and
	   last columns lines up with the paragraph text above and below the table. */
	--pyp-table-pad: 18px;
	margin: 22px calc(-1 * var(--pyp-table-pad)) 28px;
	overflow-x: auto;
	border-radius: 4px;
	background: linear-gradient(135deg, rgba(240, 247, 236, 0.85) 0%, rgba(255, 255, 255, 0.6) 55%, rgba(233, 243, 228, 0.75) 100%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
	scrollbar-width: thin;
	scrollbar-color: rgba(29, 112, 68, 0.35) transparent;
}

.pyp-prose > table {
	display: block;
	width: calc(100% + 2 * var(--pyp-table-pad));
}

.pyp-prose__table:focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
}

.pyp-prose table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 14.5px;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

/* Four or more columns keep a readable width and scroll instead of squeezing. */
.pyp-prose table:has(tr > :nth-child(4)) {
	min-width: 620px;
}

.pyp-prose caption {
	padding: 16px 18px 4px;
	caption-side: top;
	color: var(--pyp-forest);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: left;
}

.pyp-prose th,
.pyp-prose td {
	padding: 11px var(--pyp-table-pad, 18px);
	border: 0;
	text-align: left;
	vertical-align: top;
}

/* Hairlines between columns */
.pyp-prose :is(th, td) + :is(th, td) {
	border-left: 1px solid rgba(15, 59, 39, 0.08);
}

.pyp-prose thead th {
	padding-block: 11px;
	background: rgba(29, 112, 68, 0.1);
	color: var(--pyp-forest);
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: 0.09em;
	line-height: 1.4;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.pyp-prose thead th + th {
	border-left-color: rgba(255, 255, 255, 0.7);
}

.pyp-prose thead th :is(strong, b) {
	color: inherit;
	font-weight: inherit;
}

.pyp-prose tbody td,
.pyp-prose tbody th {
	border-bottom: 1px solid rgba(15, 59, 39, 0.07);
	color: var(--pyp-prose-text);
	transition:
		background-color var(--pyp-dur) var(--pyp-ease-out),
		color var(--pyp-dur-fast) var(--pyp-ease-out),
		box-shadow var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-prose tbody tr:last-child > * {
	border-bottom: 0;
}

/* The first column is the row's label */
.pyp-prose tbody td:first-child {
	color: var(--pyp-forest);
	font-weight: 600;
}

/* Cell text sits in its own layer (prose.js wraps it in <span>) so it can step forward
   on hover without moving the cell or its borders. */
.pyp-prose tbody td > .pyp-prose__cell {
	display: inline-block;
	transition: transform var(--pyp-dur) var(--pyp-ease-out);
}

/* Hover: the row turns a stronger green, a bar lights its left edge, the text shifts in */
@media (hover: hover) {
	.pyp-prose tbody tr:hover > * {
		background: rgba(29, 112, 68, 0.1);
		color: var(--pyp-forest);
	}

	.pyp-prose tbody tr:hover > :first-child {
		box-shadow: inset 3px 0 0 var(--pyp-green);
		color: var(--pyp-green);
	}

	.pyp-prose tbody tr:hover > td > .pyp-prose__cell {
		transform: translateX(4px);
	}
}


/* Photos ---------------------------------------------------------------------
   prose.js puts each single photo in a zoom button (.pyp-prose__zoom) and each
   gallery photo in a tile (.pyp-prose__tile); both show a soft placeholder
   (.is-loading) until the photo arrives, then fade it in (.is-loaded). */
.pyp-prose figure {
	margin: 32px 0 38px;
}

.pyp-prose figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

.pyp-prose figure:not([data-cols]) img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 24px;
}

.pyp-prose figcaption {
	margin-top: 12px;
	color: var(--pyp-prose-soft);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.pyp-prose :is(.pyp-prose__zoom, .pyp-prose__tile) {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: linear-gradient(110deg, #eef4ea 30%, #f8fbf6 50%, #eef4ea 70%) 0 0 / 300% 100%;
	cursor: zoom-in;
	isolation: isolate;
}

.pyp-prose__zoom {
	border-radius: 24px;
	box-shadow: 0 28px 54px -32px rgba(15, 59, 39, 0.6);
}

.pyp-prose :is(.pyp-prose__zoom, .pyp-prose__tile).is-loading {
	animation: pyp-prose-shimmer 1.4s linear infinite;
}

@keyframes pyp-prose-shimmer {
	to { background-position: -150% 0; }
}

.pyp-prose :is(.pyp-prose__zoom, .pyp-prose__tile) img {
	opacity: 0;
	transform: scale(1.03);
	transition: opacity 600ms var(--pyp-ease-out), transform 900ms var(--pyp-ease-out);
}

.pyp-prose :is(.pyp-prose__zoom, .pyp-prose__tile).is-loaded img {
	opacity: 1;
	transform: none;
}

.pyp-prose :is(.pyp-prose__zoom, .pyp-prose__tile):focus-visible {
	outline: 2px solid var(--pyp-green);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.pyp-prose :is(.pyp-prose__zoom, .pyp-prose__tile).is-loaded:hover img {
		transform: scale(1.045);
	}
}

/* Any photo in the body fits its column and keeps its proportions, however the editor wrapped it
   (its width and height attributes only reserve the space while it loads) */
.pyp-prose img {
	max-width: 100%;
	height: auto;
}

/* Photos written into old editor HTML (pages not yet on sections) */
.pyp-prose > img,
.pyp-prose p > img,
.pyp-prose p > :is(strong, b, em, a) > img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 26px 0;
	border-radius: 24px;
}

/* Gallery: prose.js sets --pyp-cols (from data-cols; 2 on phones) and lays the tiles out.
   One column is 4:3; a tile spanning n columns stays one row tall (4n:3). */
.pyp-prose__gallery {
	display: grid;
	grid-template-columns: repeat(var(--pyp-cols, 3), minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: 12px;
}

.pyp-prose__tile {
	grid-column: span var(--pyp-span, 1);
	aspect-ratio: calc(4 * var(--pyp-span, 1)) / 3;
	border-radius: 18px;
	box-shadow: 0 16px 30px -24px rgba(15, 59, 39, 0.6);
}

.pyp-prose__tile[hidden] {
	display: none;
}

/* Two classes deep: outranks the general `.pyp-prose figure img { height: auto }` */
.pyp-prose .pyp-prose__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pyp-prose__tile::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(15, 59, 39, 0.08);
	pointer-events: none;
}

/* Five or more photos, all on show: the first takes a 2×2 block (a full-width band on phones) */
.pyp-prose__gallery.is-mosaic .pyp-prose__tile:first-child {
	grid-row: span 2;
	grid-column: span 2;
	height: 100%;
	aspect-ratio: auto;
}

.pyp-prose__gallery.is-mosaic-phone .pyp-prose__tile:first-child {
	grid-column: span 2;
	aspect-ratio: 8 / 3;
}

/* "+N": the last tile on show darkens under frosted glass and counts the rest */
.pyp-prose__tile[data-more]::before {
	content: attr(data-more);
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	background: rgba(8, 30, 19, 0.52);
	-webkit-backdrop-filter: blur(3px) saturate(120%);
	backdrop-filter: blur(3px) saturate(120%);
	color: #fff;
	font-family: var(--pyp-font-menu);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 600;
	letter-spacing: -0.02em;
	transition: background-color var(--pyp-dur) var(--pyp-ease-out);
}

@media (hover: hover) {
	.pyp-prose__tile[data-more]:hover::before {
		background: rgba(8, 30, 19, 0.38);
	}
}


/* Q&A written into the body: plain <details> that open on tap ----------------- */
.pyp-prose details {
	margin: 10px 0;
	border: 1px solid var(--pyp-prose-line);
	border-radius: 16px;
	background: #fff;
	transition: border-color var(--pyp-dur) var(--pyp-ease-out), box-shadow var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-prose details[open] {
	border-color: rgba(29, 112, 68, 0.3);
	box-shadow: 0 16px 34px -24px rgba(15, 59, 39, 0.45);
}

.pyp-prose summary {
	position: relative;
	padding: 15px 54px 15px 18px;
	list-style: none;
	color: var(--pyp-forest);
	font-family: var(--pyp-font-menu);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.pyp-prose summary::-webkit-details-marker {
	display: none;
}

.pyp-prose summary::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 16px;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	border-radius: 50%;
	background: var(--pyp-prose-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7044' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
	transition: transform var(--pyp-dur) var(--pyp-ease-out);
}

.pyp-prose details[open] > summary::after {
	transform: rotate(45deg);
}

.pyp-prose details > p {
	margin: 0;
	padding: 0 18px 18px;
	font-size: 0.95em;
}


/* Phones -------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.pyp-prose h2 {
		margin: 30px 0 14px;
		padding-top: 14px;
	}

	.pyp-prose h2::before {
		margin-bottom: 10px;
	}

	.pyp-prose h3 {
		margin-top: 28px;
	}

	.pyp-prose li {
		padding-left: 31px;
	}

	.pyp-prose blockquote {
		padding: 20px 20px 20px 52px;
	}

	.pyp-prose blockquote::before {
		left: 16px;
		font-size: 46px;
	}

	.pyp-prose__table,
	.pyp-prose > table {
		--pyp-table-pad: 14px; /* the phone page margin: the pane meets the screen edge */
		border-radius: 4px;
	}

	.pyp-prose th,
	.pyp-prose td {
		padding: 10px var(--pyp-table-pad, 14px);
	}

	.pyp-prose h3 {
		padding-left: 14px;
	}

	/* Tables of three or more columns: each row becomes a card with its label on a mint
	   band and the other columns as label / value lines */
	.pyp-prose__table.is-stackable {
		overflow: visible;
		border: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	/* (.pyp-prose prefix: outranks `table:has(tr > :nth-child(4)) { min-width }`) */
	.pyp-prose .pyp-prose__table.is-stackable table {
		min-width: 0;
	}

	.pyp-prose__table.is-stackable thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.pyp-prose__table.is-stackable tbody,
	.pyp-prose__table.is-stackable tr,
	.pyp-prose__table.is-stackable td {
		display: block;
	}

	.pyp-prose__table.is-stackable tr {
		margin: 0 0 10px;
		overflow: hidden;
		border-radius: 4px;
		background: linear-gradient(135deg, rgba(240, 247, 236, 0.85), rgba(255, 255, 255, 0.6));
		-webkit-backdrop-filter: blur(16px) saturate(160%);
		backdrop-filter: blur(16px) saturate(160%);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
	}

	.pyp-prose__table.is-stackable td {
		display: grid;
		grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
		gap: 10px;
		padding: 8px 14px;
		border: 0;
		background: none;
	}

	.pyp-prose__table.is-stackable td + td {
		border-top: 1px solid rgba(15, 59, 39, 0.07);
		border-left: 0;
	}

	.pyp-prose__table.is-stackable td::before {
		content: attr(data-label);
		color: var(--pyp-prose-soft);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.06em;
		line-height: 1.75;
		text-transform: uppercase;
	}

	/* The first cell is the card's title, on a mint band */
	.pyp-prose__table.is-stackable td:first-child {
		display: block;
		padding: 10px 14px;
		background: rgba(29, 112, 68, 0.1);
		font-size: 1.02em;
	}

	.pyp-prose__table.is-stackable td:first-child::before {
		display: block;
		margin-bottom: 1px;
		color: var(--pyp-green);
	}

	.pyp-prose__gallery {
		gap: 8px;
	}

	.pyp-prose__tile {
		border-radius: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pyp-prose *,
	.pyp-lightbox * {
		transition: none !important;
		animation: none !important;
	}
}


/* Lightbox: one viewer for every photo in the body (built by prose.js)
   ========================================================================== */
.pyp-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: var(--cnvs-primary-font, 'Jost', sans-serif);
}

.pyp-lightbox[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.pyp-lightbox::backdrop {
	background: rgba(5, 18, 12, 0);
	transition: background-color 260ms ease-out;
}

.pyp-lightbox.is-open::backdrop {
	background: rgba(5, 18, 12, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.pyp-lightbox__stage {
	grid-row: 2;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 14px;
	min-height: 0;
	margin: 0;
	padding: 64px clamp(16px, 7vw, 96px) 12px;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 260ms ease-out, transform 360ms var(--pyp-ease-out);
}

.pyp-lightbox.is-open .pyp-lightbox__stage {
	opacity: 1;
	transform: none;
}

.pyp-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 210px);
	border-radius: 16px;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
	object-fit: contain;
	pointer-events: auto;
	transition: opacity 220ms ease-out;
}

.pyp-lightbox.is-switching .pyp-lightbox__img {
	opacity: 0.25;
}

.pyp-lightbox__caption {
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	text-align: center;
}

.pyp-lightbox__count {
	position: absolute;
	top: 22px;
	left: 24px;
	margin: 0;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.pyp-lightbox__count:empty {
	display: none;
}

.pyp-lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	transition: background-color 160ms ease-out, transform 120ms ease-out;
}

.pyp-lightbox__btn:hover {
	background: rgba(255, 255, 255, 0.22);
}

.pyp-lightbox__btn:active {
	transform: scale(0.94);
}

.pyp-lightbox__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.pyp-lightbox__close {
	top: 16px;
	right: 18px;
}

.pyp-lightbox__nav {
	top: 50%;
	margin-top: -24px;
}

.pyp-lightbox__nav--prev { left: 18px; }
.pyp-lightbox__nav--next { right: 18px; }

.pyp-lightbox.is-single .pyp-lightbox__nav,
.pyp-lightbox.is-single .pyp-lightbox__thumbs {
	display: none;
}

.pyp-lightbox__thumbs {
	grid-row: 3;
	display: flex;
	gap: 8px;
	justify-content: safe center;
	padding: 6px 16px calc(18px + env(safe-area-inset-bottom));
	overflow-x: auto;
	scrollbar-width: none;
}

.pyp-lightbox__thumbs button {
	flex: 0 0 auto;
	width: 64px;
	height: 48px;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 160ms ease-out, border-color 160ms ease-out;
}

.pyp-lightbox__thumbs button[aria-current] {
	border-color: #fff;
	opacity: 1;
}

.pyp-lightbox__thumbs img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767.98px) {
	.pyp-lightbox__stage {
		padding-inline: 10px;
	}

	.pyp-lightbox__nav {
		top: auto;
		bottom: calc(86px + env(safe-area-inset-bottom));
		width: 42px;
		height: 42px;
	}

	.pyp-lightbox__img {
		max-height: calc(100vh - 240px);
	}
}