/* =========================================================
   sona — guia / hub de conteúdo (artigos)
   herda tokens de styles.css; só adiciona layout de leitura
   ========================================================= */

.article{
  position:relative;z-index:2;
  max-width:720px;margin:0 auto;
  padding:clamp(7rem,14vh,9rem) var(--gut) clamp(3rem,7vw,5rem);
}

/* breadcrumb */
.breadcrumb{
  font-weight:700;font-size:.9rem;color:var(--ink-3);
  margin-bottom:1.6rem;letter-spacing:-.01em;
}
.breadcrumb a{color:var(--accent-ink);transition:color .2s}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{color:var(--ink-3)}

/* article title */
.article h1{
  font-size:clamp(2rem,5.2vw,3.1rem);line-height:1.08;
  margin-bottom:1.4rem;
}

/* prose */
.prose{font-size:1.12rem;color:var(--ink-2);font-weight:500}
.prose > p{margin:0 0 1.15rem}
.prose .lead{
  font-size:clamp(1.15rem,1.9vw,1.35rem);color:var(--ink);
  font-weight:600;max-width:none;margin-bottom:1.6rem;
}
.prose h2{
  font-size:clamp(1.45rem,3.4vw,2rem);margin:2.6rem 0 1rem;color:var(--ink);
}
.prose h3{
  font-size:clamp(1.15rem,2.2vw,1.35rem);margin:1.8rem 0 .6rem;color:var(--ink);
}
.prose ul{list-style:none;margin:0 0 1.3rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
.prose ul li{position:relative;padding-left:1.7rem;color:var(--ink);font-weight:500}
.prose ul li::before{content:"🌱";position:absolute;left:0;top:.05em;font-size:.95em}
.prose a:not(.btn){
  color:var(--accent-ink);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--lilac-soft);
  text-underline-offset:3px;text-decoration-thickness:2px;transition:text-decoration-color .2s
}
.prose a:not(.btn):hover{text-decoration-color:var(--accent-ink)}
.prose b,.prose strong{font-weight:800;color:var(--ink)}
.prose em,.prose i{font-style:italic}

/* blockquote — the "marker" beat */
.prose blockquote{
  margin:1.8rem 0;padding:1.1rem 1.4rem;
  background:var(--cream-2);border-radius:var(--r);
  border-left:4px solid var(--peach);box-shadow:var(--sh-soft);
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,2.2vw,1.4rem);color:var(--ink);line-height:1.35;
}

/* in-article CTA block */
.cta-block{
  text-align:center;margin:2.4rem 0;
}
.cta-block small{display:block;margin-top:.7rem;color:var(--ink-3);font-weight:700;font-size:.92rem}

/* related / continue reading */
.related{
  margin-top:2.6rem;padding-top:1.6rem;border-top:1.5px solid var(--line);
  font-weight:700;color:var(--ink-2);font-size:1rem;
}
.related a{color:var(--accent-ink)}

/* hub index */
.hub{position:relative;z-index:2;max-width:860px;margin:0 auto;
  padding:clamp(7rem,14vh,9rem) var(--gut) clamp(3rem,7vw,5rem)}
.hub__head{text-align:center;max-width:640px;margin:0 auto clamp(2.4rem,5vw,3.4rem)}
.hub__head h1{margin:.4rem 0 1rem}
.hub__cluster{margin-bottom:2.4rem}
.hub__cluster > h2{font-size:clamp(1.3rem,2.8vw,1.7rem);margin-bottom:1rem}
.hub__list{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.hub__list li{background:var(--cream-2);border-radius:var(--r);box-shadow:var(--sh-soft);
  border:1.5px solid transparent;transition:transform .2s,box-shadow .2s,border-color .2s}
.hub__list li:hover{transform:translateY(-2px);box-shadow:var(--sh-card);border-color:var(--peach)}
.hub__list a{display:block;padding:1rem 1.3rem;font-weight:800;color:var(--ink)}
.hub__list .soon{display:block;padding:1rem 1.3rem;font-weight:700;color:var(--ink-3);cursor:default}
.hub__list .soon::after{content:" · em breve";font-family:'Caveat',cursive;font-weight:700;color:var(--accent-ink)}