@charset "UTF-8";
/* Arkade 2.0, the one stylesheet.
   ------------------------------------------------------------------
   Built from the approved prototype (docs/design/tokens.css) with the
   review fixes applied: figure margins reset, the navigation row fades at
   its right edge, small text at 0.6 alpha with a 12 px floor, kickers in
   the muted ink (the red is spent on block rules, numbers and active
   states), the desktop header in one row from 1100 px.

   Light is the default. The inline script in header.php sets data-theme
   from the cookie, or from prefers-color-scheme when the visitor never
   toggled, before this sheet applies, so cached HTML stays theme-neutral.

   Mobile first at 390 px; the desktop layouts start at 1100 px. */

/* Tokens
   ------------------------------------------------------------------ */
:root {
  color-scheme: light;
  --bg: #f7f6f3;
  --surface: #fffdfb;
  --surface-2: #eeece8;
  --text: #1b1a18;
  --muted: rgba(27, 26, 24, 0.62);
  --faint: rgba(27, 26, 24, 0.6);
  --divider: rgba(27, 26, 24, 0.14);
  --accent: #c3161f;
  --accent-hover: #a1101a;
  --accent-tint: rgba(195, 22, 31, 0.07);
  --notice-bg: #f3ecd6;
  --notice-text: #6c5a22;
  --shadow: 0 1px 2px rgba(27, 26, 24, 0.06), 0 8px 24px rgba(27, 26, 24, 0.08);
  --logo: #1b1a18;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14161d;
  --surface: #1d2029;
  --surface-2: #262a35;
  --text: #e9e9ed;
  --muted: rgba(233, 233, 237, 0.62);
  --faint: rgba(233, 233, 237, 0.6);
  --divider: rgba(233, 233, 237, 0.14);
  --accent: #f2564e;
  --accent-hover: #ff7b70;
  --accent-tint: rgba(242, 86, 78, 0.1);
  --notice-bg: #2c2716;
  --notice-text: #d9c584;
  --shadow: 0 0 0 1px rgba(233, 233, 237, 0.08), 0 10px 28px rgba(0, 0, 0, 0.5);
  --logo: #e9e9ed;
}

/* Base
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection {
  background: var(--accent-tint);
}
img,
svg,
video,
iframe {
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
  margin: 0;
}
button {
  font: inherit;
  color: inherit;
}
.a-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.a-skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--surface);
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 100;
}
.a-skip:focus {
  left: 8px;
}
.icon {
  display: block;
  fill: currentColor;
}

/* Header
   ------------------------------------------------------------------ */
.a-header {
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
}
.a-hbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 6px 8px;
  max-width: 1200px;
  margin: 0 auto;
}
.a-hside {
  display: flex;
  align-items: center;
  gap: 2px;
}
.a-hside.r {
  justify-content: flex-end;
}
.a-ibtn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}
.a-ibtn:hover {
  background: var(--accent-tint);
  color: var(--accent);
}
.a-brand {
  position: relative;
  display: block;
  width: 124px;
  height: 44px;
  color: var(--logo);
}
.a-brand:hover {
  text-decoration: none;
}
.a-mark {
  position: absolute;
  top: 10px;
  left: 0;
  width: 124px;
  height: 24px;
  color: var(--logo);
}
.a-brand .a-mark:nth-child(1) {
  color: rgb(47, 0, 255);
  animation: glitch2 6s infinite, glitch1 4s infinite;
}
.a-brand .a-mark:nth-child(2) {
  color: rgb(238, 9, 77);
  animation: glitch3 6s infinite, glitch1 4s infinite;
}
.a-nav {
  display: flex;
  gap: 4px;
}
.a-nav a {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text);
}
.a-nav a:hover {
  color: var(--accent);
  background: var(--accent-tint);
  text-decoration: none;
}
.a-nav a[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 6px 6px 0 0;
}
.a-nav--bar {
  display: none;
}
.a-nav--row {
  position: relative;
  overflow-x: auto;
  padding: 6px 12px 8px;
  scrollbar-width: none;
  /* The right edge fades: the affordance that the row scrolls. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.a-nav--row::-webkit-scrollbar {
  display: none;
}

/* The popover menu: every section, then the platforms. */
.a-menu {
  position: fixed;
  inset: 58px auto auto 8px;
  width: min(320px, calc(100vw - 16px));
  margin: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--divider);
  border-radius: 9px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.a-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 8px;
  font-weight: 600;
}
.a-menu .a-menu-grid + .a-label {
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  margin-top: 14px;
}
.a-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  font-size: 14px;
}
.a-menu-grid a {
  color: var(--text);
  padding: 6px 0;
}
.a-menu-grid a:hover {
  color: var(--accent);
}

/* Page scaffolding
   ------------------------------------------------------------------ */
.a-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}
.a-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.a-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.a-crumb {
  font-size: 12px;
  color: var(--faint);
}
.a-crumb a {
  color: var(--muted);
}
.a-h1 {
  font-size: 26px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.a-listing .a-h1 {
  font-size: 30px;
}
.a-h1--author {
  font-size: 24px;
}
.a-dek {
  font-size: 19px;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
.a-dek--small {
  font-size: 16px;
}
.a-kick {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* A 24 px touch target for the linked kicker without moving the layout. */
a.a-kick {
  padding: 5px 0;
  margin: -5px 0;
  min-height: 24px;
  align-self: flex-start;
}
a.a-kick:hover {
  color: var(--accent);
  text-decoration: none;
}
.a-kick--rule {
  color: var(--accent);
}
.a-time {
  font-size: 12px;
  color: var(--faint);
}
.a-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.a-intro p + p {
  margin-top: 10px;
}
.a-empty {
  color: var(--muted);
  padding: 24px 0;
}

/* Author line and box */
.a-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.a-ava {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  overflow: hidden;
  display: block;
}
.a-ava.lg {
  width: 64px;
  height: 64px;
}
.a-ava-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.a-author-text small {
  display: block;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.35;
}
.a-author-text b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.a-author-text b a {
  color: inherit;
}
.a-share {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}
.a-share:hover {
  background: var(--accent-tint);
}
.a-share[hidden] {
  display: none;
}
.a-author-box {
  flex-direction: row;
  gap: 12px;
}
.a-author-box b {
  font-size: 14px;
}
.a-author-box p {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 8px;
  line-height: 1.5;
}
.a-author-box a {
  font-size: 13px;
  font-weight: 600;
}
.a-author--head {
  align-items: flex-start;
  gap: 14px;
}

/* Images: every card image sits in a 16:9 box and covers it. */
.a-ph {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2) repeating-linear-gradient(45deg, transparent, transparent 9px, var(--divider) 9px, var(--divider) 10px);
  border: 1px solid var(--divider);
  border-radius: 6px;
  overflow: hidden;
}
.a-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.a-credit {
  font-size: 12px;
  color: var(--faint);
  margin-top: 6px;
}
.a-lead img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.a-hub-cover {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* Cards: row and tile, the only two shapes
   ------------------------------------------------------------------ */
.a-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.a-row > .a-ph {
  width: 136px;
  flex: none;
}
.a-row-body,
.a-tile-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.a-rt {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
  display: block;
  margin: 2px 0 4px;
  text-wrap: pretty;
}
a.a-rt:hover,
.a-tile a:hover .a-rt {
  color: var(--accent);
  text-decoration: none;
}
.a-tile > .a-ph {
  margin-bottom: 8px;
}
.a-tile .a-rt {
  font-size: 16px;
}
.a-tile--lead .a-rt {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
}
.a-tile-dek {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 6px;
}
.a-grid--tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
}
.a-grid--tiles .a-rt {
  font-size: 14px;
}
.a-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.a-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.a-2col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.a-river {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--divider);
  padding-top: 16px;
}
.a-inline-wrap {
  margin: 0 0 20px;
}
.a-inline-wrap .a-row {
  margin-top: 8px;
}
.a-video .a-rt {
  font-size: 14px;
}
/* Shorts: a row of 9:16 boxes; the 480x360 thumbnail carries the vertical
   frame in its middle, so object-fit cover shows just that. */
.a-shorts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
}
.a-short {
  color: var(--text);
}
.a-short:hover {
  text-decoration: none;
}
.a-short:hover .a-rt {
  color: var(--accent);
}
.a-ph--short {
  aspect-ratio: 9 / 16;
  margin-bottom: 8px;
}
.a-short .a-rt {
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.a-videos > .a-label {
  margin: 6px 0 -4px;
}
a.a-tile {
  color: var(--text);
}
a.a-tile:hover {
  text-decoration: none;
}

/* Block titles */
.a-blockh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
}
.a-blockh .h {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.a-blockh .h a {
  color: inherit;
}
.a-blockh .all {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.a-block > .a-blockh,
.a-related > .a-blockh,
.a-strip-block > .a-blockh,
.a-ml-block > .a-blockh,
.a-videos > .a-blockh {
  margin-bottom: 0;
}
.a-strip-block,
.a-related,
.a-videos,
.a-ml-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.a-ml-block {
  gap: 0;
}

/* "Siga o Arkade": the channel and the profiles as buttons */
.a-follow-lead {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.a-follow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.a-follow-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--divider);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.a-follow-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.a-follow-link .icon {
  flex: none;
  color: var(--accent);
}
.a-follow-link .t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.a-follow-link b {
  font-size: 14px;
}
.a-follow-link .s {
  font-size: 12px;
  color: var(--faint);
}

/* Ad box */
.a-ad {
  background: var(--surface-2);
  border: 1px solid var(--divider);
  border-radius: 6px;
  text-align: center;
  padding: 6px 8px 8px;
}
.a-ad-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.a-ad-unit {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a-ad-unit > * {
  width: 100%;
}
.a-art .a-ad {
  margin: 0 0 20px;
}

/* Chips */
.a-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.a-chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface);
}
.a-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.a-chip[aria-current="page"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
}

/* Google links */
.a-glinks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.a-glinks a {
  text-decoration: underline;
}

/* Fact box: a 16:9 cover across the top, then the name and the rows. */
.a-fact {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* The title block under the cover: the name, then the "Ficha do jogo" label. */
.a-fact-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* A game cover is one of the site's own featured images at the medium size
   (720 box, uncropped): it fills whatever box holds it and is cropped to
   16:9 here, because nothing crops on upload. */
.a-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--divider);
  background: var(--surface-2);
}
.a-cover--none {
  background: var(--surface-2) repeating-linear-gradient(45deg, transparent, transparent 9px, var(--divider) 9px, var(--divider) 10px);
}
.a-fact-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.a-fact-title a {
  color: inherit;
}
h1.a-fact-title {
  font-size: 24px;
}
.a-frow {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 8px;
  font-size: 13px;
  padding: 7px 0;
  border-top: 1px solid var(--divider);
}
.a-frow dt {
  color: var(--faint);
}

/* Próxima matéria */
.a-next-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.a-next {
  display: block;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shadow);
  color: var(--text);
}
.a-next .a-ph {
  margin: 0 0 10px;
}
.a-next-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.a-next .t {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  text-wrap: pretty;
}
.a-next .d {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.a-next:hover {
  border-color: var(--accent);
  text-decoration: none;
}
.a-next:hover .t {
  color: var(--accent);
}

/* Mais lidas */
.a-ml {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ml;
}
.a-ml li {
  counter-increment: ml;
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--divider);
}
.a-ml li:first-child {
  border-top: 0;
  padding-top: 12px;
}
.a-ml li::before {
  content: counter(ml);
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  min-width: 22px;
  line-height: 1.2;
}
.a-ml a {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text);
}
.a-ml a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* Game strip */
.a-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.a-strip::-webkit-scrollbar {
  display: none;
}
.a-game {
  flex: none;
  width: 150px;
  color: var(--text);
}
.a-game .a-cover {
  margin-bottom: 6px;
}
.a-art .a-games a,
.a-art .a-strip a {
  text-decoration: none;
}
.a-games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 10px;
  margin-top: 8px;
}
.a-games .a-game {
  width: auto;
}
.a-game .c {
  display: block;
  font-size: 12px;
  color: var(--faint);
  margin-top: 2px;
}
.a-h1-sub {
  font-weight: 400;
  color: var(--faint);
  font-size: 0.6em;
}
.a-game .n {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
}
.a-game:hover {
  text-decoration: none;
  color: var(--accent);
}

/* Notice */
.a-notice {
  background: var(--notice-bg);
  color: var(--notice-text);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
}

/* Pagination */
.a-pag {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  padding-top: 8px;
}
.a-pag a,
.a-pag span {
  min-width: 32px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  color: var(--text);
  padding: 0 6px;
  white-space: nowrap;
}
.a-pag a:hover {
  background: var(--accent-tint);
  color: var(--accent);
  text-decoration: none;
}
.a-pag .cur {
  background: var(--accent);
  color: #fff;
}
.a-pag .dis {
  color: var(--faint);
}
.a-pag .lbl {
  display: none;
}
.a-pag .prev,
.a-pag .next {
  display: inline-flex; /* inline-grid stacked the word and the arrow */
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 0 10px;
}

/* The rail: on a phone it is a block in the flow (ad, then Mais lidas). */
.a-rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Article body
   ------------------------------------------------------------------ */
.a-art {
  font-size: 18px;
  line-height: 1.65;
}
.a-art > * {
  margin: 0 0 20px;
}
.a-art p {
  text-wrap: pretty;
}
.a-art h2 {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 28px 0 12px;
}
.a-art h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  margin: 24px 0 10px;
}
.a-art h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 20px 0 8px;
}
.a-art a {
  text-decoration: underline;
}
.a-art ul,
.a-art ol {
  padding-left: 24px;
}
.a-art li {
  margin-bottom: 6px;
}
.a-art blockquote {
  margin: 0 0 20px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-size: 17px;
}
.a-art blockquote p {
  margin-bottom: 8px;
}
.a-art figure,
.a-art .wp-caption {
  margin: 0 0 20px;
  max-width: 100%;
}
.a-art img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}
.a-art figcaption,
.a-art .wp-caption-text {
  font-size: 12px;
  color: var(--faint);
  margin-top: 6px;
  line-height: 1.4;
}
.a-art .aligncenter,
.a-art img.aligncenter {
  margin-left: auto;
  margin-right: auto;
}
.a-art .alignleft {
  float: left;
  margin: 4px 18px 12px 0;
  max-width: 50%;
}
.a-art .alignright {
  float: right;
  margin: 4px 0 12px 18px;
  max-width: 50%;
}
.a-art .has-text-align-center {
  text-align: center;
}
.a-art .has-text-align-right {
  text-align: right;
}
.a-art iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 6px;
  background: var(--surface-2);
}
.a-art .wp-block-embed__wrapper {
  position: relative;
}
.a-art .wp-block-gallery,
.a-art .gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.a-art .wp-block-gallery figure,
.a-art .gallery-item {
  margin: 0;
}
.a-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--divider);
  border-radius: 6px;
  margin: 0 0 20px;
}
.a-art table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 14px;
  line-height: 1.4;
}
.a-art th,
.a-art td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}
.a-art th {
  background: var(--surface-2);
  font-weight: 600;
}
.a-art hr {
  border: 0;
  border-top: 1px solid var(--divider);
}
.a-art .a-inline-wrap .a-rt {
  font-size: 15px;
}
.a-pages {
  font-size: 14px;
  color: var(--muted);
}
.a-art .a-team {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px 12px;
  font-size: 14px;
  text-align: center;
}
.a-art .a-team a {
  color: var(--text);
  text-decoration: none;
  display: block;
}
.a-art .a-team img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 6px;
  object-fit: cover;
}

/* Contact form (/contato), styled to the same tokens. */
.contact-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--divider);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.contact-form textarea {
  min-height: 160px;
}
.contact-honeypot {
  position: absolute;
  left: -9999px;
}
.a-btn,
.contact-form input[type="submit"] {
  font: inherit;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
}
.a-btn:hover,
.contact-form input[type="submit"]:hover {
  background: var(--accent-hover);
}
.contact-status {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.contact-status.is-ok {
  color: var(--notice-text);
}
.contact-status.is-error {
  color: var(--accent);
}

/* 404 */
.a-404-msg {
  text-align: center;
  padding: 24px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.a-mark--404 {
  position: static;
  width: 160px;
  height: 30px;
}
.a-404-msg p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
}

/* Search dialog */
.a-dialog {
  border: 1px solid var(--divider);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  padding: 20px;
  width: min(520px, calc(100vw - 32px));
  box-shadow: var(--shadow);
}
.a-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.a-dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}
.a-dialog h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 4px 44px 14px 0;
}
.a-searchform {
  display: flex;
  gap: 8px;
}
.a-searchform input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--divider);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

/* Footer
   ------------------------------------------------------------------ */
.a-footer {
  background: var(--surface);
  border-top: 1px solid var(--divider);
  margin-top: 24px;
  font-size: 13px;
}
.a-footer-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.a-brand--footer {
  width: 124px;
  height: 30px;
}
.a-brand--footer .a-mark:first-child {
  top: 2px;
  color: var(--logo);
  animation: none;
}
.a-footer .desc {
  color: var(--muted);
}
.a-footer .cols {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
.a-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.a-footer ul.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 14px;
}
.a-footer a {
  color: var(--text);
}
.a-footer a:hover {
  color: var(--accent);
}
.a-footer .soc {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-weight: 600;
}
.a-footer .soc a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}
.a-footer .legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
}
.a-footer .disc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
}
.a-footer .disc a {
  text-decoration: underline;
}

/* Desktop, from 1100 px
   ------------------------------------------------------------------ */
@media (min-width: 1100px) {
  .a-hbar {
    grid-template-columns: auto auto 1fr auto;
    gap: 16px;
    padding: 8px 20px;
  }
  .a-brand {
    width: 160px;
  }
  .a-mark {
    width: 160px;
    height: 30px;
    top: 7px;
  }
  .a-nav--bar {
    display: flex;
    justify-content: center;
    gap: 6px;
  }
  .a-nav--bar a {
    font-size: 14px;
    padding: 8px 10px;
  }
  .a-nav--row {
    display: none;
  }
  .a-menu {
    inset: 62px auto auto 20px;
  }
  .a-main {
    padding: 32px 36px;
  }

  /* Pages with a rail: the article column and 300 px beside it. Children
     stay in the first column, in DOM order; the rail moves to the second
     and spans every row. Vertical rhythm is margins, so the unused rows
     the span creates cost nothing. */
  .a-page {
    display: grid;
    grid-template-columns: minmax(0, 680px) 300px;
    column-gap: 48px;
    row-gap: 0;
    justify-content: center;
    align-items: start;
  }
  .a-page > * {
    grid-column: 1;
    margin-bottom: 16px;
  }
  .a-page > .a-rail {
    grid-column: 2;
    grid-row: 1 / span 80;
    position: sticky;
    top: 16px;
    margin-bottom: 0;
  }
  .a-listing {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .a-listing > * {
    margin-bottom: 24px;
  }
  .a-article--wide,
  .a-404 {
    grid-template-columns: minmax(0, 800px);
  }
  .a-home {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: stretch; /* .a-page said start: a flex child would shrink to its content */
  }
  .a-home > * {
    margin: 0;
  }
  .a-h1 {
    font-size: 36px;
    line-height: 1.15;
  }
  .a-listing .a-h1 {
    font-size: 36px;
  }
  .a-h1--author {
    font-size: 28px;
  }
  .a-intro {
    font-size: 16px;
    max-width: 680px;
  }

  /* Home and section heads: the lead at two thirds, four rows beside it. */
  .a-dest {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    align-items: start;
  }
  .a-dest .a-row > .a-ph,
  .a-list--head .a-row > .a-ph,
  .a-game-side .a-row > .a-ph {
    width: 150px;
  }
  .a-dest .a-row .a-rt,
  .a-list--head .a-row .a-rt {
    font-size: 14px;
  }
  .a-tile--lead .a-rt {
    font-size: 26px;
    line-height: 1.2;
  }
  .a-listing .a-tile--lead .a-rt {
    font-size: 24px;
    line-height: 1.22;
  }
  .a-shorts {
    grid-template-columns: repeat(6, 1fr);
  }
  .a-grid--tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 16px;
  }
  .a-related .a-grid--tiles {
    gap: 16px 12px;
  }
  .a-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
  }

  /* The river becomes tiles of three: same markup, image on top. */
  .a-river {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 16px;
    padding-top: 24px;
  }
  .a-river .a-row {
    flex-direction: column;
    gap: 8px;
  }
  .a-river .a-row > .a-ph {
    width: 100%;
  }
  .a-river .a-row .a-rt {
    font-size: 15px;
  }
  .a-river > .a-ad {
    grid-column: 1 / -1;
  }
  /* A story left alone on the last row closes the river as a wide card. */
  .a-river .a-row--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 20px;
  }
  .a-river .a-row--wide > .a-ph {
    width: 320px;
  }
  .a-river .a-row--wide .a-rt {
    font-size: 18px;
  }

  /* Game hub head: fact box beside the intro and Destaques. */
  .a-game-head {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 36px;
    align-items: start;
  }
  .a-game-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  h1.a-fact-title {
    font-size: 26px;
  }
  /* In the article tail the fact box spans the 680 px column, where a
     full-width cover would be the biggest image on the page after the
     lead. There the cover sits beside the title and the rows instead. */
  .a-art .a-fact {
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 16px;
    align-items: start;
  }
  .a-art .a-fact .a-cover {
    grid-row: 1 / 3;
  }

  /* Ads: the listing leaderboard and the sticky rail unit. */
  .a-ad--leader {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .a-ad--leader .a-ad-unit {
    min-height: 90px;
  }
  .a-ad--rail .a-ad-unit {
    min-height: 600px;
  }
  .a-ad--rect,
  .a-art .a-ad--rect {
    width: 100%;
    max-width: 336px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Próxima matéria: image beside the text. */
  .a-next {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items: center;
  }
  .a-next .a-ph {
    margin: 0;
  }
  .a-pag .lbl {
    display: inline;
  }
  /* Whole covers only: as many as fit, the rest clipped instead of a cut edge. */
  .a-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-template-rows: auto;
    grid-auto-rows: 0;
    row-gap: 0;
    overflow: hidden;
    padding-bottom: 0;
  }
  .a-game {
    width: auto;
  }
  .a-footer-in {
    padding: 28px 36px 36px;
  }
  .a-footer .cols {
    grid-template-columns: 2fr 1fr;
    max-width: 960px;
    gap: 36px;
  }
  .a-footer ul.g2 {
    grid-template-columns: repeat(4, 1fr);
  }
  .a-footer ul.g2p {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 14px;
  }
  .a-art .a-inline-wrap {
    max-width: 560px;
  }
}

/* The wordmark glitch: two tinted copies jitter behind the still one.
   ------------------------------------------------------------------ */
@keyframes glitch1 {
  0%, 10%, 27%, 35%, 52%, 60%, 72%, 80%, 100% { transform: none; opacity: 1; }
  7%  { transform: skew(-2.5deg, -1.88deg); opacity: 0.82; }
  30% { transform: skew(2.5deg, -1.88deg); opacity: 0.82; }
  55% { transform: skew(-1.88deg, 2.5deg); opacity: 0.82; }
  75% { transform: skew(2.5deg, 1.88deg); opacity: 0.82; }
}
/* translate, not transform: glitch1 already drives transform on the same
   elements; translate composes with it instead of being overridden. */
@keyframes glitch2 {
  0%, 10%, 27%, 35%, 52%, 60%, 72%, 80%, 100% { translate: none; opacity: 0.18; }
  7%  { translate: -1.25px -1.88px; opacity: 0.38; }
  30% { translate: -1.25px -0.63px; opacity: 0.38; }
  55% { translate: -0.63px -1.25px; opacity: 0.38; }
  75% { translate: -1.25px -0.63px; opacity: 0.38; }
}
@keyframes glitch3 {
  0%, 10%, 27%, 35%, 52%, 60%, 72%, 80%, 100% { translate: none; opacity: 0.18; }
  7%  { translate: 1.88px 1.25px; opacity: 0.38; }
  30% { translate: 1.25px 1.25px; opacity: 0.38; }
  55% { translate: 1.25px 0.63px; opacity: 0.38; }
  75% { translate: 1.25px 0.63px; opacity: 0.38; }
}
@media (prefers-reduced-motion: reduce) {
  .a-brand .a-mark {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

@media print {
  .a-header, .a-footer, .a-rail, .a-ad, .a-next-block, .a-related, .a-chips, .a-glinks, .a-share {
    display: none;
  }
}