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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    color: #333;
}

main {
    x-padding-bottom: 4rem;
}

a {
    color: #333;
    text-decoration: none;
    transition: 0.3s ease-in;
}

a:not(.block_link), 
.block_title span {
    box-shadow: inset 0 -0.22em 0 rgba(192,250,0,0.85);
}

a:focus:not([href="#main"]):not(.block_link), 
a:hover:not([href="#main"]):not(.block_link), 
.block_link:hover .block_title span, 
.block_link:focus .block_title span, 
.menu a:hover:not(.brand):not([href="#main"]), 
.menu a:focus:not(.brand):not([href="#main"]) {
    color: black;
    background: rgba(192,250,0,0.85);
}

/* .menu li [href="#main"] {background: rgba(0,0,0,0.8);} */

.pos-abs {position: absolute;}
.pos-rel {position: relative;}

.btn {
    font-weight: bold;
    box-shadow: none;
    background: black;
    display: inline-block;
    color: white;
    border-radius: 0.25rem;
    line-height: 1;
    padding: 0.5em 0.75em;
}

img, 
svg {
    display: block;
}

img {
    max-width: 100%;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
}

ol.cluster, 
ul.cluster {
    list-style: none;
}

.jc-center {justify-content: center;}
.jc-between {justify-content: space-between;}
.ai-center {align-items: center;}

/* Typography */

.caps {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mt-1e    {margin-top: 1em;}
.mt-3\/4e {margin-top: 0.75em;}
.mt-1\/2e {margin-top: 0.5em;}
.mt-1\/4e {margin-top: 0.25em;}

.mb-2e    {margin-bottom: 2em;}
.mb-1e    {margin-bottom: 1em;}
.mb-3\/4e {margin-bottom: 0.75em;}
.mb-1\/2e {margin-bottom: 0.5em;}
.mb-1\/4e {margin-bottom: 0.25em;}


/* Visibility */

.visibility-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}

/* Line control */

.line-bl {display: block;}
.line-ib {display: inline-block;}

.line-tight {line-height: 1.25;}
.line-solid {line-height: 1;}

/* Container width */

.menu {
    z-index: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
    line-height: 1;
    background: rgba(0,0,0,0.25);
    width: 100%;
}

/*
.menu li {
    margin: 1px;
}
*/

.menu a {
    color: white;
    display: block;
}

.menu li a {
    x-background: rgba(0,0,0,0.3);
    padding: 0.25em 0.5em;
    border-left: 1px solid rgba(255,255,255,0.25);
    white-space: nowrap;
}

@media only screen 
and (max-width: 674px) {
    .menu li {
        display: none;
    }

    .menu ul {
        width: 1.5rem;
        position: absolute;
        border-top: 2px solid white;
        right: 5vw;
        top: 1.25rem;
    }

    .menu ul::before, 
    .menu ul::after {
        content: '';
        position: absolute;
        border-top: 2px solid white;
        top: 7px;
        width: 100%;
    }

    .menu ul::after {
        top: 16px;
        op: 16px;
        content: 'MENU';
        color: white;
        font-size: 10px;
        padding-top: 5px;
        letter-spacing: 0.075em;
        text-indent: -3px;
    }
}

@media only screen 
and (min-width: 675px) 
and (max-width: 1200px) {
    .menu li:first-child a {
        padding-left: 0;
        border: 0;
    }
}

.menu li [href="#main"] {
    color: rgba(255,255,255,0.65);
    cursor: default;
}


.x-max {
    padding-left: 5vw;
    padding-right: 5vw;
}


/* Synopses */

.synopses {padding: 2rem 0;}

ol.synopses, 
ul.synopses {
    list-style: none;
}

.block {
    background-color: white;
    padding: 1em;
}

.synopses article .placeholder {
    display: block;
    background: #f2f2f2;
    padding-bottom: 62%;
}

.block_title pan {
    display: block;
    padding: 0.125em;
    background: white;
}

@media only screen 
and (max-width: 632px) {
    .blocks {
        display: block;
    }

    .blocks .block_link {
        display: flex;
        flex-direction: column;
    }
}

@media only screen 
and (min-width: 633px) {
    .blocks .synopses {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    }

    .blocks .block_link {
        display: grid;
        grid-template-areas: 
                'img title'
                'img text';
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(4rem, auto) auto;
        grid-gap: 0.75em;
    }

    .block_title {grid-area: title; line-height: 1.25;}
    .block_link figure {grid-area: img;}
    .block_link p {grid-area: text;}
}


@supports (display: grid) {
    .synopses {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
        grid-gap: 1rem 1rem;
    }

    .board.synopses {
        grid-gap: 3rem 3rem;
    }
}

/* Header */

h1 {
    line-height: 1;
    font-size: calc(1rem + 5.5vw);
    color: white;
}

.h1--home {
    width: 59%;
    bottom: 13vw;
}

@media only screen 
and (max-width: 568px) {
    .h1--home {
        bottom: auto;
        width: 67%;
        top: 31vw;
    }

    .h1--home + figure {
        padding-top: 50vw;
        background: #2c5eb5;
    }
}

.h1--inner {
    top: 2.5em;
}

h1 span {
    color: #c0fa00;
}

h1 em {
    text-align: right;
}

.measure {max-width: 65ch;}

h1, 
h2, .h2, 
h3, .h3, 
h4, .h4 {
    font-family: 'Playfair Display', Georgia, serif;
    display: block;
}

h2 .h2, 
h3, .h3, 
h4, .h4 {
    line-height: 1.1;
}

h4, .h4, 
.size-l {font-size: 1.125rem;}

h3, .h3, 
.size-xl {font-size: 1.5rem;}

h2, .h2, 
.size-xxl {font-size: 2rem;}

section h2 {
    font-size: 3rem;
}

.page-section {
    padding-top: 4rem;
    padding-bottom: 6rem;
}

.weight-300 {font-weight: normal;}

.intro {
    font-size: calc(1rem + 1vw);
    margin-top: -1em;
}


/* Slants */

[class^="slant"] {
    width: 100%;
}

.slant--header {bottom: 0;}

/* Sections */

section.blocks {background-color: #c2e64c;}
polygon.blocks {fill: #c2e64c;}

.stripes {
    background: url('/images/uk-stripes.png') repeat-y;
    background-size: contain;
    min-height: 140vh;
    padding-top: 18vw;
    display: flex;
    align-items: center;
}

.stripes h2, 
.stripes .line-ib {
    background: white;
    display: inline-block;
    padding: 0.25rem 0.5rem;
    margin: 0 -1rem -0.5em 0;
}

.board_person {
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.board_person > * {
    background: white;
    display: inline-block;
    padding: 0.25rem 0.5rem 0.25rem 0;
}

.board_person .p-job-title {order: 1; line-height: 1; color: white; background: black; padding: 0.25em 0.33em;}
.board_person .p-name {order: 2;}
.board_person .p-org {order: 3; line-height: 1; color: #999; margin-top: -0.2em;}

.menu .brand {
    x-padding: 0.33em 0;
    font-size: 1.75em;
    box-shadow: none;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: bold;
    x-background: rgba(0,0,0,0.5);
    line-height: 1;
    display: block;
    padding-right: 2rem;
}

.menu .brand, 
.menu ul {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/*

.menu span {
    display: block;
}

.brand span:nth-child(2) {font-size: 154%; margin-left: -2px;}
.brand span:nth-child(3) {font-size: 184%; margin-left: -2px; line-height: 0.8;}

.brand span:nth-child(4) {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1.55em;
    font-size: 11px;
    position: absolute;
    margin-top: 0.25rem;
}
*/


.menu .donate {
    position: fixed;
    right: calc(5vw + 0.5rem);
    top: 1.5rem;
    background: #c0fa00;
    color: black;
    font-weight: bold;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    outline: 0.5rem solid rgba(0,0,51,0.3);
}

#facts::before, 
#facts::after {
    position: absolute;
    top: calc(50% - 0.75em);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0 0.5em;
}

#facts::before {
    left: 0;
    content: '1850'
}

#facts::after {
    right: 0;
    content: '2020';
}

.now {background: #444; color: white;}
.you {background: #2a5196;}
.you h2 {color: white;}

.fact-group {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    grid-gap: 3em 3em;
    margin: 2em 0 3em;
}

.num-large {
    font-size: calc(1em + 4vw);
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1;
}

.num-qualifier {
    margin: 0.5rem 0;
    padding-bottom: 0.5rem;
    display: inline-block;
    border-bottom: 0.75rem solid white;
}

.article > * + * {
    margin-top: 0.5em;
}

.article h4 {
    margin-top: 1.5em;
}

.article img {
    border: 1px solid rgba(0,0,0,0.1);
}

.w1\/4 {width: 25%;}

.left-runround {
    float: left;
    margin: 0.5em 0.5em 0 0;
}

.intro-cs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    grid-gap: 2em 2em;
    padding-top: 1.5em;
    border-top: 1px solid #d9d9d9;
    margin: 2em 0 3em;
}

.intro-cs blockquote {
    font-style: italic;
}