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

	:root {
		--font-sans: "Source Sans 3", "Verdana", "Arial", sans-serif;
		--font-serif: "Roboto Slab", "Times New Roman", serif;
		--font-code: "Source Code Pro", "Courier New", monospace;

		--color-body: #333333;
		--color-fill: #FFFFFF;

		--color-primary-lighter: #DE8080;
		--color-primary-light: #C47171;
		--color-primary-neutral: #AA6262;
		--color-primary-dark: #9F5656;
		--color-primary-darker: #784545;

		--color-secondary-lighter: #F3F5F8;
		--color-secondary-light: #E7EBEF;
		--color-secondary-neutral: #C7D1D9;
		--color-secondary-dark: #AAB9C5;
		--color-secondary-darker: hsl(208, 19%, 62%);

		--color-ui-lighter: #9FA7AC;
		--color-ui-light: #848E95;
		--color-ui-neutral: #6A747B;
		--color-ui-dark: #535A60;
		--color-ui-darker: #3B4144;

		--color-link-primary: #AA6262;
		--color-link-secondary: #FFFFFF;
		--color-link-dim: #6A747B;

		--transition-fade: all 0.2s ease-in-out;
		}

/* ============================================	*/
/*	CONTAINERS									*/
/* ============================================	*/

	*, *::before, *::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		}

	article {
		background: var(--color-fill);
		padding: 0 0 100px 0;
		}

	body {
		background: var(--color-secondary-lighter) url('/images/background_main.svg') top center no-repeat;
		box-sizing: border-box;
		color: var(--color-body);
		font: 400 1.125rem/1.6 var(--font-sans);
		}

	html {
		filter: invert(0);
		scroll-behavior: smooth;
		}

/* ============================================ */
/*	TYPOGRAPHY									*/
/* ============================================ */

	a {
		color: var(--color-body);
		text-decoration: none;
		}

	audio {
		margin-bottom: 1.25rem;
		width: 100%;
		}
		
	blockquote {
		background: url('/images/icon_blockquote.svg') top left no-repeat;
		color: var(--color-ui-neutral);
		padding-left: 3rem;
		margin: 1.75rem 0 1.25rem 0;
		max-width: 80%;
		}
		
		blockquote.full {
		    max-width: 100%;
    		}

	caption {
		color: var(--color-ui-dark);
		font-size: 1rem;
		margin-bottom: 10px;
		text-align: left;
		}

	code {
		background: var(--color-secondary-lighter);
		border-radius: 0.1875rem;
		color: var(--color-ui-dark);
		font-family: var(--font-sans);
		font-size: 1rem;
		font-weight: 400;
		border: 2px solid var(--color-secondary-light);
		padding: 0 0.25rem;
		}

		pre {
			background: var(--color-secondary-lighter);
			border-radius: 0.1875rem;
			border: 2px solid var(--color-secondary-light);
			color: var(--color-ui-dark);
			font-family: var(--font-code);
			font-size: 0.875rem;
			line-height: 1.5;
			margin: 0 0 30px 0;
			max-width: 100%;
			overflow-x: auto;
			padding: 30px;
			white-space: pre;
			tab-size: 4;
			}
		
		pre code {
			background: none;
			border: 0;
			color: inherit;
			display: block;
			font-family: inherit;
			font-size: inherit;
			white-space: pre;
			}
		

	details {
		border: 0.125rem solid #F3F5F8;
		margin: 0.625rem 0 1.25rem 0;
		padding: 1.25rem 1.25rem 0 1.25rem;
		}

		summary {
			background: #F3F5F8 url('/images/icon_collapsed.svg') top 27px left 20px no-repeat;;
			cursor: pointer;
			font-weight: 600;
			list-style: none;
			margin: -1.25rem -1.25rem 0 -1.25rem;
			padding: 1.25rem 1.25rem 1.25rem 3.5rem;
			}

			details summary + * {
				margin-top: 1.25rem;
				}

		details[open] summary {
			background-image: url('/images/icon_expanded.svg');
			}
				
			details summary::marker {
				list-style: none; /* May not be required? */
				}

	figcaption {
		color: var(--color-ui-dark);
		font-size: 1rem;
		line-height: 1.5;
		margin: 20px 0 30px 0;
		text-align: center;
		}

		figcaption.left {
			text-align: left;
			}

		figcaption.top {
			margin: 0 0 20px 0;
			text-align: left;
			}

		figcaption blockquote {
			font-size: 1.125rem;
			text-align: left;
			}
			
		figure.block figcaption,
		figure.block figcaption p:last-of-type {
		    margin-bottom: 0;
		    }
		    
	h1 {
		font: 700 3rem/1.25 var(--font-serif);
		margin: 0 0 1.875rem 0;
		max-width: 40rem;
		}

	h2 {
		font: 700 2.5rem/1.25 var(--font-serif);
		padding: 3.75rem 0 1.125rem 0;
		}

		h2.small {
			font: 700 1rem/1.25 var(--font-sans);
			padding: 0 0 1.875rem 0;
			text-transform: uppercase;
			}

	h3 {
		color: var(--color-primary-neutral);
		font: 600 2rem/1.25 var(--font-sans);
		margin: 2.75rem 0 1rem 0;
		}

		h2 + h3 {
			margin-top: 0;
			}
			
	h4 {
		color: var(--color-body);
		font: 600 1.25rem/1.25 var(--font-sans);
		margin: 2.75rem 0 0.625rem 0;
		}

		h3 + h4 {
			margin-top: 0;
			}

	img {
		max-width: 100%;
		}

	input {
		border: 0;
		font: 400 1rem/1 var(--font-sans);
		line-height: 1.5;
		padding: 0.5rem;
		}
	
    	input[type="checkbox"] {
    		appearance: none;
    		background-color: var(--color-fill);
    		border: 0.125em solid var(--color-secondary-neutral);
    		border-radius: 5px;
    		height: 1.5rem;
    		margin: 0 0.625rem 0 0;
    		vertical-align: middle;
    		width: 1.5rem;
    		}
    		
    		input[type=checkbox]:checked {
    			background: var(--color-fill) url('/images/checkbox_on.svg') center no-repeat;
    			}
    			
    		input[type=checkbox]:hover,
    		input[type=checkbox]:focus {
    			border-color: var(--color-secondary-darker);
    		}
    		
    	input[type="radio"] {
    		appearance: none;
    		background-color: var(--color-fill);
    		border: 0.125em solid var(--color-secondary-neutral);
    		border-radius: 100%;
    		height: 1.5rem;
    		margin: 0 0.625rem 0 0;
    		vertical-align: middle;
    		width: 1.5rem;
    		}
    		
    		input[type=radio]:checked {
    			background: var(--color-fill) url('/images/radio_on.svg') center no-repeat;
    			}
    			
    		input[type=radio]:hover,
    		input[type=radio]:focus {
    			border-color: var(--color-secondary-darker);
    		}

	kbd {
		background: var(--color-secondary-lighter);
		border-radius: 0.1875rem;
		color: var(--color-ui-dark);
		font-family: var(--font-sans);
		font-size: 1rem;
		font-weight: 400;
		border: 2px solid var(--color-secondary-light);
		padding: 0.03125rem 0.25rem;
		}

	mark, .highlight {
		background-color: var(--color-secondary-neutral);
		color: var(--color-body);
		}

	p {
		line-height: 1.6;
		margin-bottom: 1.25rem;
		}
		
	select {
	    appearance: none;
	    background: transparent;
	    border: 0;
	    cursor: pointer;
	    display: inline-block;
	    font-family: var(--font-sans);
	    font-size: 1.125rem;
	    font-weight: 600;
    	}
    	
    	option {
    	    font-size: 0.925rem;
    	    font-weight: 400;
    	    }  
    	
    	fieldset { 
			border: 0;
			display: inline-block;
			}

	strong {
		font-weight: 600;
		}

	table {
		border-collapse: collapse;
		margin-bottom: 1.25rem;
		width: 100%;
		}

		td, th {
			border: 0.125rem solid var(--color-secondary-lighter);
			padding: 0.625rem;
			text-align: left;
			vertical-align: top;
			}

			th {
				font-weight: 600;
				}

			th[scope=col] {
				background-color: var(--color-secondary-lighter);
				}
				
	    .table-scroll {
            overflow-x: auto;
            max-width: 100%;
            }

	textarea {
		border: 0;
		font: 400 1rem/1 var(--font-sans);
		line-height: 1.5;
		padding: 0.5rem;
		}

	ul {
		margin: 0 0 1.5rem 40px;
		}

/* ============================================ */
/*	UTILITIES									*/
/* ============================================ */

	.block {
		background: var(--color-secondary-lighter);
		display: block;
		line-height: 1;
		margin: 0 auto 30px auto;
		padding: 30px;
		text-align: center;
		}
		
		.block.light {
			background: none;
			padding: 0;
			}

	.button {
		background: var(--color-primary-neutral) url('/images/icon_button.svg') right 1.25rem center no-repeat;
		color: var(--color-fill);
		font-weight: 600;
		line-height: 1;
		padding: 1.375rem 3.25rem 1.375rem 1.25rem;
		}

		.button:hover {
			background-color: var(--color-ui-dark);
			}

	.container {
		margin: 0 auto;
		max-width: 1260px;
		padding: 0 40px;
		}

	.hidden {
		color: var(--color-fill);
		left: -9999rem;
		opacity: 0;
		position: absolute;
		top: -9999rem;
		}

		.hidden:focus {
			background: var(--color-primary-neutral);
			color: var(--color-fill);
			display: block;
			font-weight: 600;
			left: 0;
			opacity: 1;
			padding: 1.25rem 2rem;
			position: fixed;
			text-align: center;
			top: 0;
			width: 100%;
			z-index: 1;
			}

	.off {
		display: none;
		}


	.notice, .alert, .warning {
		border: 0.25rem solid var(--color-secondary-lighter);
		margin: 0 0 1.25rem 0;
		padding: 20px 20px 20px 65px;
		}
		
		.notice > :first-child, .alert > :first-child, .warning > :first-child {
			margin-top: 0;
			}

		.notice > :last-child, .alert > :last-child, .warning > :last-child {
			margin-bottom: 0;
			}

		.alert { background: url('/images/background_tip.svg') top 26px left 30px no-repeat; }
		.notice { background: url('/images/background_notice.svg') top 26px left 30px no-repeat; }
		.warning { background: url('/images/background_warning.svg') top 26px left 18px no-repeat; }

/* ============================================ */
/*	TITLE BAR									*/
/* ============================================ */

	/* Logo */
	
		.bar {
			background: var(--color-ui-neutral);
			}

			.bar .container {
				display: flex;
				align-items: center;
				position: relative;
				}

				.bar a {
					color: var(--color-link-secondary);
					font-weight: 600;
					margin-left: 100px;
					text-decoration: none;
					}

					.bar a::before {
						background: var(--color-primary-neutral) url('/images/logo_header.svg') center no-repeat;
						border-left: 5px solid var(--color-secondary-lighter);
						border-right: 5px solid var(--color-secondary-lighter);
						content: '';
						height: 100px;
						margin-left: -105px;
						position: absolute;
						top: 0;
						transition: var(--transition-fade);
						width: 85px;
						}
	
						.bar a:hover::before,
						.bar a:active::before {
							background-color: var(--color-primary-darker);
							
						}

					.bar span::before {
						background: var(--color-ui-lighter);
						content: '';
						font-size: 0.75rem;
						margin: 0 10px;
						padding: 0 1px 0 2px;
						vertical-align: middle;
						}

	/* Theme */

		.theme {
			display: none; /* WIP */
			
			background-color: var(--color-ui-lighter);
			margin: 0 2px 0 auto;
			padding: 1rem;
			}

			.theme input {
				border: 0;
				margin: 0;
				cursor: pointer;
				}

				.theme input { background: url(/images/theme_dark.svg) no-repeat; }
				.dark .theme input { background: url(/images/theme_dark.svg) no-repeat; }
	

	/* Search */

		search {
			margin-left: auto; /* Remove when activating theme switcher */
			position: relative;
			text-align: right;
			}

			.search input {
				background: var(--color-ui-lighter);
				color: var(--color-body);
				line-height: 1.5;
				outline-offset: -2px;
				padding: 1.125rem 80px 1.125rem 1.125rem;
				width: 460px;
				}

			.search button {
				background: var(--color-ui-lighter) url('/images/icon_search.svg') center no-repeat;
				border: 2px;
				border-radius: 20px;
				cursor: pointer;
				font-size: 0;
				height: 40px;
				position: absolute;
				right: 20px;
				top: 50%;
				transform: translateY(-50%);
				transition: var(--transition-fade);
				width: 40px;
				}

				.search button:hover,
				.search button:focus {
					background-color: var(--color-ui-light);
					}

/* ============================================ */
/*	BANNER										*/
/* ============================================ */

	.banner {
		margin-top: 100px;
		}

		.subtitle {
			font-size: 1.25rem;
			margin: 0 0 60px 0;
			max-width: 40rem;
			}

/* ============================================ */
/*	HOME PAGE									*/
/* ============================================ */

	.home #contents .container {
		display: block;
		}

	/* Recent publications */

		.recent {
			display: flex;
			flex-wrap: wrap;
			gap: 1.25rem;
			padding-bottom: 60px;
			}

			.recent article {
				background: var(--color-fill) url('/images/icon_fold.svg') right top no-repeat;
				clip-path: polygon(0 0, calc(100% - 1.875rem) 0, 100% 1.875rem, 100% 100%, 0% 100%);
				min-width: 380px;
				padding: 1.875rem;
				flex-basis: calc(33.3% - 1.25rem);
				flex-grow: 1;
				z-index: 1;
								}

				.recent article a {
					color: var(--color-text);
					display: flex;
					flex-direction: column;
					height: 100%;
					outline-offset: 28px;
					text-decoration: none;
					}

					.recent article .button {
						margin: auto 0 0 0;
						transition: var(--transition-fade);
						}

						.recent article:hover .button {
							background-color: var(--color-primary-darker);
							}

					.recent article h3 {
						color: var(--color-body);
						font: 700 1.5rem/1.25 var(--font-serif);
						margin: 0 0 1.25rem 0;
						}

					.recent article p:nth-last-child(2) {
						padding-bottom: 3.75rem;
						}

					.recent article time {
						color: var(--color-ui-neutral);
						font-weight: 600;
						}

			.recent h2 {
				padding: 2.5rem 0 0 0;
				width: 100%;
				}

	/* Filter */
	    
	    .filters {
	        display: grid;
	        grid-template-columns: 50% 50%;
	        }
	       
	       .filters fieldset {
	            border: 0;
	            display: inline;
	            margin-top: -20px;
	            text-align: right;
	            }

	/* All publications */

		.publications {
			color: var(--color-ui-neutral);
			}
			
			.publications a {
				color: var(--color-body);
				display: block;
				outline-offset: 0.625rem;
				text-decoration: none;
				}
				
				.publications a:hover {
					color: var(--color-primary-darker);
					}
				
				.publications tr:first-of-type th {
				    background-color: transparent;
				    border: 0;
    				}

				.publications td {
					border: 2px solid var(--color-secondary-lighter);
					border-left: 0;
					border-right: 0;
					padding: 1.25rem;
					}

					.publications td:first-of-type {
						background: url('/images/icon_publication.svg') top 24px left no-repeat;
						font-weight: 500;
        				max-width: 40rem;
        				margin: 0 0 0 0;
						padding-left: 35px;
						}

					.publications td:last-of-type,
					.publications th:last-of-type {
						padding-right: 0;
						}

					.publications button {
						background: none;
						border: 0;
						color: var(--color-body);
						cursor: pointer;
						font: 600 1.125rem/1.2 var(--font-sans);
						padding-right: 20px;
						}

				.publications th {
				    padding: 1.25rem;
	    			}
					
					.publications th:first-of-type {
						padding-left: 0;
						}

						.publications th button {
							outline-offset: 0.625rem;
							}

						.publications th[aria-sort="ascending"] button {
							background: url('/images/icon_table_ascending.svg') right no-repeat;
							}

						.publications th[aria-sort="descending"] button {
							background: url('/images/icon_table_descending.svg') right no-repeat;
							}

							.publications th[aria-sort="none"] button:focus,
							.publications th[aria-sort="none"] button:hover {
								background: url('/images/icon_table_none.svg') right no-repeat;
								}

/* ============================================ */
/*	PUBLICATION PAGE							*/
/* ============================================ */

	/* Container */

		#contents .container {
			padding-top: 60px;
			display: flex;
			gap: 100px;
			}

		
	/* Publication date */
	
	   .published {
            background: var(--color-fill);
            border-bottom: 2px solid var(--color-secondary-light);
            padding: 20px 0;
            }
            
            .published ul {
                background: url('/images/icon_time.svg') left no-repeat;
                display: flex;
                list-style-type: none;
                margin: 0;
                }
                
                .published li {
                    padding: 0 20px 0 40px;
                    }

	/* Scroll indicator (Disabled) */

		.scroll { visibility: hidden; }


	/* Table of contents */
	
		.toc {
			align-self: flex-start;
			min-width: 340px;
			position: sticky;
			top: 30px;
			width: 340px;
			}
		
		.toc ol {
			list-style-type: none;
			max-height: calc(100vh - 6.75rem);
			overflow: auto;
			}

			.toc li {
				border-left: 2px solid var(--color-secondary-light);
				padding: 10px 30px;
				}


		.toc a {
			border-left: 0;
			color: var(--color-link-dim);
			display: block;
			text-decoration: none;
			}
				.toc li.active {
					border-left: 4px solid var(--color-primary-neutral);
					margin-left: 0px;
					}
					
			.toc li:last-of-type a { margin-bottom: 0; }

			.toc li.active a {
				color: var(--color-body);
				font-weight: 600;
				margin-left: -2px; 
				}

			.toc a:hover,
			.toc a:focus {
				color: var(--color-body);
				}
				
				.toc a.hidden:focus { color: var(--color-fill); }

	/* Article */

	.article {
		flex: 1 1 0;
		min-width: 0;
		}

		.article h2:first-of-type {
			padding-top: 0;
			}

			.article a {
				color: var(--color-link-primary);
				text-decoration: underline;
				}
				
				.article a:hover,
				.article a:focus {
					color: var(--color-body);
					}

		.article ol {
			counter-reset: numbered;
			list-style-type: none;
			margin-bottom: 1.25rem;
			margin-left: 1.25rem;
			}

			.article ol li {
				counter-increment: numbered;
				margin: 0 0 15px 0;
				padding-left: 2.25rem;
				position: relative;
				}

				.article ol li::before {
					color: var(--color-primary-neutral);
					content: counter(numbered, decimal-leading-zero) "." "";
					font-weight: 600;
					position: absolute;
					left: 0;
					}

			.article ol .code,
			.article ol .block,
			.article .alert {
				margin: 15px 0 1.25rem 0;
				}

			.article ol.steps {
				margin: 0 0 1.25rem 0;
				}

				.article ol.steps li {
					background: url('/images/icon_breadcrumbs.svg') left no-repeat;
					color: var(--color-ui-neutral);
					display: inline;
					margin-right: 8px;
					padding-left: 20px;
					counter-increment: none;
					}

					.article ol.steps li::before {
						content: none;
						}

					.article ol.steps li:first-of-type {
						background: none;
						padding: 0;
						}

		.article ul {
			list-style-type: none;
			margin-left: 1.25rem;
			}

			.article ul li {
				margin: 0 0 15px 0;
				padding-left: 2.25rem;
				position: relative;
				}

				.article ul li::before {
					color: var(--color-primary-neutral);
					content: "■";
					font-weight: 600;
					position: absolute;
					left: 10px;
					}

			.article ul.indent {
				margin-left: 0rem;
				}

				.article ul.indent li {
					padding-left: 0;
					}

					.article ul.indent li::before {
						display: none;
						}


			.article ul.check {
					list-style-type: none;
					}
			
					.article ul.check li::before {
						content: url(/images/icon_check.svg);
						position: absolute;
						left: 10px;
						}

    /* See also */

	.resources {
		border-top: 2px solid var(--color-secondary-lighter);
		list-style-type: none;
		margin: 60px 0 0 0;
		padding: 30px 0 0 0;
		}

		.resources ul {
			margin-left: 0;
			}

			.resources ul li {
				padding: 0;
				}

				.resources ul li::before {
					display: none;
					}

		.resources h3 {
			color: var(--color-body);
			font-family: var(--font-serif);
			font-size: 1.25rem;
			line-height: 1.5;
			margin: 0;
			padding-bottom: 10px;
			}

		.resources a {
			background: var(--color-secondary-lighter);
			border-left: 5px solid var(--color-secondary-lighter);
			color: var(--color-body);
			display: block;
			padding: 30px 30px 30px 25px;
			text-decoration: none;
			transition: var(--transition-fade);
			}

			.resources a:hover {
				border-left-color: var(--color-link-primary);
				}

		.resources p {
			background: url('/images/icon_link.svg') left no-repeat;
			color: var(--color-ui-dark);
			margin-bottom: 0;
			padding-left: 30px;
			}

	/* Author & Comments */

		.author {
			background: var(--color-secondary-lighter);
			}
			
			.author a {
			    color: var(--color-ui-dark);
			    text-decoration: underline;
    			}

		.author .container {
			background: url('/images/background_author.svg') right bottom no-repeat;
			padding-bottom: 80px;
			padding-top: 80px;
			}

			.author p {
				margin: 0 0 1.25rem 0;
				max-width: 600px;
				}

			.author .button {
				display: block;
				margin-top: 1.875rem;
				max-width: 18.75rem;
				}

			.author h2 {
				padding-top: 0;
				}
				
		.giscus {
		    margin: 20px 0 0 0;
		    max-width: 700px;
	    	}
	    	
	    	#total-comment-count {
	    	    background: url('/images/icon_comment.svg') left 4px no-repeat;
	    	    color: var(--color-body);
	    	    font-weight: 500;
	    	    padding-left: 40px;
    	    	}

/* ============================================ */
/*	FOOTER										*/
/* ============================================ */

	footer {
		background: var(--color-ui-neutral);
		}

		footer .container {
			background: url('/images/logo_footer.svg') left 40px center no-repeat;
			padding-top: 25px;
			padding-bottom: 25px;
			text-align: right;
			}

		footer a {
			border-bottom: 2px solid var(--color-ui-neutral);
			color: var(--color-fill);
			font-weight: 600;
			margin-left: 30px;
			text-decoration: none;
			transition: var(--transition-fade);
			}

			footer a:hover {
				border-bottom: 4px solid var(--color-ui-light);
				}

/* ============================================ */
/*	DORK MODE (WIP - SLOPPY)					*/
/* ============================================ */
    
	:root.dark {
		--color-body: #E0E0E0;
		--color-fill: #1E1E1E;
		--color-primary-lighter: #F2A0A0;
		--color-primary-light: #E58383;
		--color-primary-neutral: #D66A6A;
		--color-primary-dark: #B35B5B;
		--color-primary-darker: #AE5656;
		--color-secondary-lighter: #161616;
		--color-secondary-light: #1F1F1F;
		--color-secondary-neutral: #2A2A2A;
		--color-secondary-dark: #333333;
		--color-secondary-darker: #424242; /* #3D3D3D; */
		--color-ui-lighter: #787878;
		--color-ui-light: #6E6E6E;
		--color-ui-neutral: #646464;
		--color-ui-dark: #565656;
		--color-ui-darker: #4A4A4A;
		--color-link-primary: #AE5656;
		--color-link-secondary: #FFFFFF;
		--color-link-dim: #AAAAAA;
		}
    
    	html.dark body { background-color: var(--color-secondary-dark); background-image: none;  }
        html.dark code { background-color: var(--color-secondary-dark); color: var(--color-link-dim); }
    
        html.dark td { border-color: var(--color-secondary-dark); }
        html.dark th[scope="col"] { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); }
    
        html.dark .alert { border-color: var(--color-secondary-dark); }
        html.dark .block { background-color: var(--color-secondary-dark); }
        html.dark .button { background-color: var(--color-primary-darker); color: var(--color-body); }
    
    	html.dark .bar { background-color: var(--color-secondary-darker); }
    	html.dark .bar a::before { background-color: var(--color-primary-darker); border-color: var(--color-secondary-dark); }
    	html.dark .search input { background-color: var(--color-ui-darker); }
    	html.dark .search button { background-color: var(--color-ui-dark); }
    	html.dark .search button:hover { background-color: var(--color-secondary-neutral); }
    
        html.dark .resources a { background-color: var(--color-secondary-dark); border-color: var(--color-link-dim); }
        html.dark .resources a:hover { border-color: var(--color-primary-lighter); }
        html.dark .resources p { color: var(--color-link-dim); }
    
    	html.dark .recent article { background-color: var(--color-secondary-neutral); background-image: url('/images/icon_fold_dark.svg'); }
    	html.dark .recent article time { color: var(--color-link-dim); }
    	
    	html.dark .publications { color: var(--color-link-dim); }
    	html.dark .publications td { border-color: var(--color-secondary-neutral); }
    	html.dark .publications a:hover { color: var(--color-primary-ligher); }
    	
    	html.dark .published { border-color: var(--color-secondary-dark); }
    	
    	html.dark .author { background-color: var(--color-secondary-dark); }
    	html.dark .author .container { background-image: none; }
    	html.dark .author a { color: var(--color-link-dim); }
    	
    	html.dark .toc li { border-color: var(--color-secondary-dark); }
    	html.dark .toc li.active { border-color: var(--color-primary-darker); }
    	    
    	html.dark footer { background-color: var(--color-secondary-darker) ; }
        html.dark footer a { color: var(--color-body); }

/* ============================================ */
/*	BREAKPOINTS									*/
/* ============================================ */

	@media (max-width: 1260px) {
		
		/* Recent publications */
		.recent article:last-of-type { display: none; }

	}
		
	@media (max-width: 1060px) {

		/* Code */
		.code { max-width: unset; }

		/* Banner */
		.bar span { display: none; }

		/* All publications */
		#publications { margin-top: 20px; }

		/* Article container */
		article { padding-bottom: 30px; }
		#contents .container { display: block; padding-top: 20px; }
		
		/* Table of contents */
		.toc { margin-bottom: 60px; min-width: unset; position: relative; width: unset; }
			.toc ol { max-height: unset; }
			.toc a { background: var(--color-secondary-lighter); color: var(--color-body) ; display: block; padding: 15px; }
				.toc a:hover { background-color: var(--color-secondary-light); }
			.toc li { border: 0; margin-bottom: 5px; padding: 0; }
				.toc li.active { border: 0; }
					.toc li.active a { font-weight: 400; margin-left: 0; }

		/* Breadcrumbs */
		.breadcrumbs li:last-of-type { display: none; }
		
		/* Author */
		.author .container { background-size: 50%; }

	}    
		
	@media (max-width: 860px) {
		
		/* Banner */
		.banner { margin-top: 40px; }
		
		/* Top bar */
		.bar .container { background: url('/images/logo_footer.svg') top 18px left 40px no-repeat; display: block; padding: 0; }
    		.bar a { display: block; margin: 0; padding: 20px 40px 20px 80px; }
    			.bar a:focus { outline-offset: -2px; }
				.bar a::before { display: none; }
    		.bar form { margin: 0; }
    			.search input { padding-left: 40px; width: 100%; }
    			.search button { right: 40px; }
    		.bar span { display: inline-block; }
	
		/* Recent publications */
		.recent article:nth-of-type(2) { display: none; }

		/* All publications */
		.publications td { display: block; padding: 0px 10px 0px 35px; border: 0; }
			.publications td:first-of-type { background-position-y: top 26px; display: block; padding-top: 20px; }
			.publications td:last-of-type { padding-bottom: 20px; }
		.publications th { display: none; }
		.publications tr { border-bottom: 2px solid var(--color-secondary-lighter); }

		/* Filters */
		.filters label { display: block; margin: 10px 0 0 0; }
		.filters legend { float: none; }
	
		/* Time */
		.time { padding-left: 40px; }
			.time .update { background: none; color: var(--color-body); display: block; margin: 0; padding: 0; }
	
		/* Author */
		.author .container { padding-top: 40px; padding-bottom: 40px; }
	}
	
	@media (max-width: 560px) {
		
		/* Typography */
		h1 { font-size: 2.25rem; }
		h2 { font-size: 1.5rem; padding-top: 40px; }
		h3 { font-size: 1.25rem; }
		.article ul, .article ol { margin-left: 0; }
		.block { padding: 15px; }
		
		/* Top bar */
		.bar a::before { display: none; }
		.bar .container { background-position-x: left 20px; }
		.bar a { padding-left: 60px; }
		.search input { padding-left: 20px; }
		.search button { right: 20px; }
		
		/* Container */
		.container { padding: 0 20px; }
		
		/* Recent publications */
		.recent article { min-width: unset; }
		.recent article p:nth-last-child(2) { padding-bottom: 30px; }
		
		 /* Time */
		.time { background: none; padding-left: 0; }
	
		/* Author */
		.author .container { background: none; }   
		.author .subtitle { font-size: 1.125rem; }
		.author .button { max-width: unset; }

		/* See also */
		.resources p { background: none; padding-left: 0; }
	
	}
	
	@media (max-width: 400px) {
	 
		/* Top bar */
		.bar a::before { display: none; }
		.bar span { display: none; }

		/* Publication date */
		.published ul { background-position: top 5px left; display: block;}
	}