/* Sobotnia szkoła, Dublin - "rainy editorial" theme: mist grey, slate ink, muted brick red and sea green, thin rules, literary serif */
:root {
  --bg: #eef1ef;
  --card: #f9faf9;
  --ink: #22303a;
  --ink-soft: #5a6770;
  --red: #b23a3a;
  --green: #3f6f5e;
  --green-soft: #dde8e3;
  --sand: #e9e1d3;
  --line: #cdd5d1;
  --display: "Crimson Pro", Georgia, serif;
  --sans: "Libre Franklin", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--sans); font-size: 17px; line-height: 1.75; }
a { color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 660px; margin: 0 auto; padding: 0 22px; }

header.site { padding: 22px 0 14px; border-bottom: 1px solid var(--line); }
header.site .bar { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
a.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.55rem; letter-spacing: 0.005em; }
a.brand em { font-style: italic; font-weight: 500; color: var(--green); }
nav.site { display: flex; gap: 24px; }
nav.site a { color: var(--ink-soft); text-decoration: none; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; }
nav.site a:hover { color: var(--red); }
.breadcrumb { font-size: 0.78rem; color: var(--ink-soft); margin: 10px 0 0; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb .sep { margin: 0 8px; color: var(--line); }

.hero { padding: 64px 0 56px; border-bottom: 1px solid var(--line); }
.hero .wrap { display: grid; grid-template-columns: 5fr 4fr; gap: 56px; align-items: end; }
.kicker { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--green); margin: 0 0 18px; }
.hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1.02; margin: 0 0 22px; }
.hero .lead { font-family: var(--display); font-style: italic; font-size: 1.28rem; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 40ch; }
.hero-img { margin: 0; }
.hero-img img { width: 100%; height: auto; display: block; filter: saturate(.85) contrast(1.02); }
.hero-img::after { content: ""; display: block; height: 6px; margin-top: 10px; background: linear-gradient(90deg, var(--red) 0 50%, var(--green) 50% 100%); width: 90px; }
@media (max-width: 820px) { .hero .wrap { grid-template-columns: 1fr; gap: 34px; } }

.list-heading { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); margin: 40px 0 22px; }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 40px; padding-bottom: 90px; }
@media (max-width: 700px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; border-top: 2px solid var(--ink); padding-top: 16px; }
.post-card .thumb img { width: 100%; height: 240px; object-fit: cover; display: block; filter: saturate(.85); transition: filter .3s ease; }
.post-card:hover .thumb img { filter: saturate(1); }
.post-card .body { padding: 14px 0 0; }
.post-card .date { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--red); margin: 0 0 6px; }
.post-card h2 { font-family: var(--display); font-weight: 700; font-size: 1.55rem; line-height: 1.15; margin: 0 0 10px; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--red); }
.post-card .excerpt { font-size: 0.92rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.article-hero { max-width: 1040px; margin: 34px auto 0; padding: 0 24px; }
.article-hero img { width: 100%; max-height: 460px; object-fit: cover; display: block; filter: saturate(.88); }
.post { padding: 38px 0 90px; }
.post-meta { font-size: 0.78rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; text-transform: uppercase; letter-spacing: 0.08em; }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--display); font-weight: 700; font-size: 1rem; flex: none; text-transform: none; }
.post-title { font-family: var(--display); font-weight: 500; font-size: clamp(2.1rem, 4.6vw, 3rem); line-height: 1.06; margin: 0 0 30px; }
.post > p:first-of-type::first-letter { font-family: var(--display); font-weight: 700; font-size: 3.4em; float: left; line-height: .9; margin: 6px 10px 0 0; color: var(--red); }
.post h2 { font-family: var(--display); font-weight: 700; font-size: 1.6rem; margin: 44px 0 10px; line-height: 1.2; }
.post ul, .post ol { padding-left: 1.3em; }
.post li { margin-bottom: 7px; }
.post li::marker { color: var(--green); }
.post strong { font-weight: 600; }
.post table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin: 18px 0; display: block; overflow-x: auto; }
.post th, .post td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.author-box { display: flex; gap: 14px; align-items: flex-start; margin-top: 54px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.author-box .avatar { width: 46px; height: 46px; font-size: 1.3rem; }
.author-box p { margin: 0; font-size: 0.94rem; }
.author-box .name { font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.related { margin-top: 38px; padding: 20px 24px; background: var(--sand); }
.related h3 { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); margin: 0 0 8px; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { padding: 9px 0; border-top: 1px solid rgba(34, 48, 58, 0.12); }
.related li:first-child { border-top: 0; }
.related a { color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 1.15rem; }
.related a:hover { color: var(--red); }

.page { padding: 54px 22px 90px; }
.page h1 { font-family: var(--display); font-weight: 500; font-size: 2.8rem; margin: 0 0 20px; }

footer.site { border-top: 1px solid var(--line); color: var(--ink-soft); padding: 26px 0 36px; font-size: 0.8rem; background: var(--card); }
footer.site .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
footer.site a { color: var(--green); }

@media (prefers-reduced-motion: no-preference) {
  .hero-text > * { animation: fade .8s ease both; }
  .hero-text > *:nth-child(2) { animation-delay: .1s; }
  .hero-text > *:nth-child(3) { animation-delay: .2s; }
  @keyframes fade { from { opacity: 0; } }
}