/* ============================================================
   /autor/: o /sobre do site principal. Cartao de perfil na lateral
   (capa escura, avatar com anel, dados) e a historia do blog como um
   `git log --graph` num painel escuro ao lado. So esta pagina carrega.
   ============================================================ */

.autor {
    display: grid;
    grid-template-columns: 18.5rem minmax(0, 1fr);
    gap: clamp(28px, 3.5vw, 48px);
    align-items: start;
    padding-top: clamp(32px, 5vw, 56px);
}

/* ---------- cartao de perfil ---------- */
.autor-cartao {
    position: sticky;
    top: calc(var(--barra) + 24px);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(23, 22, 26, .04);
    font-family: var(--fonte-corpo);
}

/* A "capa" do perfil e um trecho do grafo: fundo escuro com as linhas de
   caderno do hero e a ref do HEAD no canto. */
.autor-capa {
    height: 88px;
    padding: 12px 16px;
    text-align: right;
    background:
        radial-gradient(ellipse 80% 120% at 80% 0, rgba(123, 45, 95, .45), transparent 70%),
        linear-gradient(rgba(246, 245, 241, .035) 1px, transparent 1px) 0 0/100% 14px,
        var(--dx-bg);
    color: var(--dx-fraco);
    font-family: var(--fonte-mono);
    font-size: 12px;
}

.autor-identidade {
    padding: 0 20px;
    margin-top: -56px
}

.autor-avatar-caixa {
    position: relative;
    width: 112px
}

img.autor-avatar {
    width: 112px;
    height: 112px;
    object-fit: cover;
    object-position: center 25%;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--ameixa);
}

/* Bolinha de "online", como num perfil de rede. */
.autor-online {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #3fa45a;
}

.autor-nome {
    margin-top: 14px;
    color: var(--tinta);
    font-family: var(--fonte-display);
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -.01em;
}

.autor-handle {
    margin-top: 4px;
    color: var(--tinta-fraca);
    font-family: var(--fonte-mono);
    font-size: 13px;
}

/* Linha de terminal com o artigo mais novo. */
.autor-agora {
    display: flex;
    gap: 8px;
    margin: 16px 20px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--dx-painel);
    color: var(--dx-texto);
    font-family: var(--fonte-mono);
    font-size: 13px;
    line-height: 1.5;
}

.autor-prompt {
    flex-shrink: 0;
    color: var(--dx-prompt)
}

.autor-agora a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(246, 245, 241, .35);
    text-underline-offset: 3px;
}

.autor-agora a:hover {
    color: var(--dx-acento)
}

.autor-bio {
    margin: 16px 20px 0;
    color: var(--tinta-media);
    font-size: 15px;
    line-height: 1.6;
}

.autor-dados {
    display: grid;
    gap: 10px;
    margin: 18px 20px 0;
}

.autor-dados dt {
    color: var(--tinta-fraca);
    font-family: var(--fonte-mono);
    font-size: 12px;
}

.autor-dados dd {
    margin: 0;
    color: var(--tinta);
    font-size: 15px;
}

.autor-dados a {
    color: var(--ameixa);
    font-weight: 600
}

.autor-dados a:hover {
    text-decoration: underline
}

.autor-redes {
    display: grid;
    margin-top: 18px;
    padding: 8px 12px 12px;
    border-top: 1px solid var(--linha);
    background: var(--fundo-suave);
}

.autor-redes a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--alvo-toque);
    padding: 0 8px;
    border-radius: 8px;
    color: var(--tinta-media);
    font-family: var(--fonte-mono);
    font-size: 13px;
    transition: background-color .2s, color .2s;
}

.autor-redes a:hover {
    background: #efe4ea;
    color: var(--ameixa-forte)
}

/* ---------- painel: git log ---------- */
.autor-painel {
    overflow: hidden;
    background: var(--dx-bg);
    border: 1px solid var(--dx-linha);
    border-radius: 16px;
    box-shadow: 0 40px 80px -40px rgba(23, 22, 26, .45);
    color: var(--dx-texto);
    font-family: var(--fonte-corpo);
}

.autor-painel :focus-visible {
    outline: 2px solid var(--dx-acento);
    outline-offset: 2px
}

.autor-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid var(--dx-linha);
    background: var(--dx-painel);
    color: var(--dx-fraco);
    font-family: var(--fonte-mono);
    font-size: 13px;
}

.autor-pontos {
    display: flex;
    gap: 6px
}

.autor-pontos i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(246, 245, 241, .16)
}

.autor-pontos i:first-child {
    background: var(--dx-prompt)
}

/* <ol> porque a ordem e o assunto (do mais novo ao primeiro), mas sem o
   numero nativo: o reset do critico.css so zera o <ul>. */
.autor-log,
.autor-artigos {
    margin: 0;
    list-style: none
}

.autor-log {
    padding: 24px 24px 32px 16px
}

/* Cada commit: o simbolo do grafo numa coluna, o conteudo na outra. A
   linha vertical e o ::before da coluna do trilho. */
.autor-commit {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
}

.autor-trilho {
    position: relative;
    color: var(--dx-prompt);
    font-family: var(--fonte-mono);
    font-size: 13px;
    white-space: pre;
}

.autor-trilho::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 0;
    left: 4px;
    width: 1px;
    background: rgba(224, 104, 159, .45);
}

.autor-ultimo .autor-trilho::before {
    content: none
}

.autor-conteudo {
    min-width: 0;
    padding-bottom: 36px
}

.autor-ultimo .autor-conteudo {
    padding-bottom: 0
}

.autor-cab,
.autor-autor {
    font-family: var(--fonte-mono);
    font-size: 13px;
    line-height: 1.6;
}

.autor-hash {
    color: #f2c46d
}

.autor-ref {
    color: #b5d68c
}

.autor-tipo {
    color: var(--dx-fraco)
}

.autor-autor {
    color: var(--dx-fraco)
}

.autor-mensagem {
    margin-top: 12px;
    color: #fff;
    font-family: var(--fonte-display);
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.autor-corpo {
    display: grid;
    gap: 14px;
    max-width: 44em;
    margin-top: 14px;
    color: rgba(238, 233, 240, .8);
    font-size: 16px;
    line-height: 1.7;
}

.autor-corpo strong {
    color: #fff
}

.autor-corpo a,
.autor-mais a {
    color: var(--dx-acento);
    text-decoration: underline;
    text-decoration-color: rgba(227, 156, 198, .4);
    text-underline-offset: 3px;
}

.autor-corpo a:hover,
.autor-mais a:hover {
    color: #fff
}

/* shortlog: total, nome e uma barra proporcional ao maior assunto. */
.autor-shortlog {
    display: grid;
    gap: 2px;
    max-width: 40rem;
    margin-top: 16px;
}

.autor-shortlog a {
    display: grid;
    grid-template-columns: 3ch minmax(0, 12rem) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    font-family: var(--fonte-mono);
    font-size: 13px;
    transition: background-color .2s;
}

.autor-shortlog a:hover {
    background: rgba(246, 245, 241, .05)
}

.autor-sl-n {
    color: #f2c46d;
    text-align: right
}

.autor-sl-nome {
    overflow: hidden;
    color: var(--dx-texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autor-sl-barra {
    height: 6px;
    border-radius: 3px;
    background: rgba(246, 245, 241, .06)
}

.autor-sl-barra i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ameixa), var(--dx-prompt));
}

.autor-mais {
    margin-top: 14px;
    font-size: 15px
}

/* Artigos recentes como `git log --oneline`: meta em mono, titulo embaixo. */
.autor-artigos {
    display: grid;
    gap: 2px;
    margin-top: 16px;
    padding: 0;
}

.autor-artigos a {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background-color .2s;
}

.autor-artigos a:hover {
    background: rgba(246, 245, 241, .05)
}

.autor-art-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    color: var(--dx-fraco);
    font-family: var(--fonte-mono);
    font-size: 12px;
}

.autor-art-titulo {
    color: var(--dx-texto);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.autor-artigos a:hover .autor-art-titulo {
    color: #fff
}

/* ---------- telas menores ---------- */
@media (max-width:960px) {
    .autor {
        grid-template-columns: minmax(0, 1fr)
    }

    .autor-cartao {
        position: static
    }
}

@media (max-width:640px) {
    .autor-log {
        padding: 20px 16px 24px 8px
    }

    .autor-commit {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 8px
    }

    .autor-shortlog a {
        grid-template-columns: 3ch minmax(0, 1fr) 4rem;
        gap: 10px
    }
}