@import url("reset.css");
@import url("layout.css");
@import url("variables.css");
@import url("typography.css");
/* DO NOT EDIT THESE IMPORTS
In order to keep our CSS as manageable as possible, we're starting with multiple separate stylesheets. They are all imported into style.css.

    Do not edit reset.css at all.
    You can minimally edit layout.css to match your specific column/row grid rules. Try to keep all basic structural rules here.
    Optionally, you can set colour variables in variables.css.
    Use typography.css stylesheet to set your general text styles.
    Use style.css for all general UI styles, or anything that you want to overwrite from other stylesheets, because it's loaded last. */

/* Use this stylesheet to add your UI details, and to overwrite layout details for specific instances. */

/* ///////////////////////// used on home hero h1 ////////////////////////*/

/* used on home hero logo image on index.html */
.cyra-logo-hero {
	align-items: center;
	max-height: 100%;
	margin: 0 auto;
}

/* /////////////////////// base styles //////////////////////*/

body {
	background-color: var(--offwhite);
	color: var(--black);
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*//////////////////utility for consistent vertical spacing//////////////////// */

.page-padding {
	padding: 24px 0;
}

/*////////////////////////links/////////////////*/

a:hover,
a:focus {
	text-decoration: none;
}

/* //////////////////// Header ///////////////// */

.site-header {
	position: sticky;
	top: 0;
	z-index: 10;

	background: var(--darkpurp);
}

/*/////////////////////////////layout nav items ///////////////////////*/

.site-header nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/*//////////////////////////////////header logo/////////////////////////*/

.header-logo {
	width: auto;
	height: 45px;
}

/*///////////////////////////////style ALL nav links///////////////////////////*/

nav a {
	padding: 10px 12px;
	line-height: 1;
	text-decoration: none; /* No underline */
	margin-left: 32px;

	transition:
		color 140ms ease,
		transform 140ms ease;
}

/*////////////////////////////// hover for nav TEXT ONLY links ////////////////////*/

nav a:not(.primary-button):hover {
	color: var(--Brightpurp);
	text-decoration: underline; /* adds back underline */
	text-underline-offset: 4px;
	background: transparent;
}

/*///////////////////////// focus state (keyboard accessiblity) TEXT ONLY links /////////////////////*/

nav a:not(.primary-button):focus-visible {
	color: var(--Brightpurp);
	text-decoration: underline;
	text-underline-offset: 4px;

	outline: 3px solid rgba(241, 182, 28, 0.6);
	outline-offset: 2px;
}

/*///////////////////////// active press state TEXT ONLY links /////////////////////*/

nav a:not(.primary-button):active {
	transform: translateY(1px);
}

/*////////////hero center /////////*/
.center-vertical-row {
	align-items: center;
}

/*/////////////////////////hero left side//////////////////*/
.hero-left {
	padding-left: 130px;
}

/*//////////////////////// hero actions ///////////////////*/
.hero-actions {
	display: flex;
	gap: 30px;
	margin-top: 20px;
}

.hero-logo img {
	width: 420px;
	max-width: 100%;
	height: auto;
}

/* Desktop: keep the two hero columns from wrapping */
@media (min-width: 768px) {
	.page-section:first-of-type .row.center-vertical-row {
		flex-wrap: nowrap;
		align-items: center; /*logo aligned with text block */
	}

	/* Override center-item behavior ONLY for the hero logo column */
	.hero-logo.center-item {
		justify-content: flex-start;
		align-items: center;
	}
}
/*////////////////////////// primary button ///////////////////////////*/
.primary-button {
	background-color: var(--Brightpurp);
	color: var(--black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;

	padding: 12px 16px;
	border-radius: 999px;

	box-shadow: 0 6px 18px rgba(11, 6, 28, 0.12);

	transition:
		transform 120ms ease,
		box-shadow 120ms ease,
		background-color 120ms ease,
		color 120ms ease;
}

/*hover*/
.primary-button:hover {
	box-shadow: 0 10px 22px rgba(11, 6, 28, 0.16);
	background-color: var(--violet);
}

/*active / pressed */
.primary-button:active {
	transform: translateY(1px);
	box-shadow: 0 4px 12px rgba(11, 6, 28, 0.12);
	background-color: var(--darkpurp);
	color: var(--offwhite);
}

/* focus-visible ring */
.primary-button:focus-visible {
	outline: 3px solid rgba(241, 182, 28, 0.12);
	outline-offset: 2px;
}

/*////////////////////// secondary button /////////////////////*/

.secondary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 12px 16px;
	border-radius: 999px;

	background: var(--darkpurp);
	color: var(--offwhite);
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(11, 6, 28, 0.12);

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

/*secondary hover*/
.secondary-button:hover {
	box-shadow: 0 10px 22px rgba(11, 6, 28, 0.16);
	background-color: var(--violet);
	color: var(--black);
}

/* secondary active / pressed */
.secondary-button:active {
	transform: translateY(1px);
	box-shadow: 0 4px 12px rgba(11, 6, 28, 0.12);
	background-color: var(--Brightpurp);
	color: var(--black);
}

.secondary-button:focus-visible {
	outline: 3px solid rgba(241, 182, 28, 0.6);
	outline-offset: 2px;
}
/* //////////// Sections and pages //////////// */
/* Style any specific sections or pages here */

.page-section {
	padding: 48px 0;
}

/*////////////////////////////// full bleed wrapper ///////////////////////*/

.inner-wrapper.full-bleed {
	width: 100vw;
	max-width: none;

	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	padding-left: 0;
	padding-right: 0;
}

.project-tile {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.inner-wrapper.full-bleed .project-tile {
	border-radius: 0;
	border: 0;
	box-shadow: none;
}

/*full color image */

.project-tile > img {
	width: 100%;
	height: 100%;
	object-fit: cover;

	/*default ratio for non-featured tiles*/
	aspect-ratio: 4/3;

	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*featured full-width tile ratio*/
.featured-tile > img {
	aspect-ratio: 16/9;
}

/*dark overlay hidden by default*/
.project-overlay {
	position: absolute;
	inset: 0;

	display: flex;
	flex-direction: column; /*center horizontally*/
	align-items: center; /*center vertically*/
	justify-content: center;
	text-align: center;

	background: rgba(11, 6, 28, 0.65);

	opacity: 0;
	transition: opacity 220ms ease;

	pointer-events: none; /*keeps <a> tag clickable*/
}

/*text animation*/
.project-title,
.project-meta {
	margin: 0;
	color: var(--offwhite);

	opacity: 0;
	transform: translateY(-18px);

	transition:
		opacity 240ms ease,
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-meta {
	color: rgba(232, 226, 237, 0.85);
	margin-top: 6px;
}

/* hover: overlay on + text drops down */
.project-tile:hover .project-overlay {
	opacity: 1;
}

.project-tile:hover .project-title,
.project-tile:hover .project-meta {
	opacity: 1;
	transform: translateY(0);
}

.project-tile:hover > img {
	transform: scale(1.03);
}

.page-title {
	margin: 0 0 18px;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

body.portfolio .row.no-gap {
	display: flex;
	flex-wrap: wrap;
}

body.portfolio .project-tile.flex-item.one-half,
body.portfolio .project-tile.flex-item.featured-tile {
	width: 100%;
	flex-basis: 100%;
}

/*mobile focus*/
.project-tile:focus-visible .project-overlay,
.project-tile:focus-within .project-overlay {
	opacity: 1;
}

.project-tile:focus-visible .project-title,
.project-tile:focus-visible .project-meta,
.project-tile:focus-within .project-title,
.project-tile:focus-within .project-meta {
	opacity: 1;
	transform: translateY(0);
}

.project-tile:focus-visible {
	outline: 3px solid rgba(241, 182, 28, 0.6);
	outline-offset: 4px;
}

body.project .back-link {
	margin-left: 0;
	display: inline-block;
	color: var(--darkpurp);
	text-decoration: none;
}

/*top section = 2 columns */
body.project .project-top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
	margin-top: 18px;
}

/* left column */
body.project .project-media {
	display: grid;
	gap: 28px;
}

/*big collage image */
body.project .project-hero {
	width: 100%;
	display: block;
	border-radius: 0;
	object-fit: cover;
	aspect-ratio: 4/3;
}

/*right column text*/
body.project .project-info .page-title {
	margin: 20px 20px 50px;
}

body.project .project-info .page-copy {
	max-width: 60ch;
	line-height: 1.6;
	font-size: 18px;
	margin-left: 20px;
}

/*bottom 3 up gallery*/
body.project .project-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 48px;
}

/*each square image*/
body.project .project-gallery__img {
	width: 100%;
	display: block;
	border-radius: 0;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

/* //////////////////// Footer ///////////////// */

footer {
	padding: 26px 0;
	color: var(--darkpurp);
}

/* //////////////----Responsive layout - Media queries--------//////////// */

/* //////////// Media queries //////////// */
/* Add and/or edit. */

/* You can edit the rules inside of these media queries, but you can also edit the breakpoints to work for your own content and design. For example, if you want your text rules to change at 600px instead of 768, you can edit the min-width. You can also add more "breakpoints" - more conditions where the rules will change. */

/*///////////////////////////MOBILE (phones) ///////////////////////////*/

@media (max-width: 600px) {
	/*///////////nav///////////*/
	.site-header nav {
		flex-wrap: nowrap;
		align-items: center;
	}

	/*reduce desktop link spacing*/
	nav a {
		margin-left: 0;
		padding: 10px 10px;
	}

	/* adds breathing room*/
	.nav-right {
		display: flex;
		gap: 14px;
		align-items: center;
	}

	.project-title {
		font-size: 3em;
		line-height: 1.6;
	}
	.project-meta {
		font-size: 16px;
	}
	/*///////////////////////////hero///////////////*/
	.hero-left {
		padding-left: 0;
		text-align: center;
	}

	.hero-actions {
		justify-content: center;
		flex-wrap: wrap;
		gap: 12px;
	}

	body.homepage main > .page-section:first-of-type .row {
		align-items: center; /* vertically aligns text and logo */
		justify-content: space-between;
	}

	body.homepage .hero-left {
		max-width: 560px;
	}
	.hero-logo img {
		min-width: 0;
		width: 78vw;
		max-width: 320px;
		height: auto;
	}

	.page-section .row.center-vertical-row > .flex-item.one-half {
		width: 100%;
		flex-basis: 100%;
	}

	/*/////////////sections////////////*/
	.page-section {
		padding: 28px 0;
	}

	/*///////////project tiles//////////*/
	.project-overlay {
		opacity: 1;
	}

	.project-title,
	.project-meta {
		opacity: 1;
		transform: translateY(0);
	}

	/*tiles different on phones*/
	.project-tile > img,
	.featured-tile > img {
		aspect-ratio: 4 / 3;
	}

	body.project .inner-wrapper {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Stack the two-column project layout into one column */
	body.project .project-top {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	/* Project page text (matches current project.html markup) */
	body.project .page-title {
		font-size: 54px;
		line-height: 1;
	}

	body.project .page-copy {
		font-size: 16px;
		line-height: 1.7;
		max-width: 100%;
	}

	/* Gallery becomes a single column */
	body.project .project-gallery {
		grid-template-columns: 1fr;
		gap: 22px;
		margin-top: 28px;
	}

	body.project .inner-wrapper {
		padding-left: 18px;
		padding-right: 18px;
	}

	body.project .page-title {
		font-size: 2em;
		line-height: 1;
	}

	body.project .page-copy {
		font-size: 16px;
		line-height: 1.7;
		max-width: 100%;
	}

	body.project .project-hero {
		aspect-ratio: 4 / 3;
	}
}

/*/////////////////////////// small tablet ///////////////////////////*/

@media (min-width: 768px) {
	nav a {
		margin-left: 16px; /*desktop 32px*/
		padding: 10px 12px;
	}

	/* hero 2 column again */
	.hero-left {
		padding-left: 40px;
		text-align: left;
	}

	.hero-actions {
		justify-content: flex-start;
		gap: 18px;
	}

	.hero-logo img {
		min-width: 0;
		width: 40vw;
		max-width: 420px;
		height: auto;
	}

	.page-section {
		padding: 40px 0;
	}

	/* =========================================
	   PORTFOLIO CARD LAYOUT - TABLET AND UP
	========================================= */
	body.portfolio .project-tile.flex-item.one-half {
		width: 50%;
		flex-basis: 50%;
	}

	body.portfolio .project-tile.flex-item.featured-tile {
		width: 100%;
		flex-basis: 100%;
	}

	.project-tile > img,
	.featured-tile > img {
		aspect-ratio: 4 / 3;
	}

	body.project .page-title {
		font-size: 56px;
	}

	/*font size fix*/
	.project-title {
		font-size: 3em;
		line-height: 1.1;
	}
}

/*/////////////////////////// large tablet/ small laptop ///////////////////////////*/
@media (min-width: 900px) {
	/*hero padding close to desktop*/
	.hero-left {
		padding-left: 90px;
	}

	.hero-logo img {
		width: 36vw;
		max-width: 460px;
	}

	/* adds breathing room */
	.project-overlay {
		padding: 28px;
	}

	body.project .inner-wrapper {
		padding-left: 18px;
		padding-right: 18px;
	}

	body.project .project-hero {
		aspect-ratio: 4 / 3;
	}
	body.project .project-top {
		grid-template-columns: 1fr 1fr;
		gap: 22px;
	}

	body.project .page-title {
		font-size: 64px;
		line-height: 1;
	}

	body.project .page-copy {
		font-size: 16px;
		line-height: 1.7;
	}
}

/*/////////////////////////// desktop  ///////////////////////////*/

@media (min-width: 1080px) {
	nav a {
		margin-left: 32px;
	}

	.hero-left {
		padding-left: 130px;
	}

	.hero-logo img {
		width: 420px;
		max-width: 100%;
		height: auto;
	}

	.page-section {
		padding: 48px 0;
	}

	.featured-tile > img {
		aspect-ratio: 16 / 9;
	}

	body.project .project-top {
		gap: 48px; /*smaller whitespace*/
	}

	body.project .project-info .page-copy {
		font-size: 18px;
	}

	body.project .project-gallery {
		gap: 28px;
	}

	body.project .project-top {
		grid-template-columns: 1fr 1fr; /*balance column*/
		gap: 28px;
	}

	body.project .page-title {
		font-size: 72px;
		line-height: 1;
	}

	body.project .project-gallery {
		gap: 28px;
	}
}

@media (min-width: 1300px) {
	/* anything you want to kick in at desktop and above can go here */
}