/* ===== Luane Pinheiro · base compartilhada (tokens + gestos de rabisco) ===== */
:root{
  --papel:#FBF8F2; --papel-2:#F4EEE3; --papel-3:#EDE5D6;
  --tinta:#1B1B1B; --tinta-2:#4A4640; --tinta-3:#6F6A61;
  --laranja:#F58A3C; --laranja-forte:#F26B1F; --laranja-texto:#C4470F; --laranja-livro:#FF5500; --laranja-suave:#FDE7D3;
  --noite:#1A1D22; --noite-2:#262A31;
  --linha:rgba(27,27,27,.14);
  --font-display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --font-body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --raio-ink:255px 15px 225px 15px / 15px 225px 15px 255px;
  --raio-ink-2:15px 225px 15px 255px / 255px 15px 225px 15px;
  --sombra-ink:3px 3px 0 var(--tinta);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--font-body);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0}
p{margin:0}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:#fff;padding:8px 12px;border-radius:6px;z-index:100}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid var(--laranja-forte);outline-offset:3px}

/* papel: grade pontilhada + grão */
.papel-pontilhado{background-color:var(--papel);background-image:radial-gradient(rgba(27,27,27,.13) 1px,transparent 1.2px);background-size:22px 22px}
.papel-pauta{background-color:var(--papel);background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(27,27,27,.09) 31px 32px)}
.grao{position:relative}
.grao::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}

/* marca-texto laranja (gesto do feed) */
.mk{background:linear-gradient(104deg,rgba(245,138,60,0) 0.6%,rgba(245,138,60,.62) 2.2%,rgba(245,138,60,.42) 5.5%,rgba(245,138,60,.36) 92%,rgba(245,138,60,.58) 96%,rgba(245,138,60,0) 98.5%);
  padding:.06em .28em;margin:0 -.2em;border-radius:.5em .25em .6em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mk-forte{background:linear-gradient(102deg,rgba(242,107,31,0) .5%,rgba(242,107,31,.9) 2%,rgba(242,107,31,.82) 96%,rgba(242,107,31,0) 99%);color:#fff;padding:.04em .3em;margin:0 -.2em;border-radius:.45em .2em .55em .25em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* borda de caneta (leve tremida) */
.ink{border:2px solid var(--tinta);border-radius:var(--raio-ink)}
.ink-2{border:2px solid var(--tinta);border-radius:var(--raio-ink-2)}

/* rótulos e mono */
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
.eyebrow.laranja{color:var(--laranja-texto)}

/* botões */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;
  padding:13px 20px;border:2px solid var(--tinta);border-radius:var(--raio-ink);background:var(--papel);color:var(--tinta);text-decoration:none;
  box-shadow:var(--sombra-ink);transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;line-height:1}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinta)}
.btn-laranja{background:var(--laranja-forte);color:#fff}
.btn-noite{background:var(--tinta);color:var(--papel)}
.btn svg{width:18px;height:18px;flex:none}
.btn-ghost{box-shadow:none;border-color:transparent;padding-left:6px;padding-right:6px}
.btn-ghost:hover{box-shadow:none;transform:none;text-decoration:underline;text-underline-offset:4px}

/* ícones: sempre stroke */
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* doodles reais dela */
.doodle{position:absolute;pointer-events:none;user-select:none}

/* reveal ao rolar */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}