/* Układ wzorowany na world.hey.com: jedna kolumna, systemowy bezszeryfowy font,
   kolor #231c33, karty z delikatnym cieniem, wszystko wyśrodkowane. */
:root {
  --ink: #231c33;
  --subtle: rgba(35, 28, 51, .6);
  --rule: rgba(35, 28, 51, .15);
  --shadow: rgba(226, 221, 215, .5);
  --link: #0074e4;
  --paper: #fff;
  font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 19.8px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 0 0 70px; }
.page { max-width: 825px; margin: 0 auto; padding: 0 1rem; }
a { color: var(--ink); }
a.undecorated { text-decoration: none; }
.bio a, .content a { color: var(--ink); text-decoration: underline; }

/* nagłówek z awatarem – jak u DHH */
.masthead { text-align: center; padding: 3.5rem 0 1.5rem; }
.masthead a.undecorated { display: inline-block; }
.avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto .6rem; }
.name { margin: 0 0 1.2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .2em; color: var(--subtle); font-weight: 400; }
.bio { font-size: .9rem; color: var(--subtle); max-width: 46rem; margin: 0 auto; }
.rule { border: 0; border-top: 1px solid var(--rule); width: 140px; margin: 1.8rem auto 0; }

/* karty na liście */
.card {
  border: 1px solid var(--rule); border-radius: 4px; box-shadow: 5px 5px 7px var(--shadow);
  padding: 2rem 2rem 2.4rem; margin: 0 0 1.25rem; text-align: center;
}
.card .date, .post .date { font-size: .8rem; color: var(--subtle); margin-bottom: .25rem; }
.card h2 { font-size: 1.55rem; line-height: 1; margin: 0 0 1.3rem; font-weight: 700; }
.card .content { text-align: left; margin-bottom: 1.6rem; }
.btn {
  display: inline-block; font-size: .8rem; color: var(--subtle); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 999px; padding: .35rem 1rem; background: var(--paper);
}
.btn:hover { color: var(--ink); }

/* pojedynczy wpis */
.post header { text-align: center; margin: 1.5rem 0 2.5rem; }
.post h1 { font-size: 2.4rem; line-height: 1.1; margin: 0; font-weight: 700; }
.post .content p { margin: 0 0 1.4em; }
.post .content img { max-width: 100%; height: auto; }
.post .content pre { font-size: .8rem; overflow-x: auto; padding: 1rem; background: #f6f5f3; border-radius: 4px; }
.post .content code { font-size: .9em; }
.post .content blockquote { margin: 0 0 1.4em; padding-left: 1rem; border-left: 3px solid var(--rule); color: var(--subtle); }

@media (max-width: 600px) {
  :root { font-size: 17px; }
  .card { padding: 1.4rem 1.2rem 1.8rem; }
  .post h1 { font-size: 1.9rem; }
}