@font-face { font-display:swap; font-family:'PT Sans'; font-style:normal; font-weight:400; src:url('/assets/immutable/fonts/pt-sans-v17-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-display:swap; font-family:'PT Sans'; font-style:normal; font-weight:700; src:url('/assets/immutable/fonts/pt-sans-v17-latin_latin-ext-700.woff2') format('woff2'); }
body { font-family:'PT Sans'; }

main { padding:1rem; }

/* ======================== project listing on main project page ======================== */

.tpl-projects-projects main { font-family:'PT Sans'; max-width:600px; margin:3rem auto; padding:1rem;
	h1 { margin-bottom:1rem; }
	.lead { font-size:1.2rem; }
	h2 { font-size:1.6rem; font-weight:normal; margin:2rem 0 1rem; }
}
.projectfilter { color:#777; font-size:80%; margin:1rem 0 1rem; display:flex;
	ul { display:flex; flex-wrap:wrap; justify-content:center; gap:.1rem .5rem; text-wrap:balance; }
		a { color:#777; padding:0 .25rem; }
		.current { background:#777;
			a { color:white; text-decoration:none; }
		}
}

.expander { border-top:1px solid #777;
	&:last-child { border-bottom:1px solid #777; }
	.expander-title { border:none; background:none; width:100%; position:relative; font-family:inherit; padding:.5rem 0 .5rem 3rem;
		svg { position:absolute; top:.1rem; left:.25rem; height:2.2rem; width:2.2rem; fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
		&[aria-expanded="true"] svg { transform:rotate(-180deg); }
		h3, p { font-size:1rem; text-align:left; font-weight:normal; }
		p { font-size:80%; padding-top:.25rem; color:#777; }
		img { height:2.6rem; width:auto; float:right; margin-left:.5rem; }
	}
	.expander-content { margin:.5rem 0 .75rem;
		& > * { max-width:475px; margin-left:auto; }
		p + p { margin-top:.5rem; }
		img { margin:1rem 0; }
		.whatif { font-style:italic; }
		.facts { font-size:.66rem; color:#777; text-align:right; margin-top:1rem; }
	}
}

.publist { text-indent:2.5rem hanging;
	p + p { margin-top:.5rem; }
	.access { font-size:.8rem; color:#777; }
	strong { font-weight:normal; font-style:italic; }
}


/* ======================== project card (playing cards metaphor) ========================

sgnet-projectcard { display:flex; flex-direction:column; justify-content:stretch; max-width:300px; width:300px; aspect-ratio:2/3; background:white; border-radius:1rem; padding:1rem; filter:drop-shadow(0 0 0.5em #ccc); }
.filtered sgnet-projectcard > * { opacity:.3; }
	sgnet-projectcard h2 { background:#6b6b6b; color:white; padding:.2rem .4rem .3rem; line-height:1.2; font-size:1rem; min-height:2.8rem; font-weight:normal; }
		sgnet-projectcard h2 a { color:white; text-decoration:none; }
	sgnet-projectcard .oneliner, sgnet-projectcard table { font-size:.8rem; background:#efefef; }
	sgnet-projectcard .oneliner { padding:.5rem; flex-grow:1; }
	sgnet-projectcard table { border-collapse:collapse; width:100%; }
		sgnet-projectcard .tr-links { text-align:right; }
			sgnet-projectcard td { border-top:1px solid #6d6d6d; padding:.2rem .5rem; vertical-align:top; }
			sgnet-projectcard td:first-child { width:1px; color:#6b6b6b; }
			sgnet-projectcard .tr-links a { color:#333; }
*/

/* ======================== projectfacts element on single project pages ======================== */

sgnet-projectfacts { font-family:'PT Sans','Arial',sans-serif; color:#333; font-size:1rem; display:block; max-width:100%; overflow:hidden; padding:1rem 0 1rem 1rem; }
	sgnet-projectfacts > div { display:block; max-width:500px; margin:2rem -3rem .5rem auto; background:white; border-radius:1rem; filter:drop-shadow(0 0 0.5em #262626); padding-bottom:1rem; rotate:5deg; }
		sgnet-projectfacts > div > * { margin:.5rem 1rem 0; }
		sgnet-projectfacts h2, sgnet-projectfacts .whatif { font-size:1rem; padding-top:.5rem; margin-bottom:0; line-height:1.2; padding-right:2rem; }
		sgnet-projectfacts dl { display:flex; flex-wrap:wrap; border-bottom:1px solid #333; font-size:.8rem; }
		sgnet-projectfacts dl:nth-child(2) { padding-top:1rem; }
			sgnet-projectfacts dd, dt { padding:.2rem .5rem; border:1px solid #333; border-bottom:none; flex-basis:75%; margin-top:0 !important; }
			sgnet-projectfacts dd { padding-right:2.5rem; }
			sgnet-projectfacts dt { font-weight:700; flex-basis:25%; border-right:none; }

/* ======================== baseline style for "unstyled" projects ======================== */

body.tpl-projects-unstyled { background-repeat:no-repeat; background-position:center center; background-attachment:fixed; background-size:cover; width:100%; }
.tpl-projects-unstyled .project { padding:0; }
	.tpl-projects-unstyled h1 { background:#f7f7f7; padding:1rem; max-width:50%; margin:50vh auto 0 0; }
	.tpl-projects-unstyled .lead { font-weight:bold; }
	.tpl-projects-unstyled .text { background:#f7f7f7; padding:2rem; max-width:572px; margin:10vh auto 0; margin-bottom:10vh; }
	.tpl-projects-unstyled sgnet-projectfacts { position:absolute; top:1rem; right:0; }

/* WIP
body.tpl-projects-unstyled { background-repeat:no-repeat; background-position:center center; background-attachment:fixed; background-size:cover; width:100%; }
.tpl-projects-unstyled .project { padding:0; }
	.tpl-projects-unstyled h1 { background:#f7f7f7; padding:1rem; max-width:50%; margin:50vh auto 0 0; }
	.tpl-projects-unstyled .text { background:#f7f7f7; padding:2rem; max-width:572px; margin:10vh auto 0; margin-bottom:10vh;
		--font-size:1rem;
		--font-size-h1:2rem;
		--font-size-h2:1.6rem;
		--font-size-h3:1.2rem;
		--font-size-lead:var(--font-size-h3);
		--font-size-pre:.75rem;
		--font-size-caption:.8rem;
		--font-size-mini:.66rem;
		--font-size-micro:.55rem;
		* + * { margin-top:1rem; }
		.card *,
		* + br,
		* + input,
		* + textarea,
		* + select,
		* + code { margin-top:0; }
		& > h2, & > h3, & > h4, & > h5, & > h6 { padding-top:1rem; }
		& > h1, & > .s-h1 { font-size:var(--font-size-h1); line-height:1.2; }
		& > h2, & > .s-h2 { font-size:var(--font-size-h2); }
		& > h3, & > .s-h3 { font-size:var(--font-size-h3); line-height:1.2; }
		& > h4, & > h5, & > h6, & > .s-h4, & > .s-h5, & > .s-h6 { font-size:var(--font-size); line-height:1.25; }
		.lead { font-size:var(--font-size-lead); margin-bottom:2rem; }
		a { text-decoration:underline; }
		ul, ol { position:relative; vertical-align:baseline; }
		ul { list-style:disc; }
		ol { list-style:decimal; }
		ul.nomargin, ol.nomargin { margin-bottom:1em; }
			li { padding-left:.5rem; margin-left:1.5rem; }
			ul.nomargin li, ol.nomargin li { margin-top:0; }
		table { width:100%; border-collapse:collapse; }
			caption { font-size:.6rem; line-height:1.2; caption-side:top; text-align:left; }
			th { font-weight:bold; }
				/* TODO: check why this is right aligned with no padding in the first place? some legacy content? *
				td { text-align:right; border-bottom:1px solid #ccc; padding:.1rem 0; }
				.table-text td { text-align:left; padding-left:.5rem; vertical-align:top; }
				td:first-child { text-align:left; }
				.table-text td:first-child { padding-left:0; }
		& > pre[class*="language-"] { margin-top:1rem; } /* prism.js override *
		.infobox { border:1px solid white; padding:1rem; }
			figure { }
				img { font-size:var(--font-size-caption); line-height:1.2; color:var(--color-imagebg); display:block; max-width:100%; width:100%; height:auto; }
				img.icon { width:auto; height:auto; }
				figcaption { font-size:var(--font-size-caption); line-height:1.2; }
    .infoinlay { display:block; font-size:var(--font-size-caption); line-height:1.2; margin:1rem 0 1rem 2rem; padding:.5rem 0 0; text-decoration:none; border-top:1px solid; border-image:linear-gradient(to right, rgba(0,0,0,0.5) 25%, transparent 25% 100%) 100% 1; }
    @media only screen and (min-width: 400px) {
    .infoinlay { float:right; min-width:40%; width:var(--margin-infoinlay); margin-right:calc(-2rem - var(--margin-infoinlay)); }
    }
      .infoinlay .title { display:block; margin-bottom:6px; font-weight:bold; }
        .infoinlay .title > span { display:block; margin-bottom:6px; font-weight:normal; }
      .infoinlay .more { display:block; margin-top:6px; text-align:right; }
		.infobox { border:1px solid white; padding:1rem; }
		sgnet-card { margin-bottom:0; }
	}
	.tpl-projects-unstyled sgnet-projectfacts { position:absolute; top:1rem; right:0; }
*/