/* ROUGH — sistema.
   TIPOGRAFIA revista em 04/09/2026, com o brand book reaberto: o wordmark
   virou curva (SVG de contornos) e deixou de exigir a Saira em lugar nenhum.
   Saira e Inter saíram. Duas famílias, dois registros opostos:
     Karrik  (Velvetyne, OFL)  — a voz e o corpo. Grotesca irregular.
     Sligoil (Velvetyne, OFL)  — o registro: rótulo, número, legenda, botão, legal.
   Mono para dado porque o arquivo é um índice, e mono é a forma do registro.
   O wordmark é agora a única grotesca pesada do site — é isso que lhe dá força.
   PALETA inalterada: três cores, e as 6 regras do rare red seguem valendo. */
@font-face{font-family:'Karrik';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/karrik-regular.woff2') format('woff2')}
@font-face{font-family:'Karrik';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/karrik-italic.woff2') format('woff2')}
@font-face{font-family:'Sligoil';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/sligoil-micro.woff2') format('woff2')}
@font-face{font-family:'Sligoil';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/sligoil-medium.woff2') format('woff2')}

:root{
  /* ── PALETA — três cores. Não existe uma quarta. ──────────
     BLACK  DENSE · HEAVY · PRESSING
     BLOOD  INTERRUPTION · NOT DECORATION
     BONE   MATTER · NOT VOID                                  */
  --bone:#EDE8DF;           /* off-white canônico */
  --raw:#E8E0D4;            /* exceção quente, um gesto por projeto */
  --black:#1A1A1A;
  --red:#D42B2B;

  /* auxiliares documentados — superfícies e fios, nunca "cor" */
  --dark-2:#2A2A2A; --dark-3:#3A3A3A;
  --line:#D0C9BC; --line-f:#C0B9AC; --muted:#666;
  --line-d:rgba(237,232,223,.22);

  /* ── TIPOGRAFIA — duas famílias, dois registros ───────────
     Karrik          voz, títulos, corpo de leitura
     Karrik Italic   ênfase
     Sligoil Micro   rótulo, numeração, legenda, botão, legal
     O wordmark não usa fonte: é curva.                        */
  --voz:'Karrik',ui-sans-serif,sans-serif;    /* voz e corpo   */
  --dado:'Sligoil',ui-monospace,monospace;    /* todo registro */
  --mark:var(--voz); --sys:var(--voz);        /* compat. interna */

  /* ── LAYOUT PRIMITIVE — margem 6–10%, travado no §18 ────── */
  --pad:clamp(22px,7vw,116px);
  --g:clamp(10px,1.2vw,20px);
  --hdr:clamp(58px,7vh,76px);
  --wm-hdr:clamp(40px,3.4vw,60px);   /* web header = masthead 40–60px */
  --wm-ratio:4.5545;                 /* proporção da tinta do wordmark */
  --wm-corte:.08;                    /* fração comida na base, na sangria */

  --escala-solo:26vw;
  --escala-par-a:58vw;
  --escala-par-b:26vw;

  --t-h1:clamp(28px,4.6vw,64px);
  --t-h3:clamp(19px,2.1vw,30px);
  --t-voz:clamp(19px,2.6vw,34px);
  --t-read:clamp(15px,1vw,17px);
  --t-dado:clamp(9px,.68vw,10.5px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bone);-webkit-text-size-adjust:100%}
/* a porta é escura de ponta a ponta: sem isso o fundo bone do documento
   aparece como uma barra clara embaixo quando a página chega ao fim */
html:has(.portal),body.porta{background:var(--black)}
/* e a porta é um campo chapado: o grão e as manchas do documento — que são
   matéria de papel e pertencem à biblioteca — não entram aqui. Um fundo só,
   sem nada por trás. */
body.porta::before,body.porta::after{content:none}
body{background:var(--bone);color:var(--black);font-family:var(--sys);overflow-x:hidden;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* matéria impressa: grão ≤13%, manchas neutras, no máximo uma quente.
   O bege da v04 vinha daqui, não do hex. */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:80;mix-blend-mode:multiply;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23p)' opacity='.4'/%3E%3C/svg%3E")}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:79;mix-blend-mode:multiply;opacity:.5;
  background:radial-gradient(56% 40% at 6% 3%,rgba(26,26,26,.028),transparent 72%),
             radial-gradient(50% 36% at 96% 52%,rgba(26,26,26,.03),transparent 72%),
             radial-gradient(46% 30% at 74% 8%,rgba(150,132,98,.035),transparent 74%)}

img{display:block;width:100%;height:auto;filter:contrast(1.03);background:rgba(26,26,26,.05)}
a{color:inherit;text-decoration:none}
.folha{padding-inline:var(--pad)}

/* ── registos tipográficos ── */
.marca{display:block;line-height:0}
.marca svg{display:block;height:var(--wm-hdr);width:auto;color:var(--black)}
.marca-g svg{height:var(--wm-hdr)}
.h1{font-family:var(--sys);font-weight:300;font-size:var(--t-h1);line-height:1.03;letter-spacing:-.018em;margin-top:.28em}
.h3{font-family:var(--sys);font-weight:300;font-size:var(--t-h3);line-height:1.08;letter-spacing:-.014em;margin-top:.3em}
.voz{font-family:var(--sys);font-weight:300;font-size:var(--t-voz);line-height:1.22;margin-top:.7em;max-width:26ch}
.voz-g{font-family:var(--sys);font-weight:300;font-style:italic;font-size:clamp(24px,4.6vw,62px);line-height:1.12;max-width:17ch}
.leitura{font-family:var(--sys);font-weight:400;font-size:var(--t-read);line-height:1.66;max-width:62ch;margin-top:1em}
.leitura p+p{margin-top:1.05em}
.mut{color:rgba(26,26,26,.5)}
.peq{font-family:var(--dado);font-size:var(--t-dado);letter-spacing:.2em;text-transform:uppercase;margin-top:10px}
.r-hv{height:1.5px;background:var(--black)}
.r-md{height:1px;background:var(--line)}
.r-fn{height:1px;background:var(--line-f)}
.rot,.ent-cab{font-family:var(--dado);font-weight:500;font-size:var(--t-dado);letter-spacing:.26em;text-transform:uppercase;
     display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding-bottom:7px}
figcaption,.cap,.meta-l,.d,.cnt,.k{font-family:var(--dado);font-weight:400;font-size:var(--t-dado);
     letter-spacing:.2em;text-transform:uppercase;color:rgba(26,26,26,.5);line-height:1.9}
figcaption,.cap{margin-top:8px}
.meta-l{margin-top:1.2em}
.restr{font-family:var(--dado);font-weight:500;font-size:var(--t-dado);letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-top:10px}

/* ── INTERAÇÃO — sem cor própria ──────────────────────────────
   Rare red regra 4: vermelho nunca em UI funcional. A marca só tem
   três cores, então não existe uma quarta para o clicável.
   Affordance = contraste + peso + movimento (fio, seta, opacidade). */
.seta{font-family:var(--dado);font-weight:500;font-size:var(--t-dado);letter-spacing:.2em;text-transform:uppercase;
      color:var(--black);opacity:.55;transition:opacity .18s,transform .18s;white-space:nowrap}
.fio{height:1.5px;background:var(--black);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
a:hover .seta{opacity:1;transform:translateX(4px)}
a:hover .fio{transform:scaleX(1)}
a:hover .nome,a:hover .t,a:hover .h3{color:var(--black)}
a:hover img{filter:contrast(1.12) brightness(1.04)}
a:focus-visible{outline:1.5px solid var(--black);outline-offset:6px}
.nome,.t,.h3,img{transition:color .2s,filter .25s}

/* ── cabeçalho: única permanência do site ── */
.hdr{position:sticky;top:0;z-index:65;background:var(--bone);border-bottom:1.5px solid var(--black);padding-inline:var(--pad)}
.hdr-in{min-height:var(--hdr);padding-block:10px;display:flex;align-items:center;gap:clamp(12px,2.2vw,30px)}
.path{display:flex;align-items:center;gap:8px;overflow:hidden;min-width:0}
.path a,.path span,.path-obra{font-family:var(--dado);font-weight:500;font-size:var(--t-dado);letter-spacing:.2em;
     text-transform:uppercase;white-space:nowrap;color:rgba(26,26,26,.42)}
.path a:hover,.path-obra:hover{color:var(--black)}
.path .now{color:var(--black)}
.path .sep{color:rgba(26,26,26,.28)}
.path-obra{margin-left:auto}

/* ── biblioteca ── */
.estudo{display:block;margin-bottom:clamp(26px,4.6vh,62px)}
.estudo-cab{display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(10px,1.8vw,30px);align-items:baseline;padding:10px 0 11px}
.estudo .num{font-family:var(--sys);font-weight:500;font-size:var(--t-dado);letter-spacing:.22em;color:var(--red)}
.estudo .nome{font-family:var(--sys);font-weight:300;font-size:clamp(21px,2.7vw,38px);line-height:1;letter-spacing:-.015em}
.estudo.curso .num::after{content:' ·'}
.estudo .cnt{text-align:right;white-space:nowrap}
.estudo .ideia{font-family:var(--sys);font-weight:300;font-size:clamp(14px,1.15vw,17px);
               color:rgba(26,26,26,.55);margin-top:10px;max-width:52ch}
/* a densidade da banda é o gráfico da prática: estudo que engrossou mostra mais e menor */
.banda{display:flex;width:100%;overflow:hidden}
.banda img{height:var(--bh);width:auto;min-width:0;object-fit:cover;flex:var(--fg) 1 0}
.d1{--bh:clamp(130px,19vh,225px)} .d2{--bh:clamp(98px,14vh,165px)} .d3{--bh:clamp(60px,8.4vh,104px)}

/* ── obra ── */
.obra-l{display:grid;grid-template-columns:1fr 1fr auto auto;gap:clamp(12px,2vw,30px);align-items:baseline;
        padding:clamp(11px,1.5vh,19px) 0;border-bottom:1px solid var(--line-f)}
.obra-l .t{font-family:var(--sys);font-weight:300;font-size:clamp(19px,2.1vw,30px);line-height:1.06;letter-spacing:-.014em}
.obra-l .e{font-family:var(--dado);font-size:var(--t-dado);letter-spacing:.2em;text-transform:uppercase;color:rgba(26,26,26,.42)}

/* ── estudo ── */
.entradas{margin-top:clamp(30px,6vh,80px)}
.entrada{display:block;padding-top:clamp(18px,2.6vh,34px);margin-bottom:clamp(30px,6vh,80px)}
.entrada .capa{margin-top:clamp(14px,2vh,26px);max-width:62%}
.entrada .seta{display:inline-block;margin-top:12px}
.soltos{margin-top:clamp(34px,7vh,90px)}
.tira{display:flex;align-items:flex-end;gap:clamp(6px,.9vw,14px);overflow:hidden;margin-top:10px}
.tira img{width:auto;flex:0 0 auto;image-rendering:pixelated}

/* ── módulos do ensaio ── */
.abre{padding-top:clamp(16px,2.6vh,32px)}
.m-sangria{margin-top:clamp(30px,7vh,90px)}
.m-sangria>img{aspect-ratio:16/7;object-fit:cover}
.m-solo{margin-top:clamp(60px,20vh,240px);margin-bottom:clamp(60px,20vh,240px)}
.m-solo .solo{width:var(--escala-solo);margin-left:8%}
.m-par{margin-top:clamp(50px,14vh,180px);display:grid;grid-template-columns:1fr 1fr;gap:var(--g);align-items:start}
.m-par .a{width:var(--escala-par-a);max-width:100%}
.m-par .b{width:var(--escala-par-b);max-width:100%;margin-top:clamp(50px,22vh,260px);justify-self:end}
.m-emenda{margin-top:clamp(40px,11vh,140px);display:grid;grid-template-columns:1.45fr 1fr;gap:0}
.m-emenda>img:first-of-type{aspect-ratio:5/4;object-fit:cover}
.m-emenda>img:nth-of-type(2){aspect-ratio:5/3;object-fit:cover}
.m-emenda>.folha{grid-column:1/-1}
.m-pilha{margin-top:clamp(50px,16vh,200px)}
.m-pilha .p-w{position:relative;width:62%;margin-left:6%}
.m-pilha .over{position:absolute;right:-9%;bottom:-8%;width:34%;box-shadow:0 0 0 8px var(--bone)}
.m-grade{margin-top:clamp(40px,11vh,140px);display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.m-grade img{aspect-ratio:1/1;object-fit:cover}
.m-bloco{margin-top:clamp(40px,11vh,140px)}
.m-bloco .bl{background:rgba(26,26,26,.05);padding:clamp(18px,2.2vw,34px);max-width:46%}
.m-bloco .bl p{font-family:var(--sys);font-size:var(--t-read);line-height:1.6;margin-top:14px}
.m-carimbo{margin-top:clamp(50px,16vh,200px);background:var(--black);color:var(--bone);padding-block:clamp(40px,11vh,140px)}
.m-branca{height:clamp(120px,34vh,420px)}
.m-contato{margin-top:clamp(50px,16vh,200px)}
.grade-c{display:grid;grid-template-columns:repeat(10,1fr);gap:0;margin-top:12px}
.grade-c img{aspect-ratio:1/1;object-fit:cover;image-rendering:pixelated}

.nav2{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);margin-top:clamp(40px,9vh,110px);padding-bottom:clamp(30px,6vh,70px)}
.nav2 a{padding:16px 0;border-top:1px solid var(--line)}
.nav2 .dir{text-align:right}
.nav2 .k{display:block;color:var(--black)}
.nav2 .t{display:block;font-family:var(--sys);font-weight:300;font-size:clamp(17px,1.9vw,26px);line-height:1.1;margin-top:6px}

.pe{border-top:1px solid var(--line);margin-top:clamp(40px,8vh,100px);padding:18px var(--pad) 40px;
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-family:var(--dado);font-size:var(--t-dado);letter-spacing:.2em;text-transform:uppercase;color:rgba(26,26,26,.42)}
.pe .ad{color:var(--black)}

@media(max-width:900px){
  .estudo-cab{grid-template-columns:auto 1fr auto;row-gap:3px}
  .estudo .cnt{grid-column:1/4;text-align:left}
  .obra-l{grid-template-columns:1fr auto auto;row-gap:2px}
  .obra-l .e{grid-column:1/4}
  .m-par{grid-template-columns:1fr}
  .m-par .a,.m-par .b{width:100%}
  .m-par .b{margin-top:6vh;width:64%}
  .m-solo .solo{width:62%;margin-left:0}
  .m-pilha .p-w{width:100%;margin-left:0}
  .m-pilha .over{width:40%;right:-3%;box-shadow:0 0 0 5px var(--bone)}
  .m-emenda{grid-template-columns:1fr}
  .m-emenda>img:first-of-type,.m-emenda>img:nth-of-type(2){aspect-ratio:4/3}
  .m-grade{grid-template-columns:repeat(3,1fr)}
  .grade-c{grid-template-columns:repeat(6,1fr)}
  .m-bloco .bl{max-width:100%}
  .entrada .capa{max-width:100%}
  .path-obra{margin-left:auto}
}

/* ═══════════════════════════════════════════════════════════
   PORTAL — área 01. Uma porta, quase sem informação.

   A página ROLA. O wordmark fica FIXO no rodapé e INVADE a fotografia,
   que corre junto com o scroll — a cada altura ele corta um trecho
   diferente da imagem.

   Isso suspende deliberadamente a regra 6 do rare red (vermelho nunca
   sobre fotografia). Decisão do Nelson, 05/09/2026. É exceção declarada
   e registrada no README, não descuido: o véu que eu tinha inventado
   para contornar a regra foi medido e não se sustentava.

   Rare red na porta: uma aparição, o wordmark. Abaixo do teto da regra 3.
   ═══════════════════════════════════════════════════════════ */
.portal{
  --wm-h:calc(100vw / var(--wm-ratio) * (1 - var(--wm-corte)));
  --foto-t:clamp(52px,9vh,124px);
  --foto-w:clamp(220px,41vw,760px);
  --foto-r:.75;   /* proporção real da imagem, sobrescrita inline pelo build */
  position:relative;color:var(--bone);
  /* O SCROLL É DA IMAGEM. A página tem a altura de uma tela inteira MAIS a
     altura real da fotografia: rolar até o fim leva o quadro para fora da
     tela por completo, e esse é o limite. Trocar a foto muda o percurso. */
  min-height:calc(100svh + var(--foto-t) + var(--foto-w) / var(--foto-r));
  padding:0 var(--pad) calc(var(--wm-h) + 7vh)}

/* solta e deslocada — nunca colada na margem */
/* na proporção dela — o quadro é do fotógrafo, não do layout */
.portal .foto{position:absolute;top:var(--foto-t);right:clamp(40px,9vw,150px);
  width:var(--foto-w);height:auto;z-index:1;filter:contrast(1.04);background:none}

.portal .wm{position:fixed;left:0;bottom:0;width:100%;height:var(--wm-h);
  overflow:hidden;z-index:5;pointer-events:none;user-select:none}
.portal .wm svg{display:block;width:100%;height:auto;color:var(--red)}

.oculto{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* só a imagem rola. O acesso fica parado — fixo, como o wordmark.
   A porta não se move: o que passa por trás dela é a fotografia. */
.portal .folha{position:fixed;top:clamp(78px,17vh,196px);left:var(--pad);
  z-index:4;max-width:min(46ch,calc(52vw - var(--pad)))}

.portal form{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(22px,3.6vh,36px);margin:0}
.idade{display:flex;align-items:center;gap:13px;cursor:pointer;min-height:44px;
  font-family:var(--dado);font-size:var(--t-dado);letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone)}
.idade input{position:absolute;opacity:0;width:0;height:0}
.caixa{width:14px;height:14px;border:1px solid rgba(237,232,223,.62);flex:0 0 auto;transition:.18s}
.idade input:checked + .caixa{background:var(--bone);border-color:var(--bone)}
.idade input:focus-visible + .caixa{outline:1.5px solid var(--bone);outline-offset:4px}

/* AÇÃO SEM COR — rare red 4: vermelho nunca em UI funcional. */
.entrar{background:var(--bone);color:var(--black);border:0;cursor:pointer;
  padding:13px 34px;min-height:44px;font-family:var(--dado);font-weight:500;
  font-size:var(--t-dado);letter-spacing:.26em;text-transform:uppercase;transition:.18s}
.entrar:hover{background:#fff}
.entrar:disabled{background:none;color:rgba(237,232,223,.4);
  box-shadow:inset 0 0 0 1px rgba(237,232,223,.26);cursor:progress}
.entrar:focus-visible{outline:1.5px solid var(--bone);outline-offset:4px}
.erro{font-family:var(--dado);font-size:var(--t-dado);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone);min-height:1.5em;margin:0}

.miudo{font-family:var(--voz);font-size:11.5px;line-height:1.76;letter-spacing:.01em;
  color:rgba(237,232,223,.58);margin:clamp(30px,5vh,52px) 0 0;max-width:56ch}
.miudo a{color:rgba(237,232,223,.82);border-bottom:1px solid rgba(237,232,223,.4)}
.miudo a:hover{color:var(--bone);border-color:var(--bone)}

@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.portal form,.portal .miudo,.portal .foto{animation:sobe .5s cubic-bezier(.2,.7,.3,1) both}
.portal .miudo{animation-delay:.1s} .portal .foto{animation-duration:.9s}

@media(max-width:900px){
  .portal{--foto-w:min(78vw,360px);min-height:100svh}
  .portal .folha{position:static;max-width:none;padding-top:clamp(78px,14vh,150px)}
  .portal .foto{position:static;width:var(--foto-w);height:auto;
    margin:clamp(40px,7vh,70px) clamp(6px,3vw,30px) 0 auto}
  .entrar{width:100%;text-align:center;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}