:root {
	--bg-top: #006c96;
	--bg-bottom: #80ecff;
	--topbar: #036f99;
	--text: #ffffff;
	--about-top: #190096;
	--about-mid: #8099ff;
	--about-bottom: #200a9d;
	--about-bar: #1c0499;
	--contribution-top: #5a0096;
	--contribution-mid: #cf7ffe;
	--contribution-bottom: #5a0196;
	--contribution-bar: #5a0096;
	--analysis-top: #f87f28;
	--analysis-mid: #ffbf7f;
	--analysis-bottom: #f98733;
	--analysis-bar: #f8802a;
	--sources-top: #3c9600;
	--sources-bottom: #b1ff80;
	--sources-bar: #409a04;
	--accent-pink: #ff8f8f;
	--accent-yellow: #f9c02b;
	--button-blue: #749eeb;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	background: linear-gradient(180deg, var(--bg-top) 7%, var(--bg-bottom) 100%);
	color: var(--text);
	font-family: "Langar", cursive;
}

body:has(.about-page) {
	background: linear-gradient(180deg, var(--about-top) 7.21%, var(--about-bar) 19.72%, var(--about-mid) 39.89%, #1a0197 60.21%, #798ff8 80.54%, var(--about-bottom) 100%);
}

body:has(.contribution-page) {
	background: linear-gradient(180deg, var(--contribution-top) 7.21%, var(--contribution-bar) 19.72%, var(--contribution-mid) 49.998%, var(--contribution-bottom) 100%);
}

body:has(.analysis-page) {
	background: linear-gradient(180deg, var(--analysis-top) 7.211%, var(--analysis-mid) 50.016%, var(--analysis-bottom) 100%);
}

body:has(.sources-page) {
	background: linear-gradient(180deg, var(--sources-top) 7.211%, var(--sources-bottom) 100%);
}

.page {
	min-height: 100vh;
	width: 100%;
}

.topbar {
	align-items: center;
	background: var(--topbar);
	display: flex;
	justify-content: space-between;
	padding: 24px 28px;
}

.about-topbar {
	background: var(--about-bar);
}

.contribution-topbar {
	background: var(--contribution-bar);
}

.analysis-topbar {
	background: var(--analysis-bar);
}

.sources-topbar {
	background: var(--sources-bar);
}

.brand {
	font-family: "Island Moments", cursive;
	font-size: 64px;
	line-height: 1;
}

.menu {
	display: flex;
	gap: 30px;
	white-space: nowrap;
}

.menu-item {
	position: relative;
}

.menu-link {
	color: var(--text);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

.dropdown-trigger {
	display: inline-block;
	padding-bottom: 8px;
}

.dropdown-menu {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	display: none;
	left: 0;
	min-width: 220px;
	padding: 10px;
	position: absolute;
	top: calc(100% - 2px);
	z-index: 10;
}

.dropdown-link {
	border-radius: 6px;
	color: #00597b;
	display: block;
	font-size: 22px;
	line-height: 1.2;
	padding: 8px 10px;
	text-decoration: none;
}

.dropdown-link:hover,
.dropdown-link:focus-visible {
	background: #d9f5fb;
	outline: none;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
	display: block;
}

.menu-link.active {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.hero {
	align-items: center;
	display: flex;
	justify-content: space-between;
	min-height: calc(100vh - 112px);
	padding: 12px;
}

.hero-copy {
	margin-top: -90px;
	text-align: center;
	width: 54%;
}

.hero-copy h1 {
	font-size: 64px;
	font-weight: 400;
	line-height: 1;
	margin: 0;
}

.title-rule {
	border-top: 5px solid #ffffff;
	margin: 12px auto 18px;
	width: 425px;
}

.hero-copy h2 {
	font-size: 36px;
	font-weight: 400;
	line-height: 1.1;
	margin: 0;
}

.hero-copy p {
	font-size: 24px;
	line-height: 1.1;
	margin: 18px 0 0;
}

.hero-gallery {
	flex: 0 0 649px;
	height: 928px;
	position: relative;
}

.about-main {
	padding-bottom: 40px;
}

.contribution-main {
	padding-bottom: 0;
}

.analysis-main {
	padding-bottom: 0;
}

.composition-main {
	padding-bottom: 0;
}

.about-intro,
.about-impact-card,
.about-why-panel,
.about-influence-card,
.about-modern-panel {
	margin: 0 auto;
	max-width: 1440px;
	width: 100%;
}

.contribution-intro,
.contribution-feature {
	margin: 0 auto;
	max-width: 1440px;
	width: 100%;
}

.about-intro,
.about-impact-card,
.about-influence-card,
.about-modern-grid,
.about-why-panel {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 90px 74px;
}

.contribution-intro {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 90px 74px;
}

.contribution-feature {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 27px;
	padding: 90px 74px 87px;
}

.analysis-intro,
.analysis-feature {
	margin: 0 auto;
	max-width: 1440px;
	width: 100%;
}

.analysis-intro {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 90px 74px;
}

.analysis-feature {
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 90px 74px 117px;
}

.analysis-feature-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 58px;
	width: 100%;
}

.analysis-title {
	color: #f25f28;
	font-family: "Langar", cursive;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 18px;
}

.analysis-copy p {
	font-size: 18px;
	line-height: 1.45;
	margin: 0 0 18px;
	text-align: justify;
}

.analysis-copy p:last-child {
	margin-bottom: 0;
}

.sources-main {
	margin: 0 auto;
	max-width: 1440px;
	padding: 64px 74px 40px;
	width: 100%;
}

.sources-content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.sources-top {
	height: 375px;
	position: relative;
	width: 100%;
}

.sources-bottom {
	align-self: flex-end;
	height: 489px;
	position: relative;
	width: min(1103px, 100%);
}

.sources-image {
	position: absolute;
}

.sources-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.sources-image-top {
	left: 0;
	top: 0;
	height: 375px;
	width: 282px;
}

.sources-copy {
	left: 331px;
	position: absolute;
	top: 44px;
	width: 988px;
}

.sources-list {
	color: #ffffff;
	font-size: 24px;
	line-height: 2.5;
	list-style: disc;
	margin: 0;
	padding-left: 24px;
	text-align: justify;
}

.sources-list li {
	margin: 0 0 24px;
}

.sources-list li:last-child {
	margin-bottom: 0;
}

.sources-list a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.sources-image-bottom-left {
	left: 0;
	top: 197px;
	height: 240px;
	width: 480px;
}

.sources-image-bottom-right {
	right: 0;
	top: 0;
	height: 500px;
	width: 331px;
}

.composition-intro {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1440px;
	padding: 90px 74px;
	width: 100%;
}

.composition-intro-card {
	flex: 0 0 auto;
}

.composition-copy {
	padding: 22px 24px;
	width: 627px;
}

.composition-title {
	color: #19793a;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 16px;
}

.composition-copy p {
	font-size: 18px;
	line-height: 1.61;
	margin: 0 0 18px;
	text-align: justify;
}

.composition-copy p:last-child {
	margin-bottom: 0;
}

.composition-intro-image {
	flex: 0 0 auto;
	height: 479px;
	width: 480px;
}

.composition-intro-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.analysis-image-card {
	height: 630px;
	width: 480px;
	flex-shrink: 0;
}

.analysis-image-card img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.analysis-heading {
	color: #ffffff;
	font-family: "Langar", cursive;
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	margin: 0;
	text-align: center;
}

.analysis-grid {
	align-items: center;
	display: flex;
	justify-content: space-between;
	gap: 58px;
	width: 100%;
}

.composition-feature {
	margin: 0 auto;
	max-width: 1440px;
	padding: 90px 74px 117px;
	width: 100%;
}

.composition-feature-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
}

.composition-heading {
	color: #ffffff;
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	margin: 0;
	text-align: center;
}

.composition-frame {
	max-width: 1318px;
	width: 100%;
}

.composition-frame img {
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.bottom-image {
	height: 630px;
	width: 480px;
}

.analysis-list {
	color: #ffffff;
	font-family: "Langar", cursive;
	font-size: 48px;
	line-height: 1.56;
	margin: 0;
	padding-left: 66px;
	width: 48%;
}

.analysis-list li {
	margin-bottom: 8px;
}

.about-intro {
	gap: 32px;
	padding: 90px;
}

.about-portrait,
.about-bio-card,
.about-image-card {
	flex: 0 0 auto;
}

.about-portrait img,
.about-image-card img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.about-portrait {
	border-radius: 10px;
	overflow: hidden;
	width: 608px;
	height: 700px;
}

.about-bio-card {
	background: rgba(255, 255, 255, 0.96);
	border-radius: 10px;
	color: #000000;
	height: 746px;
	padding: 22px 24px;
	width: 627px;
}

.about-bio-text,
.text-card p,
.modern-copy,
.why-button,
.modern-label,
.modern-heading p,
.why-heading p,
.contribution-copy p,
.contribution-note {
	margin: 0;
}

.about-bio-text {
	font-family: "Langar", cursive;
	font-size: 19px;
	line-height: 1.45;
	text-align: justify;
}

.bio-name,
.section-title {
	font-size: 30px;
}

.bio-name {
	color: #000000;
}

.section-divider {
	height: 62px;
	margin: 0 auto;
	max-width: 1440px;
	width: 100%;
}

.section-divider img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.about-impact-card,
.about-influence-card {
	gap: 32px;
}

.white-card {
	background: #ffffff;
	border-radius: 10px;
	color: #000000;
	padding: 22px 24px;
	width: 627px;
}

.text-card {
	font-family: "Langar", cursive;
	font-size: 19px;
	line-height: 1.45;
	text-align: justify;
}

.contribution-title {
	color: #000000;
	font-family: "Langar", cursive;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 18px;
}

.contribution-copy p {
	font-size: 18px;
	line-height: 1.45;
	margin-top: 0;
    text-align: justify;
}

.contribution-image-card {
	height: 701px;
	width: 561px;
	flex-shrink: 0;
}

.contribution-image-card img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.contribution-feature-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 27px;
	width: 100%;
}

.contribution-heading {
	color: #ffffff;
	font-family: "Langar", cursive;
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	margin: 0;
	text-align: center;
}

.contribution-gallery {
	display: flex;
	height: 584px;
	max-width: 855px;
	width: 100%;
}

.contribution-gallery img {
	display: block;
	height: 100%;
	object-fit: cover;
}

.contribution-gallery img:first-child {
	width: 49.006%;
}

.contribution-gallery img:last-child {
	width: 50.994%;
}

.contribution-note {
	color: #ffffff;
	font-size: 23px;
	line-height: 1.67;
	max-width: 1348px;
	text-align: center;
}

.impact-title {
	color: red;
}

.influence-title {
	color: var(--accent-yellow);
}

.about-image-card {
	width: 506px;
	height: 700px;
	flex-shrink: 0;
}

.tall-image {
	width: 506px;
}

.about-why-panel {
	align-items: flex-start;
	gap: 40px;
}

.about-why-grid {
	width: 714px;
}

.why-heading {
	color: var(--accent-pink);
	font-size: 48px;
	margin-bottom: 34px;
	text-align: left;
}

.why-buttons {
	display: flex;
	flex-direction: column;
	gap: 29px;
	padding-left: 0;
}

.why-button {
	align-items: center;
	background: var(--button-blue);
	color: #ffffff;
	display: flex;
	font-size: 36px;
	height: 112px;
	justify-content: center;
	text-align: center;
	width: 100%;
}

.about-modern-panel {
	padding: 90px 74px 40px;
}

.modern-heading {
	color: var(--accent-yellow);
	font-size: 48px;
	margin-bottom: 34px;
}

.modern-grid {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 0;
	width: 100%;
}

.modern-row {
	align-items: stretch;
	display: grid;
	gap: 22px;
	grid-template-columns: 489px 58px 1fr;
	width: 100%;
}

.modern-label,
.modern-copy {
	background: var(--button-blue);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 112px;
}

.modern-label {
	font-size: 36px;
	padding: 16px;
}

.modern-copy {
	font-size: 24px;
	line-height: 1.45;
	justify-content: flex-start;
	padding: 16px 28px;
	text-align: justify;
}

.modern-arrow {
	align-self: center;
	display: flex;
	justify-content: center;
}

.modern-arrow img {
	display: block;
	max-width: 58px;
}

.arrow-alt img {
	transform: rotate(180deg);
}

.work {
	object-fit: cover;
	position: absolute;
}

.work-1 {
	height: 325px;
	left: 42px;
	top: 0;
	width: 260px;
}

.work-2 {
	height: 363px;
	left: 344px;
	top: 213px;
	width: 291px;
}

.work-3 {
	height: 402px;
	left: 15px;
	top: 526px;
	width: 310px;
}

@media (max-width: 1200px) {
	.topbar {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.about-intro,
	.about-impact-card,
	.about-influence-card,
	.about-why-panel,
	.about-modern-panel {
		padding-left: 16px;
		padding-right: 16px;
	}

	.contribution-intro,
	.contribution-feature {
		padding-left: 16px;
		padding-right: 16px;
	}

	.analysis-intro,
	.analysis-feature {
		padding-left: 16px;
		padding-right: 16px;
	}

	.about-intro,
	.about-impact-card,
	.about-influence-card,
	.about-why-panel {
		flex-direction: column;
		align-items: center;
	}

	.contribution-intro {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.analysis-intro {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.about-portrait,
	.about-bio-card,
	.white-card,
	.about-image-card,
	.tall-image {
		width: min(100%, 627px);
	}

	.contribution-copy,
	.contribution-image-card {
		width: min(100%, 627px);
		height: auto;
	}

	.analysis-copy,
	.analysis-image-card,
	.bottom-image {
		width: min(100%, 627px);
		height: auto;
	}

	.about-bio-card,
	.white-card,
	.about-portrait,
	.about-image-card {
		height: auto;
	}

	.about-why-grid {
		width: 100%;
	}

	.contribution-gallery {
		flex-direction: column;
		height: auto;
		max-width: 855px;
	}

	.analysis-grid {
		flex-direction: column-reverse;
		gap: 24px;
	}

	.analysis-list {
		font-size: 36px;
		padding-left: 36px;
		width: 100%;
	}

	.sources-main {
		padding-left: 16px;
		padding-right: 16px;
	}

	.sources-top,
	.sources-bottom {
		height: auto;
		position: static;
		width: 100%;
	}

	.sources-content {
		gap: 24px;
	}

	.sources-copy {
		left: auto;
		position: static;
		top: auto;
		width: 100%;
	}

	.sources-list {
		font-size: 20px;
		line-height: 1.65;
		padding-left: 22px;
	}

	.sources-image {
		height: auto;
		position: static;
		width: min(100%, 480px);
	}

	.sources-image img {
		height: auto;
	}

	.sources-bottom {
		display: flex;
		flex-direction: column;
		gap: 24px;
		align-self: stretch;
	}

	.composition-intro {
		flex-direction: column;
		gap: 24px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.composition-copy,
	.composition-intro-image {
		height: auto;
		width: min(100%, 627px);
	}

	.composition-feature {
		padding-left: 16px;
		padding-right: 16px;
	}

	.composition-frame {
		max-width: 627px;
	}

	.analysis-heading {
		font-size: 36px;
	}

	.contribution-gallery img {
		height: auto;
		width: 100% !important;
	}

	.contribution-note {
		font-size: 22px;
	}

	.why-heading,
	.modern-heading {
		padding-left: 0;
	}

	.modern-row {
		grid-template-columns: 1fr;
	}

	.modern-arrow {
		display: none;
	}

	.modern-copy {
		justify-content: center;
	}

	.menu {
		flex-wrap: wrap;
		gap: 18px;
	}

	.menu-link {
		font-size: 22px;
	}

	.contribution-heading {
		font-size: 36px;
	}

	.analysis-copy p {
		font-size: 16px;
	}

	.dropdown-menu {
		left: 0;
		min-width: 190px;
	}

	.dropdown-link {
		font-size: 18px;
	}

	.hero {
		align-items: flex-start;
		flex-direction: column;
		gap: 26px;
		min-height: auto;
		padding: 24px 16px 36px;
	}

	.hero-copy {
		margin-top: 0;
		width: 100%;
	}

	.hero-copy h1 {
		font-size: 72px;
	}

	.title-rule {
		width: min(92%, 425px);
	}

	.hero-copy h2 {
		font-size: 46px;
	}

	.hero-copy p {
		font-size: 34px;
	}

	.hero-gallery {
		display: grid;
		gap: 18px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: auto;
		width: 100%;
	}

	.work {
		height: auto;
		left: auto;
		max-width: 100%;
		position: static;
		top: auto;
		width: 100%;
	}

	.work-3 {
		grid-column: 1 / -1;
		justify-self: center;
		max-width: 310px;
	}

	.about-main {
		padding-bottom: 24px;
	}

	.why-button {
		font-size: 24px;
		height: auto;
		padding: 18px;
	}

	.modern-label,
	.modern-copy {
		min-height: auto;
	}
}

@media (max-width: 700px) {
	.topbar {
		padding: 18px 16px;
	}

	.brand {
		font-size: 52px;
	}

	.menu-link {
		font-size: 20px;
	}

	.menu {
		row-gap: 10px;
	}

	.dropdown-menu {
		left: 50%;
		min-width: 170px;
		transform: translateX(-50%);
	}

	.dropdown-link {
		font-size: 17px;
	}

	.hero-copy h1 {
		font-size: 56px;
	}

	.hero-copy h2 {
		font-size: 36px;
	}

	.hero-copy p {
		font-size: 28px;
	}

	.hero-gallery {
		grid-template-columns: 1fr;
	}

	.work-3 {
		grid-column: auto;
	}

	.contribution-title,
	.contribution-heading,
	.bio-name,
	.section-title,
	.why-heading,
	.modern-heading,
	.why-button,
	.modern-label,
	.analysis-title,
	.analysis-heading,
	.analysis-list {
		font-size: 24px;
	}

	.about-bio-text,
	.text-card,
	.modern-copy {
		font-size: 16px;
	}

	.contribution-copy p,
	.contribution-note {
		font-size: 16px;
	}

	.analysis-list {
		font-size: 18px;
	}

	.sources-list {
		font-size: 18px;
		line-height: 1.55;
	}

	.sources-list li {
		margin-bottom: 14px;
	}

	.composition-heading {
		font-size: 36px;
	}

	.composition-title {
		font-size: 18px;
	}

	.composition-copy p {
		font-size: 16px;
	}
}