/* Pacing: 10px */

@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i,700|Montserrat');

html, body, figure, figcaption, ol, ul {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    font-family: 'Merriweather', serif;
    font-size: 14px;
    line-height: 20px;
}
p,
blockquote {
    margin: 0 0 20px;
}
h1, h2, header, body > footer {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    color: black;
}
h1 {
    font-size: 30px;
    line-height: 40px;
    margin-top: 10px;
    margin-bottom: 20px;
}
h2 {
    font-size: 24px;
    line-height: 30px;
    margin-top: 10px;
    margin-bottom: 20px;
}

a, a:visited {
    color: blue;
    text-decoration: none;
}
a:hover {
    color: blue;
    text-decoration: underline;
}
b {
    font-weight: normal;
    font-style: normal;
}
i {
    font-weight: normal;
    font-style: italic;
}
em {
    font-weight: bold;
    font-style: normal;
}

header {
    margin: 0;
}
header > nav {
    background-color: rgba(0,0,0,0.6);
    color: rgb(220,220,220);
    padding: 5px;
    font-size: 18px;
    line-height: 30px;
}
/* Mobile nav control
 *
 * We're doing this CAPE-style, so we hide the enhanced content
 * through js-capable, until js-ready, and then hide it again if
 * js-timeout. (We actually just make the control hidden by default,
 * since it also needs to be missing on larger devices.)
 *
 * Showing/hiding the nav menu is animated using a transition, but we
 * can't transition its height from 0 to auto, so instead we use a
 * very large max-height as the "visible" state.
 */
html header > nav > a.nav-control {
    display: none;
}
@media (max-width: 800px) {
    html.js-ready header > nav {
        text-align: center;
    }
    html.js-ready header > nav > a.nav-control {
        display: block;
        font-size: 14px;
        line-height: 20px;
        text-align: right;
        color: inherit;
    }
    html.js-capable header > nav > ol#menu,
    html.js-ready header > nav > ol#menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 1s ease;
    }
    html.js-ready header > nav > ol#menu.open {
        max-height: 1000px;
    }
}
/* And colours for the nav menu */
header > nav > ol > li > a,
header > nav > ol > li > a:hover,
header > nav > ol > li > a:visited {
    color: inherit;
    font-variant: small-caps;
    text-transform: lowercase;
}
header > nav > ol > li:first-child > a,
header > nav > ol > li:first-child > a:hover,
header > nav > ol > li:first-child > a:visited {
    color: white;
    font-variant: none;
    text-transform: none;
    font-weight: bold;
}
header > figure {
    margin-bottom: 10px;
}
header > figure > img {
    width: 100%;
    height: auto;
    display: block;
}
header > figure > figcaption {
    background: rgba(0,0,0,0.75);
    color: rgba(255,255,255,0.7);
    font-family: 'Merriweather', serif;
    font-size: 12px;
    line-height: 20px;
    width: 100%;
}
header > figure > figcaption > i {
    /* inline-block ensures that the background and padding work if the
     * caption text wraps.
     */
    display: inline-block;
    background: transparent;
    padding: 5px 10px;
    font-style: italic;
}
header > figure > figcaption > i > a,
header > figure > figcaption > i > a:hover,
header > figure > figcaption > i > a:visited {
    color: inherit;
}
@media (min-width: 801px) {
    header {
        margin: 0 auto 20px;
        display: grid;
        grid-template-columns: [start] auto [end];
        grid-template-rows: [start] auto [nav-end] fr [end];
    }
    header > nav {
        font-size: 14px;
        line-height: 20px;
        padding: 0;
        grid-row: start / span 1;
        grid-column: start / span 1;
        z-index: 20; /* allow a banner image to slide behind it */
        background-color: rgba(0,0,0,0.6);
        color: rgb(220,220,220);
    }
    header > nav > ol,
    #content {
        max-width: 800px;
        margin: 0 auto;
    }
    header > nav > ol {
        padding: 4px 10px 6px;
        display: flex;
        justify-content: space-between;
    }
    header > nav > ol > li {
        list-style: none;
        display: inline-block;
        margin: 0;
    }

    header > figure {
        grid-row: start / span 2;
        grid-column: start / span 1;
        width: 100%;
        margin: 0 auto;
        z-index: 10; /* slide beneath the nav */

        /* Keep this separate from our grid-row / grid-column for clarity.
         * This creates a grid within the header grid, so we can place
         * our caption on top of the image, aligned correctly.
         */
        display: grid;
        /* Note that the [caption] track line is used for the caption
         * only when the window width (@media min-width) is over 800px.
         *
         * This is because if the caption auto-sizes to less than 800px
         * width then it will center in the available space if it is
         * grid-columns: caption / span 1 (because the middle column is
         * sized based on its content, which is just figcaption). So we
         * have to set its width to 800px in that situation, rather than
         * setting max-width to 800px in all cases.
         *
         * (This then means we have an i element inside the figcaption,
         * so we can set a semi-transparent background behind only the
         * text not the entire 800px width.)
         */
        grid-template-columns: [start] 1fr [caption] auto 1fr;
        grid-template-rows: [start] auto;
    }
    header > figure > img {
        grid-row: start / span 1;
        grid-column: start / span 3;
    }
    header > figure > figcaption {
        grid-row: start / span 1;
        grid-column: caption / span 1;
        align-self: end;
        background: transparent;
        width: 800px;
    }
    header > figure > figcaption > i {
        background: rgba(0,0,0,0.5);
        width: auto;
    }
}
@media (min-width: 1025px) {
    /* We don't want the final menu entry all the way over to the right,
     * so instead we insert an anonymous generated element so the real
     * nav items tend away from the right hand edge a little.
     */
    header > nav > ol:after {
        display: inline-block;
        content: " ";
    }
}

body > footer {
    max-width: 790px;
    margin: 10px auto 10px;
    padding: 5px;
    border-top: 1px solid rgb(50,50,50);
    color: rgb(50,50,50);
}
body > footer > p {
    margin-bottom: 10px;
}
@media (min-width: 801px) {
    body > footer {
        max-width: 725px;
        padding-right: 70px;
        background-position: center right 5px;
        background-image: url("/static/monster/apple-icon-60x60.5c66eec4021d.png");
        background-repeat: no-repeat;
    }
}
@media (max-width: 800px) {
    body > footer {
        padding-bottom: 70px;
        background-position: bottom 5px center;
        background-image: url("/static/monster/apple-icon-60x60.5c66eec4021d.png");
        background-repeat: no-repeat;
    }
}

#content > article:after {
    content: " ";
    display: table;
    clear: both;
}
#content > article > h1,
#content > article > h2,
#content > article > p,
#content > article > figure,
#content > article > blockquote {
    color: rgb(50,50,50);
}
#content > h1,
#content > article > h1,
#content > article > h2,
#content > article > blockquote,
#content > article > p {
    padding: 0 5px;
}
@media (min-width: 801px) {
    #content > h1,
    #content > article > h1,
    #content > article > h2,
    #content > article > blockquote,
    #content > article > p {
        padding: 0;
    }
}

/* Pagination */
ol.pages {
    text-align: center;
}

ol.pages > li {
    list-style: none;
    display: block;
    margin-bottom: 10px;
}

@media (min-width: 801px) {
    ol.pages {
        display: flex;
        justify-content: space-between;
    }
}

ol.pages > li.previous:before {
    content: "< ";
}

ol.pages > li.next:after {
    content: " >";
}

/* Fort widget */

@media (min-width: 801px) {
    .fort-metadata h1 {
        padding-bottom: 10px;
        border-bottom: 2px solid rgb(150,150,150);
        margin-bottom: 10px;
    }
}

@media (max-width: 800px) {
    .fort-metadata h1 {
        margin-right: 50px;
    }
}

.fort-metadata h1 {
    font-weight: bold;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
.fort-metadata h1 > i {
    /* This is the "/dev/fort" bit */
    display: block;
    font-style: normal;
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 0;
    /* Hard (impossible?) to add this to the bottom of the number */
    padding-top: 10px;
}
.fort-metadata h1 > b {
    /* This is the number or letter */
    display: block;
    font-size: 60px;
    line-height: 50px;
    text-align: center;
    color: white;

    /* And this has a hexagon background. Approach from @brenna
     * (https://github.com/brenna/csshexagon), although it wasn't
     * designed to have content inside the hexagon so I've made some
     * changes to accommodate that.
     */
    position: relative;
    width: 90px;
    height: 51.96px;
    background-color: #541989;
    background-color: var(--fort-color);
    margin: 25.98px 0;
}
.fort-metadata h1 > b:before,
.fort-metadata h1 > b:after {
    content: " ";
    position: absolute;
    width: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
}
.fort-metadata h1 > b:before {
    left: 0;
    bottom: 100%;
    border-bottom: 25.98px solid #541989;
    border-bottom: 25.98px solid var(--fort-color);
}
.fort-metadata h1 > b:after {
    left: 0;
    top: 100%;
    width: 0;
    border-top: 25.98px solid #541989;
    border-top: 25.98px solid var(--fort-color);
}

/* Fort detail */

@media (min-width: 801px) {
    body.fort #content > .fort-metadata {
        float: left;
        width: 30%;
    }
}

@media (max-width: 800px) {
    body.fort #content > .fort-metadata {
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    /* We don't want the metadata list all the way over to the right. */
    body.fort #content > .fort-metadata:after {
        content: " ";
        display: inline-block;
    }
}
body.fort #content > .fort-metadata > ul {
    color: rgb(150,150,150);
    display: table;
}
body.fort #content > .fort-metadata > ul > li {
    display: table-row;
}
body.fort #content > .fort-metadata > ul > li > i {
    font-style: normal;
    display: table-cell;
    padding-right: 10px;
}
body.fort #content > .fort-metadata > ul > li > b,
body.fort #content > .fort-metadata > ul > li > ul {
    display: table-cell;
}
/* Don't > ul here because project are a nested list */
body.fort #content > .fort-metadata ul > li {
    list-style: none;
}
body.fort #content > .fort-metadata ul.projects > li {
    margin-bottom: 10px;
}
body.fort #content > article {
    padding-bottom: 50px;
}
@media (min-width: 801px) {
    body.fort #content > article > h2,
    body.fort #content > article > p,
    body.fort #content > article > figure {
        width: 60%;
        margin-left: 40%;
    }
    body.fort #content > article > blockquote {
        clear: left;
        text-align: right;
    }
}
body.fort #content > article > blockquote {
    quotes: "\201C""\201D""\2018""\2019";
    font-size: 18px;
    line-height: 30px;
    margin: 30px 0 20px;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}
body.fort #content > article > blockquote > p:before {
    content: open-quote;
}
body.fort #content > article > blockquote > p:after {
    content: close-quote;
}
body.fort #content > article > blockquote > footer {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
    font-style: normal;
    font-family: 'Merriweather', serif;
}
#content > article > figure {
    margin-bottom: 20px;
}
#content > article > figure > img {
    width: 100%;
    height: auto;
    display: block;
}
#content > article > figure > figcaption {
    background: rgba(0,0,0,0.75);
    color: rgba(255,255,255,0.7);
    font-family: 'Merriweather', serif;
    font-size: 12px;
    line-height: 20px;
}
#content > article > figure > figcaption > i {
    /* inline-block ensures that the background and padding work if the
     * caption text wraps.
     */
    display: inline-block;
    background: transparent;
    padding: 5px 10px;
    font-style: italic;
}
#content > article > figure > figcaption > i > a,
#content > article > figure > figcaption > i > a:hover,
#content > article > figure > figcaption > i > a:visited {
    color: inherit;
}
@media (min-width: 801px) {
    /* Use a 1x1 grid because it makes overlaying easy, and similar to how
     * we do header > figure.
     */
    #content > article > figure {
        display: grid;
        grid-template-columns: [start] auto;
        grid-template-rows: [start] auto;
    }
    /* FIXME: this is supposed to break out of the 800px wide
     * flow and be full bleed.
     */
    body.fort #content > article > figure.layout-break {
        margin-left: 0;
    }
    #content > article > figure > img {
        grid-row: start / span 1;
        grid-column: start / span 1;
    }
    #content > article > figure > figcaption {
        grid-row: start / span 1;
        grid-column: start / span 1;
        align-self: end;
        background: transparent;
        width: 100%;
    }
    #content > article > figure > figcaption > i {
        width: auto;
        background: rgba(0,0,0,0.5);
    }
}

body.fort #content > nav.around > ol {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 5px;
}
@media (min-width: 801px) {
    body.fort #content > nav.around > ol {
        padding: 0;
        width: 60%;
        margin-left: 40%;
    }
}
body.fort #content > nav.around > ol > li {
    list-style: none;
    display: block;
    width: 100%;
}
body.fort #content > nav.around > ol > li.next {
    text-align: right;
}
body.fort #content > nav.around > ol > li.next:after {
    content: " >";
}
body.fort #content > nav.around > ol > li.prev:before {
    content: "< ";
}

/* About and home pages */

body.about #content > article > ol.contents {
    margin: 20px 0;
}
body.about #content > article > ol.contents > li {
    list-style: none;
    padding-left: 20px;
}
body.about #content > article > ul {
    margin: 0 0 20px;
    padding: 0 5px;
}
body.about #content > article > ul > li {
    margin-left: 20px;
}
@media (min-width: 801px) {
    body.about #content > article > ol.contents {
        margin-bottom: 40px;
    }
    body.about #content > article > ul {
        padding: 0;
    }
    body.about #content > article > ul > li {
        margin-left: 0;
    }
    body.conduct #content > article > ul > li {
        /* This is a *long* list, and this is an attempt to make it
         * slightly more readable.
         */
        margin-bottom: 10px;
    }
    /* Images are basically the same CSS as on fort pages, except
     * that inlines float right on larger devices. #content is
     * max-width: 800px, and neither content nor article has padding
     * or margin that will affect this, so we can just pick our
     * desired size.
     *
     * Also used on the homepage.
     */
    body.home #content > article > figure.layout-inline,
    body.about #content > article > figure.layout-inline {
        float: right;
        margin: 0 0 10px 10px;
        width: 40%;
    }

    body.home #content > ol.forts {
        margin-top: 20px;
    }
}

/* Alumni list */

body.about.alumni #content > p {
    padding: 0 5px;
}
body.about.alumni #content ol#alumni > li {
    list-style: none;
    margin: 0 5px 10px; /* [1] l/r margin cancelled below on larger devices */
    /* Avatar is 60x60, but we want 10px to the right and below */
    min-height: 60px;
    padding-left: 70px;
    /* Provide an anchor for the avatar to attach to */
    position: relative;
}
body.about.alumni #content ol#alumni > li img {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
}
body.about.alumni #content ol#alumni > li > ol.forts {
    margin: 0;
    padding: 0;
    font-size: 12px;
}
body.about.alumni #content ol#alumni > li > ol.forts > li {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}
body.about.alumni #content ol#alumni > li > ol.forts > li:before {
    content: "\02022";
    margin-right: 5px;
}
body.about.alumni #content ol#alumni > li > ol.forts > li > a {
    color: blue;
}

@media (min-width: 801px) {
    body.about.alumni #content > p {
        padding: 0;
    }
    body.about.alumni #content ol#alumni {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    body.about.alumni #content ol#alumni > li {
        display: inline-block;
        /* We have 800px. Three 260px leaves 10px between each column.
         * The actual space between is handled by flex. We do have to
         * kill the 5px margin on each side that we put in for smaller
         * devices where there's only one column (above at [1]).
         *
         * width includes padding, which is 70px (left only), so take
         * that off.
         */
        margin: 0 0 20px 0;
        width: 190px;
    }
    body.about.alumni #content ol#alumni > li > ol.forts {
        display: inline;
    }
    body.about.alumni #content ol#alumni > li > ol.forts > li:after {
        content: ", ";
    }
    body.about.alumni #content ol#alumni > li > ol.forts > li:before,
    body.about.alumni #content ol#alumni > li > ol.forts > li:last-child:after {
        content: none;
    }
}

/* Fort lists */

ol.forts {
    margin: 0;
    padding: 0 5px;
}

ol.forts > li.fort-metadata {
    width: 100%;
    list-style: none;
    margin: 0 0 20px;
}

ol.forts > li > a,
ol.forts > li > a:visited,
ol.forts > li > a:hover {
    text-decoration: none;
    color: black;
}

ol.forts > li.fort-metadata > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
ol.forts > li.fort-metadata > a > h1 {
    flex-basis: 0;
    width: 30%;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}
ol.forts > li.fort-metadata > a > h1 > i {
    display: none;
}

ol.forts > li.fort-metadata > a > ul {
    text-align: center;
    margin-bottom: 0;
}

ol.forts > li.fort-metadata > a > ul > li {
    display: inline;
    list-style: none;
}

ol.forts > li.fort-metadata > a > ul > li > i {
    position: absolute;
    left: -9999px;
}

ol.forts > li.fort-metadata > a > p {
    padding: 0 5px;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

ol.forts > li.fort-metadata > a > blockquote {
    padding: 0 5px;
    margin-bottom: 10px;
}
ol.forts > li.fort-metadata > a > blockquote {
    quotes: "\201C""\201D""\2018""\2019";
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
ol.forts > li.fort-metadata > a > blockquote > p:before {
    content: open-quote;
}
ol.forts > li.fort-metadata > a > blockquote > p:after {
    content: close-quote;
}
@media (min-width: 801px) {
    ol.forts {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    ol.forts > li.fort-metadata {
        display: inline-block;
        width: 30%;
    }
    ol.forts > li.fort-metadata > a {
        display: block;
    }
    ol.forts > li.fort-metadata > a > h1 {
        width: 100%;
        margin-bottom: 10px;
    }
    ol.forts > li.fort-metadata > a > ul {
        margin-bottom: 10px;
    }
    ol.forts > li.fort-metadata > a > blockquote {
        padding: 0;
        margin: 10px 0;
    }
}