/* site.netlove.net.br
 *
 * O Net Love esteve no ar de 10/12/1998 a 16/03/2006. Esta pagina e uma
 * releitura da home dele, e o conteudo e todo dele: os textos dos destaques, a
 * frase, os nomes das secoes e os recados do mural sao originais.
 *
 * A ESTRUTURA vem da forma-assinatura do site. A maior secao dele eram 712
 * musicas traduzidas, e todas tinham o mesmo desenho: o verso original e, logo
 * abaixo, o verso em portugues. A pagina inteira e montada assim: o que o site
 * dizia em 2006 e, ao lado, o que sobrou. Uma coisa e a traducao da outra.
 *
 * A PALETA e a noite. Sai do segundo logotipo do proprio site (images/logo.jpg,
 * o nome sobre uma lua cheia em ceu violeta) e do fato da epoca: no Brasil
 * daquele tempo se entrava de madrugada, quando o pulso telefonico caia.
 *
 * OS TIPOS sao duas vozes. Verdana e a fonte da web brasileira daquela decada,
 * e e literalmente a que cada <font face=Verdana> do acervo pede: ela fala por
 * 2006. Newsreader fala por hoje. O contraste entre as duas e o assunto.
 */

:root{
  --noite:#13101d;
  --noite2:#1b1730;
  --luar:#f0e7d9;
  --bruma:#a196b5;
  --brasa:#e8574a;
  --lampiao:#dfb463;
  --fio:#2e2743;

  --hoje:"Newsreader",Georgia,"Times New Roman",serif;
  --entao:Verdana,Geneva,"DejaVu Sans",sans-serif;
  --arte:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

:root[data-tema="dia"]{
  --noite:#f6f2ea;
  --noite2:#fffdf8;
  --luar:#231d2e;
  --bruma:#6b6180;
  --brasa:#b62b20;
  --lampiao:#8a6420;
  --fio:#e0d8ea;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--noite);
  color:var(--luar);
  font-family:var(--hoje);
  font-size:18px;
  font-weight:300;
  line-height:1.65;
}
a{color:var(--luar);text-decoration:none;text-decoration-color:var(--fio)}
a:hover{color:var(--brasa)}
:focus-visible{outline:2px solid var(--lampiao);outline-offset:3px}

.faixa{padding-left:24px;padding-right:24px}
.medida{max-width:40rem;margin:0 auto}
.largura{max-width:62rem;margin:0 auto}

/* ------------------------------------------------------------- a testeira */

.testeira{padding-block:clamp(3rem,9vw,6rem) clamp(2.5rem,6vw,4rem)}

.arte{
  font-family:var(--arte);
  font-size:clamp(.72rem,2.55vw,1.5rem);
  line-height:1.35;
  color:var(--luar);
  margin:0 0 1.6rem;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  letter-spacing:.02em;
}
.arte::-webkit-scrollbar{display:none}
.arte i{font-style:normal;color:var(--bruma)}
.arte b{font-weight:inherit;color:var(--brasa)}
.arte span{opacity:0}
.arte.pronta span{opacity:1;transition:opacity .18s ease}

.lema{
  font-family:var(--hoje);
  font-style:italic;
  font-size:clamp(1.5rem,4.6vw,2.4rem);
  font-weight:300;
  line-height:1.15;
  margin:0 0 1.5rem;
  color:var(--luar);
}
.periodo{
  font-family:var(--entao);
  font-size:.78rem;
  line-height:1.9;
  color:var(--bruma);
  margin:0;
  letter-spacing:.01em;
}
.periodo b{color:var(--luar);font-weight:700}

/* ---------------------------------------------------------------- titulos */

h2{
  font-family:var(--hoje);
  font-weight:400;
  font-size:clamp(1.45rem,3.4vw,2rem);
  line-height:1.2;
  margin:0 0 .5rem;
  color:var(--luar);
}
.abertura{
  font-size:1.02rem;
  color:var(--bruma);
  margin:0 0 2.6rem;
  max-width:36rem;
  line-height:1.6;
}
section{padding-block:clamp(2.8rem,7vw,4.6rem)}
section + section{border-top:1px solid var(--fio)}

/* ----------------------------------------------------------- as vozes */

.vozes{display:grid;gap:2.4rem 3.2rem;grid-template-columns:1fr;margin:0;padding:0}
@media (min-width:52rem){.vozes{grid-template-columns:1fr 1fr}}

.recado{margin:0}
.recado p{
  font-family:var(--entao);
  font-size:.95rem;
  line-height:1.72;
  color:var(--luar);
  margin:0 0 .7rem;
}
.recado footer{
  font-family:var(--hoje);
  font-size:.86rem;
  color:var(--bruma);
  font-style:italic;
}
.recado footer b{font-style:normal;font-weight:400;color:var(--luar)}

.contagem{
  margin:3rem 0 0;
  padding-top:1.6rem;
  border-top:1px solid var(--fio);
  font-size:1.02rem;
  color:var(--bruma);
  max-width:36rem;
}
.contagem b{color:var(--lampiao);font-weight:400}

/* -------------------------------------------------- os pares de traducao */

.pares{margin:0;padding:0;list-style:none}
.par{padding-block:1.9rem;border-top:1px solid var(--fio)}
.par:first-child{border-top:0;padding-top:0}
.par > a{display:grid;gap:.9rem 2.6rem;grid-template-columns:1fr}
.par > a:hover{color:inherit}
@media (min-width:48rem){.par > a{grid-template-columns:1fr 1fr;gap:0 3rem}}

.entao{
  font-family:var(--entao);
  font-size:.88rem;
  line-height:1.78;
  color:var(--bruma);
  margin:0;
}
.entao em{font-style:normal;color:var(--luar);display:block;margin-top:.55rem}

.hoje h3{
  font-family:var(--hoje);
  font-weight:400;
  font-size:1.35rem;
  line-height:1.25;
  margin:0 0 .45rem;
  color:var(--luar);
}
.par > a:hover .hoje h3{color:var(--brasa)}
.hoje p{margin:0;font-size:1rem;line-height:1.6;color:var(--bruma)}
.hoje p b{color:var(--lampiao);font-weight:400}

/* --------------------------------------------------------------- o indice */

.indice{
  display:grid;gap:2.2rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));
  margin:0;
}
.indice h3{
  font-family:var(--hoje);font-style:italic;font-weight:400;
  font-size:1.05rem;margin:0 0 .7rem;color:var(--bruma);
}
.indice ul{list-style:none;margin:0;padding:0}
.indice li{margin:0 0 .2rem;font-family:var(--entao);font-size:.83rem;line-height:1.8}
.indice li a{color:var(--luar)}
.indice li i{font-style:normal;color:var(--bruma)}
.indice li.perdido{color:var(--bruma)}

/* --------------------------------------------------------------- o fecho */

.nota{
  font-size:1rem;line-height:1.68;color:var(--bruma);max-width:38rem;margin:0 0 2rem;
}
.nota b{color:var(--luar);font-weight:400}
.nota a{color:var(--luar);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--fio)}
.nota a:hover{color:var(--brasa)}

.portas{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.porta{
  font-family:var(--entao);font-size:.82rem;
  padding:.7rem 1.15rem;border:1px solid var(--fio);border-radius:2px;
  color:var(--luar);background:var(--noite2);
}
.porta:hover{border-color:var(--brasa);color:var(--brasa)}
.porta.viva{background:var(--brasa);border-color:var(--brasa);color:var(--noite)}
.porta.viva:hover{color:var(--noite);filter:brightness(1.12)}

.rodape{
  border-top:1px solid var(--fio);
  padding-block:2.4rem 3.4rem;
  font-family:var(--entao);font-size:.76rem;line-height:1.95;color:var(--bruma);
}
.rodape p{margin:0 0 .4rem}
.rodape .dele{color:var(--luar)}

.btema{
  position:fixed;right:18px;bottom:18px;z-index:30;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--fio);background:var(--noite2);color:var(--bruma);
  cursor:pointer;font-size:1rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.btema:hover{color:var(--lampiao);border-color:var(--lampiao)}

@media (prefers-reduced-motion:reduce){
  .arte span{opacity:1}
  *{transition:none!important;animation:none!important}
}