/* Hondina Rodrigues — folha de estilos do site */

:root{
  --papel:#E6E4E1; --papel-claro:#F2F1EF; --papel-prosa:#EEECE9;
  --tinta:#2B2321; --tinta-2:#4A423E; --cinza:#5C5550; --linha:#C9C4BE;
  --sepia:#6E4E3F; --azul:#23395B;
  --noite:#1D1917; --noite-texto:#E6E4E1; --noite-cinza:#A39A92; --noite-linha:#3A3431; --noite-acento:#C9B8A6;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Courier Prime', 'Courier New', monospace;
  --gutter:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .4s ease}
a:hover{color:var(--sepia)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
button{font:inherit;color:inherit}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salto{position:absolute;left:16px;top:-60px;z-index:50;background:var(--tinta);color:var(--papel);padding:12px 16px}
.salto:focus{top:16px;color:var(--papel)}
[hidden]{display:none !important}

.wrap{max-width:1312px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.rel{position:relative}
.grao{position:absolute;inset:0;pointer-events:none;background:url(../img/grain.png) repeat;background-size:320px;opacity:.55;mix-blend-mode:multiply;z-index:5}
.escuro .grao,.noite .grao{mix-blend-mode:screen;opacity:.15}
.pautado{background-image:repeating-linear-gradient(to bottom,transparent 0 55px,rgba(43,35,33,.07) 55px 56px)}

/* Cabeçalho */
.topo{position:relative;z-index:10;display:flex;flex-wrap:wrap;gap:12px 40px;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:28px}
.assinatura{font-family:var(--serif);font-size:16px;font-weight:500;letter-spacing:.3em;padding:12px 0;white-space:nowrap}
.menu{display:flex;flex-wrap:wrap;gap:4px 32px;font-size:14px;letter-spacing:.04em}
.menu a{padding:12px 0}
.menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;color:var(--sepia)}
.escuro .menu a[aria-current="page"],.cinema .menu a[aria-current="page"]{color:var(--noite-acento)}
.escuro a:hover,.cinema a:hover{color:var(--noite-acento)}

/* Tipografia */
.rotulo{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--cinza);margin:0}
.rotulo.acento{color:var(--sepia)}
.escuro .rotulo{color:var(--noite-cinza)}
.escuro .rotulo.acento{color:var(--noite-acento)}
.display{font-family:var(--serif);font-weight:300;line-height:.92;letter-spacing:-.02em;margin:0}
.it{font-style:italic}
.serif{font-family:var(--serif)}
.corpo{font-size:18px;line-height:1.7;color:var(--tinta-2)}
.escuro .corpo{color:#B3AAA2}

/* Botões */
.botao{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 32px;font-size:14px;letter-spacing:.08em;border:1px solid var(--tinta);background:var(--tinta);color:var(--papel);transition:color .5s ease;cursor:pointer}
.botao::before{content:"";position:absolute;inset:0;background:var(--sepia);transform:translateY(101%);transition:transform .6s var(--ease-io)}
.botao:hover{color:var(--papel)}
.botao:hover::before{transform:none}
.botao>*{position:relative}
.botao.contorno{background:transparent;color:var(--tinta)}
.botao.contorno::before{background:var(--tinta)}
.botao.contorno:hover{color:var(--papel)}
.escuro .botao.contorno{border-color:var(--noite-texto);color:var(--noite-texto)}
.escuro .botao.contorno::before{background:var(--noite-texto)}
.escuro .botao.contorno:hover{color:var(--noite)}
.botao[disabled]{cursor:not-allowed;background:#6B635D;border-color:#6B635D}
.botao[disabled]::before{display:none}

/* Capas */
.capa{position:relative;perspective:1400px;display:block}
.capa img{width:100%;transition:transform .9s var(--ease);box-shadow:0 40px 80px -40px rgba(43,35,33,.5)}
.escuro .capa img{box-shadow:0 60px 120px -40px rgba(0,0,0,.9)}
.capa::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.26) 48%,transparent 62%);background-size:250% 100%;background-position:120% 0;transition:background-position 1.3s var(--ease)}
.capa:hover img{transform:rotateY(-7deg) rotateX(2deg) translateY(-6px)}
.capa:hover::after{background-position:-30% 0}
.halo{position:absolute;inset:-14%;width:128%;height:128%;max-width:none;object-fit:cover;filter:blur(80px) saturate(1.4);opacity:.2;animation:respirar 10s ease-in-out infinite;pointer-events:none}

/* Animações */
@keyframes escrever{from{clip-path:inset(-20% 100% -20% -6%)}to{clip-path:inset(-20% -6% -20% -6%)}}
@keyframes tracar{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
@keyframes tinta{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes subir{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes deixa{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes deslizar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes respirar{0%,100%{opacity:.16;transform:scale(1)}50%{opacity:.28;transform:scale(1.06)}}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.25}}
.e1{animation:escrever 1.8s var(--ease-io) .3s both}
.e2{animation:escrever 1.8s var(--ease-io) 1.1s both}
.pena path{stroke-dasharray:320;animation:tracar 1.6s var(--ease-io) 2.2s both}
.t1{animation:tinta 1.4s ease 2.9s both}
.t2{animation:tinta 1.4s ease 3.3s both}
.t-cedo{animation:tinta 1.2s ease .4s both}
.t-medio{animation:tinta 1.4s ease 1.8s both}
.sobe{animation:subir 1.8s var(--ease) .2s both}
.ponto{animation:pulsar 2.4s ease-in-out infinite}

/* Revelação ao percorrer (só com JavaScript activo) */
.js .rv{opacity:0;transform:translateY(32px);filter:blur(4px);transition:opacity 1.2s ease,transform 1.4s var(--ease),filter 1.2s ease}
.js .rv.visivel{opacity:1;transform:none;filter:blur(0)}
.js .rv.d1{transition-delay:.15s}
.js .rv.d2{transition-delay:.3s}

/* Composições */
.dividir{display:flex;align-items:center;gap:clamp(40px,8vw,128px)}
.dividir>.flex{flex:1 1 0;min-width:0}
.titulo-sobre{margin-left:-110px;mix-blend-mode:multiply;position:relative;z-index:2}

/* Abertura */
.abertura{position:relative;min-height:max(720px,calc(100svh - 104px));display:flex;flex-direction:column;justify-content:center;padding-top:clamp(40px,8vw,120px);padding-bottom:clamp(96px,10vw,140px)}
.abertura .nome{font-size:clamp(68px,15vw,232px);line-height:.86}
.recuo{padding-left:clamp(0px,14vw,260px)}
.deixa{position:absolute;left:var(--gutter);bottom:24px;width:1px;height:64px;background:var(--linha);overflow:hidden}
.deixa i{display:block;width:1px;height:64px;background:var(--tinta);animation:deixa 2.6s var(--ease-io) 3.8s infinite both}

/* Faixa de títulos */
.faixa{overflow:hidden;white-space:nowrap;padding-top:clamp(56px,7vw,96px)}
.faixa-int{display:flex;width:max-content;animation:deslizar 90s linear infinite;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(40px,6vw,88px);color:#4E4641}
.faixa-int:hover{animation-play-state:paused}
.faixa-int span{padding-right:.9em}
.faixa-int b{font-weight:300;font-style:normal;color:var(--sepia)}

/* Índice da obra */
.obra{border-top:1px solid var(--tinta)}
.linha-obra{display:flex;align-items:baseline;gap:32px;padding:32px 0;border-bottom:1px solid var(--linha);position:relative}
.linha-obra::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--tinta);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-io)}
.linha-obra .num{font-size:13px;color:var(--cinza);width:40px;flex:none}
.linha-obra .nm{flex:1 1 auto;font-family:var(--serif);font-size:clamp(34px,4.6vw,68px);font-weight:300;line-height:1;transition:transform .7s var(--ease)}
.linha-obra .meta{font-size:14px;color:var(--cinza);width:280px}
.linha-obra .seta{opacity:0;transform:translateX(-12px);transition:opacity .5s ease,transform .7s var(--ease);font-size:20px}
.linha-obra:hover::after,.linha-obra:focus-visible::after{transform:scaleX(1)}
.linha-obra:hover .nm,.linha-obra:focus-visible .nm{transform:translateX(18px)}
.linha-obra:hover .seta,.linha-obra:focus-visible .seta{opacity:1;transform:none}
.linha-obra:hover{color:var(--tinta)}

/* Ficha técnica */
.ficha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;max-width:600px;border-top:1px solid var(--linha);padding-top:24px;margin:0}
.ficha dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);margin-bottom:6px}
.ficha dd{margin:0;font-size:15px}
.escuro .ficha{border-color:var(--noite-linha)}
.escuro .ficha dt{color:var(--noite-cinza)}

/* Sala de leitura */
.sala{position:relative;background:var(--papel-claro);color:var(--tinta);transition:background .6s ease,color .6s ease}
.sala.noite{background:var(--noite);color:var(--noite-texto)}
.sala .grao{display:none}
.sala.noite .grao{display:block}
.opcoes{display:flex;gap:8px}
.opcoes button{min-width:48px;min-height:48px;padding:0 16px;background:transparent;border:1px solid #B5AEA7;cursor:pointer;transition:background .3s ease}
.opcoes button:hover{background:rgba(43,35,33,.06)}
.sala.noite .opcoes button{border-color:#5A524D}
.sala.noite .opcoes button:hover{background:rgba(230,228,225,.08)}
.indice{flex:0 0 auto;width:320px;list-style:none;margin:0;padding:0;font-family:var(--serif);font-size:18px}
.ix{display:flex;align-items:baseline;gap:12px;width:100%;min-height:40px;padding:6px 0;background:transparent;border:0;border-bottom:1px solid rgba(43,35,33,.12);text-align:left;font:inherit}
.sala.noite .ix{border-color:rgba(230,228,225,.12)}
.ix .tl{flex:1 1 auto;transition:transform .6s var(--ease)}
.ix .mus{font-family:var(--sans);font-size:11px;opacity:.7}
.ix .pg{font-family:var(--sans);font-size:12px;width:24px;text-align:right}
button.ix{cursor:pointer;font-style:italic}
button.ix:hover .tl,button.ix:focus-visible .tl{transform:translateX(10px)}
button.ix[aria-current="true"]{color:var(--sepia)}
.sala.noite button.ix[aria-current="true"]{color:var(--noite-acento)}
div.ix{opacity:.55}
.poema-area{flex:1 1 0;min-width:0;max-width:640px;margin:0 auto;position:sticky;top:40px}
.poema-titulo{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;margin:0 0 20px}
.poema{margin:0;font-family:var(--serif);line-height:1.65;white-space:pre-wrap;font-size:22px;transition:font-size .3s ease}
.poema-anim{animation:tinta 1.1s ease both}

/* Música */
.escuro{background:var(--noite);color:var(--noite-texto)}
.estado{display:inline-flex;align-items:center;gap:10px;min-height:32px;padding:0 14px;border:1px solid var(--noite-acento);color:var(--noite-acento);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.estado i{width:6px;height:6px;border-radius:50%;background:currentColor}
.leitor{border-top:1px solid var(--noite-linha);border-bottom:1px solid var(--noite-linha);padding:28px 0;display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center}
.tocar{width:56px;height:56px;border-radius:50%;border:1px solid var(--noite-texto);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background .4s ease,color .4s ease}
.tocar:hover{background:var(--noite-texto);color:var(--noite)}
.tocar[disabled]{border-color:#5A524D;color:#8C857E;cursor:not-allowed;background:transparent}
.progresso{flex:1 1 280px;min-width:0}
.barra{height:2px;background:var(--noite-linha);position:relative;margin-bottom:12px;cursor:pointer}
.barra i{position:absolute;left:0;top:0;bottom:0;background:var(--noite-acento);width:0}
.faixas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;border-top:1px solid var(--noite-texto);position:relative}
.faixa-item{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--noite-linha)}
.faixa-item .n{width:28px;font-size:13px;color:var(--noite-cinza);transition:color .5s ease}
.faixa-item .t{flex:1 1 auto;font-family:var(--serif);font-size:27px;font-weight:300;font-style:italic;transition:transform .7s var(--ease),color .5s ease;text-align:left;background:none;border:0;padding:0;cursor:default}
.faixa-item button.t{cursor:pointer}
.faixa-item .p{font-size:12px;color:var(--noite-cinza)}
.faixa-item:hover .t{transform:translateX(14px);color:#F4F2EF}
.faixa-item:hover .n{color:var(--noite-acento)}
.faixa-item.a-tocar .t,.faixa-item.a-tocar .n{color:var(--noite-acento)}
.eco{position:absolute;left:var(--gutter);right:var(--gutter);top:-40px;margin:0;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(80px,11vw,168px);line-height:1;color:var(--noite-texto);opacity:.04;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:opacity .9s ease}
.eco.activo{opacity:.09}
.creditos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px;border-top:1px solid var(--noite-linha);padding-top:24px;margin:0}
.creditos dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--noite-cinza);margin-bottom:6px}
.creditos dd{margin:0;font-size:16px}
.campo{flex:1 1 240px;min-height:52px;border:0;border-bottom:1px solid var(--tinta);background:transparent;font-size:18px;color:var(--tinta);padding:0}
.campo:focus{outline:none;border-bottom-width:2px}
.plataforma{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border:1px solid var(--tinta);font-size:14px;letter-spacing:.06em}

/* Prosa */
.prosa{background:var(--papel-prosa)}
.prosa a:hover{color:var(--azul)}
.prosa .menu a[aria-current="page"]{color:var(--azul)}
.capitulos{list-style:none;margin:0;padding:0}
.capitulos button{width:100%;min-height:48px;display:flex;gap:14px;align-items:baseline;text-align:left;padding:12px 0;background:transparent;border:0;border-bottom:1px solid #DDD7CD;color:var(--cinza);font-size:15px;cursor:pointer}
.capitulos button[aria-current="true"]{color:var(--azul)}
.texto-prosa{font-family:var(--serif);font-size:22px;line-height:1.75}
.texto-prosa p{margin:0 0 1.2em;text-indent:1.5em}
.texto-prosa p:first-child{text-indent:0}
.texto-prosa p:first-child::first-letter{float:left;font-size:84px;line-height:.8;padding:8px 10px 0 0;color:var(--azul)}
.texto-prosa .cena{text-align:center;letter-spacing:.6em;color:#8C857E;text-indent:0}

.obras{list-style:none;margin:0 0 0;padding:0;border-top:1px solid var(--tinta)}
.obra-btn{width:100%;background:none;border:0;border-bottom:1px solid #D3CDC5;text-align:left;cursor:pointer;font:inherit;color:inherit}
.obras .nm{font-size:clamp(30px,3.6vw,52px)}
.obras .linha-obra::after{background:var(--azul)}
.obra-btn[aria-current="true"] .nm{color:var(--azul)}
.obra-btn[aria-current="true"] .seta{opacity:1;transform:none}
.leitura-prosa{max-width:680px;margin:clamp(72px,9vw,128px) auto 0}
.obras-nav-visivel + .leitura-prosa{margin-top:clamp(96px,11vw,160px)}
.obra-cabeca{text-align:center;margin-bottom:64px}
.obra-cabeca .display{scroll-margin-top:40px}
.leitura-prosa .fim{display:block;margin:56px auto 0;opacity:.7}
.fonte{margin-top:72px;padding-top:40px;border-top:1px solid var(--tinta);text-align:center}
.barra-prosa{position:fixed;left:0;right:0;top:0;height:2px;z-index:40;background:rgba(35,57,91,.12);opacity:0;transition:opacity .5s ease;pointer-events:none}
.barra-prosa.visivel{opacity:1}
.barra-prosa i{display:block;height:2px;width:0;background:var(--azul)}
.texto-prosa p.fala{text-indent:0}
.texto-prosa .continua{letter-spacing:.1em;font-style:italic;color:var(--azul);margin-top:2em}
.fonte .serif.it{color:var(--tinta)}

/* Cinema */
.cinema{background:#000;color:var(--noite-texto)}
.ecra{aspect-ratio:2.39/1;background:#0B0A09;border:1px solid #2E2B27;display:flex;align-items:flex-end;justify-content:space-between;padding:clamp(16px,3vw,40px);overflow:hidden;position:relative}
.ecra img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.separadores{display:flex;flex-wrap:wrap;border-bottom:1px solid #2E2B27;margin-bottom:56px}
.separadores button{min-height:52px;padding:0 24px;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--noite-cinza);font-family:var(--mono);font-size:15px;letter-spacing:.06em;cursor:pointer}
.separadores button[aria-selected="true"]{color:var(--noite-texto);border-color:var(--noite-texto)}
.guiao{background:#F4F1EC;color:#111;padding:clamp(32px,5vw,72px);font-family:var(--mono);font-size:16px;line-height:1.5;white-space:pre-wrap;margin:0}

/* Rodapé */
.rodape{position:relative;border-top:1px solid var(--linha)}
.escuro .rodape,.escuro.rodape,.cinema .rodape{border-color:var(--noite-linha)}
.rodape .wrap{display:flex;flex-wrap:wrap;gap:20px 48px;justify-content:space-between;align-items:baseline;padding-top:48px;padding-bottom:48px;font-size:13px}
.rodape .redes{display:flex;flex-wrap:wrap;gap:8px 24px}
.rodape a{padding:12px 0;display:inline-block}

/* Responsivo */
@media (max-width:900px){
  .dividir{flex-direction:column;align-items:stretch}
  .titulo-sobre{margin-left:0;margin-top:40px}
  .linha-obra .meta{display:none}
  .indice{width:auto}
  .poema-area{position:static}
  .faixas,.creditos{grid-template-columns:minmax(0,1fr)}
  .eco{display:none}
  .ficha{grid-template-columns:repeat(2,minmax(0,1fr))}
  .so-largo{display:none !important}
}
@media (max-width:520px){
  .assinatura{font-size:14px;letter-spacing:.24em}
  .menu{gap:0 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .rv{opacity:1;transform:none;filter:none}
}