@font-face{font-family:Faustina;font-style:normal;font-weight:300 400;font-display:swap;src:url(fonts/faustina.woff2) format("woff2")}
@font-face{font-family:Geist;font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist.woff2) format("woff2")}
/* seuimposto.com/status: the night of the 1st round in numbers. The site's own language (eleicoes/DESIGN.md §2): warm black floor,
   glass cards with hairlines, ivory as the only highlight, Faustina for figures, Geist for everything else. Data is drawn in five
   ivory tones, as in the site's "Apurado" reading; party red and blue never appear, since on this site they mean Lula and Flávio.
   Few words: each section is a short title and a component (figures, a comparison, a list), never a paragraph.
   Layout: one centred column of 1120. Every row that wraps (figures, legend, quotes, posts) fills its last line, so no card is ever
   left alone beside a hole; hairlines between figures hold at any wrap. Breakpoints: 980 (the section links go), 860 (tables
   become cards, the hero stays two columns), 680 (the hero centres in one column), 420 (one card per row). */
:root {
  color-scheme: dark;
  --bg: #0F0E0D;
  --panel: #151412;
  --panel-2: #1B1A17;
  --panel-3: #22201D;
  --glass: rgba(21, 20, 18, .84);
  --line: rgba(250, 250, 249, .08);
  --line-2: rgba(250, 250, 249, .16);
  --line-3: rgba(250, 250, 249, .25);
  --fg: #FAFAF9;
  --fg-2: #D6D4CF;
  --fg-3: #A6A39C;
  --fg-4: #85827C;
  --tone-1: #FAFAF9;
  --tone-2: #CFCAC0;
  --tone-3: #A39E94;
  --tone-4: #77736B;
  --tone-5: #4E4B46;
  --youtube: #FF4E45;
  --twitch: #A970FF;
  --kick: #53FC18;
  --serif: 'Faustina', Georgia, 'Times New Roman', serif;
  --sans: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --gutter: 24px;
  --gap: 14px;
}
* { box-sizing: border-box }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100% }
body {
  margin: 0; color: var(--fg); background: var(--bg);
  background-image: radial-gradient(1200px 700px at 72% -10%, #1c1a16 0%, rgba(15, 14, 13, 0) 65%);
  font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: var(--fg); text-decoration-color: var(--line-3); text-underline-offset: 3px; transition: text-decoration-color 120ms var(--ease) }
a:hover { text-decoration-color: var(--fg) }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 6px }
b, strong { font-weight: 600; color: var(--fg) }
.tn { font-variant-numeric: tabular-nums }
img { max-width: 100% }
[hidden] { display: none !important }
.dim { color: var(--fg-3); font-weight: 400 }

/* ---------- the Pandora line and the bar on top, as the site's PandoraBar and HudTop ---------- */
.pbar { display: block; text-align: center; font: 500 12px/1.4 var(--sans); color: var(--fg-2); background: var(--panel-2); border-bottom: 1px solid var(--line); padding: 8px var(--gutter); text-decoration: none; text-wrap: balance }
.pbar u { color: var(--fg); text-decoration-color: var(--line-3); text-underline-offset: 3px }
.pbar:hover u { text-decoration-color: var(--fg) }
.top { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: rgba(15, 14, 13, .82); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); border-bottom: 1px solid var(--line) }
.top-in { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); height: 58px; display: flex; align-items: center; gap: 20px }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; min-width: 0 }
.brand > a.mark { display: inline-flex; align-items: center; color: var(--fg); padding: 6px 0 }
.brand > a.mark svg { height: 22px; width: auto; display: block }
.brand > a.mark:hover { color: var(--fg-2) }
.byp { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-3); text-decoration: none; font: 500 12px/1 var(--sans) }
.byp svg { height: 17px; width: auto; display: block }
.byp:hover { color: var(--fg) }
.soc { display: inline-flex; align-items: center; gap: 2px; padding-left: 8px; border-left: 1px solid var(--line) }
.soc a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--fg-3) }
.soc a:hover { color: var(--fg) }
.soc svg { width: 15px; height: 15px; display: block }
nav.sec { display: flex; gap: 2px; margin-left: auto; min-width: 0 }
nav.sec a { color: var(--fg-3); text-decoration: none; font: 500 13px/1 var(--sans); padding: 9px 11px; border-radius: 999px; white-space: nowrap; transition: background-color 120ms var(--ease), color 120ms var(--ease) }
nav.sec a:hover, nav.sec a.on { color: var(--fg); background: var(--panel-3) }
.top-acts { display: flex; align-items: center; gap: 8px; margin-left: 4px; flex: none }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(21, 20, 18, .6); color: var(--fg); text-decoration: none; font: 500 13.5px/1 var(--sans); white-space: nowrap; flex: none; cursor: pointer; transition: background-color 120ms var(--ease), border-color 120ms var(--ease) }
.btn:hover { background: var(--panel-2); border-color: var(--line-3) }
.btn i { width: 7px; height: 7px; border-radius: 999px; background: var(--fg); flex: none }
.btn.solid { background: var(--fg); color: #15130f; border-color: var(--fg) }
.btn.solid:hover { background: #E7E4DE }
.btn.solid i { background: #15130f }

/* ---------- type and frame ---------- */
main { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); padding-block: 0 88px }
.kicker { font: 500 12.5px/1.3 var(--sans); color: var(--fg-3); display: flex; align-items: center; gap: 8px }
.kicker i { width: 7px; height: 7px; border-radius: 999px; background: var(--fg); flex: none }
h1 { font: 300 clamp(34px, 4.4vw, 50px)/1.06 var(--serif); letter-spacing: -.015em; margin: 14px 0 12px; text-wrap: balance }
h2 { font: 400 clamp(23px, 2.5vw, 29px)/1.15 var(--serif); letter-spacing: -.005em; margin: 6px 0 18px; text-wrap: balance }
h3 { font: 500 14.5px/1.35 var(--sans); margin: 0 0 14px; color: var(--fg) }
h3.sub { font: 400 21px/1.2 var(--serif); margin: 40px 0 14px }
.pc { background: var(--pc, var(--tone-4)) }
p { margin: 0; color: var(--fg-2) }
.lead { font-size: 17px; line-height: 1.5; color: var(--fg-2) }
section { margin-top: 84px; scroll-margin-top: 76px }
.card { background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: 20px; min-width: 0 }
.foot-note { font-size: 13px; line-height: 1.5; color: var(--fg-4); margin-top: 12px }
.mt { margin-top: var(--gap) }
.mt2 { margin-top: 36px }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap) }

/* ---------- hero: the words and the country, side by side; centred in one column on a phone ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: center; padding-top: 48px }
.hero-txt { max-width: 520px }
.hero .lead { margin-bottom: 24px }
.hero .acts { display: flex; flex-wrap: wrap; gap: 10px }
/* the advertiser's e-mail, typed right here: one pill with the field and the button, the company asked next in the card */
.ask { position: relative; display: flex; align-items: center; gap: 6px; max-width: 440px; padding: 4px 4px 4px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); transition: border-color 120ms var(--ease) }
.ask:focus-within { border-color: var(--fg-3) }
.ask.bad { border-color: #E5484D }
.ask input.field { flex: 1 1 120px; max-width: none; min-width: 0; height: 36px; border: 0; background: none; padding: 0 12px }
.ask input.field:focus { border: 0 }
.ask .btn { flex: none; height: 36px; padding: 0 16px }
.ask .msg { position: absolute; left: 18px; top: 100%; margin-top: 7px; font-size: 12.5px; color: #E5484D; white-space: nowrap }
.link { font: 500 13.5px/1 var(--sans); color: var(--fg-2); text-decoration: none }
.link:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.cta .ask { flex: 1 1 240px; width: 100%; min-width: 0 }
.where { margin-top: 28px }
.where > span { display: block; font: 500 12.5px/1.3 var(--sans); color: var(--fg-3); margin-bottom: 10px }
.hero-map { margin: 0; width: 100%; max-width: 460px; justify-self: center; position: relative }
.hero-map svg { width: 100%; height: auto; display: block; transition: opacity .9s var(--ease) }
/* the country by municipality, the site's own map, drawn over the states once its file arrives and flying from city to city */
.hero-map canvas { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 612 / 576; opacity: 0; transition: opacity .9s var(--ease) }
.hero-map.on canvas { opacity: 1 }
.hero-map.on svg { opacity: 0 }
.hero-map figcaption { margin-top: 8px; text-align: center; font: 500 12px/1.3 var(--sans); color: var(--fg-3); min-height: 16px; font-variant-numeric: tabular-nums }
.hero-map figcaption b { font-weight: 500; color: var(--fg) }
.hero-map figcaption i { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin: 0 5px 0 10px; vertical-align: 0 }
.hero-map figcaption i.pt { background: #EE2D35 } .hero-map figcaption i.pl { background: #4162E2 }
.ufl { font: 600 11px var(--sans); letter-spacing: .05em }
/* a wave of light crosses the country from north to south every 8 s, each state lifting a fifth above its shade for a moment,
   as the night's bulletins came in; still for anyone who asks for less motion */
@keyframes acende { 0%, 100% { fill-opacity: var(--o) } 7% { fill-opacity: calc(var(--o) + .22) } 19% { fill-opacity: var(--o) } }
@media (prefers-reduced-motion: no-preference) {
  .hero-map path[data-o] { animation: acende 8s var(--ease) var(--d, 0s) infinite; will-change: fill-opacity }
}

/* ---------- figures ---------- */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 40px }
.fig .v { font: 300 clamp(32px, 3.3vw, 42px)/1 var(--serif); letter-spacing: -.02em; white-space: nowrap }
.fig .l { margin-top: 10px; font: 500 14.5px/1.3 var(--sans); color: var(--fg) }
.fig .s { margin-top: 4px; font-size: 13px; color: var(--fg-3) }
.total { margin-top: var(--gap); padding: 22px 24px }
.total-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap }
.total-head .v { font: 300 clamp(36px, 4vw, 50px)/1 var(--serif); letter-spacing: -.02em }
.total-head .l { font: 500 15px/1.3 var(--sans); color: var(--fg-2) }
.stack { display: flex; height: 12px; gap: 3px; margin: 18px 0 16px }
.stack span { display: block; height: 100%; border-radius: 3px; min-width: 3px }
/* a grid, not a flex row: when the legend wraps, the second line keeps the columns of the first */
.legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px }
.legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 8px; align-items: baseline; min-width: 0 }
.legend i { width: 10px; height: 10px; border-radius: 3px; transform: translateY(1px) }
.legend b { font: 500 15px/1.2 var(--sans); font-variant-numeric: tabular-nums }
.legend span { grid-column: 2; font-size: 12.5px; line-height: 1.35; color: var(--fg-3) }

/* a row of figures with hairlines between them, at any wrap: each cell draws its left and top hairline 1px outside itself,
   and the box clips the ones on the outer edge */
.stats { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); overflow: hidden }
.stats > div { flex: 1 1 150px; padding: 16px 18px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin: -1px 0 0 -1px; min-width: 0 }
.stats b { display: block; font: 300 30px/1.05 var(--serif); letter-spacing: -.01em; white-space: nowrap }
.stats span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--fg-3) }

/* ---------- chart ---------- */
.chart { padding: 16px 18px }
.chart svg { width: 100%; height: auto; display: block }
.axis { fill: var(--fg-4); font: 500 11px var(--sans) }
.ann { fill: var(--fg); font: 500 13px var(--sans) }
.annm { fill: var(--fg-3); font: 500 11.5px var(--sans) }
.chart .mark { opacity: 0; transition: opacity 420ms var(--ease) }
.chart .mark.on { opacity: 1 }

/* ---------- speed: one frame against the other ---------- */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap) }
.shot { margin: 0; min-width: 0 }
.shot .frame { position: relative }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-2) }
.shot .tag { position: absolute; left: 10px; top: 10px; font: 500 12px/1 var(--sans); padding: 6px 9px; border-radius: 999px; background: rgba(15, 14, 13, .82); color: var(--fg); border: 1px solid var(--line-2) }
.shot figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 12px }
.shot .pct { font: 300 38px/1 var(--serif); letter-spacing: -.02em }
.shot .who { font: 500 14px/1 var(--sans); color: var(--fg-2) }
.shot.them .pct { color: var(--fg-3) }
.quotes { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: 18px }
.quotes blockquote { flex: 1 1 260px; margin: 0; display: flex; flex-direction: column; justify-content: space-between }
.quotes p { font: 400 17px/1.4 var(--serif); color: var(--fg) }
.quotes cite { display: block; margin-top: 12px; font: 500 12.5px/1.3 var(--sans); font-style: normal; color: var(--fg-3) }

/* ---------- platforms ---------- */
.pi { width: 14px; height: 14px; display: inline-block; flex: none; fill: currentColor; vertical-align: -2px }
.pi.yt { color: var(--youtube) } .pi.tw { color: var(--twitch) } .pi.kk { color: var(--kick) }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 13px/1.2 var(--sans); color: var(--fg-2); background: rgba(21, 20, 18, .6) }
.chip b { font-weight: 500; color: var(--fg) }
button.chip { cursor: pointer; transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease) }
button.chip:hover { border-color: var(--line-3); color: var(--fg) }
button.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: #15130f }
button.chip[aria-pressed="true"] b { color: inherit }

/* ---------- lives: the filter, the search and the order, over the mural ---------- */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0 16px }
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line) }
.seg button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--sans); color: var(--fg-3); padding: 8px 13px; border-radius: 999px; transition: color 120ms var(--ease) }
.seg button b { font-weight: 500; color: var(--fg-2) }
.seg button:hover { color: var(--fg) }
.seg button[aria-pressed="true"], .seg button[aria-pressed="true"] b { background: var(--fg); color: #15130f }
.seg button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px }
.field { font: 400 14px/1 var(--sans); color: var(--fg); background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; height: 38px; padding: 0 16px; min-width: 0; transition: border-color 120ms var(--ease) }
.field::placeholder { color: var(--fg-4) }
.field:hover { border-color: var(--line-3) }
.field:focus { outline: none; border-color: var(--fg-3) }
input.field { flex: 1 1 200px; max-width: 300px }
/* the select draws its own arrow, so it is the same pill as the search field in every browser */
select.field { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 40px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23A6A39C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center }
select.field option { background: var(--panel-2); color: var(--fg) }
.count { font: 500 13px/1 var(--sans); color: var(--fg-3); margin-left: auto; font-variant-numeric: tabular-nums }
/* a long list shows its first rows; the button under it shows the rest, then folds it back */
.fold-row { display: flex; justify-content: center; margin-top: 18px }
.list { border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; background: var(--glass) }
/* a row of figures and the list under it are two cards, never one block glued to the other */
.stats + .list, .stats + .card, .stats + .posts { margin-top: var(--gap) }
table { border-collapse: collapse; width: 100%; font-size: 14px }
thead th { font: 500 12px/1.3 var(--sans); color: var(--fg-3); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); white-space: nowrap }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle }
tbody tr:last-child td { border-bottom: 0 }
tbody tr { transition: background-color 120ms var(--ease) }
tbody tr:hover { background: rgba(250, 250, 249, .025) }
.r { text-align: right; white-space: nowrap }
td.r.wrap { white-space: normal; max-width: 34ch }
.nb { white-space: nowrap }

/* ---------- posts ---------- */
.posts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--gap) }
.post { flex: 1 1 340px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; gap: 12px 14px; align-items: end; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); margin: 0; min-width: 0 }
.post .q { grid-column: 1 / -1; align-self: start; font: 400 16.5px/1.4 var(--serif); color: var(--fg); overflow-wrap: anywhere }
.post .by { font-size: 12.5px; color: var(--fg-3); min-width: 0; overflow-wrap: anywhere }
.post .by a { color: var(--fg-2); text-decoration: none; font-weight: 500 }
.post .by a:hover { text-decoration: underline }
.post .n { font: 500 14px/1 var(--sans); color: var(--fg); white-space: nowrap }
.post .n span { color: var(--fg-3); font-weight: 400 }
details.more { margin-top: var(--gap) }
details.more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: var(--fg); padding: 11px 16px; border: 1px solid var(--line-2); border-radius: 999px }
details.more summary::-webkit-details-marker { display: none }
details.more summary::after { content: "+"; color: var(--fg-3) }
details.more[open] summary::after { content: "−" }
details.more[open] summary { margin-bottom: 12px }
.scroll { max-height: 560px; overflow: auto }

/* ---------- bars ---------- */
.bars { display: grid; gap: 14px }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: baseline }
.bar .nm { font-size: 14px; color: var(--fg-2); min-width: 0 }
.bar .v { font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--fg-2) }
.bar .t { grid-column: 1 / -1; height: 9px; border-radius: 999px; background: var(--panel-3); overflow: hidden }
.bar .f { height: 100%; width: 0; border-radius: 999px; background: var(--tone-4); transition: width .9s var(--ease) }
.bar.us .nm, .bar.us .v { color: var(--fg); font-weight: 600 }
.bar.us .f { background: var(--fg) }

/* ---------- audience ---------- */
.meter + .meter { margin-top: 22px }
.mh { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--fg-2) }
.mh span:first-child { font-weight: 500; color: var(--fg) }
.split { display: flex; height: 12px; gap: 3px; margin-top: 10px }
.split span { display: block; height: 100%; border-radius: 3px; min-width: 3px }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: center }
.ufs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px }
.uf { display: grid; grid-template-columns: 30px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13px }
.uf .s { font: 600 11px/1 var(--sans); letter-spacing: .06em; text-align: center; padding: 5px 0; border-radius: 6px; background: #2A2825; color: var(--fg-2) }
.uf .t { height: 6px; border-radius: 999px; background: var(--panel-3); overflow: hidden }
.uf .f { height: 100%; width: 0; border-radius: 999px; background: var(--tone-2); transition: width .9s var(--ease) }
.uf .v { text-align: right; color: var(--fg-2); font-variant-numeric: tabular-nums }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
/* the networks the site was opened from: a group per line, each organisation a tile with its mark in one colour and its count */
.orgs { display: grid }
.orgs .grp { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 20px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line) }
.orgs .grp:first-child { border-top: 0; padding-top: 0 }
.orgs .grp:last-child { padding-bottom: 0 }
.orgs .gl { font: 500 12.5px/1.3 var(--sans); color: var(--fg-3); padding-top: 14px }
.orgs .tiles { display: flex; flex-wrap: wrap; gap: 8px }
.org { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(21, 20, 18, .6) }
.org .mk { display: inline-flex; align-items: center; color: var(--fg) }
.org .om { height: 22px; width: auto; max-width: 150px; display: block }
.org .nm { font: 500 13.5px/1.25 var(--sans); color: var(--fg) }
.org .ct { font-size: 12px; line-height: 1.2; color: var(--fg-3); white-space: nowrap }
.org .ct b { font-weight: 500; color: var(--fg-2) }

/* ---------- method, call to action, footer ---------- */
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 0 }
.dl dt { font: 500 14px/1.3 var(--sans); color: var(--fg) }
.dl dd { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-3) }
.sources { margin: 0; padding-left: 18px; color: var(--fg-3); font-size: 13.5px; display: grid; gap: 6px }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; padding: 26px 28px }
.cta h2 { margin: 6px 0 0 }
.cta .acts { display: flex; flex-wrap: wrap; gap: 10px }
footer { border-top: 1px solid var(--line); margin-top: 88px }
.foot { max-width: 1120px; margin: 0 auto; padding: 26px var(--gutter) calc(34px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; color: var(--fg-4); font-size: 13px }
.foot .byp svg { height: 19px }

/* ---------- colour: each platform and each source has its own, as their marks do ---------- */
.yt { --pc: #FF4E45 } .tw { --pc: #A970FF } .kk { --pc: #53FC18 } .x { --pc: #1D9BF0 } .th { --pc: #EDEDED } .bs { --pc: #1185FE }
.ig { --pc: #E1306C } .tt { --pc: #25F4EE } .fb { --pc: #1877F2 } .li { --pc: #0A66C2 } .rd { --pc: #FF4500 }
.pi.x { color: #E7E9EA } .pi.th { color: #EDEDED } .pi.bs { color: #1185FE } .pi.ig { color: #E1306C } .pi.tt { color: #25F4EE }
.pi.fb { color: #1877F2 } .pi.li { color: #0A66C2 } .pi.rd { color: #FF4500 }
.pi.fo { width: 8px; height: 8px; border-radius: 999px; background: #F5B400; vertical-align: 1px }
.c-x { background: #1D9BF0 } .c-tx { background: #A970FF } .c-site { background: #FAFAF9 } .c-fo { background: #F5B400 } .c-so { background: #E1306C }
.k-mapa { --pc: #1D9BF0 } .k-cit { --pc: #7CC4FA } .k-link { --pc: #2FB5A3 } .k-resp { --pc: #4B5563 } .k-bruno { --pc: #FAFAF9 }
.post .by .pi, .list td .pi { margin-right: 7px }

/* ---------- the mural: every transmission as its proof, its channel and its numbers, coloured by platform; the two largest
   in the current order take four cells (.big, set by app.js) ---------- */
.mural-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 28px 0 14px }
.mural-head h3 { margin: 0 }
.mural { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); grid-auto-flow: dense; gap: 16px 10px }
.tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--fg); text-decoration: none }
.tile .fr { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--panel-3); outline: 1px solid var(--line); outline-offset: -1px; transition: outline-color 120ms var(--ease) }
.tile .fr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s var(--ease) }
.tile .fr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pc) }
.tile .ini { position: absolute; inset: 0; display: grid; place-items: center; font: 400 24px/1 var(--serif); color: var(--fg); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--pc, #77736B) 55%, transparent) 0%, var(--panel-3) 75%) }
.tile .tb { position: absolute; left: 7px; top: 7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(15, 14, 13, .8) }
.tile .tb .pi { width: 12px; height: 12px; vertical-align: 0 }
.tile .cap { display: block; min-width: 0; padding: 0 2px }
.tile .cap b { display: block; font: 500 13px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tile .cap .m { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tile.big { grid-column: span 2; grid-row: span 2 }
.tile.big .fr { aspect-ratio: auto; flex: 1 1 auto; min-height: 0 }
.tile.big .cap b { font-size: 15px }
.tile.big .cap .m { font-size: 13px }
.tile:hover .fr img, .tile:focus-visible .fr img, .tile.on .fr img { transform: scale(1.06) }
.tile:hover .fr, .tile:focus-visible .fr, .tile.on .fr { outline: 2px solid var(--pc); outline-offset: 1px }
.tile:hover .cap b { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px }

/* ---------- the map of posts: one cell per post, its area its views, its colour what it shows (laid out by app.js). The larger
   the cell, the darker its tint, so the big ones read as cards with text and the small ones as pure colour. The creator's own
   posts are ivory, as the site's ink. ---------- */
.kinds { gap: 6px }
.kinds .sm { display: none }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--pc) }
.tmap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--panel) }
.cell { position: absolute; left: 0; top: 0; width: 0; height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; text-decoration: none; color: var(--fg); background: color-mix(in srgb, var(--pc) var(--p, 100%), var(--panel-2)) }
.cell.k-bruno { background: var(--fg); color: #0F0E0D }
.cell.s2.k-cit, .cell.s2.k-link { color: #0F0E0D }
.cell > * { display: none; min-width: 0; flex: none }
.cell .who { font: 500 12px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cell .tx { flex: 1 1 auto; min-height: 0; margin-top: 6px; font: 400 14px/1.4 var(--serif); overflow: hidden; overflow-wrap: anywhere }
.cell .n { margin-top: auto; align-self: flex-end; font: 300 22px/1 var(--serif); letter-spacing: -.01em; white-space: nowrap }
.cell.s1 { padding: 10px 12px }
.cell.s1 > * { display: block }
.cell.s2 { padding: 5px 7px }
.cell.s2 .who, .cell.s2 .n { display: block }
.cell.s2 .who { font-size: 11.5px }
.cell.s2 .n { font-size: 13px }
.cell.xl { padding: 16px 18px }
.cell.xl .who { font-size: 14px }
.cell.xl .tx { font-size: 20px; line-height: 1.35; margin-top: 10px }
.cell.xl .n { font-size: 38px; letter-spacing: -.02em }
.cell:hover, .cell:focus-visible, .cell.on { outline: 2px solid var(--fg); outline-offset: -2px; z-index: 3 }
.tmap.ready .cell { transition: left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease) }

/* ---------- the card that opens over a live, a post or a profile, as on the site's own cards ---------- */
.hc { position: fixed; z-index: 60; left: 0; top: 0; width: 320px; max-width: calc(100vw - 24px); background: #1C1B19; border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); overflow: hidden; opacity: 0; transform: translateY(6px); transition: opacity 140ms var(--ease), transform 140ms var(--ease) }
.hc.in { opacity: 1; transform: none }
.hc .bn { position: relative; height: 112px; background: var(--panel-3); overflow: hidden }
.hc .bn img { width: 100%; height: 100%; object-fit: cover; display: block }
.hc .bn.g { background: radial-gradient(120% 140% at 0% 0%, var(--pc) 0%, rgba(28, 27, 25, 0) 70%), var(--panel-3) }
.hc .bn.g .pi { position: absolute; right: 18px; top: 18px; width: 22px; height: 22px; opacity: .9 }
.hc .av { position: absolute; left: 18px; top: 70px; width: 72px; height: 72px; border-radius: 999px; border: 4px solid #1C1B19; background: var(--pc); display: grid; place-items: center; font: 400 26px/1 var(--serif); color: #0F0E0D }
.hc img.av { object-fit: cover; padding: 0 }
.hc .bd { position: relative; padding: 42px 18px 18px }
.hc .bdg { position: absolute; right: 16px; top: 12px; font: 500 12.5px/1 var(--sans); padding: 7px 10px; border-radius: 10px; background: var(--panel-3); color: var(--fg-3); white-space: nowrap }
.hc .bdg b { color: var(--fg); font-weight: 600 }
.hc .nm { font: 500 18px/1.25 var(--sans); padding-right: 76px; overflow-wrap: anywhere }
.hc .hd { display: flex; align-items: center; gap: 7px; margin-top: 5px; font: 500 13.5px/1.2 var(--sans); color: var(--pc) }
.hc .hd .pi { width: 13px; height: 13px; vertical-align: 0 }
.hc .tx { margin-top: 12px; font: 400 15px/1.45 var(--sans); color: var(--fg-2); overflow-wrap: anywhere }
.hc .st { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--fg-3) }
.hc .st b { color: var(--fg); font-weight: 500 }
.hc .ac { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px }
.hc .ac a { height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--fg); text-decoration: none; font: 500 13.5px/1 var(--sans) }
.hc .ac a:hover { background: var(--panel-3); border-color: var(--line-3) }
.hc .ac a:only-child { grid-column: 1 / -1 }
.hc .ac .pi { width: 14px; height: 14px; vertical-align: 0 }
.hc-veil { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5) }
.hc.sheet { left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; margin: 0 auto; max-width: 420px }
[data-card] { cursor: pointer }
.btn .sm { display: none }

/* ---------- the advertiser's funnel, in the site's own card: first where the mark goes (four places, each drawn as a small
   screen with the place in ivory), then name, company, e-mail, WhatsApp, budget and a note; a bottom sheet on a phone ---------- */
.dlg-veil { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .6) }
.dlg { position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; margin: 0; padding: 24px 24px 22px; background: #1C1B19; border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); overscroll-behavior: contain }
.dlg .step { margin: 0; scroll-margin-top: 0 }
.dlg .eyebrow { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1.3 var(--sans); color: var(--fg-3); margin: 0 36px 10px 0 }
.dlg .eyebrow i { width: 7px; height: 7px; border-radius: 999px; background: var(--fg); flex: none }
.dlg h3 { font: 400 23px/1.2 var(--serif); margin: 0 36px 8px 0 }
.dlg p { font-size: 14.5px; line-height: 1.5; color: var(--fg-2) }
.fmts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px }
.fmt { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); cursor: pointer; transition: border-color 120ms var(--ease), background-color 120ms var(--ease) }
.fmt:hover { border-color: var(--line-3) }
.fmt.on { border-color: var(--fg); background: var(--panel-2) }
.fmt:focus-within { outline: 2px solid var(--fg); outline-offset: 2px }
.fmt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none }
.fmt .ft b { display: block; font: 500 14px/1.3 var(--sans); color: var(--fg) }
.fmt .ft span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--fg-3) }
.fmt .ft em { display: block; margin-top: 7px; font: 500 12px/1.3 var(--sans); font-style: normal; color: var(--fg-2) }
.fmt.on .ft em { color: var(--fg) }
.scr { position: relative; width: 72px; height: 50px; border-radius: 7px; background: #0F0E0D; border: 1px solid var(--line-2); overflow: hidden; transition: border-color 120ms var(--ease) }
.fmt.on .scr { border-color: var(--fg-3) }
.scr::before { content: ""; position: absolute; left: 21px; top: 11px; width: 34px; height: 30px; border-radius: 45% 55% 50% 50% / 40% 40% 60% 60%; background: var(--tone-5) }
.scr::after { content: ""; position: absolute; background: var(--fg); border-radius: 2px }
.scr.s-bar::after { left: 0; right: 0; top: 0; height: 6px; border-radius: 0 }
.scr.s-car::after { right: 5px; bottom: 5px; width: 22px; height: 12px }
.scr.s-pop::after { left: 18px; top: 11px; width: 36px; height: 28px; border-radius: 4px }
.scr.s-all { background-image: linear-gradient(var(--fg), var(--fg)), linear-gradient(var(--fg), var(--fg)); background-size: 100% 6px, 22px 12px; background-position: 0 0, calc(100% - 5px) calc(100% - 5px); background-repeat: no-repeat }
.scr.s-all::after { left: 18px; top: 13px; width: 30px; height: 20px; border-radius: 4px }
.dlg .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px }
.dlg .grid2 label, .dlg label.full { display: block; min-width: 0 }
.dlg label > span, .dlg .lbl { display: block; margin: 0 0 6px; font: 500 12.5px/1.3 var(--sans); color: var(--fg-3) }
.dlg label small, .dlg .lbl small { font-weight: 400; color: var(--fg-4); margin-left: 4px }
.dlg .lbl { margin-top: 16px }
.dlg label.full { margin-top: 16px }
.dlg input.field { display: block; width: 100%; max-width: none; height: 42px; border-radius: 12px }
.dlg textarea.field { display: block; width: 100%; max-width: none; height: auto; min-height: 84px; padding: 10px 14px; border-radius: 12px; resize: vertical; line-height: 1.45; font-size: 14px }
.dlg .verba .chip { cursor: pointer; position: relative; transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease) }
.dlg .verba .chip:hover { border-color: var(--line-3); color: var(--fg) }
.dlg .verba input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none }
.dlg .verba .chip.on { background: var(--fg); border-color: var(--fg); color: #15130f }
.dlg .verba .chip:focus-within { outline: 2px solid var(--fg); outline-offset: 2px }
.dlg .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.dlg .acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 18px }
.dlg .acts .btn { height: 42px; padding: 0 20px }
.btn.ghost { background: none; border-color: transparent; color: var(--fg-3) }
.btn.ghost:hover { color: var(--fg); background: var(--panel-2); border-color: transparent }
.dlg .msg { font-size: 13.5px; line-height: 1.4; color: var(--fg-3); min-width: 0 }
.dlg .fine { margin-top: 14px; font-size: 12px; color: var(--fg-4) }
.dlg .x { all: unset; cursor: pointer; position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font: 400 22px/1 var(--sans); color: var(--fg-3); background: var(--panel-2) }
.dlg .x:hover { color: var(--fg); background: var(--panel-3) }
.dlg .x:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px }
body.noscroll { overflow: hidden }

/* ---------- 980: the section links go, figures two by two ---------- */
@media (max-width: 980px) {
  nav.sec { display: none }
  .top-acts { margin-left: auto }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ufs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ---------- 860: tables become cards ---------- */
@media (max-width: 860px) {
  .count { margin-left: 0 }
  input.field { max-width: none }
  .list.cards { border: 0; background: none; overflow: visible }
  .cards thead { display: none }
  .cards table, .cards tbody { display: block }
  .cards tbody tr { display: block; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass) }
  .cards tbody td { display: block; padding: 0; border: 0; text-align: left; white-space: normal }
  .cards tbody td + td { margin-top: 4px }
  .mural { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) }
}

/* ---------- 680: one column, the hero centred ---------- */
@media (max-width: 680px) {
  :root { --gutter: 16px; --gap: 12px }
  .soc { display: none }
  section { margin-top: 68px }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 32px; gap: 24px; text-align: center }
  .hero-txt { max-width: none }
  .hero .kicker, .hero .acts, .where .chips { justify-content: center }
  .hero .ask { margin-inline: auto }
  .ask .msg { left: 0; right: 0; text-align: center; white-space: normal }
  .hero-map { max-width: 380px }
  .cols2, .versus, .dl, .ufs, .duo { grid-template-columns: minmax(0, 1fr) }
  .duo { gap: 18px }
  .stats b { font-size: 26px }
  .stats > div { flex-basis: 120px; padding: 14px 16px }
  .cta { padding: 22px 20px; flex-direction: column; align-items: flex-start }
  .cta .ask { flex: none; max-width: none }
  .dlg { top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: none; width: auto; max-height: calc(100vh - 24px - env(safe-area-inset-bottom, 0px)); padding: 20px 18px 18px }
  .fmts, .dlg .grid2 { grid-template-columns: minmax(0, 1fr) }
  .tools { margin-top: 16px }
  .count { flex-basis: 100%; text-align: center }
  .chart { padding: 14px 10px 10px }
  .mural { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px }
  .tile .cap .m { display: none }
  .tile.big { grid-column: auto; grid-row: auto }
  .tile.big .fr { aspect-ratio: 16 / 9; flex: none }
  .tile.big .cap b { font-size: 12px }
  .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch }
  .seg::-webkit-scrollbar { display: none }
  .seg button { flex: none; padding: 8px 11px }
  .tmap { aspect-ratio: 4 / 5 }
  .orgs .grp { grid-template-columns: minmax(0, 1fr); gap: 8px }
  .orgs .gl { padding-top: 0 }
  .kinds .lg { display: none }
  .kinds .sm { display: inline }
}

/* ---------- 420: one card per row ---------- */
@media (max-width: 420px) {
  .btn .lg { display: none }
  .btn .sm { display: inline }
  .top-acts .btn { padding: 0 12px }
  .top-acts { gap: 6px }
  .brand { gap: 8px }
  .seg { display: flex; width: 100% }
  .seg button { flex: 1 1 0; justify-content: center; padding: 8px 4px; gap: 6px }
  .seg button .nm { display: none }
  .figs { grid-template-columns: minmax(0, 1fr) }
  .fig .v { font-size: 34px }
  .hero h1 { font-size: 32px }
  .tile .cap b { font-size: 12px }
  .tile .tb { width: 20px; height: 20px; left: 5px; top: 5px }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .bar .f, .uf .f, .tmap.ready .cell, .tile .fr img, .chart .mark { transition: none }
}