/* ============================================================
   base.css — Coinage Blog
   Zmienne, reset, typografia, nawigacja, stopka
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=DM+Mono:wght@400&display=swap');

:root {
  --bg:         #ffffff;
  --bg-footer:  #1a1a18;
  --text:       #111111;
  --text-dim:   #444444;
  --text-faint: #888888;
  --green:      #2d5a3d;
  --green-lt:   #f4faf7;
  --green-bdr:  #b8d8c4;
  --gold:       #9a7020;
  --red:        #8b2318;
  --red-bg:     #fdf0ee;
  --red-bdr:    #e8b4ac;
  --rule:       #e0e0dc;
  --gray-bg:    #f7f7f5;
  --serif:      'Source Serif 4', Georgia, serif;
  --heading:    'Lora', Georgia, serif;
  --mono:       'DM Mono', monospace;
  --content:    860px;
  --wide:       1100px;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 19px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
a:hover { text-decoration: underline; }

/* ── NAWIGACJA ── */
.site-header {
  background: #fff;
  border-bottom: 2px solid var(--green);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.header-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-text { display: flex; flex-direction: column; align-items: center; }
.logo-name {
  font-family: var(--heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.site-nav { display: flex; gap: 2rem; }
.site-nav a {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
}
.site-nav a:hover { color: var(--green); }
.site-nav a.active {
  color: var(--green);
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
}

/* ── STOPKA ── */
.site-footer {
  background: var(--bg-footer);
  color: rgba(255,255,255,.4);
  padding: 2.5rem 2rem;
  text-align: center;
  margin-top: 4rem;
}
.footer-logo {
  font-family: var(--heading);
  font-size: 1rem;
  color: rgba(255,255,255,.75);
  margin-bottom: .5rem;
  font-weight: 600;
}
.footer-copy {
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  html { font-size: 18px; }
  .header-inner { padding: 0 1.2rem; }
  .site-nav .hide-mob { display: none; }
}
@media (max-width: 400px) { html { font-size: 17px; } }