/* ═══════════════════════════════════════════════════════════
   EYELINGO — warstwa treści (/nauka/)
   Tokeny zgodne z EYELINGO_DESIGN_BIBLE.md
   Jeden akcent pomarańczowy na ekran. Bez emoji. Ton dorosły.
   ═══════════════════════════════════════════════════════════ */

:root{
  --navy:#1a2340; --navy2:#0f1729; --orange:#c96a2a;
  --paper:#f8f7f4; --paper2:#f0eee9; --white:#fff;
  --text:#1a2340; --text-2:#666; --text-3:#888;
  --border:rgba(26,35,64,.10); --border-2:rgba(26,35,64,.18);
  --r-card:10px; --r-btn:6px;
  --max:720px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400; font-size:17px; line-height:1.7;
  font-feature-settings:'kern' 1;
}

/* ── nagłówek strony ─────────────────────────────────────── */
.site-head{
  background:var(--navy); padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-head a{color:var(--paper); text-decoration:none}
.wordmark{
  font-family:'DM Sans',Inter,sans-serif; font-weight:500;
  font-size:20px; letter-spacing:-.2px;
}
.head-cta{
  font-size:14px; font-weight:500; border:1px solid rgba(248,247,244,.35);
  padding:7px 16px; border-radius:var(--r-btn); transition:background .2s;
}
.head-cta:hover{background:rgba(248,247,244,.10)}

/* ── układ ───────────────────────────────────────────────── */
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.crumbs{font-size:13px; color:var(--text-3); padding:28px 0 0}
.crumbs a{color:var(--text-2); text-decoration:none}
.crumbs a:hover{color:var(--orange)}

article{padding:8px 0 56px}
.eyebrow{
  font-size:12px; font-weight:500; letter-spacing:.9px; text-transform:uppercase;
  color:var(--text-3); margin:24px 0 12px;
}
h1{
  font-family:'DM Sans',Inter,sans-serif; font-weight:500;
  font-size:clamp(30px,5vw,42px); line-height:1.2; letter-spacing:-.5px;
  margin-bottom:18px;
}
.lead{font-size:19px; color:var(--text-2); line-height:1.65; margin-bottom:26px}
.meta{
  font-size:13px; color:var(--text-3);
  padding-bottom:26px; border-bottom:1px solid var(--border); margin-bottom:36px;
}
h2{
  font-family:'DM Sans',Inter,sans-serif; font-weight:500;
  font-size:26px; line-height:1.3; letter-spacing:-.3px;
  margin:44px 0 14px;
}
h3{font-family:'DM Sans',Inter,sans-serif; font-weight:500; font-size:19px; margin:30px 0 10px}
p{margin-bottom:18px}
article ul,article ol{margin:0 0 20px 22px}
article li{margin-bottom:9px}
strong{font-weight:500; color:var(--navy)}
a{color:var(--orange); text-decoration:none; border-bottom:1px solid rgba(201,106,42,.3)}
a:hover{border-bottom-color:var(--orange)}

/* ── elementy treści ─────────────────────────────────────── */
.note{
  background:var(--paper2); border-left:3px solid var(--navy);
  padding:18px 22px; margin:28px 0; border-radius:0 var(--r-card) var(--r-card) 0;
  font-size:16px;
}
.note .note-t{
  font-size:12px; font-weight:500; letter-spacing:.8px; text-transform:uppercase;
  color:var(--text-3); margin-bottom:7px;
}
.note p:last-child{margin-bottom:0}

table{width:100%; border-collapse:collapse; margin:26px 0; font-size:15px}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--border)}
th{font-weight:500; font-size:12px; letter-spacing:.7px; text-transform:uppercase; color:var(--text-3)}

.src{font-size:14px; color:var(--text-3); margin-top:40px; padding-top:22px; border-top:1px solid var(--border)}
.src li{margin-bottom:7px}

/* ── CTA (jedyny pomarańcz na stronie) ───────────────────── */
.cta{
  background:var(--navy); color:var(--paper);
  border-radius:var(--r-card); padding:34px 32px; margin:52px 0 0;
}
.cta h2{color:var(--paper); margin:0 0 12px; font-size:23px}
.cta p{color:rgba(248,247,244,.72); font-size:16px; margin-bottom:22px}
.cta a.btn{
  display:inline-block; background:var(--orange); color:#fff; border:0;
  font-weight:500; font-size:15px; padding:12px 26px; border-radius:var(--r-btn);
  text-decoration:none; transition:background .2s;
}
.cta a.btn:hover{background:#e07830}
.cta .fine{font-size:13px; color:rgba(248,247,244,.5); margin:14px 0 0}

/* ── lista artykułów (hub) ───────────────────────────────── */
.list{list-style:none; margin:0; padding:0}
.list li{border-bottom:1px solid var(--border); margin:0}
.list a{
  display:block; padding:24px 0; text-decoration:none; border:0; color:var(--text);
}
.list a:hover .lt{color:var(--orange)}
.lt{font-family:'DM Sans',Inter,sans-serif; font-weight:500; font-size:20px; margin-bottom:6px; transition:color .2s}
.ld{font-size:15px; color:var(--text-2); line-height:1.6}

/* ── stopka ──────────────────────────────────────────────── */
.site-foot{
  background:var(--navy2); color:rgba(248,247,244,.55);
  padding:40px 24px; margin-top:64px; font-size:14px;
}
.site-foot .wrap{display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between}
.site-foot a{color:rgba(248,247,244,.75); border:0}
.site-foot a:hover{color:#fff}

@media(max-width:600px){
  body{font-size:16px}
  .lead{font-size:17px}
  h2{font-size:22px}
  .cta{padding:28px 22px}
}