/* ==========================================================================
   Poradnik articles: the body of every piece, in the landing's language.
   From the newsletter memo format (2026-10-14): a masthead with the issue
   number and date over the title, an italic lead, a ~75-character column.
   Loaded after blog.css (tokens, nav, footer, .ap-btn, .crumb). Replaces the
   self-contained inline styles the articles carried until 2026-10-14.
   Reading first: Figtree running copy at a 72ch measure with loose leading,
   Chivo headings with tight tracking, mono labels, square corners and
   hairlines, graphite blocks for the asides that ask for an action.
   ========================================================================== */

.wrap {
  /* 620px of text: ~75 characters of Figtree per line, the memo's measure */
  max-width: 668px;
  margin: 0 auto;
  padding: 0 24px;
  font-size: 17.5px;
  line-height: 1.7;
}

/* ---------- head ---------- */
.article-head {
  padding: 48px 0 8px;
}
/* masthead: the series on the left (also the way back to the hub), issue
   number and date on the right, a hairline under both */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin: 0 0 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.wrap .masthead-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--graphite);
  text-decoration: none;
}
.wrap .masthead-title:hover {
  color: var(--brand-deep);
}
.masthead-issue {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.article-head .eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.article-head .eyebrow::before {
  content: '';
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--brand);
}
.article-head h1 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 5.2vw, 2.9rem);
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
/* the lead in italics, a step quieter than the text: the memo's dek */
.lede {
  margin: 0 0 28px;
  font-size: clamp(1.1rem, 2vw, 1.22rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--grey);
}
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  font-size: 14px;
  color: var(--grey);
}
.byline b {
  font-weight: 600;
  color: var(--graphite);
}
.byline-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.byline-avatar {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* ---------- running copy ---------- */
article h2 {
  margin: 64px 0 16px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  /* the sticky nav is ~75px tall */
  scroll-margin-top: 96px;
}
article h3 {
  margin: 36px 0 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
article p {
  margin: 0 0 18px;
}
article ul,
article ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
article li {
  margin: 8px 0;
}
article li::marker {
  color: var(--brand);
}
article strong,
article b {
  font-weight: 700;
}
/* plain links in the text: graphite with an orange underline */
.wrap a:not([class]) {
  color: var(--graphite);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.wrap a:not([class]):hover {
  color: var(--brand-deep);
}

/* ---------- "W skrócie": the one graphite block up top ---------- */
.tldr {
  margin: 36px 0;
  padding: 28px 30px;
  background: var(--graphite);
  color: var(--bone);
}
.tldr h2 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.tldr ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tldr li {
  position: relative;
  margin: 10px 0;
  padding-left: 20px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--on-dark);
}
.tldr li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.tldr li b,
.tldr li strong {
  color: var(--bone);
}

/* ---------- table of contents ---------- */
.toc {
  margin: 36px 0;
  padding: 24px 28px;
  background: var(--card);
  border: 1px solid var(--hair);
}
.toc h2 {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.toc li {
  counter-increment: toc;
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
  line-height: 1.45;
}
.toc li:last-child {
  border-bottom: 0;
}
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--brand-deep);
}
/* .wrap prefix: outranks the underlined plain-link rule above */
.wrap .toc a {
  color: var(--graphite);
  text-decoration: none;
}
.wrap .toc a:hover {
  color: var(--brand-deep);
}

/* ---------- tables: square, hairlines, numbers that line up ---------- */
.table-scroll {
  overflow-x: auto;
  margin: 24px 0;
  background: var(--card);
  border: 1px solid var(--hair);
}
table {
  width: 100%;
  min-width: min(520px, 100%);
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.5;
}
th,
td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
thead th {
  background: var(--bone);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: 0;
}
td.num,
th.num {
  font-family: var(--mono);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
thead th.num {
  font-size: 11.5px;
}
.up {
  color: #1b7a4b;
  font-weight: 700;
}
.down {
  color: #c11b2a;
  font-weight: 700;
}

/* ---------- in-article calculator (Nr 4): fields inside a table ---------- */
/* Readers type into it tens of times in a row: nothing animates, the rows
   below recalculate on every keystroke (js/zysk-miesiac.js). */
.kalk input,
.kalk select {
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 0;
}
.kalk input {
  width: 6.5em;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}
.kalk input::-webkit-outer-spin-button,
.kalk input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.kalk input:focus-visible,
.kalk select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--graphite);
}
.kalk label {
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .kalk input:hover,
  .kalk select:hover {
    border-color: var(--grey);
  }
}
.kalk-note {
  margin: -10px 0 26px;
  font-size: 14px;
  color: var(--grey);
}

/* ---------- asides ---------- */
.callout {
  margin: 30px 0;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--brand);
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout .label,
.example .label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}

/* the product inserts between sections: graphite, the landing's buttons */
.hook {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 40px 0;
  padding: 26px 28px;
  background: var(--graphite);
  color: var(--bone);
}
.hook .m {
  flex: none;
  width: 36px;
  height: 36px;
  margin-top: 2px;
}
.hook .body {
  flex: 1;
  min-width: 0;
}
.hook .label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.hook p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-dark);
}
.hook p.t {
  margin-bottom: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.hook .go,
.hook .go-alt,
.cta .btn,
.cta .btn-alt {
  display: inline-block;
  margin: 8px 8px 0 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid var(--brand);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 160ms var(--ease-out);
}
.hook .go,
.cta .btn {
  padding: 13px 20px;
  font-weight: 700;
  background: var(--brand);
  color: #1a0f05;
}
.hook .go-alt,
.cta .btn-alt {
  padding: 13px 20px;
  font-weight: 500;
  background: transparent;
  color: var(--bone);
  border-color: rgba(234, 231, 222, 0.45);
}
.hook .go:active,
.hook .go-alt:active,
.cta .btn:active,
.cta .btn-alt:active {
  transform: scale(0.97);
}
.hook .go:focus-visible,
.hook .go-alt:focus-visible,
.cta .btn:focus-visible,
.cta .btn-alt:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  /* the landing's inversion: graphite fill, orange text, orange edge */
  .hook .go:hover,
  .cta .btn:hover {
    background: var(--graphite);
    color: var(--brand);
  }
  .hook .go-alt:hover,
  .cta .btn-alt:hover {
    background: var(--bone);
    color: var(--graphite);
    border-color: var(--bone);
  }
}

.example {
  margin: 28px 0;
  padding: 22px 24px;
  background: #f4e4ce;
  border: 1px solid var(--hair);
}
.example .label {
  color: #7c3a06;
}
.example p:last-child {
  margin-bottom: 0;
}
.example .sum {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

/* numbered steps: mono numerals in graphite squares */
.checklist {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: ck;
}
.checklist li {
  counter-increment: ck;
  position: relative;
  margin: 0;
  padding: 16px 0 16px 54px;
  border-bottom: 1px solid var(--hair);
}
.checklist li:last-child {
  border-bottom: 0;
}
.checklist li::before {
  content: counter(ck, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 15px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--graphite);
  color: var(--brand);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}

/* ---------- FAQ: a plus that turns into a cross ---------- */
.faq {
  margin: 24px 0;
  border-top: 1px solid var(--hair);
}
.faq details {
  border-bottom: 1px solid var(--hair);
}
.faq summary {
  position: relative;
  display: block;
  padding: 18px 44px 18px 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
/* the square stays put (::before), only the plus turns into a cross */
.faq summary::before,
.faq summary::after {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  display: grid;
  place-items: center;
}
.faq summary::before {
  content: '';
  border: 1px solid var(--hair);
}
.faq summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  color: var(--brand-deep);
  transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover {
    color: var(--brand-deep);
  }
}
.faq details p {
  margin: 0 0 18px;
  max-width: 64ch;
  color: var(--ink-2);
}

/* ---------- closing call to action: the hub's band ---------- */
.cta {
  position: relative;
  overflow: hidden;
  margin: 64px 0 0;
  padding: clamp(32px, 6vw, 52px);
  background: var(--graphite);
  color: var(--bone);
}
.cta::after {
  content: '';
  position: absolute;
  right: -12%;
  bottom: -45%;
  width: 62%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(255, 90, 0, 0.11), rgba(255, 90, 0, 0));
  pointer-events: none;
}
.cta h2 {
  position: relative;
  margin: 0 0 14px;
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--bone);
  text-wrap: balance;
}
.cta p {
  position: relative;
  max-width: 54ch;
  margin: 0 0 18px;
  font-size: 16.5px;
  color: var(--on-dark);
}
.cta .btn,
.cta .btn-alt {
  position: relative;
}
.cta .micro {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(234, 231, 222, 0.6);
}
/* plain links in the band (Nr 2 to 4 point to the offer calculator from
   the small print): light on graphite, the brand underline stays */
.wrap .cta a:not([class]) {
  color: var(--bone);
}
.wrap .cta a:not([class]):hover {
  color: var(--brand);
}

/* ---------- sources and author ---------- */
.sources {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  font-size: 14.5px;
  color: var(--grey);
}
.sources h2 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.sources ul {
  margin: 0;
  padding-left: 20px;
}
.sources li {
  margin: 6px 0;
}

.author-box {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 40px 0 64px;
  padding: 24px 26px;
  background: var(--card);
  border: 1px solid var(--hair);
}
.author-box-photo {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hair);
}
.author-box-name {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.author-box-bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  td.num,
  th.num {
    white-space: normal;
  }
  table {
    min-width: 0;
    font-size: 15px;
  }
  th,
  td {
    padding: 11px 12px;
  }
}
/* phones: every table row becomes a small card, labels from data-label */
@media (max-width: 640px) {
  .wrap {
    font-size: 16.5px;
  }
  .article-head {
    padding-top: 36px;
  }
  .tldr,
  .toc {
    padding: 22px 20px;
  }
  .table-scroll {
    overflow: visible;
    background: none;
    border: 0;
  }
  table,
  tbody {
    display: block;
    min-width: 0;
  }
  thead {
    display: none;
  }
  tbody tr {
    display: block;
    margin: 0 0 10px;
    padding: 6px 14px;
    background: var(--card);
    border: 1px solid var(--hair);
  }
  tbody td {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    text-align: right;
    border-bottom: 1px solid var(--hair);
  }
  tbody tr td:last-child {
    border-bottom: 0;
  }
  tbody td::before {
    content: attr(data-label);
    flex: 0 0 44%;
    max-width: 200px;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--grey);
  }
  tbody td:first-child {
    font-weight: 700;
    text-align: left;
  }
  tbody td:first-child::before {
    display: none;
  }
  td.num {
    font-size: 14px;
  }
  /* calculator cards: the row title runs as one line of text, the fields
     and their units stay together on the right (the title says what to
     type), computed rows skip the blank field line, and fields stay at
     16 px so iOS Safari does not zoom the page on focus */
  .kalk tbody td:first-child {
    display: block;
  }
  .kalk tbody td:nth-child(2) {
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
  }
  .kalk tbody td:nth-child(2)::before {
    display: none;
  }
  .kalk td:empty {
    display: none;
  }
  .kalk input,
  .kalk select {
    max-width: 100%;
    font-size: 16px;
  }
  .hook {
    flex-direction: column;
    gap: 12px;
    padding: 22px 20px;
  }
  .cta .btn,
  .cta .btn-alt,
  .hook .go,
  .hook .go-alt {
    display: block;
    margin-right: 0;
    text-align: center;
  }
  .author-box {
    align-items: flex-start;
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hook .go,
  .hook .go-alt,
  .cta .btn,
  .cta .btn-alt,
  .faq summary::after {
    transition: none;
  }
  .hook .go:active,
  .hook .go-alt:active,
  .cta .btn:active,
  .cta .btn-alt:active {
    transform: none;
  }
}