:root 
		{
	    --typesize: 1rem;
		--headingsize: 2vw;
	    --fraction: calc(97vw / 12);
		}

	body 
		{
	    background: rgb(182, 186, 191);
	    text-rendering: optimizeLegibility;
	    overflow-x: hidden;
		}

    #all, 
    #toc nav
    	{
        width: 97vw;
        max-width: 2000px;
        margin: 0 auto;
        padding: 0.5rem 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 1rem;
    	}

    /* TABLE OF CONTENTS */

    #toc 
    	{
        width: 100vw;
	    padding: 1rem 0;
	    position: relative;
	    background: rgb(182, 186, 191);
		}

    #toc nav 
    	{
        /*width: 100vw; */
    	}

    /* VIDEO HEADER */

	#header 
		{
	    left: 0;
	    position: relative;
	    width: 100vw;
	    height: 0;
	    overflow: hidden;
	    padding-bottom: 56.25%;
	    grid-gap: 1rem;
	    background: rgb(182, 186, 191);
	    right: 0;
	 }

	#header h1 
		{
	    position: absolute;
	    padding-block-start: 9%;
	    z-index: 1;
	    left: 50%;
	    transform: translate(-51%);
	 }

	#header iframe 
		{
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    width: 102%;
	    height: 102%;
	    object-fit: cover;
	    z-index: 0;
	    transform: translate(-50%, -50%);
	 }

	/* CSS GRID CONTAINER • 12 COLUMNS (= 1FR, 8.333%) EACH COLUMN • GUTTER (1REM) */

	.grid_1 
		{
	    grid-column: span 1;
		}

	.grid_2 
		{
	    grid-column: span 2;
		}

	.grid_3 
		{
	    grid-column: span 3;
		}

	.grid_4 
		{
	    grid-column: span 4;
		}

	.grid_5 
		{
	    grid-column: span 5;
		}

	.grid_6 
		{
	    grid-column: span 6;
		}

	.grid_7 
		{
	    grid-column: span 7;
		}

	.grid_8 
		{
	    grid-column: span 8;
		}

	.grid_9 
		{
	    grid-column: span 9;
		}

	.grid_10 
		{
	    grid-column: span 10;
		}

	.grid_11 
		{
	    grid-column: span 10;
		}

	.grid_12
		{
	    grid-column: 1 / span 12;
		}

	/* SEPARATOR */

	.vertical_space 
		{
	    height: 3rem;
		}

	/* @FONT-FACE */

	@font-face 
		{
	    font-family: 'sansbold';
	    src: url('../signs/Grotesk-Bold.woff2') format('woff2');
	    font-weight: normal;
	    font-style: normal;
		}

	@font-face 
		{
	    font-family: 'cursive';
	    src: url('../signs/Cursive-Regular.woff2') format('woff2');
	    font-weight: normal;
	    font-style: normal;
	    font-feature-settings: "kern", "liga", "dlig";
		}

	@font-face 
		{
	    font-family: 'text';
	    src: url('../signs/Scala-Regular.woff2') format('woff2');
	    font-weight: normal;
	    font-style: normal;
		}

	@font-face 
		{
	    font-family: 'textitalic';
	    src: url('../signs/Scala-Italic.woff2') format('woff2');
	    font-weight: normal;
	    font-style: italic;
		}

	/* RESET */

	* 	{
	    margin: 0;
	    padding: 0;
		}

	/* OPENTYPE FEATURES & STYLISTIC SETS */

	.default 
		{
	    padding-bottom: 0px;
	    margin-bottom: 35px;
	    font-feature-settings: "kern", "liga", "onum";
		}

	.alternate_finals 
		{
	    font-feature-settings: "kern", "fina";
		}

	.alternate_dlig 
		{
	    font-feature-settings: "kern", "dlig";
		}

	.caps 
		{
	    font-feature-settings: "kern", "liga", "c2sc";
		}

	/* TEXT SELECTION */

	::selection 
		{
	    color: black;
	    background: rgb(255, 230, 0);
		}

	::-moz-selection 
		{
	    color: black;
	    background: rgb(255, 230, 0);
		}

	/* HIERARCHY */

	h1,
	h2,
	h3,
	nav,
	p,
	p.small,
	figcaption
		{
	    font-weight: normal;
	    font-style: normal;
	    text-align: left;
	    list-style: none;
		}

	nav,
	h3,
	p,
	p.small 
		{
	    line-height: 1.2;
		}

	h1 
		{
	    font-family: 'cursive', sans-serif;
	    font-size: calc(var(--headingsize) * 5.75);
	    color: white;
	    line-height: 0.8;
		}

	h1 a 
		{
	    color: black;
	    text-decoration: none;
		}

	h1 a:hover 
		{
	    color: white;
	    text-decoration: none;
		}

	nav 
		{
	    font-family: 'text', serif;
	    font-size: calc(var(--typesize) * 1.1);
	    color: black;
		}

    nav a 
    	{
	    color: black;
	    text-decoration: none;
		}

	nav a:hover 
		{
	    color: white;
	    text-decoration: none;
		}

	h2 
		{
	    font-family: 'cursive', sans-serif;
	    font-size: calc(var(--typesize) * 7);
	    line-height: 0.85;
	    color: white;
		}

	h2 a
		{
	    color: white;
	    text-decoration: none;
		}

	h2 a:hover
		{
	    color: black;
	    text-decoration: none;
		}	

	h3 
		{
	    font-family: 'text', serif;
	    font-size: calc(var(--typesize) * 1.1);
	    color: black;
	    text-indent: 35px;
		}

	h3 a 
		{
	    color: black;
	    text-decoration: none;
		}

	h3 a:hover 
		{
	    color: black;
	    text-decoration: none;
		}

	p 
		{
	    font-family: 'sansbold', sans-serif;
	    font-size: calc(var(--typesize) * 1.5);
	    color: black;
		}

	p+p 
		{
	    text-indent: 60px;
	    /* text-indent: calc(var(--fraction)); */
		}

	p a 
		{
	    color: black;
	    text-decoration: none;
	    border-bottom: 2px solid black;
		}

	p a:hover 
		{
	    color: black;
	    text-decoration: none;
	    border-bottom: 10px solid white;
		}

	p.small 
		{
	    font-family: 'text', serif;
	    font-size: calc(var(--typesize) * 1.1);
	    color: black;
		}

	p.small+p.small 
		{
	    text-indent: 35px;
		}

	p.small a 
		{
	    color: black;
	    text-decoration: none;
	    border-bottom: 1px solid black;
		}

	p.small a:hover 
		{
	    color: black;
	    text-decoration: none;
	    border-bottom: 5px solid white;
		}

	p.small cite
		{
	    font-family: 'textitalic', serif;
	    font-size: calc(var(--typesize) * 1.1);
	    color: black;
		}

	figcaption 
		{
	    font-family: 'text', serif;
	    font-size: calc(var(--typesize) * 1.1);
	    color: black;
		}

	figcaption cite
		{
	    font-family: 'textitalic', serif;
	    font-size: calc(var(--typesize) * 1.1);
	    color: black;
		}

	hr 
		{
	    display: none;
		}


	img.portrait 
		{
	    border-radius: 50%;
        margin-bottom: 30px;
        margin-left: 35px;
		}

	figure img 
		{
	    max-width: 100%;
	    height: auto;
		}

	figure figcaption 
		{
	    padding-top: 0.15rem;
	    margin-bottom: 35px;
	 	}


    .arrow 
    	{
        font-family: 'cursive', sans-serif;
        font-size: calc(var(--typesize) * 7);
        line-height: 0.85;
        color: white;
        text-decoration: none;
		}

    .arrow:hover 
    	{
        color: black;
        text-decoration: none;
    	}
    


	/* SCREENS SIZES */

	@media (max-width: 64rem) 
	{

        :root 
        	{
            --typesize: 0.875rem;
            --fraction: calc( 93vw / 12 );
        	}
    }

	@media (max-width: 48rem) 
	{

        :root 
        	{
            --typesize: 1rem;
            --fraction: calc( 93vw / 12 );
        	}

        #all,
        #toc nav
        	{
            max-width: 93vw;
            width: 93vw;
        	}

	    #header h1 
	    	{
	        padding-block-start: 9%;
	     	}

		.default  
			{
		    margin-bottom: 5px;
			}

		.vertical_space 
        	{
            height: 1.5rem;
        	}

	    h2 
	    	{
	        font-size: calc(var(--typesize) * 4);
	        hyphens: manual;
	    	}

        p
        	{
            font-size:calc(var(--typesize) * 1.3);
        	}

        p+p, p.small+p.small
        	{
            text-indent:calc(var(--fraction));
        	} 

        nav
        	{
            font-size:calc(var(--typesize) * 1);
        	}

        .arrow 
        	{
            font-size: calc(var(--typesize) * 4);
        	}

	    .hidden_mobile
	        {
	        display: none;
	    	}
        
	    .grid_1,
	    .grid_2,
	    .grid_3,
	    .grid_4,
	    .grid_5,
	    .grid_6,
	    .grid_7,
	    .grid_8,
	    .grid_9,
	    .grid_10,
	    .grid_11 
	    	{
	        grid-column: span 12;
	    	}

        nav .grid_8 
        	{
            grid-column: span 2;
        	}

        nav .grid_2 
        	{
            grid-column: span 5;
        	}

        .with_h2 
        	{
            grid-column: 3 / 13;
        	} 

        figure figcaption 
        	{
            margin-bottom: 15px;
        	}

        p.small, h3, figcaption 
        	{
            padding-left: calc(var(--fraction));
        	}

        img.portrait 
        	{ 
            margin-bottom: 10px;
            margin-left: 35px;
        	}

	}