/* ═══════════════════════════════════════════════════════════════════════
   ZHURMA — gazeta.css · the one stylesheet · v10 (2026-07-23)
   Gazeta popullore: heavy black headlines, thick rules, red bars, dense.
   Newsprint + red. Light only — one edition, paper, always.
   System fonts only: 0 bytes shipped, instant text on every device.
   No build step. Edit this file, bump theme version, activate.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --paper: #FCFBF8;
  --paper-dim: #F4F1EA;      /* wells, table stripes */
  --ink: #111111;
  --ink-2: #3d3a36;          /* secondary text */
  --ink-3: #6e6a63;          /* metadata */
  --red: #CC1B2B;
  --red-ink: #A31423;        /* red on paper needing contrast (links) */
  --hair: #DCD7CC;           /* hairline rules */
  --rule: #111111;           /* thick rules are ink */
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", Times, serif;
  --shell: 1100px;
  --measure: 700px;
}

/* ── reset (tiny) ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 2px; }
h1,h2,h3,h4 { font-family: var(--sans); font-weight: 900; line-height: 1.08; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 3px solid var(--rule); margin: 24px 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.g-shell { max-width: var(--shell); margin: 0 auto; padding: 0 14px; }

/* ── masthead ─────────────────────────────────────────────────────── */
.g-topline { background: var(--ink); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.g-topline .g-shell { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; padding-bottom: 6px; gap: 10px; }
.g-topline a { color: #fff; }
.g-mast { text-align: center; padding: 18px 0 10px; }
.g-mast-word { font-family: var(--sans); font-weight: 900; font-size: clamp(46px, 9vw, 84px); letter-spacing: -0.03em; line-height: .9; display: inline-block; }
.g-mast-word a:hover { text-decoration: none; }
.g-mast-word .g-red { color: var(--red); }
.g-tagline { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.g-dateline-band { background: var(--red); color: #fff; font-family: var(--sans); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.g-dateline-band .g-shell { display: flex; justify-content: space-between; align-items: center; padding-top: 7px; padding-bottom: 7px; gap: 10px; }
.g-dateline-band a { color: #fff; }

/* section nav: horizontal strip, thick rules, scrolls on mobile — no JS */
.g-nav { border-top: 3px solid var(--rule); border-bottom: 3px solid var(--rule); background: var(--paper); }
.g-nav-row { display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.g-nav-row::-webkit-scrollbar { display: none; }
.g-nav a { font-family: var(--sans); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 12px; white-space: nowrap; flex: 0 0 auto; }
.g-nav a:hover { background: var(--ink); color: #fff; text-decoration: none; }
.g-nav a.g-nav-treguesi { color: var(--red-ink); }
.g-nav a.g-nav-treguesi:hover { background: var(--red); color: #fff; }

/* ── section bars & band headers ──────────────────────────────────── */
.g-secbar { display: flex; align-items: baseline; gap: 10px; background: var(--red); color: #fff; padding: 6px 10px; font-family: var(--sans); font-weight: 900; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 10px; }
.g-secbar a { color: #fff; }
.g-secbar .g-secbar-more { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.g-secbar--ink { background: var(--ink); }
.g-bandhead { border-top: 6px solid var(--rule); padding-top: 6px; margin: 30px 0 12px; display: flex; align-items: baseline; gap: 12px; }
.g-bandhead h2 { font-size: 22px; text-transform: uppercase; }
.g-bandhead .g-bandhead-more { margin-left: auto; font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--red-ink); white-space: nowrap; }

/* ── the river (dense title rows) ─────────────────────────────────── */
.g-river { margin: 0; padding: 0; list-style: none; }
.g-river li { border-bottom: 1px solid var(--hair); padding: 9px 0; }
.g-river li:last-child { border-bottom: 0; }
.g-riverrow { display: block; }
.g-riverrow:hover { text-decoration: none; }
.g-riverrow:hover .g-rr-title { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.g-rr-meta { font-family: var(--sans); font-weight: 700; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; }
.g-rr-meta .g-rr-kicker { color: var(--red-ink); }
.g-rr-title { font-family: var(--sans); font-weight: 800; font-size: 17.5px; line-height: 1.18; letter-spacing: -0.01em; margin-top: 2px; display: block; color: var(--ink); }
.g-river--big .g-rr-title { font-size: 20px; font-weight: 900; }
.g-rr-excerpt { font-family: var(--serif); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); margin-top: 3px; }

/* ── cards (photo + title) ────────────────────────────────────────── */
.g-card { display: block; }
.g-card:hover { text-decoration: none; }
.g-card:hover .g-card-title { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.g-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-dim); border: 1px solid var(--hair); margin-bottom: 7px; }
.g-card-img img { width: 100%; height: 100%; object-fit: cover; }
.g-card-title { font-family: var(--sans); font-weight: 900; font-size: 18px; line-height: 1.14; display: block; color: var(--ink); }
.g-card-meta { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

/* ── front page ───────────────────────────────────────────────────── */
.g-lead { display: block; border-bottom: 6px solid var(--rule); padding: 18px 0 20px; }
.g-lead:hover { text-decoration: none; }
.g-lead-kick { display: inline-block; background: var(--red); color: #fff; font-family: var(--sans); font-weight: 900; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; margin-bottom: 10px; }
.g-lead-title { font-size: clamp(32px, 6vw, 62px); line-height: 1.0; letter-spacing: -0.025em; color: var(--ink); }
.g-lead:hover .g-lead-title { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.g-lead-dek { font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--ink-2); margin-top: 10px; max-width: 820px; }
.g-lead-img { margin-top: 14px; border: 1px solid var(--hair); }
.g-lead-meta { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.g-front-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 26px; margin-top: 22px; }
.g-front-grid > section { min-width: 0; }
.g-front-grid .g-river li { padding: 8px 0; }
.g-band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g-strip { border-top: 3px solid var(--rule); border-bottom: 1px solid var(--hair); padding: 10px 0; margin-top: 26px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.g-strip-label { font-family: var(--sans); font-weight: 900; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); white-space: nowrap; }
.g-strip a { font-family: var(--serif); font-size: 16px; font-style: italic; color: var(--ink); }

/* ── article ──────────────────────────────────────────────────────── */
.g-art { max-width: var(--measure); margin: 0 auto; padding: 22px 0 10px; }
.g-crumb { font-family: var(--sans); font-weight: 700; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.g-crumb a:hover { color: var(--red-ink); }
.g-kick { display: inline-block; background: var(--red); color: #fff; font-family: var(--sans); font-weight: 900; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; margin-bottom: 12px; }
.g-kick--live::before { content: "●"; margin-right: 7px; }
.g-headline { font-size: clamp(30px, 5.4vw, 48px); line-height: 1.03; letter-spacing: -0.02em; }
.g-dek { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.42; color: var(--ink-2); margin: 12px 0 0; }
.g-byrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--hair); margin-top: 16px; padding: 9px 0; font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.g-byrow .g-by { color: var(--ink); }
.g-byrow time, .g-byrow .g-when { color: var(--ink-3); }
.g-byrow .g-ruaj { margin-left: auto; }
.g-hero { margin: 16px 0 4px; }
.g-hero img { width: 100%; border: 1px solid var(--hair); }
.g-foto { font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 5px 0 0; }
.g-foto a { color: var(--ink-3); text-decoration: underline; }

.g-body { font-size: 18px; line-height: 1.6; margin-top: 18px; }
.g-body > p:first-child::first-letter { font-family: var(--sans); font-weight: 900; font-size: 3.1em; line-height: .82; float: left; padding: 4px 8px 0 0; color: var(--red); }
.g-body h2, .g-body h3 { font-size: 24px; margin: 26px 0 10px; border-left: 6px solid var(--red); padding-left: 10px; }
.g-body h3 { font-size: 20px; }
.g-body a { color: var(--red-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.g-body blockquote { border-left: 6px solid var(--rule); margin: 20px 0; padding: 4px 0 4px 16px; font-size: 20px; font-style: italic; color: var(--ink-2); }
.g-body figure { margin: 20px 0; }
.g-body figcaption { font-family: var(--sans); font-size: 12px; color: var(--ink-3); padding-top: 5px; }
.g-body ul, .g-body ol { padding-left: 24px; }
.g-body img { border: 1px solid var(--hair); }
.g-body .kg-card, .g-body .kg-embed-card iframe { max-width: 100%; }
.g-body hr { border-top: 1px solid var(--hair); }
.g-body table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 15px; }
.g-body th, .g-body td { border: 1px solid var(--hair); padding: 6px 9px; text-align: left; }
.g-body th { background: var(--paper-dim); font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; }
.g-body tr:nth-child(even) td { background: var(--paper-dim); }

/* ── discovery block on every article ─────────────────────────────── */
.g-discover { max-width: var(--measure); margin: 26px auto 0; }
.g-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-top: 6px solid var(--rule); }
.g-prevnext a { padding: 12px 10px; background: var(--paper-dim); }
.g-prevnext a:hover { background: var(--ink); color: #fff; text-decoration: none; }
.g-prevnext .g-pn-dir { font-family: var(--sans); font-weight: 900; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); display: block; }
.g-prevnext a:hover .g-pn-dir { color: #fff; }
.g-prevnext .g-pn-title { font-family: var(--sans); font-weight: 800; font-size: 15px; line-height: 1.2; display: block; margin-top: 4px; }
.g-prevnext .g-pn--next { text-align: right; }
.g-morefrom { margin-top: 24px; }

/* ── comments ─────────────────────────────────────────────────────── */
.g-comments { max-width: var(--measure); margin: 30px auto 0; border-top: 6px solid var(--rule); padding-top: 10px; }

/* ── pagination ───────────────────────────────────────────────────── */
.g-pgn { display: flex; justify-content: space-between; align-items: center; border-top: 3px solid var(--rule); margin-top: 26px; padding: 12px 0; font-family: var(--sans); font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.g-pgn a { border: 3px solid var(--rule); padding: 8px 16px; }
.g-pgn a:hover { background: var(--ink); color: #fff; text-decoration: none; }
.g-pgn .g-pgn-page { font-size: 12px; color: var(--ink-3); font-weight: 700; }

/* ── wire / live rooms ────────────────────────────────────────────── */
.g-livehead { display: flex; align-items: center; gap: 12px; border-bottom: 6px solid var(--rule); padding: 16px 0 12px; flex-wrap: wrap; }
.g-livehead h1 { font-size: clamp(26px, 5vw, 40px); text-transform: uppercase; }
.g-livemark { background: var(--red); color: #fff; font-family: var(--sans); font-weight: 900; font-size: 12px; letter-spacing: .1em; padding: 4px 10px; text-transform: uppercase; }
.g-livemark::before { content: "●"; margin-right: 6px; }
.g-livenote { font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-left: auto; }
.g-wire { margin: 0; padding: 0; list-style: none; }
.g-wire li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; border-bottom: 1px solid var(--hair); padding: 11px 0; }
.g-wire time { font-family: var(--sans); font-weight: 900; font-size: 14px; color: var(--red-ink); padding-top: 2px; }
.g-wire .g-rr-title { font-size: 18px; }

/* ── footer (black band, dense index) ─────────────────────────────── */
.g-footer { background: var(--ink); color: #EDE9E1; margin-top: 44px; font-family: var(--sans); }
.g-footer .g-shell { padding-top: 26px; padding-bottom: 30px; }
.g-foot-word { font-weight: 900; font-size: 34px; letter-spacing: -0.02em; color: #fff; }
.g-foot-word .g-red { color: var(--red); }
.g-foot-tag { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #B8B2A6; margin: 2px 0 18px; }
.g-foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; border-top: 1px solid #33302B; padding-top: 16px; }
.g-foot-grid h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.g-foot-grid ul { list-style: none; margin: 0; padding: 0; }
.g-foot-grid li { margin: 0 0 6px; }
.g-foot-grid a { color: #EDE9E1; font-size: 14px; font-weight: 600; }
.g-foot-legal { border-top: 1px solid #33302B; margin-top: 20px; padding-top: 12px; font-size: 12px; color: #8F8A80; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.g-foot-legal a { color: #B8B2A6; }

/* ── forms (abonohu) & buttons ────────────────────────────────────── */
.g-btn { display: inline-block; font-family: var(--sans); font-weight: 900; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; border: 3px solid var(--rule); background: var(--paper); color: var(--ink); padding: 9px 18px; cursor: pointer; }
.g-btn:hover { background: var(--ink); color: #fff; text-decoration: none; }
.g-btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.g-btn--red:hover { background: var(--red-ink); border-color: var(--red-ink); }
.g-btn--small { font-size: 11px; padding: 4px 10px; border-width: 2px; }
.g-field { font-family: var(--sans); font-size: 17px; padding: 10px 12px; border: 3px solid var(--rule); background: #fff; color: var(--ink); width: 100%; }
.g-formrow { display: flex; gap: 10px; }
.g-formrow .g-field { flex: 1; }
.g-notice { border: 3px solid var(--rule); background: var(--paper-dim); padding: 14px 16px; font-family: var(--sans); font-size: 15px; font-weight: 600; }
.g-notice--ok { border-color: #1a7a3a; }
.g-notice--err { border-color: var(--red); }

/* ── details/summary (native accordion) ───────────────────────────── */
details.g-fold { border-top: 1px solid var(--hair); }
details.g-fold summary { font-family: var(--sans); font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.g-fold summary::-webkit-details-marker { display: none; }
details.g-fold summary::before { content: "+"; color: var(--red); font-size: 20px; line-height: 1; }
details.g-fold[open] summary::before { content: "–"; }
details.g-fold > div { padding: 0 0 14px; }

/* ── treguesi / tema / index pages ────────────────────────────────── */
.g-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 26px; }
.g-index-grid > section { min-width: 0; margin-bottom: 22px; }
.g-tagdir { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 14px; }
.g-tagdir a { font-family: var(--sans); font-weight: 800; font-size: 14px; border: 2px solid var(--rule); padding: 5px 11px; }
.g-tagdir a:hover { background: var(--ink); color: #fff; text-decoration: none; }
.g-tagdir .g-tag-n { color: var(--ink-3); font-weight: 700; font-size: 12px; }
.g-tagdir a:hover .g-tag-n { color: #ccc; }

/* ── page head (sections) ─────────────────────────────────────────── */
.g-pagehead { border-bottom: 6px solid var(--rule); padding: 18px 0 12px; }
.g-pagehead h1 { font-size: clamp(28px, 5vw, 44px); text-transform: uppercase; }
.g-pagehead .g-pagehead-dek { font-family: var(--serif); font-size: 16px; color: var(--ink-2); margin-top: 6px; max-width: 720px; }

/* ── burimet ──────────────────────────────────────────────────────── */
.g-body .g-burimet, .g-body h2#burimet + ul { font-family: var(--sans); font-size: 14px; }

/* ═══ MUZEU (carried contract: exhibit graph + epoch chrome) ═══════ */
.ex-graph { width: 100%; min-height: 320px; border: 1px solid var(--hair); background: #fff; margin: 18px 0; }
.ex-graph svg { display: block; width: 100%; }
/* NO `fill` here: exhibit-graph.js sets each circle's fill from its node TYPE
   (person/place/event/org/work/heritage/link/center). A CSS `fill` property beats
   the SVG presentation attribute, so the flat `fill: var(--red)` the v10 cutover
   introduced silently painted every node — centre included — the same red and
   killed the whole semantic layer corpus-wide. Restored 2026-07-23. */
.ex-graph__node circle { stroke: var(--ink); stroke-width: 1; }
.ex-graph__node text { font-family: var(--sans); font-size: 12.5px; font-weight: 700; fill: var(--ink); }
.ex-graph__link { stroke: #B8B2A6; stroke-width: 1.2; }
.ex-graph__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--ink-2); margin: -8px 0 6px; }
.ex-graph__legend span { display: inline-flex; align-items: center; gap: 6px; }
.ex-graph__legend i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ink); display: inline-block; flex: none; }
.g-exhibit-meta { border: 3px solid var(--rule); background: var(--paper-dim); padding: 14px 16px; font-family: var(--sans); font-size: 14px; margin: 16px 0; }
.g-exhibit-meta dt { font-weight: 900; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; color: var(--red-ink); margin-top: 8px; }
.g-exhibit-meta dd { margin: 2px 0 0; }
.g-epochstrip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.g-epochstrip a { font-family: var(--sans); font-weight: 800; font-size: 13px; border: 2px solid var(--rule); padding: 5px 11px; white-space: nowrap; flex: 0 0 auto; }
.g-epochstrip a:hover { background: var(--ink); color: #fff; text-decoration: none; }

/* ── print: the gazeta prints like a gazeta ───────────────────────── */
@media print {
  .g-topline, .g-nav, .g-footer, .g-prevnext, .g-comments, .g-ruaj { display: none !important; }
  body { font-size: 11pt; }
}

/* ── desktop ↓ tablet ↓ mobile ────────────────────────────────────── */
@media (max-width: 900px) {
  .g-front-grid { grid-template-columns: 1fr 1fr; }
  .g-band-grid { grid-template-columns: 1fr 1fr; }
  .g-index-grid { grid-template-columns: 1fr 1fr; }
  .g-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .g-front-grid, .g-band-grid, .g-index-grid { grid-template-columns: 1fr; }
  .g-front-grid > section { border-top: 3px solid var(--rule); padding-top: 8px; }
  .g-body { font-size: 17.5px; }
  .g-wire li { grid-template-columns: 52px 1fr; }
  .g-formrow { flex-direction: column; }
  .g-prevnext { grid-template-columns: 1fr; }
  .g-prevnext .g-pn--next { text-align: left; }
  .g-foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══ MATCH BOARD (scraper contract: kosovari-matches-scrape.sh .mb-*) ══ */
.g-matchboard { border: 3px solid var(--rule); padding: 12px 14px; margin: 16px 0; }
.g-matchboard .mb-hub__k { font-family: var(--sans); font-weight: 900; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); }
.g-matchboard .mb-hub__t { font-family: var(--sans); font-weight: 900; font-size: 22px; margin: 2px 0 8px; }
.g-matchboard .mb-intro { font-family: var(--serif); font-size: 15px; color: var(--ink-2); }
.g-matchboard .mb-list { list-style: none; margin: 10px 0 0; padding: 0; }
.g-matchboard .mb-game { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--hair); padding: 10px 0; }
.g-matchboard .mb-side { display: flex; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 800; font-size: 15px; min-width: 0; }
.g-matchboard .mb-team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-matchboard .mb-flag { width: 22px; height: 15px; object-fit: cover; border: 1px solid var(--hair); flex: 0 0 auto; }
.g-matchboard .mb-center { font-family: var(--sans); font-weight: 900; font-size: 13px; color: var(--ink-3); }
.g-matchboard .mb-badge { font-family: var(--sans); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--paper-dim); border: 1px solid var(--hair); padding: 2px 7px; }
.g-matchboard .mb-cta { margin-left: auto; }
.g-matchboard .mb-link { font-family: var(--sans); font-weight: 900; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--red); padding: 6px 12px; display: inline-block; }
.g-matchboard .mb-link:hover { background: var(--red-ink); text-decoration: none; }
@media (max-width: 620px) {
  .g-matchboard .mb-game { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .g-matchboard .mb-cta { margin-left: 0; }
  .g-matchboard .mb-link { display: block; text-align: center; }
}

/* ═══ Ghost card widths (gscan contract) ═══ */
.g-body .kg-width-wide { max-width: 900px; margin-left: 50%; transform: translateX(-50%); width: 96vw; }
.g-body .kg-width-full { max-width: none; margin-left: 50%; transform: translateX(-50%); width: 96vw; }
@media (min-width: 1150px) { .g-body .kg-width-wide, .g-body .kg-width-full { width: 1080px; } }

/* ═══ TOP 10 — the chart band at the very top of the ballina ═══ */
.g-top10 { border-bottom: 6px solid var(--rule); padding: 12px 0 10px; }
.g-top10-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.g-top10-badge { background: var(--ink); color: #fff; font-family: var(--sans); font-weight: 900; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; }
.g-top10-badge::before { content: "▮"; color: var(--red); margin-right: 6px; }
.g-top10-sub { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.g-top10-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; counter-reset: none; }
.g-top10-list li { border-bottom: 1px solid var(--hair); }
.g-top10-list li:nth-child(5n) { border-bottom: 1px solid var(--hair); }
.g-top10-list a { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; }
.g-top10-list a:hover { text-decoration: none; }
.g-top10-list a:hover .g-top10-t { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.g-top10-n { font-family: var(--sans); font-weight: 900; font-size: 22px; line-height: 1; color: var(--red); min-width: 26px; text-align: right; flex: 0 0 auto; }
.g-top10-t { font-family: var(--sans); font-weight: 800; font-size: 15.5px; line-height: 1.2; }
@media (max-width: 620px) { .g-top10-list { grid-template-columns: 1fr; } }

/* ═══ Ruaj feedback popover ═══ */
.g-pop { position: fixed; inset: auto auto 18px 50%; transform: translateX(-50%); margin: 0; border: 3px solid var(--rule); background: var(--ink); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 14.5px; padding: 11px 18px; max-width: 92vw; }
.g-pop a { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.g-pop::backdrop { background: transparent; }

/* Audit hardening: the mind-map section only appears when its data parses
   (exhibit-graph.js flips display) — no empty drag-box for missing data. */
.ex-map { display: none; }