/*
 * Sometek Projects – project library.
 * Brand: lime #97C92A, headings "hernandezniu" (Use Any Font), text Cairo.
 * Override the tokens on .stp (or with the V4 variable --st-lime) to restyle.
 */

.stp {
	--stp-accent: var(--st-lime, #97C92A);
	--stp-accent-text: var(--stp-accent);
	--stp-on-accent: #10150A;
	--stp-text: #F2F4EC;
	--stp-muted: rgba(242, 244, 236, 0.64);
	--stp-surface: rgba(255, 255, 255, 0.035);
	--stp-surface-2: rgba(255, 255, 255, 0.07);
	--stp-line: rgba(255, 255, 255, 0.1);
	--stp-field: rgba(0, 0, 0, 0.28);
	--stp-font: Cairo, system-ui, -apple-system, "Segoe UI", sans-serif;
	--stp-font-head: hernandezniu, Georgia, serif;
	color: var(--stp-text);
	font-family: var(--stp-font);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	width: 100%;
	scroll-margin-top: 110px; /* clears the sticky site header when linked to with #projektikirjasto */
}

.stp--light {
	--stp-accent-text: var(--stp-accent); /* brand lime for accents on light backgrounds too */
	--stp-text: #1E2318;
	--stp-muted: #5E6455;
	--stp-surface: #FFFFFF;
	--stp-surface-2: #FFFFFF;             /* no tinted background on hover: border + shadow instead */
	--stp-line: rgba(20, 25, 15, 0.12);
	--stp-field: #FFFFFF;
	--stp-hover-shadow: 0 12px 32px rgba(20, 25, 15, 0.1);
}

.stp *,
.stp *::before,
.stp *::after { box-sizing: border-box; }

.stp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.stp-i {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

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

/* ---------- Filter bar (shown once the script runs) ---------- */

.stp-bar {
	display: grid;
	gap: 16px;
	padding: 22px;
	margin: 0 0 28px;
	border: 1px solid var(--stp-line);
	border-radius: 6px;
	background: var(--stp-surface);
}
.stp:not(.stp-js) .stp-bar { display: none; }

.stp .stp-search {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 0 16px 0 18px;
	margin: 0;
	border: 1px solid var(--stp-line);
	border-radius: 4px;
	background: var(--stp-field);
	color: var(--stp-muted);
	font-size: 20px;
	cursor: text;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.stp .stp-search:focus-within {
	border-color: var(--stp-accent);
	box-shadow: 0 0 0 3px rgba(151, 201, 42, 0.2);
}
.stp .stp-search .stp-q {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	color: var(--stp-text);
	font: 500 17px/1.4 var(--stp-font);
	letter-spacing: normal;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
}
.stp .stp-search .stp-q::placeholder { color: var(--stp-muted); opacity: 1; }
.stp .stp-search .stp-q::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; }
.stp .stp-kbd {
	background: transparent;
	box-shadow: none;
	padding: 2px 8px;
	border: 1px solid var(--stp-line);
	border-radius: 4px;
	color: var(--stp-muted);
	font: 600 12px/1.4 var(--stp-font);
}

.stp-facet {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 12px;
	align-items: start;
}
.stp-facet-label {
	padding-top: 9px;
	color: var(--stp-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.stp-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.stp .stp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 0;
	margin: 0;
	padding: 7px 13px;
	border: 1px solid var(--stp-line);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--stp-text);
	font: 600 13.5px/1.2 var(--stp-font);
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stp .stp-chip:hover { border-color: var(--stp-accent); background: transparent; color: var(--stp-text); }
.stp .stp-chip:focus-visible { outline: 2px solid var(--stp-accent); outline-offset: 2px; }
.stp .stp-chip.is-on,
.stp .stp-chip.is-on:hover { border-color: var(--stp-accent); background: var(--stp-accent); color: var(--stp-on-accent); }
.stp-n { font-size: 12px; font-weight: 500; opacity: 0.6; }
.stp .stp-chip--tag { padding: 5px 11px; font-size: 13px; font-weight: 500; }
.stp .stp-chip--tag.is-on,
.stp .stp-chip--tag.is-on:hover { background: rgba(151, 201, 42, 0.16); color: var(--stp-accent-text); }

.stp-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding-top: 14px;
	border-top: 1px solid var(--stp-line);
}
.stp .stp-count { margin: 0; color: var(--stp-muted); font-size: 14px; }
.stp .stp-count b { color: var(--stp-text); }
.stp .stp-reset,
.stp .stp-reset-link {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--stp-accent-text);
	font: 600 14px/1.4 var(--stp-font);
	letter-spacing: normal;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.stp .stp-reset[hidden] { display: none; }
/* tilarivi="ei": the count line appears only while the view is narrowed, so it can be cleared ("Näytä kaikki"). */
.stp:not(.is-narrowed) .stp-status--auto { display: none; }
/* No search or filters: the count line stands alone above the groups, without the box. */
.stp .stp-status--solo { margin: 0 0 14px; padding-top: 0; border-top: 0; }
.stp:not(.stp-js) .stp-status--auto { display: none; }

/* ---------- Groups (accordions) ---------- */

.stp-group { border-top: 1px solid var(--stp-line); }
.stp-group:last-child { border-bottom: 1px solid var(--stp-line); }
.stp-group[hidden] { display: none; }

.stp-sum {
	display: grid;
	/* name · description (one line, same row) · count · chevron */
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0 16px;
	padding: 14px 4px;
	list-style: none;
	cursor: pointer;
}
.stp-sum::-webkit-details-marker { display: none; }
.stp-sum::marker { content: ""; }
.stp-sum:focus-visible { outline: 2px solid var(--stp-accent); outline-offset: 2px; border-radius: 4px; }
.stp .stp-sum-name {
	color: var(--stp-text);
	font-family: var(--stp-font-head);
	font-size: clamp(18px, 1.5vw, 21px);
	font-weight: 600;
	line-height: 1.2;
	transition: color 0.2s;
}
.stp-sum:hover .stp-sum-name { color: var(--stp-accent-text); }
.stp-sum-desc {
	grid-column: 2;
	grid-row: 1;
	overflow: hidden;
	color: var(--stp-muted);
	font-size: 13px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.stp-sum-count {
	grid-column: 3;
	grid-row: 1;
	color: var(--stp-muted);
	font-size: 13px;
	white-space: nowrap;
}
.stp-sum-count b { color: var(--stp-accent-text); font-size: 15px; font-weight: 700; }
.stp-sum-chev {
	grid-column: 4;
	grid-row: 1;
	width: 28px;
	height: 28px;
	padding: 6px;
	border: 1px solid var(--stp-line);
	border-radius: 50%;
	color: var(--stp-accent-text);
	transition: transform 0.25s, background 0.2s;
}
.stp-sum:hover .stp-sum-chev { background: var(--stp-surface-2); }
.stp-group[open] .stp-sum-chev { transform: rotate(180deg); }
.stp-group--new .stp-sum-name::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 10px;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--stp-accent);
	box-shadow: 0 0 0 4px rgba(151, 201, 42, 0.2);
}

.stp .stp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0 0 28px;
	list-style: none;
}
.stp .stp-item { margin: 0; padding: 0; list-style: none; }
.stp .stp-item::before { content: none; }
.stp-item[hidden] { display: none !important; }

/* ---------- Project tile ---------- */

.stp .stp-card {
	position: relative;
	display: grid;
	grid-template-columns: 80px 1fr;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 10px 12px 10px 10px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--stp-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.stp .stp-card:hover,
.stp .stp-card:focus-visible {
	border-color: rgba(151, 201, 42, 0.55);
	background: var(--stp-surface-2);
	box-shadow: var(--stp-hover-shadow, none);
	color: inherit;
	transform: translateY(-2px);
}
.stp .stp-card:focus-visible { outline: 2px solid var(--stp-accent); outline-offset: 2px; }

.stp-thumb {
	display: grid;
	place-items: center;
	width: 80px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 4px;
	background: #1A2212;
}
.stp .stp-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.35s;
}
.stp-card:hover .stp-thumb img { transform: scale(1.07); }

/* No thumbnail: an icon tile drawn from the project type. */
.stp-ph {
	--stp-angle: 135deg;
	background: linear-gradient(var(--stp-angle), #24321A 0%, #121809 70%);
	color: var(--stp-accent);
}
.stp-ph .stp-i { width: 24px; height: 24px; transition: transform 0.3s; }
.stp-card:hover .stp-ph .stp-i { transform: scale(1.15) rotate(-4deg); }
.stp-v1 { --stp-angle: 45deg; }
.stp-v2 { --stp-angle: 200deg; color: #C2E36F; }
.stp-v3 { --stp-angle: 300deg; }
.stp-v4 { --stp-angle: 90deg; color: #C2E36F; }
.stp-v5 { --stp-angle: 160deg; }
.stp--light .stp-ph { background: linear-gradient(var(--stp-angle), #2A3A1C 0%, #141B0C 75%); }

.stp-body { display: grid; gap: 2px; min-width: 0; }
.stp .stp-name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--stp-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.stp .stp-desc {
	display: -webkit-box;
	overflow: hidden;
	color: var(--stp-muted);
	font-size: 13px;
	line-height: 1.4;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.stp .stp-meta {
	overflow: hidden;
	color: var(--stp-muted);
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* Badges on a tile: "Esittely" (has a longer presentation) and "Uusi". */
.stp-badges {
	position: absolute;
	top: -6px;
	right: 8px;
	display: flex;
	gap: 4px;
}
.stp-badge {
	padding: 3px 7px;
	border-radius: 3px;
	font: 700 10px/1.2 var(--stp-font);
	letter-spacing: 1px;
	text-transform: uppercase;
}
.stp-new { background: var(--stp-accent); color: var(--stp-on-accent); }
.stp-badge--more { border: 1px solid var(--stp-accent); background: #10150B; color: var(--stp-accent); padding: 2px 6px; }

/* With a mouse the description lives in the hover card; on touch screens it shows in the tile. */
@media (hover: hover) and (pointer: fine) {
	.stp .stp-desc {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

.stp-empty { margin: 24px 0 0; color: var(--stp-muted); }
.stp-empty[hidden] { display: none; }

/* ---------- "Nostot": large cards with the image on top ---------- */

.stp .stp-grid--feature {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}
.stp .stp-feature {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--stp-line);
	border-radius: 8px;
	background: var(--stp-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s, transform 0.25s;
}
.stp .stp-feature:hover,
.stp .stp-feature:focus-visible {
	border-color: rgba(151, 201, 42, 0.6);
	background: var(--stp-surface-2);
	box-shadow: var(--stp-hover-shadow, none);
	color: inherit;
	transform: translateY(-3px);
}
.stp .stp-feature:focus-visible { outline: 2px solid var(--stp-accent); outline-offset: 2px; }
.stp-feature-media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #121809;
}
.stp .stp-feature-media img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.stp-feature:hover .stp-feature-media img { transform: scale(1.04); }
.stp-feature-media.stp-ph .stp-i { width: 48px; height: 48px; stroke-width: 1.2; }
.stp-feature-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; }
.stp-feature-eyebrow {
	color: var(--stp-accent-text);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.stp .stp-feature-name {
	color: var(--stp-text);
	font-family: var(--stp-font-head);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}
.stp .stp-feature-desc {
	display: -webkit-box;
	overflow: hidden;
	color: var(--stp-muted);
	font-size: 14px;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.stp-feature-go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--stp-accent-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.stp-feature-go .stp-i { width: 16px; height: 16px; transition: transform 0.2s ease; }
.stp-feature:hover .stp-feature-go .stp-i { transform: translateX(4px); }
.stp-group--feature .stp-sum-name::before {
	content: "★";
	margin-right: 10px;
	color: var(--stp-accent);
	font-size: 0.8em;
	vertical-align: 0.08em;
}

/* Topic pills in the project card. */
.stp-pop-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.stp-pop-tags:empty { display: none; }
.stp-pop-tags span {
	padding: 2px 9px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	color: rgba(242, 244, 236, 0.72);
	font-size: 12px;
}


/* =====================================================================
   Strip ("nauha") and teaser grid ("ruudukko" / "lista")
   Both adapt to the width of their own container (container queries), so they also fit narrow places.
   ===================================================================== */

.stp-strip,
.stp-teaser { container-type: inline-size; }

.stp-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 24px;
	margin: 0 0 20px;
}
.stp .stp-head-title {
	flex: 1 1 auto;
	margin: 0;
	color: var(--stp-text);
	font-family: var(--stp-font-head);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.15;
}
.stp .stp-head-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--stp-accent-text);
	font: 700 13px/1.2 var(--stp-font);
	letter-spacing: 1.5px;
	text-decoration: none;
	text-transform: uppercase;
}
.stp .stp-head-link .stp-i { width: 16px; height: 16px; transition: transform 0.2s; }
.stp .stp-head-link:hover .stp-i { transform: translateX(4px); }

.stp-strip-nav { display: flex; gap: 8px; margin-left: auto; }
.stp-strip:not(.is-scrollable) .stp-strip-nav { visibility: hidden; }
.stp .stp-strip-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--stp-line);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--stp-text);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}
.stp .stp-strip-btn .stp-i { width: 18px; height: 18px; }
.stp .stp-strip-btn[data-dir="-1"] .stp-i { transform: rotate(180deg); }
.stp .stp-strip-btn:hover:not(:disabled) { border-color: var(--stp-accent); background: transparent; color: var(--stp-accent-text); }
.stp .stp-strip-btn:disabled { opacity: 0.3; cursor: default; }

.stp .stp-strip-track {
	display: grid;
	grid-auto-flow: column;
	/* Cards stretch to fill the strip while they fit; with more cards they keep their width and the strip scrolls. */
	grid-auto-columns: minmax(clamp(240px, 30cqi, 340px), 1fr);
	gap: 16px;
	margin: 0;
	padding: 4px 0 18px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-color: rgba(151, 201, 42, 0.45) transparent;
	scrollbar-width: thin;
	list-style: none;
}
.stp-strip-track > li { scroll-snap-align: start; }
.stp-strip-track:focus-visible { outline: 2px solid var(--stp-accent); outline-offset: 4px; border-radius: 8px; }
.stp-strip-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.stp-strip-track.is-dragging a { pointer-events: none; }
@container (max-width: 640px) {
	.stp .stp-strip-track { grid-auto-columns: minmax(78cqi, 1fr); }
	/* Narrow: swipe, and the next card peeking in shows there is more; no arrow buttons. */
	.stp-strip-nav { display: none; }
}

/* leveys="taysi": the strip runs from the left edge of the screen to the right edge.
   Its heading stays in line with the page content. */
.stp-strip--bleed {
	--stp-edge: 24px;
	width: var(--stp-vw, 100vw);
	margin-left: calc(50% - var(--stp-vw, 100vw) / 2);
	margin-right: calc(50% - var(--stp-vw, 100vw) / 2);
}
@media (max-width: 640px) {
	.stp-strip--bleed { --stp-edge: 16px; }
}
.stp-strip--bleed .stp-head { padding-inline: max(var(--stp-edge), calc((var(--stp-vw, 100vw) - var(--stp-content, 1240px)) / 2)); }
.stp.stp-strip--bleed .stp-strip-track,
.stp .stp-strip--bleed .stp-strip-track { padding-inline: var(--stp-edge); scroll-padding-inline: var(--stp-edge); }

/* The library's "Nostot" as a full-width strip (nostot="nauha"): no extra row, the arrows sit on the edges of the
   cards and show only when there is more to scroll that way. Phones swipe (no arrows). */
.stp-strip--group { position: relative; }
.stp .stp-strip--group .stp-strip-track { padding-bottom: 28px; }
.stp-strip--group .stp-strip-nav {
	position: absolute;
	inset: 0 0 28px; /* over the cards, not the track's bottom padding */
	z-index: 2;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding-inline: 8px;
	pointer-events: none;
}
.stp .stp-strip--group .stp-strip-btn {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(11, 15, 7, 0.8);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	pointer-events: auto;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.stp .stp-strip--group .stp-strip-btn:hover:not(:disabled) { background: rgba(11, 15, 7, 0.92); }
.stp .stp-strip--group .stp-strip-btn:disabled { opacity: 0; pointer-events: none; }
.stp--light .stp-strip--group .stp-strip-btn { border-color: var(--stp-line); background: rgba(255, 255, 255, 0.94); box-shadow: 0 6px 18px rgba(20, 25, 15, 0.16); }
.stp--light .stp-strip--group .stp-strip-btn:hover:not(:disabled) { background: #FFFFFF; }
/* nostot="nauha-laatikko": the same strip inside the library's width; the cards start at its left edge. */
.stp .stp-strip--group:not(.stp-strip--bleed) .stp-strip-track { padding-inline: 0; }

.stp .stp-teaser-grid {
	display: grid;
	grid-template-columns: repeat(var(--stp-cols, 3), minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@container (max-width: 860px) {
	.stp-teaser:not([style*="--stp-cols:1"]) .stp-teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 520px) {
	.stp .stp-teaser-grid,
	.stp-teaser:not([style*="--stp-cols:1"]) .stp-teaser-grid { grid-template-columns: 1fr; }
	.stp-teaser--rows .stp-grid { grid-template-columns: 1fr; }
}
.stp-teaser--rows .stp-grid { padding-bottom: 0; }

/* Medium image cards (strip and grid). */
.stp .stp-feature--md .stp-feature-body { gap: 6px; padding: 14px 16px 16px; }
.stp .stp-feature--md .stp-feature-name { font-size: 18px; }
.stp .stp-feature--md .stp-feature-desc { font-size: 13.5px; }
.stp--nodesc .stp-feature-desc { display: none !important; }
.stp-feature.has-details .stp-feature-go .stp-i { transform: none; }
.stp-feature.has-details:hover .stp-feature-go .stp-i { transform: rotate(90deg); }

/* =====================================================================
   Detail card: a bigger card with a paragraph and a big image, for projects that have a longer presentation.
   It opens as a dialog from mini tiles (click / tap) and from image cards that have a longer presentation;
   it opens as a dialog (a bottom sheet on phones).
   ===================================================================== */


html:has(.stp-dialog[open]) { overflow: hidden; }
/* The <dialog> is a transparent frame; the visible card is .stp-dialog-card. That way the close button can sit
   outside the card and the image stays clean. */
.stp-dialog {
	--stp-d-bg: #10150B;
	--stp-d-text: #F2F4EC;
	--stp-d-body: rgba(242, 244, 236, 0.86);
	--stp-d-line: rgba(151, 201, 42, 0.38);
	width: min(760px, calc(100% - 32px));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--stp-d-text);
	font-family: Cairo, system-ui, sans-serif;
	text-align: left;
}
.stp-dialog--light {
	--stp-d-bg: #FFFFFF;
	--stp-d-text: #1E2318;
	--stp-d-body: #3D4237;
	--stp-d-line: rgba(20, 25, 15, 0.12);
}
.stp-dialog::backdrop { background: rgba(5, 8, 3, 0.74); backdrop-filter: blur(4px); }
.stp-dialog--light::backdrop { background: rgba(30, 35, 24, 0.42); }
.stp-dialog[open] { animation: stp-dialog-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes stp-dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.stp-dialog-card {
	max-height: calc(100dvh - 48px);
	overflow: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--stp-d-line);
	border-radius: 12px;
	background: var(--stp-d-bg);
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}
.stp-dialog--light .stp-dialog-card { box-shadow: 0 40px 120px rgba(20, 25, 15, 0.3); }
.stp-dialog-media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	background: linear-gradient(var(--stp-angle, 135deg), #24321A 0%, #121809 70%);
	color: var(--st-lime, #97C92A);
}
.stp-dialog-media { overflow: hidden; text-decoration: none; cursor: pointer; }
.stp-dialog-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.stp-dialog-media:hover img { transform: scale(1.03); }
.stp-dialog-media .stp-i { width: 72px; height: 72px; stroke-width: 1.1; }
/* Close: to the right of the card on wide screens, above it on narrower ones. */
.stp-dialog .stp-dialog-close {
	position: absolute;
	top: 0;
	left: calc(100% + 14px);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(242, 244, 236, 0.94);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	color: #10150A;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
.stp-dialog .stp-dialog-close:hover { background: var(--st-lime, #97C92A); color: #10150A; transform: rotate(90deg); }
.stp-dialog .stp-dialog-close:focus-visible { outline: 2px solid var(--st-lime, #97C92A); outline-offset: 3px; }
.stp-dialog .stp-dialog-close .stp-i { width: 18px; height: 18px; }
@media (max-width: 900px) {
	.stp-dialog .stp-dialog-close { top: -56px; right: 0; left: auto; }
	.stp-dialog-card { max-height: calc(100dvh - 128px); }
}
.stp-dialog-body { display: grid; gap: 12px; padding: 24px 28px 28px; }
.stp-dialog p { margin: 0; }
.stp-dialog .stp-dialog-eyebrow { color: var(--st-lime, #97C92A); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.stp-dialog .stp-dialog-title {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(var(--st-lime, #97C92A), var(--st-lime, #97C92A)) no-repeat 0 100% / 0 2px;
	transition: background-size 0.3s ease;
}
.stp-dialog .stp-dialog-title:hover,
.stp-dialog .stp-dialog-title:focus-visible { color: inherit; background-size: 100% 2px; outline: none; }
.stp-dialog .stp-dialog-name { margin: 0; color: var(--stp-d-text); font-family: hernandezniu, Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.15; }
.stp-dialog .stp-dialog-text { color: var(--stp-d-body); font-size: 16px; line-height: 1.7; white-space: pre-line; }
.stp-dialog .stp-pop-tags { margin-top: 2px; }
.stp-dialog--light .stp-pop-tags span { border-color: rgba(20, 25, 15, 0.14); color: #5E6455; }
.stp-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.stp-dialog .stp-dialog-go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--st-lime, #97C92A);
	color: #10150A;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.2s, box-shadow 0.2s;
}
.stp-dialog .stp-dialog-go:hover { background: #AEDB4C; color: #10150A; box-shadow: 0 0 0 4px rgba(151, 201, 42, 0.18); }
.stp-dialog .stp-dialog-go .stp-i { width: 16px; height: 16px; transition: transform 0.2s; }
.stp-dialog .stp-dialog-go:hover .stp-i { transform: translateX(3px); }
@media (max-width: 600px) {
	/* Phones: a bottom sheet; the close button floats above it. */
	.stp-dialog { width: 100%; margin: auto 0 0; }
	.stp-dialog .stp-dialog-close { right: 12px; }
	.stp-dialog-card { max-height: 86dvh; border-radius: 14px 14px 0 0; border-bottom: 0; }
	.stp-dialog[open] { animation: stp-sheet-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.stp-dialog-body { padding: 20px 20px 28px; }
	.stp-dialog .stp-dialog-name { font-size: 24px; }
	.stp-dialog .stp-dialog-text { font-size: 15px; }
}
@keyframes stp-sheet-in { from { opacity: 0; transform: translateY(48px); } }

/* ---------- Light theme details ---------- */

.stp.stp--light .stp-chip--tag.is-on,
.stp.stp--light .stp-chip--tag.is-on:hover { background: var(--stp-accent); color: var(--stp-on-accent); }
.stp--light .stp-badge--more { background: #FFFFFF; color: var(--stp-text); }
.stp--light .stp-search:focus-within { box-shadow: 0 0 0 3px rgba(151, 201, 42, 0.25); }
.stp--light .stp-thumb,
.stp--light .stp-feature-media { background: #EEF0EA; }


/* ---------- Small screens ---------- */

@media (max-width: 767px) {
	.stp-bar { padding: 16px; gap: 14px; }
	.stp-facet { grid-template-columns: 1fr; gap: 8px; }
	.stp-facet-label { padding-top: 0; }
	.stp-chips {
		flex-wrap: nowrap;
		margin: 0 -16px;
		padding: 2px 16px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.stp-chips::-webkit-scrollbar { display: none; }
	.stp-kbd { display: none; }
	.stp-sum { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 2px; }
	.stp-sum-desc { display: none; }
	.stp-sum-count { grid-row: 2; grid-column: 1; }
	.stp-sum-chev { grid-column: 2; grid-row: 1 / span 2; }
	.stp .stp-grid { grid-template-columns: 1fr; gap: 8px; }
	.stp .stp-card { grid-template-columns: 72px 1fr; }
	.stp-thumb { width: 72px; }
	.stp .stp-grid--feature { grid-template-columns: 1fr; gap: 12px; }
	.stp .stp-feature-name { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.stp * { transition: none !important; }
	.stp-dialog[open] { animation: none; }
	.stp .stp-card:hover { transform: none; }
}

/* Editor only: a widget whose selection is empty. */
.stp-editor-empty {
	padding: 24px;
	border: 1px dashed rgba(151, 201, 42, 0.6);
	border-radius: 8px;
	color: #8a9180;
	font: 500 14px/1.5 Cairo, system-ui, sans-serif;
	text-align: center;
}

/* Compact card: a project without a longer presentation (narrower, so the 640 px thumbnail stays sharp). */
.stp-dialog.stp-dialog--compact { width: min(520px, calc(100% - 32px)); }
.stp-dialog--compact .stp-dialog-body { padding: 20px 24px 24px; }
.stp-dialog--compact .stp-dialog-name { font-size: 24px; }
.stp-dialog--compact .stp-dialog-text { font-size: 15px; line-height: 1.6; }
@media (max-width: 600px) {
	.stp-dialog.stp-dialog--compact { width: 100%; }
}