/* ==========================================================
   NOMADIO
   v1.0
   A Dionysian Hypertext
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Newsreader:opsz,wght@6..72,300;400&display=swap');

:root{

    --bg:#12110f;
    --bg-light:#181613;

    --text:#ece4d8;

    --muted:#8f897d;

    --gold:#c9a463;

    --gold-light:#e2c386;

    --border:#2b2925;

    --selection:#a67f41;

    --max-width:760px;

    --transition:.35s;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:
    radial-gradient(circle at top,#1a1815,#12110f 70%);

    color:var(--text);

    font-family:"Newsreader",serif;

    font-size:21px;

    line-height:2.05;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    max-width:var(--max-width);

    margin:auto;

    padding:120px 42px;

    overflow-x:hidden;

    animation:breathing 140s linear infinite;

}

/* ---------------------------------------------------------- */
/* atmosfera */
/* ---------------------------------------------------------- */

@keyframes breathing{

0%{

background-position:0% 0%;

filter:brightness(100%);

}

50%{

background-position:40% 20%;

filter:brightness(103%);

}

100%{

background-position:0% 0%;

filter:brightness(100%);

}

}

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

opacity:.025;

background-image:url("https://grainy-gradients.vercel.app/noise.svg");

mix-blend-mode:soft-light;

}

/* ---------------------------------------------------------- */
/* seleção */
/* ---------------------------------------------------------- */

::selection{

background:var(--selection);

color:#111;

}

/* ---------------------------------------------------------- */
/* scrollbar */
/* ---------------------------------------------------------- */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#12110f;

}

::-webkit-scrollbar-thumb{

background:#2d2b27;

}

::-webkit-scrollbar-thumb:hover{

background:#4b463e;

}

/* ---------------------------------------------------------- */
/* tipografia */
/* ---------------------------------------------------------- */

h1{

font-family:"Cormorant Garamond",serif;

font-size:82px;

font-weight:500;

letter-spacing:-2px;

line-height:.95;

margin-bottom:18px;

}

h2{

font-family:"Cormorant Garamond",serif;

font-size:48px;

font-weight:500;

margin-top:80px;

margin-bottom:24px;

line-height:1.1;

}

h3{

font-family:"Cormorant Garamond",serif;

font-size:34px;

font-weight:500;

margin-top:60px;

margin-bottom:18px;

}

p{

margin:28px 0;

}

small{

color:var(--muted);

font-size:.85em;

}

em{

font-style:italic;

color:#d6c3a0;

}

strong{

font-weight:500;

}

hr{

border:none;

height:1px;

background:var(--border);

margin:80px 0;

}

/* ---------------------------------------------------------- */
/* layout */
/* ---------------------------------------------------------- */

header{

margin-bottom:120px;

}

header p{

color:var(--muted);

font-style:italic;

max-width:480px;

}

main{

min-height:60vh;

}

/* ---------------------------------------------------------- */
/* links */
/* ---------------------------------------------------------- */

a{

color:var(--gold);

text-decoration:none;

transition:color var(--transition);

}

a:hover{

color:var(--gold-light);

}

.post{

display:block;

padding:24px 0;

border-bottom:1px solid var(--border);

transition:.4s;

}

.post:hover{

padding-left:12px;

}

.post h2{

margin:0;

font-size:38px;

}

.post p{

margin-top:8px;

color:var(--muted);

font-size:16px;

}

/* ---------------------------------------------------------- */
/* rizoma */
/* ---------------------------------------------------------- */

#rizoma{

margin-top:120px;

padding-top:40px;

border-top:1px solid var(--border);

display:flex;

flex-wrap:wrap;

gap:14px;

}

#rizoma a{

font-size:15px;

letter-spacing:.5px;

text-transform:lowercase;

padding:6px 12px;

border:1px solid transparent;

transition:.3s;

}

#rizoma a:hover{

border-color:var(--gold);

background:rgba(201,164,99,.08);

}

/* ---------------------------------------------------------- */
/* textos */
/* ---------------------------------------------------------- */

blockquote{

margin:60px 0;

padding-left:28px;

border-left:2px solid var(--gold);

color:#d9cfbf;

font-style:italic;

font-size:1.08em;

}

blockquote p{

margin:18px 0;

}

blockquote footer{

margin-top:20px;

font-size:.85em;

color:var(--muted);

}

pre{

margin:40px 0;

padding:22px;

overflow:auto;

background:#181613;

border:1px solid var(--border);

font-family:"Courier New",monospace;

font-size:.9em;

line-height:1.7;

}

code{

font-family:"Courier New",monospace;

font-size:.92em;

color:#d8c79d;

}

pre code{

color:inherit;

}

ul,
ol{

margin:30px 0 30px 30px;

}

li{

margin:10px 0;

}

img{

display:block;

max-width:100%;

margin:70px auto;

filter:grayscale(100%) contrast(110%);

transition:1.2s;

}

img:hover{

filter:grayscale(15%) contrast(105%);

}

figure{

margin:70px 0;

}

figcaption{

margin-top:18px;

text-align:center;

font-size:.82em;

color:var(--muted);

font-style:italic;

}

/* ---------------------------------------------------------- */
/* poema */
/* ---------------------------------------------------------- */

.poema{

margin:80px 0;

font-size:1.15em;

line-height:2.25;

white-space:pre-line;

}

.poema p{

margin:0;

}

/* ---------------------------------------------------------- */
/* notas */
/* ---------------------------------------------------------- */

.notas{

margin-top:120px;

padding-top:30px;

border-top:1px solid var(--border);

}

.notas p{

font-size:.88em;

color:var(--muted);

line-height:1.9;

}

/* ---------------------------------------------------------- */
/* separadores */
/* ---------------------------------------------------------- */

.separador{

display:flex;

justify-content:center;

align-items:center;

margin:90px 0;

color:var(--muted);

letter-spacing:10px;

font-size:14px;

user-select:none;

}

.separador::before{

content:"✦ ✦ ✦";

opacity:.55;

}

/* ---------------------------------------------------------- */
/* links internos */
/* ---------------------------------------------------------- */

.interno{

display:inline;

color:var(--gold);

cursor:pointer;

position:relative;

}

.interno::after{

content:"";

position:absolute;

left:0;

bottom:-2px;

width:0;

height:1px;

background:var(--gold);

transition:.35s;

}

.interno:hover::after{

width:100%;

}

/* ---------------------------------------------------------- */
/* fade entre fragmentos */
/* ---------------------------------------------------------- */

.fade{

animation:fragmento .45s ease;

}

@keyframes fragmento{

from{

opacity:0;

transform:translateY(8px);

}

to{

opacity:1;

transform:none;

}

}

/* ---------------------------------------------------------- */
/* rodapé */
/* ---------------------------------------------------------- */

footer{

margin-top:180px;

padding-top:40px;

border-top:1px solid var(--border);

color:var(--muted);

font-size:.8em;

display:flex;

justify-content:space-between;

align-items:center;

}

footer a{

color:inherit;

}

footer a:hover{

color:var(--gold);

}

/* ---------------------------------------------------------- */
/* ornamento */
/* ---------------------------------------------------------- */

footer::before{

content:"❦";

font-size:18px;

opacity:.5;

}

/* ---------------------------------------------------------- */
/* primeira letra */
/* ---------------------------------------------------------- */

article p:first-of-type::first-letter{

float:left;

font-family:"Cormorant Garamond",serif;

font-size:4.8em;

line-height:.8;

padding-right:10px;

margin-top:10px;

color:var(--gold);

}

/* ---------------------------------------------------------- */
/* títulos respiram */
/* ---------------------------------------------------------- */

h1,
h2{

transition:letter-spacing 8s ease;

}

body:hover h1{

letter-spacing:-1px;

}

body:hover h2{

letter-spacing:.2px;

}

/* ---------------------------------------------------------- */
/* article */
/* ---------------------------------------------------------- */

article{

animation:entrada .6s ease;

}

@keyframes entrada{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:none;

}

}

/* ---------------------------------------------------------- */
/* parágrafos */
/* ---------------------------------------------------------- */

article p{

text-align:justify;

text-wrap:pretty;

hyphens:auto;

}

article p + p{

text-indent:2.2em;

}

article p:has(+ h2),
article p:has(+ h3){

margin-bottom:70px;

}

/* ---------------------------------------------------------- */
/* títulos */
/* ---------------------------------------------------------- */

h1{

text-wrap:balance;

}

h2{

text-wrap:balance;

max-width:90%;

}

h3{

color:#ddd2bf;

}

/* ---------------------------------------------------------- */
/* links do rizoma */
/* ---------------------------------------------------------- */

#rizoma{

justify-content:flex-start;

align-items:center;

}

#rizoma::before{

content:"conexões";

display:block;

width:100%;

margin-bottom:18px;

font-size:.72rem;

letter-spacing:4px;

text-transform:uppercase;

color:var(--muted);

opacity:.65;

}

#rizoma a{

background:rgba(255,255,255,.015);

backdrop-filter:blur(4px);

}

#rizoma a:hover{

transform:translateY(-2px);

}

/* ---------------------------------------------------------- */
/* detalhes */
/* ---------------------------------------------------------- */

::marker{

color:var(--gold);

}

sup{

font-size:.65em;

color:var(--gold);

}

sub{

font-size:.7em;

}

table{

width:100%;

border-collapse:collapse;

margin:60px 0;

}

th{

font-weight:500;

text-align:left;

padding:16px;

border-bottom:1px solid var(--border);

}

td{

padding:16px;

border-bottom:1px solid rgba(255,255,255,.05);

}

/* ---------------------------------------------------------- */
/* formulário */
/* ---------------------------------------------------------- */

input,
textarea{

width:100%;

background:transparent;

border:none;

border-bottom:1px solid var(--border);

padding:16px 0;

color:var(--text);

font:inherit;

outline:none;

}

textarea{

resize:vertical;

min-height:180px;

}

button{

background:none;

border:1px solid var(--gold);

padding:12px 22px;

color:var(--gold);

cursor:pointer;

transition:.35s;

font:inherit;

}

button:hover{

background:var(--gold);

color:#111;

}

/* ---------------------------------------------------------- */
/* efeito de leitura */
/* ---------------------------------------------------------- */

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:
linear-gradient(
180deg,
rgba(255,255,255,.015),
transparent 15%,
transparent 85%,
rgba(0,0,0,.08)
);

mix-blend-mode:soft-light;

}

/* ---------------------------------------------------------- */
/* responsivo */
/* ---------------------------------------------------------- */

@media (max-width:900px){

body{

padding:90px 28px;

font-size:19px;

}

h1{

font-size:64px;

}

h2{

font-size:40px;

}

}

@media (max-width:600px){

body{

padding:60px 24px;

font-size:18px;

line-height:1.9;

}

h1{

font-size:48px;

letter-spacing:-1px;

}

h2{

font-size:32px;

}

article p + p{

text-indent:1.2em;

}

#rizoma{

gap:8px;

}

}

/* ---------------------------------------------------------- */
/* fim */
/* ---------------------------------------------------------- */