/*
 * Root
 */
:root {
	--yellow: #efdc03;
	--yellow-transparent: hsla(60, 100%, 50%, 45%);
	--gray: #686868;
	--red: #ce2229;
	--bg: #fff;
	--text: #000;
	--space-1: .5rem;
	--space-2: 1rem;
	--space-3: 2rem;
	--space-4: 3rem;
	--space-5: 4rem;
	--space-6: 6rem;
	--font-size-1: .875rem;
	--font-size-2: 1rem;
	--font-size-3: 1.125rem;
	--font-size-4: 1.5rem;
	--font-size-5: 2.5rem;
	--font-size-6: 3rem;
	--border-width: 8px;
	--offset: 12px;
	--offset-neg: -12px;
	--font-serif: Merriweather, ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--font-sans: Montserrat, ui-sans-serif, Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
	--font-mono: 'Raleway', ui-rounded, 'Nimbus Mono PS', 'Courier New', 'Courier', monospace;
	--radius: 1.5rem;

	padding: 0;
	margin: 0;
	scroll-padding-top: var(--space-3);
	overflow-x: hidden;
}

body {
	margin: 0;
	background-color: var(--text);
	color: var(--text);
	font-family: var(--font-serif);
	font-size: var(--font-size-3);
	line-height: 1.5;
	overflow-x: clip;
}

@media (min-width: 50em) {
	body {
		padding: var(--space-3);
	}
	body::before,
	body::after {
		display: block;
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: var(--space-3);
		background: inherit;
		z-index: 9999;
	}
	
	body::after {
		top: auto;
		bottom: 0;
	}
}

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

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

audio {
	display: block;
	width: 100%;
	background-color: #000;
}

audio::-webkit-media-controls-enclosure {
	border-radius: 0;
}

br {
	margin: 0;
}


/*
 * Typography
 */
h1,
h2,
h3,
h4 {	
	font-family: var(--font-sans);
	text-wrap: balance;
	line-height: 1.3;
	font-size: var(--font-size-4);
}

h1,
.h1 {
	margin-top: var(--space-5);
	font-weight: 700;
	font-family: var(--font-sans);
}

h2 {
	font-weight: 800;
	font-family: var(--font-serif)
}

h3 {
	font-weight: 700;
	font-family: var(--font-serif)
}

h4 {
	font-size: var(--font-size-3);
}

h2 span,
h3 span,
h4 span {
	display: block;
}

@media( min-width: 50em ) {
	h1,.h1 {
		font-size: var(--font-size-5);
	}
	
	h2 {
		font-size: var(--font-size-4);
	}
}

p {
	text-wrap: pretty;
}

blockquote {
	hanging-punctuation: first allow-end;
}

cite {
	display: block;
	margin-top: .75em;
}
	cite::before {
		/* Two different ways to avoid screen readers speaking the em-dash */
		content: '― ';
		content: '― ' / "";
		speak: none;
	}

figcaption {
	margin-top: var(--offset);
	font-size: var(--font-size-1);
}

a {
	padding: 2px;
	color: #000;
	background-color: var(--yellow);
	transition: background-color .15s ease-in-out;
}
	a:hover {
		background-color: rgba(239,220,3,.5);
	}

.image-link {
	display: block;
	width: max-content;
	max-width: 100%;
	padding: 0;
	color: inherit;
	background-color: transparent;
}

	.image-link:hover,
	.image-link:focus-visible {
		outline: 2px solid var(--yellow);
		outline-offset: 2px;
		box-shadow: #000 0 0 0 2px;
	}

footer {
	font-size: var(--font-size-2);
}


/*
 * Spacing
 */

.container > * {
	max-width: 50rem;
	max-width: min( 80vw, 50rem );
	margin-left: auto;
	margin-right: auto;
}

.constrained {
	max-width: 44rem;
	max-width: min( 80vw, 40rem );
	margin-left: auto;
	margin-right: auto;
}

* + * {
	margin-top: 1.5em;
}

section,
.container,
.box {
	background-color: var(--bg);
	color: var(--text);
	margin-top: 0;
	display: flow-root; /* Contain floats */
}

@media (min-width: 50em) {
	.grid-2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}
	.grid-2 > * {
		margin: 0 !important;
	}
}

@media( min-width: 50em ) {	
	.flex-center {
		display: flex;
		align-items: center;
	}
	.flex-center .portrait {
		margin-top: 0;
	}
}

/*
 * Transitions
 */
.to-c-yellow,
.to-c-white {
	transition: color var(--duration, .5s) var(--delay, .5s) ease-in-out;
}
	.to-c-yellow.transition {
		color: var(--yellow);
	}
	.to-c-white.transition {
		color: #fff;
	}

.to-bg-yellow,
.to-bg-white {
	transition: background-color var(--duration, .5s) var(--delay, .5s) ease-in-out;
}
	.to-bg-yellow.transition {
		--bg: var(--yellow);
		background-color: var(--yellow)
	}
	.to-bg-white.transition {
		--bg: #fff;
		background-color: #fff
	}

.to-visible {
	opacity: 0;
	transition: opacity var(--duration, .5s) var(--delay, .5s) ease-in-out;
}
	.to-visible.slow {
		--duration: 3s;
	}
	.to-visible.transition {
		opacity: 1;
	}

/* Work around potential rounding errors that mean document image doesn't perfectly fill the SVG */
.stroke-animation {
	background: white;
}

.stroke-animation line {
	fill: transparent;
	stroke: var(--yellow-transparent);
	stroke-width: 25;
	stroke-linecap: square;
	stroke-dasharray: var(--length, 0);
	stroke-dashoffset: var(--length, 0);
	animation: dash 0.75s var(--delay, 0s) ease-in forwards;
	animation-play-state: paused;
}
	@supports (mix-blend-mode: multiply) {
		.stroke-animation line {
			stroke: var(--yellow);
			mix-blend-mode: multiply;
		}
	}
	.stroke-animation.transition line {
		animation-play-state: running;
	}

@keyframes dash {
	to {
		stroke-dashoffset: 0;
	}
}
	

/*
 * Modules
 */

section {
	padding: var(--space-6) 0;
}

/* Intro Text */
.intro {
	font-size: 1.4375rem;
	color: var(--gray);
	line-height: 1.52174;
}

.intro-quote {
	font-size: var(--font-size-4);
	font-style: italic;
	font-weight: 900;
}
	.intro-quote p {
		display: inline;
	}

/* Spacer */
[class*="spacer"] {
	clear: both;
	height: 1.5em;
}

.spacer--6 {
	height: var(--space-6)
}

/* Connector */
.connector {
	position: relative;
	margin: 0 auto;
	height: 1.5em;
	z-index: 10 !important;
}
.connector + * {
	margin-top: 0 !important;
}
.connector::before {
	position: absolute;
	display: block;
	content: '';
	height: var(--space-5);
	width: 5px;
	background-color: var(--red);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

/* Box */
[class*="box"] {
	margin-top: 1.5em;
	padding: var(--space-3);
}

@media( min-width: 50em ) {
	.box--large {
		padding: var(--space-4);
	}
}

/* Image Frame */
.image-frame {
	position: relative;
}
	.image-frame::before,
	.image-frame::after {
		display: block;
		content: '';
		position: absolute;
		width: 46%;
	}
	.image-frame::before {
		height: 90%;
		left: var(--offset-neg);
		bottom: var(--offset-neg);
		background-color: #000;
	}
	.image-frame::after {
		height: 35%;
		top: var(--offset-neg);
		right: var(--offset-neg);
		background-color: var(--yellow);
	}
	.image-frame img {
		position: relative;
		width: 100%;
		z-index: 1;
	}
	.image-frame + figcaption {
		margin-top: calc(2 * var(--offset));
	}

/* Quote Boxes */
.quote {
	--bg: #000;
	--text: #fff;
	--top: 100%;
	--left: 50%;
	--right: auto;
	position: relative;
	margin-bottom: 4rem;;
	padding: var(--space-3);
	background-color: var(--bg);
	color: var(--text);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	z-index: 1;
}
	.quote::after {
		content: '';
		position: absolute;
		width: 1.5rem;
		height: 2.025rem;
		top: calc( var(--top) - 1px ); /* avoid rounding issues causing a gap */
		left: var(--left);
		right: var(--right);
		background: var(--bg);
		mask: url('img/tail.svg') center / contain no-repeat;
		transition: inherit;
	}

	.quote--large {
		padding: var(--space-3);
	}
	@media (min-width: 50em) {
		.quote--large {
			padding: var(--space-5);
		}
	}
	.quote--large::after {
		width: 2rem;
		height: 2.7rem;
	}

	.quote--bar::after {
		mask: none;
		background-color: #000;
		margin-left: -.125rem; /* magic number to match perceived left edge of tail */
		width: 1.625rem; /* magic number matches top of quote tail */
	}

	.quote--left::after {
		transform: scaleX(-1);
	}

	[class*="quote--side-"],
	.quote--bar {
		margin-bottom: 0;
	}

	/* Put custom props on parent so they can be overridden with inline styles */
	.quote--side-right {
		--left: 100%;
		--top: 50%;
	}
	.quote--side-right::after {
		transform: rotate(-90deg);
		
	}

	.quote--side-left {
		--top: 50%;
		--left: auto;
		--right: 100%;
	}
	.quote--side-left::after {
		transform: scaleY(-1) rotate(90deg);
	}

	@media( max-width: 49.99em ) {
		.quote--mobile-top::after {
			transform: rotate(180deg);
			--top: -1.9rem;
			--left: 80%;
		}
		.quote--mobile-bottom::after {
			transform: none;
			--top: 100%;
			--left: 20%;
		}
	}

/* Audio Wrapper */
.audio-wrapper,
.audio-portrait {
	position: relative;
 	margin: var(--space-4) auto;
	padding-left: calc( var(--space-6) );
}
	.audio-wrapper::before,
	.audio-portrait img {
		position: absolute;
		display: block;
		left: calc(-1 * var(--border-width));
		top: 50%;
		transform: translateY(-50%);
		width: calc( var(--space-6) + var(--border-width) * 2 );
		height: calc( var(--space-6) + var(--border-width) * 2 );
		background: var(--yellow);
		border-radius: 50%;
		z-index: 5;
	}
	.audio-wrapper::before {
		content: ''; /* setting this on the shared selector in the last ruleset breaks the image in Safari */
	}
	/* Because audio can't have a border-radius in all browsers */
	.audio-border {
		overflow: hidden;
		border-radius: 0 var(--radius) var(--radius) 0;
		outline: var(--border-width) solid var(--yellow);
		border: 0 !important;
	}
	p.transcript-link {
		position: absolute;
		top: 100%;
		right: 0;
		text-align: right;
		font-size: .875em;
		font-style: italic;
	}
	.transcript-link a {
		background-color: transparent;
	}
	.transcript-link a:hover {
		text-decoration: none;
	}

/* Portrait */
.portrait {
	position: relative;
	top: var(--top);
	left: var(--left, 10%);
	right: var(--right);
	margin: -3rem auto 0;
	width: 350px;
	max-width: var(--max-width, 50%);
	border-radius: 50%;
	background-color: #fff;
}

.portrait-name {
	margin: 0 auto;
	position: relative;
	top: var(--top);
	left: var(--left, 10%);
	right: var(--right);
	text-align: center;
	font-family: var(--font-mono);
	font-size: var(--font-size-2);
}

/*
 * Header
 */
header {
	display: flex;
	gap: var(--space-3);
	justify-content: space-between;
	align-items: center;
	margin-top: 0;
	padding: var(--space-3) var(--space-4);
	background: #000;
	color: #fff;
}
@media (min-width: 50em) {
	header {
		padding: 0 var(--space-4) var(--space-3);		
	}
}

header a {
	background-color: transparent;
	color: var(--yellow);
	transition: background-color .25s, color .25s;
}
	header a:hover,
	nav a[aria-current] {
		background-color: var(--yellow);
		color: #000;
		text-decoration: none;
	}

	header img {
		transition: filter .25s;
	}

	header a:hover img {
		filter: invert(1);
	}

nav {
	margin: 0;
	font-size: var(--font-size-1);
}

	nav ul {
		list-style: none;
		display: flex;
		gap: 1em;
	}

	nav li {
		margin: 0;
	}

/*
 * Footer
 */
footer {
	padding: var(--space-4);
	background-color: var(--yellow);
	color: var(--text);
}


/*
 * Section 1
 */
.items img {
	position: relative;
	margin: 0;
	left: var(--left);
	width: var(--width, 55%);
}
.items img:nth-child(even) {
	left: var(--left, 40%);
}

.section-1 .matata {
	max-width: 50%;
	margin-left: var(--space-4);
	shape-margin: var(--space-3);
	/* shape-outside: polygon(0% 100%, 0% 55%, 54.46% 31.02%, 70% 0%, 100% 0%, 100% 100%); */
	shape-outside: url(img/illustrations/matata.png);
}

.notebook-flipper {
	position: relative;
	padding-bottom: 50vh;
}

/* elements that get observed for page flipping */
.notebook-flipper-segment {
	height: 50vh;
}

/* container for page images */
.notebook-pages {
	position: sticky;
	top: 0;
	height: 100vh;
	margin-bottom: -50vh;
}
	.notebook-flipper img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 60vh;
		max-width: 768px;
		max-width: min(768px,90vw);
		height: 50vh;
		margin: 0;
		transform: translate(-50%,-50%);
		opacity: 0;
		transition: opacity var(--duration, .75s) var(--delay, 0s) ease-in-out;
	}
	.notebook-flipper .page-0 {
		opacity: 1;
	}
	.notebook-flipper .page-1 {
		z-index: 1;	
	}
	.notebook-flipper .page-2 {
		z-index: 2;	
	}
	.notebook-flipper .page-3 {
		z-index: 3;	
	}
	.notebook-flipper .page-4 {
		z-index: 4;	
	}
	.notebook-flipper .page-5 {
		z-index: 5;	
	}

	[data-current-page="0"] .page-0,
	[data-current-page="1"] .page-1,
	[data-current-page="2"] .page-2,
	[data-current-page="3"] .page-3,
	[data-current-page="4"] .page-4,
	[data-current-page="5"] .page-5 {
		opacity: 1;
	}

/*
 * Section 2
 */
.section-2 {
	--bg: var(--yellow);
	position: relative;
}

.section-2 .quote {
	--text: var(--yellow);
}

/* Timeline */
.timeline {
	--bg: #000;
	--text: #fff;
	padding: calc( var(--space-3) * 6 ) 0;
	overflow: hidden; /* attempt to fix overflowing floats on iOS? */
}

.timeline > * {
	max-width: 60rem;
	max-width: min( 80vw, 60rem );
}

.timeline h4 {
	font-family: var(--font-sans);
}

.timeline-dash {
	--dash-color: white;
	position: relative;
}
.timeline-dash * {
	position: relative;
	z-index: 2;
}
.timeline-dash::before,
.section-2::after {
	display: block;
	content: '';
	position: absolute;
	top: calc(var(--space-3) * 6);
	bottom: calc(var(--space-3) * 6);
	right: 0;
	width: var(--border-width);
	background: repeating-linear-gradient(
		to bottom,
		var(--dash-color),
		var(--dash-color) 24px,
		transparent 24px,
		transparent calc(2 * 24px)		
	);
}

.no-justice::before {
	top: 0;
	bottom: 0;
}

.section-2::after {
	display: none;
	--dash-color: #000;
	top: auto;
	bottom: 0;
	height: calc( 24px * 6 );
}

@media( min-width: 50em ) {
	.timeline-dash::before,
	.section-2::after {
		display: block;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}

	.timeline-dash::before {
		top: 0;
		bottom: 0;
	}
}

.timeline-align {
	margin-top: var(--timeline-round);
}

.timeline-connect::after {
	position: absolute;
	content: '';
	height: var(--border-width);
	background-color: var(--text);
	left: calc( 100% + calc( var(--border-width) * 1.5 ) );
	top: calc( var(--border-width) / 2 );
	width: calc( 10vh - var(--border-width) * 2 );
}
	@media (min-width: 50em) {
		.timeline-connect::after {
			width: calc( var(--space-6) / 2 - var(--border-width) );
		}
	}
	.timeline-connect.f-right::after,
	.f-right .timeline-connect::after {
		left: auto;
		right: calc( 100% );
	}
	.timeline-connect.box::after {
		top: 0;
		width: calc( var(--space-6) / 2 );
		background-color: var(--bg);
	}


.event {
	display: flow-root;
	position: relative;
	margin-top: calc( 48px + var(--timeline-round) );
}

.event .f-left h4 {
	position: relative;
	top: calc( -1 * var(--border-width) / 2 );
	font-size: inherit;
}

.event .f-left {
	text-align: right;
}

.no-justice {
	padding: 75vh 0;
	padding: round( up, 75vh, 24px ) 0;
}

.no-justice .box {
	min-height: var(--height, auto);
	margin-top: 0;
	padding: calc( 3 * var(--space-3) ) var(--space-3);
	font-size: var(--font-size-4);
	text-align: center;
}

.no-justice.timeline-dash::before {
	right: auto;
	left: 50%;
	transform: translateX(-50%);
}

/*
 * Section 3
 */
.bubbles .f-right {
	float: left;
	margin-left: 2%;
}
.bubbles .bubble-1 {
	width: 40%;
	margin: 5% -10% 0 7.5%;
}
.bubbles .bubble-2 {
	width: 50%;
	margin: 0 0 1.5em;
}
.bubbles .bubble-3 {
	float: left;
	width: 50%;
	margin: 0 0 0 -5%;
}
.bubbles .bubble-4 {
	float: left;
	width: 40%;
	margin: 5% 0 0 10%;
}
.bubbles p {
	clear: both;
	margin: 1.5em 0;
}

@media (min-width: 50em) {
	.bubbles p {
		clear: none;
	}
	.bubbles .f-right {
		float: right;
	}
	.bubbles .bubble-1 {
		width: 35%;
		margin: 0 0 0 4%;
	}
	.bubbles .bubble-2 {
		width: 34%;
		margin: 3% 4% 0 3%;
	}
	.bubbles .bubble-3 {
		float: left;
		width: 35%;
		margin: 0 -6% 0 0;
		clear: none;
	}
	.bubbles .bubble-4 {
		float: left;
		width: 25%;
		margin: 7% 2% 0;
		clear: none;
	}
}

/*
 * Utilities
 */

/* Position */
.pos-r {
	position: relative;
}

.fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}

.full-width {
	max-width: 100%;
}

/* Scroll Snapping */
.snap,
section {
	scroll-snap-type: y;
}

/* Spacing */
.mt {
	margin-top: 1.5em !important;
}

.mt0 {
	margin-top: 0;
}

.mt6 {
	margin-top: var(--space-6);
}

.mb1 {
	margin-bottom: var(--space-1);
}

.mb5 {
	margin-bottom: var(--space-5);
}

.pt0 {
	padding-top: 0;
}

.v-space-5 {
	margin-top: var(--space-5);
	margin-bottom: var(--space-5);
}
.v-space-6 {
	margin-top: var(--space-6);
	margin-bottom: var(--space-6);
}

/* Colors */
.c-yellow {
	color: var(--yellow) !important;
}

.c-red {
	color: var(--red) !important;
}

[class*="bg-"] {
	background-color: var(--bg);
	color: var(--text);
}

.bg--white {
	--bg: #fff;
	--text: #000;
}

.bg--black {
	--bg: #000;
	--text: #fff;
}

.bg--red {
	--bg: var(--red);
}
.bg--yellow {
	--bg: var(--yellow);
}

.overlay--yellow {
	position: relative;
}
	.overlay--yellow::before {
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: var(--yellow-transparent);
	}
	
	@supports( mix-blend-mode: multiply) {
		.overlay--yellow::before {
			background: var(--yellow);
			mix-blend-mode: multiply;
		}
	}

/* Text Alignment */
.ta-left {
	text-align: left;
}
.ta-right {
	text-align: right;
}
.ta-center {
	text-align: center;
}

/* Circle */
.round {
	border-radius: 50%;
	overflow: hidden;
}

/* Borders */
[class*="border"] {
	border: var(--border-width) solid #000;
}

.border--yellow {
	border-color: var(--yellow) !important;
}

.border--red {
	border-color: var(--red) !important;
	outline-color: var(--red);
}

/* Shadows */
[class*="shadow"] {
	--x-offset: var(--offset);
	--y-offset: var(--offset-neg);
	--shadow-color: #000;
	box-shadow: var(--x-offset) var(--y-offset) var(--shadow-color);
}

[class*="shadow--yellow"] {
	--shadow-color: var(--yellow);
}

.shadow--left-top,
.shadow--yellow-left-top {
	--x-offset: var(--offset-neg);
}

.shadow--right-bottom,
.shadow--yellow-right-bottom {
	--y-offset: var(--offset);
}

.shadow--left-bottom,
.shadow--yellow-left-bottom {
	--x-offset: var(--offset-neg);
	--y-offset: var(--offset);
}

[class*="shadow--"][class*="-bottom"] + figcaption {
	margin-top: calc( var(--offset) * 2 );
}

/* Floats and Clearing */
.f-left,
.f-right,
.f-center {
	width: 100%;
	position: relative;
}

.clear {
	clear: both;
}
.clear-none {
	clear: none !important;
}
.clear-right {
	clear: right;
}
.clear-left {
	clear: left;
}

@media (min-width: 50em) {
	.f-left,
	.f-right {
		max-width: calc(50% - calc( var(--space-6) / 2 ));
	}
	.f-left {
		float: left;
		clear: left;
	}
	.f-right {
		float: right;
		clear: right;
		margin-left: var(--space-6);
	}
	.f-right:first-child + .f-left {
		margin-top: 0;
	}
	.one-third {
		max-width: calc(35% - calc( var(--space-6) / 2 ));
	}
	.two-third {
		max-width: calc(65% - calc( var(--space-6) / 2 ));
	}
}

/*
 * Accessibility
 */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* TODO: Manage translations */