/* ########################################################################## */
/* Common (non-meta) header framework */
/* ########################################################################## */

header#common_headerbase{
	/* Common header base element */
	background: url("./images/header_sill.png") repeat-x;
	height: 416px; margin-bottom: -110px;
	/* Grid is used as a shorthand for absolute-position-like behaviour */
	display: grid; grid-template-areas: 'elem';
	pointer-events: none;
	@media (max-width: 1100px) {
		background: none; height: 190px;
		margin-bottom: 0px;
	}
	/* Skybox */
	#sky {
		background-color: #0c0c5a;
		background-image: url("./images/header_sky2.webp"), linear-gradient(0, #ea73ff -8px, transparent 128px), url("./images/header_sky1.webp");
		background-repeat: no-repeat;
		background-position: calc(50% + 120px) 90%, center bottom, center center;
		background-size: auto 300px, auto, auto 500px;
		height: 245px; 
		grid-area: elem;
		z-index: -5;
		@media (max-width: 1100px) {
			height: 192px;
			background-size: auto 250px, auto, auto 500px;
		}
	}
	/* Logo + me */
	#logo{
		background-image: url("./images/header_logo.webp"), url("./images/header_aether.webp"), url("./images/header_sill.png");
		background-position: 96% 60%, 0 center, center top;
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-size: auto 80px, auto 100%, auto auto;
		width: 1080px; height: 100%; margin: auto;
		grid-area: elem; 
		z-index: 0;
		@media (max-width: 1100px) {
			background-image: url("./images/header_logo.webp");
			background-size: min(calc(100% - 16px), 607px) auto;
			background-position: calc(100% - 16px) calc(100% - 16px);
			@media (max-width: 844px) { background-position: center calc(100% - 16px); }
			width: 100%;
		}
	}

}

/* Mobile (the other kind) structure */
header#common_headerbase{
	/* Initial values */
	#mobile_l, #mobile_r{
		zoom: 50%; z-index: 5; position: absolute;
		/* Hanging thread */
		span{
			display: block; top: -4px; width: 12px; height: 432px; position: absolute;
			transform-origin: 50% 0%;
			background: url("./images/header_star_mt.webp") no-repeat center / 100% 100%;
			/* Hanging star */
			&, & > img, & > a{ animation-timing-function: steps(6) !important; }
			& > img, & > a{ left: -36px; bottom: -24px; position: absolute; }
		}
	}
	@media (max-width: 1100px) {
		#mobile_l, #mobile_r{ display: none; }	
	}
	/* Left mobile */
	#mobile_l{
		/* Loops */
		background: url("./images/header_star_ml.webp") top left no-repeat;
		width: 1597px; height: 183px;
		/* Hanging stars */
		& > :nth-child(1){
			left: 89px; height: 358px; animation: t1a 3.3s infinite; 
			& > img{ transform: rotate(30deg); animation: s1a 3.3s infinite; }
		}
		& > :nth-child(2){
			left: 573px; height: 448px; animation: t1a 3.6s infinite; 
			& > img{ left: -40px; transform: rotate(11deg); animation: s2a 3.6s infinite; }
		}
		& > :nth-child(3){
			left: 875px; width: 10px; height: 268px; animation: t1a 4.2s infinite; 
			& > img{ left: -40px; transform: rotate(-18deg); animation: s3a 4.2s infinite; }
		}
		& > :nth-child(4){
			left: 1360px; height: 370px; animation: t1a 5s infinite; 
			& > img{ transform: rotate(14deg); animation: s4a 5s infinite; }
		}
		@media (max-width: 1220px){ width: 1366px; & > :nth-child(4){ display: none; } }
		@media (1140px <= width <= 1280px){ & > :nth-child(3){ display: none; } }
	}
	/* Right mobile */
	#mobile_r{
		/* Loops */
		background: url("./images/header_star_mr.webp") top right no-repeat;
		width: 895px; height: 81px; right: 0;
		/* Hanging stars */
		& > :nth-child(1){
			left: 72px; height: 198px; animation: t5a 3.5s infinite; 
			& > img{ transform: rotate(-29deg); animation: s5a 3.5s infinite; }
		}
		& > :nth-child(2){
			right: 446px; height: 288px; animation: t1a 5s infinite; 
			& > a{ transform: rotate(-18deg); animation: s6a 5s infinite; pointer-events: auto;
				&:hover > img{ filter: drop-shadow(-5px 0px var(--secondary)) drop-shadow(6px 0px var(--secondary)) drop-shadow(0px -5px var(--secondary)) drop-shadow(0px 5px var(--secondary)); }
			}
		}
		& > :nth-child(3){
			right: 222px; height: 348px; animation: t1a 5.6s infinite; 
			& > img{ transform: rotate(-24deg); animation: s7a 5.6s infinite; }
		}
		@media (max-width: 1280px){ width: 814px; & > :nth-child(1){ display: none; } }
	}
}

@media (prefers-reduced-motion: no-preference) { 
	/* Thread sway */
	@keyframes "t1a" { 0% { transform: skew(-1deg); } 50% { transform: skew(1deg); } 100% { transform: skew(-1deg); } } 
	@keyframes "t5a" { 0% { transform: skew(-2deg); } 50% { transform: skew(2deg); } 100% { transform: skew(-2deg); } }
	/* Star warp */
	@keyframes "s1a" { 0% { transform: rotate(30deg) scaleX(1); } 50% { transform: rotate(31deg) scaleX(0.91); } 100% { transform: rotate(30deg) scaleX(1); } } 
	@keyframes "s2a" { 0% { transform: rotate(11deg); } 50% { transform: rotate(9deg); } 100% { transform: rotate(11deg); } } 
	/* Needs extra x-offset to look right */
	@keyframes "s3a" { 0% { transform: translateX(-0.8px) rotate(-18deg) scaleX(1); } 50% { transform: translateX(0.8px) rotate(-17.5deg) scaleX(0.82); } 100% { transform: translateX(-0.8px) rotate(-18deg) scaleX(1); } } 
	@keyframes "s4a" { 0% { transform: rotate(14deg)  scaleX(1); } 50% { transform: rotate(12deg) scaleX(0.86); } 100% { transform: rotate(14deg)  scaleX(1); } } 
	@keyframes "s5a" { 0% { transform: rotate(-29deg) scaleX(1); } 50% { transform: rotate(-28.6deg) scaleX(0.95); } 100% { transform: rotate(-29deg) scaleX(1); } } 
	/* Needs extra x-offset too */
	@keyframes "s6a" { 0% { transform: translateX(-1.3px) rotate(-18deg) scaleX(1); } 50% { transform: translateX(1.5px) rotate(-18deg) scaleX(0.82); } 100% { transform: translateX(-1.3px) rotate(-18deg) scaleX(1); } } 
	@keyframes "s7a" { 0% { transform: rotate(-24deg) scaleX(1); } 50% { transform: rotate(-21.5deg) scaleX(0.88); } 100% { transform: rotate(-24deg) scaleX(1); } }
}

/* ########################################################################## */
/* Page space - paper themes */
/* ########################################################################## */

/* Post baseline */
#page_space{	
	/* Paper types */
	@media (min-width: 1101px) { 
	&.artwork{
		/* Uses defaults */
	}
	&.wiki{
		--star_pos: -10px -160px;
		padding: 24px 76px;
		/* Ream paper hole-punch effect */
		&::before {
			/* I don't know why this SVG doesn't work lol but
			we're keeping it here for now */
			--holepunch: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="176"><circle cx="28" cy="48" r="16" fill="#5E3671"/><circle cx="190" cy="48" r="16" fill="#5E3671"/></svg>');
			content: ''; width: 100%; height: round(down, 100%, 176px);
			position: absolute; inset: 0;
			background-image: url("./images/bg_hole1.png"), url("./images/bg_hole1.png");
			background-position: -74px 24px, calc(100% + 74px) 24px;
			background-size: 110px, 110px;
			background-repeat: repeat-y;
		}
		&::after {
			content: ''; width: 100%; height: 100%;
			position: absolute; inset: 0;
			background-image: linear-gradient(90deg, transparent 0 46px, var(--lilac) 0 44px, transparent 47px), 
							  linear-gradient(270deg, transparent 0 46px, var(--lilac) 0 44px, transparent 47px);
			background-position: left 0, right 0;
		}
	}

	&.blog{
		--star_pos: -40px -100px;
		min-height: 830px;
		margin: 24px 0 38px 0; padding: 24px 48px 24px 76px;
		position: relative;
		filter: unset; box-shadow: 0 18px 8px -4px #3c1025;
		background-color: var(--white);
		background-image: linear-gradient(90deg, var(--grey) 0, transparent 128px), 
						  /* Pages */
						  linear-gradient(270deg, var(--grey) 0, var(--lilac) 5px, var(--grey) 6px, var(--lilac) 11px, var(--grey) 12px, var(--lilac) 17px, var(--grey) 18px, var(--lilac) 23px, transparent 24px),
						  /**/
						  linear-gradient(180deg, var(--grey2) 0, transparent 128px), 
						  linear-gradient(0deg, var(--grey2) 0, transparent 128px), 
						  url("./images/bg_paperstar.png"), var(--paper), var(--dummy);
		
		/* Organiser effect */
		&::before{
			content: ''; display: block; z-index: -1; top: -24px; right: -26px;
			position: absolute; width: 100%; height: 100%; padding: 24px 0 24px 490px;
			background: #5e1e3d url("./images/bg_leather1.webp"); 
			background-size: 180px;
			border-radius: 24px;
			border-image: url("./images/bg_organiser.png") 80 69 64 900 / 40px 35px 32px 450px / 0 round;
			filter: drop-shadow(0px 18px 16px var(--shadow));
			
			&::before{
				content: ''; display: block; z-index: -1; top: right: -26px;
				background: #0f0; width: 100%; height: 100%;
			}
		}
		&::after{
			content: ''; display: block; z-index: 1; top: 64px; left: -168px;
			position: absolute; width: 220px; height: round(down, 100%, 176px);
			background: url("./images/bg_rings1.png") repeat-y;
		}
		
	}
	&.miscpage{
		margin-top: 24px;
	}
	/**/
	}
	
	/* Mobile fix */
	@media (max-width: 1100px) { 
		&, & div#blog_flex{ border-radius: 0; padding: 24px; }
	}
}

/* Tag element */
.tag_banner{
	background: #611e3e; box-sizing: border-box;
	border: 1px solid #000; border-top-color: #e7a4c4; border-left: none;
	border-radius: 0 var(--radi1) var(--radi1) 0;
	width: min(600px, calc(100% - 140px)); height: 100px;
	margin: 0 140px 0 auto;
	@media (max-width: 844px) { 
		width: calc(100% - 35px); 
		margin: 0 0 0 auto;
	}
	filter: drop-shadow(0px 8px 4px var(--shadow));
	/* Tag tagginess */
	&::before{
		content: ''; display: block; flex: 0 0 auto;
		inset: -1px -199px; position: relative; width: 199px; height: 120px;
		background: url("./images/bg_tag.webp") no-repeat 0 0 / auto 107px;
	}
	/* Tag info */
	& .tag_data{
		inset: 0px 0 0 20px; position: absolute;
		align-content: center; width: calc(100% - 35px);
		h3{ padding: 0; }
		.meta{ 
			--lilac: #000;
			margin-top: 0; 
			a:hover{ text-decoration: underline; border-image-width: 24px; }
		}
	}
}

/* Tag collection */
#tag_space{
	padding-bottom: 18px;
	@media (max-width: 1100px) { padding: 0 16px 24px; }
}

/* ########################################################################## */
/* Article/post misc */
/* ########################################################################## */

.meta{
	margin-top: 16px; font-size: 90%; line-height: 24px;
	display: flex; flex-direction: column; gap: 2px;
	clear: both;
	.line{
		border-bottom: 1px dotted var(--lilac); display: flex; line-height: inherit;
		/* */
		label{
			display: flex; flex: 0 0 98px; align-items: center; justify-content: center; line-height: inherit;
			color: var(--white); background: var(--lilac);
			font-family: "Emoji", "Main" !important; text-transform: uppercase;
			margin-right: 8px;
			border-radius: var(--radi1) var(--radi1) 0 0;
		}
		/* Don't split names */
		a.tag{ white-space: nowrap; }
	}
}

/* ########################################################################## */
/* Blog pages */
/* ########################################################################## */

/* Full article (roll or single post) */
.is_full{
	background-image: url("./images/bg_paperstar2.png"), var(--dummy);
	background-position: 100% 100%;
	background-size: 15%;
	background-repeat: no-repeat;
}

.blog{
	/* Blog sidebar */
	#blog_right{
		width: 72px; align-content: end;
		position: absolute; top: 12px; right: -49px;
		padding: 0;
		writing-mode: vertical-rl;
		/* Hide in mobile */
		@media (max-width: 1100px) { display: none; }
	}
}

/* ########################################################################## */
/* Wiki elements */
/* ########################################################################## */

/* Infobox */
.infobox{
    background-image: url("./images/bg_paper2.jpg"), var(--dummy);
	border: 3px double var(--grey); border-radius: var(--radi1);
	margin: 0 0 12px 16px;
	float: right; 
	width: 34%; font-size: 14px;
	/* Cell */
	span{ display: inline-block; line-height: 26px; padding: 0 2px; }
	/* Rounded corners fix */
	> :first-child{ border-radius: 4px 4px 0 0; }
	/* Info region */
	.info{
		display: flex; gap: 2px; flex-direction: row; flex-wrap: wrap;
		/* Rounded corners fix */
		border-radius: 0 0 4px 4px; contain: paint;
	}
	/* Labels */
	.head, .label{ background: var(--lilac); color: var(--white); font-weight: bold; }
	.head{ display: block; flex-basis: 100%; text-align: center; }
	.label{ width: 35%; }
	/* Data */
	.data{
		width: 64%; 
		ul{ margin: 2px 0 4px 0; list-style-type: none; }
		li{ margin-left: 0; padding-left: 6px; padding-bottom: 0; line-height: 20px; }
	}
	a:has(img){ display: flex; box-sizing: border-box; border-image-source: url("images/linkstar.gif"); contain: initial; }
	a:has(img):hover{ border-image-width: 32px; border-image-outset: 0px; filter: saturate(115%); }
	.profileimg{
		display: block; margin: 2px auto;
		max-width: calc(100% - 4px); max-height: 440px;
	}
	/* Footerbox */
	&.full{
		width: 100%; float: none; clear: both; margin: 8px 0;
		/* Row */
		span.footerbox_row{ display: block; text-align: center; padding: 2px 8px; }
	}
	/* Mobile override */
	@media (max-width: 1100px) {
		a:has(img){ border-image-source: unset; }
	}
	@media (max-width: 844px) {
		margin: 0 0 12px 0 !important;
		float: unset !important; 
		width: 100% !important;
	}
}

/* Inline aside image */
.imagebox{ 
	max-width: 240px; display: flex; flex-direction: column; gap: 4px;
	margin-bottom: 12px;
	/* Image */
	a{ display: flex; box-sizing: border-box;  }
	img{ width: 100%; }

	/* Caption */
	.caption{ text-align: center; font-size: 14px; line-height: 16px; margin-bottom: 0; }
	/* Alignments */
	&.align_left{ float: left; margin-right: 16px; }
	&.align_right{ float: right; margin-left: 16px; }
	&.align_centre{ float: none; margin: auto; }
	&.big{ max-width: 300px; }
	/* Mobile override */
	@media (max-width: 844px) {
		float: unset !important; margin: 14px auto !important;
		flex-direction: row;
		max-width: 100% !important;
		.caption{ margin-left: 8px; text-align: unset; }
	}
}

/* Wiki-style leading quote indent */
.wiki_quote{
	margin: 0 0 10px 20px; 
	blockquote{ border-left: none; margin: 0; padding: 0; }
	blockquote p{ margin: 0; font-style: italic; 
		a{ font-synthesis: weight; }
	}
}

article{
	/* For sections requiring definite infobox float clear */
	section.clear{ clear: both; }
	
	/* Warning box */
	.spoiler_bar{
		padding: 14px;
		border: 2px dashed var(--lilac); border-radius: 0 var(--radi1) var(--radi1) 0;
		border-left: 14px solid var(--lilac);
		background-image: url("./images/bg_paper2.jpg"), var(--dummy);
		font-size: 97%;
		display: flow-root; font-style: italic;
		margin: 16px 0; 
		/* Make bold lead red */
		b{ color: #d00; font-synthesis: weight; }
		a{ font-synthesis: weight; }
		p:last-child{ margin-bottom: 0; }
	}
	
	/* Prevent wiki links from breaking at spaces,
	because they're usually names */
	a{ white-space: nowrap; }

	/* Invalid links (live) */
	.unwritten{
		color: inherit; white-space: nowrap; cursor: pointer;
	}
	/* Invalid links (admin-only) */
	.redlink{
		color: #d00; cursor: pointer; white-space: nowrap;
		:hover{ color: #d00; }
	}
}

/* ########################################################################## */
/* General post formatting */
/* ########################################################################## */

article {
	/* Artwork */
	.artfull{
		margin: 0 auto 12px auto;
		display: block; box-sizing: border-box;
		max-width: 100%;
	}
	/* Border consistency */
	a:has(.artfull), .pair a:has(img), .imagebox a:has(img){ border-image-source: unset; }
	.artfull, .pair img, .imagebox img{
		padding: 1px; border: 2px solid var(--grey);
		/* Anchor */
		a &{
			border-color: var(--link1);
			&:hover{ border-color: var(--link2); }
		}
	}
	.noborder{ border-color: transparent !important; }
	.noauto{ display: inline-block; margin: 0 12px; }

	/* B/W emoji */
	.ebw{ font-family: "Emoji"; }
	
	/* Avatars */
	.avatar{
		display: block; float: left; width: 106px; height: 106px;
		margin: 4px 14px 14px 0; padding: 1px;
		border: 2px solid var(--grey);
		pointer-events: none;
	}
	
	/* Code sections */
	pre.codeblock { 
		display: block; position: relative;
		background: #e6e6e6; border-radius: var(--radi1); 
		box-shadow: 0 -2px 0 var(--grey); border: 1px solid var(--grey);
		border-bottom: 3px solid #fff;
		line-height: 20px;
		white-space: pre; overflow: hidden;
		margin-bottom: 8px;
	}
	pre.codeblock code{ 
		background: repeating-linear-gradient(to bottom, transparent 0 20px, #fff6 20px 40px); background-attachment: local;
		display: block; padding: 0 8px; 
		max-height: calc(20px * 17); 
		overflow: auto;
	}
	
	/* Collapsible section button */
	summary{ cursor: pointer; font-weight: bold; }

	/* Common side-by-side image set */
	/* This *has* to be a separate style for images
	that are a different ratio, .set will *not* work
	with differently shaped images okay */
	.pair{
		margin: 12px auto; height: 400px; gap: 4px;
		display: flex; justify-content: center;
		& *{ 
			width: auto; height: 100%;
			border-image-source: unset; box-sizing: border-box; flex: 0 1; 
		}
		@media (max-width: 844px) { 
			width: 100%; height: unset; flex-direction: column;
			& *{ width: 100% !important; display: block; }
		}
	}
	
	/* Blog image caption */
	.bic{
		text-align: center; font-size: smaller;
	}
	
	/* Blog aside thought */
	.interruption{
		padding: 14px; margin-bottom: 14px;
		border: 2px dashed var(--lilac); border-radius: 0 var(--radi1) var(--radi1) 0;
		border-left: 14px solid var(--lilac);
		background-image: url("./images/bg_paper2.jpg"), var(--dummy);
		clear: left; contain: paint;
		p:last-child{ margin-bottom: 0; }
		.avatar{ margin: 0 14px 0 0; }
		&.small > .avatar{ width: 50px; height: auto; }
	}
}