/* Menu compacto: abaixo de 800px a navegação passa a viver em um diálogo, igual às outras experiências. */
.menu-button{border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);place-items:center;margin-right:4px}
.menu-button .icon{width:19px;height:19px}
.menu-list{display:grid;text-align:left}
.menu-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:0 4px;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:22px;line-height:1.3;color:var(--ink)}
.menu-list a:last-child{border-bottom:0}
.menu-list a:after{content:'\203A';font-size:24px;color:var(--muted)}
.menu-note{font-size:12px;color:var(--muted);margin-top:18px}
/* O convite da água descreve o gesto que o aparelho realmente faz. */
.invite-touch{display:none}
@media(hover:none),(pointer:coarse){.invite-pointer{display:none}.invite-touch{display:inline}}
@media(max-width:580px){.menu-list a{font-size:20px;min-height:48px}}
/* Keep the water invitation clear of the main action on narrow screens. */
.hero.wrap{width:100%;max-width:none;margin:0}
.hero-surface{height:calc(100svh - 104px);min-height:640px;max-height:1000px;border-radius:0}
.hero-sound{position:absolute;right:4%;top:24px;z-index:3;display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:30px;background:var(--paper);color:var(--ink);font-size:12px}
.hero-sound .icon{width:17px;height:17px}
.reading-section .section-heading{align-items:center}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:35px}
.blog-entry{border-top:1px solid var(--line);padding-top:25px}
.blog-entry h2{font-size:30px;margin:10px 0 16px}
.blog-entry p{font-size:14px}
@media(max-width:800px){.hero-surface{height:calc(100svh - 90px)}}
@media(max-width:580px){
  .hero-surface{height:calc(100svh - 80px);min-height:690px;max-height:900px}
  .hero-content{padding-top:85px}
  .hero-sound{top:16px;right:22px;font-size:11px;padding:9px 13px}
  .water-invitation{bottom:80px;right:24px;font-size:10px}
  .hero-caption{max-width:250px}
  .blog-grid{grid-template-columns:1fr}
}
@media(max-width:370px){
  .hero-content{padding:85px 22px 46px}
  .hero-content h1{font-size:38px;line-height:1.12}
  .hero-content>p:not(.hero-intro){font-size:13px;line-height:1.75}
  .hero-intro{font-size:11px}
  .hero-surface{min-height:690px}
  .hero .button{gap:14px;padding-inline:19px}
}

/* O botão de menu divide o canto do cabeçalho com o modo noturno. */
.header-actions{display:flex;align-items:center;gap:8px}

/* Migalhas: cada leitura pertence ao hub /blog/, e a trilha precisa aparecer no texto, não só no schema. */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px;line-height:1.4;margin-bottom:2px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover,.breadcrumbs a:focus-visible{color:var(--ink)}
.crumb-sep{color:var(--muted);opacity:.7}
.breadcrumbs [aria-current="page"]{color:var(--body)}

/* Leituras vizinhas: ao terminar um texto, dois convites em vez de um beco sem saída. */
.article-related{margin-top:54px;padding-top:28px;border-top:1px solid var(--line)}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.related-item{display:grid;gap:9px;align-content:start;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.related-item h2{margin:0;font-size:21px;line-height:1.35}
.related-item:hover,.related-item:focus-visible{border-color:var(--green)}
@media(max-width:580px){.related-grid{grid-template-columns:1fr}.related-item{padding:18px}.related-item h2{font-size:19px}}
/* Na 404 são três convites em uma coluna de leitura: o terceiro fecha a linha em vez de ficar órfão. */
.related-grid--three .related-item:last-child{grid-column:1/-1}
/* O rótulo abre o card e o "Ler com calma" é texto, não alvo: o card é um link só. */
.related-item .small-label{margin-top:0}
.related-item .text-link{min-height:0}

/* O card de leitura vizinha é um alvo, não um link de corpo de texto: sem sublinhado até a pessoa passar por ele. */
.article-content a.related-item{text-decoration:none}
.article-content .related-item:hover h2,.article-content .related-item:focus-visible h2{text-decoration:underline;text-underline-offset:5px}

/* Alvo de toque medido no aparelho: 44px vale também para o menu e para a marca no cabeçalho. */
.menu-button{width:44px;height:44px}
/* Um <a> inline mede a caixa da fonte, não a linha: com a serif nova isso caiu para 43px. inline-flex mantém "acalmo." em uma linha só e dá altura de alvo. */
.site-header .wordmark,.site-footer .wordmark{display:inline-flex;align-items:center;min-height:44px}

/* As migalhas ficam no polegar: o texto continua pequeno, o alvo chega a 44px. */
.breadcrumbs a{padding:14px 8px;margin-inline:-8px}
.breadcrumbs{margin-bottom:-8px}