/* fontes locais — sem chamada externa, sem rastreio de terceiros */
@font-face{font-family:'Saira';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/saira-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('fonts/archivo.woff2') format('woff2')}

:root{
  /* ── SUPERFÍCIE ────────────────────────────────────────────
     Decisão: portal escuro → biblioteca clara.
     A passagem do escuro para o claro É o gesto de entrar. */
  --paper:#F5F4F0;          /* biblioteca, estudo, ensaio */
  --tint:#ECEAE4;
  --ink:#1A1A1A;            /* portal, carimbo */
  --bone:#EDE8DF;           /* tinta sobre escuro */

  /* ── COR ───────────────────────────────────────────────────
     VERMELHO = a marca. Só a marca. Nunca sinaliza clique.
     AZUL     = ação. Só o que é clicável. Duas leituras do mesmo
                azul, porque uma só não sobrevive aos dois fundos.
     Vermelho é o desejo; azul é o registro que o arquiva. */
  --red:#D42B2B;
  --acao:#2438A8;           /* sobre claro */
  --acao-esc:#8C9CFF;       /* sobre escuro */

  --line:rgba(26,26,26,.22);
  --line-f:rgba(26,26,26,.12);

  /* ── TIPOGRAFIA ────────────────────────────────────────────
     ⟨B1 aplicado⟩ A serifa saiu. Duas famílias, só.
     Saira Black  → SÓ o logotipo. Máx. 2 ocorrências por página.
     Archivo      → todo o resto. Variável em LARGURA (62–125) e
                    peso (100–900): um ficheiro faz condensada,
                    normal e expandida. A largura é que hierarquiza. */
  --mark:'Saira',sans-serif;
  --sys:'Archivo','Archivo Narrow',system-ui,sans-serif;

  --w-cond:74;              /* título e etiqueta */
  --w-norm:100;             /* leitura */
  --w-exp:118;              /* dado em caixa alta */

  /* ── ⟨A⟩ ESPAÇO — A2 vigente (ar domina).
     A1: --pad:2vw · A3: alternância brutal, ver §8 da spec */
  --pad:clamp(18px,4.2vw,84px);
  --escala-solo:26vw;
  --escala-par-a:58vw;
  --escala-par-b:26vw;

  --g:clamp(10px,1.2vw,20px);
  --hdr:clamp(44px,5.2vh,54px);

  --t-h1:clamp(28px,4.6vw,64px);
  --t-h3:clamp(19px,2.1vw,30px);
  --t-voz:clamp(18px,2.4vw,32px);
  --t-read:clamp(15px,1vw,17px);
  --t-dado:clamp(9px,.68vw,10.5px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);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{font-family:var(--mark);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.78;font-size:clamp(16px,1.5vw,21px)}
.marca-g{font-size:clamp(18px,1.7vw,24px)}
.h1{font-family:var(--sys);font-variation-settings:'wdth' var(--w-cond);font-weight:300;font-size:var(--t-h1);line-height:1.03;letter-spacing:-.018em;margin-top:.28em}
.h3{font-family:var(--sys);font-variation-settings:'wdth' var(--w-cond);font-weight:300;font-size:var(--t-h3);line-height:1.08;letter-spacing:-.014em;margin-top:.3em}
.voz{font-family:var(--sys);font-variation-settings:'wdth' var(--w-cond);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-variation-settings:'wdth' var(--w-cond);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-variation-settings:'wdth' var(--w-norm);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(--sys);font-size:var(--t-dado);letter-spacing:.2em;text-transform:uppercase;margin-top:10px}
.r-hv{height:1.5px;background:var(--ink)}
.r-md{height:1px;background:var(--line)}
.r-fn{height:1px;background:var(--line-f)}
.rot,.ent-cab{font-family:var(--sys);font-variation-settings:'wdth' var(--w-exp);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(--sys);font-variation-settings:'wdth' var(--w-exp);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(--sys);font-variation-settings:'wdth' var(--w-exp);font-weight:500;font-size:var(--t-dado);letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-top:10px}

/* ── ⟨C⟩ INTERAÇÃO: vermelho = clicável. Nada mais no sistema é vermelho. ── */
.seta{font-family:var(--sys);font-variation-settings:'wdth' var(--w-exp);font-weight:500;font-size:var(--t-dado);letter-spacing:.2em;text-transform:uppercase;
      color:var(--acao);opacity:.55;transition:opacity .18s,transform .18s;white-space:nowrap}
.fio{height:1.5px;background:var(--acao);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(--acao)}
a:hover img{filter:contrast(1.12) brightness(1.04)}
a:focus-visible{outline:1.5px solid var(--acao);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(--paper);border-bottom:1.5px solid var(--ink);padding-inline:var(--pad)}
.hdr-in{height:var(--hdr);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(--sys);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(--acao)}
.path .now{color:var(--ink)}
.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-variation-settings:'wdth' var(--w-exp);font-weight:500;font-size:var(--t-dado);letter-spacing:.22em;color:var(--red)}
.estudo .nome{font-family:var(--sys);font-variation-settings:'wdth' var(--w-cond);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-variation-settings:'wdth' var(--w-cond);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-variation-settings:'wdth' var(--w-cond);font-weight:300;font-size:clamp(19px,2.1vw,30px);line-height:1.06;letter-spacing:-.014em}
.obra-l .e{font-family:var(--sys);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(--paper)}
.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:var(--tint);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(--ink);color:var(--paper);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(--acao)}
.nav2 .t{display:block;font-family:var(--sys);font-variation-settings:'wdth' var(--w-cond);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(--sys);font-size:var(--t-dado);letter-spacing:.2em;text-transform:uppercase;color:rgba(26,26,26,.42)}
.pe .ad{color:var(--red)}

@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(--paper)}
  .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
   Único ambiente escuro do site junto com o Carimbo.
   A passagem daqui para a biblioteca clara é o gesto de entrar.
   ═══════════════════════════════════════════════════════════ */
.portal{min-height:100svh;background:var(--ink);color:var(--bone);position:relative;overflow:hidden;
        display:grid;grid-template-columns:0.78fr 1.22fr;align-items:center;
        padding:clamp(24px,5vh,60px) var(--pad) 0}
.portal::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:overlay;opacity:.09;
  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)'/%3E%3C/svg%3E")}

/* a fotografia é camada, não cartão: a marca passa por cima dela */
.portal .placa{position:relative;z-index:1;width:min(34vw,420px);margin-left:6%;align-self:start;margin-top:clamp(20px,7vh,80px)}
.portal .placa img{aspect-ratio:3/4;object-fit:cover;filter:contrast(1.06) grayscale(1)}
.portal .placa figcaption{margin-top:10px;color:rgba(237,232,223,.34)}

/* a marca sangra pelas duas bordas e é cortada embaixo — nunca se vê inteira */
.portal .wm{position:absolute;left:50%;bottom:0;transform:translate(-50%,22%);z-index:3;
  font-family:var(--mark);font-weight:900;color:var(--red);text-transform:uppercase;
  font-size:clamp(128px,29.2vw,540px);line-height:.74;letter-spacing:-.05em;white-space:nowrap;
  pointer-events:none;user-select:none}

.portal .col{position:relative;z-index:4;width:100%;max-width:none;justify-self:start;padding-bottom:16vh;padding-right:2%}
.portal .chamada{font-family:var(--sys);font-variation-settings:'wdth' var(--w-exp);font-weight:400;
  font-size:clamp(12.5px,1.22vw,17px);letter-spacing:.13em;text-transform:uppercase;line-height:1.65;color:var(--bone);max-width:44ch}

.portal form{margin-top:clamp(24px,4.4vh,48px);display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(16px,2.6vh,30px) clamp(22px,3vw,52px);align-items:end}
.campo{grid-column:1/2}
.linha{grid-column:2/3;justify-content:space-between;flex-wrap:nowrap;gap:clamp(12px,1.6vw,26px);padding-bottom:6px}
.erro{grid-column:1/-1}
.campo{position:relative}
.campo input[type=email]{width:100%;background:none;border:0;border-bottom:1px solid rgba(237,232,223,.34);
  color:var(--bone);font-family:var(--sys);font-variation-settings:'wdth' var(--w-norm);font-size:clamp(14px,1.1vw,16px);
  padding:10px 0;outline:none;transition:border-color .2s}
.campo input::placeholder{color:rgba(237,232,223,.34);font-variation-settings:'wdth' var(--w-exp);
  font-size:var(--t-dado);letter-spacing:.2em;text-transform:uppercase}
.campo input:focus{border-bottom-color:var(--acao-esc)}

.linha{display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.portal .idade{white-space:nowrap}
.idade{display:flex;align-items:center;gap:11px;cursor:pointer;
  font-family:var(--sys);font-variation-settings:'wdth' var(--w-exp);font-weight:400;
  font-size:var(--t-dado);letter-spacing:.2em;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,.5);flex:0 0 auto;transition:.18s}
.idade input:checked + .caixa{background:var(--acao-esc);border-color:var(--acao-esc)}
.idade input:focus-visible + .caixa{outline:1.5px solid var(--acao-esc);outline-offset:3px}

/* ⟨ação⟩ estreia aqui: azul é o clicável, vermelho é a marca */
.entrar{margin-left:auto;background:var(--acao-esc);color:var(--ink);border:0;cursor:pointer;
  padding:11px 26px;font-family:var(--sys);font-variation-settings:'wdth' var(--w-exp);font-weight:600;
  font-size:var(--t-dado);letter-spacing:.24em;text-transform:uppercase;transition:.18s}
.entrar:hover{background:var(--bone)}
.entrar:disabled{background:rgba(237,232,223,.16);color:rgba(237,232,223,.4);cursor:not-allowed}
.entrar:focus-visible{outline:1.5px solid var(--bone);outline-offset:3px}

.miudo{font-family:var(--sys);font-variation-settings:'wdth' var(--w-exp);font-weight:400;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;line-height:2.05;color:rgba(237,232,223,.38);max-width:58ch;margin-top:clamp(20px,3.4vh,38px)}
.miudo a{color:rgba(237,232,223,.6);border-bottom:1px solid rgba(237,232,223,.25)}
.miudo a:hover{color:var(--acao-esc);border-color:var(--acao-esc)}
.erro{color:#FF8A8A;font-family:var(--sys);font-variation-settings:'wdth' var(--w-exp);
  font-size:var(--t-dado);letter-spacing:.16em;text-transform:uppercase;min-height:1.4em}

@media(max-width:820px){
  .portal{grid-template-columns:1fr;align-content:start;gap:clamp(20px,4vh,40px);padding-bottom:34vh}
  .portal form{grid-template-columns:1fr}
  .campo,.linha{grid-column:1/-1}
  .portal .placa{width:min(58vw,300px);margin-left:0;margin-top:clamp(10px,3vh,30px)}
  .portal .col{padding-bottom:0;max-width:100%}
  .portal .wm{font-size:clamp(96px,32vw,300px);transform:translate(-50%,20%)}
  .entrar{margin-left:0;width:100%}
}

/* portal · a linha de ação fica numa faixa só, alinhada ao campo */
.portal .linha{flex-wrap:nowrap;gap:clamp(14px,1.8vw,30px);justify-content:space-between;padding-bottom:8px}
.portal .idade{white-space:nowrap}
@media(max-width:820px){ .portal .linha{flex-wrap:wrap;padding-bottom:0} }