/* ============================================================
   hexquest — folha de estilo do site
   Paleta: #000 fundo · #a4b8a3 texto · #d8e3d8 títulos
   Monotema por decisão: isto é um terminal.
   ============================================================ */

:root{
  --ground:#000000;
  --text:#a4b8a3;
  --bright:#d8e3d8;
  --dim:#6f7f6e;
  --rule:#2f3a2e;
  --hot:#ffffff;
  --mono:'VT323','Courier New',ui-monospace,monospace;

  /* Paleta ANSI — as cores que um terminal de verdade usa.
     Dessaturadas o bastante para não brigar com o preto OLED.
     verde=usuário · ciano=caminho/pasta · amarelo=comando
     magenta=tag/ramo · azul=data · vermelho=erro               */
  --ansi-verde:#7fd68a;
  --ansi-ciano:#6fd0d4;
  --ansi-amarelo:#e0c56a;
  --ansi-magenta:#c08fe0;
  --ansi-azul:#7aa7e8;
  --ansi-vermelho:#e07070;
  --ansi-laranja:#e0a06a;

  --fs-xs:17px; --fs-sm:19px; --fs-base:22px;
  --fs-lg:30px; --fs-xl:42px; --fs-2xl:60px;

  --rail:264px;
  --measure:68ch;
  --pad:clamp(20px,4vw,44px);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--mono);
  font-size:var(--fs-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------------------------------------------------- CRT */
.crt-scanlines,.crt-vignette{position:fixed;inset:0;pointer-events:none;z-index:9000;}
.crt-scanlines{
  background:repeating-linear-gradient(to bottom,
    rgba(164,184,163,.055) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
  animation:drift 9s linear infinite;
}
.crt-vignette{
  background:radial-gradient(ellipse at center,transparent 52%,
    rgba(0,0,0,.42) 88%, rgba(0,0,0,.72) 100%);
}
@keyframes drift{from{background-position-y:0}to{background-position-y:3px}}
.glow{text-shadow:0 0 1px currentColor,0 0 7px rgba(164,184,163,.16);}

/* ---------------------------------------------------- boot */
#boot{position:fixed;inset:0;z-index:9500;background:var(--ground);
  display:flex;align-items:center;justify-content:center;padding:var(--pad);}
#boot pre{margin:0;font-family:var(--mono);font-size:var(--fs-sm);
  color:var(--text);line-height:1.5;white-space:pre-wrap;}
#boot .ok{color:var(--bright);}

/* ---------------------------------------------------- esqueleto */
.shell{display:flex;min-height:100vh;align-items:stretch;}

.rail{
  width:var(--rail);flex:0 0 var(--rail);
  border-right:1px dotted var(--rule);
  padding:var(--pad);
  display:flex;flex-direction:column;gap:30px;
  position:sticky;top:0;align-self:flex-start;height:100vh;
}
.brand{font-size:var(--fs-sm);line-height:1.35;}
.brand a{color:var(--bright);text-decoration:none;}
.brand .host{color:var(--dim);}
.cursor{display:inline-block;width:.56em;height:1.05em;background:var(--bright);
  vertical-align:-.16em;margin-left:.12em;animation:blink 1.05s steps(1) infinite;}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.nav{display:flex;flex-direction:column;gap:9px;}
.nav a{
  color:var(--text);text-decoration:none;font-size:var(--fs-sm);
  padding:3px 10px 3px 20px;position:relative;
  border-left:1px solid transparent;
  transition:color .13s ease,border-color .13s ease,background .13s ease;
}
.nav a::before{content:'';position:absolute;left:7px;top:50%;width:5px;height:1px;
  background:var(--rule);transform:translateY(-50%);transition:background .13s,width .13s;}
.nav a:hover,.nav a:focus-visible{color:var(--bright);background:rgba(164,184,163,.05);}
.nav a:hover::before{background:var(--bright);width:9px;}
.nav a[aria-current="page"]{color:var(--bright);border-left-color:var(--bright);
  background:rgba(164,184,163,.07);}
.nav a[aria-current="page"]::before{background:var(--bright);}

.rail-foot{margin-top:auto;font-size:var(--fs-xs);color:var(--dim);line-height:1.8;}
.rail-foot a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--rule);}
.rail-foot a:hover{color:var(--bright);border-bottom-color:var(--bright);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.view{padding:var(--pad);max-width:var(--measure);flex:1;width:100%;}

/* ---------------------------------------------------- tipografia */
/* ---------------------------------------------------- prompt colorido
   Como num shell de verdade: usuário em verde, caminho em ciano,
   o comando em amarelo. É a cor que diz "isto é um terminal". */
.prompt{font-size:var(--fs-sm);color:var(--ansi-amarelo);margin:0 0 26px;}
.prompt .ps1{color:var(--dim);}
.prompt .user{color:var(--ansi-verde);}
.prompt .host{color:var(--ansi-verde);}
.prompt .caminho{color:var(--ansi-ciano);}
.prompt .cifrao{color:var(--dim);}
.prompt .flag{color:var(--ansi-magenta);}

/* nomes de pasta e arquivo, como o `ls` colore */
.tree a{color:var(--ansi-ciano);}
.tree a[href$=".md"],.tree a.arquivo{color:var(--text);}
.tree .c{color:var(--dim);font-style:italic;}
.tree .root{color:var(--ansi-azul);}

h1,h2,h3{font-weight:400;color:var(--bright);margin:0;text-wrap:balance;line-height:1.14;}
h1{font-size:var(--fs-xl);}
h2{font-size:var(--fs-lg);margin-top:38px;}
h3{font-size:var(--fs-base);}
p{margin:0 0 17px;}
a{color:var(--bright);}

.tree{font-size:var(--fs-base);line-height:2;margin:0 0 32px;}
.tree a{text-decoration:none;border-bottom:1px dotted var(--rule);}
.tree a:hover{border-bottom-style:solid;border-bottom-color:var(--bright);}
.tree .c{color:var(--dim);}
.tree .root{color:var(--bright);}

.rule{border:0;border-top:1px dotted var(--rule);margin:34px 0;}
.lede{font-size:var(--fs-base);line-height:1.7;margin-bottom:30px;}
.comment{color:var(--dim);font-size:var(--fs-sm);line-height:1.75;}

/* ---------------------------------------------------- listagem */
.listing{display:flex;flex-direction:column;gap:30px;}
.entry{border-left:1px dotted var(--rule);padding:4px 0 4px 20px;
  transition:border-left-color .15s ease;
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;}
.entry:hover{border-left-color:var(--bright);border-left-style:solid;}
.entry .corpo{min-width:0;}

/* capa quadrada: corta a foto, nunca estica.
   pixelated porque a imagem já sobe reduzida — ampliar borrado ficaria pior. */
.entry .capa{aspect-ratio:1/1;border:1px dotted var(--rule);overflow:hidden;
  background:#060806;display:grid;place-items:center;
  transition:border-color .15s ease;}
.entry .capa img{width:100%;height:100%;object-fit:cover;display:block;
  image-rendering:pixelated;}
.entry:hover .capa{border-color:var(--bright);border-style:solid;}
.entry .capa.vazia{color:var(--rule);font-size:var(--fs-xs);}
.entry .meta{font-size:var(--fs-xs);color:var(--ansi-azul);display:flex;gap:14px;
  flex-wrap:wrap;font-variant-numeric:tabular-nums;}
.entry .meta .path,.entry .meta .wp-block-post-terms{color:var(--ansi-ciano);}
.entry .meta a{color:var(--ansi-ciano);}
.entry h3{margin:5px 0 6px;font-size:26px;}
.entry h3 a{text-decoration:none;color:var(--bright);}
.entry h3 a:hover{color:var(--hot);}
.entry .excerpt{font-size:var(--fs-sm);margin:0 0 6px;}
.entry .more{font-size:var(--fs-xs);margin:0;}
.entry .more a{color:var(--dim);text-decoration:none;border-bottom:1px dotted transparent;
  transition:color .13s,border-color .13s;}
.entry .more a:hover{color:var(--bright);border-bottom-color:var(--bright);}

/* ---------------------------------------------------- grid 1:1 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));
  gap:20px;margin-top:8px;}
.tile{text-decoration:none;display:flex;flex-direction:column;gap:8px;}
.tile .cover{aspect-ratio:1/1;border:1px dotted var(--rule);overflow:hidden;
  display:grid;place-items:center;transition:border-color .15s ease;background:#060806;}
.tile .cover img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated;}
.tile:hover .cover{border-color:var(--bright);border-style:solid;}
.tile .cover span{font-size:var(--fs-xs);color:var(--dim);}
.tile .name{font-size:var(--fs-xs);color:var(--text);line-height:1.35;}
.tile:hover .name{color:var(--bright);}
.tile .date{font-size:var(--fs-xs);color:var(--dim);font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------- artigo */
.article .meta{font-size:var(--fs-xs);color:var(--dim);line-height:1.9;margin-bottom:18px;}
.article .meta .v{color:var(--ansi-ciano);}
.article .meta .data{color:var(--ansi-azul);}
.article .meta a{color:var(--ansi-magenta);}
.article h1{margin-bottom:22px;}
.article p{font-size:var(--fs-base);line-height:1.72;}
.article ul,.article ol{padding-left:22px;margin:0 0 20px;}
.article li{margin-bottom:10px;}
.article li::marker{color:var(--dim);}
.article strong,.article b{color:var(--bright);font-weight:400;}
.article blockquote{border-left:2px dotted var(--rule);margin:0 0 20px;padding:2px 0 2px 18px;
  color:var(--dim);}
.article pre{background:#060806;border:1px dotted var(--rule);padding:14px 16px;
  overflow-x:auto;font-size:var(--fs-sm);}
.article code{color:var(--bright);}
.article .sources{font-size:var(--fs-xs);color:var(--dim);}
.article::after{content:"";display:block;clear:both;}

/* ------------------------------------- imagens posicionáveis */
.article figure{margin:0 0 22px;}
.article figure img{display:block;max-width:100%;height:auto;border:1px dotted var(--rule);}
.article figcaption{font-size:var(--fs-xs);color:var(--dim);margin-top:6px;}

/* ---------------------------------------------------- ASCII
   A imagem virada em texto. line-height 1 e letter-spacing 0 fazem os
   caracteres se encostarem, formando a figura em vez de uma grade solta. */
pre.ascii{
  margin:0;
  font-family:var(--mono);
  line-height:1;
  letter-spacing:0;
  white-space:pre;
  overflow:hidden;
  color:var(--text);
  background:#000;
  border:1px dotted var(--rule);
  cursor:pointer;
  -webkit-font-smoothing:none;
  text-shadow:0 0 6px rgba(164,184,163,.18);
}
pre.ascii:hover{border-color:var(--bright);}
.tile .cover pre.ascii{border:0;width:100%;height:100%;}

.img-full img{width:100%;}
.img-left{float:left;width:min(46%,320px);margin:4px 22px 14px 0;}
.img-right{float:right;width:min(46%,320px);margin:4px 0 14px 22px;}
.img-center{margin-left:auto;margin-right:auto;width:min(80%,520px);}
.img-bg{position:relative;}
.img-bg img{width:100%;filter:brightness(.42);}
.img-bg figcaption{position:absolute;inset:auto 0 0 0;padding:16px;
  color:var(--bright);font-size:var(--fs-base);text-shadow:0 1px 6px #000;}
@media (max-width:620px){
  .img-left,.img-right{float:none;width:100%;margin:0 0 18px;}
  .entry{grid-template-columns:68px minmax(0,1fr);gap:13px;padding-left:14px;}
  .entry h3{font-size:23px;}
}

/* ---------------------------------------------------- claps */
.claps{display:flex;align-items:center;gap:14px;margin:34px 0 0;flex-wrap:wrap;}
.clapbtn{
  background:#060806;border:1px dotted var(--rule);color:var(--bright);
  font-family:var(--mono);font-size:var(--fs-base);padding:9px 20px;cursor:pointer;
  transition:border-color .14s,background .14s,transform .08s;
}
.clapbtn:hover{border-color:var(--bright);border-style:solid;background:#0c110c;}
.clapbtn:active{transform:scale(.96);}
.clapbtn[disabled]{opacity:.5;cursor:default;}
.clapcount{font-size:var(--fs-sm);color:var(--dim);font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------- comentários */
.comments{margin-top:46px;}
.comments h2{margin-top:0;}
.cform{display:flex;flex-direction:column;gap:12px;max-width:52ch;margin-bottom:34px;}
.cform label{font-size:var(--fs-xs);color:var(--dim);}
.cform input,.cform textarea{
  background:#060806;color:var(--text);border:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--fs-sm);padding:9px 11px;width:100%;border-radius:0;
}
.cform input:focus,.cform textarea:focus{outline:1px solid var(--bright);border-color:var(--bright);}
.cform textarea{min-height:120px;resize:vertical;}
.cform button{
  background:#060806;border:1px dotted var(--rule);color:var(--bright);
  font-family:var(--mono);font-size:var(--fs-sm);padding:9px 20px;cursor:pointer;align-self:flex-start;
}
.cform button:hover{border-color:var(--bright);border-style:solid;}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cmsg{font-size:var(--fs-xs);min-height:1.4em;}
.cmsg.ok{color:#8fd48a;} .cmsg.erro{color:#e06c6c;}

.clist{display:flex;flex-direction:column;gap:22px;}
.cnode{border-left:1px dotted var(--rule);padding-left:18px;}
.cnode .who{font-size:var(--fs-xs);color:var(--dim);}
.cnode .who b{color:var(--bright);font-weight:400;}
.cnode .txt{font-size:var(--fs-sm);margin:4px 0 0;white-space:pre-wrap;}

/* ---------------------------------------------------- misc */
.err{font-size:var(--fs-2xl);color:var(--bright);line-height:1;margin:0 0 18px;}
.tagrow{font-size:var(--fs-sm);margin-bottom:28px;}
.tagrow a{text-decoration:none;border-bottom:1px dotted var(--rule);margin-right:4px;}
.tagrow a:hover{border-bottom-color:var(--bright);}
.tagrow .k{color:var(--dim);}
.back{font-size:var(--fs-sm);margin-top:40px;}
.back a{text-decoration:none;border-bottom:1px dotted var(--rule);}
.pager{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;font-size:var(--fs-sm);}
.pager a{text-decoration:none;border-bottom:1px dotted var(--rule);}

/* Atalho para o painel: encostado no canto inferior direito do README,
   quase da cor do fundo. Quem não procura não vê; quem passa o mouse ou
   chega nele pelo teclado, acha. O contraste baixo é proposital, mas o
   :focus-visible garante que ele não some para quem navega sem mouse. */
.sudo{margin:0;padding:0 var(--pad) 18px;font-size:var(--fs-xs);text-align:right;}
.sudo a{color:#0d110d;text-decoration:none;border:1px dotted transparent;padding:4px 11px;
  transition:color .2s,border-color .2s,background .2s;}
.sudo a:hover,.sudo a:focus-visible{color:var(--bright);border-color:var(--rule);
  background:rgba(164,184,163,.05);}

/* ---------------------------------------------------- janela de anúncio
   Uma só, fixa no canto inferior direito, com cara de janelinha de terminal.

   `position:fixed` é o ponto central: ela sai do fluxo, então NENHUM
   elemento da página é empurrado por causa dela — a matéria é diagramada
   como se a janela não existisse. Nada se aloca acima nem abaixo.

   O z-index fica abaixo do 9000 das linhas de varredura de propósito: o
   efeito de TV do site passa por cima dela também. */
.adwin{
  position:fixed;right:18px;bottom:18px;z-index:40;
  width:min(320px,calc(100vw - 36px));
  background:#000;border:1px solid var(--rule);
  box-shadow:0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.75);
  font-size:var(--fs-xs);
  animation:adwin-abre .28s ease-out;
}
@keyframes adwin-abre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.adwin-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px dotted var(--rule);padding:3px 4px 3px 10px;
  background:#070a07;color:var(--dim);
}
.adwin-nome{letter-spacing:.04em;}
.adwin-nome::before{content:'~/';color:var(--rule);}
.adwin-x{
  background:none;border:1px solid transparent;color:var(--dim);
  font-family:var(--mono);font-size:var(--fs-xs);line-height:1;
  padding:3px 7px;cursor:pointer;transition:color .13s,border-color .13s;
}
.adwin-x:hover,.adwin-x:focus-visible{color:var(--ansi-vermelho);border-color:var(--rule);}
/* o anúncio em si: o que a rede mandar cabe aqui dentro e não vaza */
.adwin-corpo{padding:8px;max-height:min(300px,45vh);overflow:hidden;
  display:flex;justify-content:center;}
.adwin-corpo :is(img,iframe,ins){max-width:100%;}

/* Em tela estreita ela encolhe e cola no rodapé da tela. Se o visitante
   estiver com o menu lateral aberto, some: o menu tem prioridade. */
@media (max-width:620px){
  .adwin{right:10px;bottom:10px;width:calc(100vw - 20px);}
  .adwin-corpo{max-height:32vh;}
}
body:has(.rail.is-open) .adwin{display:none;}
.ad-header{padding-top:var(--pad);}
.ad-footer{padding-bottom:var(--pad);}

.foot{border-top:1px dotted var(--rule);padding:28px var(--pad) 44px;
  font-size:var(--fs-xs);color:var(--dim);line-height:1.85;}
.foot a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--rule);}
.foot a:hover{color:var(--bright);border-bottom-color:var(--bright);}

/* ---------------------------------------------------- newsletter */
.news{margin:22px 0 18px;max-width:46ch;}
.news label{display:block;font-size:var(--fs-xs);margin-bottom:7px;}
.news .flag{color:var(--ansi-magenta);}
.newsrow{display:flex;gap:8px;flex-wrap:wrap;}
.news input[type=email]{flex:1 1 200px;min-width:0;background:#060806;
  border:1px dotted var(--rule);color:var(--text);font-family:var(--mono);
  font-size:var(--fs-sm);padding:7px 10px;}
.news input[type=email]:focus{border-style:solid;border-color:var(--bright);outline:none;}
.news button{background:#060806;border:1px dotted var(--rule);color:var(--bright);
  font-family:var(--mono);font-size:var(--fs-sm);padding:7px 16px;cursor:pointer;
  transition:border-color .14s,background .14s;}
.news button:hover{border-style:solid;border-color:var(--bright);background:#0c110c;}
.news button[disabled]{opacity:.5;cursor:default;}
.newsnota{font-size:var(--fs-xs);color:var(--dim);margin:7px 0 0;}
/* campo-armadilha para robô: fora da tela, mas não display:none — robô
   costuma ignorar o que está escondido desse jeito. */
#news-website{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.railtoggle{display:none;position:fixed;z-index:8000;top:12px;left:12px;
  background:var(--ground);color:var(--bright);border:1px dotted var(--rule);
  font-family:var(--mono);font-size:var(--fs-sm);padding:7px 14px;cursor:pointer;}
.railtoggle:hover{border-color:var(--bright);border-style:solid;}
.scrim{display:none;}

:focus-visible{outline:1px solid var(--bright);outline-offset:3px;}

/* ---------------------------------------------------- mobile */
@media (max-width:860px){
  .railtoggle{display:block;}
  .shell{display:block;}
  .rail{
    position:fixed;inset:0 auto 0 0;width:min(82vw,var(--rail));height:100dvh;
    background:var(--ground);transform:translateX(-102%);
    transition:transform .22s ease;z-index:8500;padding-top:62px;overflow-y:auto;
  }
  .rail.is-open{transform:translateX(0);}
  .scrim{display:block;position:fixed;inset:0;z-index:8200;background:rgba(0,0,0,.72);
    opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s;}
  .scrim.is-on{opacity:1;visibility:visible;transition:opacity .22s ease;}
  .view{padding-top:66px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}