:root {
color-scheme: light;
--face-obra:  "Newsreader", "Newsreader Fallback", ui-serif, Georgia, "Times New Roman", serif;
--face-fluxo: "IBM Plex Sans", "IBM Plex Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--face-dado:  "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SFMono-Regular", Consolas, monospace;
--step--2: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem);
--step--1: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
--step-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem);
--step-1:  clamp(1.1875rem, 1.13rem + 0.28vw, 1.3125rem);
--step-2:  clamp(1.375rem, 1.28rem + 0.47vw, 1.625rem);
--step-3:  clamp(1.625rem, 1.46rem + 0.82vw, 2.125rem);
--step-4:  clamp(2rem, 1.7rem + 1.5vw, 2.875rem);
--step-5:  clamp(2.5rem, 1.98rem + 2.6vw, 4rem);
--leading-tight:   1.12;
--leading-snug:    1.28;
--leading-normal:  1.45;
--leading-relaxed: 1.68;
--tracking-tight:  -0.018em;
--tracking-normal: 0;
--tracking-wide:   0.02em;
--tracking-kicker: 0.09em;
--weight-regular:  400;
--weight-medium:   500;
--weight-semibold: 600;
--weight-bold:     700;
--measure:       68ch;
--measure-lead:  56ch;
--measure-short: 44ch;
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs:  0.75rem;
--space-s:   1rem;
--space-m:   1.5rem;
--space-l:   2rem;
--space-xl:  3rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--width-prose: 42rem;
--width-page:  76rem;
--width-wide:  90rem;
--paper:         #ffffff;
--paper-raised:  #ffffff;
--paper-sunken:  #f6f6f7;
--paper-invert:  #18181b;
--ink:           #18181b;
--ink-muted:     #52525b;
--ink-faint:     #71717a;
--ink-invert:    #ffffff;
--rule:          #e4e4e7;
--rule-strong:   #d4d4d8;
--marca:       #0d47a1;
--marca-forte: #0a3880;
--marca-clara: #e8f0fb;
--marca-texto: #ffffff;
--acao:        #c2410c;
--acao-forte:  #9a3412;
--acao-clara:  #fff3ec;
--acao-texto:  #ffffff;
--capa-fundo:  #0a2540;
--capa-traco:  #3f6f9e;
--capa-texto:       #ffffff;
--capa-texto-suave: #d7e6f5;
--capa-texto-fraco: #9dc0e6;
--acento-ink:  #0d47a1;
--acento-mark: #0d47a1;
--acento-wash: var(--marca-clara);
--v-chega-ink:      #146332;   --v-chega-wash:      #eefbf1;
--v-caminho-ink:    #7d4a0a;   --v-caminho-wash:    #fdf6e3;
--v-nao-chega-ink:  #b91c1c;   --v-nao-chega-wash:  #fef2f2;
--v-sem-efeito-ink: #52525b;   --v-sem-efeito-wash: #f4f4f5;
--live:          #146332;
--live-wash:     #eefbf1;
--focus:         #2563eb;
--accent-ink:  var(--acento-ink);
--accent-mark: var(--acento-mark);
--accent-wash: var(--acento-wash);
--codigo-fundo:  #111827;
--codigo-cabeca: #0b1220;
--codigo-texto:  #e5e7eb;
--codigo-fraco:  #9ca3af;
--codigo-ok:     #4ade80;
--codigo-traco:  #1f2937;
--radius-xs: 2px;
--radius-s:  4px;
--radius-m:  8px;
--radius-pill: 999px;
--border-hair: 1px solid var(--rule);
--border-firm: 1px solid var(--rule-strong);
--border-mark: 2px solid var(--ink);
--shadow-raised: 0 1px 2px rgb(24 24 27 / 0.04), 0 4px 12px rgb(24 24 27 / 0.04);
--ease: cubic-bezier(0.2, 0, 0, 1);
--duration: 160ms;
}
:root[data-theme="dark"] {
color-scheme: dark;
--codigo-fundo:  #0b0f17;
--codigo-cabeca: #060910;
--codigo-traco:  #1a2230;
--paper:        #0d0d0f;
--paper-raised: #18181b;
--paper-sunken: #0b0b0d;
--paper-invert: #fafafa;
--ink:          #fafafa;
--ink-muted:    #a1a1aa;
--ink-faint:    #8b8b96;
--ink-invert:   #111113;
--rule:         #27272a;
--rule-strong:  #3f3f46;
--marca:       #6f9df3;
--marca-forte: #8fb5f7;
--marca-clara: #16233d;
--marca-texto: #ffffff;
--acao:        #f97316;
--acao-forte:  #fb8b3c;
--acao-clara:  #2a1509;
--acao-texto:  #1a0f06;
--capa-fundo:  #071a2c;
--capa-traco:  #35608c;
--capa-texto:       #ffffff;
--capa-texto-suave: #cddff0;
--capa-texto-fraco: #8fb4dc;
--acento-ink:  #8ab4f8;
--acento-mark: #8ab4f8;
--acento-wash: var(--marca-clara);
--v-chega-ink:      #4ade80;   --v-chega-wash:      #0d2018;
--v-caminho-ink:    #eab308;   --v-caminho-wash:    #221c07;
--v-nao-chega-ink:  #f87171;   --v-nao-chega-wash:  #2a1212;
--v-sem-efeito-ink: #a1a1aa;   --v-sem-efeito-wash: #18181b;
--live:        #4ade80;
--live-wash:   #0d2018;
--focus:       #93b4fd;
--border-mark: 2px solid var(--ink);
--shadow-raised: 0 1px 2px rgb(0 0 0 / 0.5), 0 4px 14px rgb(0 0 0 / 0.35);
}
@font-face {
font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
src: url("/fontes/newsreader-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
src: url("/fontes/newsreader-latin-italic.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
src: url("/fontes/plex-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/fontes/plex-mono-latin-400.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
src: url("/fontes/plex-mono-latin-500.woff2") format("woff2");
}
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 90.8%; ascent-override: 80.95%; descent-override: 29.18%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Marca Fallback"; src: local("Georgia"); size-adjust: 95.5%; ascent-override: 77%; descent-override: 27.7%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial"); size-adjust: 100.6%; ascent-override: 101.9%; descent-override: 27.33%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Mono Fallback"; src: local("Consolas"); size-adjust: 109.13%; ascent-override: 93.92%; descent-override: 25.20%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--space-2xl);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
background: var(--paper);
color: var(--ink);
font-family: var(--face-fluxo);
font-size: var(--step-0);
line-height: var(--leading-normal);
font-synthesis-weight: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4 {
font-family: var(--face-obra);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: var(--leading-snug); }
h4 { font-size: var(--step-1); line-height: var(--leading-snug); }
h5, h6 {
font-family: var(--face-fluxo);
font-size: var(--step--1);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
line-height: var(--leading-normal);
}
a {
color: inherit;
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: var(--rule-strong);
transition: color var(--duration) var(--ease),
text-decoration-color var(--duration) var(--ease);
}
a:hover {
color: var(--acento-ink);
text-decoration-color: currentColor;
}
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
hr {
border: 0;
border-top: var(--border-hair);
margin-block: var(--space-l);
}
::selection {
background: var(--acento-wash);
color: var(--acento-ink);
}
small { font-size: var(--step--1); }
code, kbd, samp, pre {
font-family: var(--face-dado);
font-size: 0.92em;
font-variant-ligatures: none;
}
table {
border-collapse: collapse;
width: 100%;
font-size: var(--step--1);
}
th, td {
text-align: left;
padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
border-bottom: var(--border-hair);
vertical-align: baseline;
}
th {
font-weight: var(--weight-semibold);
color: var(--ink-muted);
font-size: var(--step--2);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.obra {
font-family: var(--face-obra);
font-size: var(--step-1);
line-height: var(--leading-relaxed);
letter-spacing: var(--tracking-normal);
max-width: var(--measure);
}
.obra > * + * { margin-block-start: var(--space-m); }
.obra > h2 { margin-block-start: var(--space-xl); font-size: var(--step-2); }
.obra > h3 { margin-block-start: var(--space-l); font-size: var(--step-1); }
.obra > .lead {
font-size: var(--step-2);
line-height: var(--leading-snug);
color: var(--ink-muted);
max-width: var(--measure-lead);
}
.obra blockquote {
border-inline-start: var(--border-mark);
padding-inline-start: var(--space-m);
color: var(--ink-muted);
font-style: italic;
}
.obra ul, .obra ol { padding-inline-start: var(--space-m); }
.obra li + li { margin-block-start: var(--space-2xs); }
.fluxo {
font-family: var(--face-fluxo);
font-size: var(--step-0);
line-height: var(--leading-normal);
}
.u-fluxo  { font-family: var(--face-fluxo); letter-spacing: var(--tracking-normal); }
.u-obra   { font-family: var(--face-obra); }
.u-dado   { font-family: var(--face-dado); font-variant-numeric: tabular-nums; }
.u-muted  { color: var(--ink-muted); }
.u-faint  { color: var(--ink-faint); }
.u-measure { max-width: var(--measure); }
.u-visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.wrap {
width: min(100% - var(--gutter) * 2, var(--width-page));
margin-inline: auto;
}
.wrap--prose { width: min(100% - var(--gutter) * 2, var(--width-prose)); }
main.wrap { container-type: inline-size; }
.scroll-x { overflow-x: auto; overscroll-behavior-inline: contain; }
@media print {
.navbar, .rodape, .lista, form, .botao-acao, #tema, .faixa-relogio, .filtro, .u-visually-hidden,
.dateline, .parceiro, .autores-faixa, .autor-card--convite { display: none !important; }
body { background: white; color: black; font-size: 11pt; line-height: 1.45; }
.wrap { width: auto; max-width: none; }
main { padding-block: 0 !important; }
.peca__corpo { display: block; }
.peca__ficha { display: block; margin-block-start: 1.5rem; }
.peca__arte.arte { inline-size: auto; margin-inline: 0; }
.arte, .destaque__arte { max-block-size: 70mm; }
.arte img, .arte svg { max-block-size: 70mm; object-fit: contain; }
a { color: inherit; text-decoration: none; }
.obra a[href^="http"]::after, .fonte-caixa a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
.card, .linha, .evento, .termo { break-inside: avoid; }
h1, h2, h3 { break-after: avoid; }
}
.marca-simbolo { display: inline-block; flex: none; }
.m-anel      { fill: none; stroke: var(--marca); stroke-width: 3.2; }
.m-varredura { fill: var(--marca); opacity: .14; }
.m-raio      { stroke: var(--marca); stroke-width: 3.2; stroke-linecap: round; }
.m-ponto     { fill: var(--acao); }
.m-centro    { fill: var(--marca); }
.cabecalho { border-block-start: 3px solid var(--acao); }
.dateline {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--space-2xs) var(--space-m);
padding-block: var(--space-2xs);
border-block-end: var(--border-hair);
font-family: var(--face-fluxo);
font-size: var(--step--2);
color: var(--ink-faint);
}
.dateline__data { color: var(--ink-muted); font-family: var(--face-dado); font-variant-numeric: tabular-nums; }
.dateline__nota { letter-spacing: var(--tracking-wide); }
.dateline__link { text-decoration: none; color: var(--ink-faint); letter-spacing: var(--tracking-kicker); text-transform: uppercase; }
.dateline__link:hover { color: var(--marca); }
@media (max-width: 40rem) { .dateline__nota { display: none; } }
.marca {
text-align: center;
padding-block: var(--space-xl) var(--space-m);
}
.marca__lockup {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-2xs) var(--space-s);
text-decoration: none;
color: inherit;
max-width: 100%;
}
.marca__nome {
font-family: "Newsreader", "Newsreader Marca Fallback", ui-serif, Georgia, serif;
font-size: clamp(1.6rem, 1rem + 3.2vw, 3.2rem);
font-weight: var(--weight-bold);
letter-spacing: -0.022em;
line-height: 1;
color: var(--marca);
}
.marca__nome-fino { font-weight: var(--weight-regular); }
.marca__lockup:hover .marca__nome { color: var(--marca-forte); }
.marca__linha {
font-family: var(--face-fluxo);
font-size: var(--step--1);
color: var(--ink-muted);
margin-block-start: var(--space-s);
text-wrap: balance;
}
.marca__regua {
block-size: 0;
border-block-start: 2px solid var(--marca);
border-block-end: 1px solid var(--marca);
padding-block-start: 2px;
}
.navbar {
position: sticky; top: 0; z-index: 20;
background: color-mix(in srgb, var(--paper) 94%, transparent);
backdrop-filter: blur(10px);
border-block-end: 1px solid var(--rule);
}
.navbar__linha {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: var(--space-2xs) var(--space-l);
font-family: var(--face-fluxo);
font-size: var(--step--1);
padding-block: var(--space-2xs);
}
.navbar a {
text-decoration: none; color: var(--ink-muted);
padding-block: var(--space-2xs);
border-bottom: 3px solid transparent;
margin-block-end: -1px;
transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.navbar a:hover { color: var(--marca); }
.navbar a[aria-current] { color: var(--ink); font-weight: var(--weight-bold); border-bottom-color: var(--acao); }
.navbar__sep { inline-size: 1px; block-size: 1rem; background: var(--rule-strong); }
.navbar__secundario { color: var(--ink-faint); font-size: var(--step--2); }
.navbar__secundario:hover { color: var(--marca); }
.navbar__acao { margin-inline-start: var(--space-m); }
@media (max-width: 63.99rem) {
.navbar__acao { flex-basis: 100%; display: flex; justify-content: center; margin-inline-start: 0; }
}
.navbar__acao .botao-acao { border-bottom: 0; margin-block-end: 0; }
.navbar__tema {
display: inline-flex; align-items: center; gap: var(--space-3xs);
padding: var(--space-3xs) var(--space-xs);
border: var(--border-hair);
border-radius: var(--radius-pill);
background: none;
color: var(--ink-muted);
font-family: var(--face-fluxo);
font-size: var(--step--2);
cursor: pointer;
transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.navbar__tema:hover { color: var(--marca); border-color: var(--marca); }
.tema-icone { display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.tema-icone__lua { fill: currentColor; stroke: none; }
.tema-icone__sol { display: none; }
:root[data-theme="dark"] .tema-icone__sol { display: block; }
:root[data-theme="dark"] .tema-icone__lua { display: none; }
.botao-acao {
display: inline-flex; align-items: center; gap: var(--space-2xs);
background: var(--acao);
color: var(--acao-texto);
font-family: var(--face-fluxo);
font-size: var(--step--1);
font-weight: var(--weight-semibold);
padding: var(--space-2xs) var(--space-s);
border-radius: var(--radius-s);
text-decoration: none;
transition: background-color var(--duration) var(--ease);
}
.botao-acao:hover { background: var(--acao-forte); color: var(--acao-texto); }
.navbar .botao-acao, .navbar .botao-acao:hover { color: var(--acao-texto); }
.botao-secundario {
display: inline-flex; align-items: center; gap: var(--space-2xs);
border: 1px solid var(--marca);
color: var(--marca);
font-family: var(--face-fluxo);
font-size: var(--step--1);
font-weight: var(--weight-semibold);
padding: var(--space-3xs) var(--space-s);
border-radius: var(--radius-s);
text-decoration: none;
}
.botao-secundario:hover { background: var(--marca-clara); color: var(--marca-forte); }
.kicker {
display: inline-flex; align-items: center; gap: var(--space-2xs);
font-family: var(--face-fluxo);
font-size: var(--step--2);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-kicker);
text-transform: uppercase;
color: var(--marca);
text-decoration: none;
}
.kicker::before { content: ""; inline-size: 1.75rem; block-size: 2px; background: var(--marca); flex: none; }
.kicker--dot::before { inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-pill); }
.etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-s); }
.selo {
display: inline-flex; align-items: center; gap: var(--space-3xs);
padding: 0.15rem var(--space-2xs);
border-radius: var(--radius-s);
font-family: var(--face-fluxo);
font-size: var(--step--2);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
line-height: 1.4;
white-space: nowrap;
}
.selo--tema     { background: var(--paper-sunken); color: var(--ink-muted); }
.selo--original { border: var(--border-hair); color: var(--ink-muted); font-family: var(--face-dado); }
.veredito {
display: inline-flex; align-items: center; gap: var(--space-2xs);
padding: 0.2rem var(--space-2xs) 0.2rem var(--space-3xs);
border-radius: var(--radius-s);
font-family: var(--face-fluxo);
font-size: var(--step--2);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
background: var(--v-wash);
color: var(--v-ink);
white-space: nowrap;
}
.veredito::before { content: ""; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 2px; background: var(--v-ink); flex: none; }
.v-chega      { --v-ink: var(--v-chega-ink);      --v-wash: var(--v-chega-wash); }
.v-a_caminho  { --v-ink: var(--v-caminho-ink);    --v-wash: var(--v-caminho-wash); }
.v-nao_chega  { --v-ink: var(--v-nao-chega-ink);  --v-wash: var(--v-nao-chega-wash); }
.v-sem_efeito { --v-ink: var(--v-sem-efeito-ink); --v-wash: var(--v-sem-efeito-wash); }
.grade-vereditos { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.veredito-explicado p { font-size: var(--step--1); color: var(--ink-muted); margin-block-start: var(--space-2xs); }
.selo-publi {
display: inline-flex; align-items: center;
padding: 0.15rem var(--space-2xs);
border-radius: var(--radius-s);
background: var(--paper-invert);
color: var(--ink-invert);
font-family: var(--face-fluxo);
font-size: var(--step--2);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
line-height: 1.4;
}
.linha .selo-publi { margin-block-start: var(--space-3xs); }
.publi-caixa {
border: var(--border-firm);
border-inline-start: 3px solid var(--ink);
border-radius: 0 var(--radius-s) var(--radius-s) 0;
background: var(--paper-sunken);
padding: var(--space-s) var(--space-m);
margin-block: var(--space-m);
max-width: var(--measure);
}
.publi-caixa__rotulo {
font-family: var(--face-fluxo);
font-size: var(--step--2);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--ink);
margin: 0 0 var(--space-3xs);
}
.publi-caixa__texto { font-size: var(--step--1); color: var(--ink-muted); margin: 0; }
.publi-caixa__texto strong { color: var(--ink); }
.assinatura {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--space-2xs) var(--space-s);
font-family: var(--face-fluxo);
font-size: var(--step--1);
color: var(--ink-muted);
}
.assinatura__autor { font-weight: var(--weight-semibold); color: var(--ink); }
a.assinatura__autor { text-decoration-color: var(--rule-strong); }
a.assinatura__autor:hover { color: var(--marca); }
.assinatura__fonte { display: inline-flex; align-items: baseline; gap: var(--space-2xs); }
.assinatura__fonte .selo { align-self: center; }
.arte {
overflow: hidden;
border-radius: var(--radius-m);
background: var(--capa-fundo);
aspect-ratio: 16 / 9;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.arte svg { display: block; inline-size: 100%; block-size: 100%; }
.arte--foto { position: relative; margin: 0; }
.arte--foto img {
display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
transition: transform 600ms var(--ease);
}
.arte__credito {
position: absolute; inset-inline-end: var(--space-2xs); inset-block-end: var(--space-2xs);
padding: 0.15rem var(--space-2xs);
border-radius: var(--radius-xs);
background: color-mix(in srgb, var(--capa-fundo) 78%, transparent);
color: var(--capa-texto-suave);
font-family: var(--face-fluxo);
font-size: var(--step--2);
line-height: 1.3;
}
.a-fundo  { fill: var(--capa-fundo); }
.a-malha  { stroke: var(--capa-traco); stroke-width: 1; fill: none; opacity: .35; }
.a-traco  { stroke: var(--capa-texto-suave); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.a-traco-pontilhado { stroke: var(--capa-texto-fraco); stroke-width: 3; stroke-dasharray: 8 10; fill: none; stroke-linecap: round; }
.a-claro  { fill: var(--capa-texto-fraco); }
.a-gesto  { stroke: var(--capa-texto-fraco); stroke-width: 3; fill: none; stroke-dasharray: 6 8; stroke-linecap: round; }
.a-acao   { fill: var(--acao); }
.a-acao-t { stroke: var(--acao); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.a-gesto-acao { stroke: var(--acao); stroke-width: 3.5; fill: none; stroke-linecap: round; }
.capa-gerada { display: block; inline-size: 100%; block-size: 100%; }
.capa-gerada .f { fill: var(--capa-fundo); }
.capa-gerada .t { stroke: var(--capa-traco); stroke-width: 1.25; fill: none; }
.capa-gerada .t circle { fill: var(--capa-traco); stroke: none; }
.capa-gerada .a { stroke: var(--acao); stroke-width: 2.25; fill: none; }
.capa-gerada .q { fill: var(--acao); stroke: none; }
.moldura-capa { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-s); background: var(--capa-fundo); }
.parceiro {
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: var(--space-s) var(--space-l);
padding-block: var(--space-s);
margin-block-end: var(--space-xl);
border-block: var(--border-hair);
font-family: var(--face-fluxo);
}
@media (max-width: 48rem) { .parceiro { grid-template-columns: 1fr; gap: var(--space-2xs); } }
.parceiro__rotulo {
font-size: var(--step--2); font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-kicker); text-transform: uppercase;
color: var(--ink-faint);
padding-inline-end: var(--space-l);
border-inline-end: var(--border-hair);
}
@media (max-width: 48rem) { .parceiro__rotulo { border: 0; padding: 0; } }
.parceiro__corpo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3xs) var(--space-m); margin: 0; text-decoration: none; color: inherit; }
.parceiro__logo { block-size: 2.25rem; inline-size: auto; }
.parceiro__nome { font-family: var(--face-obra); font-size: var(--step-0); font-weight: var(--weight-semibold); color: var(--ink); }
.parceiro__frase { font-size: var(--step--1); color: var(--ink-muted); }
a.parceiro__corpo:hover .parceiro__nome { color: var(--marca); }
.parceiro__acao { font-size: var(--step--1); color: var(--marca); text-decoration-color: var(--marca-clara); white-space: nowrap; }
.parceiro__acao::after { content: " →"; }
.destaque {
display: grid;
gap: var(--space-l);
align-items: center;
padding-block-end: var(--space-2xl);
border-block-end: var(--border-hair);
}
@media (min-width: 56rem) {
.destaque { grid-template-columns: 7fr 5fr; gap: var(--space-2xl); }
.destaque__texto { border-inline-start: var(--border-hair); padding-inline-start: var(--space-xl); }
}
.destaque__arte { display: block; text-decoration: none; }
.destaque__arte .arte { aspect-ratio: 3 / 2; border-radius: var(--radius-m); box-shadow: var(--shadow-raised), inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.destaque__texto { display: grid; gap: var(--space-m); align-content: center; }
.destaque__titulo {
font-family: var(--face-obra);
font-size: var(--step-4);
font-weight: var(--weight-semibold);
line-height: 1.08;
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.destaque__titulo a { text-decoration: none; }
.destaque__titulo a:hover { color: var(--marca); }
.destaque__lead {
font-family: var(--face-obra);
font-size: var(--step-1);
line-height: var(--leading-snug);
color: var(--ink-muted);
max-width: var(--measure-lead);
}
.grade { display: grid; gap: var(--space-xl) var(--space-l); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); counter-reset: peca; }
.card { display: grid; gap: var(--space-s); align-content: start; position: relative; counter-increment: peca; }
.card::before {
content: counter(peca, decimal-leading-zero);
font-family: var(--face-dado);
font-size: var(--step--2);
letter-spacing: var(--tracking-wide);
color: var(--ink-faint);
padding-block-end: var(--space-2xs);
border-block-end: var(--border-firm);
}
.card__arte { display: block; text-decoration: none; }
.card__texto { display: grid; gap: var(--space-2xs); }
.card__titulo {
font-family: var(--face-obra);
font-size: var(--step-2);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.card__titulo a { text-decoration: none; }
.card__titulo a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__titulo { color: var(--marca); }
.card:hover .arte--foto img { transform: scale(1.025); }
.card__lead { font-size: var(--step--1); color: var(--ink-muted); line-height: var(--leading-normal); }
.card__pe { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); font-size: var(--step--2); color: var(--ink-faint); margin-block-start: var(--space-3xs); }
.card__pe > span:first-child { color: var(--ink-muted); font-weight: var(--weight-medium); }
.linha {
display: grid;
grid-template-columns: 6rem 1fr auto;
gap: var(--space-s) var(--space-m);
align-items: baseline;
padding-block: var(--space-s);
border-block-end: var(--border-hair);
position: relative;
}
@media (max-width: 40rem) { .linha { grid-template-columns: 1fr; gap: var(--space-3xs); } }
.linha__data { font-size: var(--step--2); color: var(--ink-faint); white-space: nowrap; }
.linha__titulo { font-family: var(--face-obra); font-size: var(--step-1); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.linha__titulo a { text-decoration: none; }
.linha__titulo a::after { content: ""; position: absolute; inset: 0; }
.linha:hover .linha__titulo { color: var(--marca); }
.linha__pe { font-size: var(--step--2); color: var(--ink-faint); margin-block-start: var(--space-3xs); }
.peca { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); max-width: 52rem; margin-inline: auto; }
.peca__cabeca { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
.peca__titulo {
font-family: var(--face-obra);
font-size: var(--step-5);
font-weight: var(--weight-semibold);
line-height: 1.04;
letter-spacing: -0.022em;
text-wrap: balance;
}
.peca__lead {
font-family: var(--face-obra);
font-size: var(--step-2);
line-height: var(--leading-snug);
color: var(--ink-muted);
max-width: var(--measure-lead);
}
.peca__arte.arte { aspect-ratio: 21 / 9; }
@supports (inline-size: 100cqi) {
.peca__arte.arte { inline-size: 100cqi; margin-inline: calc(50% - 50cqi); }
}
.peca__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.peca__ficha {
display: grid; gap: var(--space-l);
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
padding-block-start: var(--space-l);
border-block-start: var(--border-hair);
}
.peca__pe { max-width: var(--width-prose); }
.peca .obra > p:first-child::first-letter {
font-family: var(--face-obra);
font-weight: var(--weight-semibold);
font-size: 3.4em;
line-height: 0.8;
float: left;
margin-inline-end: 0.1em;
margin-block-start: 0.08em;
color: var(--marca);
}
.peca .obra > h2::before { content: ""; display: block; inline-size: 2rem; block-size: 2px; background: var(--marca); margin-block-end: var(--space-s); }
.peca .obra > hr { border: 0; text-align: center; margin-block: var(--space-xl); }
.peca .obra > hr::after { content: "· · ·"; letter-spacing: 0.6em; color: var(--ink-faint); font-family: var(--face-obra); }
.fonte-caixa, .veredito-caixa, .autor-caixa {
display: grid; gap: var(--space-2xs);
padding-block: var(--space-s);
border-block-start: 2px solid var(--ink);
font-size: var(--step--1);
}
.fonte-caixa__rotulo {
font-family: var(--face-fluxo);
font-size: var(--step--2);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-kicker);
text-transform: uppercase;
color: var(--ink-faint);
}
.fonte-caixa__nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); font-family: var(--face-obra); font-size: var(--step-1); font-weight: var(--weight-semibold); }
.fonte-caixa__nome a { text-decoration: none; }
.fonte-caixa__nome a:hover { color: var(--marca); }
.fonte-caixa__texto { color: var(--ink-muted); }
.autor-caixa { grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; }
.autor-caixa > div { display: grid; gap: var(--space-2xs); }
.monograma {
display: inline-grid; place-items: center;
inline-size: 3.25rem; block-size: 3.25rem;
border-radius: var(--radius-pill);
background: var(--capa-fundo);
color: var(--capa-texto);
font-family: var(--face-obra);
font-weight: var(--weight-semibold);
font-size: var(--step-1);
letter-spacing: 0.02em;
line-height: 1;
}
.monograma--grande { inline-size: 6rem; block-size: 6rem; font-size: var(--step-4); }
.monograma--convite { background: var(--marca-clara); color: var(--marca); }
.autor__foto { inline-size: 3.25rem; block-size: 3.25rem; border-radius: var(--radius-pill); object-fit: cover; }
.autor__foto--grande { inline-size: 6rem; block-size: 6rem; }
.autores-faixa {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 18rem);
gap: var(--space-m);
overflow-x: auto; overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
padding-block: var(--space-3xs) var(--space-s);
scrollbar-width: thin;
}
.autores-faixa > div { scroll-snap-align: start; display: grid; }
.grade--autores { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-m); }
.autor-card {
display: grid;
border: var(--border-hair);
border-radius: var(--radius-m);
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.autor-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-raised); }
.autor-card__link { display: grid; gap: var(--space-2xs); justify-items: start; padding: var(--space-m); text-decoration: none; color: inherit; block-size: 100%; }
.autor-card__link > .monograma, .autor-card__link > .autor__foto { margin-block-end: var(--space-2xs); }
.autor-card__nome { font-family: var(--face-obra); font-size: var(--step-1); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.autor-card:hover .autor-card__nome { color: var(--marca); }
.autor-card__papel { font-size: var(--step--1); color: var(--ink-muted); line-height: var(--leading-normal); }
.autor-card__pecas { font-size: var(--step--2); color: var(--ink-faint); margin-block-start: var(--space-3xs); }
.autor-card--convite { background: var(--marca-clara); border-color: transparent; }
.perfil { display: grid; gap: var(--space-l); align-items: start; padding-block-end: var(--space-xl); border-block-end: var(--border-hair); }
@media (min-width: 40rem) { .perfil { grid-template-columns: auto 1fr; gap: var(--space-xl); } }
.perfil__texto { display: grid; gap: var(--space-s); }
.perfil__nome { font-size: var(--step-5); letter-spacing: -0.022em; }
.perfil__bio.obra { font-size: var(--step-0); line-height: var(--leading-relaxed); }
.perfil__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-m); font-family: var(--face-fluxo); font-size: var(--step--1); color: var(--ink-muted); }
.perfil__meta strong { color: var(--ink); }
.lista-regras__titulo { font-family: var(--face-fluxo); font-size: var(--step--1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--ink-faint); margin-block-end: var(--space-s); }
.cabeca-secao { display: grid; gap: var(--space-s); padding-block-end: var(--space-xl); }
.cabeca-secao h1 { font-size: var(--step-5); letter-spacing: -0.022em; }
.cabeca-secao__lead { font-family: var(--face-obra); font-size: var(--step-1); color: var(--ink-muted); max-width: var(--measure-lead); line-height: var(--leading-snug); }
.bloco { padding-block-start: var(--space-2xl); }
.bloco--curto { padding-block-start: var(--space-m); }
.duas-colunas { display: grid; gap: var(--space-2xl); }
@media (min-width: 56rem) { .duas-colunas { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } }
.duas-colunas--justas { gap: var(--space-l); }
@media (min-width: 56rem) { .duas-colunas--justas { gap: var(--space-2xl); } }
.secao { display: grid; gap: var(--space-2xs); margin-block-end: var(--space-m); }
.secao__cabeca {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: var(--space-s);
padding-block-end: var(--space-2xs);
border-bottom: 3px double var(--marca);
}
.secao__titulo {
margin: 0; line-height: var(--leading-normal);
font-family: var(--face-fluxo);
font-size: var(--step--1);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-kicker);
text-transform: uppercase;
color: var(--marca);
}
.secao__acao { font-size: var(--step--1); color: var(--ink-muted); }
.secao__nota { font-family: var(--face-fluxo); font-size: var(--step--1); color: var(--ink-muted); max-width: 64ch; line-height: var(--leading-normal); }
.vazio {
padding: var(--space-l) var(--space-m);
border: var(--border-hair);
border-inline-start: 3px solid var(--marca);
border-radius: 0 var(--radius-m) var(--radius-m) 0;
background: var(--marca-clara);
max-width: var(--measure);
}
.vazio__titulo { font-family: var(--face-obra); font-size: var(--step-2); font-weight: var(--weight-semibold); line-height: var(--leading-snug); text-wrap: balance; }
.vazio__texto { font-size: var(--step--1); color: var(--ink-muted); margin-block-start: var(--space-2xs); }
.aviso {
border: var(--border-hair);
border-inline-start: 3px solid var(--marca);
border-radius: 0 var(--radius-s) var(--radius-s) 0;
background: var(--paper-sunken);
padding: var(--space-s) var(--space-m);
font-size: var(--step--1);
color: var(--ink-muted);
max-width: var(--measure);
}
.aviso strong { color: var(--ink); }
.sangra { margin-inline: calc(50% - 50vw); padding-inline: var(--gutter); }
.faixa-relogio {
position: relative;
background-color: var(--capa-fundo);
background-image:
repeating-radial-gradient(circle at 82% 50%,
transparent 0, transparent calc(4.5rem - 1px),
color-mix(in srgb, var(--capa-texto) 9%, transparent) calc(4.5rem - 1px),
color-mix(in srgb, var(--capa-texto) 9%, transparent) 4.5rem);
color: var(--capa-texto);
margin-block-start: var(--space-3xl);
overflow: hidden;
}
.faixa-relogio__miolo { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl); align-items: center; position: relative; }
@media (min-width: 56rem) { .faixa-relogio__miolo { grid-template-columns: 5fr 6fr; gap: var(--space-3xl); } }
.faixa-relogio__kicker {
display: inline-flex; align-items: center; gap: var(--space-2xs);
font-family: var(--face-fluxo); font-size: var(--step--2);
text-transform: uppercase; letter-spacing: var(--tracking-kicker);
color: var(--capa-texto-fraco);
}
.faixa-relogio__kicker::before { content: ""; inline-size: 1.75rem; block-size: 2px; background: var(--acao); }
.faixa-relogio__titulo {
font-family: var(--face-obra);
font-size: var(--step-3);
font-weight: var(--weight-semibold);
line-height: 1.1;
color: var(--capa-texto);
margin-block-start: var(--space-s);
text-wrap: balance;
}
.faixa-relogio__lead { color: var(--capa-texto-suave); margin-block-start: var(--space-m); max-width: 46ch; line-height: var(--leading-normal); }
.faixa-relogio__metodo { color: var(--capa-texto-fraco); margin-block-start: var(--space-s); max-width: 46ch; font-size: var(--step--1); line-height: var(--leading-normal); }
.faixa-relogio__link { display: inline-block; margin-block-start: var(--space-m); color: var(--capa-texto); text-decoration-color: var(--capa-texto-fraco); font-size: var(--step--1); }
.faixa-relogio__link:hover { color: var(--capa-texto); text-decoration-color: var(--acao); }
.faixa-relogio__numeros { display: grid; gap: var(--space-l) var(--space-m); grid-template-columns: repeat(2, 1fr); }
.faixa-relogio .numero { padding-block-start: var(--space-s); border-block-start: 1px solid color-mix(in srgb, var(--capa-texto) 22%, transparent); }
.faixa-relogio .numero__valor { color: var(--capa-texto); }
.faixa-relogio .numero__rotulo { color: var(--capa-texto-fraco); }
.numero { display: grid; gap: var(--space-2xs); align-content: start; }
.numero__valor {
font-family: var(--face-dado);
font-size: var(--step-5);
font-weight: var(--weight-bold);
line-height: 0.95;
font-variant-numeric: tabular-nums;
color: var(--marca);
}
.numero__rotulo {
font-family: var(--face-fluxo);
font-size: var(--step--2);
text-transform: uppercase;
letter-spacing: var(--tracking-kicker);
color: var(--ink-faint);
max-width: 22ch;
line-height: var(--leading-normal);
}
.numero__rotulo a { color: inherit; }
.lista {
position: relative; overflow: hidden;
display: grid; gap: var(--space-l);
padding: var(--space-l) var(--space-m);
border: var(--border-hair);
border-radius: var(--radius-m);
background: var(--marca-clara);
}
@media (min-width: 56rem) { .lista { grid-template-columns: 5fr 6fr; gap: var(--space-2xl); align-items: start; padding: var(--space-xl) var(--space-l); } }
.lista__marca { position: absolute; inset-inline-end: var(--space-m); inset-block-end: -3.5rem; opacity: 0.08; pointer-events: none; }
.lista__marca .marca-simbolo { display: block; }
.lista__texto { position: relative; display: grid; gap: var(--space-s); align-content: start; }
.lista__titulo { font-family: var(--face-obra); font-size: var(--step-2); font-weight: var(--weight-semibold); line-height: var(--leading-snug); text-wrap: balance; }
.lista__nota { color: var(--ink-muted); font-size: var(--step--1); max-width: 48ch; }
.lista__form { position: relative; display: grid; gap: var(--space-s); }
.lista__linha { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.lista__linha .campo { inline-size: auto; flex: 1 1 14rem; }
.lista__linha--opcional { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-s); }
.lista__linha--opcional .campo { inline-size: 100%; flex: none; }
.lista__pe { font-size: var(--step--2); color: var(--ink-muted); max-width: 52ch; }
.lista .u-faint { color: var(--ink-muted); }
.lista__rodape { font-size: var(--step--2); color: var(--ink-muted); }
.evento {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-s) var(--space-m);
padding-block: var(--space-m);
border-bottom: var(--border-hair);
position: relative;
}
.evento__data {
display: grid; place-items: center; align-content: center;
inline-size: 4.5rem;
padding: var(--space-2xs);
border: var(--border-firm);
border-block-start: 4px solid var(--marca);
border-radius: var(--radius-s);
background: var(--paper-raised);
font-family: var(--face-dado);
line-height: 1.1;
text-align: center;
}
.evento__dia { font-size: var(--step-2); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.evento__mes { font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--marca); }
.evento__ano { font-size: var(--step--2); color: var(--ink-faint); }
.evento__corpo { display: grid; gap: var(--space-3xs); align-content: start; }
.evento__nome { font-family: var(--face-obra); font-size: var(--step-1); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.evento__nome a { text-decoration: none; }
.evento__nome a::after { content: ""; position: absolute; inset: 0; }
.evento:hover .evento__nome { color: var(--marca); }
.evento__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); font-size: var(--step--1); color: var(--ink-muted); }
.filtro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); padding-block: var(--space-s); border-bottom: var(--border-hair); }
.filtro__rotulo { font-size: var(--step--2); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--ink-faint); margin-inline-end: var(--space-2xs); }
.pilula {
display: inline-flex; align-items: center; gap: var(--space-3xs);
padding: var(--space-3xs) var(--space-xs);
border: var(--border-hair);
border-radius: var(--radius-pill);
font-size: var(--step--1);
color: var(--ink-muted);
background: none;
text-decoration: none;
cursor: pointer;
transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.pilula:hover { border-color: var(--rule-strong); color: var(--ink); }
.pilula[aria-current="true"] { background: var(--marca-clara); border-color: var(--marca); color: var(--marca); font-weight: var(--weight-medium); }
.campo {
inline-size: 100%;
padding: var(--space-2xs) var(--space-xs);
border: var(--border-firm);
border-radius: var(--radius-s);
background: var(--paper-raised);
color: var(--ink);
font-family: var(--face-fluxo);
font-size: var(--step-0);
line-height: var(--leading-normal);
transition: border-color var(--duration) var(--ease);
}
.campo:hover { border-color: var(--marca); }
.campo::placeholder { color: var(--ink-faint); }
textarea.campo { resize: vertical; min-block-size: 4.5rem; }
.campo-rotulo { display: grid; gap: var(--space-3xs); }
.campo-rotulo > span { font-size: var(--step--1); font-weight: var(--weight-medium); }
.campo-rotulo em { font-style: normal; font-weight: var(--weight-regular); }
.campo-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-s); }
.termo { display: grid; gap: var(--space-3xs); padding-block: var(--space-s); border-bottom: var(--border-hair); }
.termo__par { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs); }
.termo__origem { font-family: var(--face-dado); font-size: var(--step-0); color: var(--ink-muted); }
.termo__seta { color: var(--ink-faint); }
.termo__pt { font-family: var(--face-obra); font-size: var(--step-1); font-weight: var(--weight-semibold); }
.termo__nota { font-size: var(--step--1); color: var(--ink-muted); max-width: var(--measure); }
.termo__travado { font-size: var(--step--2); color: var(--marca); font-family: var(--face-dado); }
.rodape { border-block-start: 3px double var(--marca); padding-block: var(--space-2xl) var(--space-l); font-size: var(--step--1); color: var(--ink-muted); }
.rodape__grade { display: grid; gap: var(--space-xl); }
@media (min-width: 56rem) { .rodape__grade { grid-template-columns: 1fr 1.4fr; gap: var(--space-3xl); } }
.rodape__marca { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--marca); font-family: var(--face-obra); font-weight: var(--weight-bold); font-size: var(--step-1); }
.rodape__texto { margin-block-start: var(--space-s); max-width: 52ch; line-height: var(--leading-normal); }
.rodape__colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-l); }
.rodape__colunas > div { display: grid; gap: var(--space-2xs); align-content: start; }
.rodape__colunas a { text-decoration: none; color: var(--ink-muted); }
.rodape__colunas a:hover { color: var(--marca); }
.rodape__rotulo { font-family: var(--face-fluxo); font-size: var(--step--2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--ink-faint); margin-block-end: var(--space-3xs); }
.rodape__pe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s); margin-block-start: var(--space-xl); padding-block-start: var(--space-m); border-block-start: var(--border-hair); font-size: var(--step--2); color: var(--ink-faint); }
.rodape__colofao { font-family: var(--face-dado); }
@view-transition { navigation: auto; }
.prancha { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.prancha__caixa {
display: grid; gap: var(--space-s); align-content: start;
padding: var(--space-l); border: 1px solid var(--rule); border-radius: var(--radius-m);
background: var(--paper);
}
.prancha__caixa--escura { background: var(--capa-fundo); border-color: transparent; color: var(--capa-texto-suave); }
.prancha__caixa--larga { grid-column: 1 / -1; }
.prancha__caixa img, .prancha__caixa svg { display: block; max-inline-size: 100%; block-size: auto; }
.prancha__legenda { font-family: var(--face-fluxo); font-size: var(--step--1); color: var(--ink-muted); }
.prancha__caixa--escura .prancha__legenda { color: var(--capa-texto-suave); }
.prancha__mono { color: var(--ink); }
.tamanhos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-l); }
.tamanhos > figure { margin: 0; display: grid; gap: var(--space-2xs); justify-items: center; }
.tamanhos figcaption { font-family: var(--face-dado); font-size: var(--step--2); color: var(--ink-faint); }
.amostras { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.amostra { display: grid; gap: var(--space-2xs); }
.amostra__cor { block-size: 4.5rem; border-radius: var(--radius-s); border: 1px solid var(--rule); }
.amostra__nome { font-family: var(--face-fluxo); font-size: var(--step--1); font-weight: var(--weight-medium); }
.amostra__hex { font-family: var(--face-dado); font-size: var(--step--2); color: var(--ink-muted); }
.regras { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); padding: 0; }
.regras li { list-style: none; padding-inline-start: var(--space-m); border-inline-start: 2px solid var(--marca); font-size: var(--step--1); color: var(--ink-muted); line-height: var(--leading-normal); }
.regras li strong { display: block; font-family: var(--face-fluxo); color: var(--ink); margin-block-end: var(--space-3xs); }
@media (pointer: coarse) {
.rodape__colunas a, .secao__acao a, .secao__nota a, .evento__nome a, .lista li a, .card__pe a, .linha__pe a,
.assinatura a, .fonte-caixa a, .autor-caixa a, .termo__nota a, .cabeca-secao__lead a, .aviso a, .vazio a,
.parceiro__acao, .dateline__link, .perfil__meta a {
display: inline-block; padding-block: 0.375rem; margin-block: -0.375rem;
}
.rodape__colunas a { margin-block: 0; }
}
.tour { margin: 0; display: grid; gap: var(--space-s); }
.tour__video { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; background: var(--capa-fundo); border-radius: var(--radius-m); }
.tour__legenda { font-family: var(--face-fluxo); font-size: var(--step--1); color: var(--ink-muted); max-inline-size: var(--measure); }