/* ===========================================================
   ericcoutinho.com — sistema da revista
   Arquitetura tipográfica herdada do site COUT: papéis com nome
   próprio, escala fluida em clamp, serifa só em citação.
   Regras de acabamento (padrão Rolex):
     1. nenhum valor solto — cor e espaço só saem de token
     2. uma curva de easing só: cubic-bezier(.23,1,.32,1), .3–.4s
     3. revelação curta: 20px; entrelinha de display abaixo de 1
     4. texto nunca disputa com a imagem: zona calma ou fora dela
     5. ritmo vertical constante: mesma margem externa em tudo
   =========================================================== */

:root{
  /* papéis tipográficos */
  --primary: "Poppins", system-ui, -apple-system, sans-serif;
  --quote:   "Instrument Serif", Georgia, serif;
  --tracking-label: .22em;

  /* escala fluida entre 390px e 1600px de viewport */
  --fs-numero:  clamp(4.4rem, 1.6rem + 11vw, 14rem);
  --fs-display: clamp(1.8rem, 1rem + 2.1vw, 3.1rem);
  --fs-h2:      clamp(1.35rem, .95rem + 1.1vw, 2.1rem);
  --fs-quote:   clamp(1.05rem, .9rem + .5vw, 1.45rem);
  --fs-body:    clamp(.82rem, .74rem + .28vw, 1rem);
  --fs-label:   clamp(.62rem, .58rem + .14vw, .72rem);

  /* cor em tripla RGB, para variar opacidade sem duplicar token */
  --branco:      255 255 255;
  --preto:         0   0   0;
  --tinta:        17  17  17;
  --papel:       244 242 238;
  --papel-puro:  252 252 251;
  --cinza-quente:228 225 219;

  /* ritmo */
  --outer-margin: 8vw;
  --v-space: clamp(3rem, 8vh, 7rem);
  --ease: cubic-bezier(.23,1,.32,1);
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;-webkit-text-size-adjust:100%}
body{margin:0;background:rgb(var(--preto));color:rgb(var(--branco));
     font-family:var(--primary);font-weight:300;overflow-x:hidden}
img{display:block;max-width:100%}

/* ---------- primitivas de tela ---------- */
.tela{position:relative;min-height:100dvh;display:flex;align-items:center;overflow:hidden}
.tela--escura{background:rgb(var(--preto));color:rgb(var(--branco))}
.tela--clara {background:rgb(var(--papel));color:rgb(var(--tinta))}
.tela--branca{background:rgb(var(--papel-puro));color:rgb(var(--tinta))}
.tela--quente{background:rgb(var(--cinza-quente));color:rgb(var(--tinta))}
.conteudo{position:relative;z-index:1;width:100%;
          padding:var(--v-space) var(--outer-margin)}

/* ---------- papéis ---------- */
.rotulo{font-size:var(--fs-label);letter-spacing:var(--tracking-label);
        text-transform:uppercase;opacity:.55;margin:0 0 2rem;font-weight:400}
.display{font-size:var(--fs-display);font-weight:200;line-height:.95;
         letter-spacing:-.015em;text-transform:uppercase;margin:0 0 2.2rem}
.serifa{font-family:var(--quote);font-size:var(--fs-display);font-weight:400;
        line-height:1.02;letter-spacing:-.01em;margin:0 0 2rem;text-transform:none}
.h2{font-size:var(--fs-h2);font-weight:300;line-height:1.15;margin:0 0 1.2rem}
.corpo{font-size:var(--fs-body);line-height:1.75;opacity:.72;margin:0 0 1.1rem;max-width:62ch}
.tela--escura .corpo{opacity:.82}
.tela--escura .lista li{opacity:.74}
.destaque{font-size:var(--fs-body);line-height:1.6;font-weight:400;opacity:1;margin:0 0 1.6rem;max-width:52ch}
.fecho{font-family:var(--quote);font-size:var(--fs-quote);line-height:1.28;
       font-style:italic;margin:0;max-width:26ch}
.numero{font-size:var(--fs-numero);font-weight:200;line-height:.82;letter-spacing:-.04em;margin:0}
.nota{font-size:var(--fs-label);line-height:1.6;opacity:.45;margin:1.8rem 0 0;max-width:48ch}

/* lista com fio, usada em 06 e 12 */
.lista{margin:0 0 2.4rem;padding:0;list-style:none;max-width:56ch}
.lista li{font-size:var(--fs-body);line-height:1.6;opacity:.62;
          padding-left:1.6rem;position:relative;margin-bottom:.35rem}
.lista li::before{content:"";position:absolute;left:0;top:1.05em;
                  width:.7rem;height:1px;background:currentColor;opacity:.45}

/* ---------- revelação: 20px, uma curva só ---------- */
.rev{opacity:0;transform:translateY(20px);
     transition:opacity .4s var(--ease), transform .4s var(--ease)}
.rev.vis{opacity:1;transform:none}
.rev:nth-child(2){transition-delay:.07s}
.rev:nth-child(3){transition-delay:.14s}
.rev:nth-child(4){transition-delay:.21s}
.rev:nth-child(5){transition-delay:.28s}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ---------- utilidades de layout ---------- */
.duas-colunas{column-count:2;column-gap:clamp(1.5rem,3vw,3rem)}
.duas-colunas .corpo{max-width:none;break-inside:avoid}
.grade{display:grid;gap:0}
.foto-fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:820px){
  :root{--outer-margin:7vw}
  .duas-colunas{column-count:1}
  .tela{align-items:flex-start}
}

/* ===========================================================
   LAYOUT DE CADA TELA
   =========================================================== */
.tela > picture{display:contents}

/* 01 — capa */
.t01 .foto-fundo{object-position:center}

/* 02 — the person */
.t02__grade{display:grid;grid-template-columns:minmax(0,36%) 1fr;
            gap:clamp(2rem,5vw,5rem);align-items:center}
.t02__foto{margin:0}
.t02__foto img{width:100%;height:auto}

/* 03 — the beginning */
.t03__linha{list-style:none;margin:2.5rem 0;padding:0;
            border-bottom:1px solid rgb(var(--tinta)/.14)}
.t03__marco{display:grid;grid-template-columns:minmax(0,.3fr) 1fr;
            gap:clamp(1rem,3vw,3rem);align-items:start;
            border-top:1px solid rgb(var(--tinta)/.14);padding:1.5rem 0}
.t03__marco .numero{font-size:clamp(3.4rem,1rem + 7.5vw,9rem);opacity:.92}
.t03__idade{font-size:var(--fs-label);letter-spacing:var(--tracking-label);
            text-transform:uppercase;opacity:.5;margin:.5rem 0 .7rem}
.t03__marco--texto > div{grid-column:2}

/* 04 — a global perspective */
.t04 .foto-fundo{left:auto;right:0;width:46%;object-position:50% 70%}
.t04__texto{width:min(70ch,50%);padding-right:2rem}
.t04__dados{margin:2.2rem 0;padding:0;
            border-top:1px solid rgb(var(--tinta)/.16)}
.t04__dados > div{display:grid;grid-template-columns:minmax(0,5.5rem) 1fr;
                  gap:clamp(1rem,2.5vw,2.5rem);align-items:baseline;
                  border-bottom:1px solid rgb(var(--tinta)/.16);padding:.95rem 0}
.t04__dados dt{font-size:var(--fs-h2);font-weight:200;letter-spacing:-.01em}
.t04__dados dd{margin:0;font-size:var(--fs-body);line-height:1.55;opacity:.65}

/* 05 — the evolution */
.t05 .foto-fundo{object-position:22% 36%}
.t05__texto{margin-left:auto;width:min(62ch,46%);padding-left:2rem}
.t05__faixa{position:absolute;left:0;right:0;bottom:0;margin:0;display:flex;
            justify-content:space-between;gap:1rem;flex-wrap:wrap;
            padding:1.25rem var(--outer-margin);
            border-top:1px solid rgb(var(--branco)/.18);
            background:rgb(var(--preto)/.55);backdrop-filter:blur(2px);
            font-size:var(--fs-label);letter-spacing:var(--tracking-label);
            text-transform:uppercase;opacity:.85}

/* 06 — the vision */
.t06 .foto-fundo{left:auto;right:0;width:64%;object-position:78% 36%}
.t06__texto{width:min(64ch,52%);padding-right:2rem}

/* 07 — the expertise */
.t07__grade{display:grid;grid-template-columns:repeat(3,1fr);
            border-top:1px solid rgb(var(--tinta)/.14);margin:2.2rem 0}
.t07__grade article{padding:1.5rem clamp(1rem,2.5vw,2.5rem) 1.5rem 0;
                    border-bottom:1px solid rgb(var(--tinta)/.14)}
.t07__grade h3{font-size:var(--fs-body);font-weight:400;letter-spacing:.01em;margin:0 0 .6rem}
.t07__grade .corpo{margin:0;opacity:.62}

/* 08 — the business record */
.t08__mi{display:block;font-size:var(--fs-h2);font-weight:300;
         letter-spacing:var(--tracking-label);text-transform:uppercase;
         opacity:.45;margin-top:.7rem}
.t08 .h2{max-width:26ch;margin-top:2.4rem}
.t08 .corpo{max-width:58ch}

/* 09 — the partnership */
.t09__grade{display:grid;grid-template-columns:1fr 1fr;
            gap:clamp(2rem,5vw,5rem);align-items:start}

/* 10 — the opportunity */
.t10{flex-direction:column;justify-content:center;align-items:stretch}
.t10__texto{padding-bottom:calc(var(--v-space) * .6)}
.t10__manchete{font-size:clamp(2.3rem,1rem + 5.6vw,6.4rem);max-width:16ch}
.t10__faixa{background:rgb(var(--preto));color:rgb(var(--branco));
            padding:clamp(2rem,5vh,3.5rem) var(--outer-margin)}
.t10__faixa .corpo{opacity:.7;max-width:70ch}
.t10__faixa .destaque{margin:0;max-width:60ch}

/* 11 — the results */
.t11__dados{display:grid;grid-template-columns:repeat(4,1fr);margin:2.4rem 0;
            border-top:1px solid rgb(var(--branco)/.18)}
.t11__dados > div{border-bottom:1px solid rgb(var(--branco)/.18);
                  border-right:1px solid rgb(var(--branco)/.18);padding:1.3rem 1.2rem 1.3rem 0}
.t11__dados > div:last-child{border-right:0}
.t11__dados dt{font-size:clamp(1.5rem,.9rem + 2.1vw,2.9rem);font-weight:200;letter-spacing:-.02em}
.t11__dados dd{margin:.6rem 0 0;font-size:var(--fs-label);line-height:1.5;opacity:.55;
               letter-spacing:.04em}
.t11__principal{grid-column:1/-1;border-right:0 !important}
.t11__principal dt{font-size:clamp(2.2rem,1rem + 4.6vw,5.6rem)}

/* 12 — behind the system */
.t12 .foto-fundo{object-position:70% 50%;opacity:.85}
.t12__texto{width:min(68ch,54%);padding-right:2rem}

/* 13 — the next chapter */
.t13__marca{position:absolute;left:-.04em;bottom:-.12em;margin:0;white-space:nowrap;
            font-size:clamp(7rem,2rem + 26vw,28rem);font-weight:200;
            letter-spacing:-.04em;line-height:.8;color:rgb(var(--branco)/.045);
            user-select:none;pointer-events:none}
.t13__texto{width:min(72ch,58%)}
.t13 strong{font-weight:400}

/* 14 — the human connection */
.t14 .foto-fundo{left:auto;right:0;width:58%;object-position:62% 40%}
.t14__texto{width:min(62ch,50%);padding-right:2rem}
.t14__assinatura{font-style:normal;display:grid;gap:.3rem;margin-top:2.6rem;
                 font-size:var(--fs-body);opacity:.7}
.t14__assinatura strong{font-weight:400;font-size:var(--fs-label);
                        letter-spacing:var(--tracking-label);text-transform:uppercase;opacity:1}
.t14__assinatura a{color:inherit;text-decoration:none;
                   border-bottom:1px solid currentColor;justify-self:start;margin-top:.5rem}

/* ===========================================================
   CELULAR — a foto vira bloco no alto, o texto cai embaixo
   =========================================================== */
@media (max-width:820px){
  .t02__grade{grid-template-columns:1fr;gap:2rem}
  .t02__foto img{height:46dvh;object-fit:cover;object-position:50% 22%}

  .t03__marco{grid-template-columns:1fr;gap:.2rem}
  .t03__marco--texto > div{grid-column:1}
  .t03__marco .numero{font-size:clamp(3.2rem,2rem + 9vw,5rem)}

  .t04 .foto-fundo,
  .t05 .foto-fundo,
  .t06 .foto-fundo,
  .t12 .foto-fundo,
  .t14 .foto-fundo{position:relative;inset:auto;width:100%;height:42dvh}
  .t04__texto,.t05__texto,.t06__texto,.t12__texto,.t13__texto,.t14__texto{
    width:auto;margin-left:0;padding-left:var(--outer-margin);padding-right:var(--outer-margin)}
  .t04,.t05,.t06,.t12,.t14{display:block}
  .t04 .conteudo,.t05 .conteudo,.t06 .conteudo,
  .t12 .conteudo,.t14 .conteudo{padding-top:clamp(1.5rem,4vh,2.5rem)}
  .t06 .foto-fundo{height:45dvh;object-position:56% 26%}
  .t06 .conteudo{margin-top:-5vh}
  .t14 .foto-fundo{object-position:56% 30%}
  .t05__faixa{position:relative;background:none;backdrop-filter:none;
              justify-content:flex-start;gap:1.2rem}

  .t07__grade{grid-template-columns:1fr}
  .t07__grade article{padding-right:0}

  .t09__grade{grid-template-columns:1fr;gap:1.5rem}

  .t11__dados{grid-template-columns:1fr 1fr}
  .t11__dados > div:nth-child(2n){border-right:0}

  .t04__dados > div{grid-template-columns:1fr;gap:.3rem}
}

/* 01 — the cover (arte do Canva) */
.t01{align-items:center;justify-content:center}
.t01 .foto-fundo{object-position:center}
.t01__legenda{display:none}

@media (max-width:820px){
  /* interino: a arte 16:9 aparece inteira, sem corte, e o texto legível
     ocupa o preto que sobra. Sai quando o export vertical do Canva entrar. */
  .t01--interino{display:flex;flex-direction:column;justify-content:center;
                 gap:clamp(2rem,6vh,3.5rem);padding:0 0 8vh}
  .t01--interino .foto-fundo{position:relative;inset:auto;
                             width:100%;height:auto;object-fit:contain}
  .t01--interino .t01__legenda{display:block;padding:0 var(--outer-margin)}
  .t01__nome{font-size:clamp(2.2rem,1rem + 7vw,3.4rem);font-weight:200;line-height:.95;
             letter-spacing:-.02em;text-transform:uppercase;margin:0 0 .9rem}
  .t01__lema{font-size:var(--fs-label);letter-spacing:var(--tracking-label);
             text-transform:uppercase;opacity:.75;margin:0 0 1.4rem;font-weight:400}
  .t01__dados{font-size:var(--fs-body);line-height:1.7;opacity:.55;margin:0;display:grid}
  .t01__dados span{font-weight:400;opacity:.85}
}