/*
 * Grafixyy World Archive
 *
 * Visual system for individual World pages.
 * Header / Footer belong to the Global Shell.
 */


/* ========================================
   WORLD PAGE
   ======================================== */

body.grafixyy-world-archive-page .grafixyy-world-page {
	--world-accent: #22d3ee;
	--world-accent-rgb: 34, 211, 238;

	position: relative;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 82% 8%,
			rgba(var(--world-accent-rgb), 0.12),
			transparent 30%
		),
		radial-gradient(
			circle at 10% 52%,
			rgba(139, 92, 246, 0.07),
			transparent 30%
		),
		#050816;

	color: #f8fafc;
}


/* ========================================
   WORLD IDENTITIES
   ======================================== */

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="life"] {
	--world-accent: #a78bfa;
	--world-accent-rgb: 167, 139, 250;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="space"] {
	--world-accent: #38bdf8;
	--world-accent-rgb: 56, 189, 248;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="numbers"] {
	--world-accent: #b7f34a;
	--world-accent-rgb: 183, 243, 74;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="money-time"] {
	--world-accent: #f5b942;
	--world-accent-rgb: 245, 185, 66;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="technology"] {
	--world-accent: #60a5fa;
	--world-accent-rgb: 96, 165, 250;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="compare"] {
	--world-accent: #fb7185;
	--world-accent-rgb: 251, 113, 133;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="earth"] {
	--world-accent: #4ade80;
	--world-accent-rgb: 74, 222, 128;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="measure"] {
	--world-accent: #2dd4bf;
	--world-accent-rgb: 45, 212, 191;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="visual"] {
	--world-accent: #f472b6;
	--world-accent-rgb: 244, 114, 182;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="text"] {
	--world-accent: #c084fc;
	--world-accent-rgb: 192, 132, 252;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="everyday"] {
	--world-accent: #facc15;
	--world-accent-rgb: 250, 204, 21;
}

body.grafixyy-world-archive-page
.grafixyy-world-page[data-world="fun"] {
	--world-accent: #fb4f8f;
	--world-accent-rgb: 251, 79, 143;
}


/* ========================================
   HERO
   ======================================== */

body.grafixyy-world-archive-page .grafixyy-world-hero {
	position: relative;

	width: 100%;

	padding:
		clamp(70px, 9vw, 126px)
		24px
		clamp(62px, 8vw, 108px);

	overflow: hidden;

	border-bottom:
		1px solid rgba(var(--world-accent-rgb), 0.12);
}


body.grafixyy-world-archive-page
.grafixyy-world-hero::before {
	content: "";

	position: absolute;

	width: min(560px, 65vw);
	aspect-ratio: 1;

	top: 50%;
	right: 7%;

	transform: translateY(-50%);

	border-radius: 50%;

	border:
		1px solid rgba(var(--world-accent-rgb), 0.12);

	box-shadow:
		inset 0 0 70px rgba(var(--world-accent-rgb), 0.025);

	pointer-events: none;
}


body.grafixyy-world-archive-page
.grafixyy-world-kicker::before {
	content: "";

	display: inline-block;

	width: 7px;
	height: 7px;

	flex: 0 0 7px;

	margin-inline-end: 7px;

	border-radius: 50%;

	background: var(--world-accent);

	box-shadow:
		0 0 14px rgba(var(--world-accent-rgb), 0.7);
}


body.grafixyy-world-archive-page
.grafixyy-world-hero-inner {
	position: relative;
	z-index: 1;

	width:
		min(
			1180px,
			100%
		);

	margin: 0 auto;
}


body.grafixyy-world-archive-page
.grafixyy-world-kicker {
    	display: inline-flex;
	align-items: center;
	width: fit-content;

	margin:
		0
		0
		18px;

	padding:
		7px
		11px;

	border:
		1px solid rgba(var(--world-accent-rgb), 0.24);

	border-radius: 999px;

	background:
		rgba(var(--world-accent-rgb), 0.07);

	color: var(--world-accent);

	font-size: 12px;
	font-weight: 800;
	line-height: 1;

	letter-spacing: 0.08em;
}


body.grafixyy-world-archive-page
.grafixyy-world-hero h1 {
	max-width: 820px;

	margin:
		0
		0
		18px;

	color: #ffffff;

	font-size:
		clamp(48px, 7vw, 92px);

	font-weight: 900;
	line-height: 1.08;

	letter-spacing: -0.045em;
}


body.grafixyy-world-archive-page
.grafixyy-world-count {
	display: flex;

	align-items: center;

	gap: 8px;

	width: fit-content;

	margin:
		24
		0
		22px;
	color: #e2e8f0;

	font-size:
		clamp(15px, 1.6vw, 18px);

	font-weight: 600;
	line-height: 1.7;
}


body.grafixyy-world-archive-page
.grafixyy-world-count strong {
	color: var(--world-accent);

	font-size: 1.3em;
	font-weight: 900;
}


body.grafixyy-world-archive-page
.grafixyy-world-description {
	max-width: 720px;

	color: #aab5c8;

	font-size:
		clamp(16px, 1.8vw, 20px);

	font-weight: 500;
	line-height: 1.95;
}


body.grafixyy-world-archive-page
.grafixyy-world-description > *:first-child {
	margin-top: 0;
}


body.grafixyy-world-archive-page
.grafixyy-world-description > *:last-child {
	margin-bottom: 0;
}


/* ========================================
   EXPERIENCE CATALOGUE
   ======================================== */

body.grafixyy-world-archive-page
.grafixyy-world-experiences {
	position: relative;

	width: 100%;

	padding:
		clamp(62px, 8vw, 100px)
		24px
		clamp(70px, 9vw, 118px);
}


body.grafixyy-world-archive-page
.grafixyy-world-experiences-inner {
	width:
		min(
			1180px,
			100%
		);

	margin: 0 auto;
}


body.grafixyy-world-archive-page
.grafixyy-world-section-heading {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 28px;

	margin:
		0
		0
		34px;
}


body.grafixyy-world-archive-page
.grafixyy-world-section-heading p {
	margin:
		0
		0
		8px;

	color: var(--world-accent);

	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;

	letter-spacing: 0.08em;
}


body.grafixyy-world-archive-page
.grafixyy-world-section-heading h2 {
	margin: 0;

	color: #ffffff;

	font-size:
		clamp(28px, 4vw, 46px);

	font-weight: 850;
	line-height: 1.2;
}


body.grafixyy-world-archive-page
.grafixyy-world-section-count {
	flex: 0 0 auto;

	padding:
		9px
		13px;

	border:
		1px solid rgba(var(--world-accent-rgb), 0.2);

	border-radius: 999px;

	color: #cbd5e1;

	background:
		rgba(var(--world-accent-rgb), 0.055);

	font-size: 12px;
	font-weight: 700;
}


/* ========================================
   SHARED CARD GRID
   ======================================== */

body.grafixyy-world-archive-page
.grafixyy-world-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:
		clamp(18px, 2vw, 24px);

	width: 100%;
	min-width: 0;
}


body.grafixyy-world-archive-page
.grafixyy-world-grid
> .grafixyy-home-door {
	width: 100%;
	min-width: 0;
	margin: 0;
}


/* ========================================
   EMPTY STATE
   ======================================== */

body.grafixyy-world-archive-page
.grafixyy-world-empty {
	grid-column: 1 / -1;

	padding:
		clamp(46px, 7vw, 80px)
		24px;

	border:
		1px solid rgba(var(--world-accent-rgb), 0.15);

	border-radius: 26px;

	background:
		rgba(255, 255, 255, 0.025);

	text-align: center;
}


body.grafixyy-world-archive-page
.grafixyy-world-empty > span {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 58px;
	height: 58px;

	margin-bottom: 20px;

	border:
		1px solid rgba(var(--world-accent-rgb), 0.25);

	border-radius: 50%;

	color: var(--world-accent);

	font-size: 25px;
	font-weight: 900;
}


body.grafixyy-world-archive-page
.grafixyy-world-empty h2 {
	margin:
		0
		0
		10px;

	color: #ffffff;

	font-size:
		clamp(23px, 3vw, 32px);
}


body.grafixyy-world-archive-page
.grafixyy-world-empty p {
	margin: 0;

	color: #8995a8;

	line-height: 1.8;
}


/* ========================================
   DISCOVERY
   ======================================== */

body.grafixyy-world-archive-page
.grafixyy-world-discovery {
	display: flex;

	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 12px;

	width:
		min(
			1180px,
			calc(100% - 48px)
		);

	margin:
		0 auto
		clamp(72px, 9vw, 110px);

	padding:
		30px;

	border:
		1px solid rgba(var(--world-accent-rgb), 0.13);

	border-radius: 24px;

	background:
		linear-gradient(
			135deg,
			rgba(var(--world-accent-rgb), 0.055),
			rgba(255, 255, 255, 0.018)
		);
}


body.grafixyy-world-archive-page
.grafixyy-world-discovery a {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 46px;

	padding:
		10px
		17px;

	border:
		1px solid rgba(148, 163, 184, 0.17);

	border-radius: 12px;

	color: #dbe5f3;

	background:
		rgba(255, 255, 255, 0.035);

	text-decoration: none;

	font-size: 14px;
	font-weight: 750;

	transition:
		transform 160ms ease,
		background-color 160ms ease,
		border-color 160ms ease;
}


body.grafixyy-world-archive-page
.grafixyy-world-discovery
.grafixyy-random-link {
	border-color:
		rgba(var(--world-accent-rgb), 0.3);

	color: #ffffff;

	background:
		rgba(var(--world-accent-rgb), 0.11);
}


body.grafixyy-world-archive-page
.grafixyy-world-discovery a:hover {
	transform: translateY(-1px);

	border-color:
		rgba(var(--world-accent-rgb), 0.32);

	background:
		rgba(var(--world-accent-rgb), 0.1);
}


/* ========================================
   PAGINATION
   ======================================== */

body.grafixyy-world-archive-page
.grafixyy-catalog-pagination {
	margin:
		42px
		0
		0;
}


body.grafixyy-world-archive-page
.grafixyy-catalog-pagination-links {
	display: flex;

	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 8px;
}


body.grafixyy-world-archive-page
.grafixyy-catalog-pagination-links
.page-numbers {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 42px;
	min-height: 42px;

	padding:
		7px
		11px;

	border:
		1px solid rgba(148, 163, 184, 0.16);

	border-radius: 11px;

	color: #b8c3d4;

	background:
		rgba(255, 255, 255, 0.03);

	text-decoration: none;

	font-size: 12px;
	font-weight: 750;
}


body.grafixyy-world-archive-page
.grafixyy-catalog-pagination-links
.page-numbers.current {
	border-color:
		rgba(var(--world-accent-rgb), 0.35);

	color: #ffffff;

	background:
		rgba(var(--world-accent-rgb), 0.13);
}


/* ========================================
   FOCUS
   ======================================== */

body.grafixyy-world-archive-page
.grafixyy-world-discovery a:focus-visible,
body.grafixyy-world-archive-page
.grafixyy-catalog-pagination-links
.page-numbers:focus-visible {
	outline:
		3px solid var(--world-accent);

	outline-offset: 4px;
}


/* ========================================
   TABLET
   ======================================== */

@media (max-width: 920px) {

	body.grafixyy-world-archive-page
	.grafixyy-world-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	body.grafixyy-world-archive-page
	.grafixyy-world-hero::before {
		right: 35%;
		opacity: 0.7;
	}
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 640px) {

	body.grafixyy-world-archive-page
	.grafixyy-world-hero {
		padding:
			58px
			16px
			54px;
	}


	body.grafixyy-world-archive-page
	.grafixyy-world-hero::before {
		width: 380px;

		right: 42%;
	}



	body.grafixyy-world-archive-page
	.grafixyy-world-hero h1 {
		font-size:
			clamp(42px, 14vw, 64px);
	}


	body.grafixyy-world-archive-page
	.grafixyy-world-count {
		align-items: baseline;

		flex-wrap: wrap;

		font-size: 14px;
	}


	body.grafixyy-world-archive-page
	.grafixyy-world-experiences {
		padding:
			52px
			14px
			70px;
	}


	body.grafixyy-world-archive-page
	.grafixyy-world-section-heading {
		align-items: flex-start;

		flex-direction: column;

		gap: 14px;

		margin-bottom: 25px;
	}


	body.grafixyy-world-archive-page
	.grafixyy-world-grid {
		grid-template-columns: 1fr;

		gap: 18px;
	}


	body.grafixyy-world-archive-page
	.grafixyy-world-discovery {
		align-items: stretch;

		flex-direction: column;

		width:
			calc(100% - 28px);

		margin-bottom: 70px;

		padding:
			20px;
	}


	body.grafixyy-world-archive-page
	.grafixyy-world-discovery a {
		width: 100%;
	}


	body.grafixyy-world-archive-page
	.grafixyy-catalog-pagination {
		margin-top: 32px;
	}
}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

	body.grafixyy-world-archive-page
	.grafixyy-world-discovery a {
		transition: none;
	}
}