/* 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: uppercase; color: var(--verde); line-height: 2; }

/* dia: pílula pequena de data, com mais respiro em cima do que embaixo */
.dia { margin: 120px 0 0; }
.dia-data { display: inline-block; padding: 20px 40px; border-radius: 999px; background: var(--rosa); color: var(--creme); font-size: 15px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.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 */
.pilula { display: flex; align-items: center; gap: 48px; min-height: 88px; padding: 24px 56px; border-radius: 999px; color: var(--creme); font-size: 15px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; transition: transform .2s ease; }
.pilula:hover { transform: translateY(-2px); }
.pilula .p-nome { flex: 0 0 34%; }
.pilula .p-resumo { flex: 1; font-weight: 600; opacity: .95; }
.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: uppercase; 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: uppercase; color: var(--lilas); }
.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: uppercase; color: var(--cinza); border-bottom: 1.5px solid var(--cinza-claro); padding-bottom: 6px; }

@media (max-width: 720px) {
  .folha { padding: 80px 16px 120px; }
  .pilula { flex-direction: column; align-items: flex-start; gap: 12px; border-radius: 36px; padding: 28px 32px; font-size: 13px; letter-spacing: .24em; }
  .pilula .p-nome { flex: none; }
  .dia { margin-top: 88px; }
  .bloco { margin-top: 80px; }
  .feitos li, .bloco p { font-size: 16px; }
}