<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*--------------------------------+
 | Site: Dictionary of Typography |
 +--------------------------------*/


/* Imports
=====================================================================*/
@import url(//fonts.googleapis.com/css2?family=Literata:ital,wght@0,300;0,400;0,900;1,300;1,400;1,900&amp;family=UnifrakturMaguntia&amp;display=swap);
@import url(/styles/fontawesome.css);
@import url(/styles/reset.css);


/* Fonts
=====================================================================*/
.bl { font-family: UnifrakturMaguntia, cursive; }
body, button { font-family: Literata, serif; }
.charshape { font-family: Arial, sans-serif; }


/* Basics
=====================================================================*/
:root {
    --base: #4a3f3c;
    --both: #fff;
    --first: #dd605b;
    --second: #7dd6d5;
}

a { color: #fff; transition: all 0.05s ease-in-out; }
a:hover { text-decoration: none; }
blockquote { border-left: 10px solid rgba(0, 0, 0, 0.2); padding-left: 2rem; }
blockquote footer { margin-bottom: 1em; text-align: right; }
body { background: var(--base); color: #fff; font-size: 1.25rem; line-height: 1.5; }
cite, em, i { font-style: italic; }
em i { font-style: normal; }
h1 { font-size: 4rem; font-weight: 900; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 4rem; font-weight: bold; line-height: 1.1; margin-bottom: 0.5em; }
figure { margin: 2rem auto; text-align: center; width: 80%; }
figcaption { padding: 1rem 0; text-align: center; }
figcaption a { text-decoration: underline; }
figcaption a:hover { text-decoration: none; }
img { max-width: 100%; }
li { margin-bottom: 0.5em; }
main { display: block; padding-top: 51px; }
ol { list-style: decimal; margin-left: 2em; }
ol, p, table, ul { margin-bottom: 1em; }

section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6vw 5%;
}

strong { font-weight: 900; }
table { border-collapse: collapse; width: 100%; }
td { border: 1px solid var(--base); border-width: 1px 0; padding: 0.5em 1em; }
th { border: 1px solid var(--base); border-width: 1px 0; padding: 0.5em 1em; }
ul { list-style: disc; margin-left: 2em; }


/* Layout
=====================================================================*/
.content-narrow { margin: 0 auto; max-width: 873px; }


/* Content
=====================================================================*/

/* Action */
.action {
    background: var(--first);
    display: inline-block;
    font-weight: 900;
    padding: 0.7em 2em 1em;
    text-decoration: none;
}

.action:hover { background: var(--second); }

/* Back */
.back a { background: rgba(255, 255, 255, 0.1); display: block; padding: 1em; text-align: center; }
.back a:hover { background: rgba(255, 255, 255, 0.4); }

/* Banners */
.banner { display: block; width: 100%; }

/* Character shapes */
.charshape { font-size: 1.2em; }

/* Colors */
.both { color: var(--both); }
.first { color: var(--first); }
.second { color: var(--second); }

/* Columns */
    /* Explicit */
    [class *= "columns"] { display: flex; justify-content: space-between; }
    .column { flex: 0 0 auto; }
    .columns2 .column { width: 48%; }
    .columns3 .column { width: 31%; }
    .columns4 .column { width: 23%; }
    
    /* Natural */
    [class *= "cols"] { column-gap: 2rem; margin-left: 0; }
    .cols2 { columns: 2; }
    .cols3 { columns: 3; }
    .cols4 { columns: 4; }
    .cols6 { columns: 6; }
    .cols-section { break-inside: avoid; }

/* Cover */
.cover {
    background: repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 40px, var(--base) 40px, var(--base) 50px);
    border: 0;
    min-height: 95vh;
    text-align: center;
}

.cover-action { font-size: 9vw; line-height: 1; margin: 0; }
.cover-action a { color: var(--first); text-decoration: none; }
.cover-action a:hover { color: var(--second); }
.cover-byline { display: block; font-size: 1rem; font-style: italic; margin-bottom: 2rem; }
.cover-title { display: block; font-size: 9vw; font-weight: 900; line-height: 1; margin-bottom: 0.3em; }
.cover-title i { font-weight: 300; }
.cover-title span { display: block; font-size: 3vw; }
.cover-subtitle { display: block; font-size: 3vw; font-weight: 300; margin-bottom: 0.1em; text-transform: uppercase; }

/* Features */
.feature { display: flex; flex-direction: row; padding: 0; }
.feature.flipped { flex-direction: row-reverse; }
.feature-media { display: block; object-fit: cover; }
.feature-text { padding: 6vw 5%; }
.feature-text, .feature-media { flex: 0 0 auto; width: 50%; }

/* Figures */
.fig-l { float: left; margin: 0.5rem 2rem 1rem 0; width: auto; }

/* Flat lists */
.flat { list-style: none; margin-left: 0; }

/* Flip */
.flip-v { display: inline-block; transform: scaleY(-1) translateY(-18%); }

/* Fractions */
.frac {
    align-items: stretch;
    display: inline-flex;
    flex-direction: column;
    font-size: 0.45em;
    line-height: 1;
    margin: 0 0.2rem;
    text-align: center;
    vertical-align: 0.65rem;
}
 
.frac-div {
    border-bottom: 1px solid #000;
    color: transparent;
    height: 1px;
    margin: 0.2em 0 0.1em;
}

/* Footer */
.footer { padding: 3rem 5%; text-align: center; }
.footer a:hover { text-decoration: underline; }

/* Footnotes */
.footnotes { border-top: 1px solid rgba(0, 0, 0, 0.2); font-size: 0.9rem; margin-top: 2rem; padding-top: 1rem; }
.footnotes ul { margin-left: 0; }

/* Legend */
.legend { margin: 0 auto 3rem; text-align: center; }
.legend figcaption { margin-bottom: 1rem; }
.legend li { display: inline; margin: 0 0.5em; }
.legend ul { list-style: none; margin: 0; }

/* Lines */
.line { display: inline-block; height: 10px; }
.line.both { background: var(--both); }
.line.first { background: var(--first); }
.line.second { background: var(--second); }

/* Lists */
.list { display: flex; margin-bottom: 3rem; }
.list a { border-bottom: 0px solid var(--base); display: inline; text-decoration: none; }
.list a:hover { border-bottom-width: 10px; }
.list a.both:active, .list a.both { border-bottom-color: var(--both); color: var(--both); }
.list a.first:active, .list a.first { border-bottom-color: var(--first); }
.list a.second:active, .list a.second { border-bottom-color: var(--second); }
.list h2 { color: #fff; flex: 0 0 auto; font-size: 6.875rem; font-weight: 900; line-height: 1; text-align: center; text-transform: uppercase; width: 9rem; }
.list .len { font-weight: 300; letter-spacing: -0.25em; }
.list li { display: inline; margin: 0 0.4em 0 0; }
.list ol { flex: 1 1 auto; font-size: 2.5rem; margin: 0; padding-left: 1rem; }

/* Hanging quote */
.hanging-quote { text-indent: -0.5em; }

/* Header */
.header {
    background: var(--first);
    display: flex;
    font-size: 1.1rem;
    font-weight: 900;
    justify-content: space-between;
    line-height: 1.1;
    position: fixed;
    text-transform: uppercase;
    width: 100%;
    z-index: 100;
}

.header a { display: block; padding: 0.9em 1.1em; text-decoration: none; }
.header a:hover { background: rgba(255, 255, 255, 0.3); }
.header i { font-weight: normal; text-transform: none; }
#menu-toggle { display: none; }
.sitenav li { margin: 0; }
.sitenav ul { display: flex; list-style: none; margin: 0; justify-content: center; }

/* Intro */
.intro-portrait { text-align: center; }
.intro-portrait img { border-radius: 100%; max-width: 200px; }
.intro figure { width: auto; }

/* Inventory */
.inventory {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing:  -0.05em;
    line-height: 1;
    list-style: none;
    margin: 3rem 0;
    text-align: justify;
    text-transform: uppercase;
}

.inventory a { display: inline-block; position: relative; text-decoration: none; }
.inventory a:hover { box-shadow: 0 5px 0 #fff; }

.inventory a:hover:after {
    background: var(--base);
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    border: 2px solid #fff;
    border-radius: 2px;
    content: attr(title);
    font-size: 1.5rem;
    font-weight: normal;
    left: 50%;
    letter-spacing: normal;
    padding: 1rem;
    position: absolute;
    text-align: center;
    text-transform: none;
    top: 0;
    transform: translate(-50%, -100%);
    width: 10em;
}

.inventory li { display: inline-block; margin: 0; }

    /* Legend */
    .inventory-legend { margin: 2rem auto 3rem; }
    .inventory-legend ul { list-style: none; margin: 0; }
    .inventory-legend-bar { flex: 0 0 auto; }
    .inventory-legend-bar.both { background: repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9) 10px, var(--both) 10px, var(--both) 20px); margin: 0 2px; }
    .inventory-legend-bar.first { background: repeating-linear-gradient(-60deg, rgba(221, 96, 91, 0.9), rgba(221, 96, 91, 0.9) 10px, var(--first) 10px, var(--first) 20px); border-radius: 2px 0 0 2px; }
    .inventory-legend-bar.second { background: repeating-linear-gradient(-60deg, rgba(125, 214, 213, 0.9), rgba(125, 214, 213, 0.9) 10px, var(--second) 10px, var(--second) 20px); border-radius: 0 2px 2px 0; }
    .inventory-legend-chart { display: flex; height: 1rem; }
    .inventory-legend-labels { display: flex; margin: 0; width: 100%; }
    .inventory-legend-labels li { flex: 0 0 auto; text-align: center; }
    
    /* Letter chart */
    .letter-chart { align-items: flex-end; display: flex; justify-content: space-between; list-style: none; margin-left: 0; }
    .letter-chart-bar { display: flex; flex-direction: column-reverse; height: 300px; padding-top: 20px; }
    .letter-chart-label { display: block; text-align: center; text-transform: uppercase; }
    .letter-chart-point { border-radius: 3px; display: flex; flex-direction: column-reverse; padding: 0 3px; width: calc(100% / 26); }
    .letter-chart-point:hover { cursor: pointer; opacity: 0.7; }
    .letter-chart-point.on { background: rgba(255, 255, 255, 0.3); }
    .letter-chart-value { display: block; height: var(--size); }
    .letter-chart-value.both { background: var(--both); }
    .letter-chart-value.first { background: var(--first); }
    .letter-chart-value.second { background: var(--second); }

/* Key-value pairs */
.column .kv { margin-bottom: 2em; }
.kv { margin-left: 0; }
.kv li { display: flex; justify-content: space-between; text-indent: 0 !important; }
.kv li::after { border-bottom: 2px dotted var(--base); content: ""; display: block; flex: 1 1 auto; order: 2; margin: 0 0.5em 0.3em; }
.kv-key { order: 1; }
.kv-value { order: 3; }

/* Mask */
#mask {
    background: var(--base);
    height: 100vh;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 90;
}

#mask.invisible { background: none; opacity: 1; visibility: visible; }
#mask.on { cursor: pointer; opacity: 0.8; visibility: visible; }
.masked { overflow: hidden; }

/* Modal */
#modal {
    background: var(--base);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
    left: 50%;
    max-height: 80vh;
    max-width: 900px;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.1s ease-in-out;
    visibility: hidden;
    width: 83%;
    z-index: 100;
}

#modal.open { opacity: 1; visibility: visible; }

#modal-close {
    appearance: none;
    background: var(--base);
    border: 0;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 3rem;
    line-height: 1;
    margin: 0;
    padding: 0 1rem;
    text-decoration: none;
    text-align: center;
}

#modal-close span { display: block; transform: translateY(-13%); }
#modal-close:hover { opacity: 0.7; }
#modal-body { position: relative; }
#modal .term { margin: 0; max-width: none; }
#modal .term-nav { top: 0; }
#modal .term-nav-close { display: flex; flex: 0 0 auto; }

/* No break */
.nb { white-space: nowrap; }

/* Refs */
.ref { fill: transparent; stroke-width: 1.5px; transition: all 0.05s ease-in-out; }
.ref:hover { fill: rgba(255, 255, 255, 0.2); stroke: #fff !important; }

.ref.on {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    stroke: #fff !important;
    stroke-dasharray: 10;
    stroke-width: 5px;
}

.ref.bi { stroke-width: 4px; }
.ref.bi.on { animation-name: bidir; animation-duration: 1s; }
.ref-axis { stroke: #fff; stroke-width: 2px; }
.ref-axis-end { fill: #fff; transform: translate(-10px, -5px); }
.ref-axis-start { fill: #fff; transform: translateX(5px); }
.ref-chart { height: 80vh; position: relative; }
.ref-chart svg { height: 100%; width: 100%; }
.ref-edition.first .ref-unknown { stroke: var(--both); }
.ref-edition.first .ref.backward { stroke: url(#first-backward); }
.ref-edition.first .ref.backward.on { animation-name: counterclockwise; }
.ref-edition.first .ref.bi { stroke: var(--first); }
.ref-edition.first .ref.forward { stroke: url(#first-forward); }
.ref-edition.first .ref.forward.on { animation-name: clockwise; }
.ref-edition.second .ref-unknown { stroke: var(--both); }
.ref-edition.second .ref.backward { stroke: url(#second-backward); }
.ref-edition.second .ref.backward.on { animation-name: clockwise; }
.ref-edition.second .ref.bi { stroke: var(--second); }
.ref-edition.second .ref.forward { stroke: url(#second-forward); }
.ref-edition.second .ref.forward.on { animation-name: counterclockwise; }
.ref-bands .ref-band { fill: #fff; opacity: 0.1; }
.ref-bands .ref-band:nth-child(2n+2) { opacity: 0; }
.ref-title { left: 0; position: absolute; }
.ref-title.first { top: 20%; }
.ref-title.second { bottom: 20%; }
.ref-unknown { stroke-width: 1.5px; }
@media (max-aspect-ratio: 1/1) { .ref-chart { height: 100vw; } }

@keyframes clockwise { to { stroke-dashoffset: -1000; } }
@keyframes counterclockwise { to { stroke-dashoffset: 1000; } }
@keyframes bidir {
    0% { stroke-dashoffset: 20; }
    50% { stroke-dashoffset: -20; }
    100% { stroke-dashoffset: 20; }
}

/* Roman numeral lists */
.upper-roman { list-style-type: upper-roman; margin-left: 3em; }

/* Same */
.same { margin: 0 1em; }

/* Small caps */
.scaps { font-style: normal; font-variant: small-caps; }

/* Symbol signs */
.symbol { display: inline-block; text-align: center; width: 1.5rem; }

/* Tables */
.table { overflow: auto; }
.rotate { text-align: center; vertical-align: bottom; }
.rotate span { transform: rotate(180deg); white-space: nowrap; writing-mode: vertical-rl; }

/* Term */
.term { margin: 3rem auto; max-width: 900px; position: relative; }
.term .tab-pane { display: none; }
.term .tab-pane.active { display: block; }
.term ul { list-style: none; }
.term ul li { text-indent: -1em; }
.term-content { background: #fff; color: var(--base); padding: 3rem; }
.term-content a { color: #000; }
.term-extra { font-weight: normal; }
.term-nav { background: #fff; display: flex; list-style: none; margin: 0; position: sticky; top: 58px; }
.term-nav a { color: #fff; display: block; padding: 1em; position: relative; text-transform: uppercase; text-align: center; text-decoration: none; }
.term-nav a:active { color: #fff !important; }

.term-nav a.active:after {
    border-color: #000 transparent transparent transparent;
    border-style: solid;
    border-width: 16px 20px 0 20px;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 0;
}

.term-nav a:hover { opacity: 0.7; }
.term-nav a.first { background: var(--first); }
.term-nav a.first.active:after { border-top-color: var(--first); }
.term-nav a.second { background: var(--second); }
.term-nav a.second.active:after { border-top-color: var(--second); }
.term-nav li { flex: 1 1 auto; margin: 0; }

    /* Annals of printing */
    .annals { list-style: none; margin-left: 0; }
    .annals li { padding-left: 3.3em; text-indent: -3.3em; }
    .annals p { padding-left: 1em; text-indent: -1em; }
    
    /* Caret */
    .caret {
        display: inline-block;
        font-size: 2.3em;
        line-height: 1;
        transform: scaleX(0.8);
        vertical-align: -0.375em;
    }
    
    /* Cedilla */
    .cedil-fake { display: inline-block; transform: rotate(180deg) translateY(-0.5em); }
    
    /* Chessmen */
    .chess { border: 6px double var(--base); margin: 2rem auto; width: 80%; }
    .chess::after { clear: both; content: " "; display: block; }
    
    .chess-piece {
        font-size: 3rem;
        left: 50%;
        line-height: 1;
        position: absolute;
        text-shadow: #fff 6px 0px 0px, #fff 5.91686px 0.995377px 0px, #fff 5.66974px 1.96317px 0px, #fff 5.2655px 2.87655px 0px, #fff 4.71532px 3.71022px 0px, #fff 4.03447px 4.44106px 0px, #fff 3.24181px 5.04883px 0px, #fff 2.35931px 5.51667px 0px, #fff 1.41143px 5.83163px 0px, #fff 0.424423px 5.98497px 0px, #fff -0.574341px 5.97245px 0px, #fff -1.55719px 5.79441px 0px, #fff -2.49688px 5.45579px 0px, #fff -3.36738px 4.96596px 0px, #fff -4.14455px 4.33852px 0px, #fff -4.80686px 3.59083px 0px, #fff -5.33596px 2.74364px 0px, #fff -5.71718px 1.8204px 0px, #fff -5.93995px 0.84672px 0px, #fff -5.99811px -0.150428px 0px, #fff -5.89004px -1.14341px 0px, #fff -5.61874px -2.1047px 0px, #fff -5.19172px -3.00766px 0px, #fff -4.62082px -3.82727px 0px, #fff -3.92186px -4.54082px 0px, #fff -3.11421px -5.12852px 0px, #fff -2.22026px -5.57409px 0px, #fff -1.26477px -5.86518px 0px, #fff -0.274238px -5.99373px 0px, #fff 0.723898px -5.95617px 0px, #fff 1.70197px -5.75355px 0px, #fff 2.63288px -5.39147px 0px, #fff 3.49082px -4.87998px 0px, #fff 4.25202px -4.23324px 0px, #fff 4.89538px -3.46919px 0px, #fff 5.40307px -2.60899px 0px, #fff 5.76102px -1.67649px 0px, #fff 5.95932px -0.697531px 0px;
        top: 50%;
        transform: translate(-50%, -70%);
    }
    
    .chess-square { background: #fff; float: left; padding-bottom: 12.5%; position: relative; width: 12.5%; }
    
    .chess-square:nth-child(16n+2),
    .chess-square:nth-child(16n+4),
    .chess-square:nth-child(16n+6),
    .chess-square:nth-child(16n+8),
    .chess-square:nth-child(16n+9),
    .chess-square:nth-child(16n+11),
    .chess-square:nth-child(16n+13),
    .chess-square:nth-child(16n+15) {
        background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 1.5px, var(--both) 1.5px, var(--both) 4px);
        /*background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");*/
    }
    
    /* Correcting */
    .correcting {
        background: var(--base);
        border: 4px solid var(--base);
        display: grid;
        grid-gap: 1px;
        grid-template-columns: repeat(3, 1fr);
        list-style: none;
        margin: 2rem auto;
        max-width: 22em;
    }
    
    .correcting li { background: #fff; margin: 0; padding: 1em 0.5em; text-align: center; }
    
    /* Giving out paper and cards */
    .qty { white-space: nowrap; }
    .qty tbody th { border-width: 0 1px; font-weight: 900; text-align: right; }
    .qty td { border-width: 0 1px; text-align: right; }
    .qty td, .qty th { padding: 0.3em 0.5em; }
    .qty th { border-width: 1px; text-align: center; }
    .qty th strong { display: block; }
    .qty tr:last-child td, .qty tr:last-child th { border-bottom-width: 1px; }
    
    /* Logotypes */
    .logotypes { display: flex; justify-content: center; margin-left: 0; }
    .logotypes li { margin: 0 0.5em; text-align: center; }
    .logotypes strong { display: block; font-weight: normal; }
    
    /* Numerals */
    .numeral-c { display: inline-block; transform: rotate(180deg) translateY(-30%); }
    
    /* Turned letters */
    .turned-letter-feet {
        border: 3px solid var(--base);
        border-width: 3px 0;
        display: inline-block;
        height: 0.8em;
        width: 0.7em;
    }
    
    .turned-letter-rotated { display: inline-block; transform: rotate(180deg) translateY(-28%); }

/* Tree */
.tree { display: flex; height: 80vh; list-style: none; margin: 2rem 0; justify-content: space-between; }
.tree li { margin: 0; }
.tree-edition { border-radius: 2px; flex: 0 0 auto; height: 100%; position: absolute; width: 100%; }
.tree-edition.both { background: #6f615e; z-index: 2; }
.tree-edition.first + .tree-edition.both { right: 0; }
.tree-edition.first { background: var(--first); z-index: 1; }
.tree-edition.second { background: var(--second); z-index: 1; }

.tree-letter {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 2px;
    width: calc(var(--size) * (100% - (4px * 24)));
}

.tree-letter ol { display: flex; flex-direction: column; height: 100%; justify-content: space-between; margin: 0; }

.tree-term {
    display: flex;
    flex: 0 0 auto;
    height: calc(var(--size) * (100% - (4px * (var(--total) - 1))));
    min-height: 2px;
    transition: all 0.05s ease-in-out;
    position: relative;
}

.tree-term.on { background: var(--base); box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(0, 0, 0, 1); }
.tree-term.on:hover { opacity: 1; }
.tree-term:hover { opacity: 0.7; }

    /* Tree legend */
    .tree-legend { align-items: flex-start; display: flex; font-size: 1rem; list-style: none; justify-content: space-between; margin-left: 0; }
    .tree-legend li { flex: 0 0 auto; width: 18%; }
    .tree-legend .tree-term { height: 1rem; margin-bottom: 0.3rem; }
    .tree-legend-label { line-height: 1.2; }
    .tree-legend-label span { display: block; }


/* Widths
=====================================================================*/
@media screen and (max-width: 1130px) {
    #menu-toggle { display: block; }
    
    .sitenav {
        background: var(--first);
        left: 0;
        height: calc(100vh - 51px);
        position: fixed;
        top: 51px;
        transition: all 0.05s ease-in-out;
        transform: translateY(-200%);
        width: 100vw;
    }
    
    .sitenav a { padding: 1em 1.1em; }
    .sitenav ul { display: block; }
    .sitenav.open { transform: translateY(0); }
}

@media screen and (max-width: 1050px) {
    /* Basics */
    h1 { font-size: 3rem; }
    h2 { font-size: 2rem; }
    
    /* Header */
    .logo-title { font-size: 2rem; }
    .logo-subtitle { font-size: 1.25rem; }
    
    /* Lists */
    .list h2 { font-size: 4.5rem; width: 5rem; }
    .list ol { font-size: 1.5rem; }
    
    /* Posters */
    .feature, .feature.flipped { flex-direction: column; }
    .feature-media { order: 1; width: 100%; }
    .feature-text { order: 2; width: auto; }
    
    /* Term */
    .term-content { padding: 2rem; }
}

@media screen and (max-width: 500px) {
    /* Basics */
    blockquote { margin-left: 1rem; }
    body { font-size: 1rem; }
    figure { margin: 1rem auto; }
    h1 { font-size: 1.5rem; }
    
    /* Columns */
    .cols2, .cols3 { columns: 1; }
    [class *= "columns"] { display: block; }
    [class *= "columns"] .column { width: auto; }
    
    /* Cover */
    .cover-action { font-size: 3rem; }
    .cover-byline { font-size: 0.8rem; }
    .cover-title span, .intro-subtitle { font-size: 4.5vw; }
    
    /* Header */
    .header { margin-bottom: 1rem; }
    .header .extra { display: none; }
    
    /* Inventory */
    .inventory { font-size: 1.1rem; }
    .letter-chart { display: block; }
    .letter-chart-bar { flex-direction: row; height: auto; padding: 1px 20px 1px 0; width: 100%; }
    .letter-chart-label { align-items: center; display: flex; justify-content: center; width: 2em; }
    .letter-chart-point { flex-direction: row; height: 20px; margin-bottom: 4px; width: auto; }
    .letter-chart-value { height: auto; width: var(--size); }
    
    /* Lists */
    .list { display: block; }
    .list h2 { margin-bottom: 0.2em; text-align: left; width: auto; }
    .list ol { font-size: 1.1rem; line-height: 1.6; padding-left: 0; width: auto; }
    
    /* Modal */
    #modal { width: 96%; }
    
    /* Refs */
    .ref-title.first { top: 0; }
    .ref-title.second { bottom: 0; }
    
    /* Term */
    .term-content { padding: 1.5rem 1rem 1rem; }
    
        /* Specifics */
        .chess-piece {
            font-size: 2rem;
            text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838247px 0px;
        }
    
    /* Tree */
    .tree-legend { font-size: 0.8rem; }
    .tree-letter {
        min-width: 1px;
        width: calc(var(--size) * (100% - (2px * 24)));
    }
    
    .tree-term {
        height: calc(var(--size) * (100% - (2px * (var(--total) - 1))));
        min-height: 1px;
    }
}</pre></body></html>