/* Krzysztof Się Szykuje: light editorial theme. Warm paper, black ink, one red (#D7192F).
   Fonts: Anton (display, logo, big numbers), Literata (reading), Inter (UI), Caveat (one handwritten note). */
:root {
  --paper: #FAF8F4;
  --paper-2: #F2EEE6;
  --paper-3: #EBE5DA;
  --white: #FFFFFF;
  --ink: #141414;
  --ink-2: #45423D;
  --ink-3: #66625B;
  --line: #E4DED3;
  --line-2: #CFC7B9;
  --red: #D7192F;
  --red-dark: #B01226;
  --red-ink: #B3132A;
  --red-tint: #FCEDEE;
  --red-bright: #F0475A;
  --amber: #B97A12;
  --amber-ink: #7A4D00;
  --amber-tint: #FBF1DD;
  --on-dark: #E9E4DA;
  --on-dark-2: #BDB7AC;
  --on-dark-3: #9E988D;
  --dark-line: #393734;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --rule: 5px solid var(--ink);
  color-scheme: light;
}

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.narrow { max-width: 868px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { left: 8px; }
.print-head { display: none; }
.dot { color: var(--line-2); }

/* ---------- buttons, labels */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 12px 22px; font: 700 16px/1.2 var(--sans); text-decoration: none; border: 2px solid transparent; border-radius: 3px; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-line { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-line .ico { color: var(--red); transition: color .15s; }
.btn-line:hover .ico { color: #fff; }
.btn-yt { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-yt .yt { color: var(--red); }
.btn-yt:hover { background: #000; }
.btn-sm { min-height: 42px; padding: 8px 14px; font-size: 14.5px; gap: 7px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 12.5px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--red-ink); }
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--red); flex: 0 0 auto; }
.more { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 2px solid var(--red); font: 700 15px/1.2 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.more:hover { color: var(--red-ink); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; background: var(--red); color: #fff; font: 700 12.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; border-radius: 2px; }
.chip:hover { background: var(--red-dark); }

/* ---------- header */
.topstrip { background: var(--red); color: #fff; }
.topstrip p { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 34px; margin: 0; font: 600 13.5px/1.2 var(--sans); letter-spacing: .02em; }
.topstrip .ico { stroke-width: 3; }
.hdr { position: relative; z-index: 30; background: var(--white); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; gap: 24px; min-height: 82px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font: 400 26px/1 var(--display); letter-spacing: .01em; white-space: nowrap; }
.brand-tag { margin-top: 6px; font: 500 12.5px/1.2 var(--sans); color: var(--ink-3); white-space: nowrap; }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a { display: flex; align-items: center; gap: 7px; padding: 10px 11px; font: 600 15px/1.2 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--red-ink); }
.nav a[aria-current] { box-shadow: inset 0 -3px 0 var(--red); }
.nav-tool a { margin-left: 8px; padding: 8px 13px; border: 2px solid var(--ink); border-radius: 3px; }
.nav-tool .ico { color: var(--red); }
.nav-tool a:hover, .nav-tool a[aria-current] { background: var(--ink); color: #fff; box-shadow: none; }
.nav-tool a:hover .ico, .nav-tool a[aria-current] .ico { color: #fff; }
.nav-extra, .nav-long { display: none; }
.hdr-tools { display: flex; align-items: center; gap: 6px; }
.hdr-search { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.hdr-search:hover { background: var(--paper-2); color: var(--red-ink); }
.nav-toggle { display: none; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 9px; background: none; border: 2px solid var(--ink); border-radius: 3px; font: 700 14.5px/1 var(--sans); cursor: pointer; }
.nav-toggle .i-open, .nav-toggle .i-close { display: flex; }
.nav-toggle .i-close, .nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: flex; }

/* ---------- section scaffolding */
.sec { padding-top: 64px; padding-bottom: 64px; }
.sec-head { margin-bottom: 30px; padding-top: 18px; border-top: var(--rule); }
.sec-head h2 { margin: 0; font: 400 clamp(30px, 3.4vw, 42px)/1.08 var(--display); letter-spacing: .005em; }
.sec-head p { margin: 8px 0 0; font: 400 18px/1.5 var(--serif); color: var(--ink-2); }
.sec-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; }

/* ---------- home: hero */
.hero { padding: 60px 0 68px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.hero-title { isolation: isolate; margin: 0 0 24px; font: 400 clamp(46px, 6.3vw, 84px)/1.02 var(--display); letter-spacing: .004em; }
.brushed { position: relative; display: inline-block; white-space: nowrap; }
.brush { position: absolute; z-index: -1; left: -4%; bottom: -.14em; width: 108%; height: .34em; }
.hero-lead { max-width: 34em; margin: 0 0 30px; font: 400 21px/1.6 var(--serif); color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
.hero-ticks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font: 600 15px/1.3 var(--sans); }
.hero-ticks li { display: flex; align-items: center; gap: 7px; }
.hero-ticks .ico { color: var(--red); stroke-width: 2.8; }
.hero-side { position: relative; }
.portrait { position: relative; margin: 0 18px 0 0; }
.portrait-frame { position: relative; }
.portrait-frame::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--red); }
.portrait-frame img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border: 2px solid var(--ink); background: var(--paper-3); }
.portrait figcaption { margin-top: 32px; font: 500 13.5px/1.4 var(--sans); color: var(--ink-3); }
.portrait figcaption b { color: var(--ink); }
.note { position: absolute; z-index: 2; left: -40px; bottom: 74px; max-width: 220px; margin: 0; padding: 12px 16px 10px; background: #FFFDF7; color: var(--ink); font: 600 25px/1.05 var(--hand); box-shadow: 0 10px 22px -10px rgba(20, 20, 20, .45); transform: rotate(-3deg); }
.note span { display: block; text-align: right; color: var(--red-ink); }
.formcard { position: relative; padding: 26px 28px 22px; background: var(--white); border: 2px solid var(--ink); box-shadow: 14px 14px 0 var(--red); margin-bottom: 104px; }
.formcard-h { margin: 0 0 16px; font: 400 32px/1.08 var(--display); }
.formcard-h span { display: block; margin-bottom: 10px; font: 800 12.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--red-ink); }
.formcard .checklist { margin: 0 0 16px; border-width: 2px 0; }
.formcard .checklist .task { padding-left: 2px; padding-right: 2px; }
.formcard-foot { max-width: 30em; margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink-3); }
.formcard .note { left: auto; right: -12px; top: auto; bottom: -116px; transform: rotate(-2deg); }
.hero-lead-card { position: relative; background: var(--white); border: 2px solid var(--ink); box-shadow: 14px 14px 0 var(--red); }
.hero-lead-card .card-media { aspect-ratio: 16 / 10; }
.hero-lead-card .card-title { font-size: 25px; }
.hero-lead-card .note { left: -36px; bottom: auto; top: 26px; }

/* ---------- home: scenarios */
.scen { padding-top: 8px; }
.sec + .sec { padding-top: 12px; }
.scen-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.scen-tile { position: relative; display: flex; flex-direction: column; gap: 20px; height: 100%; min-height: 148px; padding: 18px 16px 44px; background: var(--white); border: 2px solid var(--ink); border-radius: 3px; color: var(--ink); text-decoration: none; font: 700 16.5px/1.25 var(--sans); transition: background-color .15s, color .15s; }
.scen-tile > .ico:first-child { color: var(--red); }
.scen-tile .go { position: absolute; left: 16px; bottom: 16px; color: var(--ink-3); transition: transform .15s, color .15s; }
.scen-tile:hover { background: var(--ink); color: #fff; }
.scen-tile:hover > .ico:first-child { color: var(--red-bright); }
.scen-tile:hover .go { color: #fff; transform: translateX(4px); }

/* ---------- cards */
.grid-3, .grid-4 { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--ink); box-shadow: 0 14px 28px -18px rgba(20, 20, 20, .5); }
.card-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.ph { display: grid; place-items: center; width: 100%; height: 100%; color: #8E887E; background-color: #EFEAE1; background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(20, 20, 20, .045) 10px 11px); }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.card-cat { margin: 0 0 8px; font: 700 12px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.card-cat a { position: relative; z-index: 2; color: var(--red-ink); text-decoration: none; }
.card-cat a:hover { text-decoration: underline; }
.card-title { margin: 0 0 10px; font: 700 20px/1.3 var(--serif); letter-spacing: -.005em; text-wrap: pretty; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover .card-title a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card-dek { display: -webkit-box; margin: 0 0 16px; overflow: hidden; font: 400 15.5px/1.55 var(--serif); color: var(--ink-2); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: auto 0 0; font: 500 13px/1.3 var(--sans); color: var(--ink-3); }
.grid-4 .card-title { font-size: 19px; }

/* ---------- home: topics */
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.topic { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px 24px 22px; background: var(--white); border: 1px solid var(--line); border-top: 5px solid var(--ink); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.topic:hover { border-top-color: var(--red); }
.topic-top { display: flex; justify-content: space-between; align-items: center; color: var(--red); }
.topic-count { font: 600 13px/1 var(--sans); color: var(--ink-3); }
.topic-name { font: 400 28px/1.08 var(--display); letter-spacing: .005em; }
.topic-intro { font: 400 15.5px/1.6 var(--serif); color: var(--ink-2); }
.topic-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font: 700 14.5px/1.2 var(--sans); }
.topic-go .ico { color: var(--red); transition: transform .15s; }
.topic:hover .topic-go { color: var(--red-ink); }
.topic:hover .topic-go .ico { transform: translateX(3px); }

/* ---------- home: tool band */
.toolband { padding: 68px 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toolband-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.toolband h2 { margin: 0 0 14px; font: 400 clamp(32px, 3.8vw, 48px)/1.05 var(--display); }
.toolband-text > p:not(.eyebrow) { max-width: 34em; margin: 0 0 26px; font: 400 18.5px/1.6 var(--serif); color: var(--ink-2); }
.receipt { max-width: 440px; justify-self: center; width: 100%; padding: 22px 26px 16px; background: var(--white); border: 2px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); }
.receipt-h { margin: 0 0 8px; font: 700 12.5px/1.35 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.receipt-big { margin: 0 0 14px; font: 400 92px/1 var(--display); }
.receipt-big small { font: 600 21px/1 var(--sans); color: var(--ink-2); }
.receipt dl { margin: 0; border-top: 2px dashed var(--line-2); }
.receipt dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); font: 500 15.5px/1.3 var(--sans); }
.receipt dl div:last-child { border-bottom: 0; }
.receipt dd { margin: 0; font: 400 24px/1 var(--display); white-space: nowrap; }

/* ---------- home: lessons (black band) */
.lessons { padding: 72px 0 80px; background: var(--ink); color: var(--on-dark); }
.lessons .sec-head { border-top-color: var(--red); }
.lessons .sec-head h2 { color: #fff; }
.lessons .sec-head p { color: var(--on-dark-2); }
.lesson-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; }
.lesson { padding-top: 18px; border-top: 1px solid var(--dark-line); }
.lesson-year { margin: 0 0 12px; font: 400 76px/.95 var(--display); color: var(--red-bright); letter-spacing: .01em; }
.lesson-title { margin: 0 0 10px; font: 700 21px/1.3 var(--serif); color: #fff; }
.lesson-text { margin: 0 0 16px; font: 400 16.5px/1.6 var(--serif); color: #D3CDC2; }
.lesson-link { display: inline; font: 600 14.5px/1.5 var(--sans); color: #fff; text-decoration: underline; text-decoration-color: var(--red-bright); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lesson-link .ico { display: inline-block; vertical-align: -3px; color: var(--red-bright); }
.lesson-link:hover { color: var(--red-bright); }

/* ---------- home: about me */
.me-in { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 44px; }
.me-in::before, .ftr-base::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; border-top: var(--rule); }
.me-photo { justify-self: center; }
.me-face { display: grid; place-items: center; width: 200px; height: 200px; border: 2px solid var(--ink); border-radius: 50%; object-fit: cover; box-shadow: 10px 10px 0 var(--red); }
.me-text h2 { margin: 0 0 6px; font: 400 clamp(34px, 3.6vw, 44px)/1.05 var(--display); }
.me-job { margin: 0 0 16px; font: 600 14.5px/1.4 var(--sans); color: var(--ink-3); }
.me-bio { max-width: 40em; margin: 0 0 24px; font: 400 19px/1.65 var(--serif); color: var(--ink-2); }
.me-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ---------- home: latest */
.latest { padding-top: 16px; }
.latest-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; margin: 0; padding: 0; list-style: none; }
.latest-list li { border-bottom: 1px solid var(--line); }
.latest-list a { display: flex; align-items: center; gap: 16px; padding: 14px 0; color: var(--ink); text-decoration: none; }
.ll-thumb { flex: 0 0 112px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); }
.ll-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ll-thumb .ph .ico, .sr-thumb .ph .ico { width: 26px; height: 26px; }
.ll-main { min-width: 0; }
.ll-meta { display: block; margin-bottom: 4px; font: 600 12.5px/1.3 var(--sans); color: var(--ink-3); }
.ll-title { display: block; font: 700 17.5px/1.32 var(--serif); }
.latest-list a:hover .ll-title { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }

/* ---------- page heads (category, archive, page, search, 404, tool) */
.page-head { padding: 30px 0 40px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 24px; padding: 0; list-style: none; font: 500 13.5px/1.4 var(--sans); color: var(--ink-3); }
.crumbs li { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--red-ink); text-decoration: underline; }
.crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head-row { display: flex; align-items: center; gap: 20px; }
.page-head-row .eyebrow { margin-bottom: 8px; }
.page-icon { display: grid; place-items: center; flex: 0 0 80px; width: 80px; height: 80px; background: var(--white); border: 2px solid var(--ink); color: var(--red); }
.page-title { margin: 0; font: 400 clamp(40px, 5.2vw, 66px)/1.04 var(--display); letter-spacing: .004em; }
.page-intro { max-width: 46em; margin: 18px 0 0; font: 400 20px/1.6 var(--serif); color: var(--ink-2); }
.page-count { margin: 14px 0 0; font: 600 14px/1.3 var(--sans); color: var(--ink-3); }
.list-sec { padding-top: 40px; padding-bottom: 64px; border-top: var(--rule); }
.wrap.list-sec { border-top: 0; position: relative; }
.wrap.list-sec::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; border-top: var(--rule); }
.empty { padding: 28px 30px; background: var(--white); border: 2px dashed var(--line-2); font: 400 17.5px/1.6 var(--serif); color: var(--ink-2); }
.empty-h { margin: 0 0 6px; font: 400 28px/1.1 var(--display); color: var(--ink); }
.empty p:last-child { margin: 0; }
.empty a { color: var(--red-ink); text-underline-offset: 3px; }
.other-topics { padding-bottom: 72px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pill-list a { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 8px 16px 8px 12px; background: var(--white); border: 2px solid var(--ink); border-radius: 3px; color: var(--ink); font: 600 15px/1.2 var(--sans); text-decoration: none; }
.pill-list .ico { color: var(--red); }
.pill-list a:hover { background: var(--ink); color: #fff; }
.pill-list a:hover .ico { color: #fff; }
.pill-n { min-width: 24px; padding: 3px 6px; background: var(--paper-2); color: var(--ink-2); font: 700 12px/1.2 var(--sans); text-align: center; border-radius: 2px; }
.pill-list a:hover .pill-n { background: #333; color: #fff; }

/* ---------- archive */
.arch-sec { margin-bottom: 48px; }
.arch-h { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding-top: 14px; border-top: var(--rule); font: 400 30px/1.1 var(--display); }
.arch-h .ico { color: var(--red); }
.arch-h a { color: var(--ink); text-decoration: none; }
.arch-h a:hover { color: var(--red-ink); }
.arch-n { margin-left: auto; font: 600 14px/1 var(--sans); color: var(--ink-3); }
.archive.list-sec::before { display: none; }
.index-list { margin: 0; padding: 0; list-style: none; }
.index-list li { border-bottom: 1px solid var(--line); }
.index-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; color: var(--ink); text-decoration: none; }
.index-title { font: 600 18px/1.4 var(--serif); }
.index-list a:hover .index-title { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.index-meta { flex-shrink: 0; font: 500 13px/1.3 var(--sans); color: var(--ink-3); white-space: nowrap; }

/* ---------- article */
.post-wrap { max-width: 1120px; }
.post-head { padding: 30px 0 34px; }
.post-cat { margin: 0 0 16px; }
.post-title { max-width: 920px; margin: 0 0 18px; font: 400 clamp(38px, 5vw, 62px)/1.05 var(--display); letter-spacing: .004em; }
.post-dek { max-width: 760px; margin: 0; font: 400 20.5px/1.55 var(--serif); color: var(--ink-2); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; max-width: 920px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.byline-face { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.byline-text { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.byline-name { font: 700 15.5px/1.3 var(--sans); }
.byline-name a { color: var(--ink); text-decoration: none; }
.byline-name a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.byline-meta { display: flex; flex-wrap: wrap; gap: 0 8px; font: 500 14px/1.4 var(--sans); color: var(--ink-3); }
.byline .print-btn { margin-left: auto; }
.face-initials { display: grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 400; letter-spacing: .02em; }
.byline-face.face-initials { font-size: 19px; }
.author-face.face-initials { font-size: 36px; }
.me-face.face-initials { font-size: 72px; }
.post-hero { margin: 0 auto 44px; }
.post-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-3); }
.post-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 60px; align-items: start; padding-bottom: 72px; }
.post-aside { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; }
.post-main { min-width: 0; max-width: 760px; }

/* table of contents */
.toc summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-top: var(--rule); font: 800 12.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .11em; list-style: none; cursor: pointer; }
.toc summary::-webkit-details-marker { display: none; }
.toc-n { font: 400 16px/1 var(--display); color: var(--red); letter-spacing: 0; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.toc li { border-top: 1px solid var(--line); counter-increment: t; }
.toc a { display: flex; gap: 10px; padding: 9px 4px 9px 0; font: 500 14.5px/1.38 var(--sans); color: var(--ink-2); text-decoration: none; }
.toc a::before { content: counter(t, decimal-leading-zero); min-width: 20px; font: 400 14px/1.45 var(--display); color: var(--ink-3); }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--ink); font-weight: 700; }
.toc a.active::before { color: var(--red); }

/* "W skrócie" */
.tldr { margin: 0 0 44px; padding: 22px 26px 22px; background: var(--white); border: 2px solid var(--ink); border-left: 8px solid var(--red); }
.tldr-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .11em; color: var(--red-ink); }
.tldr-mark { display: grid; place-items: center; width: 24px; height: 24px; background: var(--red); color: #fff; }
.tldr-mark .ico { stroke-width: 3; }
.tldr-text { margin: 0; font: 500 19px/1.62 var(--serif); }
.tldr-points { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line-2); list-style: none; }
.tldr-points li { display: flex; gap: 10px; margin: 8px 0 0; font: 500 16px/1.5 var(--sans); }
.tldr-points .ico { flex: 0 0 18px; margin-top: 3px; color: var(--red); stroke-width: 2.8; }

/* supply table */
.supply { margin: 0 0 44px; }
.block-h { margin: 0 0 14px; padding-top: 14px; border-top: var(--rule); font: 400 30px/1.1 var(--display); }
.supply .table-wrap { margin: 0; }
.supply-table td:first-child { font-weight: 700; color: var(--ink); }
.supply-table td:last-child { white-space: nowrap; font-weight: 600; }
.supply-note { margin: 10px 0 0; font: 400 13px/1.4 var(--sans); color: var(--ink-3); }

/* video facade */
.video { margin: 0 0 44px; }
.yt-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; background: #000; border: 0; cursor: pointer; text-align: left; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s; }
.yt-facade:hover img { opacity: 1; }
.yt-play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt-play svg { transition: transform .2s; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4)); }
.yt-facade:hover .yt-play svg { transform: scale(1.08); }
.yt-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 48px 22px 18px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .85)); color: #fff; }
.yt-kicker { display: flex; align-items: center; gap: 7px; font: 700 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .09em; }
.yt-kicker .yt { color: var(--red); }
.yt-title { font: 400 clamp(19px, 2.4vw, 26px)/1.15 var(--display); letter-spacing: .01em; }
.video-note { margin: 10px 0 0; font: 400 13.5px/1.45 var(--sans); color: var(--ink-3); }
.yt-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* prose */
.prose { font: 400 18.5px/1.72 var(--serif); color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.05em; }
.prose h2 { margin: 56px 0 18px; padding-top: 16px; border-top: var(--rule); font: 400 clamp(28px, 3vw, 35px)/1.12 var(--display); letter-spacing: .005em; scroll-margin-top: 16px; }
.prose h3 { margin: 34px 0 10px; font: 700 21px/1.32 var(--serif); scroll-margin-top: 16px; }
.prose a { color: var(--red-ink); text-decoration: underline; text-decoration-color: rgba(179, 19, 42, .4); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 26px; }
.prose li { margin: .4em 0; padding-left: 2px; }
.prose ul > li::marker { color: var(--red); }
.prose ol > li::marker { font: 700 .88em var(--sans); color: var(--red-ink); }
.prose strong { font-weight: 700; }
.prose hr { margin: 40px 0; border: 0; border-top: 2px solid var(--ink); }
.prose blockquote:not(.callout) { margin: 28px 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--ink); font-style: italic; color: var(--ink-2); }
.prose code { padding: 1px 5px; background: var(--paper-2); font: 15px/1.4 ui-monospace, Consolas, monospace; }
.inline-figure { margin: 36px 0; }
.inline-figure img { width: 100%; background: var(--paper-3); }
.inline-figure figcaption, .page-figure figcaption { margin-top: 8px; font: 400 13.5px/1.4 var(--sans); color: var(--ink-3); }

/* tables */
.table-wrap { max-width: 100%; margin: 26px 0 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; background: var(--white); font: 400 15.5px/1.5 var(--sans); }
th { padding: 12px 14px; border-bottom: 3px solid var(--ink); background: var(--white); text-align: left; vertical-align: bottom; font: 800 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .07em; }
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
tbody tr:hover td { background: #FCFBF8; }

/* checklists: a printed form */
.checklist { margin: 26px 0 30px; padding: 0 !important; background: var(--white); border: 2px solid var(--ink); list-style: none; }
.prose .checklist .task, .checklist .task { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 11px 16px; border-bottom: 1px dashed var(--line-2); font: 500 16.5px/1.45 var(--sans); }
.checklist .task:last-child { border-bottom: 0; }
.checklist .box { position: relative; flex: 0 0 20px; height: 20px; margin-top: 1px; background: var(--white); border: 2px solid var(--ink); }
.checklist .task.done { color: var(--ink-3); }
.checklist .task.done .box::after { content: ""; position: absolute; left: 5px; top: 0; width: 6px; height: 11px; border: solid var(--red); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* callouts */
.callout { --ic: none; position: relative; margin: 30px 0; padding: 18px 22px 18px 58px; background: var(--white); border: 1px solid var(--line-2); border-left: 6px solid var(--ink); font-size: 17px; line-height: 1.65; }
.callout::before { content: ""; position: absolute; left: 20px; top: 19px; width: 24px; height: 24px; background: var(--ic) no-repeat center / contain; }
.callout p:last-child { margin-bottom: 0; }
.callout > p:first-child > strong:first-child { display: block; margin-bottom: 4px; font: 800 12.5px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .09em; }
.callout-bezpieczenstwo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7192F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.6 3v5.6c0 4.6-3.2 8.4-7.6 9.8-4.4-1.4-7.6-5.2-7.6-9.8V5.8z'/%3E%3Cpath d='M8.6 12.1l2.3 2.3 4.4-4.8'/%3E%3C/svg%3E"); background: var(--red-tint); border-color: #F2C4C9; border-left-color: var(--red); }
.callout-bezpieczenstwo > p:first-child > strong:first-child { color: var(--red-ink); }
.callout-lekcja-z-przeszlosci { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0475A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6'/%3E%3Cpath d='M3.5 4v4h4'/%3E%3Cpath d='M12 8v4.3l2.8 1.8'/%3E%3C/svg%3E"); background: var(--ink); border-color: var(--ink); border-left-color: var(--red); color: var(--on-dark); }
.callout-lekcja-z-przeszlosci > p:first-child > strong:first-child { color: var(--red-bright); }
.callout-lekcja-z-przeszlosci strong { color: #fff; }
.callout-lekcja-z-przeszlosci a { color: #fff; text-decoration-color: var(--red-bright); }
.callout-wskazowka { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.4 1.1 2.2h5c0-.8.4-1.6 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); background: var(--white); border-left-color: var(--ink); }
.callout-uwaga { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B97A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2L2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.6M12 17.4v.1'/%3E%3C/svg%3E"); background: var(--amber-tint); border-color: #EBD3A6; border-left-color: var(--amber); }
.callout-uwaga > p:first-child > strong:first-child { color: var(--amber-ink); }

/* FAQ and sources inside articles and the tool */
.faq h3 { position: relative; padding-left: 38px; }
.faq h3::before { content: "?"; position: absolute; left: 0; top: .08em; width: 26px; height: 26px; background: var(--red); color: #fff; font: 400 17px/26px var(--display); text-align: center; }
.faq h3 ~ p, .faq h3 ~ ul, .faq h3 ~ ol { margin-left: 38px; }
.sources { font: 400 15px/1.55 var(--sans); }
.sources ul, .sources ol { padding-left: 20px; }
.sources li { margin: .5em 0; }
.sources a { color: var(--ink-2); word-break: break-word; }

/* lesson box, author box */
.lesson-box { margin: 48px 0 0; padding: 22px 28px 26px; background: var(--ink); color: var(--on-dark); }
.lesson-box-k { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 800 12.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--red-bright); }
.lesson-box-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.lesson-box-year { margin: 0; font: 400 64px/.92 var(--display); color: #fff; }
.lesson-box-title { margin: 0 0 6px; font: 700 21px/1.3 var(--serif); color: #fff; }
.lesson-box-text { margin: 0; font: 400 16.5px/1.6 var(--serif); color: #D3CDC2; }
.author-box { display: flex; gap: 22px; align-items: flex-start; margin: 48px 0 20px; padding-top: 24px; border-top: var(--rule); }
.author-face { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.author-text { min-width: 0; }
.author-k { margin: 0 0 4px; font: 800 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .11em; color: var(--red-ink); }
.author-name { margin: 0; font: 400 28px/1.1 var(--display); }
.author-job { margin: 4px 0 10px; font: 600 13.5px/1.4 var(--sans); color: var(--ink-3); }
.author-bio { margin: 0 0 12px; font: 400 16.5px/1.6 var(--serif); color: var(--ink-2); }
.author-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.author-links a { display: inline-flex; align-items: center; gap: 6px; font: 700 14.5px/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.author-links .yt { color: var(--red); }
.disclaimer { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font: 400 13.5px/1.55 var(--sans); color: var(--ink-3); }

/* related, prev/next */
.related { background: var(--paper-2); border-top: 1px solid var(--line); }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.prevnext a { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 18px; background: var(--white); border: 2px solid var(--ink); color: var(--ink); text-decoration: none; transition: box-shadow .15s; }
.prevnext a:hover { box-shadow: 6px 6px 0 var(--red); }
.prevnext .next { text-align: right; align-items: flex-end; }
.pn-l { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--red-ink); }
.pn-t { font: 700 17.5px/1.32 var(--serif); }

/* ---------- static page */
.page-body { padding: 36px 0 72px; border-top: var(--rule); }
.page-figure { margin: 0 0 30px; }
.page-figure img { width: 100%; }

/* ---------- search */
.search-form { display: flex; gap: 10px; max-width: 680px; margin-top: 24px; }
.search-form input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; background: var(--white); border: 2px solid var(--ink); border-radius: 3px; font: 500 17.5px/1 var(--sans); color: var(--ink); }
.search-form input::placeholder { color: #8A857C; }
.search-form input:focus-visible { outline-offset: 2px; }
.search-form .btn { min-height: 56px; }
.search-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; font: 500 14px/1.3 var(--sans); color: var(--ink-3); }
.search-hints a { padding: 6px 12px; background: var(--white); border: 1px solid var(--line-2); border-radius: 99px; color: var(--ink); text-decoration: none; }
.search-hints a:hover { border-color: var(--ink); }
.search-status { margin: 0 0 18px; font: 600 15.5px/1.5 var(--sans); color: var(--ink-2); }
.search-status a { color: var(--red-ink); }
.search-results { margin: 0; padding: 0; list-style: none; }
.search-results li { border-bottom: 1px solid var(--line); }
.search-results a.sr { display: flex; gap: 18px; padding: 18px 0; color: var(--ink); text-decoration: none; }
.sr-thumb { flex: 0 0 150px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); }
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-main { min-width: 0; }
.sr-kicker { display: block; margin-bottom: 4px; font: 700 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--red-ink); }
.sr-title { display: block; font: 700 19.5px/1.3 var(--serif); }
.sr-dek { display: block; margin-top: 6px; font: 400 15.5px/1.55 var(--serif); color: var(--ink-2); }
.search-results a.sr:hover .sr-title { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.search-empty { padding: 22px 0; font: 400 17.5px/1.6 var(--serif); color: var(--ink-2); }
.search-empty a { color: var(--red-ink); }

/* ---------- 404 */
.nf-code { margin: 0 0 6px; font: 400 clamp(110px, 18vw, 180px)/.9 var(--display); color: var(--red); }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 24px 0 0; padding: 0; list-style: none; }
.nf-links a { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nf-links .ico { color: var(--red); }

/* ---------- tool: water and food calculator */
.tool-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: end; }
.tool-fig { margin: 0; }
.tool-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--ink); }
.calc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: start; }
.calc-form { padding: 6px 28px 24px; background: var(--white); border: 2px solid var(--ink); }
.fs { min-width: 0; margin: 0; padding: 20px 0 22px; border: 0; border-bottom: 1px dashed var(--line-2); }
.fs legend { float: left; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 16px; padding: 0; font: 400 23px/1.1 var(--display); }
.fs legend + * { clear: both; }
.fs legend .ico { color: var(--red); }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.field label { display: block; margin: 0 0 8px; font: 700 15px/1.3 var(--sans); }
.hint { font: 500 13px/1.45 var(--sans); color: var(--ink-3); }
.field label .hint { display: block; font-weight: 500; }
.fs > .hint { margin: 12px 0 0; }
.stepper, .unit-input { display: flex; align-items: stretch; width: 100%; max-width: 210px; height: 52px; background: var(--white); border: 2px solid var(--ink); border-radius: 3px; }
.stepper button { flex: 0 0 48px; padding: 0; background: var(--paper-2); border: 0; font: 500 26px/1 var(--sans); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.stepper button:hover { background: var(--ink); color: #fff; }
.stepper button:focus-visible { position: relative; z-index: 1; outline-offset: 0; }
.stepper input, .unit-input input { flex: 1; width: 100%; min-width: 0; padding: 0 8px; background: transparent; border: 0; font: 400 26px/1 var(--display); color: var(--ink); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.stepper input { border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button, .unit-input input::-webkit-inner-spin-button, .unit-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible, .unit-input input:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.unit-input input { text-align: left; padding-left: 14px; }
.unit-input input::placeholder { font: 500 15px var(--sans); color: #8A857C; }
.unit-input span { display: flex; align-items: center; padding: 0 14px 0 6px; font: 600 15px/1 var(--sans); color: var(--ink-3); }
.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 10px; align-items: end; }
.seg { position: relative; display: block; cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg > span { display: flex; flex-direction: column; justify-content: center; min-height: 66px; padding: 8px 10px; background: var(--white); border: 2px solid var(--ink); border-radius: 3px; text-align: center; transition: background-color .12s, color .12s; }
.seg b { font: 400 25px/1 var(--display); }
.seg small { margin-top: 5px; font: 600 12px/1.2 var(--sans); color: var(--ink-3); }
.seg:hover > span { background: var(--paper-2); }
.seg input:checked + span { background: var(--ink); color: #fff; }
.seg input:checked + span small { color: var(--on-dark-2); }
.seg input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 3px; }
.seg-custom label { display: block; margin: 0 0 5px; font: 600 12.5px/1.2 var(--sans); color: var(--ink-3); }
.seg-custom .unit-input { max-width: none; height: 66px; }
.seg-custom.is-active .unit-input { background: var(--ink); }
.seg-custom.is-active .unit-input input { color: #fff; }
.seg-custom.is-active .unit-input span { color: var(--on-dark-2); }
.check { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 22px 0 6px; cursor: pointer; }
.check input { position: absolute; left: 0; top: 22px; width: 28px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.check-box { display: grid; place-items: center; flex: 0 0 28px; height: 28px; background: var(--white); border: 2px solid var(--ink); border-radius: 2px; color: transparent; }
.check-box .ico { stroke-width: 3; }
.check input:checked + .check-box { background: var(--red); border-color: var(--red); color: #fff; }
.check input:focus-visible + .check-box { outline: 3px solid var(--red); outline-offset: 3px; }
.check-text b { display: block; font: 700 16px/1.35 var(--sans); }
.check-text small { display: block; margin-top: 3px; font: 500 13.5px/1.45 var(--sans); color: var(--ink-3); }
.calc-out { position: sticky; top: 20px; padding: 26px 28px 24px; background: var(--ink); color: var(--on-dark); }
.out-h { margin: 0; font: 400 32px/1.1 var(--display); color: #fff; }
.out-h span { color: var(--red-bright); }
.out-who { margin: 6px 0 16px; font: 500 14.5px/1.45 var(--sans); color: var(--on-dark-2); }
.out-block { padding: 16px 0 18px; border-top: 1px solid var(--dark-line); }
.out-label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 12.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: #fff; }
.out-label .ico { color: var(--red-bright); }
.tag { margin-left: 4px; padding: 3px 7px; border: 1px solid #5A5752; border-radius: 2px; font: 600 11px/1.2 var(--sans); text-transform: none; letter-spacing: .03em; color: var(--on-dark-2); }
.out-big { margin: 0; font: 400 104px/1 var(--display); color: #fff; letter-spacing: .005em; }
.out-unit { font: 600 22px/1 var(--sans); color: var(--on-dark-2); letter-spacing: 0; }
.out-exact { margin: 4px 0 0; font: 500 13.5px/1.4 var(--sans); color: var(--on-dark-2); }
.out-break { margin: 12px 0 14px; padding: 0; list-style: none; font: 500 14px/1.35 var(--sans); }
.out-break li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--dark-line); }
.out-break li > span:first-child { grid-column: 1; grid-row: 1; color: var(--on-dark); }
.out-break li > span:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--on-dark-3); }
.out-break li > b { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 700 15px/1 var(--sans); color: #fff; white-space: nowrap; }
.out-packs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.out-packs p { margin: 0; padding: 12px 14px; background: #201F1D; border: 1px solid var(--dark-line); }
.out-packs b { font: 400 42px/1 var(--display); color: #fff; }
.out-packs span { font: 700 15px/1.2 var(--sans); color: #fff; }
.out-packs small { display: block; margin-top: 5px; font: 500 12.5px/1.35 var(--sans); color: var(--on-dark-3); }
.out-packs .out-or { padding: 0; background: none; border: 0; font: italic 400 15px/1 var(--serif); color: var(--on-dark-3); }
.out-mid { margin: 0 0 8px; font: 400 58px/1 var(--display); color: #fff; }
.out-line { margin: 0; font: 400 15px/1.55 var(--serif); color: #D3CDC2; }
.out-line b { color: #fff; font-family: var(--sans); white-space: nowrap; }
.out-warn { margin: 4px 0 0; padding: 12px 14px; background: #3A2B12; border-left: 4px solid var(--amber); font: 600 14px/1.45 var(--sans); color: #FFE2A8; }
.shop { padding-top: 32px; }
.shop-card { padding: 24px 28px 20px; background: var(--white); border: 2px solid var(--ink); }
.shop-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.shop-head h2 { margin: 0; font: 400 34px/1.1 var(--display); }
.shop-for { margin: 4px 0 0; font: 600 14.5px/1.4 var(--sans); color: var(--ink-3); }
.shop-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.shop .checklist { margin: 0; border-width: 2px 0; }
.shop .checklist .task { padding-left: 4px; padding-right: 4px; }
.copy-status { min-height: 1.5em; margin: 10px 0 0; font: 600 14px/1.5 var(--sans); color: var(--ink-2); }
.tool-info { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; padding-top: 32px; padding-bottom: 72px; }
.tool-info .prose { max-width: 800px; }
.tool-info .prose > h2:first-child { margin-top: 24px; }
.tool-aside { position: sticky; top: 20px; margin-top: 24px; }
.tool-aside .card { margin-bottom: 20px; }
.tool-aside .card-title { font-size: 18.5px; }
.aside-h { margin: 0 0 16px; padding-top: 12px; border-top: var(--rule); font: 400 26px/1.1 var(--display); }
.rules td:first-child { font-weight: 700; }
.rules td:nth-child(2) { white-space: nowrap; font-weight: 600; }

/* ---------- footer */
.ftr { padding-top: 56px; background: var(--ink); color: var(--on-dark-2); }
.ftr-grid { display: grid; grid-template-columns: 2fr 1fr 1.1fr; gap: 48px; }
.ftr .ftr-logo { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 400 26px/1 var(--display); color: #fff; letter-spacing: .01em; }
.ftr p { max-width: 46ch; margin: 0 0 16px; font: 400 15px/1.6 var(--sans); }
.ftr-yt { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 2px solid #fff; border-radius: 3px; color: #fff; font: 700 15px/1 var(--sans); text-decoration: none; }
.ftr-yt .yt { color: var(--red); }
.ftr-yt:hover { background: #fff; color: var(--ink); }
.ftr-h { margin: 4px 0 14px !important; font: 800 12.5px/1 var(--sans) !important; text-transform: uppercase; letter-spacing: .12em; color: var(--red-bright); }
.ftr ul { margin: 0; padding: 0; list-style: none; }
.ftr li { margin: 0 0 9px; }
.ftr ul a { font: 400 15px/1.4 var(--sans); color: var(--on-dark); text-decoration: none; }
.ftr ul a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--red-bright); text-underline-offset: 3px; }
.ftr-base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; margin-top: 44px; padding-top: 20px; padding-bottom: 30px; }
.ftr-base::before { border-top: 1px solid var(--dark-line); }
.ftr-base p { max-width: none; margin: 0; font: 400 13.5px/1.5 var(--sans); color: #A39D92; }
.ftr-base .ftr-disc { color: #fff; font-weight: 600; }

/* ---------- responsive */
@media (max-width: 1180px) {
  .nav a { padding: 10px 8px; }
  .nav-tool a { margin-left: 4px; }
  .brand-name { font-size: 24px; }
}
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .hdr-tools { margin-left: auto; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 4px 0 18px; background: var(--white); border-bottom: var(--rule); box-shadow: 0 18px 30px -20px rgba(20, 20, 20, .45); }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 17px; }
  .nav a[aria-current] { box-shadow: inset 4px 0 0 var(--red); padding-left: 16px; }
  .nav-extra { display: block; order: 1; }
  .nav-tool { order: 2; }
  .nav-tool a { justify-content: center; margin: 16px 0 0; padding: 13px 16px; border: 2px solid var(--ink); }
  .nav-long { display: inline; }
}
@media (max-width: 1000px) {
  .hero-grid, .toolband-in, .tool-head-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-side { max-width: 560px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scen-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-list { grid-template-columns: 1fr; gap: 30px; }
  .lesson { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; }
  .lesson-year { grid-row: 1 / 4; font-size: 60px; }
  .receipt { justify-self: start; }
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .post-main { max-width: none; }
  .post-aside { position: static; max-height: none; overflow: visible; margin-bottom: 28px; }
  .toc { background: var(--white); border: 2px solid var(--ink); }
  .toc summary { padding: 15px 16px; border-top: 0; }
  .toc summary::after { content: ""; width: 9px; height: 9px; margin: -4px 2px 0 6px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .15s; }
  .toc[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
  .toc summary span:first-child { margin-right: auto; }
  .toc ol { padding: 0 16px 8px; }
  .calc { grid-template-columns: 1fr; }
  .calc-out { position: static; }
  .tool-info { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tool-aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
  .tool-aside .aside-h { grid-column: 1 / -1; }
  .tool-fig { max-width: 560px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .wrap.list-sec::before, .me-in::before, .ftr-base::before { left: 16px; right: 16px; }
  .tool-aside { grid-template-columns: minmax(0, 1fr); }
  .topstrip p { min-height: 30px; font-size: 12.5px; }
  .hdr-in { gap: 10px; min-height: 66px; }
  .brand { gap: 9px; }
  .brand .mark { width: 34px; height: 34px; }
  .brand-name { font-size: 19px; }
  .brand-tag { display: none; }
  .nav ul { padding: 0 16px; }
  .hdr-search { width: 40px; height: 40px; }
  .sec { padding-top: 48px; padding-bottom: 48px; }
  .hero { padding: 34px 0 44px; }
  .hero-grid { gap: 40px; }
  .hero-title { font-size: clamp(40px, 12vw, 58px); }
  .hero-lead { font-size: 18.5px; }
  .hero-cta .btn { flex: 1 1 220px; }
  .portrait { margin-right: 18px; }
  .portrait-frame img { aspect-ratio: 1 / 1; object-position: 50% 18%; }
  .note { position: relative; left: auto; right: auto; top: auto; bottom: auto; display: inline-block; margin: -26px 0 0 14px; font-size: 23px; }
  .portrait .note { position: absolute; left: auto; right: -10px; bottom: 76px; max-width: 176px; margin: 0; padding: 10px 13px 8px; font-size: 21px; }
  .byline-text { flex: 1 1 0; min-width: 200px; }
  .yt-facade { aspect-ratio: auto; }
  .yt-facade img { height: auto; aspect-ratio: 16 / 9; }
  .yt-play { bottom: auto; aspect-ratio: 16 / 9; }
  .yt-facade .yt-cap { position: static; padding: 12px 14px 14px; background: var(--ink); }
  .formcard { padding: 22px 18px 18px; box-shadow: 10px 10px 0 var(--red); margin-right: 10px; margin-bottom: 104px; }
  .formcard .note { position: absolute; top: auto; bottom: -100px; right: -6px; margin: 0; font-size: 21px; }
  .hero-lead-card { box-shadow: 10px 10px 0 var(--red); margin-right: 10px; }
  .hero-lead-card .note { position: relative; top: auto; left: auto; margin: -20px 0 14px 14px; }
  .grid-3, .grid-4, .topic-grid, .latest-list { grid-template-columns: minmax(0, 1fr); }
  .scen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .scen-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .scen-tile { min-height: 118px; gap: 14px; padding: 14px 14px 40px; font-size: 15.5px; }
  .scen-tile .go { left: 14px; bottom: 13px; }
  .receipt { box-shadow: 8px 8px 0 var(--ink); }
  .receipt-big { font-size: 74px; }
  .lessons { padding: 52px 0 56px; }
  .lesson { display: block; }
  .lesson-year { font-size: 56px; }
  .me-in { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .me-photo { justify-self: start; }
  .me-face { width: 140px; height: 140px; box-shadow: 8px 8px 0 var(--red); }
  .me-face.face-initials { font-size: 52px; }
  .page-head { padding: 22px 0 30px; }
  .page-icon { flex-basis: 60px; width: 60px; height: 60px; }
  .page-icon .ico { width: 30px; height: 30px; }
  .page-head-row { gap: 14px; }
  .page-intro { font-size: 18px; }
  .crumbs ol { margin-bottom: 18px; font-size: 13px; }
  .post-head { padding: 22px 0 26px; }
  .post-dek { font-size: 18.5px; }
  .byline .print-btn { margin-left: 0; }
  .post-hero { margin-bottom: 28px; }
  .post-hero.wrap { padding: 0; }
  .tldr { padding: 18px 16px 18px; border-left-width: 6px; }
  .tldr-text { font-size: 18px; }
  .prose { font-size: 17.5px; }
  .prose h2 { margin-top: 46px; }
  .callout { padding: 16px 16px 16px 50px; font-size: 16.5px; }
  .callout::before { left: 15px; top: 17px; width: 22px; height: 22px; }
  .checklist .task, .prose .checklist .task { padding: 10px 12px; gap: 12px; font-size: 16px; }
  .faq h3 { padding-left: 34px; }
  .faq h3 ~ p, .faq h3 ~ ul, .faq h3 ~ ol { margin-left: 0; }
  .prose table { font-size: 14.5px; }
  .prose th, .prose td { padding: 9px 10px; }
  .prose .table-wrap { background: linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, var(--white) 30%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(20, 20, 20, .2), rgba(20, 20, 20, 0)), radial-gradient(farthest-side at 100% 50%, rgba(20, 20, 20, .2), rgba(20, 20, 20, 0)) 100% 0; background-color: var(--white); background-repeat: no-repeat; background-size: 36px 100%, 36px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; }
  .prose .table-wrap table, .prose .table-wrap th { background: transparent; }
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
  .stack-table { border-top: 3px solid var(--ink); }
  .stack-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .stack-table tbody tr:last-child { border-bottom: 2px solid var(--ink); }
  .stack-table td, .stack-table tbody tr:last-child td { padding: 2px 0; border: 0; white-space: normal !important; }
  .stack-table td:first-child { font-size: 16.5px; }
  .stack-table td + td::before { content: attr(data-label) ": "; font: 700 12px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
  .rules td:nth-child(2)::before { content: "Ile: "; }
  .rules td:nth-child(3)::before { content: "Sk\105 d ta liczba: "; }
  .rules td:nth-child(2) { font-weight: 700; }
  .rules td:nth-child(3) { margin-top: 4px; }
  .yt-play svg { width: 60px; height: 42px; }
  .lesson-box { padding: 20px 18px 22px; }
  .lesson-box-in { grid-template-columns: 1fr; gap: 8px; }
  .lesson-box-year { font-size: 52px; }
  .author-box { flex-direction: column; gap: 14px; }
  .author-face { width: 80px; height: 80px; flex-basis: 80px; }
  .prevnext { grid-template-columns: 1fr; }
  .prevnext .next { text-align: left; align-items: flex-start; }
  .index-list a { flex-direction: column; gap: 4px; }
  .arch-h { font-size: 26px; }
  .search-form .btn span { display: none; }
  .search-form .btn { padding: 0 16px; }
  .sr-thumb { flex-basis: 96px; }
  .sr-title { font-size: 17.5px; }
  .sr-dek { display: none; }
  .calc-form { padding: 4px 16px 18px; }
  .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seg-custom { grid-column: 1 / -1; }
  .seg-custom .unit-input { height: 54px; }
  .calc-out { padding: 22px 18px 20px; }
  .out-big { font-size: 84px; }
  .out-mid { font-size: 48px; }
  .shop-card { padding: 20px 16px 16px; }
  .shop-head h2 { font-size: 30px; }
  .tool-head .page-intro { font-size: 18px; }
  .tool-fig { display: none; }
  .rules td:nth-child(2) { white-space: normal; min-width: 110px; }
  .ftr { padding-top: 44px; }
  .ftr-grid { grid-template-columns: 1fr; gap: 30px; }
  .ftr-base { flex-direction: column; }
}
@media (max-width: 440px) {
  .nav-toggle-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-toggle { padding: 0 8px; }
  .brand-name { font-size: 18px; }
  .fields-2 { gap: 12px; }
  .stepper button { flex-basis: 40px; font-size: 22px; }
  .stepper input, .unit-input input { font-size: 23px; }
  .unit-input input { padding-left: 10px; }
  .unit-input span { padding-right: 10px; }
  .out-packs { gap: 6px; }
  .out-packs p { padding: 10px; }
  .out-packs b { font-size: 34px; }
  .out-packs span { font-size: 14px; }
  .out-packs .out-or { font-size: 13px; }
  .seg b { font-size: 22px; }
  .seg small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- print: clean paper, ink only */
@media print {
  @page { margin: 14mm 14mm 16mm; }
  .topstrip, .hdr, .ftr, .skip, .post-aside, .video, .related, .print-btn, .post-hero, .inline-figure, .author-box, .crumbs, .calc-form, .tool-info, .tool-fig, .shop-actions, .copy-status, .supply-note, .post-cat, .tool-head .eyebrow, .out-warn[hidden] { display: none !important; }
  html, body { background: #fff !important; color: #000; }
  body { font-size: 11pt; }
  .print-head { display: block; margin: 0 0 10pt; padding-bottom: 4pt; border-bottom: 1pt solid #000; font: 600 9pt/1.3 var(--sans); color: #333; }
  .wrap, .post-wrap { max-width: none; padding: 0; }
  .post-head, .page-head { padding: 0 0 8pt; }
  .post-title, .page-title { font-size: 25pt; }
  .post-dek, .page-intro { font-size: 11.5pt; margin-top: 6pt; }
  .byline { margin-top: 8pt; padding-top: 6pt; }
  .byline-face { display: none; }
  .post-layout { display: block; padding: 0; }
  .post-main { max-width: none; }
  .tldr { margin-bottom: 14pt; padding: 10pt 12pt; border: 1.5pt solid #000; border-left-width: 5pt; break-inside: avoid; }
  .tldr-mark { background: none; color: #000; border: 1pt solid #000; }
  .tldr-text { font-size: 11.5pt; }
  .tldr-points li { font-size: 10.5pt; }
  .block-h { font-size: 16pt; border-top-width: 2pt; }
  .supply { margin-bottom: 14pt; }
  .prose { font-size: 11pt; line-height: 1.5; }
  .prose h2 { margin: 18pt 0 6pt; padding-top: 6pt; border-top: 2pt solid #000; font-size: 16pt; break-after: avoid; }
  .prose h3 { margin: 12pt 0 4pt; font-size: 12pt; break-after: avoid; }
  .prose a { color: #000; text-decoration: underline; }
  table { font-size: 9.5pt; }
  th { border-bottom: 1.5pt solid #000; }
  tr, .checklist .task, .callout, .lesson-box { break-inside: avoid; }
  tbody tr:last-child td { border-bottom: 1.5pt solid #000; }
  .checklist { margin: 10pt 0 14pt; border: 1.5pt solid #000; }
  .checklist .task, .prose .checklist .task { padding: 5pt 8pt; border-bottom: .75pt dashed #888; font-size: 10.5pt; }
  .checklist .box { flex-basis: 11pt; height: 11pt; border: 1.25pt solid #000; }
  .callout { margin: 12pt 0; padding: 8pt 10pt; background: #fff !important; color: #000 !important; border: 1pt solid #000; border-left: 4pt solid #000; font-size: 10.5pt; }
  .callout::before { display: none; }
  .callout strong, .callout > p:first-child > strong:first-child, .callout a { color: #000 !important; }
  .faq h3 { padding-left: 0; }
  .faq h3::before { display: none; }
  .faq h3 ~ p { margin-left: 0; }
  .sources a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #333; word-break: break-all; }
  .lesson-box { margin-top: 14pt; padding: 8pt 10pt; background: #fff; border: 1pt solid #000; }
  .lesson-box *, .lesson-box-k { color: #000 !important; }
  .lesson-box-year { font-size: 26pt; }
  .disclaimer { margin-top: 12pt; padding-top: 6pt; border-top: 1pt solid #000; color: #000; }
  .calc { display: block; }
  .calc-out { position: static; margin: 4pt 0 12pt; padding: 10pt 12pt; background: #fff !important; border: 1.5pt solid #000; break-inside: avoid; }
  .calc-out *, .calc-out .ico { color: #000 !important; background: transparent !important; border-color: #999 !important; }
  .out-big { font-size: 46pt; }
  .out-mid { font-size: 28pt; }
  .out-packs p { padding: 6pt 8pt; }
  .shop { padding: 0; }
  .shop-card { padding: 0; border: 0; }
  .shop-head h2 { font-size: 18pt; }
}