/*
 * Motyw jakjezus.net — „Poznajcie Prawdę, a Ona Was wyswobodzi".
 *
 * Stara strona (motyw stardust) była czarna z czerwonym słońcem w logo. Zostajemy
 * przy tym: czerń, czerwień, kość. Nie ma tu fotografii — nośnikiem jest sam tekst,
 * bo to blog pisany od 2008 roku, 69 wpisów jednej osoby.
 *
 * Sygnatura: „słońce" — promienista figura rysowana wektorowo (oryginał był plikiem
 * w motywie WordPressa, którego nie przenosimy). Wschodzi raz, w nagłówku.
 */

@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400;
  src: url('fonts/alegreya-sans-v28-latin_latin-ext-regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; font-style: italic; font-weight: 400;
  src: url('fonts/alegreya-sans-v28-latin_latin-ext-italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500;
  src: url('fonts/alegreya-sans-v28-latin_latin-ext-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700;
  src: url('fonts/alegreya-sans-v28-latin_latin-ext-700.woff2') format('woff2'); font-display: swap; }

:root {
  --noc:    #0d0d0d;
  --wegiel: #171717;
  --krew:   #cc1f1f;   /* czerwień słońca z logo */
  --zar:    #e85555;   /* jaśniejsza czerwień — odnośniki na czerni */
  --kosc:   #ece8e2;   /* tekst */
  --popiol: #8d8880;   /* podpisy, daty */
  --tresc: 34rem;
}

/* ─────────────────── ZGODNOŚĆ Z WIDOKAMI SILNIKA ───────────────────
   Widoki, których motyw nie nadpisuje (wpis, kategoria, tag, szukanie,
   profil…), przychodzą z silnika i grają jego słownikiem: klasami
   `prose`/`byline`/`teaser` — dopisanymi obok `proza`/`meta`/`wpis`
   w samych widokach — oraz zmiennymi dawnego public-layoutu. Motyw
   nadpisuje public-layout, więc te zmienne trzeba tu wskazać na własną
   paletę; bez tego style w atrybutach `style=` gasną (goły HTML).
   Ten sam blok, tylko po swojemu, ma artelis.css. */
:root {
  --ink:    var(--kosc);
  --muted:  var(--popiol);
  --accent: var(--zar);                     /* 5,4:1 na --noc */
  --line:   rgba(236,232,226,.12);          /* ta sama kreska co w .wpis */
  --on-accent: var(--noc);                  /* biel na --zar to 3,6:1 — za mało */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--noc);
  color: var(--kosc);
  font-family: 'Alegreya Sans', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ───────────────────────── nagłówek ───────────────────────── */

.zrodlo {
  background: var(--noc);
  padding: 3.5rem 1.5rem 2.5rem;
  border-bottom: 1px solid rgba(204,31,31,.35);
}
.zrodlo--waski { padding: 2.2rem 1.5rem 1.6rem; }
.zrodlo-wnetrze {
  max-width: 62rem; margin: 0 auto;
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
}
.slonce { flex: none; width: 4.5rem; height: 4.5rem; }
.zrodlo--waski .slonce { width: 2.8rem; height: 2.8rem; }

@media (prefers-reduced-motion: no-preference) {
  .slonce { animation: wzejdz 1.4s cubic-bezier(.2,.8,.3,1) both; }
}
@keyframes wzejdz { from { opacity: 0; transform: scale(.6) rotate(-25deg); } to { opacity: 1; transform: none; } }

.zrodlo-tytul {
  margin: 0; color: var(--kosc);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.06; text-wrap: balance;
}
.zrodlo-haslo { margin: .25rem 0 0; color: var(--popiol); font-size: clamp(.95rem, 1.8vw, 1.15rem); font-style: italic; }

/* ───────────────────────── pasek ───────────────────────── */

.pasek { background: var(--wegiel); border-bottom: .2rem solid var(--krew); }
.pasek-wnetrze {
  max-width: 62rem; margin: 0 auto; padding: .65rem 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.3rem;
}
.pasek a { color: rgba(236,232,226,.8); text-decoration: none; font-size: .95rem; }
.pasek a:hover, .pasek a:focus-visible { color: var(--zar); }
.pasek .marka { font-weight: 700; color: #fff; font-size: 1.05rem; letter-spacing: -.01em; }
.jezyki { margin-left: auto; display: flex; gap: .55rem; font-size: .85rem; }
.jezyki .teraz { color: #fff; font-weight: 700; border-bottom: 2px solid var(--krew); }

/* ───────────────────────── treść ───────────────────────── */

main.tresc { max-width: var(--tresc); margin: 0 auto; padding: 3rem 1.5rem 4rem; }
main.tresc.szeroka { max-width: 62rem; }

h1.tytul-strony {
  font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.14; margin: 0 0 1.7rem; text-wrap: balance;
}

/* Specyficzność: obie reguły trafiają w dziecko .proza (0,1,0) — decyduje kolejność. */
.proza > * { margin: 0; }
.proza > * + * { margin-top: 1.15em; }
.proza h2 { font-size: 1.42rem; font-weight: 700; margin-top: 2.3em; color: #fff; line-height: 1.25; }
.proza h3 { font-size: 1.12rem; font-weight: 700; margin-top: 1.9em; color: #fff; }
.proza a { color: var(--zar); text-underline-offset: .2em; }
.proza a:hover { color: #fff; }
.proza img { max-width: 100%; height: auto; }
.proza blockquote {
  margin: 1.9em 0; padding-left: 1.2rem; border-left: 2px solid var(--krew);
  font-style: italic; color: #cfc9c1;
}

.linia-zrodla {
  height: 1px; border: 0; margin: 3rem 0;
  background: linear-gradient(to right, transparent, rgba(204,31,31,.15) 12%, rgba(204,31,31,.7) 50%, rgba(204,31,31,.15) 88%, transparent);
}

/* ───────────────────────── wpisy (to jest blog) ───────────────────────── */

.wpis { padding: 1.5rem 0; border-bottom: 1px solid rgba(236,232,226,.12); }
.wpis h2 { margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.wpis h2 a { color: var(--kosc); text-decoration: none; }
.wpis h2 a:hover { color: var(--zar); }
.wpis .zajawka { color: #bdb8b1; margin: .4rem 0 0; }
.meta { color: var(--popiol); font-size: .85rem; }

/* Osadzony odtwarzacz (YouTube) — proporcja 16:9, pełna szerokość kolumny.
   Silnik osadza filmy od 22.08.2026; wcześniej robił to tylko motyw drogowskazu. */
.osadzenie { position: relative; margin: 1.6rem 0; padding-top: 56.25%;
             overflow: hidden; background: #000; border: 1px solid rgba(236,232,226,.16); }
.osadzenie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.meta a { color: var(--popiol); }

.rozdroze { display: grid; gap: 1px; background: rgba(236,232,226,.14); border: 1px solid rgba(236,232,226,.14); }
@media (min-width: 40rem) { .rozdroze { grid-template-columns: 1fr 1fr; } }
.rozdroze a { background: var(--wegiel); padding: 1.3rem 1.4rem; text-decoration: none; color: var(--kosc); display: block; transition: background .16s ease; }
.rozdroze a:hover, .rozdroze a:focus-visible { background: #1f1f1f; color: var(--zar); }
.rozdroze .naglowek { font-weight: 700; font-size: 1.08rem; display: block; }

.pagination { margin-top: 2rem; }
.pagination a, .pagination span { color: var(--popiol); }

/* ───────────────────────── stopka ───────────────────────── */

footer.stopka { background: var(--wegiel); color: var(--popiol); margin-top: 4.5rem; padding: 2.4rem 1.5rem; font-size: .9rem; border-top: .2rem solid var(--krew); }
.stopka-wnetrze { max-width: 62rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: baseline; }
.stopka a { color: rgba(236,232,226,.85); }
.stopka .podpis { margin-left: auto; opacity: .6; }

a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--zar); outline-offset: 3px; }
.tylko-dla-czytnikow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }