/*
 * Grafixyy Static Information Pages
 *
 * Shared presentation for:
 * /about/
 * /methodology/
 * /privacy/
 * /terms/
 * /contact/
 *
 * Header / Footer belong to global-shell.css.
 */


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

body.grafixyy-static-page-body
.grafixyy-static-page {
	position: relative;

	width: 100%;
	min-width: 0;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 86% 5%,
			rgba(34, 211, 238, 0.08),
			transparent 27%
		),
		radial-gradient(
			circle at 8% 38%,
			rgba(139, 92, 246, 0.08),
			transparent 30%
		),
		#050816;

	color: #f8fafc;
}


/* ========================================
   SHARED WIDTH
   ======================================== */

body.grafixyy-static-page-body
.grafixyy-static-inner {
	position: relative;

	width:
		min(
			900px,
			100%
		);

	min-width: 0;

	margin: 0 auto;
}


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

body.grafixyy-static-page-body
.grafixyy-static-hero {
	position: relative;

	padding:
		clamp(72px, 9vw, 120px)
		24px
		clamp(50px, 6vw, 76px);

	overflow: hidden;

	border-bottom:
		1px solid rgba(148, 163, 184, 0.1);
}


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

	position: absolute;

	width: min(500px, 70vw);
	aspect-ratio: 1;

	top: 50%;
	left: -9%;

	transform:
		translateY(-50%);

	border:
		1px solid rgba(34, 211, 238, 0.07);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(139, 92, 246, 0.025),
			transparent 66%
		);

	pointer-events: none;
}


body.grafixyy-static-page-body
.grafixyy-static-kicker {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	width: fit-content;

	margin:
		0
		0
		18px;

	padding:
		8px
		12px;

	border:
		1px solid rgba(34, 211, 238, 0.2);

	border-radius: 999px;

	background:
		rgba(34, 211, 238, 0.055);

	color: #67e8f9;

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

	letter-spacing: 0.08em;
}


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

	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: #22d3ee;

	box-shadow:
		0 0 14px rgba(34, 211, 238, 0.55);
}


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

	margin: 0;

	color: #ffffff;

	font-size:
		clamp(42px, 6vw, 72px);

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

	letter-spacing: -0.035em;
}


/* ========================================
   CONTENT
   ======================================== */

body.grafixyy-static-page-body
.grafixyy-static-content {
	position: relative;

	padding:
		clamp(54px, 7vw, 82px)
		24px
		clamp(78px, 9vw, 120px);
}


body.grafixyy-static-page-body
.grafixyy-static-article {
	width: 100%;
	min-width: 0;

	color: #b8c3d4;

	font-size:
		clamp(15px, 1.5vw, 17px);

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


/* ========================================
   TYPOGRAPHY
   ======================================== */

body.grafixyy-static-page-body
.grafixyy-static-article h2 {
	margin:
		58px
		0
		18px;

	color: #ffffff;

	font-size:
		clamp(27px, 3.5vw, 36px);

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


body.grafixyy-static-page-body
.grafixyy-static-article h3 {
	margin:
		38px
		0
		14px;

	color: #e8edf5;

	font-size:
		clamp(20px, 2.5vw, 25px);

	font-weight: 800;
	line-height: 1.4;
}


body.grafixyy-static-page-body
.grafixyy-static-article p {
	margin:
		0
		0
		22px;
}


body.grafixyy-static-page-body
.grafixyy-static-article
> *:first-child {
	margin-top: 0;
}


body.grafixyy-static-page-body
.grafixyy-static-article
> *:last-child {
	margin-bottom: 0;
}


body.grafixyy-static-page-body
.grafixyy-static-article strong {
	color: #f8fafc;

	font-weight: 800;
}


body.grafixyy-static-page-body
.grafixyy-static-article a {
	color: #67e8f9;

	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}


body.grafixyy-static-page-body
.grafixyy-static-article a:visited {
	color: #a78bfa;
}


body.grafixyy-static-page-body
.grafixyy-static-article ul,
body.grafixyy-static-page-body
.grafixyy-static-article ol {
	margin:
		18px
		0
		26px;

	padding-inline-start:
		26px;
}


body.grafixyy-static-page-body
.grafixyy-static-article li {
	margin-bottom: 10px;

	padding-inline-start: 5px;
}


/* ========================================
   QUOTES
   ======================================== */

body.grafixyy-static-page-body
.grafixyy-static-article blockquote {
	margin:
		34px
		0;

	padding:
		22px
		24px;

	border:
		1px solid rgba(34, 211, 238, 0.13);

	border-inline-start:
		3px solid #22d3ee;

	border-radius: 16px;

	background:
		rgba(34, 211, 238, 0.035);

	color: #d2dbe8;
}


/* ========================================
   DETAILS
   ======================================== */

body.grafixyy-static-page-body
.grafixyy-static-article details {
	margin:
		18px
		0;

	padding:
		18px
		20px;

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

	border-radius: 14px;

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


body.grafixyy-static-page-body
.grafixyy-static-article summary {
	cursor: pointer;

	color: #ffffff;

	font-weight: 750;
}


/* ========================================
   HORIZONTAL RULE
   ======================================== */

body.grafixyy-static-page-body
.grafixyy-static-article hr {
	height: 1px;

	margin:
		46px
		0;

	border: 0;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(148, 163, 184, 0.18),
			transparent
		);
}


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

body.grafixyy-static-page-body
.grafixyy-static-article a:focus-visible,
body.grafixyy-static-page-body
.grafixyy-static-article summary:focus-visible {
	outline:
		3px solid #22d3ee;

	outline-offset: 4px;
}


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

@media (max-width: 620px) {

	body.grafixyy-static-page-body
	.grafixyy-static-hero {
		padding:
			58px
			16px
			44px;
	}


	body.grafixyy-static-page-body
	.grafixyy-static-hero h1 {
		font-size:
			clamp(38px, 12vw, 54px);
	}


	body.grafixyy-static-page-body
	.grafixyy-static-content {
		padding:
			46px
			16px
			76px;
	}


	body.grafixyy-static-page-body
	.grafixyy-static-article {
		font-size: 14px;

		line-height: 1.95;
	}


	body.grafixyy-static-page-body
	.grafixyy-static-article h2 {
		margin-top: 46px;
	}


	body.grafixyy-static-page-body
	.grafixyy-static-article blockquote {
		padding:
			18px
			17px;
	}
}


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

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

	body.grafixyy-static-page-body
	.grafixyy-static-article * {
		scroll-behavior: auto !important;
	}
}