/* ==========================================================
ROJAVA INSPIRED
Visual system
========================================================== */

:root {
--ri-cream: #F7F0DF;
--ri-green: #527A55;
--ri-red: #D94335;
--ri-blue: #315A78;
--ri-yellow: #E8B83E;
--ri-ink: #17231F;
--ri-white: #FFFFFF;

--ri-border: 2px solid currentColor;
--ri-transition: 300ms cubic-bezier(.2,.8,.2,1);


}

/* Base
---------------------------------------------------------- */

body {
background: var(--ri-cream);
color: var(--ri-ink);
overflow-x: hidden;
}

a {
text-underline-offset: .15em;
}

button,
.wp-element-button {
cursor: pointer;
}

.wp-element-button {
transition:
transform var(--ri-transition),
background-color var(--ri-transition),
color var(--ri-transition);
}

.wp-element-button:hover {
background: var(--ri-red) !important;
color: var(--ri-white) !important;
transform: translateY(-3px);
}

/* Utility classes
---------------------------------------------------------- */

.ri-section {
position: relative;
overflow: hidden;
}

.ri-container {
width: min(100% - 2.5rem, 1440px);
margin-inline: auto;
}

.ri-kicker {
font-size: .7rem;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
}

.ri-uppercase {
text-transform: uppercase;
}

.ri-no-overflow {
overflow: hidden;
}

/* Header
---------------------------------------------------------- */

.ri-header {
position: relative;
z-index: 100;
border-bottom: var(--ri-border);
background: var(--ri-cream);
}

.ri-header-inner {
min-height: 82px;
padding-inline: clamp(1.25rem, 4vw, 4rem);
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}

.ri-logo {
display: inline-flex;
align-items: center;
gap: .75rem;
color: var(--ri-ink);
font-weight: 900;
font-size: 1.1rem;
letter-spacing: -.04em;
text-decoration: none;
text-transform: uppercase;
}

.ri-logo-mark {
width: 36px;
height: 36px;
position: relative;
display: block;
background: var(--ri-red);
transform: rotate(45deg);
transition: transform var(--ri-transition);
}

.ri-logo-mark::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 10px;
left: 10px;
background: var(--ri-yellow);
}

.ri-logo:hover .ri-logo-mark {
transform: rotate(135deg);
}

.ri-navigation {
display: flex;
align-items: center;
gap: clamp(1rem, 3vw, 2.75rem);
}

.ri-navigation a {
font-size: .7rem;
font-weight: 800;
letter-spacing: .08em;
text-decoration: none;
text-transform: uppercase;
}

.ri-navigation a:hover {
color: var(--ri-red);
}

/* Hero
---------------------------------------------------------- */

.ri-hero {
position: relative;
min-height: calc(100vh - 82px);
display: flex;
align-items: center;
background: var(--ri-cream);
}

.ri-hero-content {
position: relative;
z-index: 5;
width: min(100% - 2.5rem, 1440px);
margin-inline: auto;
padding-block: 7rem;
}

.ri-hero h1 {
max-width: 950px;
margin: 0;
font-size: clamp(4rem, 12vw, 11rem);
font-weight: 900;
line-height: .78;
letter-spacing: -.08em;
text-transform: uppercase;
}

.ri-hero h1 span {
display: block;
}

.ri-hero h1 span:nth-child(2) {
color: var(--ri-red);
}

.ri-hero h1 span:nth-child(3) {
color: var(--ri-blue);
}

.ri-hero-button {
margin-top: 3rem;
}

/* Geometric artwork
---------------------------------------------------------- */

.ri-geometry {
position: absolute;
z-index: 2;
width: min(48vw, 680px);
aspect-ratio: 1;
right: -4vw;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}

.ri-geometry::before {
content: "";
position: absolute;
inset: 13%;
border: 15px solid var(--ri-green);
transform: rotate(12deg);
}

.ri-geometry::after {
content: "";
position: absolute;
width: 44%;
aspect-ratio: 1;
right: 4%;
top: 8%;
background: var(--ri-yellow);
border-radius: 50%;
}

.ri-geometry-red {
position: absolute;
width: 42%;
aspect-ratio: 1;
left: 5%;
bottom: 12%;
background: var(--ri-red);
transform: rotate(18deg);
}

.ri-geometry-blue {
position: absolute;
width: 40%;
aspect-ratio: 1;
right: 22%;
bottom: 7%;
background: var(--ri-blue);
transform: rotate(45deg);
}

.ri-geometry-line {
position: absolute;
z-index: 4;
width: 130%;
height: 13px;
left: -15%;
top: 48%;
background: var(--ri-ink);
transform: rotate(-28deg);
}

.ri-geometry-dot {
position: absolute;
z-index: 5;
width: 38px;
height: 38px;
left: 48%;
top: 43%;
background: var(--ri-cream);
border: 8px solid var(--ri-red);
border-radius: 50%;
}

/* Colour sections
---------------------------------------------------------- */

.ri-green {
background: var(--ri-green);
color: var(--ri-cream);
}

.ri-red {
background: var(--ri-red);
color: var(--ri-cream);
}

.ri-blue {
background: var(--ri-blue);
color: var(--ri-cream);
}

.ri-yellow {
background: var(--ri-yellow);
color: var(--ri-ink);
}

.ri-cream {
background: var(--ri-cream);
color: var(--ri-ink);
}

/* Manifesto
---------------------------------------------------------- */

.ri-manifesto {
max-width: 1100px;
}

.ri-manifesto p {
margin: 0;
font-size: clamp(2.75rem, 6vw, 6.5rem);
font-weight: 800;
line-height: .9;
letter-spacing: -.055em;
}

.ri-manifesto em {
color: var(--ri-yellow);
font-style: normal;
}

/* Projects
---------------------------------------------------------- */

.ri-project-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}

.ri-project-card {
position: relative;
min-height: 440px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
overflow: hidden;
color: var(--ri-cream);
background: var(--ri-blue);
text-decoration: none;
}

.ri-project-card:nth-child(2n) {
background: var(--ri-green);
}

.ri-project-card:nth-child(3n) {
background: var(--ri-red);
}

.ri-project-shape {
position: absolute;
width: 55%;
aspect-ratio: 1;
right: -10%;
top: 8%;
background: var(--ri-yellow);
border-radius: 50%;
transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

.ri-project-card:nth-child(2n) .ri-project-shape {
background: var(--ri-red);
transform: rotate(45deg);
}

.ri-project-card:nth-child(3n) .ri-project-shape {
background: var(--ri-blue);
}

.ri-project-card:hover .ri-project-shape {
transform: scale(1.12) rotate(20deg);
}

.ri-project-title {
position: relative;
z-index: 3;
margin: 0;
font-size: clamp(2.5rem, 6vw, 6rem);
line-height: .8;
letter-spacing: -.065em;
text-transform: uppercase;
}

/* CTA
---------------------------------------------------------- */

.ri-cta-title {
max-width: 1000px;
margin: 0;
font-size: clamp(4rem, 10vw, 10rem);
font-weight: 900;
line-height: .78;
letter-spacing: -.08em;
text-transform: uppercase;
}

/* Footer
---------------------------------------------------------- */

.ri-footer {
background: var(--ri-blue);
color: var(--ri-cream);
}

.ri-footer-inner {
width: min(100% - 2.5rem, 1440px);
margin-inline: auto;
padding-block: 4rem 2rem;
}

.ri-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 3rem;
}

.ri-footer-brand {
font-size: clamp(3.5rem, 8vw, 8rem);
font-weight: 900;
line-height: .75;
letter-spacing: -.08em;
text-transform: uppercase;
}

.ri-footer-heading {
margin-bottom: 1rem;
font-size: .7rem;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}

.ri-footer a {
color: inherit;
text-decoration: none;
}

.ri-footer a:hover {
color: var(--ri-yellow);
}

.ri-footer-bottom {
display: flex;
justify-content: space-between;
gap: 2rem;
margin-top: 5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(247, 240, 223, .35);
font-size: .7rem;
letter-spacing: .08em;
text-transform: uppercase;
}

/* Mobile
---------------------------------------------------------- */

@media (max-width: 900px) {

.ri-navigation {
	display: none;
}

.ri-hero-content {
	padding-bottom: 26rem;
}

.ri-geometry {
	width: min(90vw, 600px);
	right: -10vw;
	top: auto;
	bottom: -11rem;
	transform: none;
}

.ri-project-grid {
	grid-template-columns: 1fr;
}

.ri-footer-grid {
	grid-template-columns: 1fr 1fr;
}

.ri-footer-brand {
	grid-column: 1 / -1;
}


}

@media (max-width: 600px) {

.ri-header-inner {
	min-height: 70px;
}

.ri-hero h1 {
	font-size: clamp(4rem, 18vw, 7rem);
}

.ri-hero-content {
	padding-block: 5rem 24rem;
}

.ri-project-card {
	min-height: 340px;
}

.ri-footer-grid {
	grid-template-columns: 1fr;
}

.ri-footer-brand {
	grid-column: auto;
}

.ri-footer-bottom {
	flex-direction: column;
	gap: .75rem;
}


}