/* ==========================================================================
   ZaSite Portfolio — calm surfaces, clear hierarchy, purposeful motion.
   Content is never hidden by CSS; GSAP sets every initial animation state.
   ========================================================================== */

.zsp, .zsp-single {
	--zsp-accent: var(--zw-blue, #3457d5);
	--zsp-accent-2: var(--zw-purple, #6e56e8);
	--zsp-ink: var(--zw-ink, #0a0d18);
	--zsp-muted: var(--zw-muted, #5a6478);
	--zsp-line: var(--zw-line, #e6e9f2);
	--zsp-soft: var(--zw-soft, #f4f6fc);
	--zsp-bg: #ffffff;
	--zsp-surface: #ffffff;
	--zsp-radius: 22px;
	--zsp-gap: 28px;
	--zsp-ratio: 62%;
	--zsp-max: 1240px;
	--zsp-ease: cubic-bezier(.22, 1, .36, 1);
	font-family: Alexandria, "Plus Jakarta Sans", system-ui, sans-serif;
	color: var(--zsp-ink);
	box-sizing: border-box;
}
.zsp *, .zsp-single * { box-sizing: border-box; }
.zsp { position: relative; background: var(--zsp-bg); padding: 110px 0; overflow: clip; }
.zsp-wrap { max-width: var(--zsp-max); margin-inline: auto; padding-inline: 28px; position: relative; }
.zsp a { text-decoration: none; color: inherit; }
.zsp-arrow, .zsp-ext { width: 1.05em; height: 1.05em; flex: none; transition: transform .45s var(--zsp-ease); }
[dir="rtl"] .zsp-arrow, .rtl .zsp-arrow { transform: scaleX(-1); }

/* ---------- Head ---------- */
.zsp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 64px; margin-bottom: 56px; }
.zsp-head__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--zsp-accent); margin-bottom: 18px; }
.zsp-head__kicker i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--zsp-accent), var(--zsp-accent-2)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--zsp-accent) 14%, transparent); }
.zsp-head__title { margin: 0; font-size: clamp(34px, 5vw, 64px); line-height: 1.22; font-weight: 700; letter-spacing: -.02em; color: var(--zsp-ink); text-wrap: balance; }
.zsp-line { display: block; overflow: hidden; padding-block: .08em .12em; margin-block: -.08em -.12em; }
.zsp-w { display: inline-block; }
.zsp-w > span { display: inline-block; will-change: transform; }
.zsp-head__title em { font-style: normal; background: linear-gradient(100deg, var(--zsp-accent), var(--zsp-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zsp-head__title em .zsp-w > span { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; background-image: linear-gradient(100deg, var(--zsp-accent), var(--zsp-accent-2)); }
.zsp-head__intro { margin: 20px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.95; color: var(--zsp-muted); }
.zsp-stats { display: flex; gap: 14px; margin: 0; }
.zsp-stats > div { min-width: 132px; padding: 18px 22px; border: 1px solid var(--zsp-line); border-radius: 18px; background: linear-gradient(180deg, #fff, var(--zsp-soft)); display: flex; flex-direction: column-reverse; gap: 4px; }
.zsp-stats dd { margin: 0; font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--zsp-accent), var(--zsp-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zsp-stats dt { font-size: 13px; color: var(--zsp-muted); font-weight: 500; }

/* ---------- Filters ---------- */
.zsp-filters { display: flex; justify-content: center; margin: 0 auto 44px; z-index: 30; }
.zsp.has-sticky .zsp-filters { position: sticky; top: var(--zsp-sticky, 96px); }
.zsp-filters__track { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--zsp-line); border-radius: 16px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 14px 40px -18px rgba(10, 13, 24, .22); }
.zsp-filters__track::-webkit-scrollbar { display: none; }
.zsp-filters__pill { position: absolute; top: 0; left: 0; height: 0; width: 0; border-radius: 11px; background: var(--zsp-ink); box-shadow: 0 8px 18px -8px rgba(10, 13, 24, .55); pointer-events: none; }
.zsp-filter { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 11px; background: transparent; color: var(--zsp-muted); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; white-space: nowrap; transition: color .35s; }
.zsp-filter b { font-size: 11px; font-weight: 600; min-width: 22px; padding: 2px 7px; border-radius: 20px; background: var(--zsp-soft); color: var(--zsp-muted); text-align: center; transition: background .35s, color .35s; }
.zsp-filter:hover { color: var(--zsp-ink); }
.zsp-filter.is-active { color: #fff; }
.zsp-filter.is-active b { background: rgba(255, 255, 255, .16); color: #fff; }
.zsp:not(.is-js) .zsp-filter.is-active { background: var(--zsp-ink); }
.zsp-filter:focus-visible { outline: 3px solid color-mix(in srgb, var(--zsp-accent) 45%, transparent); outline-offset: 2px; }

/* ---------- Grid ---------- */
.zsp-grid { display: grid; grid-template-columns: repeat(var(--zsp-cols, 3), minmax(0, 1fr)); gap: var(--zsp-gap); grid-auto-flow: row dense; align-items: stretch; }
/* Bento: featured = 2 columns × 2 rows; its screen grows to fill the height of the two cards beside it */
.zsp--bento .zsp-card.is-featured { grid-column: span 2; grid-row: span 2; }
.zsp--bento .zsp-card.is-featured .zsp-card__frame { flex: 1; display: flex; flex-direction: column; }
.zsp--bento .zsp-card.is-featured .zsp-card__screen { flex: 1; height: auto; padding-top: 0; min-height: 300px; }
.zsp--bento .zsp-card.is-featured .zsp-card__body { flex: none; }
.zsp-card.is-paged, .zsp-card.is-filtered { display: none; }

/* ---------- Card ---------- */
.zsp-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 10px; border: 1px solid var(--zsp-line); border-radius: var(--zsp-radius); background: var(--zsp-surface); transition: border-color .45s, box-shadow .6s var(--zsp-ease), transform .6s var(--zsp-ease); will-change: transform; }
.zsp-card:hover { border-color: color-mix(in srgb, var(--zsp-accent) 30%, var(--zsp-line)); box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--zsp-accent) 55%, rgba(10, 13, 24, .5)); transform: translateY(-6px); }
.zsp-card__frame { position: relative; padding: 18px 18px 0; border-radius: calc(var(--zsp-radius) - 8px); overflow: hidden; background:
	radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--zsp-accent) 20%, transparent), transparent 60%),
	radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--zsp-accent-2) 16%, transparent), transparent 60%),
	var(--zsp-soft); }
.zsp-card__bar { position: relative; display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: #fff; border: 1px solid var(--zsp-line); border-bottom: 0; border-radius: 10px 10px 0 0; direction: ltr; }
.zsp-card__bar i { width: 8px; height: 8px; border-radius: 50%; background: #e1e5ef; }
.zsp-card__bar i:nth-child(1) { background: #ff6159; } .zsp-card__bar i:nth-child(2) { background: #ffbd2e; } .zsp-card__bar i:nth-child(3) { background: #28c941; }
.zsp-card__bar span { position: absolute; left: 50%; transform: translateX(-50%); max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.2 "Plus Jakarta Sans", system-ui, sans-serif; color: #7b8499; padding: 3px 12px; border-radius: 20px; background: var(--zsp-soft); }
.zsp-card__screen { position: relative; height: 0; padding-top: var(--zsp-ratio); overflow: hidden; background: #fff; border: 1px solid var(--zsp-line); border-top: 0; box-shadow: 0 24px 40px -26px rgba(10, 13, 24, .45); }
.zsp-card__img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; display: block; will-change: transform; }
.zsp-card__cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--zsp-accent) 12%, #fff), #fff); }
.zsp-card__cover b { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; color: var(--zsp-ink); }
.zsp-card__cover small { font-size: 12px; color: var(--zsp-muted); }
.zsp-card__cta { position: absolute; left: 50%; bottom: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 40px; background: var(--zsp-ink); color: #fff; font-size: 13px; font-weight: 600; transform: translate(-50%, 16px) scale(.92); opacity: 0; transition: opacity .35s, transform .5s var(--zsp-ease); pointer-events: none; box-shadow: 0 12px 30px -10px rgba(10, 13, 24, .6); }
.zsp-card:hover .zsp-card__cta { opacity: 1; transform: translate(-50%, 0) scale(1); }
.zsp.has-cursor-bubble .zsp-card__cta { display: none; }

.zsp-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 12px 10px; }
.zsp-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.zsp-card__cat { font-size: 11.5px; font-weight: 600; color: var(--zsp-accent); padding: 4px 11px; border-radius: 20px; background: color-mix(in srgb, var(--zsp-accent) 9%, #fff); }
.zsp-card__year { font-size: 12px; color: var(--zsp-muted); font-variant-numeric: tabular-nums; }
.zsp-card__title { margin: 0; font-size: 22px; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; color: var(--zsp-ink); }
.zsp-card__link { color: inherit !important; }
.zsp-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.zsp-card__link:focus-visible { outline: none; }
.zsp-card:has(.zsp-card__link:focus-visible) { outline: 3px solid color-mix(in srgb, var(--zsp-accent) 45%, transparent); outline-offset: 3px; }
.zsp-card__line { margin: 4px 0 0; font-size: 13px; color: var(--zsp-muted); }
.zsp-card__excerpt { margin: 12px 0 0; font-size: 14px; line-height: 1.85; color: var(--zsp-muted); }
.zsp-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 18px; }
.zsp-card__more { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--zsp-ink); }
.zsp-card:hover .zsp-card__more { color: var(--zsp-accent); }
.zsp-card:hover .zsp-card__more .zsp-arrow { transform: translateX(-5px) scaleX(-1); }
[dir="ltr"] .zsp-card:hover .zsp-card__more .zsp-arrow { transform: translateX(5px); }
.zsp-card__visit { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--zsp-muted) !important; padding: 7px 12px; border: 1px solid var(--zsp-line); border-radius: 30px; transition: color .3s, border-color .3s, background .3s; }
.zsp-card__visit:hover { color: var(--zsp-ink) !important; border-color: var(--zsp-ink); background: #fff; }
.zsp-card__visit:hover .zsp-ext { transform: translate(2px, -2px); }

/* Featured card in bento: bigger title, two-column body on desktop */
.zsp--bento .zsp-card.is-featured .zsp-card__title { font-size: 28px; }

/* ---------- Rows layout ---------- */
.zsp--rows .zsp-grid { grid-template-columns: 1fr; gap: calc(var(--zsp-gap) * 1.4); }
.zsp--rows .zsp-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 12px 40px; padding: 14px; }
.zsp--rows .zsp-card:nth-child(even) .zsp-card__frame { order: 2; }
.zsp--rows .zsp-card__body { padding: 20px 10px; }
.zsp--rows .zsp-card__title { font-size: clamp(26px, 3vw, 38px); }
.zsp--rows .zsp-card__excerpt { font-size: 15.5px; }

/* ---------- Load more ---------- */
.zsp-more { display: flex; justify-content: center; margin-top: 52px; }
.zsp-more__btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border-radius: 40px; border: 1px solid var(--zsp-ink); background: transparent; color: var(--zsp-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .35s, color .35s, transform .35s var(--zsp-ease); }
.zsp-more__btn b { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--zsp-soft); color: var(--zsp-muted); }
.zsp-more__btn:hover { background: var(--zsp-ink); color: #fff; transform: translateY(-3px); }
.zsp-more__btn:hover b { background: rgba(255, 255, 255, .16); color: #fff; }
.zsp-more[hidden] { display: none; }

/* ---------- Cursor bubble ---------- */
.zsp-cursor { position: fixed; top: 0; left: 0; z-index: 60; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #fff; background: linear-gradient(135deg, var(--zsp-accent), var(--zsp-accent-2)); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--zsp-accent) 70%, transparent); pointer-events: none; transform: scale(0); }
@media (hover: none), (pointer: coarse) { .zsp-cursor { display: none; } }

/* ---------- Empty state ---------- */
.zsp--empty { padding: 48px 24px; text-align: center; border: 1px dashed var(--zsp-line); border-radius: 18px; color: var(--zsp-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.zsp-head { grid-template-columns: 1fr; }
	.zsp--bento .zsp-card.is-featured { grid-column: span 2; grid-row: auto; }
	.zsp--bento .zsp-card.is-featured .zsp-card__screen { flex: none; height: 0; padding-top: 52%; min-height: 0; }
	.zsp--rows .zsp-card { grid-template-columns: 1fr; }
	.zsp--rows .zsp-card:nth-child(even) .zsp-card__frame { order: 0; }
}
@media (max-width: 767px) {
	.zsp { padding: 72px 0; }
	.zsp-wrap { padding-inline: 18px; }
	.zsp-grid { --zsp-cols: 1 !important; gap: 22px; }
	.zsp--bento .zsp-card.is-featured { grid-column: auto; }
	.zsp--bento .zsp-card.is-featured .zsp-card__screen { padding-top: 62%; }
	.zsp-filters__track { flex-wrap: nowrap; justify-content: flex-start; }
	.zsp-head { margin-bottom: 36px; }
	.zsp-stats > div { min-width: 0; flex: 1; padding: 14px 16px; }
	.zsp-stats dd { font-size: 34px; }
	.zsp-filters { margin-inline: -18px; padding-inline: 18px; justify-content: flex-start; }
	.zsp-filters__track { width: 100%; }
	.zsp-card__frame { padding: 12px 12px 0; }
	.zsp-card__title, .zsp--bento .zsp-card.is-featured .zsp-card__title { font-size: 20px; }
	.zsp-card__cta { display: none; }
}

/* ==========================================================================
   Single project
   ========================================================================== */
.zsp-single { display: block; background: #fff; }
.zsp-single a { text-decoration: none; }
.zsp-sh { position: relative; padding: 150px 0 70px; overflow: clip; background:
	radial-gradient(60% 70% at 85% 0%, color-mix(in srgb, var(--zsp-accent) 12%, transparent), transparent 70%),
	radial-gradient(50% 60% at 0% 30%, color-mix(in srgb, var(--zsp-accent-2) 10%, transparent), transparent 70%),
	linear-gradient(#fff, var(--zsp-soft)); }
.zsp-crumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; font-size: 13px; color: var(--zsp-muted); }
.zsp-crumb a { color: var(--zsp-muted); }
.zsp-crumb a:hover { color: var(--zsp-accent); }
.zsp-crumb [aria-current] { color: var(--zsp-ink); font-weight: 600; }
.zsp-sh__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr); gap: 40px 72px; align-items: end; }
.zsp-sh__title { margin: 0; font-size: clamp(40px, 6vw, 76px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: var(--zsp-ink); }
.zsp-sh__line { margin: 12px 0 0; font-size: 16px; color: var(--zsp-accent); font-weight: 600; }
.zsp-sh__intro { margin: 18px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.95; color: var(--zsp-muted); }
.zsp-sh__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.zsp-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: transform .35s var(--zsp-ease), box-shadow .35s, background .35s, color .35s; }
.zsp-btn--primary { background: var(--zsp-accent); color: #fff !important; box-shadow: 0 14px 30px -14px var(--zsp-accent); }
.zsp-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -14px var(--zsp-accent); }
.zsp-btn--ghost { border-color: var(--zsp-line); background: #fff; color: var(--zsp-ink) !important; }
.zsp-btn--ghost:hover { border-color: var(--zsp-ink); transform: translateY(-3px); }
.zsp-sh__meta { margin: 0; padding: 8px 24px; border: 1px solid var(--zsp-line); border-radius: 20px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.zsp-sh__meta > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--zsp-line); }
.zsp-sh__meta > div:last-child { border-bottom: 0; }
.zsp-sh__meta dt { font-size: 13px; color: var(--zsp-muted); }
.zsp-sh__meta dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--zsp-ink); }
.zsp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zsp-tags li { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 20px; background: var(--zsp-soft); color: var(--zsp-ink); }

.zsp-scroller { position: relative; background: linear-gradient(var(--zsp-soft), #fff 60%); }
.zsp-scroller__sticky { padding: 30px 0 80px; }
.zsp-scroller.is-js .zsp-scroller__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 0; }
.zsp-device { max-width: 1120px; margin-inline: auto; padding: 16px 16px 0; border-radius: 24px; background: linear-gradient(160deg, color-mix(in srgb, var(--zsp-accent) 22%, #fff), color-mix(in srgb, var(--zsp-accent-2) 18%, #fff)); box-shadow: 0 60px 120px -50px rgba(10, 13, 24, .45); }
.zsp-device__screen { position: relative; height: min(66vh, 640px); overflow: auto; background: #fff; border: 1px solid var(--zsp-line); border-top: 0; }
.zsp-scroller.is-js .zsp-device__screen { overflow: hidden; }
.zsp-device__img { display: block; width: 100%; height: auto; max-width: none; will-change: transform; }
.zsp-scroller__hint { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--zsp-muted); }

.zsp-results { padding: 30px 0 90px; }
.zsp-results dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.zsp-results dl > div { padding: 26px; border-radius: 20px; border: 1px solid var(--zsp-line); background: linear-gradient(180deg, #fff, var(--zsp-soft)); }
.zsp-results dd { margin: 0; font-size: 46px; font-weight: 700; line-height: 1; background: linear-gradient(100deg, var(--zsp-accent), var(--zsp-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: start; }
.zsp-results dt { margin-top: 10px; font-size: 14px; color: var(--zsp-muted); }
.zsp-prose { padding: 20px 0 100px; }
.zsp-prose__in { max-width: 780px; margin-inline: auto; font-size: 17px; line-height: 2; color: var(--zsp-ink); }
.zsp-prose__in img { max-width: 100%; height: auto; border-radius: 16px; }
.zsp-related { background: var(--zsp-soft); }
.zsp-related .zsp-card { background: #fff; }
.zsp-related .zsp-head { margin-bottom: 36px; }
.zsp-next { display: block; color: #fff !important; background: radial-gradient(70% 120% at 85% 0%, color-mix(in srgb, var(--zsp-accent) 55%, transparent), transparent 70%), var(--zsp-ink); padding: 90px 0; overflow: hidden; }
.zsp-next__in { display: flex; flex-direction: column; gap: 10px; }
.zsp-next small { font-size: 13px; color: rgba(255, 255, 255, .6); }
.zsp-next strong { display: inline-flex; align-items: center; gap: 22px; font-size: clamp(36px, 6vw, 84px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.zsp-next strong .zsp-arrow { width: .6em; height: .6em; }
.zsp-next:hover strong .zsp-arrow { transform: translateX(-12px) scaleX(-1); }
[dir="ltr"] .zsp-next:hover strong .zsp-arrow { transform: translateX(12px); }
.zsp-next span { font-size: 15px; color: rgba(255, 255, 255, .7); }

@media (max-width: 900px) {
	.zsp-sh { padding: 120px 0 50px; }
	.zsp-sh__grid { grid-template-columns: 1fr; }
	.zsp-device { padding: 10px 10px 0; border-radius: 18px; }
	.zsp-device__screen { height: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
	.zsp-card, .zsp-card__cta, .zsp-arrow { transition: none !important; }
}
.zsp-card.is-anim { transition: none !important; }

/* ---------- Scroll rail (horizontal, pinned on desktop) ---------- */
.zsp--scroll .zsp-rail {
	--zsp-gutter: max(20px, calc((100vw - var(--zsp-max)) / 2 + 28px));
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--zsp-gutter);
	overflow: hidden;
}
.zsp--scroll .zsp-grid { display: flex; grid-template-columns: none; gap: var(--zsp-gap); width: max-content; padding-block: 18px 8px; }
.zsp--scroll .zsp-card { flex: none; width: var(--zsp-slide, clamp(300px, 38vw, 560px)); }
.zsp--scroll .zsp-card__frame { will-change: transform; }
.zsp-rail__meta { display: flex; align-items: center; gap: 22px; margin-top: 34px; max-width: calc(var(--zsp-max) - 56px); }
.zsp-rail__count { flex: none; font: 600 14px "Plus Jakarta Sans", system-ui, sans-serif; color: var(--zsp-muted); font-variant-numeric: tabular-nums; direction: ltr; }
.zsp-rail__count b { color: var(--zsp-ink); font-size: 18px; }
.zsp-rail__bar { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--zsp-line); overflow: hidden; }
.zsp-rail__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--zsp-accent), var(--zsp-accent-2)); transform: scaleX(0); transform-origin: 100% 50%; }
[dir="ltr"] .zsp-rail__bar i { transform-origin: 0 50%; }
.zsp--scroll.is-pinned .zsp-rail { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; }
@media (max-width: 1023px) {
	.zsp--scroll .zsp-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: var(--zsp-gutter); }
	.zsp--scroll .zsp-rail::-webkit-scrollbar { display: none; }
	.zsp--scroll .zsp-card { width: var(--zsp-slide, min(82vw, 440px)); scroll-snap-align: start; }
	.zsp--scroll .zsp-grid { padding-inline-end: var(--zsp-gutter); }
	.zsp-rail__meta { position: sticky; inset-inline-start: 0; width: calc(100vw - 2 * var(--zsp-gutter)); }
}

/* ---------- "All projects" button ---------- */
.zsp-all { display: flex; justify-content: center; margin-top: 48px; }
.zsp-all__btn { display: inline-flex; align-items: center; gap: 14px; padding: 15px 30px; border-radius: 40px; background: var(--zsp-ink); color: #fff !important; font-size: 15px; font-weight: 600; transition: transform .4s var(--zsp-ease), box-shadow .4s, background .4s; }
.zsp-all__btn:hover { transform: translateY(-3px); background: var(--zsp-accent); box-shadow: 0 14px 34px color-mix(in srgb, var(--zsp-accent) 30%, transparent); }
.zsp-all__btn:hover .zsp-arrow { transform: scaleX(-1) translateX(4px); }
[dir="ltr"] .zsp-all__btn:hover .zsp-arrow { transform: translateX(4px); }