/* diário de artefatos: estilo único de todas as páginas (paleta da Dra Lê + modelo V E R C E L) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;900&display=swap');

:root {
  --rosa: #F48591; --coral: #FA8D85; --pessego: #FEA283; --amarelo: #FFB872;
  --verde: #8DA599; --azul: #8D96C1; --lilas: #C18EA9;
  --cinza-claro: #D6D4CE; --cinza: #C8C4B9; --creme: #FFFBF3;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--creme); color: var(--azul); }
body { font-family: 'Figtree', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.folha { max-width: 1120px; margin: 0 auto; padding: 120px 56px 160px; }

/* título grande em minúsculas, cada letra de uma cor */
.titulo { margin: 0; font-weight: 900; font-size: clamp(64px, 14vw, 176px); line-height: .9; letter-spacing: -.045em; text-transform: lowercase; word-break: break-word; }
.titulo span:nth-child(7n+1) { color: var(--rosa); }
.titulo span:nth-child(7n+2) { color: var(--pessego); }
.titulo span:nth-child(7n+3) { color: var(--amarelo); }
.titulo span:nth-child(7n+4) { color: var(--verde); }
.titulo span:nth-child(7n+5) { color: var(--azul); }
.titulo span:nth-child(7n+6) { color: var(--lilas); }
.titulo span:nth-child(7n+7) { color: var(--coral); }

/* subtítulo em caixa-alta espaçada */
.sub { margin: 40px 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: lowercase; color: var(--verde); line-height: 2; }

/* dia: título da data em cinza, solto em cima do fundo (01/10/2026: título nunca dentro de pílula), mais respiro em cima do que embaixo */
.dia { margin: 120px 0 0; }
.dia-data { display: block; color: var(--cinza); font-size: 15px; font-weight: 700; letter-spacing: .3em; text-transform: lowercase; }
.lista { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 28px; }

/* pílulas coloridas com letra branca em caixa-alta espaçada */
/* respiro: texto só na metade de dentro da pílula (25% de margem de cada lado) */
/* o nome do terminal (título) fica fora da pílula, em cinza em cima do fundo; dentro da pílula só o resumo */
.lista li > a { display: block; transition: transform .2s ease; }
.lista li > a:hover { transform: translateY(-2px); }
.p-nome { display: block; margin: 0 0 16px 6px; color: var(--cinza); font-size: 15px; font-weight: 700; letter-spacing: .3em; text-transform: lowercase; }
.pilula { display: flex; flex-direction: column; justify-content: center; min-height: 112px; padding: 40px 25%; border-radius: 999px; color: var(--creme); font-size: 15px; font-weight: 600; letter-spacing: .3em; text-transform: lowercase; }
.lista li:nth-child(7n+1) .pilula { background: var(--rosa); }
.lista li:nth-child(7n+2) .pilula { background: var(--coral); }
.lista li:nth-child(7n+3) .pilula { background: var(--pessego); }
.lista li:nth-child(7n+4) .pilula { background: var(--amarelo); }
.lista li:nth-child(7n+5) .pilula { background: var(--verde); }
.lista li:nth-child(7n+6) .pilula { background: var(--azul); }
.lista li:nth-child(7n+7) .pilula { background: var(--lilas); }

.vazio { margin: 120px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: lowercase; color: var(--cinza); }

/* página de um artefato (o dia de um terminal) */
.bloco { margin: 112px 0 0; }
.bloco h2 { margin: 0 0 32px; font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: lowercase; color: var(--cinza); }
.bloco p { margin: 0 0 20px; max-width: 760px; font-size: 18px; line-height: 1.75; font-weight: 500; color: var(--azul); }
.feitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.feitos li { display: flex; gap: 28px; align-items: baseline; max-width: 820px; font-size: 18px; line-height: 1.7; font-weight: 500; }
.feitos li b { flex: 0 0 auto; min-width: 44px; height: 44px; line-height: 44px; border-radius: 999px; text-align: center; font-size: 14px; letter-spacing: .1em; color: var(--creme); background: var(--rosa); }
.feitos li:nth-child(7n+2) b { background: var(--coral); }
.feitos li:nth-child(7n+3) b { background: var(--pessego); }
.feitos li:nth-child(7n+4) b { background: var(--amarelo); }
.feitos li:nth-child(7n+5) b { background: var(--verde); }
.feitos li:nth-child(7n+6) b { background: var(--azul); }
.feitos li:nth-child(7n+7) b { background: var(--lilas); }
.feitos a, .bloco p a { color: var(--rosa); border-bottom: 1.5px solid var(--cinza-claro); }
.voltar { display: inline-block; margin: 144px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: lowercase; color: var(--cinza); border-bottom: 1.5px solid var(--cinza-claro); padding-bottom: 6px; }

@media (max-width: 720px) {
  .folha { padding: 80px 16px 120px; }
  .pilula { border-radius: 48px; padding: 36px 25%; font-size: 11px; letter-spacing: .2em; }
  .dia-data, .p-nome { font-size: 12px; letter-spacing: .2em; }
  .dia { margin-top: 88px; }
  .bloco { margin-top: 80px; }
  .feitos li, .bloco p { font-size: 16px; }
}

/* 01/10/2026: tudo em minúsculas, nunca maiúscula e minúscula misturadas */
body { text-transform: lowercase; }

/* lle.sh/como: sem contorno azul; listas de linhas curtas */
a, button, input, select, textarea, [tabindex] { outline: none; -webkit-tap-highlight-color: transparent; }
:focus, :focus-visible { outline: none; box-shadow: none; }
.linhas { margin: 0 0 20px; font-size: 18px; line-height: 1.75; font-weight: 500; color: var(--azul); }
@media (max-width: 720px) { .linhas { font-size: 16px; } }