@charset "UTF-8";

@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'), url('/assets/immutable/fonts/pt-sans-v17-latin_latin-ext-regular.woff') format('woff'), url('/assets/immutable/fonts/pt-sans-v17-latin_latin-ext-regular.ttf') format('truetype'), url('/assets/immutable/fonts/pt-sans-v17-latin_latin-ext-regular.svg#PTSans') format('svg'); }
@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'), url('/assets/immutable/fonts/pt-sans-v17-latin_latin-ext-700.woff') format('woff'), url('/assets/immutable/fonts/pt-sans-v17-latin_latin-ext-700.ttf') format('truetype'), url('/assets/immutable/fonts/pt-sans-v17-latin_latin-ext-700.svg#PTSans') format('svg'); }

/* ======================== VARIABLES ======================== */

:root {

	/*colors */
  --color-bg-highlight:rgb(255,211,32); /* #ffd320 */
  --color-bg:rgb(255,255,255);
  --color-bg-light:#f7f7f7;
  --color-bg-breadcrumb:#ddd;
  --color-bg-card:#fff;
	--color-imagebg:#444;
  --color-text:rgb(51,51,51); /* #333 */
  --color-text-breadcrumb: #616161;
  --color-text-light:#717171;
  --color-text-linkhover:#000;
  --color-text-linkfocus:#000;
	--color-status-draft:#d16464;
	--color-status-unlisted:#7e9abf;
	--color-status-listed:#a7bd68;
	--color-linkunderline:var(--color-text-light);
	--color-divider: #ddd;
	--color-divider-dark: #aaa;

	/* font sizes */
  --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;

  /* to evaluate */
  --width-textcolumn: 464px;
  --maxwidth-contentpage: 1200px;
  --maxwidth-textcolumnplusmargin: calc(((100% - var(--width-textcolumn)) / 2) + var(--width-textcolumn));
  --maxwidth-textbodymargin: calc(((100% - var(--width-textcolumn)) / 2) - 2rem);

}
.s-invert {
  --color-text:#f7f7f7;
  --color-text-light:#9b9b9b;
  --color-text-linkhover:#fff;
  --color-bg:rgb(51,51,51);
}


/* ======================== RESET ======================== */

*, *::before, *::after { margin:0; padding:0; border:none; box-sizing:border-box; outline:none; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display:block; }
::-moz-selection { background-color:var(--color-bg-highlight); color:var(--color-black); }
::selection { background-color:var(--color-bg-highlight); color:var(--color-black); }
html { /* fallback for IE: */ background:#fff; color:#333; background:var(--color-bg); color:var(--color-text); overflow-y:scroll; position:relative; min-height:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-tap-highlight-color:var(--color-tap-highlight); }
ol, ul { list-style:none; }
[hidden] { display:none; }


/* ======================== DEFAULTS ======================== */

html { height:100%; }
body { min-height:100%; display:flex; flex-direction:column; background:var(--color-bg-light); }
html, html button, html input, html select, html textarea { font:normal 400 18px "PT Sans"; line-height:1.4; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, pre { font-size:inherit; line-height:inherit; font-weight:normal; }

/* links */
a { text-decoration:underline; color:inherit; text-decoration-color:var(--color-linkunderline); }
a:hover, a:focus { color:var(--color-text-linkhover); text-decoration-color:currentColor; }
a:focus { color:var(--color-text-linkfocus); background-color:var(--color-bg-highlight); }

/* icon for external links */
a[href].external:after,
a[href]:not(:where([href^="#"], [href^="mailto:"], [href^="/"]:not([href^="//"]), [href*="//sebastiangreger.net"], [href*="//staging.sebastiangreger.net"], [href*="//sgnet.test"])):after { background-position:top .1em right .1em; background-repeat:no-repeat; background-size:.6em .6em; padding-right:.9em; background-image:url("data:image/svg+xml,%3csvg width='1792' height='1792' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1408 928v320q0 119-84.5 203.5T1120 1536H288q-119 0-203.5-84.5T0 1248V416q0-119 84.5-203.5T288 128h704q14 0 23 9t9 23v64q0 14-9 23t-23 9H288q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113V928q0-14 9-23t23-9h64q14 0 23 9t9 23zm384-864v512q0 26-19 45t-45 19-45-19l-176-176-652 652q-10 10-23 10t-23-10L695 983q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45 45-19h512q26 0 45 19t19 45z' fill='%23333'/%3e%3c/svg%3e"); content:''; }

/* details and anchor links */
a[href^="#"], details:not([open]) > summary { text-decoration:underline dashed; }
details > summary:focus { background:var(--color-bg-highlight); }

/* TODO: indicators for hreflang etc. */

/* a11y classes */
@media (prefers-reduced-motion: reduce) {
  *, *:after, *:before { animation: none !important; transition: none !important; }
}
.visuallyhidden { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px !important; overflow:hidden; padding:0 !important; position:absolute; width:1px !important; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto; }

/* headlines */
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; }
	h1 .parent, h2 .parent, h3 .parent, h4 .parent, h5 .parent, h6 .parent,
	h1 .secondary, h2 .secondary, h3 .secondary, h4 .secondary, h5 .secondary, h6 .secondary { color:var(--color-text-light); }
	h1 .secondary, h2 .secondary, h3 .secondary, h4 .secondary, h5 .secondary, h6 .secondary { display:block; }
	h1 .separator, h2 .separator, h3 .separator, h4 .separator, h5 .separator, h6 .separator { color:var(--color-divider); }
.lead { font-size:var(--font-size-lead); margin-bottom:2rem; }

/* media, embeds */
svg.icon { width:1em; height:1em; fill:currentColor; }
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; }

/* dividers */
hr { overflow:visible; padding:0; border:none; border-top:1px dashed var(--color-divider); color:var(--color-text); text-align:center; margin-top:2em; height:1.2em; }
hr.scissors::after { content:"\002702"; display:inline-block; position:relative; top:-0.75em; font-size:1.5em; color:var(--color-divider); background:var(--color-bg-light); }

/* expanders */
/* TODO: refactor this; direct copy from the old site */
.expander { cursor:pointer; }
h2.expander, h3.expander, .textbody h2.expander, .textbody h3.expander { padding:0; } /* overriding the lobotomized owl */
	.expander button { all:inherit; border:0; display:flex; justify-content:space-between; width:100%; padding:0.5em 0; }
		.expander button * { pointer-events:none; }
		.expander button:focus svg { background-color:var(--color-highlight); outline:6px solid var(--color-highlight); }
		.expander button svg { width:1rem; height:1rem; margin-left:0; margin-right:.5rem; margin-top:.6rem; }
		h3.expander button svg, .textbody h3.expander button svg { width:.8rem; height:.8rem; margin-left:0; margin-right:.5rem; margin-top:.3rem; }
		.expander button span { flex-grow:1; text-decoration:underline dashed; text-decoration-color:var(--color-text-light); margin-top:0; }
		.expander button:hover span { color:#000; text-decoration-color:var(--color-black); }
		.expander [aria-expanded="true"] .vert { display:none; }
			.expander [aria-expanded="true"] span { text-decoration:none; }
		.expander [aria-expanded] rect { fill:currentColor; }
		h3.expander, .textbody h3.expander { padding-left:1rem; }
		h3.expander ~ div, .textbody h3.expander ~ div { margin-left:2rem; }

/* blockquotes, code */
/* TODO: try out blockquote::before { content:open-quote; } ... + close-quote; lang attribute on blockquote */
blockquote { padding-left:1.2rem; margin-left:0; padding-right:0; position:relative; }
blockquote::before { content:open-quote; font-size:300%; line-height:1; float:left; margin-left:-1.2rem; }
blockquote::after { content:close-quote; right:0; bottom:0; font-size:1%; display:block; }
  blockquote p, blockquote ul, blockquote li { margin-right:1rem; padding-left:.5rem; }
code, pre { font-size:var(--font-size-pre); }

/* icons */
.statusicon { width:.8em; height:.8em; margin-left:.1em; padding-bottom:.25em; }
.statusicon * { stroke:currentColor; fill:currentColor; stroke-width:.005em; }
.statusicon-draft * { stroke:#d16464; fill:#d16464; }
.statusicon-unlisted * { stroke:#7e9abf; fill:#7e9abf; }
.statusicon-listed * { stroke:#a7bd68; fill:#a7bd68; }

.block { padding:2rem 1rem; max-width:var(--maxwidth-contentpage); margin-left:auto; margin-right:auto; }
.block-resource { display:flex; gap:2rem; justify-content:space-evenly; flex-wrap:wrap; }
	.block-resource-content { max-width:100%; flex-grow:1; flex-basis:60%; }
		.block-resource-content > * { max-width:564px; margin-left:auto; margin-right:auto; }
		.block-resource-content > h1, .block-resource-content > .lead { width:auto; max-width:unset; margin-bottom:2rem; }
		.block-resource-content .lastedited { font-size:var(--font-size-caption); color:var(--color-text-light); text-align:right; padding:1rem 0; }
	.block-resource-nav { flex-basis:310px; flex-grow:1; }
		.block-resource-nav .topicstree { max-width:100%; }

.topicstree {
	a { text-decoration-color:var(--color-linkunderline); display:inline-block; }
	.unlisted a { color:var(--color-text-light); text-decoration-color:var(--color-status-unlisted); }
	.unlisted:hover a { color:var(--color-text); }
	& > ul { border-bottom:1px solid var(--color-divider); }
	& > ul > li { border-top:1px solid var(--color-divider); }
		& > ul > li > a { font-size:1rem; display:block; padding:.8rem 0 1rem; }
		& > ul > li.current > a { padding-bottom:.25rem; }
		& > ul > li > ul { padding-bottom:1rem; padding-top:.25rem; }
		& > ul > li:not(.current) > ul { display:none; }
			ul ul li { display:inline; padding-bottom:.25rem; }
			a[aria-current="page"] { font-weight:bold; text-decoration:none; }
				ul ul li > a { margin-right:.5rem; font-size:var(--font-size-caption); line-height:1; }
				ul ul ul { padding-left:.75rem; margin:.3rem 0 .3rem .5rem; border-left:1px solid var(--color-divider); }
					ul ul ul li { }
						ul ul ul li a { display:inline; margin-right:.5rem; font-size:var(--font-size-caption); line-height:1; }
}

.text-private { color:var(--color-text-light); }

.text > * + * { margin-top:1rem; }
.text * + br,
.text * + input,
.text * + textarea,
.text * + select,
.text * + code { margin-top:0; }

.text > h2, .text > h3, .text > h4, .text > h5, .text > h6 { padding-top:1rem; }
.text a { text-decoration:underline; }
.text ul, .text ol { position:relative; vertical-align:baseline; }
.text ul { list-style:disc; }
.text ol { list-style:decimal; }
.text ul.nomargin, .text ol.nomargin { margin-bottom:1em; }
  .text li { padding-left:.5rem; margin-left:1.5rem; }
  .text ul.nomargin li, .text ol.nomargin li { margin-top:0; }
.text table { width:100%; border-collapse:collapse; }
  .text caption { font-size:.6rem; line-height:1.2; caption-side:top; text-align:left; }
  .text th { font-weight:bold; }
		/* TODO: check why this is right aligned with no padding in the first place? some legacy content? */
    .text td { text-align:right; border-bottom:1px solid #ccc; padding:.1rem 0; }
    .text .table-text td { text-align:left; padding-left:.5rem; vertical-align:top; }
    .text td:first-child { text-align:left; }
    .text .table-text td:first-child { padding-left:0; }
.text > pre[class*="language-"] { margin-top:1rem; } /* prism.js override */