/* neuradevergente.com
   ---------------------------------------------------------------------------
   Regras da casa, porque alguém vai abrir o inspetor e conferir:

   1. Toda medida de layout -- espaçamento, altura, coluna -- é múltipla de 8px.
      Detalhe óptico (borda, contorno de foco, sublinhado, blur) usa 1-3px, que é
      a única exceção e nunca move um bloco de lugar.
   2. A escala tipográfica é fechada. Nenhum font-size fora dos tokens.
   3. Toda line-height cai em múltiplo de 4px, para o ritmo vertical não escorregar.
   4. Nada se move sozinho. Transições só em resposta a input, e só de cor/opacidade.
   5. Números usam tabular-nums em todo lugar, para a coluna não dançar.
   --------------------------------------------------------------------------- */

/* ---------- tokens ---------- */
:root {
  color-scheme: light dark;

  /* grade */
  --u:  8px;
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 40px;  --s6: 48px;  --s7: 64px;  --s8: 80px;  --s9: 112px;
  --half: 4px;

  /* escala tipográfica fechada */
  --fs-micro:   0.6875rem;  /* 11 */
  --fs-tiny:    0.75rem;    /* 12 */
  --fs-small:   0.8125rem;  /* 13 */
  --fs-meta:    0.875rem;   /* 14 */
  --fs-body:    1rem;       /* 16 */
  --fs-read:    1.0625rem;  /* 17 */
  --fs-h4:      1.125rem;   /* 18 */
  --fs-h3:      1.3125rem;  /* 21 */
  --fs-h2:      1.625rem;   /* 26 */
  --fs-h1:      2.25rem;    /* 36 */
  --fs-display: 3rem;       /* 48 */

  --lh-micro: 16px; --lh-tiny: 16px; --lh-small: 20px; --lh-meta: 20px;
  --lh-body: 24px;  --lh-read: 28px; --lh-h4: 24px;    --lh-h3: 28px;
  --lh-h2: 32px;    --lh-h1: 40px;   --lh-display: 56px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo,
               Consolas, "Liberation Mono", monospace;

  /* larguras */
  --shell: 1152px;     /* 8 x 144 */
  --measure: 680px;    /* ~72 caracteres */
  --radius: 6px;
  --radius-lg: 10px;
  --border: 1px;

  /* cores -- claro */
  --bg:        #F4F6F8;
  --surface:   #FFFFFF;
  --surface-2: #EDF0F3;
  --ink:       #0E1216;
  --ink-2:     #39424D;
  --muted:     #656F7C;
  --line:      #DFE4E9;
  --line-2:    #C9D1D9;
  --accent:    #12705C;
  --accent-2:  #0C5949;
  --accent-bg: #E3F1EC;
  --warm:      #8A5A12;
  --warm-bg:   #F6EEDF;
  --violet:    #5A4593;
  --violet-bg: #ECE8F6;
  --focus:     #12705C;
  --shadow:    0 1px 2px rgba(14, 18, 22, .05), 0 8px 24px rgba(14, 18, 22, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0B0E11;
    --surface:   #12171C;
    --surface-2: #181E25;
    --ink:       #E7ECF1;
    --ink-2:     #B7C0CB;
    --muted:     #8892A0;
    --line:      #222A33;
    --line-2:    #303A45;
    --accent:    #4FC2A3;
    --accent-2:  #6FD6BA;
    --accent-bg: #122A25;
    --warm:      #D3A15E;
    --warm-bg:   #2A2318;
    --violet:    #A896E0;
    --violet-bg: #1F1B2E;
    --focus:     #4FC2A3;
    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit; color: inherit; font-variant-numeric: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--half);
}

::selection { background: var(--accent-bg); color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- utilitários ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff;
  padding: var(--s1) var(--s2); border-radius: var(--radius); z-index: 50;
}
.skip:focus { left: var(--s2); top: var(--s2); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny); line-height: var(--lh-tiny);
  letter-spacing: .02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

.muted { color: var(--muted); }
.stack > * + * { margin-top: var(--s2); }

/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: var(--border) solid var(--line);
}

.masthead__row {
  height: var(--s8);              /* 80px, múltiplo da grade */
  display: flex; align-items: center; gap: var(--s3);
}

.brand { display: flex; align-items: center; gap: var(--s2); flex: none; }

.brand__mark {
  width: var(--s5); height: var(--s5);           /* 40 x 40 */
  border: var(--border) solid var(--line-2);
  border-radius: var(--radius);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-h4); line-height: 1;
  color: var(--accent); background: var(--surface);
  flex: none;
}

.brand__name {
  font-size: var(--fs-h4); line-height: var(--lh-h4);
  font-weight: 640; letter-spacing: -.015em;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--muted); letter-spacing: .04em;
}

.nav { display: flex; align-items: center; gap: var(--half); margin-left: auto; }

.nav a {
  padding: 0 var(--s2);
  height: var(--s5); display: inline-flex; align-items: center;
  border-radius: var(--radius);
  font-size: var(--fs-meta); line-height: var(--lh-meta);
  color: var(--ink-2);
  transition: background-color .12s ease, color .12s ease;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-bg); }

.nav__cta { margin-left: var(--s1); }

.nav__sep {
  width: var(--border); height: var(--s3);
  background: var(--line); margin-inline: var(--s1); flex: none;
}

/* ---------- botões ---------- */
.btn {
  height: var(--s5);
  padding-inline: var(--s2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  border: var(--border) solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 520;
  cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-2); }

.btn--primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
@media (prefers-color-scheme: dark) {
  .btn--primary { color: #07120F; }
}

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn--small {
  height: var(--s4); padding-inline: var(--s1);
  font-size: var(--fs-small); line-height: var(--lh-small);
}

.btn--block { width: 100%; }

/* ---------- selos ---------- */
.tag {
  display: inline-flex; align-items: center; height: var(--s3);
  padding-inline: var(--s1);
  border-radius: var(--half);
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--surface-2); color: var(--muted);
  border: var(--border) solid var(--line);
}
.tag--curiosidade { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.tag--noticia     { background: var(--warm-bg);   color: var(--warm);   border-color: transparent; }
.tag--guia        { background: var(--violet-bg); color: var(--violet); border-color: transparent; }
.tag--pin         { background: var(--warm-bg);   color: var(--warm);   border-color: transparent; }

/* ---------- layout de página ---------- */
main { display: block; }

.page { padding-block: var(--s7) var(--s9); }
.page--tight { padding-block: var(--s6) var(--s8); }

.page-head { margin-bottom: var(--s5); }
.page-head h1 {
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  font-weight: 680; letter-spacing: -.025em;
  margin-top: var(--s1);
}
.page-head p {
  margin-top: var(--s2); color: var(--muted);
  font-size: var(--fs-read); line-height: var(--lh-read);
  max-width: var(--measure);
}

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: var(--border) solid var(--line);
}
.section-head h2 {
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  font-weight: 640; letter-spacing: -.015em;
}
.section-head a { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--accent); }
.section-head a:hover { text-decoration: underline; text-underline-offset: 3px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s6);
  align-items: start;
}

/* ---------- hero ---------- */
.hero { padding-block: var(--s8) var(--s7); border-bottom: var(--border) solid var(--line); }

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s6); align-items: start;
}

.hero h1 {
  font-size: var(--fs-display); line-height: var(--lh-display);
  font-weight: 700; letter-spacing: -.035em;
  margin-top: var(--s2);
  max-width: 16ch;
}
.hero__lede {
  margin-top: var(--s3);
  font-size: var(--fs-read); line-height: var(--lh-read);
  color: var(--ink-2); max-width: var(--measure);
}
.hero__actions { margin-top: var(--s4); display: flex; gap: var(--s1); flex-wrap: wrap; }

.hero__note {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-tiny); line-height: var(--lh-tiny);
  color: var(--muted);
}

/* painel de números do hero */
.panel {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel__head {
  padding: var(--s2);
  border-bottom: var(--border) solid var(--line);
  background: var(--surface-2);
}
.panel__body { padding: var(--s2); }

.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric {
  padding: var(--s2);
  border-right: var(--border) solid var(--line);
  border-bottom: var(--border) solid var(--line);
}
.metric:nth-child(2n) { border-right: 0; }
.metric:nth-last-child(-n+2) { border-bottom: 0; }
.metric__value {
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  font-weight: 660; letter-spacing: -.02em;
}
.metric__label {
  margin-top: var(--half);
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* ---------- cartões ---------- */
.card {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s3);
  transition: border-color .12s ease, box-shadow .12s ease;
}
a.card:hover, .card--link:hover { border-color: var(--line-2); box-shadow: var(--shadow); }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }

/* categorias */
.cat {
  display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); gap: var(--s2);
  align-items: start;
}
.cat__glyph {
  width: var(--s6); height: var(--s6);
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent);
  font-size: var(--fs-h3); line-height: 1;
}
.cat__name {
  font-size: var(--fs-h4); line-height: var(--lh-h4);
  font-weight: 620; letter-spacing: -.01em;
}
.cat__tagline {
  margin-top: var(--half);
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted);
}
.cat__desc {
  margin-top: var(--s1);
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2);
}
.cat__stats {
  margin-top: var(--s2); display: flex; gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--muted); letter-spacing: .04em;
}

/* ---------- lista de threads ---------- */
.threads {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.thread-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--s7) var(--s7) 104px;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: var(--border) solid var(--line);
  transition: background-color .12s ease;
}
.thread-row:last-child { border-bottom: 0; }
.thread-row:hover { background: var(--surface-2); }

.thread-row__head {
  display: flex; align-items: center; gap: var(--s1);
  min-width: 0;
}
.thread-row__title {
  font-size: var(--fs-body); line-height: var(--lh-body);
  font-weight: 560; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-row:hover .thread-row__title { color: var(--accent); }

.thread-row__meta {
  margin-top: var(--half);
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--muted); letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.thread-row__stat {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--ink-2);
}
.thread-row__stat span {
  display: block;
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
}
.thread-row__when {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--muted);
}

/* cabeçalho da tabela, alinhado às mesmas colunas */
.thread-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--s7) var(--s7) 104px;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  background: var(--surface-2);
  border-bottom: var(--border) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.thread-head span:not(:first-child) { text-align: right; }

/* ---------- artigos (listagem) ---------- */
.article-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 88px;
  gap: var(--s3); align-items: start;
  padding: var(--s3) 0;
  border-bottom: var(--border) solid var(--line);
}
.article-row:last-child { border-bottom: 0; }
.article-row__date {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny); line-height: var(--lh-body);
  color: var(--muted); letter-spacing: .02em;
}
.article-row__title {
  font-size: var(--fs-h4); line-height: var(--lh-h4);
  font-weight: 620; letter-spacing: -.015em;
}
.article-row:hover .article-row__title { color: var(--accent); }
.article-row__dek {
  margin-top: var(--s1);
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted);
  max-width: var(--measure);
}
.article-row__tags { margin-top: var(--s2); display: flex; gap: var(--s1); }
.article-row__read {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-body);
  color: var(--muted);
}

/* ---------- prosa ---------- */
.prose { max-width: var(--measure); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose hr, .prose h2 {
  margin-top: var(--s3);
}
.prose > :first-child { margin-top: 0; }

.prose p {
  font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2);
}
.prose h2 {
  margin-top: var(--s6);
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  font-weight: 660; letter-spacing: -.02em; color: var(--ink);
}
.prose ul, .prose ol { padding-left: var(--s3); }
.prose ul li, .prose ol li {
  font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2);
  margin-top: var(--s1); position: relative;
}
.prose ul li::before {
  content: "—"; position: absolute; left: calc(var(--s3) * -1);
  color: var(--line-2);
}
.prose ol { counter-reset: item; }
.prose ol li { counter-increment: item; }
.prose ol li::before {
  content: counter(item) "."; position: absolute; left: calc(var(--s3) * -1);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted);
}
.prose blockquote {
  padding-left: var(--s3);
  border-left: 2px solid var(--accent);
  color: var(--ink); font-style: italic;
  font-size: var(--fs-read); line-height: var(--lh-read);
}
.prose hr {
  border: 0; border-top: var(--border) solid var(--line);
  margin-block: var(--s5);
}
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-2); }
.prose code {
  font-family: var(--font-mono); font-size: .875em;
  background: var(--surface-2); border: var(--border) solid var(--line);
  border-radius: var(--half); padding: 1px var(--half);
}
.prose strong { color: var(--ink); font-weight: 640; }

/* ---------- artigo ---------- */
.article-head { border-bottom: var(--border) solid var(--line); padding-bottom: var(--s4); }
.article-head h1 {
  margin-top: var(--s2);
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  font-weight: 690; letter-spacing: -.03em;
  max-width: var(--measure);
}
.article-head__dek {
  margin-top: var(--s2);
  font-size: var(--fs-read); line-height: var(--lh-read);
  color: var(--muted); max-width: var(--measure);
}
.article-head__meta {
  margin-top: var(--s3); display: flex; align-items: center;
  gap: var(--s2); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny); line-height: var(--lh-tiny);
  color: var(--muted); letter-spacing: .03em;
}
.article-body { padding-block: var(--s5); }

/* ---------- thread ---------- */
.crumbs {
  display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny); line-height: var(--lh-tiny);
  color: var(--muted); letter-spacing: .03em;
  margin-bottom: var(--s3);
}
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { color: var(--line-2); }

.thread-title {
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  font-weight: 680; letter-spacing: -.03em;
  max-width: var(--measure);
}
.thread-meta {
  margin-top: var(--s2); display: flex; align-items: center;
  gap: var(--s2); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny); line-height: var(--lh-tiny);
  color: var(--muted); letter-spacing: .03em;
}

.post {
  display: grid; grid-template-columns: 176px minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s4);
  border-top: var(--border) solid var(--line);
}
.post--op { border-top: 0; padding-top: var(--s4); }

.post__author { position: sticky; top: var(--s9); align-self: start; }
.avatar {
  width: var(--s6); height: var(--s6);
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--surface-2); border: var(--border) solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-h4); line-height: 1;
  color: var(--ink-2); text-transform: uppercase;
}
.post__name {
  margin-top: var(--s1);
  font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 580;
}
.post__name:hover { color: var(--accent); }
.post__flair {
  margin-top: var(--half);
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--muted); letter-spacing: .04em;
}
.post__when {
  margin-top: var(--s1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--muted);
}

.post__body { min-width: 0; }
.post__body p, .post__body blockquote { margin-top: var(--s2); }
.post__body > :first-child { margin-top: 0; }
.post__body p {
  font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2);
}
.post__body blockquote {
  padding: var(--s1) var(--s2);
  border-left: 2px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--muted);
  font-size: var(--fs-meta); line-height: var(--lh-meta);
}
.post__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post__body code {
  font-family: var(--font-mono); font-size: .875em;
  background: var(--surface-2); border: var(--border) solid var(--line);
  border-radius: var(--half); padding: 1px var(--half);
}
.post__body strong { color: var(--ink); font-weight: 640; }

.post__actions { margin-top: var(--s3); display: flex; align-items: center; gap: var(--s1); }

.nod {
  display: inline-flex; align-items: center; gap: var(--half);
  height: var(--s4); padding-inline: var(--s1);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  letter-spacing: .04em; color: var(--muted);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.nod:hover { border-color: var(--line-2); color: var(--ink); }
.nod[data-on="1"] { background: var(--accent-bg); border-color: transparent; color: var(--accent); }

/* ---------- formulários ---------- */
.form { max-width: var(--measure); }
.field + .field { margin-top: var(--s3); }

.field label {
  display: block;
  font-size: var(--fs-meta); line-height: var(--lh-meta);
  font-weight: 560; margin-bottom: var(--s1);
}
.field__hint {
  margin-top: var(--half); margin-bottom: var(--s1);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted);
}

.input, .textarea {
  width: 100%;
  background: var(--surface);
  border: var(--border) solid var(--line-2);
  border-radius: var(--radius);
  padding: 0 var(--s2);
  height: var(--s6);
  font-size: var(--fs-body); line-height: var(--lh-body);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.textarea {
  height: auto; padding: var(--s2);
  min-height: 224px; resize: vertical;
  line-height: var(--lh-read); font-size: var(--fs-read);
  font-family: var(--font-sans);
}
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .7; }

.form__actions {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: var(--border) solid var(--line);
  display: flex; align-items: center; gap: var(--s2);
}

.notice {
  padding: var(--s2);
  border-radius: var(--radius);
  border: var(--border) solid var(--line);
  background: var(--surface-2);
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2);
}
.notice--error {
  background: var(--warm-bg); border-color: transparent; color: var(--warm);
}

/* ---------- barra lateral ---------- */
.side { display: grid; gap: var(--s2); position: sticky; top: var(--s9); }
.side__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s2);
}
.side__list li + li { margin-top: var(--s2); padding-top: var(--s2); border-top: var(--border) solid var(--line); }
.side__link {
  font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 540;
  display: block;
}
.side__link:hover { color: var(--accent); }
.side__meta {
  margin-top: var(--half);
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--muted);
}

/* ---------- rodapé ---------- */
.footer {
  border-top: var(--border) solid var(--line);
  background: var(--surface);
  padding-block: var(--s6);
  margin-top: var(--s9);
}
.footer__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4);
}
.footer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s2);
}
.footer__list li + li { margin-top: var(--s1); }
.footer__list a {
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-2);
}
.footer__list a:hover { color: var(--accent); }
.footer__note {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: var(--border) solid var(--line);
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny); line-height: var(--lh-tiny); color: var(--muted);
}

/* ---------- vazio / erro ---------- */
.empty {
  padding: var(--s7) var(--s3);
  text-align: center;
  border: var(--border) dashed var(--line-2);
  border-radius: var(--radius-lg);
}
.empty__glyph { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--line-2); }
.empty h3 {
  margin-top: var(--s2);
  font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 620;
}
.empty p {
  margin-top: var(--s1); color: var(--muted);
  font-size: var(--fs-meta); line-height: var(--lh-meta);
}

.error-page { padding-block: var(--s9); text-align: center; }
.error-page__code {
  font-family: var(--font-mono);
  font-size: var(--fs-display); line-height: var(--lh-display);
  font-weight: 600; color: var(--line-2); letter-spacing: -.02em;
}
.error-page h1 {
  margin-top: var(--s2);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  font-weight: 660; letter-spacing: -.02em;
}
.error-page p {
  margin-top: var(--s2); color: var(--muted);
  font-size: var(--fs-read); line-height: var(--lh-read);
  max-width: 52ch; margin-inline: auto;
}
.error-page .btn { margin-top: var(--s4); }

/* ---------- paginação ---------- */
.pager {
  margin-top: var(--s4); display: flex; align-items: center;
  justify-content: space-between; gap: var(--s2);
}
.pager__state {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny); line-height: var(--lh-tiny); color: var(--muted);
}

/* ---------- busca ---------- */
.searchbar { display: flex; gap: var(--s1); max-width: var(--measure); }
.searchbar .input { flex: 1; }

/* ---------- filtros ---------- */
.filters { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s4); }
.filter {
  height: var(--s4); padding-inline: var(--s2);
  display: inline-flex; align-items: center; gap: var(--half);
  border: var(--border) solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2);
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.filter:hover { border-color: var(--line-2); color: var(--ink); }
.filter[aria-current="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
@media (prefers-color-scheme: dark) {
  .filter[aria-current="true"] { color: #07120F; }
}
.filter__count { font-family: var(--font-mono); font-size: var(--fs-micro); opacity: .7; }

/* ---------- perfil ---------- */
.profile-head {
  display: grid; grid-template-columns: var(--s8) minmax(0, 1fr);
  gap: var(--s3); align-items: center;
  padding-bottom: var(--s4); border-bottom: var(--border) solid var(--line);
}
.profile-head .avatar {
  width: var(--s8); height: var(--s8);
  font-size: var(--fs-h1); border-radius: var(--radius-lg);
}
.profile-head h1 {
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  font-weight: 660; letter-spacing: -.02em;
}
.profile-head p { margin-top: var(--s1); color: var(--muted); font-size: var(--fs-meta); line-height: var(--lh-meta); }

.battery {
  margin-top: var(--s2);
  display: flex; align-items: center; gap: var(--s1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--muted);
}

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .split, .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .side { position: static; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --fs-display: 2.25rem; --lh-display: 40px; --fs-h1: 1.75rem; --lh-h1: 32px; }
  .shell { padding-inline: var(--s2); }
  .masthead__row { height: var(--s7); }
  .brand__sub { display: none; }
  .nav a { padding-inline: var(--s1); font-size: var(--fs-small); }
  .nav__sep { display: none; }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .thread-row, .thread-head { grid-template-columns: minmax(0, 1fr) var(--s7); }
  .thread-row__stat--views, .thread-head span:nth-child(3) { display: none; }
  .thread-row__when, .thread-head span:nth-child(4) { display: none; }
  .post { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .post__author { position: static; display: flex; align-items: center; gap: var(--s2); }
  .post__author .avatar { width: var(--s5); height: var(--s5); font-size: var(--fs-meta); }
  .post__name, .post__when, .post__flair { margin-top: 0; }
  .article-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .article-row__read, .article-row__date { text-align: left; line-height: var(--lh-tiny); }
  .profile-head { grid-template-columns: var(--s6) minmax(0, 1fr); }
  .profile-head .avatar { width: var(--s6); height: var(--s6); font-size: var(--fs-h3); }
  .page { padding-block: var(--s5) var(--s7); }
  .hero { padding-block: var(--s6) var(--s5); }
}

@media (max-width: 420px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metric { border-right: 0; }
  .metric:nth-last-child(-n+2) { border-bottom: var(--border) solid var(--line); }
  .metric:last-child { border-bottom: 0; }
}

/* ---------- impressão ---------- */
@media print {
  .masthead, .footer, .side, .post__actions, .form { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- utilitários de composição ----------
   Existem para que nenhum template precise de atributo style="" inline: sem
   inline style, o Content-Security-Policy pode recusar 'unsafe-inline' inteiro.
   Todos os valores saem dos mesmos tokens da grade, nunca de números soltos. */
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }

.row        { display: flex; gap: var(--s1); flex-wrap: wrap; }
.row--inline { display: inline-flex; }

.measure  { max-width: var(--measure); }
.narrow   { max-width: 400px; margin-inline: auto; }
.center   { text-align: center; }
.min0     { min-width: 0; }
.plain    { font-weight: 400; }
.accent   { color: var(--accent); }

.divided  { padding-top: var(--s5); border-top: var(--border) solid var(--line); }
.divided--spaced { margin-top: var(--s6); padding-top: var(--s5); border-top: var(--border) solid var(--line); }

.form__actions--stacked { flex-direction: column; align-items: stretch; }

.page-head--compact h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.empty--bare { border: 0; }

/* medidor segmentado: dez células, sem largura calculada em tempo de render */
.battery__cells { display: flex; gap: 2px; }
.battery__cell {
  width: var(--s1); height: var(--s2);
  border-radius: 1px;
  background: var(--surface-2);
  border: var(--border) solid var(--line);
}
.battery__cell[data-on="1"] { background: var(--accent); border-color: var(--accent); }