/* =========================================================================
   PAGE — /blog/<slug>

   Esta é a única página do site cujo layout é comandado pela TIPOGRAFIA, e não
   pela composição. A medida da linha (`--prose-max`) vem primeiro; tudo o mais
   se organiza em volta dela.

   O motivo é mecânico, não estético: acima de ~75 caracteres o olho erra a
   linha seguinte ao voltar da margem direita, e o leitor relê sem perceber —
   o que num texto técnico de oito minutos custa a leitura inteira. Então o
   monitor de 27" ganha margem e um sumário lateral, nunca linha maior.

   O resto da folha existe para tirar obstáculos da frente da leitura: nada
   flutua sobre o texto, nada aparece por cima, nada se move enquanto se lê.
   ====================================================================== */

.post {
    --prose-max: 68ch;

    position: relative;
    isolation: isolate;
    padding-bottom: var(--space-section);
}

/* -------------------------------------------------------------------------
   Barra de progresso da leitura

   Fica colada abaixo do header (que é sticky), como uma régua fina. Diz quanto
   falta — e num texto longo é isso que segura a leitura até o fim, que é onde
   está a faixa de proposta.

   Só `scaleX` é animado: a barra não custa um único reflow durante a rolagem.
   Sem JS ela permanece em escala zero, ou seja, invisível.
   ---------------------------------------------------------------------- */
.reading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Um degrau acima do header: ele é sticky e chega ao topo da janela na
       primeira rolagem, e a régua precisa continuar visível sobre o vidro.
       Continua abaixo do menu mobile (`--z-menu`), que é modal. */
    z-index: calc(var(--z-header) + 1);
    height: 3px;
    pointer-events: none;
}

/* Com o menu mobile aberto não há leitura acontecendo — e a régua atravessaria
   o topo da folha translúcida. Mesma decisão já tomada com o botão flutuante
   do WhatsApp. */
body.is-locked .reading-bar {
    opacity: 0;
}

.reading-bar__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
    /* Sem transição: o valor já vem de um rAF acoplado à rolagem, e qualquer
       amortecimento faria a barra "perseguir" o dedo com atraso visível. */
    will-change: transform;
}

/* Impressa, a régua não significa nada. */
@media print {
    .reading-bar {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------
   Cabeçalho do artigo
   Mesma malha técnica das aberturas de página interna, alinhada à esquerda:
   um título de artigo centralizado obriga o olho a procurar o início de cada
   linha, e o texto abaixo é alinhado à esquerda de qualquer forma.
   ---------------------------------------------------------------------- */
.post__header {
    position: relative;
    isolation: isolate;
    padding-top: var(--space-6);
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
    overflow: hidden;
}

.post__header-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    --tech-grid-mask: radial-gradient(120% 90% at 20% 10%, #000 28%, transparent 76%);
    pointer-events: none;
}

.post__header-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.post__category a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: 0.375rem 0.875rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    color: var(--brand-600);
    background-color: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-pill);
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.post__category a:hover {
    background-color: var(--brand-100);
    border-color: var(--brand-200);
}

.post__title {
    max-width: 22ch;
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: var(--color-text);
    /* `balance` distribui as palavras entre as linhas do título em vez de
       deixar uma órfã sozinha na última — suportado no Chrome, Safari 17+ e
       Firefox 121+, e simplesmente ignorado nos demais. */
    text-wrap: balance;
}

.post__excerpt {
    max-width: 56ch;
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

/* Assinatura + fatos da publicação */
.post__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-2);
    padding-top: var(--space-5);
    width: 100%;
    border-top: 1px solid var(--color-border);
}

.post__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.post__avatar {
    width: 44px;
    height: 44px;
    flex: none;
    background-color: var(--ink-100);
}

.post__author-info {
    display: grid;
    line-height: var(--lh-snug);
}

.post__author-info strong {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.post__author-info small {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.post__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.post__dot {
    color: var(--ink-300);
}

.post__updated {
    display: inline-flex;
    gap: 0.25rem;
    color: var(--brand-600);
}

/* -------------------------------------------------------------------------
   Capa
   ---------------------------------------------------------------------- */
.post__cover {
    aspect-ratio: 16 / 9;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
    background-color: var(--ink-100);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.post__cover img {
    object-fit: cover;
}

/* -------------------------------------------------------------------------
   Layout de leitura
   ---------------------------------------------------------------------- */
.post__layout {
    display: grid;
    gap: var(--space-8);
}

.post__main {
    min-width: 0;
    /* A coluna nunca passa da medida confortável, mesmo com espaço de sobra. */
    max-width: var(--prose-max);
    /* No celular e no tablet a coluna é centralizada; no desktop o
       `grid-template-columns` assume e ela volta a encostar no sumário. */
    margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Sumário

   No celular é um `<details>` fechado — aberto por padrão empurraria o começo
   do texto para fora da tela, que é o oposto do que um índice serve para
   fazer. No desktop vira uma coluna que acompanha a rolagem.
   ---------------------------------------------------------------------- */
.post-toc {
    max-width: var(--prose-max);
    margin-inline: auto;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.post-toc__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
}

/* O triângulo nativo do <summary> é diferente em cada navegador; o chevron
   próprio é o mesmo em todos e gira junto com a abertura. */
.post-toc__summary::-webkit-details-marker {
    display: none;
}

.post-toc__summary .icon:first-child {
    color: var(--brand-500);
}

.post-toc__chevron {
    margin-left: auto;
    color: var(--ink-400);
    transition: transform var(--dur-base) var(--ease-out);
}

.post-toc[open] .post-toc__chevron {
    transform: rotate(180deg);
}

.post-toc__nav {
    padding-bottom: var(--space-3);
}

.post-toc__list {
    display: grid;
    gap: 0.125rem;
    counter-reset: toc;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.post-toc__link {
    display: block;
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--color-text-soft);
    /* A borda à esquerda é o trilho onde o marcador da seção atual acende. */
    border-left: 2px solid var(--color-border);
    transition:
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.post-toc__link:hover {
    color: var(--color-text);
    border-left-color: var(--brand-300);
}

/* Seção em tela — classe aplicada pelo JS (scroll-spy). Sem JS o sumário
   continua sendo um índice de links comuns, que é o essencial. */
.post-toc__link.is-current {
    font-weight: var(--fw-semibold);
    color: var(--brand-600);
    border-left-color: var(--brand-500);
}

/* -------------------------------------------------------------------------
   PROSE — a tipografia do corpo

   O espaçamento vertical é feito por `margin-top` no irmão seguinte (e não por
   `margin-bottom` em todos), então o primeiro e o último bloco nunca deixam um
   respiro solto nas pontas — e o ritmo continua correto qualquer que seja a
   ordem em que o artigo combine os blocos.
   ---------------------------------------------------------------------- */
.prose {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
    /* Sem hífen automático: em português ele quebra termos jurídicos em
       lugares errados ("inexi-gibilidade"). A quebra por palavra é preferível
       ao rio de espaços, e por isso `text-wrap: pretty` cuida das órfãs. */
    text-wrap: pretty;
}

.prose > * + * {
    margin-top: var(--space-5);
}

.prose p {
    /* `overflow-wrap` evita que uma URL colada no texto estoure a coluna e
       force rolagem horizontal no celular. */
    overflow-wrap: break-word;
}

/* Abertura — um grau acima do corpo, é o parágrafo que segura quem chegou
   pela busca e ainda está decidindo se lê. */
.prose__lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.prose__h2 {
    position: relative;
    margin-top: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
    /* O header é sticky: sem esta margem ele cobriria o título recém-navegado
       pelo sumário. */
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.prose__h3 {
    margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

/* Link para a própria seção: aparece no hover no desktop, para quem quer
   mandar o trecho exato ao colega do setor. No toque ele fica sempre visível
   em opacidade baixa — não existe hover para revelá-lo. */
.prose__anchor {
    display: inline-flex;
    margin-left: var(--space-2);
    color: var(--ink-300);
    vertical-align: middle;
    transition:
        opacity var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.prose__anchor:hover {
    color: var(--brand-500);
}

@media (hover: hover) {
    .prose__anchor {
        opacity: 0;
    }

    .prose__h2:hover .prose__anchor,
    .prose__anchor:focus-visible {
        opacity: 1;
    }
}

/* Links dentro do texto — sublinhado deslocado, que não corta as descidas das
   letras. É o tratamento de link de leitura do ecossistema Apple. */
.prose a {
    color: var(--brand-600);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-decoration-color: var(--brand-200);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition:
        color var(--dur-fast) var(--ease-out),
        text-decoration-color var(--dur-fast) var(--ease-out);
}

.prose a:hover {
    color: var(--brand-700);
    text-decoration-color: var(--brand-500);
}

.prose strong {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

/* -------------------------------------------------------------------------
   Listas
   ---------------------------------------------------------------------- */
.prose__list {
    display: grid;
    gap: var(--space-3);
    padding-left: var(--space-1);
}

.prose__list li {
    position: relative;
    padding-left: var(--space-6);
}

/* Marcador desenhado, e não `list-style`: o ponto nativo herda o tamanho da
   fonte e fica desproporcional numa linha de 1.65 de entrelinha. */
.prose__list:not(.prose__list--ordered) li::before {
    content: "";
    position: absolute;
    left: var(--space-2);
    /* Alinhado com a primeira linha do item, não com o centro do bloco. */
    top: 0.65em;
    width: 6px;
    height: 6px;
    background-color: var(--brand-400);
    border-radius: 50%;
}

.prose__list--ordered {
    counter-reset: prose-item;
}

.prose__list--ordered li::before {
    counter-increment: prose-item;
    content: counter(prose-item);
    position: absolute;
    left: 0;
    top: 0.15em;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--brand-600);
    background-color: var(--brand-50);
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Citação
   ---------------------------------------------------------------------- */
.prose__quote {
    position: relative;
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    padding: var(--space-6) var(--space-5) var(--space-5);
    background-color: var(--color-bg-subtle);
    border-left: 3px solid var(--brand-500);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.prose__quote-mark {
    width: 26px;
    height: 26px;
    color: var(--brand-200);
}

.prose__quote blockquote {
    margin-top: var(--space-3);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.prose__quote figcaption {
    display: grid;
    gap: 0.125rem;
    margin-top: var(--space-4);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.prose__quote figcaption strong {
    font-size: var(--fs-sm);
    color: var(--color-text);
}

/* -------------------------------------------------------------------------
   Destaque
   Três tons, escolhidos pelo próprio artigo: informação, alerta e dica. O
   alerta é o único que usa o vermelho da marca em força total — é o prazo ou
   a exigência que, ignorada, derruba o processo.
   ---------------------------------------------------------------------- */
.prose__callout {
    --callout-line: var(--color-border-strong);
    --callout-wash: var(--color-bg-subtle);
    --callout-ink:  var(--color-text-soft);

    display: flex;
    gap: var(--space-3);
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    padding: var(--space-5);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    background-color: var(--callout-wash);
    border: 1px solid var(--callout-line);
    border-radius: var(--radius-lg);
}

.prose__callout[data-tone="alerta"] {
    --callout-line: var(--brand-200);
    --callout-wash: var(--brand-50);
    --callout-ink:  var(--brand-600);
}

.prose__callout[data-tone="dica"] {
    --callout-line: rgba(192, 122, 68, 0.32);
    --callout-wash: var(--bronze-050);
    --callout-ink:  var(--bronze-600);
}

.prose__callout-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--callout-ink);
    background-color: var(--color-surface);
    border: 1px solid var(--callout-line);
    border-radius: var(--radius-sm);
}

.prose__callout-body {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.prose__callout-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

/* -------------------------------------------------------------------------
   Passos — o "como fazer" que o servidor copia para o fluxo do setor
   ---------------------------------------------------------------------- */
.prose__steps {
    display: grid;
    gap: var(--space-4);
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
    counter-reset: prose-step;
}

.prose__step {
    position: relative;
    padding: var(--space-5) var(--space-5) var(--space-5) clamp(3.25rem, 3rem + 1vw, 3.75rem);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.prose__step::before {
    counter-increment: prose-step;
    content: counter(prose-step);
    position: absolute;
    left: var(--space-4);
    top: var(--space-5);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-family: var(--font-numeric);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: #fff;
    background-color: var(--brand-500);
    border-radius: 50%;
    box-shadow: var(--shadow-brand);
}

.prose__step-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.prose__step-text {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
}

/* -------------------------------------------------------------------------
   Figura
   ---------------------------------------------------------------------- */
.prose__figure {
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}

.prose__figure-media {
    display: block;
    aspect-ratio: 16 / 9;
    background-color: var(--ink-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.prose__figure-media img {
    object-fit: cover;
}

.prose__figure figcaption {
    margin-top: var(--space-3);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
    text-align: center;
}

/* -------------------------------------------------------------------------
   Conversão dentro do texto
   Contida de propósito: superfície clara, sem sombra colorida, sem ocupar a
   largura toda com vermelho. Ela precisa ser notada sem interromper — a faixa
   sólida da marca é o papel do fim da página.
   ---------------------------------------------------------------------- */
.prose__cta {
    display: grid;
    gap: var(--space-4);
    margin-top: clamp(2.25rem, 1.75rem + 2vw, 3rem);
    padding: var(--space-5);
    background-color: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-xl);
}

.prose__cta-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.prose__cta-desc {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text-soft);
}

.prose__cta .btn {
    justify-self: start;
}

/* -------------------------------------------------------------------------
   Etiquetas, aviso e compartilhamento
   ---------------------------------------------------------------------- */
.post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.post__tags li {
    padding: 0.3125rem 0.75rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-soft);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.post__disclaimer {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
}

.post__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-top: var(--space-6);
}

.post__share-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.post__share-title .icon {
    color: var(--ink-400);
}

.post__share-list {
    display: flex;
    gap: var(--space-2);
}

.post__share-link {
    display: grid;
    place-items: center;
    /* 44px: alvo de toque confortável em qualquer aparelho. */
    width: 44px;
    height: 44px;
    color: var(--color-text-soft);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    box-shadow: var(--shadow-xs);
    transition:
        color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.post__share-link:hover {
    color: #fff;
    background-color: var(--brand-500);
    border-color: var(--brand-500);
}

.post__share-link:active {
    transform: scale(0.94);
}

/* Confirmação da cópia — texto vivo (`role="status"`), então o leitor de tela
   também é avisado, e não só quem enxerga o botão mudar de cor. */
.post__share-feedback {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--brand-600);
}

.post__share-copy.is-copied {
    color: #fff;
    background-color: var(--brand-500);
    border-color: var(--brand-500);
}

/* -------------------------------------------------------------------------
   Assinatura da autora
   ---------------------------------------------------------------------- */
.post-author {
    display: grid;
    gap: var(--space-4);
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding: var(--space-5);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.post-author__avatar {
    width: 64px;
    height: 64px;
    flex: none;
    background-color: var(--ink-100);
}

.post-author__eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--brand-600);
}

.post-author__name {
    margin-top: var(--space-1);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

.post-author__text {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

.post-author__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--brand-600);
    transition: color var(--dur-fast) var(--ease-out);
}

.post-author__link .icon {
    transition: transform var(--dur-base) var(--ease-spring);
}

.post-author__link:hover {
    color: var(--brand-700);
}

.post-author__link:hover .icon {
    transform: translate(2px, -2px);
}

/* =========================================================================
   Breakpoints
   ====================================================================== */

@media (min-width: 600px) {
    .post-author {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: var(--space-5);
        padding: var(--space-6);
    }

    .post-author__avatar {
        width: 76px;
        height: 76px;
    }

    .prose__cta {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-5);
        padding: var(--space-6);
    }

    .prose__cta .btn {
        justify-self: end;
    }
}

/* Desktop — o sumário sai de cima do texto e vira coluna que acompanha a
   rolagem. É a partir daqui que sobra largura para ele sem espremer a coluna
   de leitura: `--prose-max` continua mandando. */
@media (min-width: 1080px) {
    /* Só quando o sumário existe. Um artigo curto não tem coluna lateral, e a
       grade de duas colunas espremeria o texto na faixa de 260px reservada ao
       índice — ver `post.php`. */
    .post__layout--com-sumario {
        grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
        gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
        align-items: start;
    }

    .post__layout--com-sumario .post__main {
        margin-inline: 0;
    }

    .post__aside {
        position: sticky;
        /* Encosta abaixo do header sticky, com o mesmo respiro que as âncoras
           do site usam. */
        top: calc(var(--header-height) + var(--space-4));
        /* Sumário longo rola dentro da própria coluna em vez de estourar a
           tela — o `sticky` deixaria o fim da lista inalcançável.
           SEM `overscroll-behavior: contain` de propósito: num container
           rolável ele corta o encadeamento da rolagem, e a roda do mouse
           parada sobre a coluna deixaria de mover a página. Numa coluna que
           ocupa 260px de altura inteira da tela, é a metade esquerda do
           monitor onde rolar não funciona — inaceitável numa página de
           leitura. O encadeamento padrão é o comportamento correto aqui. */
        max-height: calc(100vh - var(--header-height) - var(--space-8));
        overflow-y: auto;
        scrollbar-width: thin;
    }

    /* Na coluna lateral o índice está sempre aberto: ele não empurra mais
       nada, e um índice fechado num espaço que já é só dele não serve para
       nada. O `<details>` permanece no HTML — é ele que dá o comportamento
       correto no celular, sem duplicar marcação. */
    .post-toc {
        padding: var(--space-4);
        background-color: transparent;
        border: 0;
    }

    .post-toc__summary {
        min-height: 0;
        padding-bottom: var(--space-3);
        font-size: var(--fs-xs);
        letter-spacing: var(--ls-caps);
        text-transform: uppercase;
        color: var(--color-text-muted);
        cursor: default;
        pointer-events: none;
    }

    .post-toc__chevron {
        display: none;
    }

    .post-toc__list {
        border-top: 0;
        padding-top: 0;
    }

    .post-toc__nav {
        padding-bottom: 0;
    }

    .post__title {
        max-width: 24ch;
    }
}

/* =========================================================================
   Compatibilidade e preferências
   ====================================================================== */

/* `text-wrap: pretty` e `balance` são progressivos: onde não existem, o texto
   simplesmente quebra do jeito padrão — nada a compensar.
   O sumário chega aberto do servidor e é o JS que o fecha no celular, então
   não há um quadro em que ele pisque no estado errado. Ver `post.php`. */

@media (prefers-reduced-motion: reduce) {
    .post-toc__chevron,
    .post-author__link .icon,
    .prose__anchor {
        transition: none;
    }
}

@media print {
    .post__share,
    .post__aside,
    .prose__cta,
    .post-author__link,
    .post__header-backdrop {
        display: none !important;
    }

    .post__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .post__main {
        max-width: none;
    }

    /* No papel o link precisa mostrar para onde vai. */
    .prose a::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }

    .prose__h2,
    .prose__h3 {
        break-after: avoid;
    }

    .prose__quote,
    .prose__callout,
    .prose__step,
    .prose__figure {
        break-inside: avoid;
    }
}