@import url('reset.css');

@font-face {
    font-family: Besley;
    font-style: normal;
    font-weight: 1 999;
    src: url('fonts/Besley.woff2') format('woff2-variations');
}
@font-face {
    font-family: Besley;
    font-style: italic;
    font-weight: 1 999;
    src: url('fonts/Besley-Italic.woff2') format('woff2-variations');
}
/* These fonts are NOT free software according to the FSF definition;
   they are distributed under the ‘Aladdin Free Public License’. This
   is sufficient to allow essentially unrestricted web font use, since
   we don’t charge for access to the fonts, which is the main
   restriction this licence imposes.

   <https://spdx.org/licenses/Aladdin.html>
*/
@font-face {
    font-family: 'Univers';
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    src: url('./fonts/URWClassicSans-Regular.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    src: url('./fonts/URWClassicSans-Bold.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: normal;
    font-style: italic;
    font-stretch: normal;
    src: url('./fonts/URWClassicSans-RegularIt.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: bold;
    font-style: italic;
    font-stretch: normal;
    src: url('./fonts/URWClassicSans-BoldItalic.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: normal;
    font-style: normal;
    font-stretch: condensed;
    src: url('./fonts/URWClassicSansCond-Regular.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: bold;
    font-style: normal;
    font-stretch: condensed;
    src: url('./fonts/URWClassicSansCond-Bold.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: normal;
    font-style: italic;
    font-stretch: condensed;
    src: url('./fonts/URWClassicSansCond-Italic.woff2');
}
@font-face {
    font-family: 'Univers';
    font-weight: bold;
    font-style: italic;
    font-stretch: condensed;
    src: url('./fonts/URWClassicSansCond-BdItalic.woff2');
}


html {
    font-family: Univers, sans-serif;
    font-size: 21px;
    line-height: 30px;

    & body {
        font-size: inherit;
        line-height: inherit;
        & > header {
            padding: 1rem;
        }
        
        & section.bigbanner {
            color: white;
            background-color: oklch(66.77% 0.2119 34.18);
            padding: 1rem;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            column-gap: 1rem;
            
            & header {
                text-align: center;
                grid-column: 1 / 6;
                font-family: Besley, serif;
                font-weight: bold;
                font-size: 96px;
                line-height: 96px;
                & .revised {
                    display: block;
                    &:nth-child(1) { color: white; }
                    &:nth-child(2) {
                        color: color-mix(in oklch,
                                         oklch(87.83% 0.1548 92.65) 16.7%,
                                         white);
                    }
                    &:nth-child(3) {
                        color: color-mix(in oklch,
                                         oklch(87.83% 0.1548 92.65) 33.3%,
                                         white);
                    }
                    &:nth-child(4) {
                        color: color-mix(in oklch,
                                         oklch(87.83% 0.1548 92.65) 50%,
                                         white);
                    }
                    &:nth-child(5) {
                        color: color-mix(in oklch,
                                         oklch(87.83% 0.1548 92.65) 66.7%,
                                         white);
                    }
                    &:nth-child(6) {
                        color: color-mix(in oklch,
                                         oklch(87.83% 0.1548 92.65) 83.3%,
                                         white);
                    }
                    &:nth-child(7) {
                        color: oklch(87.83% 0.1548 92.65);
                    }
                }
            }

            & .content {
                grid-column: 6 / 13;
            }
        }

        & figure.bigquote {
            margin: 1rem;
            & blockquote {
                font-family: Besley, serif;
                font-style: italic;
                font-size: 36px;
                line-height: 48px;
                text-align: center;
                margin: 1rem 0;
            }
            & figcaption {
                margin: 1rem 0;
                text-align: right;
            }
        }

        & main {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            column-gap: 1rem;
            padding: 1rem;

            & .lefthalf {
                grid-column: 1 / 7;
            }
            & .righthalf {
                grid-column: 7 / 13;
            }
            & .fullwidth {
                grid-column: 1 / 13;
            }
        }
    }
}

.content {
    & dfn {
        font-weight: bold;
    }
    & var {
        font-family: Besley, serif;
        font-style: italic;
    }
    & small {
        font-size: 0.8em;
    }
    & p {
        margin: 1em 0;
    }
    & ul, & ol {
        margin: 1em 0 1em 1rem;
    }
    & ul {
        list-style-type: disc;
    }

    & h2 {
        font-size: 30px;
        line-height: 36px;
        margin: 1rem 0;
    }
    & h3 {
        font-size: 24px;
        line-height: 30px;
        margin: 1rem 0;
        clear: both;
    }

    & dd {
        margin-left: 1rem;
    }

    & footer {
        font-size: 16px;
        line-height: 20px;
    }
    & .bookcover {
        float: left;
        padding: 0 1rem 1rem 0;
        & img {
            height: 220px;
        }
    }
}


sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    font-size: 0.8em;
}
sub { 
    top: 0.4em; 
}

a:link, a:visited, a:hover, a:active {
    text-decoration: underline;
    color: inherit;
}
a:hover, a:active {
    opacity: 67%;
}