:root
{
	--page-menu-bottom:12px;
	--dimm-transition:filter 1s ease 0s;
}

body
{
	overscroll-behavior-y:contain;
	overflow-x: hidden;
	
	background-color:var(--page-bg-tinted);
}

#head
{
	transition:
		margin var(--slide-in-fast),
		clip-path var(--slide-in-fast),
		transform var(--slide-in-fast);
	clip-path:circle(100% at 50% 50%);
}
#head .logo
{
	margin:0 5px -4px 5px;
}
#head:not(.full):not(.expanded):not(:hover)
{
	margin-left:-10px;
 	clip-path:circle(15px at 53% 50%);
}
#head.expanded
{
	transform:translateX(calc(-50vw + 50% + 40px));
}
#page-header .dev
{
	display:inline-block;
	position:absolute;
	top:0;
	transform:translateX(-68px);
	transition:transform var(--slide-in-fast);
}
#page-header .dev .label
{
	height:18px;
	font-size:12px;
	line-height:18px;
}

#head.full + .dev,
#head:hover + .dev
{
	transform:translateX(5px);
}
#head.expanded + .dev
{
	transform:translateX(calc(-50vw + 138px));
}

#page-header .dev > span:not(:empty)::before
{
	content:': ';
}
#page-header .dev > span > a
{
	color:var(--white);
}


#notify,
#stats
{
	position:absolute;
	top:40px;
	left:50%;
	transform:translateX(-50%);
	z-index:-1;
	transition:
		opacity .4s ease .4s,
		transform var(--slide-in-fast);
}
#stats:empty
{
	padding:0;
}
#page.show-info #stats 
{
	opacity:0;
	transition-delay:0s;
}
#notify.off,
#page:not(.view-graph) #stats
{
	transform:translate(-50%,-400%);
	/* visibility: hidden; */
}
#stats .label + .label
{
	margin-top:4px;
}
#stats
{
	display:flex;
	flex-direction: column;
	align-items: center;
}

#notify *
{
	pointer-events: none;
}
#loading.processing::after,
#notify.processing::after,
#reheat.processing:hover::after
{
	content:url(../shared/media/processing-dark.svg);
}

#loading
{
	position:fixed;
	left:40px;
	top:8px;
	transition:transform var(--slide-in-fast);
}
#loading.off
{
	transform:translateX(-200%);
}

.menu-toggle
{
	display:flex;
	cursor:pointer;
}
.menu-toggle .icon
{
	margin:0 4px 0 -8px;
}

/* context/login menu */

#menu
{
	position:absolute;
	right:12px;
	top:0;

	transform:none;
	transition:transform var(--slide-in);
	user-select:none;
	
	display:flex;
	justify-content:flex-start;
}
#menu .label
{
	box-shadow:var(--label-shadow);
}
#menu-toggle
{
	font-weight:500;
}

#menu a
{
	margin-right:8px;
}
#menu a:not(.institute).selected
{
	background-color:var(--accent);
}

#menu:not(.expanded)
{
	transform:translateX(calc(100% - 26px));
}
#menu.expanded #menu-toggle,
#menu.init #menu-toggle
{
	display:none;
}
#context
{
	margin:0 8px 0 -48px;
	transition:width var(--slide-in);
	white-space: nowrap;
	overflow:hidden;
	pointer-events:all;
}
#menu:not(.expanded):not(.init) #context
{
	width:48px !important;
}
#menu:not(.expanded) #context
{
	margin-right:0;
}
#menu.init,
#page-header.off #menu
{
	transform:translateX(120%);
}
#context span
{
	display:inline-block;
}
#context span.code
{
	margin-left:-12px; /* ignore padding, use full width */
	width:48px;
}
#context.expanded.active .code
{
	display:none;
}
#menu.expanded span.code
{
	margin-left:-48px !important;
	text-align:left;
}

#page-info
{
	visibility: inherit !important;
	overflow-x:hidden;
	overflow-y:auto;

	background-color:var(--lighter);
	color:var(--white);
	
	z-index:900;
	
	transition:opacity var(--slide-in-fast);
}
#page-info .block
{
	margin:23px auto;
	width:clamp(754px,70vw,1200px);
	
	min-height:calc(100% - 46px);

	border-radius:8px;
	
	transform:translateX(calc(70vw + 15vw));
	transition:transform var(--slide-in-fast);

	background-color:var(--view-bg);
	color:var(--view-text);

	font-size:36px;
	line-height:1.27;
	font-weight:100;
}
#page-info .block a:not(.label)
{
	color:inherit;
	color:var(--content-paragraph);
	/* opacity:.5; */
}
#page-info .block a:not(.label):hover
{
	opacity:1;
}
#page-info .block .medium-print
{
	font-size:.77em;
}
#page-info .block .small-print
{
	font-size:.55em;
}
#page-info .block .labels
{
	margin-top:10px;
	display:flex;
	flex-wrap: wrap;
}
#page-info .block .labels a
{
	margin:0 4px 4px 0;
	vertical-align:middle;
}
#page-info .block .labels a[href]
{
	box-shadow: var(--label-shadow);
}
#page-info:not(.active)
{
	transition-delay:.2s;
	/* transition-duration:.2s; */
}
#page-info.active .block
{
	transform:none;
	transition:transform var(--slide-in);
	transition-delay:.15s;
}
#page-info .page
{
	position:relative;
	/* width:80%; */
	padding:40px;
	height:auto;
	min-height:calc(100% + 1px); /* force overflow to prevent scrolling underneath */
}
#page-info .page img
{
	width:60%;
	margin:0 20%;
	border-radius:8px;
}

.page
{
	transition:opacity var(--slide-in);
}
#page > .page:not(.active)/* :not(#page-info) */
{
	opacity:0;
	pointer-events:none;	
}


/* collections menu */

#context:not(.expanded),
#context.active
{
	overflow:visible;
}
#context .labels
{
	left:auto;
	right:0;
	bottom:auto;
	top:30px;
	width:auto;
	height:auto;
	align-items: flex-end;
}
#context .labels .label
{
	margin:3px 0 0 0;
	box-shadow:none;
}
#context .labels .label:not(:hover):not(.active)
{
	filter:brightness(75%);
}

/* legend */

#legend
{
	position:fixed;
	left:8px;
	bottom:var(--page-menu-bottom);
	z-index:1000;
}
#legend-toggle .icon span
{
	position:absolute;
	width:5px;
	height:5px;
	border-radius:50%;
	transform:translate(-50%,-50%)
}
.page-menu .labels
{
	position:absolute;
	left:0;
	bottom:30px;
	overflow:hidden;
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	pointer-events:none;
}
#legend .labels
{
	width:calc(100vw - 20px); /* make sure labels are not cut off (on mobile) */
}
.page-menu:not(.active) .label
{
	transition-delay:0s !important;
}
.page-menu .labels .label
{
	pointer-events:all;
	margin-bottom:3px;
	transition:transform var(--slide-in-fast);
}
.page-menu.active .label
{
	transform:none !important;
	/* height:0 !important; */
}


/* view select menu */

#view-menu
{
	position:fixed;
	right:8px;
	bottom:var(--page-menu-bottom);
	/* z-index:1000; */
}
#view-menu .icon
{
	/* background-color:rgba(250,0,0,.1); */
	overflow:hidden;
	display:flex;
}
#view-menu .icon svg
{
	flex-shrink: 0;
	transition:margin var(--slide-in);
}
#view-toggle.view-timeline .icon svg:first-child
{
	margin-left:0 !important;
}
.view-grid #view-menu .icon svg:first-child
{
	margin-left:-100%;
}
#view-toggle.view-grid .icon svg:first-child
{
	margin-left:-100% !important;
}
.view-graph #view-menu .icon svg:first-child,
#view-toggle.view-graph .icon svg:first-child
{
	margin-left:-200%;
}
#view-menu .labels
{
	right:0;
	align-items: flex-end;
}
.view-timeline #view-menu .labels .label.timeline,
.view-grid #view-menu .labels .label.grid,
.view-graph #view-menu .labels .label.graph
{
	background-color:var(--light);
	color:var(--dark);
}


/* list */

#list-view
{
	padding:46px 40px 40px 40px;
}
#list-view .label
{
	margin: 0 4px 4px 0;
  max-width: 100%;
}


/* stream / timeline */

#page-timeline,
#stream-years
{
	position:fixed;
}

#stream .book
{
	position:relative;
	height:140vh;
}
.book.add
{
	height:0px;
	border:none;
}
.book.add .title
{
	opacity:0;
}
.book .notification
{
	position:absolute;
	left:40px;
	top:8px;
	transition:transform var(--slide-in-fast);
	z-index:10;
}
.book .notification.off
{
	transform:translateX(calc(-100% - 40px));
}
.book.no-scan
{
	height:200px;
}
.book:last-child
{
	/* height:100vh; */
}

#stream .about
{
	position:absolute;
	top:55px;
	left:15vw;
	width:70vw;
	height:calc(100vh - 110px);
	border-radius:8px;
	padding:20px 0 30px 0;
	padding-left:30vw;

	background-color:var(--view-bg);
	color:var(--view-text);
	letter-spacing:normal;

	
	font-size:var(--default-type);
	line-height:var(--default-line);
	
/* 
	--viewscale:920/720;
	font-family:suisseintl-book,sans-serif;
 
	
	font-size: calc(var(--default-type) * var(--viewscale));
	line-height: calc(var(--default-line) * var(--viewscale));
 */
 
	left: 40vw;
  padding-left: 8vw;
  width: 48vw;
  
  font-weight:200;

}
#stream .about article
{
	overflow:auto;
	height:100%;
	padding-right:30px;
}
#stream .about article p:empty
{
	display:none;
}
#stream .about article p:empty + p:not(:empty)
{
	margin-top:0;
}
.scan
{
	position:absolute;
	left:20px;
	top:20px;
	width:calc(100% - 40px);
	height:calc(100vh - 40px);
	display:flex;
	justify-content: center;
	align-items: center;
}
.is-archive .scan
{
	left:8vw;
	width:calc(48vw - 8vw - 20px);
	/* background-color:rgba(250,0,0,.1); */
}
.is-archive .scan img
{
	width:100%;
	height:auto;
	border-radius:8px;
	/* box-shadow: var(--label-shadow); */
	box-shadow: 0px 1px 1px 0px rgba(5,1,0,.15);
}
.is-archive .scan.no-cover
{
	width:85%;
	left:-17.5%;
}
.is-archive .scan.no-cover img
{
	width:100%;
}
.scan > div
{
	position: relative;
}
.scan img
{
	height:100%;
	max-height:100%;
}
.scan .title
{
	position:absolute;
	top:12vh;
	width:50vh;
	font-size:6vh;
	line-height:1.4;
	letter-spacing: -2px;
	color:var(--dark);
	
	word-break:break-word;
}
.book-info
{
	position:absolute;
	top:40px;
	left:40px;
	display:flex;
	flex-direction:column;
	align-items: flex-start;
	z-index:10;
}
.book-info .label
{
	margin:0 4px 4px 0;
	opacity:1;
	transition:opacity .2s ease 0s;
	
	box-shadow:var(--label-shadow);
}
.book-info .label:empty
{
	display:none;
}
.book-info .label.expand
{
	font-weight:300;
}
.book-info .label.expand::before
{
	content:'+';
}
.book-info .label.expand.is-expanded::before
{
	content:'-';
}
.book-info .title
{
	max-width:42vw;
}
.ellipsis
{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.book:not(.in-view) .label.blur,
.book:not(.in-view) .rel .label
{
	opacity:0;
	pointer-events:none;
}
.book .graph-explore
{
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	margin-bottom:calc(40vh + 42px);
	white-space: nowrap;
	
	box-shadow:var(--label-shadow);
}


#stream-years
{
	right:38px;
	top:70px;
	height:calc(100vh - 122px);
	
	/* background-color:rgba(250,0,0,.1); */
	
	display:flex;
	flex-direction: column;
	
	transition:var(--dimm-transition);
}
#stream-years.dimm
{
	filter:brightness(60%);
}
#stream-years .label:hover
{
	color:var(--white);
}
#stream-years .label.loaded
{
	padding-left:18px !important;
}
#stream-years .label.loaded::before
{
	content:'';
	position:absolute;
	background-color:var(--dark);
	width:6px;
	height:6px;
	border-radius:50%;
	left:8px;
	top:calc(50% - 3px);
}
#stream-years > .year
{
	padding:2px 0;
	text-align: right;
	transition:flex-basis .2s ease 0s;
}
#stream-years .active
{
	position:relative;
	flex-basis:100%;
	margin-bottom:32px;
}
#stream-years .year
{
	top:auto;
}
#stream-years .active .year
{
	position:absolute;
	right:0;
	top:100%;
}


/* grid view */

#page-grid,
#page-graph
{
	position:fixed;
	background-color:var(--page-bg-tinted);	
}
/* 
#page:not(.view-grid) #page-grid
{
	opacity:0;
	pointer-events:none;	
}
 */
#grid-zoomer,
#zoomer-nodes,
#scan-zoomer
{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	overflow:hidden;
}
#zoomer
{
	position:absolute;
	left:50%;
	top:50%;
}
#page-grid .book-info
{
	opacity:0;
	pointer-events:none !important;
	transition:opacity .2s ease 0s;
}
#page-grid .book-info.hover
{
	opacity:1;
	transition:none;
}

/* 
.is-touch #page-grid .label.blur
{
	background-color:rgba(5,1,0,.5);
	-webkit-backdrop-filter:none;
	backdrop-filter:none;
}
 */



#page-grid .graph-explore
{
	position:fixed;
	left:50%;
	bottom:100px;
	transform:translateX(-50%);
}
#page-grid .grid
{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:grid;
  justify-items:center;
  align-items:center;
}

#page-grid .grid-scan
{
	position:relative;
	width:100%;
	height:100%;
	background:transparent none no-repeat 50% 50%;
	background-size:contain;

	overflow:visible;
	pointer-events:none;

	transition:filter 1s ease 0s;
	
	font-size:50px;
}
#page-grid .grid-scan.active
{
	will-change:filter;
	
	/* filter:brightness(115%); */
	/* filter:drop-shadow(10px 10px 80px var(--dark)); */
	filter:brightness(115%) drop-shadow(10px 10px 80px var(--dark));
	z-index:1000 !important;

	transition:filter .3s ease 0s;
}
.is-touch #page-grid .grid-scan.active
{
	filter:none;
}
#page-grid .closeup .grid-scan
{
	/* will-change:auto; */
}
#page-grid .closeup .grid-scan.active
{
	filter:none;
}

.is-safari #page-grid .grid-scan.active.hd
{
	will-change:auto;
	filter:none;
}

.is-safari #page-grid .is-animating .grid-scan
{
	transition:none;
}

#page-grid .grid-scan.active img
{
 
/* 
	filter:drop-shadow(10px 10px 80px var(--dark));
	filter:brightness(115%);
 */
}
/* 
#page-grid .grid-scan.active::before
{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:red;
	z-index:-1;
	
}
 */
#page-grid #zoomer.hover .grid-scan:not(.active)
{
	/* filter:brightness(85%); */
	/* opacity:.8; */
	/* transition-delay:1s; */
}
#page-grid .grid-scan .hover
{
	position:absolute;
	cursor:pointer;
	/* border:1px solid red; */
}
#page-grid .grid-scan .graph-explore
{
	position:absolute;
	left:50%;
	top:50%;
	filter: brightness(85%);
	pointer-events:all;
}
/* 
#page-grid .grid-scan.sm .hover
{
	border:1px solid rgba(250,0,0,.5)
}
#page-grid .grid-scan.md .hover
{
	border:1px solid rgba(0,250,0,.5)
}
#page-grid .grid-scan.hd .hover
{
	border:1px solid rgba(0,0,250,.5)
}
 */




/* 
#page-grid .grid-scan.md .hover:after
{
	content:'md';
}
#page-grid .grid-scan.hd .hover:after
{
	content:'hd';
}
 */



#page-grid .grid-scan.active .hover
{
/* 
	background-color:rgba(255,255,255,.1);
	backdrop-filter: brightness(120%);
 */
}
#page.view-grid:not(.graph) .hover
{
	pointer-events:all;
}
#page-grid .grid .hover:hover
{
	/* background-color:rgba(250,0,0,.5); */
}
#zoomer-nodes /* non scaled nodes layer -> future use */
{
	pointer-events:none;
}
#zoomer-nodes .node
{
	position:absolute;
	background:transparent none no-repeat 50% 50%;
	background-size:contain;
}
#grid-controls,
.graph-controls,
#scan-controls
{
	position:fixed;
	right:4px;
	bottom:var(--page-menu-bottom);
	display:flex;
	transition:transform var(--slide-in-fast);
}
#page:not(.graph):not(.view-graph) .graph-controls,
#scan-controls:not(.active)
{
	transform:translateX(calc(100% + 4px));
}
#grid-controls,
#page-graph .graph-controls
{
	right:120px;
}
#page:not(.view-grid) #grid-controls,
#page:not(.view-graph) #graph-controls
{
	transform:translateX(calc(100% + 46px + 154px));
}

#grid-controls .control,
.graph-controls .control,
#scan-controls .control
{
	margin:0 4px;
}

/* search */

#page-search
{
	position:fixed;
	padding:46px 40px 40px 40px;
	pointer-events:none;
}

#search
{
	position:fixed;
	top:8px;
	width:30px;
	right:calc(48px + 30px + 8px + 8px);
	transition:
		border-radius .1s cubic-bezier(.23,.34,.18,1) .2s,
		width var(--slide-in-fast);
	cursor:pointer;
}
#search input
{
	position:absolute;
	display:none;
	left:8px;
	top:0;
	margin:0;
	width:calc(100% - 38px);
	background-color:var(--light);
}
#search svg
{
	position:absolute;
	top:6px;
	right:6px;
}
#search svg.close,
#search.active svg:not(.close)
{
	display:none;
}

#search.active
{
	width:200px;
	border-radius:8px;
	transition:
		border-radius .1s cubic-bezier(.23,.34,.18,1) 0s,
		width var(--slide-in-fast);
}
#search.active input,
#search.active .close
{
	display:block;
}
#page-search,
.admin-search-result
{
	display:flex;
	flex-wrap: wrap;
	align-content: flex-start;
}
#page-search .label
{
	margin:0 4px 4px 0;
	max-width:100%;
}
#page-search .label:not(.small)
{
	height:30px;
}

/* graph view */

.graph-controls
{
	z-index:1000;
}
#page-explore,
#page-search,
#page-publication,
#page-info
{
	position:fixed;
	visibility:hidden;
	pointer-events:none;

	background:rgba(5,1,0,.3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
#page-explore.active,
#page-graph.active,
#page-search.active,
#page-publication.active,
#page-info.active
{
	visibility:visible;
	pointer-events:all;
}

#page-explore
{
	z-index:900;
}



#page-graph:not(.d3) .d3,
#page-graph.d3 .graph-controls .label:not(.d3)
{
	display:none;
}
#d3-tooltip
{
	position:absolute;
  visibility: hidden; /* by default */
}


/* 
#page-graph > svg
{
	transition:opacity 1s ease 0s;
}
#page-graph > svg.hover
{
	opacity:.4;
}
 */
#page.graph #stream .label.blur,
#page-explore.zoom,
#page-graph.zoom,
#page.graph #page-search
{
	-webkit-backdrop-filter:none;
	backdrop-filter:none;
}

.graph-ui
{
	position:absolute;
	left:50%;
	top:50%;
	transform-origin:50% 50%; 
	z-index:1;
}

#graph-exit
{
	position:absolute;
	left:50%;
	bottom:12px;
	z-index:1000;
	transform:translateX(-50%);
	transition:transform var(--slide-in-fast);
}
#page:not(.graph) #graph-exit
{
	transform:translate(-50%,calc(100% + 12px));
}
#graph-exit .icon
{
	margin-top:3px;
}

.graph-ui > *
{
	z-index:1;
	position:absolute;
	left:0;
	top:0;
	/* transform-origin:50% 50%; */
	pointer-events:none;
	background-size:contain;
	
	/* transition:opacity 1s ease 0s; */
	transition:filter 1s ease 0s;
}
.graph-ui.simplify label
{
	visibility: hidden;
}
.graph-ui .collapse
{
	position:absolute;
	top:0;
	right:-30px;
	/* pointer-events:all; */
}
.graph-ui .active
{
	transition:none;
	/* background-color:rgba(250,0,0,.2); */
}

.graph-ui .label.active,
.graph-ui .graph-scan.active,
.graph-ui .graph-scan.keep-active
{
	z-index:200 !important;
}
.graph-ui .label.active.hover,
.graph-ui .label.keep-active
{
	z-index:300 !important;
	min-height:30px;
}

.graph-ui .label.object
{
	z-index:100;
}

.graph-ui .label label
{
	word-wrap:break-word;
}

/* 
#page-graph canvas
{
	position
}
 */
#page-explore > svg,
#page-graph > svg
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#page-explore svg rect,
#page-graph svg rect
{
	cursor: pointer;
}
.graph-ui.hover > *:not(.active)
{
	/* opacity:.5; */
	filter:brightness(60%);
}

#scan-zoom
{	
	z-index:1000;
}

.graph-scan
{
	/* background-color:rgba(250,0,0,.2) */
	border-radius:6px;
}

#scan-zoom .graph-scan
{
	position:absolute;
	display:flex;
	align-items: center;
	left:50%;
	top:50%;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:contain;
}

#scan-zoom .label.object,
#scan-zoom .label.event,
#scan-zoom .label.action,
#scan-controls .label.control
{
	text-shadow:none;
}
#scan-info
{
	transition:transform var(--slide-in-fast);
}
#scan-info:not(.active)
{
	transform:translateX(calc(-100% - 40px));
}
#scan-info .admin-move-scan
{
	cursor:pointer;
}
#scan-info .admin-move-scan.expanded
{
	color:var(--white);
}
#scan-info .admin-move-scan input
{
	display:none;
	margin:0 -11px 0 0;
	padding:0 6px;
	background-color:transparent;
	height:22px;
	width:120px;
	
	color:inherit;
	font-size:inherit;
	line-height:inherit;
}
#scan-info .admin-move-scan input::placeholder
{
	color:inherit;
	opacity:.5;
}
#scan-info .admin-move-scan.expanded input
{
	display:inline-block;
}
#scan-info .admin-search-result
{
	margin-top:-4px;
	padding-top:4px;
	background:transparent;
}
#scan-info .admin-search-result a
{
	/* font-family: inherit; */
}


@media (max-width:800px)
{
	#page-header,
	#legend,
	#view-menu
	{
		top:auto;
		bottom:52px;
	}
	.menu-toggle
	{
		border-radius:50%;
		width:30px;
	}
	#legend-toggle .icon
	{
		margin-left:-12px;
	}
	#view-menu,
	.menu-toggle > span
	{
		display:none;
	}


	/* use native scroll */	
	#page-timeline
	{
		position:absolute;
	}
	#stream
	{
		overflow:hidden;
		transform:none !important;
	}
	.book-info
	{
		position:fixed;
	}
	/* remove blur, kills performance on mobile */
	.book-info .label.blur
	{
		background-color:rgba(5,1,0,.5);
		-webkit-backdrop-filter:none;
		backdrop-filter:none;
	}
	
	#stream.is-archive .book .graph-explore
	{
		margin-bottom:calc(39vh);
	}
	
	
	#notify.off
	{
		transform:translate(-50%,400%);
	}

	.book-info,
	.book .notification,
	#loading,
	#legend
	{
		left:8px;
	}

	.book-info .title
	{
		max-width:calc(100vw - 20px);
	}
	.book-info .label:not(.title):not(.small)
	{
		height:24px;
		font-size:16px;
		line-height:24px;
	}
	
	.scan img
	{
		width:140vw;
		height:calc(3024/4032 * 140vw);
		max-height:auto;
	}
	.scan .title
	{
		top:26vh;
		width:60vw;
		font-size:4.2vh;
	}
	
	/* archive timeline */

	#stream .about
	{
		left:calc(8px + 15px);
		width:calc(100% - 46px);
		top:295px;
		height:calc(100vh - 300px - 38px);

		padding-left:20px;
		padding-top:60px;	
	}
	#stream .about article
	{
		padding-right:20px;
/* 
		overflow:auto;
		height:100%;
		padding-right:30px;
 */
	}
	
	.is-archive .scan
	{
		left:38px;
		width:calc(100% - 72px);
		/* background-color:rgba(250,0,0,.1); */
		
		align-items: flex-start;		
	}
	.is-archive .scan img
	{
		margin-top:35px;
		width:auto;
		height:290px;
	}

	/* offscreen years timeline */
		
	#stream-years
	{
		top:0px;
		right:0;
		padding-right:38px;
		padding-left:40px;
		
		
		padding-top:70px;
		/* padding:100px 38px 100px 8px;  */

		height: calc(100vh);
		overflow-y: auto;
		justify-content:center;
		
		display:block;
		
		transition:transform var(--slide-in);
	
		z-index:100;
	}
	
	#stream-years > .year
	{
		transition:transform var(--slide-in);
		transform-origin:0 0;
	}
	
	#stream-years.off
	{
		transform:translateX(106px);
	
	}
	
	#stream-years.off > .year.active
	{
		top:0;
		transform:translateY(30vh) rotate(90deg);	
		
	}
	#stream-years.off > .year:not(.active)
	{
		display:none;
	}
	
/* 
	#stream-years > .year:first-child
	{
		margin-top:70px;
	}
 */
	#stream-years > .year:last-child
	{
		margin-bottom: 70px;
	}
	
	#stream-years .active
	{
		flex-basis:auto;
		margin:0;
	}
	#stream-years .year
	{
		top:auto;
	}
	#stream-years .active .year
	{
		position:relative;
		top:auto;
		right:auto;
	}
	
	#menu
	{
		position:absolute;
		right:8px;
		top:0;
	
		/* transform:translateX(calc(100%)) rotate(90deg); */
		transform:rotate(90deg) translateX(calc(30px + 8px));
		transform-origin: 100% 0;

		transition:transform var(--slide-in);
	}
	#menu.init
	{
		transform:rotate(90deg) translateX(150%);
	}
	#menu a
	{
		margin-right:8px;
	}
/* 
	#menu a.selected
	{
		background-color:var(--green);
	}
 */
	#menu:not(.expanded)
	{
		transform:rotate(90deg) translateX(100%);
	}
	#menu-toggle + .label
	{
		margin-left:52px;
		transition:margin var(--slide-in);
	}
	#menu.expanded #menu-toggle + .label
	{
		margin-left:0px;
	}
	#menu-toggle span
	{
		display:block;
		transform:rotate(-90deg);
	}
	#head.expanded
	{
		/* transform:none; */
	}
	
	#page-info .block
	{
		width:calc(100% - 46px);
		font-size:28px;
		transform:translateX(calc(100% + 32px));
	}
	#page-info .page
	{
		padding:8px 28px 20px 20px;
	}
	#page-info .page img
	{
		width:100%;
		margin:0;
	}
	
	.graph-controls
	{
		display:none;
	}
}


/* development */

#dbg
{
	display:none;
	
	position:absolute;
	right:30px;
}
#dbg-events
{
	position:fixed;
	right:30px;
	top:50px;
	z-index:1000;
	transition:transform var(--slide-in-fast);
}
#dbg-events.off
{
	transform:translatex(150%);
}
#dbg-events .label
{
	display:block;
	margin-bottom:8px;	
}