@charset "UTF-8";

@font-face { font-family: 'Bebas Neue SemiRounded'; src: url('/fonts/BebasNeueSemiRounded-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Bebas Neue Pro Expanded'; src: url('/fonts/BebasNeuePro-ExpandedBook.woff2') format('woff2'); }
@font-face { font-family: 'Charis'; src: url('/fonts/Charis.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; src: url('/fonts/Literata-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; src: url('/fonts/Literata-Bold.woff2') format('woff2'); font-weight: bold; }
@font-face { font-family: 'Literata'; src: url('/fonts/Literata-Italic.woff2') format('woff2'); font-style: italic; }

:root {
    --body-family: "Literata", serif;
    --heading-family: "Bebas Neue SemiRounded", sans-serif;
    --label-family: "Bebas Neue Pro Expanded", sans-serif;
    --ipa-font-family: 'Charis', 'Charis SIL', 'Cambria', 'Times New Roman', sans-serif;
    --text-color: #252525;
    --background-color: white;
    --link-color:  #385cc7;
    --info-color: #ebebeb;
    --lij-color: #990000;
    --lij-muted-color: #8f6666;
    --highlight-color: #990000;
    --ipa-color: #252525;
    --icons-color: #aaaaaa;
    --sidebar-width: min(12em, 225px);
    --top-bar-height: 5.5ex;
}

html {
    box-sizing: border-box;
    font: clamp(17px, calc(15px + 0.2vw), 25px)/min(calc(1.1em + 0.2vw),30px) var(--body-family);
    font-variant-numeric: oldstyle-nums;
    scroll-behavior: smooth;
    text-wrap: pretty;
    -webkit-text-size-adjust: 100%;
}
*, *:before, *:after { box-sizing: inherit; }

body { margin: 0; overflow-x: hidden; }
p { hyphens: auto; margin: 0.5em auto; }
a { outline: none; text-decoration: none; color: var(--link-color); }
em > em { font-style: normal; }
a:hover { text-decoration: underline; }

section > p, section > li, div.info, article > p { hyphens: auto; text-align: justify; }

h1, h2, h3 { font-family: var(--heading-family); font-weight: normal; letter-spacing: 0.05em; line-height: 1; }
.hi { color: var(--highlight-color); }
h1 .ipa, h2 .ipa, h3 .ipa { font-weight: normal; font-size: 0.9em; }
.center { text-align: center !important; }
.right { text-align: right !important; }

/* Lists */

ul { list-style-type: disc; margin: 0.5em 0; padding: 0; }
ul ul { list-style-type: circle; }
ul li { margin: 0 0 0 1.5em; }
ul.plain { list-style-type: none; }
ul.plain li { margin: 0.5em auto; }
ul.plain.compact li { margin: 0 auto; }

ul.ammiaascì { list-style-type: none; margin: 0; }
ul.ammiaascì li { display: contents; }
ul.ammiaascì li:not(:first-of-type)::before { content: "\2022\00a0"; }
ul.ammiaascì li:not(:first-of-type) a { margin-left: 0.25em; }
ul.ammiaascì li:not(:last-of-type) a { margin-right: 0.25em; }

ol {
    counter-reset: item calc(var(--start) - 1);
}
ol > li { counter-increment: item; }
ol > li::marker { content: counters(item, ".") ". "; }

ol ol { counter-reset: subitem calc(var(--start) - 1); }
ol ol > li { counter-increment: subitem; }
ol ol > li::marker { content: counters(item, ".") "." counters(subitem, ".", lower-alpha) ". "; }

ol ol ol { counter-reset: subsubitem calc(var(--start) - 1); }
ol ol ol > li { counter-increment: subsubitem; }
ol ol ol > li::marker { content: counters(item, ".") "." counters(subitem, ".", lower-alpha) "." counters(subsubitem, ".", lower-roman) ". "; }

ol ul > li { margin: 0; }

.strike { text-decoration: line-through; }
span.ipa { font-family: var(--ipa-font-family); font-size: 1.02em; hyphens: none; color: var(--ipa-color); }
span.grapheme, .ipa { font-variant: normal; }
span.translatant,
span[lang=lij] {
    color: var(--lij-color);
    font-style: italic;
    & i {
        font-style: normal;
        color: var(--lij-muted-color);
    }
}
span.latin, span[lang=la] { font-variant: small-caps; }
span.block { white-space: nowrap; display: contents; }
span.muted { color: var(--icons-color); }
span.sc { font-variant: small-caps; }
span.paragraph-title { font-variant: small-caps; }
sup { line-height: 0; font-size: 0.75em; }

@media not screen { .mobile { display: none; } .nomobile { display: auto; } }
@media only screen and (min-width: 900px) { .mobile { display: none; } .nomobile { display: auto; } }
@media only screen and (max-width: 900px) { .mobile { display: auto; } .nomobile { display: none; } }

img.icon { height: 0.8em; vertical-align: baseline; display: inline; }
img.big-icon { height: 1.5em; vertical-align: baseline; display: inline; }

span.label {
    text-transform: uppercase;
    border-radius: 4px;
    padding: 1px 4px;
    font-family: var(--label-family);
    border: 1px solid var(--text-color);
    font-weight: normal;
    font-size: 0.8em;
    white-space: nowrap;
}

body > nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    transition: all 0.3s;
    transform: translateX(calc(0px - var(--sidebar-width)));
    border: none;
    padding: var(--top-bar-height) 1em 0 1em;
}

#nav > ul { padding-bottom: 20px; }
#nav > ul ul { padding: 0 0 0 0.5em; margin: 0.25em 0; }
#nav ul li { margin: 0.1em auto; }
#nav a {
    font: 1.3rem var(--heading-family);
    color: var(--highlight-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
[data-active="True"], #nav a:hover { text-decoration: underline 3px; }
#nav ul ul a { font-size: 1.2rem; }

#page-wrapper { transition: all 0.3s; }
body.nav-visible > #nav {
    transform: none;
    border-right: 2px solid var(--info-color);
}
body.nav-visible > #page-wrapper {
    transform: translateX(var(--sidebar-width));
}
@media only screen and (min-width: 900px) {
    body.nav-visible > #page-wrapper {
        transform: none;
        margin-left: var(--sidebar-width);
    }
}

hr {
    width: 76%;
    margin: 30px auto;
    border: none;
    height: 1.5px;
    background-color: var(--lij-color);
}

#nav #toc { list-style-type: disc; padding-top: 20px; margin-left: 15px; margin-bottom: 50px; }
#nav #toc li { margin: 0; padding: 0; }

#nav #toc a {
    font: 0.9rem/1 var(--body-family);
    font-variant: normal;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-color)
}

header#top-bar {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--highlight-color);
    border-bottom: 1px solid var(--background-color);
    padding: 8px 12px;
    height: var(--top-bar-height);
}

header#top-bar button#menu-toggle i {
    padding-right: 5px;
    position: relative;
    top: -3px;
}

@media only screen and (max-width: 900px) { header#top-bar button#menu-toggle i { top: 0; } }

header#top-bar button#menu-toggle {
    display: block;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    margin: 0;
    color: var(--background-color);
    font-size: 1rem;
}

header#top-bar h1 { margin: 0; padding: 0 1em; text-overflow: ellipsis; }
header#top-bar #translations a { margin-left: 5px; }

header#top-bar #translations a, header#top-bar button#menu-toggle span, header#top-bar h1 {
    font: 1.4rem var(--heading-family);
    color: var(--background-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration-thickness: 3px;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

main section {
    max-width: min(40em, 100svw);
    min-width: 50%;
    padding: 1em;
}

main section header img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

main h1 { font-size: 1.8rem; margin: 25px 0; }
main h2, main article > h1 { font-size: 1.4rem; margin: 25px 0; }
main h3, main article > h2 { font-size: 1.15rem; margin: 20px 0 10px 0; }
main div.info > h3 { margin-top: 0; }

figure > * { margin: 10px auto; }
figure > img { max-width: 100%; width: 800px; }

figure.picfloat, figure.piccenter {
    max-width: min(768px, 50%);
    margin: 0;
    font-size: 0.8em;
    text-align: center;
}

figure.picfloat { float: right; }
figure.piccentre { max-width: 80%; margin: 20px auto; }

figure.picfloat > * { margin: 10px; }
figure.piccentre > * { margin: 0; }

img.smallfloat {
    margin: 8px;
    max-width: min(30%, 150px);
    float: right;
}

img.medfloat {
    margin: 8px;
    max-width: min(50%, 250px);
    float: right;
}

@media only screen and (max-width: 800px) {
    figure.picfloat { float: none; max-width: 70%; margin: 10px auto; }
}

.subtitle, .suptitle { font-size: 0.9em; text-transform: uppercase; font-family: var(--label-family); }
h1+div.subtitle, h2+div.subtitle, h3+div.subtitle { margin-top: -20px; margin-bottom: 20px; }
div.suptitle+h1, div.suptitle+h2, div.suptitle+h3 { margin-top: 5px; }
div.suptitle:not(:first-child), article>div.suptitle:first-child { margin-top: 30px; }

.contents h2 { margin-top: 10px; }
.contents ol { margin-bottom: 10px; }

div.info, .redirect-box > div, .contents {
    border-radius: 10px;
    padding: 0.75em 1em;
    width: fit-content;
    box-shadow: 0px 0px 10px var(--icons-color);
    margin: 20px 0;
}

.full-max-width {
    max-width: 100% !important;
}
.redirect-box { display: block; width: fit-content; max-width: 25em; color: var(--text-color); font-size: 1.05em; }
.redirect-box > div > img.icon { height: 1em; position: relative; top: 3px; display: inline; }
span.heading-style { font-family: var(--heading-family); font-weight: normal; letter-spacing: 1px; }
a.redirect-box:hover { text-decoration: none; }

div.bookbox h2,
div.bookbox .suptitle,
div.bookbox .subtitle {
    text-align: center;
    clear: both;
}
div.bookbox .suptitle { font-size: 1.05em; }
div.bookbox {
    border-radius: 10px;
    padding: 15px 20px;
    margin: 20px 0;
    box-shadow: 0px 0px 10px var(--icons-color);
    display: flow-root;
    width: fit-content;
}
div.bookbox a.cover {
    margin: 0;
    padding: 0;
}
div.bookbox a.cover img {
    max-width: 40%;
    max-height: 300px;
    margin: 1em;
    border-radius: 10px;
    box-shadow: 0px 0px 10px var(--icons-color);
}
div.bookbox a.cover img.fl { float: left; }
div.bookbox a.cover img.fr { float: right; }
div.bookbox a.redirect-box { clear: both; }
div.bookbox a.redirect-box > div { margin-bottom: 0; }

@media only screen and (max-width: 600px) {
    div.bookbox a.cover {
        text-align: center;
        margin: 0 auto;
        display: block;
    }
    div.bookbox a.cover img {
        float: none !important;
        margin: 1em;
        max-width: 90%;
        max-height: 50vh;
    }
}

button.play-btn {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    margin: 0;
    padding: 0;
    color: var(--highlight-color);
    font-size: 0.9em;
}
button.play-btn:hover { opacity: 0.5; }

.bib-name { font-variant: small-caps; }
.bib-title {
    font-style: italic;
    i { font-style: normal; }
}

.book-grid-1, .book-grid-2, .book-grid-3 {
    display: grid;
    grid-column-gap: 20px;
    margin: 0 5px;
    align-items: self-start;
}
.book-grid-1 img, .book-grid-2 img, .book-grid-3 img {
    max-width: 100%;
    display: block;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #aaa;
}
.no-shadow img {
    box-shadow: none !important;
}
.small-img img {
    max-width: 100px !important;
}
.book-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.book-grid-2 { grid-template-columns: 1fr 1fr; }
.book-grid-1 { grid-template-columns: 1fr 1fr; }
@media only screen and (max-width: 600px) {
    .book-grid-3,
    .book-grid-2,
    .book-grid-1 {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.book-grid-1 > div,
.book-grid-2 > div,
.book-grid-3 > div {
    margin: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.book-grid-1 > div > div:first-child,
.book-grid-2 > div > div:first-child,
.book-grid-3 > div > div:first-child {
    margin-bottom: 10px;
}

.book-grid-1 > div > div,
.book-grid-2 > div > div,
.book-grid-3 > div > div {
    max-width: min(250px, 100%);
}

.centerbox {
    display: block;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 40px;
}

.centerbox img, .centerbox p {
    display: block;
    max-width: min(1500px, 100%);
    margin: 10px auto;
}

.centerbox img { box-shadow: 0px 0px 10px var(--icons-color); }

section h1[id], section h2[id], section h3[id], section p[id] {
    scroll-margin-top: min(15vh, 100px);
}

section h1 a, section h2 a, section h3 a {
    color: var(--text-color);
    text-decoration: none;
}
section h1 a:hover, section h2 a:hover, section h3 a:hover {
    text-decoration: underline;
    text-decoration-skip-ink: all;
    text-decoration-thickness: 3px;
}

blockquote.source, details.translation {
    margin: 1rem 1.5rem;
    padding: 0.5rem;
    border-left: 0.75rem solid var(--icons-color);
    background: linear-gradient(to right, var(--info-color), var(--background-color));
}

div.registraçion {
    margin: 1rem 1.5rem;
    padding-top: 0.5rem;
}
div.registraçion p {
    margin-top: 0;
    font-family: var(--label-family);
    font-size: 0.9em;
    text-transform: uppercase;
}
div.registraçion audio { width: min(350px, 90%); }

blockquote.source[lang=lij] {
    color: var(--text-color);
    font-style: normal;
}

summary { color: var(--link-color); }

summary:hover {
    text-decoration: underline;
    cursor: pointer;
}


details.info-bubble {
    border-radius: 10px;
    padding: 0.5em 0.75em;
    width: fit-content;
    margin: 15px 0;
    border: 3px solid var(--info-color);
}
details.info-bubble summary { color: var(--text-color); }

small.translation { font-style: italic; }
small.translation em { font-style: normal; }

small.license { font-size: 0.8em; }
small.license a { color: var(--text-color); }

sup.fn { user-select: none; } /* Footnote */

/* Tables */

table {
    border: none;
    border-spacing: 0;
    margin: 25px 0;
}

table td { vertical-align: middle; }
table.top-align td { vertical-align: top; }

thead:first-of-type tr:first-of-type th { border-top: 2px solid var(--text-color); }
thead tr:last-of-type th { border-bottom: 1px solid var(--text-color); }
table { border-bottom: 2px solid var(--text-color); }

thead th { border-top: 1px solid var(--text-color); }

th {
    font-family: var(--heading-family);
    font-weight: normal;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 5px 5px 2px 5px;
}

td { padding: 5px; }
td:not(:first-of-type) { padding-left: 10px; }
td img.big-icon { vertical-align: text-bottom; }

tbody tr:nth-child(odd) td { background-color: var(--info-color); }
tbody tr:nth-child(even) td { background-color: var(--background-color); }
tbody tr:nth-child(odd) td[rowspan="2"],
tbody tr:nth-child(odd) td[rowspan="4"] {
    background: linear-gradient(180deg, var(--info-color) 75%, var(--background-color));
}
tbody tr:nth-child(even) td[rowspan="2"],
tbody tr:nth-child(even) td[rowspan="4"] {
    background: linear-gradient(180deg, var(--background-color) 75%, var(--info-color));
}

td ol, td ul { padding-left: 1.5em; margin: 0; }

table.stickyhead thead:first-of-type tr {
    position: sticky;
    top: var(--top-bar-height);
    background-color: var(--background-color);
    z-index: 10;
}

@media only screen and (max-width: 800px) {
    div.table-scroll { overflow: scroll; max-width: 90vw; }
    div.table-scroll > table.stickyhead thead:first-of-type tr { position: relative; top: auto; }
}

table.first-c td:first-of-type, table.first-c th:first-of-type { text-align: center; }
table.second-c td:nth-of-type(2), table.second-c th:nth-of-type(2) { text-align: center; }
table.first-r td:first-of-type, table.first-r th:first-of-type { text-align: right; }
table.last-c td:last-of-type, table.last-c th:last-of-type { text-align: center; }

table.timeline, .timeline tbody td { height: 100%; }
table.timeline td div {
    height: 100%;
    padding-left: 5px;
    border-left: 3px solid var(--icons-color);
    display: flex;
    align-items: center;
}
table.timeline tbody tr td:not(:first-of-type) {
    background: none;
    background-color: var(--background-color);
}

table.examples {
    border-collapse: collapse;
    border: none;
    margin-top: 25px;
    margin-bottom: 25px;
}
table.examples tr:nth-child(odd) { background-color: var(--info-color); }

#bib-filters {
    border: 1px solid var(--icons-color);
    border-radius: 4px;
    width: fit-content;
    padding: 10px;
    label { display: block; }
}