/* Blog independente — mesma gramática visual do site, movimento curto e suíço. */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.reveal{animation:rise .7s cubic-bezier(.2,0,.2,1) both}
@supports (animation-timeline:view()){.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 58%;animation-delay:0s}}
@keyframes grow{from{width:0}to{width:88px}}
.rule-fx{display:block;height:4px;background:var(--vermelho-500);width:88px;animation:grow .8s cubic-bezier(.2,0,.2,1) .12s both}
.card-fx{position:relative;transition:transform .22s cubic-bezier(.2,0,.2,1),box-shadow .22s,border-color .22s}
.card-fx::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--vermelho-500);transition:width .34s cubic-bezier(.2,0,.2,1);z-index:3}
.card-fx:hover::before{width:100%}
.card-fx:hover{transform:translateY(-3px);border-color:var(--line-strong)}

/* Spotlight radial suave ao mover o mouse */
.card-fx[data-spotlight]::after,
.card[data-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(360px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(225, 37, 27, 0.08), transparent 70%);
  z-index: 1;
}
.card-fx[data-spotlight]:hover::after,
.card[data-spotlight]:hover::after {
  opacity: 1;
}
.card-fx > *,
.card > * {
  position: relative;
  z-index: 2;
}
.link-fx{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s cubic-bezier(.2,0,.2,1)}
.link-fx:hover{background-size:100% 1px}
.numeral{position:absolute;top:-.18em;right:0;z-index:-1;font-family:var(--font-display);font-weight:900;font-size:clamp(140px,15vw,230px);line-height:.78;letter-spacing:-.05em;color:var(--gelo-200);user-select:none;pointer-events:none}
.wordmark{font-family:var(--font-display);font-weight:900;font-size:clamp(64px,13vw,190px);line-height:.82;letter-spacing:-.05em;color:var(--gelo-300);text-transform:uppercase;user-select:none;pointer-events:none}

/* Container padrão alinhado */
.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
  width: 100%;
}

/* Tipografia JetBrains Mono para Eyebrow e Tags */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Tag / Badge estilizada em JetBrains Mono */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--line-hairline);
  white-space: nowrap;
  line-height: 1.15;
  font-weight: 500;
  flex-shrink: 0;
}

.badge.info {
  background: var(--vermelho-100);
  color: var(--vermelho-600);
  border-color: transparent;
}

/* Linha superior do card com tag e data bem distribuídas */
.card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 6px;
  column-gap: 8px;
  margin-bottom: var(--space-4);
  width: 100%;
}

.card-meta-row .badge {
  flex-shrink: 0;
}

.card-meta-row .date-reading {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Cards do blog */
.card-post {
  cursor: pointer;
  padding: var(--space-6);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-post h3 {
  margin-top: var(--space-3);
  font-size: var(--text-title);
  line-height: 1.25;
  color: var(--text-strong);
  font-weight: var(--weight-bold);
}

.card-post p {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.card-post .read-more {
  margin-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-link);
  font-size: var(--text-small);
  font-family: var(--font-mono);
  font-weight: 500;
  transition: gap 0.2s ease, color 0.2s ease;
}

.card-post:hover .read-more {
  gap: 10px;
  color: var(--vermelho-600);
}

/* Barra de leitura do artigo */
.read-bar{position:fixed;left:0;top:0;z-index:40;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--vermelho-500);pointer-events:none}

/* Corpo do texto — leitura editorial sóbria e contínua */
.prose {
  display: block !important;
  max-width: 68ch;
  margin-top: var(--space-7);
}
.prose p {
  font-size: var(--text-body-l);
  line-height: 1.72;
  color: var(--text-default);
  margin-top: 0;
  margin-bottom: var(--space-5);
  text-wrap: pretty;
}
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-m);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: 1.25;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: 1.3;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--vermelho-500);
  background: var(--surface-sunken);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-l);
  font-style: italic;
  color: var(--text-strong);
  line-height: 1.65;
}
.prose ul {
  margin: var(--space-4) 0 var(--space-6) 0;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.prose li {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-default);
}
.prose hr {
  border: none;
  border-top: 1px solid var(--line-hairline);
  margin-block: var(--space-8);
}

@media (prefers-reduced-motion:reduce){.reveal{animation:none}.rule-fx{animation:none}.card-fx{transition:none}}
@media print{.read-bar,.blog-nav{display:none}}

/* Inversão da Marca / Logo */
.logo-dia { display: block !important; }
.logo-noite { display: none !important; }
[data-tema="noite"] .logo-dia { display: none !important; }
[data-tema="noite"] .logo-noite { display: block !important; }