/* ====== Artykuły (rekojmia.com/<slug>) — paleta "Cream & Forest" jak na stronie głównej ====== */
:root {
  --cream:#F4EEDD; --cream-2:#F0EBDB; --cream-3:#E9E2CF; --panel:#FDFBF5;
  --forest:#2A3A2F; --forest-2:#1F2C24;
  --green:#56926E; --green-2:#3F7257; --green-bg:#E4EDE5; --sage:#6FA083;
  --gold:#C9A975; --ochre:#9C7530; --gold-strong:#B8923F; --gold-bg:#F3E8D0; --gold-soft:#D6CBA7;
  --brown:#8B7355; --brown-text:#6E5A42; --brown-bg:#ECE4D4;
  --brick:#B0683F; --brick-text:#8A4F2E; --brick-bg:#F2E1D4;
  --ink:#283830; --ink-2:#3A4A40; --mute:#4F5953; --mute-2:#6B7368;
  --line:#E6DECB; --line-2:#D4C9AE;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html,body { margin:0; padding:0; overflow-x:hidden; }
body {
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  color:var(--ink); background:var(--cream);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.container { max-width:1240px; margin:0 auto; padding:0 32px; }
@media (max-width:720px) { .container { padding:0 20px; } }
a { color:var(--green-2); }

/* ====== TOP BAR ====== */
.topbar {
  position:sticky; top:0; z-index:50;
  background:rgba(244,238,221,.92); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; height:60px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--forest); letter-spacing:-0.01em; text-decoration:none; }
.logo img { width:36px; height:36px; display:block; }
.nav { display:flex; gap:28px; }
.nav a { color:var(--mute); text-decoration:none; font-size:14px; font-weight:500; }
.nav a:hover, .nav a.active { color:var(--green-2); }
.topbar-right { display:flex; align-items:center; gap:12px; }
.nav-toggle { display:none; width:40px; height:40px; border:1px solid var(--line-2); border-radius:8px; background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav-toggle span { display:block; width:18px; height:2px; background:var(--forest); border-radius:2px; }
@media (max-width:860px) {
  .nav { display:none; position:absolute; top:60px; left:0; right:0; background:var(--cream); border-bottom:1px solid var(--line); padding:8px 20px 16px; flex-direction:column; gap:0; box-shadow:0 12px 24px rgba(42,58,47,.08); z-index:51; }
  .nav.open { display:flex; }
  .nav a { padding:14px 4px; font-size:16px; border-bottom:1px solid var(--line); color:var(--forest); }
  .nav a:last-child { border-bottom:none; }
  .nav-toggle { display:flex; }
  .topbar .btn { display:none; }
}
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:10px; font-size:14px; font-weight:600;
  text-decoration:none; cursor:pointer; transition:transform .12s, background .15s;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--forest); color:var(--cream); border:1px solid var(--forest); }
.btn-primary:hover { background:var(--forest-2); }
.btn-lg { padding:14px 24px; font-size:15px; }

/* ====== ARTYKUŁ ====== */
.article { padding:56px 0 80px; }
@media (max-width:720px) { .article { padding:36px 0 56px; } }
.article-wrap { max-width:780px; }
.crumbs { font-size:13px; color:var(--mute-2); margin:0 0 22px; display:flex; flex-wrap:wrap; gap:6px; }
.crumbs a { color:var(--mute); text-decoration:none; }
.crumbs a:hover { color:var(--green-2); text-decoration:underline; }
.crumbs span[aria-hidden] { color:var(--line-2); }
.sec-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--brown); font-weight:700;
  font-family:'JetBrains Mono',ui-monospace,monospace;
}
.sec-eyebrow .sd { width:6px; height:6px; border-radius:50%; background:var(--gold-strong); }
.article h1 {
  font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(30px,4.2vw,46px); line-height:1.1; letter-spacing:-0.02em;
  color:var(--forest); margin:14px 0 16px;
}
.meta { font-size:14px; color:var(--mute); margin:0 0 28px; display:flex; flex-wrap:wrap; gap:6px 14px; }
.lede { font-size:19px; line-height:1.6; color:var(--ink-2); margin:0 0 30px; }
.tldr {
  background:var(--panel); border:1px solid var(--line-2); border-left:4px solid var(--gold-strong);
  border-radius:12px; padding:20px 24px; margin:0 0 40px;
}
.tldr h2 { font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--brown); margin:0 0 10px; font-family:'JetBrains Mono',ui-monospace,monospace; }
.tldr h3 { font-size:15px; margin:14px 0 6px; color:var(--forest); }
.tldr ul { margin:0; padding-left:20px; }
.tldr li { margin:0 0 8px; }
.tldr li:last-child { margin-bottom:0; }
.article h2 {
  font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(24px,3vw,32px); line-height:1.2; letter-spacing:-0.015em;
  color:var(--forest); margin:48px 0 14px;
}
.article h3 { font-size:19px; font-weight:600; color:var(--forest); margin:30px 0 10px; letter-spacing:-0.01em; }
.article p, .article li { font-size:17px; line-height:1.7; }
.article p { margin:0 0 18px; }
.article ul, .article ol { padding-left:24px; margin:0 0 18px; }
.article li { margin:0 0 8px; }
.article li ul, .article li ol { margin:8px 0 0; }
.article strong { color:var(--forest); font-weight:700; }
.article code { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:0.9em; background:var(--cream-3); padding:1px 6px; border-radius:5px; color:var(--ink-2); }
.note {
  background:var(--green-bg); border:1px solid #CFE0D4; border-radius:12px;
  padding:16px 20px; margin:0 0 20px; font-size:16px;
}
.note p:last-child { margin-bottom:0; }
.example {
  background:var(--panel); border:1px solid var(--line-2); border-radius:12px;
  padding:20px 24px; margin:0 0 24px;
}
.example p:last-child { margin-bottom:0; }
.verdict { border-left:4px solid var(--green); padding:12px 18px; background:var(--panel); border-radius:0 10px 10px 0; margin:0 0 24px; }
.verdict p:last-child { margin-bottom:0; }
.article table { width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15px; }
.article th, .article td { border:1px solid var(--line-2); padding:10px 12px; text-align:left; vertical-align:top; }
.article th { background:var(--cream-3); color:var(--forest); font-weight:600; }

/* FAQ */
.faq { margin:48px 0 0; }
.faq details { background:var(--panel); border:1px solid var(--line-2); border-radius:12px; padding:0 20px; margin:0 0 10px; }
.faq summary { cursor:pointer; padding:16px 0; font-weight:600; color:var(--forest); font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--gold-strong); font-weight:700; flex-shrink:0; }
.faq details[open] summary::after { content:'–'; }
.faq .answer { padding:0 0 16px; color:var(--ink-2); font-size:16px; line-height:1.65; }

/* CTA */
.cta-box {
  margin:48px 0 0; padding:28px 30px; border-radius:16px;
  background:linear-gradient(135deg, var(--forest) 0%, var(--forest-2) 100%);
  color:var(--cream); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px;
}
.cta-box .cta-text { flex:1 1 380px; }
.cta-box h2 { font-family:'Fraunces',Georgia,serif; color:var(--cream); font-size:24px; margin:0 0 8px; line-height:1.25; }
.cta-box p { color:var(--gold-soft); margin:0; font-size:16px; }
.cta-box .btn-primary { background:var(--gold); color:var(--forest-2); border-color:var(--gold); }
.cta-box .btn-primary:hover { background:#D9BC88; }
.disclaimer { font-size:14px; color:var(--mute-2); font-style:italic; margin:22px 0 0; }

/* Czytaj także */
.more { margin:48px 0 0; padding-top:28px; border-top:1px solid var(--line-2); }
.more h2 { font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--brown); margin:0 0 14px; font-family:'JetBrains Mono',ui-monospace,monospace; }
.more-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.more-card { display:block; background:var(--panel); border:1px solid var(--line-2); border-radius:12px; padding:16px 18px; text-decoration:none; color:var(--forest); font-weight:600; font-size:15px; line-height:1.4; transition:transform .12s, border-color .15s; }
.more-card:hover { transform:translateY(-2px); border-color:var(--gold-strong); }
.more-card small { display:block; font-weight:500; color:var(--mute); font-size:13px; margin-top:6px; }

/* ====== FOOTER ====== */
footer { padding:48px 0 32px; background:var(--forest); color:var(--gold-soft); }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:860px) { .foot-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .foot-grid { grid-template-columns:1fr; } }
.foot-col h5 { margin:0 0 12px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); }
.foot-col a { display:block; color:var(--gold-soft); text-decoration:none; font-size:14px; margin:0 0 8px; }
.foot-col a:hover { color:var(--cream); }
.foot-logo { color:var(--cream); font-size:22px; gap:14px; }
.foot-logo img { width:48px; height:48px; }
.foot-bottom { margin-top:36px; padding-top:20px; border-top:1px solid rgba(214,203,167,.25); font-size:13px; color:var(--gold-soft); }
.foot-bottom p { margin:0; }

/* ====== COOKIES ====== */
.cookie-banner {
  position:fixed; bottom:18px; left:18px; right:18px; max-width:720px; margin:0 auto;
  background:var(--panel); border:1px solid var(--line-2); border-radius:12px;
  padding:16px 20px; box-shadow:0 14px 40px rgba(42,58,47,.18);
  display:none; z-index:100; gap:18px; align-items:center;
  font-size:14px; color:var(--ink-2);
}
.cookie-banner.show { display:flex; }
.cookie-banner .cb-text { flex:1; line-height:1.5; }
.cookie-banner .cb-text strong { color:var(--forest); font-weight:700; }
.cookie-banner .cb-text a { color:var(--green-2); text-decoration:underline; }
.cookie-banner .cb-actions { display:flex; gap:8px; flex-shrink:0; }
.cookie-banner .cb-btn { padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; border:1px solid; cursor:pointer; font-family:inherit; transition:background .15s, transform .12s; white-space:nowrap; }
.cookie-banner .cb-btn-ghost { background:transparent; color:var(--forest); border-color:var(--line-2); }
.cookie-banner .cb-btn-primary { background:var(--forest); color:var(--cream); border-color:var(--forest); }
@media (max-width:640px) {
  .cookie-banner { flex-direction:column; align-items:stretch; padding:14px 16px; }
  .cookie-banner .cb-actions { width:100%; }
  .cookie-banner .cb-btn { flex:1; }
}