/* Blogpublika.com */
:root {
  --bp-accent: #ed1a3b;
  --bp-accent-deep: #c0152f;
  --bp-accent-dark: #a01228;
  --bp-ink: #292929;
  --bp-ink-strong: #1a1a1a;
  --bp-shell: #1a1a1a;
  --bp-paper: #ffffff;
  --bp-muted: #666666;
  --bp-soft: #444444;
  --bp-soft-mid: #555555;
  --bp-soft-dark: #5a5a5a;
  --bp-faint: #999999;
  --bp-faint-dark: #888888;
  --bp-rule: #eaeaea;
  --bp-rule-soft: #dddddd;
  --bp-rule-light: #eeeeee;
  --bp-bar-text: #aaaaaa;
  --bp-bar-link: #bbbbbb;
  --bp-bar-soft: #cccccc;
  --bp-bar-rule: #2a2a2a;
  --bp-wash: #fafafa;
  --bp-callout: #fff6f7;
  --bp-display: 'Publika Serif', Georgia, 'Times New Roman', serif;
  --bp-text: 'Publika Serif', Georgia, 'Times New Roman', serif;
  --bp-label: 'Publika Label', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bp-base: 15px;
  --bp-page: 1024px;
}
/* gazeta — Polish public-affairs weekly.
   Ported from blogpublika.c-com's own build (2026-05): the black/red/white system, the
   dark utility strip, the red-ruled category band, the megaspot, the three-up row, the
   sectioned feed and the 660/290 split are what its indexed pages already look like.
   Every class here is rewritten through Naming, every var() through the css prefix.

   FONTS ARE SELF-HOSTED, and the substitution is deliberate. The live site asks Google
   for Droid Serif, which a static build may not do — and which would be the wrong font
   anyway: Droid Serif has no latin-ext subset, so on a POLISH site sixteen of the
   eighteen accented letters fall back to Georgia inside the word. The serif here is
   Noto Serif, Droid Serif's own successor by the same designer, subset to Latin plus
   the Polish alphabet; the label face is Lato, as before. Same design, one font per
   word, no external request. Files and licence in <domain>/assets/fonts/. */

@font-face {
  font-family: "Publika Serif";
  src: url("/assets/fonts/bp-serif.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Publika Serif";
  src: url("/assets/fonts/bp-serif-i.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Publika Label";
  src: url("/assets/fonts/bp-label-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Publika Label";
  src: url("/assets/fonts/bp-label-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Publika Label";
  src: url("/assets/fonts/bp-label-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; font-size: var(--bp-base); }

body {
  margin: 0;
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: var(--bp-text);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a {
  color: var(--bp-accent-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover { color: var(--bp-accent-dark); border-bottom-color: var(--bp-accent-dark); }

ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
p { margin: 0 0 1.1em; }

h1, h2, h3, h4 {
  font-family: var(--bp-display);
  font-weight: 700;
  color: var(--bp-ink-strong);
  margin: 0 0 .6em;
  line-height: 1.25;
}
h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.18rem; }

:focus-visible { outline: 2px solid var(--bp-accent); outline-offset: 2px; }

.c-skip {
  position: absolute; left: 0; top: 0; z-index: 200;
  background: var(--bp-shell); color: #fff;
  padding: .6rem 1rem;
  font-family: var(--bp-label); font-weight: 700;
  border: none;
  clip-path: inset(50%);
}
.c-skip:focus { clip-path: none; }

/* DATE STRIP — the archive span, not today's date */
.c-datebar {
  margin: 0;
  background: var(--bp-shell); color: var(--bp-bar-text);
  font-family: var(--bp-label); font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .4rem 1rem; text-align: center;
}

/* TOPBAR */
.c-topbar { background: var(--bp-shell); border-bottom: 1px solid var(--bp-bar-rule); }
.c-topbar-inner {
  max-width: var(--bp-page); margin: 0 auto; padding: 0 1.5rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.c-topbar-links { display: flex; flex-wrap: wrap; }
.c-topbar-links a {
  font-family: var(--bp-label); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bp-bar-link); padding: .7rem .9rem; border: none;
  display: block; min-height: 44px; line-height: 1.6;
}
.c-topbar-links a:first-child { padding-left: 0; }
.c-topbar-links a:hover, .c-topbar-links a[aria-current] { color: var(--bp-accent); }

/* MASTHEAD */
.c-masthead { background: var(--bp-paper); border-bottom: 1px solid var(--bp-rule-light); }
.c-masthead-inner {
  max-width: var(--bp-page); margin: 0 auto; padding: 1.6rem 1.5rem 1.4rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.c-brand { text-align: left; }
.c-wordmark {
  font-family: var(--bp-display); font-size: 2.4rem; font-weight: 700; line-height: 1;
  color: var(--bp-ink-strong); letter-spacing: -.01em; margin: 0;
}
.c-wordmark a { color: inherit; border: none; display: inline-block; }
.c-wordmark a:hover { color: var(--bp-ink-strong); }
.c-accent { color: var(--bp-accent); }
.c-tagline {
  font-family: var(--bp-display); font-style: italic; font-size: .95rem;
  color: var(--bp-muted); margin: .45rem 0 0;
}
.c-masthead-extra {
  font-family: var(--bp-label); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bp-soft-dark); text-align: right; line-height: 1.6; margin: 0;
}
.c-masthead-extra strong {
  display: block; color: var(--bp-ink-strong); font-size: .85rem;
  letter-spacing: .06em; margin-bottom: .2rem;
}

/* CATEGORY NAV */
.c-catnav { background: var(--bp-shell); border-bottom: 3px solid var(--bp-accent); }
.c-catnav-inner { max-width: var(--bp-page); margin: 0 auto; padding: 0 1.5rem; }
.c-menu { list-style: none; display: flex; flex-wrap: wrap; }
.c-menu a {
  font-family: var(--bp-label); font-size: .78rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  padding: 1rem 1.05rem; border: none; border-bottom: 3px solid transparent;
  margin-bottom: -3px; display: block; min-height: 44px; line-height: 1.4;
}
.c-menu li:first-child a { padding-left: 0; }
.c-menu a:hover, .c-here a { color: var(--bp-accent); border-bottom-color: var(--bp-accent); }

/* MAIN */
.c-main {
  max-width: var(--bp-page); margin: 0 auto; padding: 2.2rem 1.5rem 3rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 34px; align-items: start;
}
.c-column { min-width: 0; }

.c-dateline {
  font-family: var(--bp-label); font-size: .7rem; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bp-accent-deep);
  margin: 0 0 .65rem;
}
.c-dateline time { color: inherit; }
.c-sep { margin: 0 .35em; color: var(--bp-faint); }

/* Thumb */
.c-thumb {
  display: block; width: 100%; aspect-ratio: 3 / 2;
  border: 1px solid var(--bp-rule-light); position: relative; overflow: hidden;
  background: var(--bp-shell);
}
.c-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
a.c-thumb:hover { border-color: var(--bp-accent); }

/* Megaspot */
.c-megaspot {
  background: var(--bp-shell); color: #fff; margin-bottom: 2.4rem;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: stretch;
  border-left: 4px solid var(--bp-accent); overflow: hidden;
}
.c-megaspot .c-thumb { aspect-ratio: auto; height: 100%; min-height: 240px; border: none; }
.c-megaspot-body { padding: 2rem 2rem 1.8rem; }
.c-megaspot .c-dateline { color: var(--bp-accent); margin-bottom: .65rem; }
.c-megaspot .c-sep { color: var(--bp-faint-dark); }
.c-megaspot h2 { color: #fff; font-size: 1.9rem; line-height: 1.2; margin: 0 0 .5em; }
.c-megaspot h2 a { color: #fff; border: none; }
.c-megaspot h2 a:hover { color: var(--bp-accent); }
.c-megaspot p, .c-megaspot-excerpt p { color: var(--bp-bar-soft); font-size: .97rem; line-height: 1.55; margin: 0 0 1.1em; }
.c-megaspot-excerpt a { color: #fff; border-bottom-color: rgba(255,255,255,.35); }
.c-more {
  display: inline-block; background: var(--bp-accent); color: #fff;
  font-family: var(--bp-label); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 900; padding: .85em 1.2em;
  border: none; min-height: 44px; line-height: 1.2;
}
.c-more:hover { background: var(--bp-accent-dark); color: #fff; }

/* Polecane row */
.c-polecane {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  margin: 0 0 2.4rem; padding: 1.4rem 0 1.6rem;
  border-top: 1px solid var(--bp-rule-soft); border-bottom: 1px solid var(--bp-rule-soft);
}
.c-polecane-heading {
  grid-column: 1 / -1; font-family: var(--bp-label); font-size: .72rem; font-weight: 900;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bp-ink-strong);
  margin: 0 0 .6rem; border-bottom: 2px solid var(--bp-accent); padding-bottom: .4rem;
  display: flex; align-items: center; gap: .5em;
}
.c-polecane-heading::before { content: "●"; color: var(--bp-accent); }
.c-polecane-card { display: flex; flex-direction: column; gap: .65rem; }
.c-polecane-card .c-thumb { aspect-ratio: 5 / 3; }
.c-polecane-card .c-dateline { font-size: .62rem; margin: 0; }
.c-polecane-card h3 { font-size: .95rem; line-height: 1.3; margin: 0; }
.c-polecane-card h3 a { color: var(--bp-ink-strong); border: none; }
.c-polecane-card h3 a:hover { color: var(--bp-accent-deep); }
.c-card-dek { font-size: .8rem; color: var(--bp-soft); line-height: 1.45; margin: .2rem 0 0; }

/* Feed */
.c-feed { list-style: none; }
.c-feed-section {
  font-family: var(--bp-label); font-size: .78rem; font-weight: 900;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bp-ink-strong);
  margin: 1.6rem 0 .4rem; padding-bottom: .4rem; border-bottom: 2px solid var(--bp-accent);
}
.c-feed-section h2 { font: inherit; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.c-feed-section h2 span { display: inline-flex; align-items: center; gap: .5em; }
.c-feed-section h2 span::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--bp-accent); }
.c-feed-section a { font-weight: 700; letter-spacing: .12em; }
.c-feed-item {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.2rem; align-items: start;
  padding: 1.4rem 0; border-bottom: 1px solid var(--bp-rule);
}
.c-feed-item:last-child { border-bottom: none; }
.c-feed-item .c-thumb { aspect-ratio: 3 / 2; }
.c-feed-text { min-width: 0; }
.c-feed-item h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 .35em; }
.c-feed-item h3 a { color: var(--bp-ink-strong); border: none; }
.c-feed-item h3 a:hover { color: var(--bp-accent-deep); }
.c-feed-item p { font-size: .92rem; line-height: 1.55; color: var(--bp-soft); margin: 0; }
/* the dateline is a <p> too: the generic feed paragraph rule above would zero its
   margin and crowd the heading under it (layout_audit, 14 findings per width) */
.c-feed-item .c-dateline { margin: 0 0 .65rem; }
.c-feed-item-lead { grid-template-columns: 1fr; gap: .8rem; }
.c-feed-item-noimg { grid-template-columns: 1fr; }
.c-feed-item-lead .c-thumb { aspect-ratio: 21 / 9; }
.c-feed-item-lead h3 { font-size: 1.45rem; }

/* RAIL */
.c-rail { font-family: var(--bp-text); min-width: 0; }
.c-widget { margin-bottom: 1.8rem; }
.c-widget-title {
  font-family: var(--bp-label); font-size: .74rem; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bp-ink-strong);
  margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 3px double var(--bp-accent);
}
.c-widget-list { list-style: none; }
.c-widget-list li {
  margin-bottom: .65rem; padding-bottom: .65rem; border-bottom: 1px dotted var(--bp-rule-soft);
  font-size: .88rem; line-height: 1.4;
}
.c-widget-list li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.c-kicker {
  display: block; font-family: var(--bp-label); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bp-accent-deep); font-weight: 900; margin-bottom: .18rem;
}
.c-widget-list a { color: var(--bp-ink-strong); border: none; font-weight: 700; }
.c-widget-list a:hover { color: var(--bp-accent-deep); }
.c-widget-lead { font-size: .95rem; font-weight: 700; margin: 0 0 .4rem; }
.c-widget-lead a { color: var(--bp-ink-strong); border: none; }
.c-widget-lead a:hover { color: var(--bp-accent-deep); }
.c-widget-note { font-size: .86rem; margin: 0; color: var(--bp-soft); font-style: italic; }

/* ARTICLE */
.c-art { margin: 0; }
.c-art-hero { margin: 0 0 1.6rem; }
.c-art-hero .c-thumb { aspect-ratio: 16 / 9; }
.c-art-hero figcaption {
  font-family: var(--bp-label); font-size: .74rem; color: var(--bp-soft-mid);
  letter-spacing: .04em; margin-top: .4rem; font-style: italic;
}
.c-art-head { margin: 0 0 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bp-rule); }
.c-art-head .c-dateline { margin-bottom: .5rem; }
.c-art-head h1 { margin: 0 0 .5em; }
.c-lede { font-size: 1.13rem; line-height: 1.55; color: var(--bp-ink-strong); font-weight: 700; margin: 0 0 .4em; }
.c-prose p { margin: 0 0 1.2em; }
.c-prose h2 { font-size: 1.45rem; margin: 2em 0 .5em; padding-top: .4em; }
.c-prose h3 { font-size: 1.18rem; margin: 1.6em 0 .4em; }
.c-prose ul, .c-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.c-prose li { margin-bottom: .4em; }
.c-prose blockquote {
  margin: 1.6em 0; padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--bp-accent); font-style: italic; color: var(--bp-soft);
}
.c-prose figure { margin: 1.6em 0; }
.c-prose figcaption { font-family: var(--bp-label); font-size: .74rem; color: var(--bp-soft-mid); margin-top: .4rem; font-style: italic; }
.c-prose table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 0 0 1.4em; }
.c-prose th, .c-prose td { text-align: left; padding: .5em .6em; border-bottom: 1px solid var(--bp-rule); vertical-align: top; }
.c-prose th { font-family: var(--bp-label); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.c-table-wrap { overflow-x: auto; margin: 0 0 1.4em; }
.c-table-wrap table { margin: 0; }
.c-prose a { border-bottom-color: rgba(192, 21, 47, .35); }

.c-callout {
  background: var(--bp-callout); border-left: 4px solid var(--bp-accent);
  padding: 1.2rem 1.4rem; margin: 1.8em 0; font-size: .95rem;
}
.c-callout-label {
  color: var(--bp-accent-deep); font-weight: 900; font-family: var(--bp-label);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .3em;
}
.c-callout h2 { font-size: 1.1rem; margin: 0 0 .3em; }
.c-callout h2 a { color: var(--bp-ink-strong); border: none; }
.c-callout h2 a:hover { color: var(--bp-accent-deep); }
.c-callout p:last-child { margin-bottom: 0; }

/* End / Related */
.c-art-end { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 3px double var(--bp-accent); }
.c-art-related h2 {
  font-family: var(--bp-label); font-size: .74rem; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bp-ink-strong); margin: 0 0 1rem;
}
.c-art-related ul { list-style: none; }
.c-art-related li { margin-bottom: .7em; font-size: .97rem; line-height: 1.45; }
.c-art-related a { color: var(--bp-ink-strong); border: none; font-weight: 700; }
.c-art-related a:hover { color: var(--bp-accent-deep); }

/* COLOPHON — 4 cols + imprint */
.c-colophon {
  background: var(--bp-shell); color: var(--bp-bar-text); padding: 2.4rem 1.5rem 1.4rem;
  font-family: var(--bp-label); font-size: .85rem; border-top: 3px solid var(--bp-accent);
}
.c-colophon-inner {
  max-width: var(--bp-page); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem;
}
.c-colophon-title {
  color: #fff; font-family: var(--bp-label); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 900; margin: 0 0 1rem;
  border-bottom: 2px solid var(--bp-accent); padding-bottom: .5rem; display: inline-block;
}
.c-colophon ul { list-style: none; }
.c-colophon li { margin-bottom: .4em; }
.c-colophon a { color: var(--bp-bar-link); border: none; font-size: .82rem; }
.c-colophon a:hover { color: var(--bp-accent); }
.c-colophon-mark { font-family: var(--bp-display); font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0 0 .6rem; }
.c-colophon-brand p { margin: 0 0 .8em; font-size: .85rem; font-family: var(--bp-text); color: var(--bp-bar-text); }
.c-imprint { margin: 0; }
.c-imprint dt {
  font-family: var(--bp-label); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bp-faint); font-weight: 700; margin-top: .6rem;
}
.c-imprint dt:first-child { margin-top: 0; }
.c-imprint dd { margin: 0 0 .3rem; color: var(--bp-bar-link); font-size: .82rem; }
.c-copyright {
  max-width: var(--bp-page); margin: 2rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--bp-bar-rule); color: var(--bp-faint); font-size: .74rem;
  letter-spacing: .04em; text-align: center;
}

/* The column narrows before the rail folds: the megaspot's fixed 300px thumb and the
   three-up row do not fit a 530px column, so both step down first (layout_audit found
   the overflow at 900px and 768px). */
@media (max-width: 960px) {
  .c-megaspot { grid-template-columns: 1fr; }
  .c-megaspot .c-thumb { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .c-polecane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-feed-item-lead .c-thumb { aspect-ratio: 16 / 9; }
}

@media (max-width: 729px) {
  .c-main { grid-template-columns: 1fr; padding: 1.8rem 1.25rem 2.5rem; gap: 2rem; }
  .c-masthead-inner { flex-direction: column; align-items: flex-start; padding: 1.3rem 1.25rem 1.1rem; }
  .c-masthead-extra { text-align: left; }
  .c-colophon { padding: 2rem 1.25rem 1.2rem; }
  .c-colophon-inner { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .c-topbar-inner { padding: 0 1.25rem; }
  .c-catnav-inner { padding: 0 1.25rem; }
  .c-megaspot { grid-template-columns: 1fr; }
  .c-megaspot .c-thumb { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .c-megaspot-body { padding: 1.5rem 1.25rem 1.4rem; }
  .c-polecane { grid-template-columns: 1fr; }
  .c-feed-item { grid-template-columns: 130px minmax(0, 1fr); gap: .9rem; }
  .c-feed-item-lead, .c-feed-item-noimg { grid-template-columns: 1fr; }
  .c-wordmark { font-size: 1.9rem; }
  .c-menu a { padding: .85rem .7rem; font-size: .72rem; }
  .c-callout { padding: 1rem; }
}
@media (max-width: 479px) {
  .c-main { padding: 1.5rem 1rem 2rem; }
  .c-masthead-inner { padding: 1.1rem 1rem 1rem; }
  .c-topbar-inner { padding: 0 1rem; }
  .c-catnav-inner { padding: 0 1rem; }
  .c-colophon { padding: 1.8rem 1rem 1rem; }
  .c-colophon-inner { grid-template-columns: 1fr; }
  .c-feed-item { grid-template-columns: 110px minmax(0, 1fr); gap: .8rem; }
  .c-feed-item-lead, .c-feed-item-noimg { grid-template-columns: 1fr; }
  .c-megaspot-body { padding: 1.2rem 1rem 1.2rem; }
  .c-megaspot h2 { font-size: 1.4rem; }
  .c-art h1 { font-size: 1.55rem; }
  .c-prose h2 { font-size: 1.25rem; }
}