/*
Theme Name: Remand Collective
Theme URI: https://theremandcollective.org/
Author: Remand Collective
Author URI: https://theremandcollective.org/
Description: Custom theme for Remand Collective.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: remand-collective
*/

@font-face {
    font-family: 'SeasonMix-SemiBold';
    src: url('fonts/SeasonMix-SemiBold.woff2') format('woff2'),
        url('fonts/SeasonMix-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SeasonSans-Bold';
    src: url('fonts/SeasonSans-Bold.woff2') format('woff2'),
        url('fonts/SeasonSans-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SeasonSans-Medium';
    src: url('fonts/SeasonSans-Medium.woff2') format('woff2'),
        url('fonts/SeasonSans-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Obviously-Super';
    src: url('fonts/Obviously-Super.woff2') format('woff2'),
        url('fonts/Obviously-Super.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
	/*	Colours ---------------- */
/*	--cream: #FFF9F3;
	--purple: #56163B;
	--red: #E5785C;
	--pink: #FF96FF;
	--peach: #FAB08C;*/

	--cream: #FFF9F3;
	--purple: #5e0e3c;
	--red: #f67053;
	--pink: #ff8fff;
	--peach: #ffad88;
	--lightpink: #ffd5ff;
	--pinkcream: #fdd8c6;

    /* Animation -------------------*/
    --easing: cubic-bezier(0.32, 0.72, 0, 1);
    --easeOutBack: cubic-bezier(.34, 1.56, .64, 1);
    --duration: 600ms;

    /* Type ------------------------*/
    --body-font: 'SeasonSans-Medium', sans-serif;
    --bold-font: 'SeasonSans-Bold', sans-serif;
    --serif-font: 'SeasonMix-SemiBold', sans-serif;
    --super-font: 'Obviously-Super', sans-serif;
    --super-font-weight: 900;
    --text-color: var(--purple);

    /* Units ------------------------*/
    --u: calc(1rem / 19.2);
    --padding-xs: calc(15 * var(--u));
    --padding-s: calc(30 * var(--u));
    --padding-m: calc(60 * var(--u));
    --padding-l: calc(90 * var(--u));
    --site-padding: clamp(18px, 2.3vw, 45px);
    --main-column: 1540px;
    --header-height: calc(80 * var(--u));
	--admin-bar-padding: 0px;
}


/*----------------------------------*
 | Backgrounds
 *----------------------------------*/

.bg-purple,
.has-purple-background-color {
	--text-color: var(--cream);
	background-color: var(--purple);
}

.bg-red,
.has-red-background-color {
	--text-color: var(--cream);
	background-color: var(--red);
}

.bg-white {
	--text-color: var(--purple);
	background-color: white;
}


/*----------------------------------*
 | Reset
 *----------------------------------*/

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

* {
    margin: 0;
}

body {
	font-family: var(--body-font);
	font-weight: normal;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
/*    text-wrap: balance;*/
}

a,
a:visited {
    color: inherit;
}

.screen-reader-text,
.tabbed-pages.is-js .tabbed-pages-panel-title {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}


/*----------------------------------*
 | Debug
 *----------------------------------*/

* {
/*	outline: 1px dashed cyan;*/
}

/*----------------------------------*
 | Animations
 *----------------------------------*/

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.slide-up {
	transition: opacity var(--duration), transform var(--duration) var(--easeOutBack);
	transform: translateY(var(--padding-m));
	opacity: 0;
}

body.is-loaded .slide-up.on-load,
.slide-up.on-viewport.has-been-in-viewport {
	opacity: 1;
	transform: translateY(0);
}

.slide-left {
	transition: opacity var(--duration), transform var(--duration) var(--easing);
	transform: translateX(calc(var(--padding-l) * -1));
	opacity: 0;
}

body.is-loaded .slide-left.on-load,
.slide-left.on-viewport.has-been-in-viewport  {
	opacity: 1;
	transform: translateX(0);
}

.fade-in {
	transition: opacity 0.8s;
	opacity: 0;
}

body.is-loaded .fade-in.on-load,
.fade-in.on-viewport.has-been-in-viewport {
	opacity: 1;
}

.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol,
.entry-content > figure,
.entry-content .featured-data-grid-cell {
	transition: opacity var(--duration), transform var(--duration) var(--easeOutBack);
	transform: translateY(var(--padding-m));
	opacity: 0;
}

.entry-content > p.has-been-in-viewport,
.entry-content > h2.has-been-in-viewport,
.entry-content > h3.has-been-in-viewport,
.entry-content > h4.has-been-in-viewport,
.entry-content > ul.has-been-in-viewport,
.entry-content > ol.has-been-in-viewport,
.entry-content > figure.has-been-in-viewport,
.entry-content .featured-data-grid-cell.has-been-in-viewport {
	opacity: 1;
	transform: translateY(0);
}

.entry-content .featured-data-grid-cell:nth-child(2) {
	transition-delay: 200ms;
}

.entry-content .featured-data-grid-cell:nth-child(3) {
	transition-delay: 400ms;
}

.wp-block-group-is-layout-grid.animate-in-cells > div {
	transition: opacity var(--duration), transform var(--duration) var(--easeOutBack);
	transform: translateY(var(--padding-m));
	opacity: 0;
}

.wp-block-group-is-layout-grid.animate-in-cells > div.has-been-in-viewport {
	opacity: 1;
	transform: translateX(0);
}

.wp-block-group-is-layout-grid.animate-in-cells > div:nth-child(2) { transition-delay: 200ms }
.wp-block-group-is-layout-grid.animate-in-cells > div:nth-child(3) { transition-delay: 300ms }
.wp-block-group-is-layout-grid.animate-in-cells > div:nth-child(4) { transition-delay: 400ms }
.wp-block-group-is-layout-grid.animate-in-cells > div:nth-child(5) { transition-delay: 500ms }
.wp-block-group-is-layout-grid.animate-in-cells > div:nth-child(6) { transition-delay: 600ms }
.wp-block-group-is-layout-grid.animate-in-cells > div:nth-child(7) { transition-delay: 700ms }
.wp-block-group-is-layout-grid.animate-in-cells > div:nth-child(8) { transition-delay: 800ms }

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-800 { transition-delay: 800ms; }
.delay-900 { transition-delay: 900ms; }
.delay-1000 { transition-delay: 1000ms; }
.delay-1200 { transition-delay: 1200ms; }
.delay-1400 { transition-delay: 1400ms; }


/*----------------------------------*
 | Global
 *----------------------------------*/

html {
	background: black;
	font-size: 1vw;
}

@media (max-width: 900px) {
	html {
		font-size: 10px;
	}
}

body {
	background: var(--cream);
}

#site-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: calc(100dvh - (var(--header-height) * 2));
}

article.type-page {
/*	padding: var(--padding-l);*/
}

article.type-page .entry-title {
	font-size: 40px;
	font-family: var(--super-font);
	color: var(--purple);
	text-transform: uppercase;
	text-align: center;
	margin: var(--padding-l) auto;
}

.page-section {
	position: relative;
}

#wpadminbar {
	position: fixed;
}

/*----------------------------------*
 | Site header
 *----------------------------------*/

#site-header {
	display: flex;
	background: var(--cream);
	height: var(--header-height);

}

.site-branding {
	display: flex;
	align-items: center;
	width: calc(470 * var(--u));
	padding: 0 var(--padding-s);
	background: var(--red);
}

.site-emblem {
	--site-emblem-mark-color: var(--purple);
	--site-emblem-wordmark-color: var(--cream);
	display: block;
	width: calc(163 * var(--u));
}

.site-emblem__graphic,
.site-emblem__graphic svg {
	display: block;
	height: auto;
	width: 100%;
}

.site-emblem__graphic .cls-1 {
	fill: var(--site-emblem-mark-color);
}

.site-emblem__graphic .cls-2 {
	fill: var(--site-emblem-wordmark-color);
}

body.admin-bar {
    --admin-bar-padding: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --admin-bar-padding: 46px;
    }
}

@media (max-width: 600px) {
	.site-branding {
		flex-shrink: 0;
		width: 100px;
	}

	.site-emblem {
		width: 80px;
	}
}

/*----------------------------------*
 | Site navigation
 *----------------------------------*/

#site-navigation {
	flex: 1;
	font-family: var(--bold-font);
	text-transform: uppercase;
	color: var(--purple);
}

#site-navigation > ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

#site-navigation li {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 calc(40 * var(--u));
}

#site-navigation a {
	display: block;
	text-decoration: none;
}

@media (min-width: 611px) {
	#site-navigation > ul > li:first-child {
		margin-right: auto;
		background: var(--red);
		padding: 0 calc(94 * var(--u));
		color: var(--cream);
	}
}

#site-navigation > ul > li:first-child a {
	background: var(--purple);
	color: var(--cream);
}

#site-navigation > ul > li.current-menu-item a,
#site-navigation > ul > li a:hover {
	background: var(--purple);
	color: var(--cream);
}	

#site-navigation > ul > li a {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(20 * var(--u));
	border-radius: calc(28 * var(--u));
	padding: 0 var(--padding-s);
	height: calc(45 * var(--u));
	transition: background var(--duration) var(--easing);
}

@media (max-width: 900px) {
	#site-navigation li {
		padding: 0;
	}

	#site-navigation > ul > li:first-child {
		padding: 0 var(--padding-s) 0 0;
	}

	#site-navigation > ul > li a {
		font-size: 8px;
	}
}


/*----------------------------------*
 | Mobile nav
 *----------------------------------*/

.mobile-menu,
.menu-toggle {
	display: none;
}

@media (max-width: 610px) {

	#site-header {
		display: flex;
		justify-content: space-between;
		height: auto;
		padding: var(--padding-s);
	}

	#site-navigation {
		display: none;
	}

	.site-branding {
		position: relative;
		z-index: 200;
		background: none;
		width: auto;
	}

	.site-emblem .remand-logo-icon {
		fill: var(--red);
	}

	.site-emblem .remand-logo-text {
		fill: var(--purple);
	}

	.site-emblem {
		width: 160px;
	}

	a.menu-toggle {
		position: relative;
		display: block;
		z-index: 200;
		color: blue;
		width: 30px;
		height: 58px;
		font-size: 0;
		color: rgba(0,0,0,0);
		padding-top: 10px;
		margin-right: var(--padding-s);
	}

	.menu-toggle:before,
	.menu-toggle:after {
		content: '';
		display: block;
		width: 100%;
		height: 2px;
		margin: 3px 0;
		background: var(--purple);
		transform-origin: 50%;
	}

	.show-nav .menu-toggle:before,
	.show-nav .menu-toggle:after {
		background: var(--cream);
		margin: 0;
	}

	.show-nav .menu-toggle {
		padding-top: 15px;
	}

	.show-nav .menu-toggle:before {
		transform: rotate(45deg);
	}

	.show-nav .menu-toggle:after {
		transform: rotate(-45deg);
	}

	.mobile-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100dvw;
		height: 100dvh;
		display: none;
		justify-content: center;
		align-items: center;
		background: var(--purple);
		z-index: 100;
	}

	#mobile-nav  ul {
		display: flex;
		flex-direction: column;
		text-transform: uppercase;
		text-align: center;
		margin: 0;
		padding: 0;
	}

	#mobile-nav li {
		margin: 10px 0;
	}

	#mobile-nav a {
		color: var(--pink);
		font-family: var(--super-font);
		font-size: 8vw;
		text-decoration: none;
	}

	#mobile-nav .current-menu-item a {
		color: var(--purple);
		background: var(--pink);
	}

	.mobile-menu .spiral-button {
		position: relative;
		margin: 35px auto;
		transform: translateX(10%);
	}

	.mobile-menu .spiral-button .spiral-button-text {
		background: var(--peach);
		color: var(--purple);
		bottom: auto;
		right: auto;
	}

	.mobile-nav-footer-nav {
		margin-top: 40px;
	}

	.mobile-nav-footer-nav ul {
		display: flex;
		gap: 20px;
		--text-color: white;
		list-style: none;
		padding: 0;
	}

	.mobile-nav-footer-nav img {
		width: 40px;
	}

	.mobile-nav-footer-nav .button {
		height: 40px;
		font-size: 18px;
		border-radius: 24px;
	}

	.show-nav .mobile-menu {
		display: flex;
	}

	.show-nav .menu-toggle {
		color: var(--cream);
	}

	.show-nav .site-emblem .remand-logo-text {
		fill: var(--cream);
	}

}

/*----------------------------------*
 | Site footer
 *----------------------------------*/

#site-footer {
	background: var(--red);
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--padding-s) var(--padding-m);
	font-family: var(--serif-font);
	font-size: calc(18 * var(--u));
	height: calc(120 * var(--u));
}

#footer-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: var(--padding-s);
} 

#footer-navigation a {
	display: inline-flex;
	height: 20px;

	justify-content: center;
	align-items: center;
	border-radius: 10px;
}

#site-footer a:hover {
	color: var(--purple);
}

#footer-navigation .lozenge a {
	background: var(--purple);
	color: var(--cream);
	text-decoration: none;
	padding: 0 14px;
}

#footer-navigation li:last-child {
	margin-left: var(--padding-m);
}

#footer-navigation .lozenge a:hover {
	color: white;
}

@media (max-width: 600px) {
	#site-footer {
		display: block;
		height: auto;
		font-size: calc(17 * var(--u));
	}

	#site-footer p {
		text-align: center;
	}

	#footer-navigation ul {
		justify-content: space-between;
		margin-bottom: var(--padding-s);
	}
}

/*----------------------------------*
 | Hero section
 *----------------------------------*/

.hero-section {
	position: relative;
	display: grid;
	grid-template-columns: 45% 60%;
	overflow: hidden;
	height: calc(100dvh - var(--header-height) - var(--admin-bar-padding));
}

.hero-headline {
	display: flex;
	width: 80%;
	margin-left: var(--padding-l);
	justify-content: center;
	align-items: center;
	font-size: calc(100 * var(--u));
	line-height: 1;
	color: var(--purple);
	font-family: var(--serif-font);
    position: relative;
    z-index: 1;
}

.hero-subtitles {
	position: relative;
	margin-top: var(--padding-s);
	height: calc(80 * var(--u));
}

.hero-subtitles h2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	font-size: calc(26 *var(--u));
	opacity: 0;
	transition: opacity var(--duration), transform var(--duration) var(--easing);
}

.hero-subtitles h2.in {
	opacity: 1;
}

.hero-subtitles h2.out {
	opacity: 0;
	transition: opacity 0.3s;
}

.hero-headline img {
	width: 78%;
}

.hero-headline span {
	display: block;
}

.hero-headline .swap-word-container {
	position: relative;
	height: calc(210 * var(--u));
}

.hero-headline .swap-word {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	opacity: 0;
	transition: opacity var(--duration), transform var(--duration) var(--easing);
}

.hero-headline .swap-word.in {
	transform: translateX(0);
	opacity: 1;
}

.hero-headline .swap-word.out {
	transform: translateX(100%);
	opacity: 0;
}

.hero-headline .overlap {
	margin-top: -50px;
	z-index: 2;
}

.hero-headline .super {
	color: var(--pink);
	text-transform: uppercase;
	font-family: var(--super-font);
	font-weight: var(--super-font-weight);
}

.hero-headline .small {
	margin-top: -20px;
	font-size: calc(100 * var(--u));
}

.hero-image {
	width: 100%;
	overflow: hidden;
}

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

.hero-image-cite {
    position: absolute;
    bottom: 10px;
    right: var(--padding-s);
}

@media (max-width: 500px) {
	.hero-image-cite {
		right: auto;
		left: var(--padding-s);
	}
}

@media (max-width: 900px) {
	.hero-section {
		height: 500px;
		grid-template-columns: 80% 20%;
	}

	.hero-image {
	    position: absolute;
	    top: 0;
	    right: 0;
	    width: 80%;
	    height: 100%;
	    opacity: 0.4;
	}

	.hero-headline {
		margin-left: var(--padding-s);
	}
}


/*----------------------------------*
 | Section (generic)
 *----------------------------------*/

.section-header {
	display: flex;
	padding-top: calc(75 * var(--u));
	justify-content: space-between;
	color: var(--text-color);
	padding-right: var(--padding-m);
}

.section-header h3 {
	display: inline-block;
	font-family: var(--serif-font);
	font-size: calc(28 * var(--u));
	padding-left: var(--padding-m);
	padding-bottom: calc(20 *var(--u));
	color: rgba(0,0,0,0);
	border-bottom: 1px solid var(--text-color);
	transform: translateX(-100%);
	transition: transform var(--duration) ease-out, color var(--duration) var(--duration) linear;
}

.section-header.has-been-in-viewport h3 {
	transform: translateX(0);
	color: var(--text-color);
}

.section-content {
	min-height: 100px;
}

/*----------------------------------*
 | Buttons
 *----------------------------------*/

.button,
a.button,
.wp-element-button {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: calc(22 * var(--u));
	border: 1px solid var(--text-color);
	color: var(--text-color);
	height: calc(43 * var(--u));
	padding: 0 var(--padding-m);
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.4s, background 0.4s;
}

.button:hover,
a.button:hover,
.wp-element-button:hover {
	background: var(--text-color);
	color: var(--purple);
}


/*----------------------------------*
 | Spiral buttons
 *----------------------------------*/

.spiral-button,
a.spiral-button {
	--roundel-size: 320;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	bottom: var(--padding-m);
	right: var(--padding-m);
	width: calc(var(--roundel-size) * var(--u));
	height: calc(var(--roundel-size) * var(--u));
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	z-index: 1;
}

.spiral-button-bg {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('img/roundel-bg.png');
	background-size: cover;
	transform-origin: center;
    animation: rotate 10s infinite linear;
    animation-play-state: running;
}

.spiral-button-text,
a.spiral-button-text {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 80%;
	height: 80%;
	border-radius: 100%;
	background: var(--purple);
	z-index: 1;
	color: var(--cream);
	font-size: calc(35 * var(--u));
	font-family: var(--serif-font);
	line-height: 1;
	text-decoration: none;
}

.spiral-button.light .spiral-button-text {
	background: var(--peach);
	color: var(--purple);
}

.spiral-button:after {
	content: '';
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	border-radius: 100%;
	background: var(--purple);
	transform: scale(0.8);
	transition: transform var(--duration) var(--easing);
}

.spiral-button.light:after {
	background: var(--peach);
}

.spiral-button:hover:after {
	transform: scale(1);
}

.spiral-button.position-bottom {
	bottom: calc( (160 * var(--u)) * -1);
}

.roundel-panel {
	position: absolute;
	bottom: var(--padding-m);
	right: var(--padding-m);
	width: calc(320 * var(--u));
	height: calc(320 * var(--u));
	background: var(--purple);
	color: var(--cream);
	z-index: 0;
	border-radius: calc(320 * var(--u));
	font-family: var(--serif-font);
	font-size: calc(30 *var(--u));
	opacity: 0;
	transition: opacity 0.2s, width 0.6s var(--easing), border-radius 0.4s var(--easing);
}

.roundel-panel p {
	width: 0;
	height: 0;
	opacity: 0;
	padding: var(--padding-s);
	padding-right: calc((320 * var(--u)) + var(--padding-s));
	transition: opacity 0.1s 0;
}

.roundel-panel .highlight {
	color: var(--pink);
}

.roundel-panel.in {
	width: calc(886 * var(--u));
	border-radius: 24px calc(320 * var(--u)) calc(320 * var(--u)) 24px;
	opacity: 1;
}

.roundel-panel.in p {
	width: auto;
	height: auto;
	opacity: 1;
	transition: opacity 0.4s 0.4s;
}



@media (max-width: 500px) {
	.spiral-button,
	a.spiral-button {
		bottom: var(--padding-s);
		right: var(--padding-s);
		width: 30vw;
		height: 30vw;
	}

	.spiral-button-text,
	a.spiral-button-text {
		font-size: calc(30 * var(--u));
	}

	.roundel-panel {
		display: none;
	}
}


/*----------------------------------*
 | Blockquotes * page titles
 *----------------------------------*/

.page-header {
	position: relative;
}

.hero-quote,
.page-title {
	position: relative;
	width: 80%;
	padding: var(--padding-l) 0;
	margin: 0 auto;
	text-align: center;
}

.hero-quote blockquote,
.page-title h2 {
	font-family: var(--super-font);
	font-weight: var(--super-weight);
	font-size: calc(75 * var(--u));
	text-transform: uppercase;
	line-height: 1;
	color: var(--purple);
}

@media(max-width: 500px) {
	.hero-quote blockquote,
	.page-title h2 {
		font-size: calc(45 * var(--u));
	}
}

.hero-quote blockquote strong,
.page-title h2 strong {
	position: relative;
	display: inline-block;
	z-index: 1;
}

.hero-quote blockquote strong:before,
.page-title h2 strong:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--pink);
	z-index: -1;
	transition: width 0.4s 0.4s var(--easing);
}

.hero-quote blockquote strong:nth-of-type(2):before,
.page-title h2 strong:nth-of-type(2):before {
	transition-delay: 0.8s;
}

.hero-quote blockquote.has-been-in-viewport strong:before,
.page-title h2.has-been-in-viewport strong:before {
	width: 100%;
}

.hero-quote cite,
.page-title cite {
	font-family: var(--serif-font);
	font-style: normal;
	color: var(--purple);
	font-size: calc(26 * var(--u));
	text-transform: none;
	margin-top: var(--padding-s);
}

.hero-quote.theme--red,
.hero-quote.theme--peach,
.hero-quote.theme--white,
.hero-quote.theme--pink {
	--hero-quote-text: var(--purple);
	--hero-quote-highlight: var(--pink);
	--text-color: var(--hero-quote-text);
	width: 100%;
	padding-left: var(--padding-l);
	padding-right: var(--padding-l);
	color: var(--hero-quote-text);
}

.hero-quote.theme--red {
	--hero-quote-highlight: var(--pink);
	background: var(--red);
}

.hero-quote.theme--peach {
	background: var(--peach);
}

.hero-quote.theme--white {
	background: var(--cream);
}

.hero-quote.theme--pink {
	--hero-quote-highlight: var(--red);
	background: var(--pink);
}

.hero-quote.theme--red blockquote,
.hero-quote.theme--red cite,
.hero-quote.theme--peach blockquote,
.hero-quote.theme--peach cite,
.hero-quote.theme--white blockquote,
.hero-quote.theme--white cite,
.hero-quote.theme--pink blockquote,
.hero-quote.theme--pink cite {
	color: var(--hero-quote-text);
}

.hero-quote.theme--red blockquote strong:before,
.hero-quote.theme--peach blockquote strong:before,
.hero-quote.theme--white blockquote strong:before,
.hero-quote.theme--pink blockquote strong:before {
	background: var(--hero-quote-highlight);
}

.hero-quote__link {
	width: fit-content;
	margin: var(--padding-s) auto 0;
}

.hero-quote__content p + p {
	margin-top: 0.35em;
}

.hero-quote__content a {
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.08em;
}

@media (min-width: 1024px) {
	.page-title,
	.hero-quote {
/*		 height: calc(400 * var(--u));*/
	}
}

/*----------------------------------*
 | Partner list
 *----------------------------------*/

.partner-list {
	width: 86%;
	margin: calc(78 *var(--u)) auto 0  auto;
	padding: 0 0 calc(78 *var(--u)) 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: calc(90 * var(--u));
	background: var(--cream);
}

.partner-list li {
	display: flex;
	align-items: center;
}

.partner-list img {
	
}

.partner-list a {
	transition: opacity 0.4s;
	mix-blend-mode: multiply;
}
.partner-list a:hover {
	opacity: 0.5;
}

@media (max-width: 900px) {
	.partner-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/*----------------------------------*
 | Aiming for
 *----------------------------------*/

.aiming-for {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: var(--padding-m);
	gap: var(--padding-s);
}

.aiming-for > div {
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1/1;
	padding: var(--padding-m);
	background: var(--pink);
}

.aiming-for figure {
	text-align: center;
}

.aiming-for img {
	width: 50%;
	margin: 0 auto var(--padding-s);
}

.aiming-for figcaption {
	font-size: calc(28 * var(--u));
	font-family: var(--serif-font);
}

.aiming-for .shape-square {
	border-radius: calc(15 * var(--u));
}

.aiming-for .shape-arch {
	border-radius: calc(243 * var(--u)) calc(243 * var(--u)) calc(15 * var(--u)) calc(15 * var(--u));
}

.aiming-for .shape-lemon {
	border-radius: calc(243 * var(--u)) calc(15 * var(--u)) calc(243 * var(--u)) calc(15 * var(--u));
}

@media (max-width: 900px) {
	.aiming-for {
/*		grid-template-columns: 1fr 1fr;*/
	}

	.aiming-for > div {
		padding: 20px;
	}

	.aiming-for img {
		width: 50px;
	}

	.aiming-for figcaption {
		font-size: 10px;
	}

	.aiming-for .shape-arch {
		border-radius: 50% 50% 0 0;
	}

	.aiming-for .shape-lemon {
		border-radius: 50% calc(15 * var(--u)) 50% calc(15 * var(--u));
	}
}

@media (max-width: 900px) {
	.aiming-for {
		grid-template-columns: 1fr;
	}

	.aiming-for > div {
		width: 70%;
		margin: auto;
	}

	.aiming-for img {
		width: 50%;
	}

	.aiming-for figcaption {
		font-size: 18px;
	}
}

/*----------------------------------*
 | Shape morph
 *----------------------------------*/

#backdrop {
	height: 100%;
}

/*----------------------------------*
 | Resources
 *----------------------------------*/

.resource-list {
	align-items: stretch;
	margin: 0 var(--padding-m);
	padding: var(--padding-m) 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	list-style: none;
	gap: var(--padding-s);
}

.resource-list > li {
	display: flex;
	min-width: 0;
}

.resource-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--padding-xs);
	justify-content: center;
	padding: var(--padding-m) var(--padding-m) 0;
}

.resource-filters .button {
	background: var(--red);
	color: var(--text-color);
	font-family: var(--bold-font);
	border: none;
}

.resource-filters .button.is-active {
	background: var(--cream);
	border-color: var(--pink);
	color: var(--purple);
}

.resource-results {
	transition: opacity 0.2s ease;
}

.resource-browser.is-loading .resource-results {
	opacity: 0.45;
	pointer-events: none;
}

.resource-list.resource-list--masonry {
	--masonry-columns: 3;
}

.resource-list--masonry.is-masonry-initialized {
	display: block;
	margin-left: calc(var(--padding-m) - var(--padding-xs));
	margin-right: calc(var(--padding-m) - var(--padding-xs));
}

.resource-list--masonry.is-masonry-initialized > .resource-list-item {
	box-sizing: border-box;
	display: block;
	padding: 0 var(--padding-xs) var(--padding-s);
	width: calc(100% / var(--masonry-columns));
}

.resource-list .resource-card {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin: 0;
	padding: var(--padding-s);
	background: var(--cream);
	border-radius: 14px;
	font-family: var(--serif-font);
	font-size: calc(26 *var(--u));
	color: var(--purple);
	text-decoration: none;
	width: 100%;
}

.resource-card:hover {
/*	opacity: 0.8;*/
}

.resource-card.type--article { background: var(--pink) }
.resource-card.type--blog { background: var(--peach) }
.resource-card.type--podcast { background: var(--pinkcream) }
.resource-card.type--video { background: var(--red) }
.resource-card.type--social { background: var(--lightpink) }

.resource-filters .button {
	color: var(--purple);
}

.resource-filters .button:not(.is-active).type--article { background: var(--pink) }
.resource-filters .button:not(.is-active).type--blog { background: var(--peach) }
.resource-filters .button:not(.is-active).type--podcast { background: var(--pinkcream) }
.resource-filters .button:not(.is-active).type--video { background: var(--red) }
.resource-filters .button:not(.is-active).type--social { background: var(--lightpink) }

.resource-card-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--padding-s);
}

.resource-card .resource-date {
	font-size: calc(20 * var(--u));
}

.resource-list li:nth-child(even) .resource-card {
/*	background: var(--pink);*/
}

.resource-card .resource-title  {
	font-size: calc(30 *var(--u));
	margin-bottom: var(--padding-xs);
	text-transform: uppercase;
	text-decoration: underline;
}

.resource-card-button-row {
	display: flex;
	justify-content: flex-end;
	margin-top: auto;
	padding-top: var(--padding-xs);
}

.resource-card-button-row .button {
	border-color: var(--purple);
	color: var(--purple);
	pointer-events: none;
	font-family: var(--bold-font);
	font-size: calc(20 *var(--u));
}

.resource-card:hover .resource-card-button-row .button {
	background: var(--purple);
	color: var(--cream);
}
.resource-list .resource-thumbnail {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--padding-xs);
	border-radius: 14px;
}

@media (max-width: 1200px) {
	.resource-list.resource-list--masonry {
		--masonry-columns: 2;
	}
}

@media (max-width: 900px) {
	.resource-list {
		grid-template-columns: 1fr;
	}

	.resource-list.resource-list--masonry {
		--masonry-columns: 1;
	}
}

/*----------------------------------*
 | Entry content
 *----------------------------------*/

.entry-content {
/*	max-width: calc(1130 * var(--u));
	margin: auto;*/
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	color: var(--purple);
	font-size: calc(26 * var(--u));
	max-width: calc(1130 * var(--u));
	margin: var(--padding-s) auto;
}

.entry-content .wp-block-buttons {
	max-width: calc(1130 * var(--u));
	margin: var(--padding-s) auto;
}

.entry-content li {
	margin: var(--padding-xs) auto;
}

.entry-content h2 {
	font-family: var(--serif-font);
	font-size: calc(40 * var(--u));
	color: var(--purple);
	max-width: calc(1130 * var(--u));
	margin: var(--padding-m) auto var(--padding-s) auto;
}

.entry-content h2:before {
	content: '';
	display: inline-block;
	background : red;
	width: calc(180 * var(--u));
	height: calc(30 * var(--u));
	background: url('img/arrow-long-right.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: var(--padding-s);
	transform: translateX(calc((180 * var(--u) * -1)));
	opacity: 0;
	transition: transform 0.4s var(--easing) 200ms, opacity 0.3s 200ms linear;
}

.entry-content h2.has-been-in-viewport:before {
	transform: translateX(0);
	opacity: 1;
}

.entry-content h3 {
	font-family: var(--serif-font);
	font-size: calc(40 * var(--u));
	color: var(--purple);
	max-width: calc(1130 * var(--u));
	margin: var(--padding-m) auto var(--padding-s) auto;
}

.entry-content.has-body-font-size {
	font-size: calc(26 * var(--u));
}

.entry-content.has-section-title-font-size {
	font-size: calc(28 * var(--u));
}

.entry-content.has-heading-font-size {
	font-size: calc(40 * var(--u));
}

.entry-content.has-display-font-size {
	font-size: calc(60 * var(--u));
}

.entry-content .wp-block-image {
	max-width: calc(1130 * var(--u));
	margin: var(--padding-s) auto;
}

.entry-content .wp-block-image.rounded {
	max-width: calc(1700 * var(--u));
	overflow: hidden;
	margin: 0 auto 0 auto;
	border-radius: 0 0 calc(50vw - (var(--padding-m)*2)) 0;
}

.entry-content .wp-block-image.rounded img {
	width: 100%;
}

.entry-content .wp-block-remand-collective-card {
	transition: opacity var(--duration), transform var(--duration) var(--easeOutBack);
	transform: translateY(var(--padding-m));
	opacity: 0;
}

.entry-content .wp-block-remand-collective-card.has-been-in-viewport {
	opacity: 1;
	transform: translateY(0);
}

.entry-content .wp-block-remand-collective-card:nth-child(2) {
	transition-delay: 200ms;
}

.entry-content .wp-block-remand-collective-card:nth-child(3) {
	transition-delay: 400ms;
}

.entry-content .wp-block-group-is-layout-grid.v-gap-m {
	row-gap: var(--padding-m);
}

.entry-content .wp-block-image a > img {
	transition: filter 0.5s;
}

.entry-content .wp-block-image a:hover > img {
	filter: brightness(50%);
}

.entry-content .wp-element-button {
	font-size: calc(20 * var(--u));
	text-transform: uppercase;
	height: calc(55 * var(--u));
	transition: transform 0.4s var(--easeOutBack);
	will-change: transform
}

.entry-content .wp-element-button:hover {
	transform: scale(1.05);
}

@media (max-width: 650px) {
	.entry-content p,
	.entry-content .wp-block-image,
	.entry-content ul,
	.entry-content h2,
	.entry-content h3,
	.entry-content h4,
	.entry-content ol {
		margin-left: var(--padding-s);
		margin-right: var(--padding-s);
	}
}

/*----------------------------------*
 | Tabbed child pages
 *----------------------------------*/

.tabbed-pages-nav {
	background: var(--cream);
	margin: var(--padding-m) 0 0 0;
	padding: var(--padding-s) 0 var(--padding-m) 0;
	position: sticky;
	top: var(--admin-bar-padding);
	z-index: 10;
}

.tabbed-pages-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--padding-xs);
	list-style: none;
	font-family: var(--bold-font);
	margin: 0;
	padding: 0;
}

.tabbed-pages-nav a {
	text-decoration: none;
	color: var(--purple);
	border: 1px solid var(--pink);
	transition: color 500ms, background 500ms, border 400ms 150ms;
	font-size: calc(20 * var(--u));
	height: calc(52 * var(--u));
}

.tabbed-pages-nav a.is-active:hover {
	border: 1px solid var(--pink);
	color: var(--purple);
}

.tabbed-pages-nav a:focus {
	outline: none;
}

.tabbed-pages-nav a.is-active {
	background: var(--pink);
	font-family: var(--bold-font);
}

.tabbed-pages-nav a:hover {
	color: white;
	border: 1px solid var(--purple);
}

.tabbed-pages-panel {
	margin-bottom: var(--padding-m);
}

.tabbed-pages.is-js .tabbed-pages-panel {
	display: none;
}

.tabbed-pages.is-js .tabbed-pages-panel.is-active {
	display: block;
}

.tabbed-page-featured-image {
	max-width: calc(1700 * var(--u));
	overflow: hidden;
	margin: 0 auto 0 auto;
	border-radius: 0  0 24px 24px;
}

.tabbed-page-featured-image img {
	display: block;
	height: auto;
}