/* Caderno Consoni Ghizzi · os textos do escritório (página inicial e artigos). Usa a base do site.css.
   Tipografia fina: títulos em 200/300, destaque por cor (cinza) e nunca por negrito. Tudo sobre branco. */
.g em{font-weight:inherit;color:var(--pedra)}
.g .label{font-weight:400;letter-spacing:.2em;font-size:10px;color:var(--pedra)}
.g h1,.g h2,.g h3{font-family:var(--f);text-wrap:balance}

/* ---------- topo do caderno ---------- */
.b-head{padding:calc(env(safe-area-inset-top,0px) + clamp(130px,19vh,190px)) var(--m) clamp(40px,6vh,64px)}
.b-head .grid{align-items:end;row-gap:28px}
.b-head .ttl{grid-column:1/8}
.b-head h1{margin:18px 0 0;font:200 clamp(32px,3.3vw,56px)/1.12 var(--f);letter-spacing:-.028em}
.b-head .intro{grid-column:9/13}
.b-head .intro p{margin:0;font:300 15px/1.75 var(--f);color:var(--texto)}
.who{display:flex;align-items:center;gap:12px;margin-top:20px;font:300 12px/1.4 var(--f);color:var(--pedra)}
.who .av{display:flex}
.who img{width:30px;height:30px;object-fit:cover;background:var(--foto-bg)}
.who img+img{margin-left:4px}
.who b{font-weight:300;color:var(--grafite)}
.who a,.meta a,.byline a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linho);transition:border-color .3s}
.who a:hover,.meta a:hover,.byline a:hover{border-bottom-color:currentColor}

/* ---------- destaque ---------- */
.b-feat{margin:0 var(--m);padding:clamp(48px,8vh,88px) 0 0;border-top:1px solid var(--linho)}
.b-feat a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;text-decoration:none}
.b-feat .im{grid-column:1/9;overflow:hidden;aspect-ratio:16/10;background:var(--foto-bg)}
.b-feat .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
.b-feat a:hover .im img{transform:scale(1.03)}
.b-feat .tx{grid-column:9/13;padding-bottom:6px}
.b-feat h2{margin:14px 0 14px;font:200 clamp(24px,2.2vw,38px)/1.18 var(--f);letter-spacing:-.022em}
.b-feat p{margin:0;font:300 15px/1.75 var(--f);color:var(--texto)}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;font:300 11px/1.4 var(--f);letter-spacing:.04em;color:var(--pedra)}
.meta b{font-weight:300;color:var(--grafite)}
.read{display:inline-flex;gap:10px;margin-top:22px;font:300 11px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--grafite);border-bottom:1px solid var(--grafite);padding-bottom:6px}

/* ---------- abas de assunto (sem contadores, sem barra fixa) ---------- */
.b-tabs{margin:0 var(--m);display:flex;flex-wrap:wrap;gap:4px 30px;padding:14px 0;border-top:1px solid var(--linho);border-bottom:1px solid var(--linho)}
.b-tabs button{font:300 13px/1 var(--f);letter-spacing:.02em;color:var(--pedra);padding:8px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.b-tabs button:hover{color:var(--grafite)}
.b-tabs button[aria-pressed="true"]{color:var(--grafite);border-bottom-color:var(--grafite)}
.b-tabs+.b-feat{border-top:0}
.b-feat[hidden],.card[hidden]{display:none}

/* ---------- grade de textos (blog) ---------- */
.b-grid{padding:clamp(64px,10vh,110px) var(--m) clamp(56px,9vh,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.4vw,44px);row-gap:clamp(48px,8vh,84px)}
.card{display:block;text-decoration:none;color:var(--grafite)}
.card .im{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--foto-bg)}
.card .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.card:hover .im img{transform:scale(1.035)}
.card .meta{margin-top:18px}
.card h3{margin:10px 0 0;font:300 clamp(18px,1.4vw,22px)/1.35 var(--f);letter-spacing:-.01em;transition:color .4s}
.card:hover h3{color:var(--pedra)}
.card p{margin:10px 0 0;font:300 14px/1.65 var(--f);color:var(--texto);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .by{display:block;margin-top:14px;font:300 12px/1.4 var(--f);color:var(--pedra)}

/* ---------- como funciona (etapas) ---------- */
.b-steps{padding:clamp(70px,11vh,120px) var(--m);border-top:1px solid var(--linho)}
.sh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-bottom:clamp(32px,5vh,56px)}
.sh .label{grid-column:1/4}
.sh h2{grid-column:4/11;margin:0;font:200 clamp(24px,2.3vw,40px)/1.18 var(--f);letter-spacing:-.022em}
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.st{border-top:1px solid var(--linho);padding-top:18px;display:grid;gap:8px;align-content:start}
.st .n{font:200 30px/1 var(--f);letter-spacing:-.03em;color:var(--pedra)}
.st h3{margin:6px 0 0;font:300 17px/1.3 var(--f)}
.st p{margin:0;font:300 14px/1.65 var(--f);color:var(--texto)}
.st .dias{font:300 10px/1.3 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--pedra);margin-top:4px}
.tl{margin-top:clamp(40px,7vh,64px)}
.tl-row{display:grid;grid-template-columns:minmax(150px,22%) 1fr;align-items:center;gap:20px;padding:8px 0;border-bottom:1px solid var(--linho);font:300 12px/1.4 var(--f);color:var(--texto)}
.tl-row:first-child{border-top:1px solid var(--linho)}
.tl-row small{color:var(--pedra)}
.tr{position:relative;height:3px}
.tr i{position:absolute;top:0;height:3px;left:calc(var(--a) / 110 * 100%);width:calc(var(--d) / 110 * 100%);background:var(--grafite)}
.tr i.ext{background:repeating-linear-gradient(90deg,var(--pedra) 0 3px,transparent 3px 6px)}
.tl-axis{display:grid;grid-template-columns:minmax(150px,22%) 1fr;gap:20px;padding-top:8px;font:300 10px/1.3 var(--f);letter-spacing:.06em;color:var(--pedra)}
.tl-axis div{display:flex;justify-content:space-between}
.g-note{margin:16px 0 0;font:300 12px/1.6 var(--f);color:var(--pedra);max-width:80ch}

.a-body .steps4{grid-template-columns:repeat(2,minmax(0,1fr));margin:8px 0 12px}
.a-body .tl,.a-body .tl-axis{margin-top:28px}

/* ---------- quem escreve ---------- */
.b-authors{padding:clamp(56px,9vh,96px) var(--m);border-top:1px solid var(--linho);scroll-margin-top:var(--navh,58px)}
.b-authors>.label{display:block;margin-bottom:28px}
.au2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,72px)}
.au{display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start}
.au img{width:72px;height:72px;object-fit:cover;background:var(--foto-bg)}
.au h3{margin:0 0 4px;font:300 20px/1.3 var(--f);letter-spacing:-.01em}
.au span{display:block;font:300 11px/1.4 var(--f);letter-spacing:.06em;color:var(--pedra);margin-bottom:12px}
.au p{margin:0;font:300 14px/1.7 var(--f);color:var(--texto)}

/* ---------- convite (claro, discreto) ---------- */
.b-end{margin:0 var(--m);padding:clamp(56px,9vh,96px) 0 clamp(80px,12vh,130px);border-top:1px solid var(--grafite);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;row-gap:28px}
.b-end h2{grid-column:1/8;margin:0;font:200 clamp(26px,2.6vw,44px)/1.15 var(--f);letter-spacing:-.025em}
.b-end .acts{grid-column:9/13;display:grid;gap:18px;justify-items:start}
.b-end .acts p{margin:0;font:300 14px/1.7 var(--f);color:var(--texto)}
.b-end .row{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.b-end .soft{opacity:.6}

/* ---------- artigo ---------- */
.a-head{padding:calc(env(safe-area-inset-top,0px) + clamp(120px,17vh,170px)) var(--m) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.a-head .in{grid-column:3/10}
.crumb{font:300 11px/1.4 var(--f);letter-spacing:.04em;color:var(--pedra)}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{color:var(--grafite)}
.a-head h1{margin:20px 0 18px;font:200 clamp(30px,3vw,50px)/1.14 var(--f);letter-spacing:-.026em}
.deck{margin:0;font:300 clamp(16px,1.25vw,19px)/1.6 var(--f);color:var(--pedra);max-width:58ch}
.a-head .who{margin-top:28px}
.a-cover{margin:clamp(40px,7vh,64px) var(--m) 0}
.a-cover .im{aspect-ratio:21/9;overflow:hidden;background:var(--foto-bg)}
.a-cover img{width:100%;height:100%;object-fit:cover}
.a-cover figcaption{margin-top:10px;font:300 12px/1.5 var(--f);color:var(--pedra)}
.a-grid{padding:clamp(48px,8vh,80px) var(--m) clamp(40px,6vh,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.a-body{grid-column:3/9;font:300 17px/1.7 var(--f);color:var(--texto);text-wrap:pretty;counter-reset:h}
.a-body>*{margin:0 0 22px}
.a-body>h2{margin:64px 0 18px;font:300 clamp(21px,1.7vw,27px)/1.3 var(--f);letter-spacing:-.015em;color:var(--grafite);scroll-margin-top:calc(var(--navh,58px) + 24px)}
.a-body>h2::before{counter-increment:h;content:counter(h,decimal-leading-zero);display:block;margin-bottom:12px;font:200 13px/1 var(--f);letter-spacing:.08em;color:var(--pedra)}
.a-body strong{font-weight:300;color:var(--grafite)}
.a-body a{color:var(--grafite)}
.a-body ul{padding:0;list-style:none;border-top:1px solid var(--linho)}
.a-body ul li{padding:12px 0 12px 22px;border-bottom:1px solid var(--linho);position:relative}
.a-body ul li::before{content:"";position:absolute;left:0;top:25px;width:10px;height:1px;background:var(--pedra)}
.short{border-left:1px solid var(--grafite);padding:4px 0 4px 24px;margin-bottom:40px}
.short .label{display:block;margin-bottom:10px}
.short p{margin:0 0 14px;font:300 18px/1.7 var(--f);color:var(--grafite)}
.short p:last-child{margin-bottom:0}
.how3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:6px 0 28px}
.how3 div{border-top:1px solid var(--linho);padding-top:14px;font:300 14.5px/1.7 var(--f)}
.how3 b{display:block;font-weight:300;color:var(--grafite);margin-bottom:6px}
.prat{border-top:1px solid var(--grafite);border-bottom:1px solid var(--linho);padding:24px 0 4px;margin:44px 0}
.prat .label{display:block;margin-bottom:10px}
.prat p{margin:0 0 20px;color:var(--grafite)}
.a-fig{margin:44px 0}
.a-fig img{width:100%;height:auto;background:var(--foto-bg)}
.a-fig figcaption{margin-top:10px;font:300 12px/1.5 var(--f);color:var(--pedra)}
.a-quote{margin:44px 0;padding-left:24px;border-left:1px solid var(--grafite);font:200 clamp(22px,1.9vw,28px)/1.4 var(--f);color:var(--grafite)}
.a-quote small{display:block;margin-top:12px;font:300 12px/1.4 var(--f);color:var(--pedra)}
.a-quote small a{color:inherit}
.faq{margin-top:60px}
.faq>.label{display:block;margin-bottom:12px}
.faq details{border-top:1px solid var(--linho)}
.faq details:last-child{border-bottom:1px solid var(--linho)}
.faq summary,.a-toc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font:300 17px/1.45 var(--f);color:var(--grafite)}
.faq summary::-webkit-details-marker,.a-toc summary::-webkit-details-marker{display:none}
.faq summary::after,.a-toc summary::after{content:"+";font-weight:200;font-size:20px;line-height:1;color:var(--pedra);transition:transform .3s}
.faq details[open] summary::after,.a-toc[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;font-size:15.5px}
.a-toc{display:none}
.a-toc ol,.a-side ol{list-style:none;margin:0 0 36px;padding:0;counter-reset:t}
.a-toc li a,.a-side li a{display:flex;gap:12px;padding:8px 0;text-decoration:none;font:300 13px/1.45 var(--f);color:var(--pedra);transition:color .3s}
.a-toc li a::before,.a-side li a::before{counter-increment:t;content:counter(t,decimal-leading-zero);font-size:10px;letter-spacing:.06em;padding-top:2px}
.a-side{grid-column:10/13;align-self:start;position:sticky;top:120px;padding-left:clamp(8px,1.6vw,28px)}
.a-side .label{display:block;margin-bottom:12px}
.a-side li a:hover,.a-side li a.on,.a-toc li a:hover{color:var(--grafite)}
.a-side p{margin:0 0 14px;font:300 13px/1.6 var(--f);color:var(--texto)}
.byline{grid-column:3/9;margin-top:24px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;border-top:1px solid var(--linho);padding-top:28px}
.byline .av{display:flex;gap:4px}
.byline img{width:56px;height:56px;object-fit:cover}
.byline p{margin:0;font:300 14px/1.7 var(--f);color:var(--texto)}
.byline b{font-weight:300;color:var(--grafite)}
.a-more{margin:0 var(--m);padding:clamp(56px,9vh,96px) 0 clamp(56px,9vh,96px);border-top:1px solid var(--linho);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.a-more>.label{grid-column:1/-1}
.a-more .b-grid{grid-column:1/-1;padding:28px 0 0}

@media (max-width:1100px){
  .a-head .in{grid-column:1/10}
  .a-body,.byline{grid-column:1/10}
}
@media (max-width:1000px){
  .b-head .ttl,.b-head .intro{grid-column:1/-1}
  .b-feat .im,.b-feat .tx{grid-column:1/-1}
  .b-feat .tx{margin-top:22px}
  .b-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .sh .label,.sh h2{grid-column:1/-1}
  .sh h2{margin-top:12px}
  .au2{grid-template-columns:1fr}
  .b-end h2,.b-end .acts{grid-column:1/-1}
  .a-head .in,.a-body,.byline{grid-column:1/-1}
  .a-side{display:none}
  .a-toc{display:block;border-top:1px solid var(--linho);border-bottom:1px solid var(--linho);margin-bottom:36px}
  .a-toc ol{margin-bottom:16px}
  .a-cover .im{aspect-ratio:16/10}
}
@media (max-width:760px){
  .b-grid{grid-template-columns:1fr}
  .b-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;gap:22px}
  .b-tabs button{white-space:nowrap}
  .a-body .steps4{grid-template-columns:1fr}
  .steps4,.how3{grid-template-columns:1fr}
  .tl,.tl-axis{display:none}
  .a-body{font-size:16.5px}
  .a-cover{margin:32px 0 0}
  .a-cover figcaption{padding:0 var(--m)}
  .au{grid-template-columns:72px 1fr}
  .au img{width:72px;height:72px}
}

/* crédito da foto de capa (Unsplash) */
.a-cover .cred{margin-left:6px;color:var(--pedra)}
.a-cover .cred a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linho)}