/* ===== «Право голоса» — ulpan.space-inspired skin over Source =====
   Base note: Source sets html{font-size:62.5%} -> 1rem = 10px. Sizes below assume that. */

:root {
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Unbounded", "IBM Plex Sans", sans-serif;
  --font-serif-alt: "Unbounded", sans-serif;
  --font-mono: "IBM Plex Sans", monospace;

  --pg-ink: #201e1e;
  --pg-paper: #fcfcfc;
  --pg-blue: #0937fd;
  --pg-blue-press: #0726c2;
  --pg-red: #f3563c;
  --pg-yellow: #fde92f;

  --color-primary-text: var(--pg-ink);
  --color-secondary-text: rgba(32, 30, 30, .60);
  --color-border: rgba(32, 30, 30, .12);
  --background-color: var(--pg-paper);
  --ghost-accent-color: var(--pg-blue);
  --content-font-size: 2.1rem;        /* ~21px reading text */
}

html, body { background: var(--pg-paper); }
body {
  font-family: var(--font-sans);
  color: var(--pg-ink);
  font-size: 1.8rem;                  /* ~18px base, up from Source */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Display typography: Unbounded ---------- */
h1, h2, h3, h4,
.gh-article-title, .post-card-title, .gh-container-title,
.gh-cta-title, .gh-featured-title, .gh-about-title, .gh-error-title,
.gh-navigation-logo {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.06;
  color: var(--pg-ink);
}

.gh-navigation-logo { font-weight: 800; letter-spacing: -.035em; font-size: 2.3rem; }
.gh-article-title  { font-size: clamp(3.8rem, 2.4rem + 4.6vw, 7rem); font-weight: 800; text-wrap: balance; }
.post-card-title   { font-size: clamp(2.1rem, 1.7rem + 1.1vw, 3rem); font-weight: 700; }

/* Section heading ("СВЕЖЕЕ" etc.) -> loud blue kicker with a rule */
.gh-container-title {
  font-family: var(--font-serif);
  font-size: 1.4rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--pg-blue);
  display: flex; align-items: center; gap: 1.2rem;
}
.gh-container-title::after { content: ""; flex: 1 1 auto; height: 3px; background: var(--pg-blue); opacity: .9; }

/* ---------- Body copy ---------- */
.gh-content, p, li, .post-card-excerpt, .gh-article-excerpt { font-family: var(--font-sans); }
.gh-content { font-size: var(--content-font-size); line-height: 1.75; letter-spacing: -.003em; }
.gh-content p { font-size: 1em; margin: 0 0 1.5em; }
.gh-content li { font-size: 1em; }
.gh-content h2 { font-size: clamp(2.8rem, 2.1rem + 1.6vw, 3.8rem); margin-top: 2.1em; line-height: 1.12; }
.gh-content h3 { font-size: clamp(2.2rem, 1.9rem + 1vw, 2.8rem); margin-top: 1.6em; }
.gh-content a { color: var(--pg-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.gh-content blockquote { border: 0; padding-left: 1.6rem; box-shadow: inset 4px 0 0 var(--pg-red); font-style: normal; }
.post-card-excerpt { font-size: 1.7rem; line-height: 1.5; }

a { color: var(--pg-blue); }
.post-card-title a, .gh-navigation-menu a, .gh-navigation-logo { color: inherit; text-decoration: none; }
.post-card:hover .post-card-title { color: var(--pg-blue); }

/* ---------- Buttons: solid electric-blue pills ---------- */
.gh-button, button.gh-button, .gh-head-button, .gh-form .gh-button {
  background: var(--pg-blue); color: #fff;
  font-family: var(--font-sans); font-weight: 600; border: 0;
  border-radius: 999px; padding: .72em 1.5em; font-size: 1.6rem; letter-spacing: .005em;
  transition: background .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1);
}
.gh-button:hover { background: var(--pg-blue-press); transform: translateY(-1px); }
.gh-navigation-members a:not(.gh-button) { color: var(--pg-ink); font-weight: 600; font-size: 1.6rem; }

/* ---------- Hero / CTA: blue drench, white Unbounded headline ---------- */
.gh-cta, .gh-cta-inner { background: var(--pg-blue); }
.gh-cta, .gh-cta * { color: #fff; border-color: rgba(255,255,255,.35); }
.gh-cta-title { font-weight: 900; font-size: clamp(3.4rem, 2rem + 4.4vw, 6.4rem); }
.gh-cta .gh-button { background: #fff; color: var(--pg-blue); }
.gh-cta .gh-button:hover { background: var(--pg-yellow); color: var(--pg-ink); }
.gh-cta .gh-form-input { background: rgba(255,255,255,.96); color: var(--pg-ink); border: 0; font-size: 1.6rem; }

/* ---------- Section tags / kickers ---------- */
.post-card-tags, .post-card-meta a[href*="/tag/"], .gh-article-tag {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--pg-blue);
}

/* ---------- Imagery framing ---------- */
.post-card-image, .gh-article-image, .gh-featured-image img { border-radius: 16px; }

/* ---------- Misc ---------- */
::selection { background: var(--pg-yellow); color: var(--pg-ink); }
.gh-navigation { border-bottom: 2px solid var(--pg-ink); }
.gh-footer { border-top: 2px solid var(--pg-ink); font-family: var(--font-sans); }
.gh-search.gh-icon-button:hover, .gh-burger:hover { color: var(--pg-blue); }

/* ---------- Section chips on the homepage (same grid width as the feed) ---------- */
.gh-topics .gh-container-title { display: flex !important; }   /* Source hides titles on card-less containers */
.gh-topics .gh-main { padding: 0; }
.gh-topics-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.gh-topic {
  display: inline-flex; align-items: baseline; gap: .7rem;
  font-family: var(--font-sans); font-weight: 600; font-size: 1.6rem;
  color: var(--pg-ink); text-decoration: none;
  border: 2px solid var(--pg-ink); border-radius: 999px; padding: .5rem 1.4rem;
  transition: background .15s, color .15s, border-color .15s;
}
.gh-topic:hover { background: var(--pg-blue); border-color: var(--pg-blue); color: #fff; }
.gh-topic-count { font-size: 1.25rem; opacity: .5; font-weight: 700; }
.gh-topic:hover .gh-topic-count { opacity: .9; color: #fff; }

/* Card section tag, now a link */
.gh-card-tag, a.gh-card-tag {
  display: inline-block; color: var(--pg-blue); text-decoration: none;
  font-family: var(--font-sans); font-weight: 700; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: .09em;
}
.gh-card-tag:hover { text-decoration: underline; }

/* ---------- Whole-card link via overlay; tag chip stays its own link ----------
   .gh-card-link stays a <div> with its original class so ALL of Source's
   responsive layout (incl. mobile media queries) keeps working untouched. */
.gh-card-cover { position: absolute; inset: 0; z-index: 1; }
.gh-card-tag { position: relative; z-index: 2; width: max-content; }
.gh-card:hover .gh-card-title { opacity: .8; }