/* Fonts
 * TODO 
 *  - any use for the variable fonts?
 *  - optimize font files
 *  	- Glyphhanger
 *  - fallbacks or is woff2 support ~universal these days?
 *  - preload in HTML (or HTTP)
 *  - swap or nah? 
 */

@font-face {
	font-family: "EB Garamond";
	src:
		url("/fonts/EB_Garamond/static/EBGaramond-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-weight: normal;
	src:
		url("/fonts/Inter/static/Inter-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-weight: bold;
	src:
		url("/fonts/Inter/static/Inter-Bold.woff2") format("woff2");
}


html {

	scroll-behavior: smooth; /* for jumping to signup form */

	/* font stacks */
	--garamond: "EB Garamond", serif;
	--inter: "Inter", sans-serif;
	
	/* colors */
	--vermillion: #dd3b21;
	--vermillion-r: 86.667%;
	--vermillion-g: 23.137%;
	--vermillion-b: 12.941%;
	--light-gray: #999999;

	/* type sizing scale */
	--font-size--2: 0.625rem;
	--font-size--1: 0.75rem;
	--font-size-0: 0.875rem;
	--font-size-1: 1rem;
	--font-size-2: 1.125rem;
	--font-size-3: 1.25rem;
	--font-size-4: 1.375rem;
	--font-size-5: 1.5rem;
	--font-size-6: 1.75rem;
	--font-size-7: 2.25rem;
	
	font-family: var(--garamond);
	
	--section-gradient: linear-gradient(
		to top,
		rgb(
			var(--vermillion-r)
			var(--vermillion-g)
			var(--vermillion-b) / 0.10
		),
		transparent 50%
	);

}

/* resets */

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
}

/* make margin collapsing and stacked ps in a grid ~equivalent */
p + p {
	margin-block-start: 0;
}


/* grid */

/* body, and the sections within main, are stacked using normal flow layout */
body > header,
main > section,
main > div:where(.sections-wrapper),
body > footer {
	display: grid;
	grid-template-columns: 1.5rem 1fr 1.5rem;
}

/* everything in header, sections within main, and footer
   gets put in the center content column
   (but can break out into the left/right margins to be full bleed if it needs to) */
body > header > *,
main > section > *,
main > div:where(.sections-wrapper) > section > *,
body > footer > * {
	grid-column: 2;
}

.sections-wrapper section {
	display: contents;
}

/* basics */

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

section {
	padding-top: 2rem;
	padding-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6, hgroup, dt {
	font-family: var(--inter);
	font-kerning: normal; /* apply font kerning instructions */
	text-wrap: balance; /* in case of wrapping */
}

hgroup > h1,
hgroup > h2,
hgroup > h3,
hgroup > h4,
hgroup > h5,
hgroup > h6 {
	margin-bottom: 0;
}

a {
	color: var(--vermillion);
}

p {
	line-height: 1.3;
}

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

button {
	appearance: none;
}

button[type=submit] {
	cursor: pointer;
}

button,
.not-a-button {
	background-color: var(--vermillion);
	font-family: var(--inter);
	color: white;
	border-radius: 0.75em;
	border: none;
	font-size: var(--font-size-0);
	font-weight: 500;
	padding: 0.75em 1em;
}

.not-a-button {
	inline-size: max-content;
}

.not-a-button a {
	text-decoration: none;
}

.hollow-button {
	background-color: transparent;
	color: var(--vermillion);
	border: 1px solid var(--vermillion);
}

.small-caps-headline {
	font-size: var(--font-size--1);
	text-transform: uppercase;
}

.headline {
	font-weight: bold;
	font-size: var(--font-size-0);
}

shorten-sometimes button.more,
shorten-sometimes button.less {
	appearance: none;
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
  
	&:hover {
		color: var(--vermillion);
	}
}



/* header */

.header-wrapper {
	margin-block-start: 1.1875rem;
	border-block-start: 1px solid black;
	display: flex;
	justify-content: space-between;
	padding-block-start: 0.67em;
}

.org-name {
	text-transform: uppercase;
	font-weight: bold;
	font-size: var(--font-size--2);
	margin-block-start: 0;
}

.org-subhead {
	margin-block-start: 0;
	text-transform: uppercase;
	font-weight: normal;
	font-size: var(--font-size--2);
}

header a[href="#signup"] {
	display: none;
	font-family: var(--inter);
	font-size: var(--font-size-0);
	font-weight: 700;
	text-decoration: none;
}
header a[href="#signup"]:hover {
	text-decoration: underline;
}

/* intro */

section.intro {
	padding-top: 0;
	background-image: var(--section-gradient);
	overflow: clip; /* for carusel, consider wrapping it instead */
}

.lede {
	font-size: var(--font-size-4);
}

main looping-carousel {
	grid-column: 1/-1;
	display: grid;
	grid-template-columns: subgrid;
	/* outline: 5px solid red; */
}

.carousel {
	grid-column: 1/-1;
	grid-row: 1;
	display: flex;

	position: relative;

	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 5vw; /* todo how to align with rest of content? */

}
.slideWrapper {
	display: flex;
	gap: 1em;
}

.activeSlideWindow {
	grid-column: 2 / -2;
	/* outline: 5px solid blue; */
	grid-row: 1;
}

.carousel figure {
	scroll-snap-align: start;
	scroll-snap-stop: always; /* only ever advance one at a time */
	margin: 0;
}

.carousel img {
	--height-of-everything-else: 24rem; /* todo improve? heuristics or? */
	--min-height: 300px;
	--max-width: 70vw;
	--shortest-aspect-ratio: calc( 1566 / 1718 );
	/* TODO redo clamp as max(min()) in order to make sure max height wins over min height? */
	height: clamp(
		/* don't make them tiny, ever */
		var(--min-height),
		
		/* sized so the first section approximately fills the "fold" */
		100vh - var(--height-of-everything-else),
		
		/* but don't clip vertically (on tall+narrow screens) */
		var(--max-width) / var(--shortest-aspect-ratio)
	);
	object-fit: contain;
	width: auto;
	mix-blend-mode: multiply;
	transform: translate3d(0,0,0); /* hack fix */
	/* https://stackoverflow.com/questions/70891365/css-mix-blend-mode-difference-issue-in-safari */
}



/* todo only dim stuff if script ran */
/* all of the slides except for the first visible slide */
.carousel figure:not(:nth-child(1 of .visible)) img {
	opacity: 0.5;
}

.carousel figure:not(:nth-child(1 of .visible)) figcaption {
	visibility: hidden; /* if I display none this it screws up the intersection observer??? */
}

.carousel {
	padding-inline-end: 100vw;
	padding-inline-start: 5vw;
}

.carousel figcaption {
	border-block-start: 1px solid black;
	font-family: var(--inter);
	font-size: var(--font-size--1);
}

.title {
	font-weight: bold;
	margin-bottom: 0;
}

.description {
	margin-block-start: 0;
}

/* sections-wrapper */

.sections-wrapper {
	--top-of-presentDay: 0%; /* javascript sets this, fallback is no hardstop */
	position: relative; /* need this to get offsetTop of presentDay in js */
	background-image: linear-gradient(
		to bottom,
		transparent,
		rgb(
			var(--vermillion-r)
			var(--vermillion-g)
			var(--vermillion-b) / 0.10
		) var(--top-of-presentDay),
		transparent var(--top-of-presentDay),
		transparent 80%,
		rgb(
			var(--vermillion-r)
			var(--vermillion-g)
			var(--vermillion-b) / 0.10
		) 100%
	);
}

/* projectOne and timeline */

/* gradient that ends before presentDay */
/* stacking this under
   (and stacking the timeline line!)
   means we can't rely on auto-placement
   because auto-placement doesn't ever want to put two things in the same cell.
   So: we have to explicitly assign everything row + column */
.projectOneAndTimelineSection::before {
	content: '';
	background-image: var(--section-gradient);
	grid-column: 1 / -1;
	grid-row: 1 / 5;
}

/* explicit grid tracks */

.projectOneCopy {
	grid-row: 1;
	padding-block-end: 3rem;
	padding-block-start: 2rem;
}

.iPhoneMockupContainer {
	grid-row: 8;
}

.iPhoneMockup {
	grid-row: 2;
}

.timelineSectionCopy {
	grid-row: 9;
	padding-block-start: 3rem;
	padding-block-end: 1rem;
}

.timeline :nth-child(1) {
	grid-row: 3;
}
.timeline :nth-child(2) {
	grid-row: 4;
}
.timeline :nth-child(3) {
	grid-row: 5;
}
.timeline :nth-child(4) {
	grid-row: 6;
}
.timeline :nth-child(5) {
	grid-row: 7;
}

/* projectOne */




/* timelineSection */

.timeline {

	--dot-diameter: 1rem;
	--stroke-width: 0.25rem;
	--between-items-gap: 6rem;
	--timeline-to-content-gap: 3rem;

}

/* make the timeline entries participate in the grid, themselves
   so that we can align the gradient to the border before presentDay */
.timeline {
	display: contents
}

.timeline > div {
	grid-column: 2 / span 1;
}

.timeline div {
	padding-block-end: calc( var(--between-items-gap) / 2);
	padding-inline-start: var(--timeline-to-content-gap);
}

 /* no padding on the first element, so timeline starts in the middle of the dot */
.timeline div + div {
	padding-block-start: calc( var(--between-items-gap) / 2);
}

/* red line */
.timeline::before {
	content: "";
	grid-column: 2 / span 1;
	grid-row: 3 / span 5;
	border-inline-start: var(--stroke-width) solid var(--vermillion); /* todo clip or replace with clipped svg */
	border-image: 
		linear-gradient(
			to bottom, 
			var(--vermillion) 70%,
			transparent
		) 1 100%;
	/* margin-inline-start: calc( -1 * var(--stroke-width) ); */
}

/* pull first item up
   so that the stroke starts in the middle of the first dot */
.timeline div:first-child {
	margin-block-start: calc( -1 * var(--dot-diameter) / 2 );
}

/* gap between years and text */
.timeline dt {
	margin-block-end: 1rem;
}

/* dots */
.timeline dt::before {

	/* draw a dot */
	content: "";
	display: inline-block;
	inline-size: var(--dot-diameter);
	block-size: var(--dot-diameter);
	background-color: var(--vermillion);
	border-radius: 50%;
	
	/* pull the dot back to horizontally center it over the border */
	margin-inline-start: calc( -1 * (
		var(--timeline-to-content-gap) +
		( var(--dot-diameter) / 2 ) -
		( var(--stroke-width) / 2 )
	) );
	
	/* push the content after the dot back
	   to where it would have been, without the dot */
	margin-inline-end: calc(
		var(--timeline-to-content-gap) -
		( var(--dot-diameter) / 2 ) -
		( var(--stroke-width) / 2 )
	);

}

/* ok! done with dots! */

.timeline dd {
	font-size: var(--font-size-4);
	margin-inline-start: 0;
}

.presentDay {
	--dot-diameter: 1.5rem;
}

.presentDay dt {
	font-size: var(--font-size-3);
}

.presentDay dd {
	font-size: var(--font-size-6);
}


/* fwd */

.giantFwd {
	font-size: 100px;
	font-family: var(--garamond);
	font-weight: normal;
	margin-block: 0;
}

.howYouCanHelp label {
	display: block;
	font-family: var(--inter);
	font-size: var(--font-size-0);
	font-weight: 400;
}
label.honeypot, input[name=honeypot] {
	visibility: hidden;
	height: 0;
}

.howYouCanHelp input,
.howYouCanHelp textarea {
	display: block;
	width: 100%;
	font-size: var(--font-size-3);
	padding: 0.75rem;
	border: 1px solid var(--light-gray);
	margin-top: 0.5rem;
	margin-bottom: 2rem;
}

.howYouCanHelp textarea {
	field-sizing: content;
	resize: vertical;
}

.singupForm {
	margin-block-start: 3rem;
}

.thanks {
	font-size: var(--font-size-7);
	color: var(--vermillion);
	font-family: var(--garamond);
	font-weight: normal;
	margin-block-end: 1rem;
}

/* footer */

footer {
	padding-top: 1rem;
	margin-top: 4rem;
	font-family: var(--inter);
	background: var(--vermillion);
	color: white;
	padding-bottom: 80vw;
	/* TODO
	   optimize */
	background-image: url("/media/background-pilot.png");
	background-blend-mode: multiply;
	background-size: 140% auto;
	background-repeat: no-repeat;
	background-position: 30% bottom;
}

footer a {
	color: white;
}

footer .headline {
	margin-bottom: 0;
}

footer .headline + * {
	margin-top: 0;
}

footer p {
	font-size: var(--font-size-0);
}

.instagram::before {
	content: "";
	display: inline-block;
	inline-size: 1.5em;
	block-size: 1.5em;
	background-image: url("/media/instagram_logo.svg");
	background-size: cover;
	margin-right: 0.75em;
}



/* utilities */

/* vertically center a ::before psuedo-element
   with the cap height of the text that comes after it
   https://blog.kizu.dev/cap-height-align/ */

.vertically-centered-before {
	/* Adjusted for Inter */
	--cap: 0.7272727273em;
}

@supports (height: 1cap) {
	.vertically-centered-before {
		--cap: 1cap;
	}
}

.vertically-centered-before::before {
	vertical-align: middle;
	margin-block-start: calc(1ex - var(--cap));
}



/* media queries */

@media (min-width: 600px) {
	
	.org-name,
	.org-subhead {
		font-size: var(--font-size-0);
	}
	
	header a[href="#signup"] {
		display: unset;
	}
	
	.lede {
		font-size: var(--font-size-6);
	}
	
	body > header,
	main > section,
	main > div:where(.sections-wrapper), /* give same specifitiy */
	body > footer {
		display: grid;
		grid-template-columns: 2.6875rem repeat( 11, 44fr 20fr ) 44fr 2.6875rem;
		grid-auto-rows: min-content;
	}
	
	.header-wrapper {
		grid-column: 2 / -2;
	}
	
	.lede {
		grid-column: 2 / span 16;
	}
	
	.carousel-wrapper {
		grid-column: 1/-1;
	}
	
	.carousel figure.active {
		margin-inline-start: 2.6875rem;
	}
	
	/* projectOne and timeline */
	
	/* red line */
	.timeline::before {
		grid-column: 14 / span 9;
		grid-row: 2 / span 5;
	}
	
	/* gradient that terminates before presentDay */
	.projectOneAndTimelineSection::before {
		grid-row: 1 / span 3;
	}

	
	/* again because of the stacked gradient and timeline,
	   we need to explicitly assign all of the grid cells */
	.projectOneCopy {
		grid-row: 1;
		grid-column: 14 / span 9;
	}
	
	/* We want the image to size itself based on the height of the text cells
	   We *do not* want the text cells to expand to fit the height of the image.
	   
	   Using a container and absolute positioning as a hack while we wait for 
	   https://bugs.webkit.org/show_bug.cgi?id=276681
	   Based on Miriam's pen: https://codepen.io/miriamsuzanne/pen/poRqXGd */
	.iPhoneMockupContainer {
		grid-column: 2 / span 11;
		grid-row: 1 / span 3;
		position: relative;
	}
	.iPhoneMockup {
		position: absolute;
		top: 4rem;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center bottom;
	}
	
	.timelineSectionCopy {
		grid-column: 2 / span 11;
		grid-row: 5 / span 2;
		padding-block-start: 0;
	}

	.timeline > div {
		grid-column: 14 / span 9;
	}
	

	.timeline :nth-child(1) {
		grid-row: 2;
	}
	.timeline :nth-child(2) {
		grid-row: 3;
	}
	.timeline :nth-child(3) {
		grid-row: 4;
	}
	.timeline :nth-child(4) {
		grid-row: 5;
	}
	.timeline :nth-child(5) {
		grid-row: 6;
	}
	

	
	/* fwd */

	.giantFwd {
		grid-column: 2 / span 11;
	}
	
	.backStory {
		grid-column: 2 / span 9;
	}

	.howYouCanHelp {
		grid-column: 14 / span 9;
	}
		
	footer {
		background-size: min( 70vw, 576px ) auto; /* 70vw was guess-and-checked, 576 taken from figma... */
		background-repeat: no-repeat;
		background-position: right -120px bottom;
		padding-bottom: 1rem;
		min-height: 400px; /* for press background */
	}
	
	footer p {
		grid-column: 2 / span 11;
	}

}

@media ( min-width: calc( 1160px + 2.6875rem * 2 ) ) {

	/* font sizes */

	body {
		font-size: var(--font-size-4);
	}
	
	.lede {
		font-size: var(--font-size-7);
	}
	
	.small-caps-headline {
		font-size: var(--font-size-1);
	}
	
	.headline {
		font-size: var(--font-size-2);
	}
	
	.carousel figcaption {
		font-size: var(--font-size-1);
	}
	
	.timeline dd {
		font-size: var(--font-size-6);
	}
	
	.presentDay dt {
		font-size: var(--font-size-5);
	}
	
	.presentDay dd {
		font-size: var(--font-size-7);
	}
	
	.giantFwd {
		font-size: 160px;
	}
	
	.howYouCanHelp label {
		font-size: var(--font-size-1);
	}
	button,
	.not-a-button {
		font-size: var(--font-size-1);
	}
	footer .headline {
		font-size: var(--font-size-0); /* stay small */
	}
	

	/* grid */

	body > header,
	main > section,
	main > .sections-wrapper,
	body > footer {
		grid-template-columns: 1fr repeat( 11, 68px 31px ) 68px 1fr;
	}
	
	.lede {
		grid-column: 2 / span 13;
	}

	/* todo reduce specificity? */
	main > .sections-wrapper .iPhoneMockup {
		grid-column: 2 / span 10;
	}
	
	.timelineSection .headline,
	.timelineSection .description {
		grid-column: 2 / span 9;
	}

	.backStory {
		grid-column: 2 / span 9;
	}
	
	footer p {
		grid-column: 2 / span 7;
	}

	footer {
		background-position: right calc( 50vw - 540px ) bottom;
	}

}