
:root {
  --af-ink:#25231f;
  --af-muted:#716d65;
  --af-paper:#f7f5ef;
  --af-gold:#ffae00;
  --af-line:#ded9ce;
  --af-sans:Montserrat,Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

body.af-reading {
  margin:0;
  padding:0;
  background:var(--af-paper);
  color:var(--af-ink);
  font-family:'Gentium Book Basic',Georgia,serif;
  overflow-x:hidden;
}

.af-reading .af-wrap {
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

/* CABEÇALHO INSTITUCIONAL */

.af-reading .af-bar {
  background:#faf9f5;
  border-bottom:1px solid var(--af-line);
}

.af-reading header.site.af-header {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:60px 0 0;
  text-align:center;
}

.af-reading .af-brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  color:var(--af-ink);
  text-decoration:none;
  text-align:center;
}

.af-reading .af-logo {
  display:block;
  flex-shrink:0;
  width:78px;
  height:78px;
  object-fit:contain;
  margin:0 auto 18px;
}

.af-reading .af-brand-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.af-reading .af-brand-name {
  font:700 30px/1.2 var(--af-sans);
  letter-spacing:.10em;
  color:var(--af-ink);
}

.af-reading .af-brand-slogan {
  margin-top:12px;
  font-family:'Gentium Book Basic',Georgia,serif;
  font-size:15px;
  font-style:italic;
  line-height:1.5;
  color:#806a4b;
}

.af-reading .af-brand-institute {
  margin-top:12px;
  font:500 10px/1.5 var(--af-sans);
  letter-spacing:.06em;
  color:var(--af-muted);
}

.af-reading .af-menu-divider {
  width:100%;
  height:1px;
  margin-top:32px;
  background:var(--af-line);
}

.af-reading nav.top {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px 34px;
  width:100%;
  margin:0;
  padding:20px 0;
  border:0;
  font:500 11px var(--af-sans);
  letter-spacing:.13em;
  text-transform:uppercase;
}

.af-reading nav.top a {
  display:inline-block;
  margin:0;
  padding:3px 0;
  color:var(--af-ink);
  text-decoration:none;
  white-space:nowrap;
}

.af-reading nav.top a:hover {
  color:#986600;
}

/* ESTRUTURA DA PÁGINA */

.af-reading .af-main {
  padding-top:34px;
  padding-bottom:56px;
}

.af-reading .af-crumbs {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin:0 0 32px;
  color:var(--af-muted);
  font:12px/1.6 var(--af-sans);
}

.af-reading .af-crumbs a {
  color:#805c1e;
  text-decoration:none;
}

.af-reading .af-crumbs a:hover {
  text-decoration:underline;
}

.af-reading .af-notice {
  padding:25px;
  border:1px solid var(--af-line);
  background:#fff;
  font:15px/1.7 var(--af-sans);
}

.af-reading .af-notice a {
  color:#8a621e;
}

/* LEITOR */

#al-reader {
  max-width:820px;
  margin:0 auto;
  color:var(--af-ink);
  font-family:'Gentium Plus','Gentium Book Basic',Georgia,serif;
}

/*
 * TIPOGRAFIA DOS TEXTOS GREGOS E LATINOS
 *
 * Restaura a fonte Gentium instalada localmente.
 * A especificidade destas regras prevalece sobre
 * a fonte Georgia definida pelo reader.js.
 *
 * Preserva as marcações amarelas e a seleção
 * de palavras com anotações colaborativas.
 */

#al-reader .adf-work {
  font-family:'Gentium Plus','Gentium Book Basic',Georgia,serif;
}

#al-reader .adf-work .adf-line {
  font-family:'Gentium Plus','Gentium Book Basic',Georgia,serif;
  font-size:21px;
  line-height:1.85;
  font-kerning:normal;
  font-variant-ligatures:normal;
}

#al-reader .adf-work .adf-word {
  font-family:inherit;
  font-kerning:inherit;
  font-variant-ligatures:inherit;
}

#al-reader .adf-work-title,
#al-reader .adf-book-title {
  font-family:'Gentium Plus','Gentium Book Basic',Georgia,serif;
}

#al-reader .hd {
  padding-bottom:24px;
  margin-bottom:16px;
  border-bottom:1px solid var(--af-line);
}

#al-reader .kick {
  color:#8a621e;
  font:500 10px/1.6 var(--af-sans);
  letter-spacing:.16em;
  text-transform:uppercase;
}

#al-reader .ttl {
  margin:10px 0;
  color:var(--af-ink);
  font:normal clamp(32px,4vw,46px)/1.15
    'Sorts Mill Goudy',Georgia,serif;
}

#al-reader .by {
  color:var(--af-muted);
  font-size:15px;
  line-height:1.6;
  font-style:italic;
}

/* NAVEGAÇÃO ENTRE LIVROS */

#al-reader .nav {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 30px;
}

#al-reader .nav button {
  margin:0;
  padding:9px 14px;
  border:1px solid var(--af-line);
  border-radius:3px;
  background:#fff;
  color:#65502d;
  font:500 12px/1.4 var(--af-sans);
  cursor:pointer;
}

#al-reader .nav button:hover {
  border-color:#ad853e;
  background:#f5eedf;
}

#al-reader .nav button.on {
  background:var(--af-ink);
  border-color:var(--af-ink);
  color:#fff;
}

/* TEXTO GREGO E LATINO */

#al-reader .stage {
  position:relative;
  min-width:0;
}

#al-reader .body {
  min-width:0;
}

#al-reader .line {
  display:flex;
  align-items:baseline;
  gap:15px;
  margin:0;
  font-size:21px;
  line-height:1.85;
}

#al-reader .num {
  flex:0 0 38px;
  text-align:right;
  color:#a9a194;
  font-size:12px;
  font-style:italic;
}

#al-reader .txt {
  flex:1;
  min-width:0;
  white-space:normal;
  overflow-wrap:break-word;
  word-spacing:normal;
}

#al-reader .w {
  cursor:pointer;
  padding:0;
  border-bottom:1px dotted transparent;
  border-radius:2px;
  transition:background .15s ease;
}

#al-reader .w:hover {
  background:#f0e3c8;
  border-bottom-color:#9c711c;
}

#al-reader .w.sel {
  background:#ead6ab;
  border-bottom-color:#8a621e;
}

/* DICIONÁRIO */

#al-reader .pop {
  position:absolute;
  z-index:60;
  display:none;
  width:min(370px,100%);
  max-width:calc(100vw - 40px);
  padding:18px;
  border:1px solid #cbb995;
  border-radius:5px;
  background:#fffdf8;
  box-shadow:0 12px 30px rgba(37,35,31,.16);
  color:var(--af-ink);
  overflow-wrap:break-word;
}

#al-reader .hw {
  margin-bottom:5px;
  color:var(--af-ink);
  font:normal 25px/1.3 'Sorts Mill Goudy',Georgia,serif;
}

#al-reader .pos {
  color:#8a621e;
  font:italic 13px/1.5
    'Gentium Book Basic',Georgia,serif;
}

#al-reader .mor {
  margin:12px 0;
  padding:10px 0;
  border-top:1px solid var(--af-line);
  border-bottom:1px solid var(--af-line);
  font-size:14px;
  line-height:1.6;
}

#al-reader .def {
  max-height:250px;
  overflow-y:auto;
  color:#45413a;
  font-size:14px;
  line-height:1.65;
}

#al-reader .def a {
  color:#805c1e;
}

#al-reader .def.clamp {
  max-height:150px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);
  mask-image:linear-gradient(#000 72%,transparent);
}

#al-reader .exp {
  margin-top:9px;
  padding:0;
  border:0;
  background:transparent;
  color:#805c1e;
  font:500 12px var(--af-sans);
  text-decoration:underline;
  cursor:pointer;
}

#al-reader .alt {
  margin-top:9px;
  color:var(--af-muted);
  font-size:12px;
}

#al-reader .altl {
  color:#805c1e;
}

#al-reader .src {
  margin-top:13px;
  padding-top:9px;
  border-top:1px solid #ece5d8;
  color:#817a70;
  font:11px/1.6 var(--af-sans);
}

#al-reader .lex-language-note {
  margin:9px 0;
  color:#817a70;
  font:11px/1.5 var(--af-sans);
}

/* INSTRUÇÕES E FONTES */

#al-reader .hint {
  margin:25px 0 0;
  color:var(--af-muted);
  font-size:13px;
  font-style:italic;
  line-height:1.6;
}

#al-reader .colophon {
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid var(--af-line);
  color:var(--af-muted);
  font-size:12px;
  line-height:1.75;
}

#al-reader .colophon a {
  color:#805c1e;
}

/* TRADUÇÃO INGLESA EXISTENTE */

#al-reader .tg-row {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 25px;
}

#al-reader .tg-label {
  color:#8a621e;
  font:500 11px var(--af-sans);
  letter-spacing:.08em;
  text-transform:uppercase;
}

#al-reader .tg {
  display:inline-flex;
  overflow:hidden;
  border:1px solid var(--af-line);
  border-radius:3px;
  background:#fff;
}

#al-reader .tg button {
  margin:0;
  padding:9px 12px;
  border:0;
  border-left:1px solid var(--af-line);
  border-radius:0;
  background:#fff;
  color:#65502d;
  font:12px var(--af-sans);
  cursor:pointer;
}

#al-reader .tg button:first-child {
  border-left:0;
}

#al-reader .tg button.on {
  background:var(--af-ink);
  color:#fff;
}

#al-reader .tg button:hover:not(.on) {
  background:#f5eedf;
}

#al-reader .tg-note {
  display:none;
  width:100%;
  color:var(--af-muted);
  text-align:center;
  font-size:12px;
  font-style:italic;
  line-height:1.6;
}

#al-reader.al-eng-inter .tg-note,
#al-reader.al-eng-side .tg-note {
  display:block;
}

#al-reader .segen {
  color:#686259;
  font-size:16px;
  line-height:1.7;
}

#al-reader .seg.noen .segen {
  display:none;
}

#al-reader.al-eng-inter .seg {
  margin:0 0 24px;
}

#al-reader.al-eng-inter .segen {
  margin:8px 0 0 53px;
  padding-left:14px;
  border-left:2px solid var(--af-line);
}

#al-reader.al-eng-side {
  max-width:1180px;
}

#al-reader.al-eng-side .seg {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 30px;
  align-items:start;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--af-line);
}

#al-reader.al-eng-side .seg .segen {
  grid-column:1;
  grid-row:1;
}

#al-reader.al-eng-side .seg .seglines {
  grid-column:2;
  grid-row:1;
}

#al-reader.al-eng-side .seg.noen {
  display:block;
  border-bottom:0;
}

/* RODAPÉ INSTITUCIONAL */

.af-reading footer.site.af-footer {
  max-width:1180px;
  margin:45px auto 0;
  padding:28px 28px 44px;
  border-top:1px solid var(--af-line);
  color:var(--af-muted);
  font:12px/1.9 var(--af-sans);
  text-align:center;
}

.af-reading footer.site.af-footer a {
  color:#7b5b22;
  font-weight:600;
  text-decoration:none;
}

.af-reading footer.site.af-footer a:hover {
  text-decoration:underline;
}

/* TABLETS */

@media(max-width:900px) {
  .af-reading header.site.af-header {
    padding-top:44px;
  }

  .af-reading nav.top {
    gap:16px 25px;
  }

  #al-reader {
    max-width:100%;
  }
}

/* CELULARES */

@media(max-width:600px) {
  .af-reading .af-wrap {
    padding-left:20px;
    padding-right:20px;
  }

  .af-reading header.site.af-header {
    padding-top:36px;
  }

  .af-reading .af-logo {
    width:68px;
    height:68px;
    margin-bottom:16px;
  }

  .af-reading .af-brand-name {
    font-size:27px;
    letter-spacing:.08em;
  }

  .af-reading .af-brand-slogan {
    max-width:320px;
    margin-top:10px;
    font-size:14px;
  }

  .af-reading .af-brand-institute {
    max-width:320px;
    margin-top:10px;
    font-size:10px;
    letter-spacing:0;
  }

  .af-reading .af-menu-divider {
    margin-top:25px;
  }

  .af-reading nav.top {
    gap:12px 24px;
    padding:18px 0;
    font-size:10px;
    letter-spacing:.08em;
  }

  .af-reading .af-main {
    padding-top:25px;
  }

  .af-reading .af-crumbs {
    margin-bottom:24px;
  }

  #al-reader .ttl {
    font-size:34px;
  }

  #al-reader .line {
    gap:9px;
    font-size:19px;
    line-height:1.85;
  }

  #al-reader .adf-work .adf-line {
    font-size:19px;
  }

  #al-reader .num {
    flex-basis:26px;
    font-size:10px;
  }

  #al-reader .pop {
    width:min(350px,calc(100vw - 40px));
    padding:14px;
  }

  #al-reader.al-eng-side .seg {
    display:block;
  }

  #al-reader.al-eng-side .seg .segen {
    margin:9px 0 0 35px;
    padding-left:12px;
    border-left:2px solid var(--af-line);
  }

  #al-reader.al-eng-inter .segen {
    margin-left:35px;
  }
}

@media(max-width:360px) {
  .af-reading .af-wrap {
    padding-left:15px;
    padding-right:15px;
  }

  .af-reading header.site.af-header {
    padding-top:32px;
  }

  .af-reading .af-brand-name {
    font-size:24px;
  }

  .af-reading .af-brand-slogan {
    font-size:13px;
  }

  .af-reading .af-brand-institute {
    font-size:9px;
  }

  .af-reading nav.top {
    gap:12px 18px;
    font-size:9px;
  }

  #al-reader .line {
    font-size:18px;
  }

  #al-reader .adf-work .adf-line {
    font-size:18px;
  }

  #al-reader .pop {
    width:calc(100vw - 30px);
    max-width:calc(100vw - 30px);
  }
}

/* AD FONTES — navegação persistente nas páginas de leitura. */
.af-reading nav.top.af-nav-fixed {
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:9000;
  background:#faf9f5;
  border-bottom:1px solid var(--af-line);
  box-shadow:0 3px 12px rgba(37,35,31,.08);
  padding:14px 20px;
}
.af-reading .af-nav-placeholder {
  display:none;
  width:100%;
}
.af-reading .af-nav-placeholder.af-nav-placeholder-active {display:block;}
@media(max-width:600px){
  .af-reading nav.top.af-nav-fixed {padding:13px 12px;}
}
