/* hicMonsters — o mapa ocupa a tela; logo embaixo à esquerda, nav embaixo à direita */
:root{
  --bg:#111110; --fg:#dcd9d1; --dim:rgba(220,217,209,.42);
  --verde:#3fd97a;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--fg);font:12px/1 var(--mono);letter-spacing:.04em}
#map{position:fixed;inset:0;width:100%;height:100%;display:block}
.logo{position:fixed;left:max(28px,env(safe-area-inset-left,0px));bottom:max(28px,env(safe-area-inset-bottom,0px));height:15px;display:block;z-index:2}
.logo img{height:100%;display:block;filter:invert(1)}
.nav{position:fixed;right:max(28px,env(safe-area-inset-right,0px));bottom:max(26px,env(safe-area-inset-bottom,0px));display:flex;gap:26px;z-index:2}
.nav a{position:relative;color:var(--dim);text-decoration:none;text-transform:uppercase;font-size:10.5px;letter-spacing:.16em;padding-right:12px;transition:color .3s}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current]{color:var(--fg);outline:none}
/* o verde é um cursor de terminal: aparece no hover, pisca na página atual */
.nav a::after{content:"";position:absolute;right:0;top:50%;width:6px;height:10px;margin-top:-5px;background:var(--verde);opacity:0;transition:opacity .25s}
.nav a:hover::after,.nav a:focus-visible::after{opacity:1}
.nav a[aria-current]::after{opacity:1;animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
@media (max-width:600px){ .nav{gap:12px} .nav a{font-size:9.5px;letter-spacing:.12em;padding-right:10px} }

/* páginas internas (about, projects, contact): sem mapa; texto grande e um efeito próprio por página no #fx */
html.page,html.page body{overflow:auto;height:auto;min-height:100%}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body[data-fx=fog] #fx{image-rendering:pixelated}
.content{position:relative;z-index:1;padding:clamp(72px,16vh,150px) max(28px,env(safe-area-inset-right,0px)) 180px max(28px,env(safe-area-inset-left,0px));max-width:1180px;box-sizing:border-box}
.content.center{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:60px}
.big{font-size:clamp(26px,4.4vw,58px);line-height:1.2;letter-spacing:-.01em;font-weight:400;margin:0 0 .9em;max-width:17em}
.big.dim{color:rgba(220,217,209,.72);font-size:clamp(19px,2.9vw,38px);max-width:22em}
.hic{font-size:11px;letter-spacing:.18em;color:var(--dim);margin:2.4em 0;min-height:1em}
.list{list-style:none;margin:0;padding:0}
.list a{display:inline-block;color:var(--fg);text-decoration:none;margin:0 0 .3em;font-size:clamp(34px,8vw,112px);line-height:1.1;letter-spacing:-.02em;transition:color .3s}
.list a::after,.email::after{content:"";display:inline-block;width:.42em;height:.74em;margin-left:.28em;vertical-align:-.03em;background:var(--verde);opacity:0;transition:opacity .25s}
.list a:hover,.list a:focus-visible{outline:none}
.list a:hover::after,.list a:focus-visible::after{opacity:1}
.list.small a{font-size:clamp(17px,2.2vw,28px);letter-spacing:0;margin-bottom:.9em;color:rgba(220,217,209,.72)}
.list.small a:hover,.list.small a:focus-visible{color:var(--fg)}
.email{user-select:all;-webkit-user-select:all;cursor:text;font-size:clamp(30px,6.4vw,92px);max-width:none;margin-bottom:1.1em}
.email::after{opacity:1;animation:blink 1.1s steps(1,end) infinite}
body.page::after{content:"";position:fixed;left:0;right:0;bottom:0;height:140px;z-index:1;pointer-events:none;background:linear-gradient(rgba(17,17,16,0),var(--bg) 62%)}
@media (prefers-reduced-motion:reduce){ .nav a,.nav a::after,.list a,.list a::after{transition:none} .nav a[aria-current]::after,.email::after{animation:none} }