/* barbara.haczewska.pl — strona statyczna, rodzina wyglądu ireneusz.haczewski.pl (granat, czerwień), bez zewnętrznych zasobów */
@font-face { font-family: Inter; src: url(fonty/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Cardo; src: url(fonty/cardo-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Cardo; src: url(fonty/cardo-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root { --granat: #1b2333; --czerwien: #c8102e; --niebieski: #1d4ed8; --szary: #5b6475; --tlo: #f4f6fa; --linia: #e6e9ef; --szer: 1100px; --tekst: 720px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 1.05rem/1.65 Inter, system-ui, sans-serif; color: var(--granat); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--niebieski); }
a:hover { color: var(--czerwien); }
:where(a, button):focus-visible { outline: 3px solid var(--czerwien); outline-offset: 2px; }
.wrap { max-width: var(--szer); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.6em; font-weight: 750; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }
h3 { font-size: 1.2rem; }
.nad { color: var(--czerwien); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; margin: 0 0 0.4rem; }
section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.jasne { background: var(--tlo); }

/* nagłówek */
.naglowek { position: sticky; top: 0; z-index: 10; background: #ffffffee; box-shadow: 0 1px 0 var(--linia); }
.naglowek .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; }
.logo { font: 700 1.25rem Cardo, Georgia, serif; color: var(--granat); text-decoration: none; }
.naglowek nav a { color: var(--granat); text-decoration: none; font-size: 0.95rem; font-weight: 500; margin-left: 1.2rem; }
.naglowek nav a:hover { color: var(--czerwien); }
@media (max-width: 700px) { .naglowek nav { display: none; } }

/* wstęp */
.wstep { background: linear-gradient(180deg, var(--tlo), #fff); padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.wstep .wrap { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
@media (max-width: 700px) { .wstep .wrap { grid-template-columns: 1fr; } .portret { order: -1; justify-self: start; } }
.wstep h1 { font-size: clamp(2.6rem, 2rem + 3vw, 4.4rem); margin-bottom: 0.3em; }
.lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); color: var(--szary); max-width: 36rem; margin: 0 0 1.4rem; }
.pigulki { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 44rem; }
.pigulki li { background: #fff; border: 1px solid var(--linia); border-radius: 99px; padding: 0.35rem 0.95rem; font-size: 0.9rem; }
.pigulki li::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--czerwien); margin-right: 0.55rem; vertical-align: 0.1em; }
.portret { margin: 0; }
.portret img { width: 180px; border-radius: 12px; box-shadow: 0 18px 40px -20px #0006; border: 6px solid #fff; }
.portret figcaption { font-size: 0.8rem; color: var(--szary); margin-top: 0.5rem; max-width: 190px; }

/* cytat */
.cytat { max-width: var(--tekst); margin: 0; padding: 0 0 0 1.4rem; border-left: 4px solid var(--czerwien); font: 400 clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem)/1.5 Cardo, Georgia, serif; }
.cytat cite { display: block; margin-top: 0.8rem; font: italic 0.95rem Inter, sans-serif; color: var(--szary); }

/* kalendarium */
.os { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 900px; }
.os li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.2rem; padding: 0.8rem 0 0.8rem 1.2rem; border-left: 3px solid var(--czerwien); }
.os strong { font-size: 1.1rem; }
@media (max-width: 600px) { .os li { grid-template-columns: 1fr; gap: 0.1rem; } }

/* odznaczenia, materiały */
.siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.karta { background: #fff; border: 1px solid var(--linia); border-radius: 14px; padding: 1.2rem 1.3rem; }
.jasne .karta { background: #fff; }
.karta strong { color: var(--czerwien); font-size: 1.25rem; display: block; }
.karta .zrodlo { color: var(--szary); font-size: 0.9rem; margin: 0.2rem 0 0.6rem; }
.karta a { font-weight: 600; text-decoration: none; }
.materialy { list-style: none; padding: 0; margin: 1.2rem 0 0; max-width: 900px; }
.materialy li { padding: 0.9rem 0; border-bottom: 1px solid var(--linia); }
.materialy a { font-weight: 600; text-decoration: none; }
.materialy span { display: block; color: var(--szary); font-size: 0.92rem; }

/* stopka */
.stopka { background: var(--granat); color: #c5cede; padding: 2.2rem 0; font-size: 0.9rem; }
.stopka .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.stopka a { color: #fff; }