:root
{
	--light:#fafafa;
	--dark:#282828;
	/* --accent:#3492DB; */
	--accent:#F21D73;
	--text:#320A4A;
	--white:white;
	
	--dimm:#afafaf;
	--alert:#ff2c30;
	
	--label-bg:rgba(254,246,246,.025);

	--blur-bg:rgba(203,198,185,.4);
	--button-hover:rgba(252,252,252,.5);
	--data-light:#fAfAfA;

	--page-width:1400px;
	--page-padding:25px;
	
	--spacing:15px;
	--spacing-double:30px;
	
	--default-font:sans-serif;
	--default-type:18px;
	--default-line:24px;

	--small-type:16px;
	--small-line:21px;

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

html
{
	height:100%;
	/* scroll-behavior: smooth; */
	scrollbar-gutter: stable;
	overscroll-behavior: none;
}
body
{
	margin:0;
	padding:0;
	height:100%;
	
	/* font-family:var(--default-font); */
	
	font-family: 'sofia-pro-variable', sans-serif;
	font-variation-settings: "slnt" 0;
	
	font-size:var(--default-type);
	line-height:var(--default-line);
	font-style:normal;

	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	
	background-color:black;

	color:var(--light);
}


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;
}
.nowrap
{
	white-space:nowrap;
}
a
{
	color:inherit;
}
.ellipsis
{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}


/* main layout */

#backdrop
{
	position:fixed;
	transition:filter .3s ease 0s;
	height:100lvh;
}
body.node-hover #backdrop
{
	filter:blur(6px);
	transition-duration:1s;
}

.page
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}


#graph
{
	position:fixed;
	/* backdrop-filter: blur(6px); */
	/* background:black url(/media/tmp.png) no-repeat 50% 50%; */
}
body.visual #graph
{
	opacity:.5;
}

body.graph-explore
{
	overflow:hidden;
}

body.graph-explore #visual
{
	display:none;
}

#visual .slide
{
	width:40%;
}




#menu
{
	position:fixed;
	left:10px;
	top:10px;
}
#menu a
{
	cursor:pointer;
}




/* 
.graph-ui > .label,
#content > .label
 */
.label
{
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: rgba(237,238,255,0.00);
	box-shadow: 1px 2px 5px 0 rgba(0,0,0,0.16);

 
	display: flex;

	
	min-height:42px !important;

	color:var(--white);
	font-size:25px;
	font-weight:380;
	line-height:36px;
	
	padding:0 17px;
	border-radius:11px;

	/* background:rgba(255,255,255,.5); */
	
	/* pointer-events: all !important; */
}



.label label
{
	pointer-events:none;
}

.label.start
{
	opacity:0;
}

#content a:has(.label)
{
	display:inline-block;
	text-decoration: none;
}
#content a .label
{
	/* display:inline-block; */

	background-color:var(--label-bg);
	background-color:rgba(254,246,246,.22);
	backdrop-filter:none;
	
	text-indent:0;
	/* text-shadow: 1px 2px 2px rgba(0,0,0,0.25); */
	color:var(--text);
}
#content a.content svg.expand
{
	transform:rotate(-45deg);
}
#content a svg.expand
{
	color:var(--white);
}
#content a:hover svg.expand
{
	color:var(--accent);
}
#content a svg.expand circle
{
	fill:var(--text);
}
#content a:hover svg.expand circle
{
	fill:var(--white);
}



.graph-ui .label
{
	background-color:var(--label-bg);
	
	/* background-color:rgba(237,238,255,.05); */
	/* text-shadow: 1px 2px 2px rgba(0,0,0,0.25); */
}

.graph-ui .label:not(.first,.expandable,.link)
{
	font-size:18px;
	line-height:26px;
	min-height:30px !important;
}


.graph-ui .label.expandable,
.graph-ui .label.first
{
	/* background-color:rgba(254,254,246,0.05); */
	/* background-color:rgba(123, 117, 137, .25); */
	
	text-shadow: 1px 2px 2px rgba(0,0,0,0.25);
	
	/* background-color:rgba(237,238,255,.2); */
	/* color:#E0ADCB; */
	/* background-color:rgba(245,188,244,.3); */

	/* text-shadow: 1px 2px 2px rgba(0,0,0,0.25); */
	
}
.graph-ui .label:not(.first,.expandable,.link)
{
	/* color:#F9CDCD; */
	/* color:#BEB8B8; */
	/* color:#BCBFF5; */
	color:rgba(245, 25, 114, 1);
	color:black;
	
	background-color:rgba(254,246,246,.35);
	
	/* text-shadow: 1px 2px 2px rgba(0,0,0,0.25); */
}
.graph-ui .label:not(.expandable) label
{
	/* opacity:.9; */
}



.label:has(.expand) label
{
	width:auto;
}

.label svg.expand
{
	width:34px;
	height:34px;
}
.graph-ui .label.hover-action svg.expand,
.graph-ui .label.expandable:not(.expanded).hover svg.expand
{
/* 
	color:#F519D1;
	color:#F51972;
	color:rgba(245,25,114);
 */
	color:var(--accent);
}
.graph-ui .label.hover-action svg.expand circle,
.graph-ui .label.expandable:not(.expanded).hover svg.expand circle
{
	fill:#ffffff;
}

.graph-ui .label.link label
{
	text-decoration: underline;
	text-decoration-thickness:1px;
	text-decoration-color:rgba(255,255,255,.4);
	text-underline-offset:4px;
}

.graph-ui .card
{
	width:280px;
	aspect-ratio: 16/10;

	/* background: rgba(237,238,255,.2); */
	box-shadow: 1px 2px 5px 0 rgba(0,0,0,0.16);

	border-radius:8px;

	overflow:hidden;
}

.graph-ui .card.portrait
{
	width:auto;
	height:180px;
}

.card-content
{
	width:100%;
	height:100%;
	
	/* box-shadow:inset 1px 2px 5px 0 rgba(0,0,0,.3); */
	
	
}

.card-content .media
{
	position:absolute;
	
	width:100%;
	transform-origin:50% 50%;
	
	z-index:-1;
	
	transition:all .2s ease 0s;
	
	
	
	
	
}

.card-screen
{
	position:absolute;
	inset:0;
	background-image: linear-gradient(171deg, rgba(0,61,109,0.43) 0%, rgba(5,52,89,0.53) 17%, rgba(0,37,66,0.19) 100%);
}
.card.hover .card-screen
{
	opacity:0;
}
.card.hover .media
{
	width:100%;
	transform:none !important;
	
}


.graph-controls .control
{
	min-height:30px !important;
	font-size:18px;
	line-height:26px;
}






#content
{
	position:fixed;
	
	/* background-color: rgba(242,242,242,.4); */
	/* padding-top:90vh; */
	padding:100vh 20px;
	
	
  /* backdrop-filter: blur(15px); */

  
  /* transition: backdrop-filter 2s ease 0s; */
  
  min-height:100%;
  height:auto;

	z-index:1000;
	

	
}

#content-label
{
	position:fixed;
	left:50%;
	top:0;


	pointer-events:all;
	
	text-shadow: 1px 2px 2px rgba(0,0,0,0.25);
	
	z-index:1100;
	
	cursor:pointer;

}
#content-label.close
{
	transform:translate(-50%,calc(50vh - 50%)) !important;
	transition:.2s var(--curve) 0s;
}

/* 
#content .label.content 
{
	transition:transform .4s var(--curve) 0s;
}
 */

#content-label svg.expand
{
	filter: drop-shadow(1px -1px 1px rgba(0,0,0,0.25)); /* negative y beacuse the SVG is rotated */
	
	transform:rotate(135deg);
	/* transition-delay: .5s; */
	/* transform:rotate(-45deg); */
	
	
}
#content-label.open svg.expand
{
	transform:rotate(-45deg);
}
#content-label:hover svg.expand
{
	color:var(--accent);
}
#content-label:hover svg.expand circle
{
	fill:#ffffff;
}



body.graph-explore #content,
body.visual #content
{
	pointer-events:none;
	-webkit-backdrop-filter:none;
	backdrop-filter:none;
	background-color:transparent;
	
	
}

#content .block
{

	border-radius: 18px;

	max-width:1050px;
	margin:auto;
	
	padding:15px 44px 30px 44px;
	
	font-size:22px;
	line-height:1.3;
	
	margin-bottom:50px;
	
	color:var(--text);

	background-color:rgba(254,246,246,.82);

}
#content .block.media-only
{
	padding:0;
	background-color:transparent;
	/* border:2px dashed magenta; */
}


#content .block.below
{
	z-index:-1;
}


#content .block + .media-only
{
	/* margin-top:-10px; */
	margin-bottom:20px;
	position:relative;
	z-index:1;
	
}

#content .block.media-only .cms-inline-media
{
	transform:scale(1.18);
	transform-origin:50% 50%;
	
	border-radius:12px;
	overflow:hidden;
	/* opacity:.8; */
	
	/* background-color:rgba(250,0,0,.5); */
	
}
#content .block.media-only .left,
#content .block.media-only .right
{
	width:50%;
}
#content .block.media-only .left
{
	transform-origin:105% 50%;
}
#content .block.media-only .right
{
	transform-origin:-5% 50%;
	z-index:2;
}
#content .block.media-only:not(:has(.left)) .right
{
	margin-bottom:0;
}

#content .block.media-only:has(.left + .right)
{
	display:flex;
	align-items: center;
}


#content h1
{
	font-family:'neue-haas-unica', sans-serif;
	font-size:44px;
	font-weight:700;
	line-height:1;
	
	margin-top:.6em;
	margin-bottom:.6em;
	/* margin-bottom:1em; */
	
	padding-bottom:12px;
	border-bottom:1px solid #320a4a;
}
#content h1 a.edit
{
	padding:0px 8px 1px 8px;
	border:1px solid var(--text);
	border-radius:8px;

	font-family: 'sofia-pro-variable', sans-serif;
	font-size:12px;
	line-height:1.2;
	font-weight:400;
	vertical-align:top;
	
	cursor:pointer;
	opacity:.15;
	
}
#content h1 a.edit:hover
{
	opacity:1;
}
#content h2
{
/* 
	display:inline-block;
	margin-bottom:0;
 */

	margin-left:25px;
	margin-right:30px;
	
	
	font-size:25px;
	font-weight:650;
	

/* 
	font-family:'neue-haas-unica', sans-serif;
	font-weight: 600;
 */
	
	padding-bottom:8px;
	border-bottom:1px solid var(--text);
}

#content p
{
	padding:0 30px 0 25px;
	text-indent:25px;
	
	line-height:1.55;
}
#content p a
{
	text-decoration-thickness:1px;
/* 
	text-decoration-color:rgba(242, 29, 115, .3);
	text-decoration-color:rgba(50, 10, 74, .3);
	text-decoration-color:rgba(242,29,115,.6);
 */
 	text-decoration-color: var(--text);
	text-underline-offset:3px;
	/* text-decoration-style: wavy; */
	transition:text-decoration-color 1s ease 0s;
}
#content p a:hover
{
	text-decoration-color:rgba(242,29,115,.6);
	transition-duration:.2s;
}
#content .meta
{
	font-size:15px;
	color:#F21D73;
	text-indent:0;
	font-weight:350;
	line-height:1.45;
}
#content .meta a
{
	text-decoration-color:rgba(242,29,115,.6);
}
#content h1 + .meta
{
	margin-top:-1em;
	padding:0;
}
#content h2 + .meta
{
	margin-top:-.8em;
}



#content .intro
{
	font-size:25px;
	font-weight:460;
	
	line-height:1.35;
}

#content blockquote
{
	margin:44px 75px;

	font-weight:300;
	font-size:28px;

	
	font-family:'neue-haas-unica', sans-serif;
	
}
#content blockquote p
{
	text-indent:0;
	padding:0;
	
	line-height:1.35;
}



/* media */

.cms-inline-media
{
	position:relative;
}
.cms-inline-media-thumb,
article .cms-inline-media:not(:has(.slide))
{
	display:none;
}

.cms-inline-media.left,
.cms-inline-media.right
{
	width:calc((100% - var(--margin))/2);
}
.cms-inline-media.left
{
	float:left;
	margin-right:var(--margin);
}
.cms-inline-media.right
{
	float:right;
}
.cms-inline-media.right + *
{
	clear:both;
}
.cms-inline-media
{
	margin-bottom:2em;
	--slides-scale:100%;
}
.cms-inline-media:not(.right)
{
	clear:left;
}
.cms-inline-media[data-caption]::after
{
	content:attr(data-caption);
	display:block;
	width:var(--slides-scale);
	margin:auto;

	font-size:12px;
	font-family: courier;
	min-height:24px;
}
.slides
{
	position:relative;
	margin:auto;
	/* width:100%; */
	max-height:var(--media-max-height);
	aspect-ratio: auto;
}
.slides .slide
{
	/* max-height:var(--media-max-height); */
	transition:opacity .6s ease 0s;
}
.slides .slide img
{
	margin:auto;
}
.slides .slide.single img
{
	width:100%;
}
.slides
{
	aspect-ratio:auto;
}
.slides .arrow
{
	position:sticky;
	top:50%;
	
/* 
	display:flex;
	align-items:center;
	z-index:auto;
 */
	
	text-align:center;
	padding:0;
	
	border-radius:50%;
	
	
	min-width:var(--slide-button);	
	height:var(--slide-button);

	cursor:pointer;
	
	color:var(--light);
/* 
	background-color:var(--light);
	color:var(--dark);
 */
}
.slides .arrow svg
{
	pointer-events:none;
}
.slides .arrow.prev
{
	right:calc(100% - 10px);
	transform:translate(100%,calc(var(--spacing) * -1));
}
.slides .arrow.prev svg
{
	/* transform:rotate(90deg); */
}
.slides .arrow.next
{
	right:10px;
	transform:translateY(calc(var(--spacing) * -1));
}
.slides .arrow.next svg
{
	transform:rotate(180deg);
}
.slides + .navigation
{
	display:none;
}
.slides + .navigation .dot
{
	border-radius:3px;
	background-color:var(--light);
}
.slides .slide .embed-wrapper
{
	/* width:100%; */
	max-width:100%;
	max-height:var(--media-max-height);
	
	overflow:hidden;
	flex-shrink:0;
	background-size:cover;
	background-position:center;
}
.slides .slide.single .embed-wrapper
{
	margin:auto;
	height:100%;
}
.slides .slide:not(.in-view)
{
	opacity:0;
}

.embed-wrapper > div
{
	padding:0;
	width:100%;
	height:100%;
}

.embed-wrapper iframe
{
	width:100%;
	height:100%;
  object-fit: cover;
}

.loop-tap-overlay
{
	position:absolute;
	inset:0;
	z-index:1;
}


/* responsive layouts */

@media (max-width:900px)
{
	html
	{
		scroll-behavior: smooth;
	}
	
	/* always blur background and show thumbs at full brightness */
	body.graph-explore #backdrop
	{
		filter:blur(6px);
	}
	.card-screen
	{
		opacity:0;
	}
	
	/* content scrolls natively */
	#content
	{
		position:absolute;
		max-width:100%;
		overflow-x:hidden;
		padding:100vh 12px;
	}
	
	#content .block
	{
		padding:12px 22px;
		margin-bottom:18px;
		
		will-change: transform;
	
	}
	
	#content p
	{
		padding:0 0 0 12px;
		text-indent:12px;

		/* hyphens: auto;	 */
		
		/* hyphenate-limit-chars: 8 4 3; */
		hyphenate-limit-chars: 7 3 2;
		-webkit-hyphenate-limit-before: 3;
	  -webkit-hyphenate-limit-after: 2;
	  
		hyphenate-limit-lines: 2;
		/* overflow-wrap: break-word; */
	}
	
	#content blockquote
	{
		margin:44px 0 44px 32px;
	}
	
	#content .block.media-only .cms-inline-media
	{
		transform:scale(1.06);

		margin-top:18px;
		margin-bottom:0px;
	}
	
	#content .block.media-only:has(.left + .right)
	{
		flex-wrap:wrap;
		margin-bottom:-20px;
	}
	#content .block.media-only .left,
	#content .block.media-only .right
	{
		width:100%;
		margin:0;
	}
	


}