/* ----------------  */
/* Custom Fonts      */
/* ----------------  */
/* Inter Regular */
@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter/static/Inter_18pt-Regular.ttf')
		format('truetype');
	font-weight: 400;
	font-style: normal;
}
/* Inter SemiBold */
@font-face {
	font-family: 'Inter';
	src: url('./assets/fonts/inter/static/Inter_18pt-SemiBold.ttf')
		format('truetype');
	font-weight: 600;
	font-style: normal;
}
/* Martian Mono Bold */
@font-face {
	font-family: 'MartianMono';
	src: url('./assets/fonts/martian-mono/static/MartianMono-Bold.ttf')
		format('truetype');
	font-weight: 700;
	font-style: normal;
}
/* Martian Mono SemiBold */
@font-face {
	font-family: 'MartianMono';
	src: url('./assets/fonts/martian-mono/static/MartianMono-SemiBold.ttf')
		format('truetype');
	font-weight: 600;
	font-style: normal;
}
/* Martian Mono Regular */
@font-face {
	font-family: 'MartianMono';
	src: url('./assets/fonts/martian-mono/static/MartianMono-Regular.ttf')
		format('truetype');
	font-weight: 400;
	font-style: normal;
}
/* ----------------  */
/* Custom Properties */
/* ----------------  */
:root {
	--clr-neutral-900: 194 78% 11%;
	--clr-neutral-700: 195 23% 28%;
	--clr-neutral-200: 17 12% 89%;
	--clr-neutral-100: 17 41% 97%;
	--clr-neutral-0: 0 0% 100%;
	--clr-light-salmon-500: 22 99% 72%;
	--clr-light-salmon-100: 22 100% 91%;
	--clr-light-salmon-50: 23 100% 97%;

	--text-gradient: linear-gradient(
		107deg,
		#ff9a60 -11.37%,
		hsl(var(--clr-neutral-900)) 61.84%
	);
	--gradient: linear-gradient(
		90deg,
		hsl(var(--clr-neutral-100)) 0%,
		hsl(var(--clr-neutral-50)) 100%
	);

	--fs-900: clamp(2.375rem, 2.075rem + 1.5vw, 3.875rem);
	--fs-800: clamp(2.125rem, 1.925rem + 1vw, 3.125rem);
	--fs-700: clamp(1.5rem, 1.375rem + 0.625vw, 2.125rem);
	--fs-600: 1.5rem;
	--fs-500: 1.25rem;
	--fs-400: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
	--fs-300: 0.875rem;

	--ff-sans-accent: 'MartianMono', sans-serif;
	--ff-sans-normal: 'Inter', sans-serif;

	--fw-bold: 900;
	--fw-semibold: 600;
	--fw-regular: 400;

	--spacing-1000: 5rem;
	--spacing-800: 4rem;
	--spacing-600: 3rem;
	--spacing-500: 2.5rem;
	--spacing-400: 2rem;
	--spacing-300: 1.5rem;
	--spacing-250: 1.25rem;
	--spacing-200: 1rem;
	--spacing-150: 0.75rem;
	--spacing-100: 0.5rem;
	--spacing-075: 0.375rem;
	--spacing-050: 0.25rem;
	--spacing-025: 0.125rem;
	--spacing-0: 0rem;

	--radius-full: 999px;
	--radius-24: 24px;
	--radius-20: 20px;
	--radius-16: 16px;
	--radius-12: 12px;
	--radius-10: 10px;
	--radius-8: 8px;
	--radius-6: 6px;
	--radius-4: 4px;
	--radius-0: 0px;
}

/* ----------------  */
/* Reset             */
/* ----------------  */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	font-weight: var(--fw-regular);
}

body {
	font-family: var(--ff-sans-normal);
	font-size: var(--fs-500);
	font-weight: var(--fw-regular);
	color: hsl(var(--clr-neutral-700));
	background-color: hsl(var(--clr-neutral-0));
	line-height: 1.4;
}

img,
picture {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}

input,
button,
textarea,
select {
	font: inherit;
}

blockquote {
	margin: 0;
}

ul,
ol {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
/* -----------------  */
/* Utility Classes    */
/* -----------------  */
/* General */
.flex {
	display: flex;
	gap: var(--gap, 1rem);
}

.grid {
	display: grid;
	gap: var(--gap, 1rem);
}

.flow {
	--flow-space: var(--spacing-800);
}

.flow > *:is(:not(:first-child)) {
	margin-top: var(--flow-space, 1rem);
}

.fb-wrapper {
	display: grid;
	grid-template-columns: 1fr min(100% - 2rem, 90rem) 1fr;
}

.fb-wrapper > * {
	grid-column: 2;
}

.fb-wrapper > .fullbleed {
	grid-column: 1/-1;
}

.fb-col-wrapper {
	display: grid;
	grid-template-columns: 1fr repeat(12, calc(min(100% - 2rem, 90rem) / 12)) 1fr;
}

.flex-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-400);
}

@media (min-width: 40em) {
	.flex-container {
		display: flex;
		align-items: center;
		flex-direction: row;
		gap: var(--spacing-800);
	}

	.flex-container > * {
		width: 100%;
	}
}

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

[hidden] {
	display: none;
}

.skip-to-content {
	position: absolute;
	z-index: 9999;
	background-color: hsl(var(--clr-white));
	color: hsl(var(--clr-dark));
	padding: 0.5em 1em;
	margin-inline: auto;
	transform: translateY(-100%);
	transition: transform 500ms ease-in-out;
}

.skip-to-content:focus {
	transform: translateY(0);
}

/* Colors */
h1 {
	background: -webkit-linear-gradient(
		-45deg,
		#ff9a60 -11.37%,
		hsl(var(--clr-neutral-900)) 61.84%
	);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Typography */
.text-preset-1,
.text-preset-2,
.text-preset-3,
.text-preset-4,
.text-preset-6,
.text-preset-7 {
	font-family: var(--ff-sans-accent);
	color: hsl(var(--clr-neutral-900));
}

.text-preset-1 {
	font-size: var(--fs-900);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	letter-spacing: -2px;
}

.text-preset-2 {
	font-size: var(--fs-800);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	letter-spacing: -2px;
}

.text-preset-2:where(.alternate),
.text-preset-7:where(.alternate) {
	color: hsl(var(--clr-neutral-100));
}

.text-preset-3 {
	font-size: var(--fs-700);
	font-weight: var(--fw-semibold);
	line-height: 1.1;
	letter-spacing: -1px;
}

.text-preset-4 {
	font-size: var(--fs-600);
	font-weight: var(--fw-regular);
	line-height: 1.1;
	letter-spacing: -1px;
}

.text-preset-5 {
	font-family: var(--ff-sans-normal);
	font-size: var(--fs-500);
	font-weight: var(--fw-regular);
	line-height: 1.4;
	letter-spacing: -0.5px;
}

.text-preset-6 {
	font-size: var(--fs-400);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	letter-spacing: -1px;
}

.text-preset-7 {
	font-size: var(--fs-300);
	font-weight: var(--fw-regular);
	line-height: 1.2;
	letter-spacing: -1px;
}

section.alternate {
	background-color: hsl(var(--clr-neutral-900));
	color: hsl(var(--clr-neutral-100));
	border-top-left-radius: var(--radius-16);
	border-top-right-radius: var(--radius-16);
	font-size: var(--fs-300);
}

.ff-sans-normal {
	font-family: var(--ff-sans-normal);
}

.ff-sans-accent {
	font-family: var(--ff-sans-accent);
}

.uppercase {
	text-transform: uppercase;
}

.fs-900 {
	font-size: var(--fs-900);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}

.fs-800 {
	font-size: var(--fs-800);
	line-height: 1.3;
}

.fs-700 {
	font-size: var(--fs-700);
	line-height: 1.1;
}

.fs-600 {
	font-size: var(--fs-600);
	line-height: 1.1;
}

.fs-500 {
	font-size: var(--fs-500);
	letter-spacing: -0.5px;
	line-height: 1.4;
}

.fs-400 {
	font-size: var(--fs-400);
	line-height: 1.3;
}

.fs-300 {
	font-size: var(--fs-300);
	line-height: 1.2;
}

@media (min-width: 40em) {
	.fs-700,
	.text-preset-3 {
		line-height: 1.1;
	}
}

.fs-900,
.fs-800 {
	letter-spacing: -2px;
}

.fs-700,
.fs-600,
.fs-400,
.fs-300 {
	letter-spacing: -1px;
}

.fs-800,
.fs-700,
.fs-400,
strong,
.fw-600 {
	font-weight: var(--fw-semibold);
}

.fw-400 {
	font-weight: var(--fw-regular);
}

/* ----------------  */
/* Components        */
/* ----------------  */

/* Star icon */
.five-star-rating {
	height: 25px;
	margin-block-end: var(--spacing-050);
}

.five-star-rating svg {
	width: 24px;
	height: 25px;
	display: inline-block;
}

.review-section .five-star-rating svg {
	width: 28px;
	height: 29px;
}

/* Image */
picture > img {
	border-radius: var(--radius-6);
}

/* Decoration */
.circle {
	position: relative;
	z-index: 1;
	display: inline-block;
}

.circle::before {
	content: '';
	position: absolute;
	background-image: url(./assets/images/pattern-circle.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 6.75rem;
	height: 2.875rem;
	z-index: -1;
	pointer-events: none;
}

.pattern-glow {
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.pattern-glow::before {
	content: '';
	z-index: -1;
	position: absolute;
	background: url('./assets/images/pattern-glow.svg') no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	right: -60vw;
	bottom: -20vw;
}

/* Buttons */
.primary {
	--btn-border: hsl(var(--clr-neutral-900));
	--btn-background: hsl(var(--clr-light-salmon-50));
	--btn-color: hsl(var(--clr-neutral-900));
	--btn-background-hover: linear-gradient(
		90deg,
		hsl(var(--clr-light-salmon-100)) 0%,
		hsl(var(--clr-light-salmon-50)) 100%
	);
}

.alternate {
	--btn-border: hsl(var(--clr-neutral-0));
	--btn-background: hsl(var(--clr-neutral-900));
	--btn-color: hsl(var(--clr-neutral-0));
	--btn-background-hover: linear-gradient(
		90deg,
		hsl(var(--clr-neutral-700)) 0%,
		hsl(var(--clr-neutral-900)) 100%
	);
}

.button {
	background: var(--btn-background);
	color: var(--btn-color);
	cursor: pointer;
	font-size: var(--fs-400);
	font-family: var(--ff-sans-accent);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	border: 2px solid var(--btn-border);
	border-radius: var(--radius-8);
	padding: var(--spacing-250) var(--spacing-300);
	transition: background 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-200);
}

.button span {
	display: grid;
	place-items: center;
}

.button:hover,
.button:focus {
	background: var(--btn-background-hover);
}

.button:active {
	outline-offset: var(--spacing-050);
	outline: 2px solid var(--btn-border);
}

/* Cards */
.tech-card {
	background-image: url('./assets/images/pattern-light-bg.svg');
	background-color: hsl(var(--clr-neutral-100));
	padding: var(--spacing-800) var(--spacing-200);
}

.option-card {
	border-radius: var(--radius-8);
	border: 1px solid hsl(var(--clr-neutral-200));
	background-color: hsl(var(--clr-neutral-0));
	padding: var(--spacing-300);
}

.option-card > .button {
	width: 100%;
}

.bg-accent {
	background-color: hsl(var(--clr-neutral-100));
}

.option-card.bg-accent {
	background-image: url(./assets/images/pattern-glow.svg);
	background-position: -25px -100px;
	background-repeat: no-repeat;
}

.option-card p:nth-of-type(2) {
	margin-block: var(--spacing-400);
}

.option-card .text-preset-3 {
	font-size: 2.125rem;
}

.option-card ul,
.read-section ul {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-200);
}

.tech-card ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
	gap: var(--spacing-200);
}

@media (min-width: 60em) {
	.tech-card > * {
		margin-inline: auto;
		max-width: 1050px;
	}

	.tech-card h2 {
		text-align: center;
		max-width: 15ch;
	}

	.tech-card li {
		max-width: 18ch;
		position: relative;
	}

	.tech-card li:not(:last-of-type)::after {
		content: url(./assets/images/pattern-arrow.svg);
		position: absolute;
		top: 20px;
		right: 0px;
	}
}

.list-number-square {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-block: var(--spacing-250);
	width: 2rem;
	height: 2rem;
	border: 2px solid hsl(var(--clr-neutral-900));
	border-radius: var(--radius-4);
}

.option-card ul {
	border-top: 1px solid hsl(var(--clr-neutral-200));
	padding-block: var(--spacing-300) var(--spacing-400);
}

li.default-marker {
	padding-left: 36px;
	background: url('./assets/images/icon-check.svg') no-repeat left center;
	background-size: 24px 24px;
}

li.large-marker {
	padding-left: 42px;
	background: url('./assets/images/icon-check.svg') no-repeat left center;
	background-size: 28px 28px;
}

/* ----------------  */
/* Layout            */
/* ----------------  */

section h2 {
	margin-block-end: var(--spacing-300);
	max-width: 18ch;
}

section picture:not(.hero-section-picture) {
	margin-block-start: var(--spacing-500);
}

header {
	background-color: hsl(var(--clr-neutral-100));
	background-image: url('./assets/images/pattern-light-bg.svg');
	padding-block-start: clamp(
		var(--spacing-250),
		var(--spacing-250) + 0.25vw,
		var(--spacing-300)
	);
}

@media (min-width: 40em) {
	section picture:not(.hero-section-picture) {
		margin-block-start: unset;
	}
}

.hero-section {
	padding-block: var(--spacing-600);
}

.hero-section .flow {
	--flow-space: var(--spacing-400);
}

.hero-section-text > h1 {
	max-width: 20ch;
}

.hero-section-text > p {
	margin-block: var(--spacing-200) var(--spacing-300);
}

.tech-book-logo {
	grid-column: 2/8;
	grid-row: 1;
}

.hero-section {
	grid-column: 2/14;
	grid-row: 2;
}

@media (min-width: 40em) {
	.club-section,
	.read-section {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-1000);
	}

	.read-section .section-text {
		grid-column: 2;
		grid-row: 1;
	}

	.read-section picture {
		grid-column: 1;
		grid-row: 1;
	}

	.section-text {
		align-self: center;
	}
}

.rating-box {
	display: flex;
	align-items: center;
	gap: var(--spacing-150);
	margin-block-start: var(--spacing-250);
}

.avatars {
	width: 110px;
	height: 40px;
}

.read-section {
	margin-block-start: var(--spacing-800);
}

.read-section > h2 {
	max-width: 15ch;
}

.options-section,
.review-section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.options-section {
	place-self: center;
}

.options-cards {
	margin-block-start: var(--spacing-300);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--spacing-300);
	max-width: 950px;
	margin-inline: auto;
	width: 100%;
}

.review-section {
	gap: var(--spacing-400);
}

@media (min-width: 40em) {
	.logos-tech {
		position: relative;
	}

	.logos-tech::before {
		content: url(./assets/images/logos-tech.svg);
		position: absolute;
		z-index: 10;
		bottom: var(--spacing-600);
		right: var(--spacing-600);
	}
}

@media (min-width: 60em) {
	.option-card.bg-accent {
		scale: 1.1;
	}

	.review-section {
		align-items: center;
		text-align: center;
		width: 970px;
		margin-inline: auto;
	}

	.logos-tech::before {
		bottom: var(--spacing-600);
		right: calc(50% - var(--spacing-500));
		transform: translateX(50%);
	}
}

.cta-section {
	padding-block-end: var(--spacing-800);
}

.cta-section .button {
	max-width: fit-content;
	margin-inline: auto;
}

.cta-section .rating-box,
.cta-section h2 {
	margin-inline: auto;
}

.cta-section h2 {
	margin-block: var(--spacing-600) var(--spacing-500);
	text-align: center;
}

footer {
	background: hsl(var(--clr-neutral-900));
	color: hsl(var(--clr-neutral-0));
	text-align: center;
	gap: var(--spacing-250);
	padding-block-end: var(--spacing-300);
}

footer > section {
	padding-block-start: var(--spacing-300);
	border-top: 1px solid hsl(var(--clr-neutral-0));
}

@media (min-width: 40em) {
	footer > section {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

footer p {
	font-size: var(--fs-300);
	font-weight: var(--fw-regular);
}

.social-media-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-200);
}

.social-media-wrapper > * {
	display: grid;
	place-items: center;
}