/* ============================================================
   lukasz.biz — static personal page
   Impeccable craft floor: cap negative tracking at -0.04em,
   no eyebrow kickers, dark ink on hot accents, dark selection.
   ============================================================ */

:root{
  --ink:#0b0b0f;
  --ink-2:#1f2128;
  --paper:#f6f3ec;
  --paper-2:#ece6d8;
  --line:#d9d2c1;
  --muted:#5b5a55;
  --hot:#b8462c;        /* terracotta accent */
  --hot-ink:#0b0b0f;    /* dark ink for text on hot */
  --shadow:0 1px 0 rgba(11,11,15,.04), 0 8px 24px rgba(11,11,15,.06);
  --shadow-soft:0 1px 0 rgba(11,11,15,.03), 0 6px 16px rgba(11,11,15,.05);
  --max:72rem;
  --max-text:44rem;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  font-family:"Source Serif 4","Source Serif Pro","Iowan Old Style","Apple Garamond",Georgia,serif;
  font-feature-settings:"ss01","onum";
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* selection — dark ink on the hot accent (per owner rule) */
::selection{background:var(--hot);color:var(--hot-ink)}
::-moz-selection{background:var(--hot);color:var(--hot-ink)}

a{color:var(--ink);text-decoration-color:var(--ink);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--hot);text-decoration-color:var(--hot)}

img,svg{max-width:100%;height:auto;display:block}

/* skip link */
.skip{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--ink);color:var(--paper);padding:.5rem .75rem;border-radius:.25rem;z-index:100}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(246,243,236,.85);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.bar-inner{
  max-width:var(--max);margin:0 auto;
  padding:1rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:.4rem;
  background:var(--ink);color:var(--paper);
}
.brand-name{font-weight:600;letter-spacing:-0.01em;font-size:1.0625rem}

.topnav{display:flex;gap:1.25rem}
.topnav a{
  text-decoration:none;color:var(--muted);
  font-size:.9375rem;letter-spacing:.02em;
}
.topnav a:hover{color:var(--ink)}

@media (max-width:520px){
  .topnav{display:none}
}

/* ---------- hero ---------- */
.hero{padding:5rem 1.25rem 3.5rem;border-bottom:1px solid var(--line)}
.hero-inner{max-width:var(--max);margin:0 auto}
.hero-title{
  font-family:"Manrope","Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:700;
  font-size:clamp(2rem,4.6vw,4.6rem);
  line-height:1.04;
  letter-spacing:-0.03em;          /* capped per owner rule */
  margin:0 0 1.25rem;
  max-width:18ch;
  color:var(--ink);
}
.hero-accent{color:var(--hot)}
.hero-sub{
  font-size:clamp(1.0625rem,1.25vw,1.25rem);
  line-height:1.55;
  max-width:42rem;
  color:var(--ink-2);
  margin:0 0 1.75rem;
}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  font-family:"Manrope","Inter",system-ui,sans-serif;
  font-size:.8125rem;letter-spacing:.01em;
  padding:.4rem .65rem;border-radius:999px;
  background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line);
}

/* ---------- bands ---------- */
.band{padding:3.5rem 1.25rem}
.band-alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-inner{max-width:var(--max);margin:0 auto}
.section-title{
  font-family:"Manrope","Inter",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:-0.03em;          /* capped per owner rule */
  line-height:1.15;
  margin:0 0 1rem;
}
.section-lede{
  max-width:var(--max-text);
  color:var(--ink-2);
  font-size:1.0625rem;
  margin:0 0 2rem;
}

/* ---------- prose ---------- */
.prose{max-width:var(--max-text);font-size:1.0625rem}
.prose p{margin:0 0 1rem}
.prose p:last-child{margin-bottom:0}

/* ---------- book cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.25rem}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:.75rem;
  padding:1.5rem;
  display:flex;gap:1.25rem;
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card-cover{
  flex:0 0 auto;
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:.5rem;
  padding:.75rem;
  display:flex;align-items:center;justify-content:center;
}
.card-body{display:flex;flex-direction:column;gap:.65rem;min-width:0}
.card-title{
  font-family:"Manrope","Inter",system-ui,sans-serif;
  font-weight:700;
  font-size:1.0625rem;
  line-height:1.3;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
.card-desc{
  font-size:.9375rem;color:var(--ink-2);
  margin:0;line-height:1.55;
}
.card-link{
  font-family:"Manrope","Inter",system-ui,sans-serif;
  align-self:flex-start;
  font-size:.9375rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem .8rem;border-radius:.4rem;
  background:var(--ink);color:var(--paper);text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.card-link:hover{background:var(--hot);color:var(--hot-ink)}

/* ---------- languages ---------- */
.langs{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;max-width:30rem}
.langs li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.65rem .9rem;border:1px solid var(--line);border-radius:.5rem;
  background:var(--paper);
}
.lang-name{font-weight:600}
.lang-level{color:var(--muted);font-size:.9375rem}

/* ---------- footer ---------- */
.foot{
  background:var(--ink);color:var(--paper);
  border-top:1px solid var(--ink);
  padding:1.5rem 1.25rem;margin-top:2rem;
}
.foot-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.foot small{font-size:.875rem;color:var(--paper)}
.foot a{color:var(--paper);text-decoration-color:rgba(246,243,236,.4)}
.foot a:hover{color:var(--paper);text-decoration-color:var(--hot)}

/* ---------- 404 ---------- */
.notfound{padding:6rem 1.25rem;text-align:center;max-width:36rem;margin:0 auto}
.nf-code{
  font-family:"Manrope","Inter",system-ui,sans-serif;
  font-size:clamp(4rem,12vw,8rem);
  font-weight:700;
  letter-spacing:-0.04em;line-height:1;
  margin:0 0 .5rem;color:var(--hot);
}
.nf-title{
  font-family:"Manrope","Inter",system-ui,sans-serif;
  font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:-0.03em;line-height:1.15;
  margin:0 0 .75rem;
}
.nf-sub{color:var(--muted);margin:0 0 1.5rem}
.nf-link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.65rem 1rem;border-radius:.4rem;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-family:"Manrope","Inter",system-ui,sans-serif;font-weight:600;
}
.nf-link:hover{background:var(--hot);color:var(--hot-ink)}