/* ==========================================================================
   Blog additions — layered on top of style.css (Veil). Same type + palette.
   ========================================================================== */

/* style.css's reset only sets border-box on older tags; include the HTML5 ones we use */
article, section, nav, aside, header, footer, button { box-sizing:border-box; }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Journal: intro, search, categories ---------- */

.journal-title {
	font-size:3.2rem;
	line-height:3.4rem;
	letter-spacing:1px;
	margin-bottom:1rem;
}
.journal-desc { max-width:30rem; }
.journal-search {
	display:flex;
	align-items:center;
	border-bottom:1px solid #ccc;
	max-width:22rem;
	margin:1.6rem 0 0 auto;
	transition:border-color .2s;
}
.journal-search:focus-within { border-color:#111; }
.journal-search input {
	flex:1;
	border:0;
	background:none;
	font:300 1rem/2.4rem Roboto, "Helvetica Neue", Arial, sans-serif;
	color:#111;
	padding:0;
	outline:none;
	-webkit-appearance:none;
}
.journal-search button {
	border:0; background:none; cursor:pointer;
	font-size:1.1rem; color:#767676; padding:0 0 0 10px;
}
.journal-search button:hover { color:#111; }

.category-nav {
	margin-top:2.2rem;
	display:flex;
	flex-wrap:wrap;
	gap:6px 26px;
	font-size:0.9rem;
	line-height:1.6rem;
}
.category-nav a { color:#767676; border-bottom:1px solid transparent; padding-bottom:2px; }
.category-nav a:hover { color:#111; }
.category-nav a.active { color:#111; border-bottom-color:#111; }
.category-nav sup { font-size:0.6rem; margin-left:3px; vertical-align:top; position:relative; top:-2px; }

.filter-label { margin-top:2rem; }
.filter-label p { margin-bottom:0.4rem; }

/* ---------- Journal: post cards ---------- */

.journal .meta, .journal .meta a,
.single .post-head .meta { color:#1a7f4b; }
.journal .meta a:hover, .single .post-head a.meta:hover { color:#11603a; }
.meta .dot { color:#9ccfb3; }
.meta .dot { margin:0 0.55rem; }
.journal .post-card h2 a { color:#111; transition:color .2s; }
.journal .post-card h2 a:hover { color:#1a7f4b; }
.read-more { font-size:0.9rem; display:inline-block; margin-bottom:2rem; }
.journal .post-card h2 { font-size:2.2rem; line-height:2.9rem; letter-spacing:0.3px; margin:0 0 2.2rem; }
/* metadata sits above the title */
.journal .post-card .meta { display:block; margin:-0.3rem 0 0.35rem; }
.journal .text-only h2 { font-size:2.4rem; line-height:3.1rem; }

/* ---------- Pagination ---------- */

.pagination { font-size:0.95rem; line-height:2.4rem; align-items:center; }
.pagination .numbers { text-align:center; }
.pagination .next { text-align:right; }
.pagination .numbers a,
.pagination .numbers span {
	display:inline-block;
	min-width:2.4rem;
	height:2.4rem;
	text-align:center;
	border-radius:50%;
	color:#767676;
}
.pagination .numbers a:hover { color:#111; background:rgb(235, 254, 243); }
.pagination .numbers .current { color:#111; background:rgb(235, 254, 243); font-weight:400; }
.pagination .numbers .gap { min-width:1.2rem; }

/* ---------- Browse: categories / tags / archive ---------- */

.journal-browse h4 {
	font-family:Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size:0.75rem;
	text-transform:uppercase;
	letter-spacing:2px;
	color:#767676;
	margin:1rem 0 1.2rem;
}
.journal-browse .browse-col { padding-right:40px; margin-bottom:2rem; }
.journal-browse ul li { font-size:0.95rem; line-height:1.6rem; margin-bottom:0.4rem; }
.journal-browse ul li .faint { font-size:0.8rem; margin-left:4px; }
.journal-browse ul li a:hover { color:#5a5a5a; }
.journal-browse ul li.active a { color:#1a7f4b; }
.journal-browse .ext { font-size:0.75rem; color:#9a9a9a; margin-left:2px; }
.journal-browse .browse-about { font-size:0.95rem; line-height:1.6rem; max-width:20rem; margin-bottom:0.8rem; }

.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag {
	display:inline-block;
	font-size:0.8rem;
	line-height:1.2rem;
	padding:5px 12px;
	border:1px solid #e3e3e3;
	border-radius:20px;
	color:#5a5a5a;
	transition:background .2s, border-color .2s, color .2s;
}
.tag:hover, .tag.active { background:rgb(235, 254, 243); border-color:rgb(205, 238, 219); color:#111; }

/* ---------- Single post ---------- */

.single .post-head img { margin-top:1rem; }
.single .post-head h2.large { max-width:46rem; margin-left:auto; margin-right:auto; margin-bottom:1rem; }

.post-content { color:#5a5a5a; font-size:1rem; font-weight:300; line-height:1.6rem; }
/* Same rhythm as single.html (style.css p + .list) */
.post-content p { font-size:1rem; font-weight:300; line-height:1.6rem; margin-bottom:1.5rem; color:#5a5a5a; }
.post-content li { font-size:1rem; font-weight:300; line-height:1.6rem; margin-bottom:0.6rem; color:#5a5a5a; }
.post-content h2 { font-size:1.6rem; line-height:2.2rem; margin:2.6rem 0 1rem; color:#111; }
.post-content h3 { font-size:1.2rem; line-height:1.8rem; margin:2.2rem 0 1rem; color:#111; }
.post-content h4 { margin:1.8rem 0 0.6rem; color:#111; }
.post-content a { color:#111; border-bottom:1px solid #aaa; }
.post-content a:hover { border-bottom-color:#111; }
.post-content strong, .post-content b { font-weight:500; color:#111; }
.post-content em, .post-content i { font-style:italic; }
.post-content u { text-decoration:underline; }
.post-content s { text-decoration:line-through; }
.post-content ul, .post-content ol { margin:0 0 1.5rem 0; }
.post-content ul li { list-style:circle; margin-left:1.2rem; }
.post-content ol li { list-style:decimal; margin-left:1.2rem; }
.post-content img { margin:0 0 1.5rem; height:auto; }
.post-content p > img:only-child { margin:0; }
.post-content blockquote {
	margin:2rem 0;
	padding:0.2rem 0 0.2rem 1.6rem;
	border-left:2px solid #111;
	font-family:"Playfair Display", "Times New Roman", serif;
	font-size:1.25rem;
	line-height:2rem;
	color:#111;
}
.post-content pre {
	background:#f6f6f4;
	padding:1.2rem 1.4rem;
	margin:0 0 1.5rem;
	overflow-x:auto;
	font:0.82rem/1.4rem "SFMono-Regular", Menlo, Consolas, monospace;
	color:#111;
	white-space:pre;
}
.post-content code {
	font:0.85em "SFMono-Regular", Menlo, Consolas, monospace;
	background:#f3f3f1;
	padding:2px 5px;
	color:#111;
}
.post-content pre code { background:none; padding:0; }
.post-content iframe { width:100%; aspect-ratio:16/9; height:auto; border:0; margin:1rem 0 2rem; }
.post-content hr { border:0; height:1px; background:#ddd; margin:2.5rem 0; }
.post-content .ql-align-center { text-align:center; }
.post-content .ql-align-right { text-align:right; }
.post-content::after { content:""; display:table; clear:both; }

.post-tags { display:flex; flex-wrap:wrap; gap:8px; margin:2.5rem 0 1.5rem; }

.post-share {
	margin-top:3rem;
}
.share-label {
	display:block;
	font-size:0.75rem;
	line-height:1rem;
	text-transform:uppercase;
	letter-spacing:2px;
	color:#767676;
	margin-bottom:0.8rem;
}
.share-link {
	display:flex;
	align-items:center;
	gap:12px;
	width:100%;
	padding:8px 8px 8px 16px;
	border:1px solid #e3e3e3;
	border-radius:30px;
	background:#fff;
	font:300 0.85rem/1.4rem Roboto, "Helvetica Neue", Arial, sans-serif;
	color:#5a5a5a;
	text-align:left;
	cursor:pointer;
	transition:border-color .2s, background .2s;
}
.share-link:hover { border-color:#9effd8; background:rgb(245, 255, 250); }
.share-icon { flex:none; color:#1a7f4b; }
.share-url { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-action {
	flex:none;
	background:#111;
	color:#fff;
	font-weight:400;
	font-size:0.8rem;
	padding:6px 16px;
	border-radius:20px;
	transition:background .2s;
}
.share-link:hover .share-action { background:#333; }
.share-link.copied .share-action { background:#1a7f4b; }

.post-nav { display:flex; gap:30px; margin-top:3rem; }
.post-nav-item { flex:1; }
.post-nav-item.next { text-align:right; }
.post-nav-item span { display:block; margin-bottom:0.3rem; }
.post-nav-item a { font-family:"Gilda Display", "Times New Roman", serif; font-size:1.15rem; line-height:1.6rem; }
.post-nav-item a:hover { color:#5a5a5a; }

.related h4 {
	font-family:Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size:0.75rem; text-transform:uppercase; letter-spacing:2px; color:#767676;
	margin-bottom:2rem;
}
.related-item { padding:0 15px; }
.related-item img, .related-blank { aspect-ratio:4/3; object-fit:cover; margin-bottom:0.8rem; }
.related-blank { background:rgb(235, 254, 243); }
.related-title { display:block; font-family:"Gilda Display", "Times New Roman", serif; font-size:1.1rem; line-height:1.5rem; margin-bottom:0.3rem; }
.related-item a:hover .related-title { color:#5a5a5a; }

.preview-bar {
	background:#111; color:#fff; font-size:0.85rem; line-height:1.4rem;
	text-align:center; padding:10px 20px; position:relative; z-index:10;
}
.preview-bar a { color:#fff; text-decoration:underline; margin-left:10px; }

/* ---------- Comments ---------- */

.comments h3 { font-size:1.5rem; line-height:2rem; margin-bottom:1.5rem; }
.comment-list { margin:0 0 2rem; }
.comment-list ol { margin:0; }
.comment { display:flex; gap:16px; padding:1.4rem 0; border-top:1px solid #eee; }
.comment.reply { border-top:0; padding:0.6rem 0 0.6rem 56px; }
.comment-avatar {
	flex:0 0 40px; height:40px; border-radius:50%;
	background:#f1f1ef; color:#5a5a5a;
	font:400 1rem/40px "Gilda Display", "Times New Roman", serif; text-align:center;
}
.comment.by-author .comment-avatar { background:rgb(235, 254, 243); color:#111; }
.comment-body { flex:1; min-width:0; }
.comment-head { font-size:0.9rem; line-height:1.4rem; margin-bottom:0.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.comment-author { font-weight:400; color:#111; }
.comment-author a { color:#111; border-bottom:1px solid #ccc; }
.comment-date { font-size:0.8rem; }
.badge {
	font-size:0.65rem; letter-spacing:1px; text-transform:uppercase;
	background:rgb(235, 254, 243); color:#111; padding:1px 8px; border-radius:10px;
}
.comment-text p { font-size:0.95rem; line-height:1.6rem; margin-bottom:0.6rem; word-wrap:break-word; }
.comment-text a { color:#111; border-bottom:1px solid #aaa; }
.reply-link { font-size:0.8rem; color:#767676; }
.reply-link:hover { color:#111; }

.comment-form-wrap { margin-top:1rem; }
.comment-body .comment-form-wrap { margin-top:1.2rem; padding:1.2rem; background:#fafaf9; }
.comment-form-wrap h4 { font-size:1.15rem; margin-bottom:1rem; }
.replying-to { font-family:Roboto, "Helvetica Neue", Arial, sans-serif; font-size:0.85rem; color:#767676; }
.replying-to a { color:#111; text-decoration:underline; margin-left:6px; }
.comment-form { display:flex; flex-wrap:wrap; gap:0 4%; }
.comment-form .field { display:block; width:48%; margin-bottom:1.2rem; }
.comment-form .field.full { width:100%; }
.comment-form .field span { display:block; font-size:0.8rem; line-height:1.4rem; color:#5a5a5a; margin-bottom:4px; }
.comment-form .field em { font-style:normal; }
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea {
	width:100%;
	box-sizing:border-box;
	border:0;
	border-bottom:1px solid #ccc;
	background:transparent;
	font:300 1rem/1.5rem Roboto, "Helvetica Neue", Arial, sans-serif;
	color:#111;
	padding:6px 0;
	border-radius:0;
	outline:none;
	transition:border-color .2s;
	-webkit-appearance:none;
}
.comment-form textarea { border:1px solid #ddd; padding:10px 12px; resize:vertical; min-height:120px; }
.comment-form input:focus, .comment-form textarea:focus { border-color:#111; }
.comment-form .remember { width:100%; font-size:0.8rem; color:#767676; margin-bottom:1.2rem; }
.comment-form .remember input { margin-right:6px; vertical-align:middle; }
.hp { position:absolute; left:-9999px; height:0; overflow:hidden; }
.btn {
	display:inline-block;
	background:#111; color:#fff;
	border:0; border-radius:0;
	font:400 0.9rem/1rem Roboto, "Helvetica Neue", Arial, sans-serif;
	letter-spacing:0.5px;
	padding:14px 26px;
	cursor:pointer;
	transition:background .2s;
}
.btn:hover { background:#333; }
.btn:disabled { background:#888; cursor:default; }

.notice { font-size:0.9rem; line-height:1.5rem; padding:12px 16px; margin-bottom:1.5rem; }
.notice.ok { background:rgb(235, 254, 243); color:#14532d; }
.notice.error { background:#fdf0ef; color:#8a1f17; }

/* ---------- Responsive ---------- */

@media only screen and (max-width: 960px) {
	.journal-search { margin:0.5rem 0 0 0; max-width:none; }
	.journal-browse .browse-col { padding-right:0; }
}

@media only screen and (max-width: 540px) {
	.journal-title { font-size:2.4rem; line-height:2.6rem; }
	.journal .post-card h2, .journal .text-only h2 { font-size:1.7rem; line-height:2.3rem; }
	.pagination .numbers a:not(.current), .pagination .numbers .gap { display:none; }
	.pagination .numbers::after { content:""; }
	.comment-form .field { width:100%; }
	.comment.reply { padding-left:20px; }
	.post-nav { flex-direction:column; gap:20px; }
	.post-nav-item.next { text-align:left; }
	.related-item { padding:0; margin-bottom:1.5rem; }
	.single .post-head h2.large { font-size:1.8rem; line-height:2.3rem; }
}

/* Keep list images a consistent shape whatever size you upload */
.journal .post-card .col-12 img { aspect-ratio: 16 / 9; object-fit: cover; }
.journal .post-card .col-5 img, .journal .post-card .col-6 img { aspect-ratio: 4 / 3; object-fit: cover; }
.single .post-head img { max-height: 80vh; object-fit: cover; }

/* ---------- Portfolio-style posts: wide images, videos, links ---------- */
.post-content figure { margin:0 0 2.5rem; }
.post-content figure img,
.post-content figure video { display:block; width:100%; height:auto; margin:0; }
.post-content video { background:#004481; border-radius:5px; }
/* "wide" figures break out of the text column to the full page width */
.post-content figure.wide {
	position:relative;
	left:50%;
	/* same width as the page container's content area */
	width:calc(100vw - 2 * var(--gutter, 30px));
	max-width:calc(var(--container-max, 1760px) - 2 * var(--gutter, 30px));
	transform:translateX(-50%);
}
.post-content h3 + figure { margin-top:0.5rem; }
.post-content figure + h3 { margin-top:3.5rem; }
.post-content a.visit-link {
	color:#111;
	border-bottom:2px solid #9effd8;
	padding-bottom:1px;
}
.post-content a.visit-link:hover { border-bottom-color:#111; }
@media only screen and (max-width: 540px) {
}

/* Full-width hero image on Portfolio posts */
.post-hero { margin-top:3rem; }
.post-hero img { display:block; width:100%; height:auto; }

/* Full-width images for Portfolio posts in the Journal list */
.journal .portfolio-card h2 { margin-bottom:0; }
.journal .portfolio-card .portfolio-summary { clear:both; }
.journal .portfolio-card .col-3.col-lg-hide + .portfolio-summary,
.journal .portfolio-card .col-6.col-lg-hide + .portfolio-summary { clear:none; }
.journal .portfolio-card .portfolio-summary p { margin:1.6rem 0 0; }
.journal-hero { margin-top:1.8rem; }
.journal-hero a { display:block; border:0; }
.journal-hero img { display:block; width:100%; height:auto; margin:0; aspect-ratio:21 / 9; object-fit:cover; transition:opacity .3s; }
.journal-hero a:hover img { opacity:0.92; }
@media only screen and (max-width: 540px) {
	.journal-hero { margin-top:1.5rem; }
	.journal-hero img { aspect-ratio:4 / 3; }
}

/* image options set in the editor: smaller sizes and a thin border */
.post-content img.img-medium { width:66%; }
.post-content img.img-small { width:40%; }
.post-content img.img-border { border:1px solid #dcdcdc; }
@media (max-width: 600px) {
	.post-content img.img-small { width:66%; }
	.post-content img.img-medium { width:100%; }
}
/* videos added in the visual editor: full width by default, with the same size options as images */
.post-content > video { display:block; width:100%; height:auto; margin:0 0 1.5rem; background:transparent; border-radius:0; }
.post-content > video.vid-medium { width:66%; }
.post-content > video.vid-small { width:40%; }
.post-content > video.vid-center { margin-left:auto; margin-right:auto; }
/* wrap: the video sits to one side and the text flows around it */
.post-content > video.vid-wrap-left { float:left; width:45%; margin:0.3rem 1.25rem 0.75rem 0; }
.post-content > video.vid-wrap-right { float:right; width:45%; margin:0.3rem 0 0.75rem 1.25rem; }
.post-content > video.vid-wrap-left.vid-medium, .post-content > video.vid-wrap-right.vid-medium { width:55%; }
.post-content > video.vid-wrap-left.vid-small, .post-content > video.vid-wrap-right.vid-small { width:33%; }
/* below ~130px browsers drop the play button, so videos with controls never get narrower than this */
.post-content > video[controls] { min-width:160px; }
/* keep videos above the paragraphs next to them, or a wrapped video's controls can't be clicked */
.post-content > video { position:relative; z-index:1; }
.post-content h2, .post-content h3, .post-content hr, .post-content figure { clear:both; } /* new sections start below a wrapped video */
@media (max-width: 600px) {
	.post-content > video.vid-small { width:66%; }
	.post-content > video.vid-medium { width:100%; }
	/* keep wrapping on phones, with a slimmer video and tighter gap so the text column stays readable */
	.post-content > video.vid-wrap-left, .post-content > video.vid-wrap-right { width:42%; }
	.post-content > video.vid-wrap-left.vid-medium, .post-content > video.vid-wrap-right.vid-medium { width:50%; }
	.post-content > video.vid-wrap-left.vid-small, .post-content > video.vid-wrap-right.vid-small { width:34%; }
	.post-content > video.vid-wrap-left { margin:0.25rem 0.75rem 0.5rem 0; }
	.post-content > video.vid-wrap-right { margin:0.25rem 0 0.5rem 0.75rem; }
}
/* images are display:block site-wide, so text-align can't move them — use auto margins */
.post-content .ql-align-center img,
.post-content p.ql-align-center > img { margin-left:auto; margin-right:auto; }
.post-content .ql-align-right img,
.post-content p.ql-align-right > img { margin-left:auto; margin-right:0; }

/* mat: a soft panel behind the image, like a print in a gallery mat.
   multiply lets white image backgrounds melt into the panel tone. */
.post-content p:has(> img.img-mat) { background:#f5f4f2; padding:3rem; margin-bottom:2rem; border-radius:3px; }
.post-content img.img-mat { mix-blend-mode:multiply; filter:brightness(1.04); margin-bottom:0; }
@media (max-width: 600px) {
	.post-content p:has(> img.img-mat) { padding:1.25rem; }
}

/* captions */
.post-content p:has(> .img-caption) > img { margin-bottom:0; }
.post-content .img-caption {
	display:block; margin:0.75rem 0 0.5rem;
	font-family:"Playfair Display", Georgia, serif; font-style:italic; font-weight:400;
	font-size:0.9rem; line-height:1.4rem; color:#8a8a8a;
}
.post-content p:has(> img.img-mat) .img-caption { margin-bottom:0; margin-top:1.25rem; }

/* side by side: two or more images in the same paragraph sit in a row, sharing the width */
.post-content p:has(> img + img) { display:flex; gap:1rem; align-items:flex-start; }
.post-content p:has(> img + img) > img { flex:1 1 0; min-width:0; width:auto; margin-left:0; margin-right:0; }
@media (max-width: 600px) {
	.post-content p:has(> img + img) { gap:0.5rem; }
}

/* wrap: the image sits to one side and the text flows around it, like videos.
   The image's paragraph floats, so a caption stays with its image. */
.post-content p:has(> img.img-wrap-left), .post-content p:has(> img.img-wrap-right) { width:45%; margin-top:0.3rem; margin-bottom:0.75rem; box-sizing:border-box; }
.post-content p:has(> img.img-wrap-left) { float:left; margin-right:1.25rem; }
.post-content p:has(> img.img-wrap-right) { float:right; margin-left:1.25rem; }
.post-content p:has(> img.img-wrap-left.img-medium), .post-content p:has(> img.img-wrap-right.img-medium) { width:55%; }
.post-content p:has(> img.img-wrap-left.img-small), .post-content p:has(> img.img-wrap-right.img-small) { width:33%; }
.post-content img.img-wrap-left, .post-content img.img-wrap-right { width:100%; margin:0; }
.post-content p:has(> img.img-wrap-left) .img-caption, .post-content p:has(> img.img-wrap-right) .img-caption { margin-bottom:0; }
@media (max-width: 600px) {
	/* keep wrapping on phones, with a slimmer image and tighter gap so the text column stays readable */
	.post-content p:has(> img.img-wrap-left), .post-content p:has(> img.img-wrap-right) { width:42%; }
	.post-content p:has(> img.img-wrap-left.img-medium), .post-content p:has(> img.img-wrap-right.img-medium) { width:50%; }
	.post-content p:has(> img.img-wrap-left.img-small), .post-content p:has(> img.img-wrap-right.img-small) { width:34%; }
	.post-content p:has(> img.img-wrap-left) { margin-right:0.75rem; }
	.post-content p:has(> img.img-wrap-right) { margin-left:0.75rem; }
}

/* ---------- Photo carousel ----------
   In a post (HTML tab): <div class="carousel"><img src="…" alt="…"> <img …> …</div>
   Swipe on phones, arrows or keys on desktop. Photos of any shape fit without cropping. */
.post-content .carousel { position:relative; clear:both; margin:0 0 2rem; }
.post-content .carousel-track {
	display:flex;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	background:#f1f0ec;
	border-radius:5px;
	outline:none;
}
.post-content .carousel-track::-webkit-scrollbar { display:none; }
.post-content .carousel-track:focus-visible { box-shadow:0 0 0 2px #111; }
.post-content .carousel img {
	flex:0 0 100%;
	width:100%;
	aspect-ratio:4 / 3;
	object-fit:contain;
	scroll-snap-align:center;
	scroll-snap-stop:always;
	margin:0;
}
.post-content .carousel-btn {
	position:absolute;
	top:50%;
	transform:translateY(calc(-50% - 1rem));
	width:2.6rem;
	height:2.6rem;
	border:0;
	border-radius:50%;
	background:rgba(255,255,255,.88);
	box-shadow:0 1px 4px rgba(0,0,0,.18);
	color:#111;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:opacity .2s, background .2s;
}
.post-content .carousel-btn:hover { background:#fff; }
.post-content .carousel-btn[disabled] { opacity:0; pointer-events:none; }
.post-content .carousel-prev { left:0.75rem; }
.post-content .carousel-next { right:0.75rem; }
.post-content .carousel-foot {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	margin-top:0.75rem;
	font-family:Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size:0.8rem;
	color:#767676;
}
.post-content .carousel-dots { display:flex; flex-wrap:wrap; gap:0.45rem; }
.post-content .carousel-dot {
	width:0.5rem;
	height:0.5rem;
	padding:0;
	border:0;
	border-radius:50%;
	background:#d0d0cc;
	cursor:pointer;
}
.post-content .carousel-dot.active { background:#111; }
.post-content .carousel-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (hover:none) {
	.post-content .carousel-btn { display:none; }   /* swipe instead */
}