/* Guias Chris Rafael — tokens e peças comuns (mesma identidade do chrisrafaelfilms.com + dos PDFs dos guias). */
:root{
  --noite:#120E0B; --noite-2:#1A1410; --noite-3:#241C16; --grafite:#252725;
  --creme:#F1E9DE; --creme-2:#D9CCBB; --cinza:#9C9084;
  --caramelo:#B48A5C; --caramelo-2:#D2AD80; --bronze:#9A7444;
  --papel:#F3EEE6; --papel-2:#EAE2D6; --papel-3:#DDD3C4; --tinta:#24211D; --tinta-2:#5E5850;
  --linha:rgba(241,233,222,.12); --linha-p:rgba(36,33,29,.12);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost','Helvetica Neue',sans-serif;
  --r:22px; --r-g:36px; --arco:999px 999px 26px 26px;
  --vidro:linear-gradient(145deg,rgba(241,233,222,.09),rgba(241,233,222,.025));
  --desfoque:blur(20px) saturate(140%);
  --sombra:0 1px 0 rgba(255,255,255,.07) inset,0 24px 60px -28px rgba(0,0,0,.75);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--noite);color:var(--creme);font:300 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--caramelo-2);outline-offset:3px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.serif{font-family:var(--serif);font-weight:400}
.kicker{font:500 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--caramelo-2)}
.papel .kicker{color:var(--bronze)}
em.c{font-style:italic;color:var(--caramelo-2)}
.papel em.c{color:var(--bronze)}

/* botões em pílula */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;
  font:500 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.bt:active{transform:scale(.98)}
.bt-luz{background:var(--creme);color:var(--noite);box-shadow:0 14px 40px -14px rgba(210,173,128,.55)}
.bt-luz:hover{background:#fff}
.bt-tinta{background:var(--tinta);color:var(--papel)}
.bt-tinta:hover{background:#000}
.bt-linha{background:transparent;color:inherit;border:1px solid currentColor;opacity:.85}
.bt svg{width:18px;height:18px;flex:0 0 auto}
.bt[disabled]{opacity:.5;pointer-events:none}

/* blocos claros (papel), como as páginas internas dos PDFs */
.papel{background:var(--papel);color:var(--tinta)}
.papel .sub{color:var(--tinta-2)}
.sub{color:var(--creme-2)}

/* grão de filme */
.grao::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:90;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* entrada ao rolar */
.ve{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.ve.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ve{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}