@import url('fonts.css');

:root
{
	--white:white;
	--light:#F6EDE5;
	--dark:#000000;
	--green-grey:#CCCBC3;
	--mid-grey:#CACBCD;

	--blue:#00A3DE;
	--soft-blue:#B8E1F0;

	--orange:#F26522;
	--soft-orange:#F3AD8B;

	--green:#009D48;
	--magenta:#F6509D;

	--page-width:1512px;
	--page-padding:30px;
	--page-top:100px;
	
	--page-in:.4s;
	--page-out:.2s;
	--page-curve:cubic-bezier(.23,.34,.18,1);
	--page-color:.6s;
	
	--spacing:30px;
	--spacing-double:60px;
	
	--grid-spacing:70px;
	--small-grid-spacing:60px;


	--type-font:'BradfordLLWeb-Light',sans-serif;
	--type-size:30px;
	--type-line:42px;
	--type-spacing:0.01em;
	
	--type-h1-font:'AgipoBoldCond';
	--type-h1-size:60px;
	--type-h1-line:1;
	--type-h1-spacing:-0.02em;

	--type-h2-font:'Agipo-Regular';
	--type-h2-size:60px;
	--type-h2-line:1;
	--type-h2-spacing:-0.02em;
	
	--type-h3-font:'BradfordLLWeb-Light';
	--type-h3-size:32px;
	--type-h3-line:38px;
	--type-h3-spacing:-0.01em;

	--type-tag-font:'MaisonNeue-Mono';
	--type-tag-size:15px;
	--type-tag-line:20px;
	--type-tag-spacing:0.01em;

	--type-mono-font:'MaisonNeue-Mono';
	--type-mono-size:16px;
	--type-mono-line:24px;
	--type-mono-spacing:-0.03em;
	
	--type-intro-size:40px;
	--type-intro-line:50px;
	--type-intro-spacing:-0.01em;
	
	--type-menu-size:25px;
	
	--type-sans-font:'Agipo-Regular';


	--curve:cubic-bezier(.23,.34,.18,1);	
}



html
{
	height:100%;
	/* scroll-behavior: smooth; */
}
body
{
	margin:0;
	padding:0;

	/* the full width section tint is 100vw, which includes the scrollbar width.
	   clip (not hidden) keeps this from becoming a scroll container */
	overflow-x:clip;

	font-family:var(--type-font);
	font-size:var(--type-size);
	line-height:var(--type-line);
	font-weight:normal;
	font-style:normal;
	letter-spacing:var(--type-spacing);

	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	
	background-color:var(--light);
	color:var(--dark);
	
	transition:background-color var(--page-color) ease 0s;
}
body.home,
body.light
{
	background-color:var(--light);
}
body.dark
{
	background-color:var(--dark);
	color:var(--light);	
}
body.mid-grey
{
	background-color:var(--mid-grey);
}
body.soft-blue
{
	background-color:var(--soft-blue);
}
body.soft-orange
{
	background-color:var(--soft-orange);
}
body.green-grey
{
	background-color:var(--green-grey);
}


body *
{
	box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.is-hidden
{
	display:none !important;
}
.no-pointer-events
{
	pointer-events:none;
}
.pointer-events
{
	pointer-events:all;
}
.clickable
{
	cursor:pointer;
}
.dimmed
{
	opacity:.4;
}
.no-transition
{
	transition:none !important;
}
.no-scrollbar
{
	scrollbar-width: none; /* FF */
	-ms-overflow-style: none; /* Edge */
}
.no-scrollbar::-webkit-scrollbar
{
	display: none;
}
.flex
{
	display:flex;
}
.flex.center
{
	justify-content: center;
}
.flex-center-vertical
{
	align-items: center;
}
.flex-wrap
{
	flex-wrap:wrap;
}
.flex-break
{
	flex-basis:100%;
	height:0;
}
.clear:after
{
	content:'';
	display:table;
	clear:both;
}
.full-width
{
	width:100% !important;
}
pre
{
	max-width:100%;
}
.nowrap
{
	white-space:nowrap;
}
a
{
	color:inherit;
	text-decoration-thickness: from-font;
}
a.button
{
	font-family: var(--type-mono-font);
	text-transform:uppercase;
	background-color:var(--orange);
	border-radius:8px;
	padding:4px 15px;
	cursor:pointer;
}
.modal a.button
{
	font-size:18px;
}



/* typo */

h1,
h2.title
{
	/* margin-left:15px; */
	margin:.85em 0 .85em 15px;
	font-family:var(--type-h1-font);
	font-size:var(--type-h1-size);
	line-height:var(--type-h1-line);
	letter-spacing:var(--type-h1-spacing);
}
h1 a.edit,
h2 a.edit
{
	margin-left:10px;
	font-size:13px;
	font-weight:normal;
	padding:3px 8px;
	vertical-align:top;
	background-color:var(--soft-orange);
}
h2
{
	font-family:var(--type-h2-font);
	font-size:var(--type-h2-size);
	font-weight:normal;
	line-height:var(--type-h2-line);
	letter-spacing:var(--type-h2-spacing);
}
h3
{
	font-family:var(--type-h3-font);
	font-size:var(--type-h3-size);
	font-weight:normal;
	line-height:var(--type-h3-line);
	letter-spacing:var(--type-h3-spacing);
	margin:.34em 0;
}
.tag,
.tags
{
	font-family:var(--type-tag-font);
	font-size:var(--type-tag-size);
	line-height:var(--type-tag-line);
	letter-spacing:var(--type-tag-spacing);
}
h2 + .tags,
h1 + .tags
{
	margin-top:-20px;
}

.mono
{
	font-family:var(--type-mono-font);
	font-size:var(--type-mono-size);
	line-height:var(--type-mono-line);
	letter-spacing:var(--type-mono-spacing);
}
.cms-inline-media[data-caption]::after
{
	font-family:var(--type-tag-font);
	font-size:var(--type-tag-size);
	letter-spacing:var(--type-tag-spacing);
}
.sans
{
	font-family:var(--type-sans-font);
}


/* layout */

header 
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:var(--page-padding);

	justify-content: space-between;
	align-items: flex-end;
	
	font-family:Agipo-Regular;
	font-size:var(--type-menu-size);

	color:var(--white);
	mix-blend-mode: difference;

	z-index:1000;
}
header .logo
{
	margin-left:20px;
}
header .logo svg
{
	display:block;
}
header .menu
{
	flex-grow:1;
	max-width:calc(100% - 250px);
}

header nav
{
	float:right;
	margin-bottom:-13px;
	
	display:flex;
	align-items:flex-end;
	/* justify-content: flex-end; */
	/* line-height:1; */

	white-space: nowrap;
	
	overflow-x:scroll;
	
	width:auto;
	max-width:100%;
	
	transition:width .2s ease 0s;
	
}

header nav a
{
	margin:0 25px;
}
header nav a:not(.selected)
{
	text-decoration:none;
}
header nav a.selected,
header nav a:hover
{
	color:var(--green);
}
header button
{
	width:40px;
	background-color:transparent;
	border:none;
	padding:0;
	cursor:pointer;
	
	color:var(--white);
}
header button svg
{
	margin-bottom:-3px;
}
header button svg g
{
	transition:opacity .2s ease 0s;
}
header button[aria-expanded="false"] .close,
header button[aria-expanded="true"] .open
{
	opacity:0;
}
#page-menu-arrow
{
	position:absolute;
	right:9px;
	bottom:20px;
	width:12px;
	height:40px;
}


footer
{
	margin-left:calc(-1 * var(--page-padding));
	margin-bottom:calc(-1 * var(--page-padding));
	padding:var(--page-padding);
	width:100vw;
}
footer ul
{
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	align-items:center;
}
footer li:not(:last-child)::after
{
	content:'·';
	margin:0 28px;
}
footer a
{
	text-decoration:none;
}
section.item.invert + footer
{
	background-color:var(--dark);
	color:var(--light);
}


#pages
{
	
}

.page
{
	position:absolute;
	left:0;
	top:0;
	max-width:var(--page-width);
	padding:var(--page-padding);
	padding-top:var(--page-top);
	width:100%;
	min-height:100%;
	/* padding-top:calc(var(--header-height) + var(--block-spacing)); */
	
	transition:opacity var(--page-in) var(--page-curve) 0s;
	/* z-index:100; */
	
	/* background-color:rgba(250,0,0,.1); */
}
.page.prev,
.page.fixed
{
	position:fixed;
}
.page.next
{
	/* transition-duration:1s; */
	opacity:0;
	/* off screen next page */
	/* visibility:hidden; */
	/* transform:translateY(100vh); */
}
.page.off
{
	transition-duration:var(--page-out);
	opacity:0;
}

/*	optional full window width background on an item section.
	set the colour inline in renderItem: section.attr('data-bg','').css('--section-bg','var(--soft-blue)') */
section.item
{
	position:relative; /* positioning context for the bottom line below, and the tint on [data-bg] */

	/* contain the child margins (a first <p> would otherwise collapse out and push the
	   section down, so the tint would not start at the page top) and the note float */
	display:flow-root;
	padding-bottom: var(--page-padding);
}
section.item.empty p
{
	min-height:calc(100vh - 230px);
}
section.item::after
{
	content:'';
	position:absolute;
	left:0;
	right:0;
	bottom:0; /* flush with the section's bottom edge, past the padding-bottom */
	height:9px;
	background:transparent url('/media/stroke-hor-dark.svg') 0 0 repeat-x;
	background-size:auto 9px;
}
.has-grid .line
{
	display:block;
	height:9px;
	background:transparent url('/media/stroke-hor-dark.svg') 0 0 repeat-x;
	background-size:auto 9px;
}
section.item.invert
{
	color:var(--light);
}
section.item.invert::after,
.dark section.item::after,
.dark .has-grid .line
{
	background-image:url('/media/stroke-hor-light.svg');
}
section.item[data-bg]::before
{
	content:'';
	position:absolute;
	z-index:-1; /* behind the item content, above the body background */
	top:0;
	bottom:0;

	/* escape the page column: .page is left:0, so backing out its padding hits the window edge */
	left:calc(-1 * var(--page-padding));
	width:100vw;

	background-color:var(--section-bg,transparent);

	/* same clock as the body colour: renderItem sets --section-bg one frame late,
	   so the tint fades from transparent instead of arriving with the page */
	transition:background-color var(--page-color) ease 0s;
}
/* first section: pull the tint up over the page padding, so it starts at the top of the page */
section.item[data-bg]:first-of-type::before
{
	top:calc(-1 * var(--page-top));
}



p
{
	margin-left:100px;
	max-width:1010px;
}
p.intro,
.intro p
{
	margin-left:0;
	max-width:1110px;
	
	padding:0 var(--intro-padding);
	font-size:var(--type-intro-size);
	line-height:var(--type-intro-line);
	letter-spacing: var(--type-intro-spacing);
}
.intro p
{
	margin-left:25px;
}

p.tags:has(+ p.intro)
{
	margin-left:0;
}

.cms-inline-media 
{
	--slide-button:41px;
}
.slides .arrow
{
	display:none; /* hide until we decide on style */
}




.cms-inline-media .slides
{
	border-radius:4px;
}
.slides .arrow
{
	height:136px;
}
.slides .arrow.prev
{
	transform:translate(100%,-50%);
}
.slides .arrow.next
{
	transform:translateY(-50%);
	/* transform: translate(100%,-50%); */
}
.cms-inline-media:not(.page-width):not(.header)
{
	max-width:1110px;
}

.cms-inline-media.left,
.cms-inline-media.right	
{
	width:calc((100% - var(--grid-spacing)) / 2);
}
.cms-inline-media.left
{
	margin-right:var(--page-padding);
}
.cms-inline-media.right
{
	margin-left:var(--page-padding);
}
.cms-inline-media.right + *
{
  clear:none;
}
.cms-inline-media.left:not(.wrap-around) + *,
.cms-inline-media.right:not(.wrap-around) + *
{
	clear:both;
}

/* 
.cms-inline-media.left + .cms-inline-media.right + p.intro
{
	float:left;
	width:calc((100% - var(--grid-spacing)) / 2);
}
.cms-inline-media.left + .cms-inline-media.right + p.intro + p.intro
{
	float:right;
	width:calc((100% - var(--grid-spacing)) / 2);
}
 */
 
 .cms-inline-media .slides .slide
 {
 	transition-duration:.6s;
 }


.cms-footnote /* hide the * note-placeholder */
{
	display:inline-block;
	width:0;
	line-height:1;
	overflow:hidden;
}

aside
{
	float:right;
	padding-left:70px;

	width:310px;

	/* flex: no margin collapsing, so the note margin-top set in App.positionNotes lands exactly */
	display:flex;
	flex-direction:column;

	background:transparent url('/media/stroke-vert-dark.svg') 25px 0 repeat-y;
	background-size:9px;

	
}
.note
{
	font-family: var(--type-mono-font);
	font-size:var(--type-mono-size);
	line-height:var(--type-mono-line);
	letter-spacing: var(--type-mono-spacing);

}
body.dark aside
{
	background-image:url('/media/stroke-vert-light.svg');
}
aside .note
{
	/* border:1px dashed magenta; */

	padding-top:10px;
	margin-bottom:1em;
}
aside .note p
{
	margin-left:0;
}
aside .note p:first-child
{
	margin-top:0;
}

/* 
.cms-footnote[data-note]::after
{
	content:attr(data-note);
	position:absolute;
	right:0;
}
 */
/* 
aside::before
{
	content:url('/media/stroke-vertical.svg');
	position:absolute;
	left:0;
	height:10px;
}
 */



.grid,
.grid-row
{
	width:100%;
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;

	/* border:1px dashed rgba(250,0,0,.5); */
}

.grid-item
{
	/* default two-column grid */
	flex-basis:calc((100% - var(--grid-spacing)) / 2);
	
	text-decoration:none;
	margin-bottom:var(--grid-spacing);
	

	/* background-color:rgba(250,0,0,.1); */
}

.grid-item h3
{
}



.grid-item:hover h3
{
	mix-blend-mode: difference;
	color:var(--green);
}

.grid .grid-item .cms-inline-media
{
	aspect-ratio:3/2;
	margin-bottom:0;
}

.grid-item .cms-inline-media:not(:has(.slide)) /* should not happen, for development */
{
	background-color:rgba(255,255,255,.25);
	display:block;
}

.grid-item .cms-inline-media[data-caption]::after
{
	display:none;
}


.grid-item:nth-child(1) .slide,
.work .grid-item:nth-child(3) .slide
{
	transition-delay:.15s;
}
.grid-item:nth-child(2) .slide,
.work .grid-item:nth-child(4) .slide
{
	transition-delay:.30s;
}
.grid-item:nth-child(3) .slide
{
	transition-delay:.45s;
}
.grid-item:nth-child(4) .slide
{
	transition-delay:.60s;
}

/* media grid (within item) */

section.item .grid-item .slide
{
	transition-delay:0s;
}
section.item .grid-item:nth-child(2) .slide
{
	transition-delay:.15s;
}


/* work (2 column grid) */

/* 
.work p.intro
{
	margin-left:25px;
}
 */

/* public work (3 column grid) */

.public .grid-item
{	
	flex-basis:calc((100% - (2 * var(--small-grid-spacing))) / 3);
}

.work-item .header .slides
{
	aspect-ratio:2.5 !important;
}


/* responsive layouts */

@media (min-width:820px)
{
	header .menu.collapsed nav
	{
		width:510px !important;
	}
	#page-menu-arrow
	{
		display:none;
	}
}

@media (max-width:1170px)
{
	aside
	{
		width: 260px;
	}
}

@media (max-width:820px) /* single column, scrolling menu */
{
	header .logo
	{
  	margin-left: 0;
	}
	header .menu
	{
		max-width: calc(100% - 210px);
	}
/* 
	header nav::after
	{
		content:'';
		background:url('/media/arrow-right-dark.svg') no-repeat 0 0;
		background-size:30px;
		position:absolute;
		right:0;
		top:0;
		width:30px;
		height:120px;
		z-index:1;
	}
 */
	#page-menu-toggle
	{
		display:none;
	}
	.grid-item,
	.public .grid-item
	{
		flex-basis:100%;
	}	
	
	.cms-footnote
	{
		display:none;
	}
	
	.note
	{
		max-width:290px;
		padding:1em 0 1em 50px;
		
		background:transparent url('/media/stroke-vert-dark.svg') 5px 0 repeat-y;
		background-size:9px;
	}
	
	.note p
	{
		margin-left:0;
	}
	
	.note p:first-child
	{
		margin-top:0;
	}
	
/* 
	aside
	{
		width:0;
		overflow:hidden;
	}
 */
	
}

@media (max-width:600px)
{

	:root
	{
		--page-padding:20px;
		--page-top:150px;
		
		--spacing:20px;
		--spacing-double:40px;
		
		/* responsive type */
		
		--type-size:calc(30 / 600 * 100vw);
		--type-line:calc(42 / 30);

		--type-h1-size:calc(60 / 600 * 100vw);

		--type-h2-size:calc(60 / 600 * 100vw);

		--type-h3-size:calc(32 / 600 * 100vw);
		--type-h3-line:calc(38 / 32);

		--type-tag-size:calc(15 / 600 * 100vw);
		--type-tag-line:calc(20 / 15);

		--type-mono-size:calc(18 / 600 * 100vw);
		--type-mono-line:calc(24 / 16);

		--type-intro-size:calc(40 / 600 * 100vw);
		--type-intro-line:calc(50 / 40);
		
	}
	
	header
	{
		flex-wrap:wrap;
		mix-blend-mode: normal;
		
		padding-bottom:40px;
		
		backdrop-filter:blur(6px);
		
		-webkit-mask-image:linear-gradient(to bottom,black 0%,black 80%,transparent 100%);
		mask-image:linear-gradient(to bottom,black 0%,black 80%,transparent 100%);
	}
	header .logo
	{
		flex-basis:100%;
	}
	body:not(.dark) header
	{
		color:var(--dark);
	}
	body:not(.dark) header nav a.selected,
	body:not(.dark) header nav a:hover
	{
		color:var(--magenta);
	}
	
	header .menu
	{
		margin-top:var(--spacing);
		max-width:100%;
	}
	#page-menu-arrow
	{
		right:4px;
		bottom:25px;
	}
	
	p
	{
		margin-left:25px;
	}

}