@font-face {
  font-family: "Deco Text";
  src: local("Georgia"), local("Times New Roman");
  font-display: swap;
  size-adjust: 101%;
  ascent-override: 90%;
  descent-override: 21%;
}

:root {
  --c-bg: #3b0f14;
  --c-bg-2: #2a0a0e;
  --c-paper: #f3e6cb;
  --c-paper-2: #e7d6b4;
  --c-ink: #2a0a0e;
  --c-ink-2: #4a2a20;
  --c-cream: #d8c4a4;
  --c-brass: #c9a227;
  --c-brass-2: #8c6a3a;
  --c-line: #58202a;
  --c-line-2: #d3bd94;
  --s-pad: 44px;
  --f-head: "Deco Text", "Bodoni Moda", Georgia, serif;
  --f-body: "Karla", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-paper);
  font: 400 17px/1.78 var(--f-body);
}

img { max-width: 100%; display: block; }
a { color: var(--c-brass); text-decoration: none; }
a:hover { color: #e6c86a; text-decoration: underline; }

._wrap { width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--s-pad); }

/* header: two tiers, symmetric */
._top { background: var(--c-bg-2); border-bottom: 1px solid var(--c-line); font-size: 12px; letter-spacing: 1.6px; color: #a58a6a; }
._top ._wrap { display: flex; justify-content: space-between; padding-top: 9px; padding-bottom: 9px; }
._hd { background: var(--c-bg-2); }
._hd ._wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px; padding-top: 18px; padding-bottom: 18px; }
._hd_nav { display: flex; gap: 24px; font-size: 14px; letter-spacing: 1.1px; }
._hd_nav a { color: #a58a6a; }
._hd_nav a[aria-current="page"] { color: var(--c-paper); border-bottom: 1px solid var(--c-brass); }
._mark { text-align: center; }
._mark b { display: block; font: 800 27px/1 var(--f-head); letter-spacing: 5px; color: var(--c-brass); }
._mark span { font-size: 9px; letter-spacing: 5px; color: #a58a6a; }
._hd_act { display: flex; justify-content: flex-end; align-items: center; gap: 20px; font-size: 14px; letter-spacing: 1.1px; }
._btn { padding: 12px 26px; border: 0; background: var(--c-brass); color: var(--c-bg-2); font: 700 13px var(--f-body); letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
._btn:hover { background: #dfb63c; }
._btn--big { padding: 17px 42px; font-size: 15px; letter-spacing: 2.4px; }
._btn--ghost { background: none; border: 1px solid var(--c-brass-2); color: var(--c-paper); clip-path: none; }

/* opening spread */
._open { position: relative; padding: 46px 0 40px; overflow: hidden; }
._open svg { position: absolute; inset: -30px 0 auto 0; opacity: .28; }
._open ._wrap { position: relative; display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: center; }
._kick { font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: var(--c-brass); }
._open h1 { margin: 12px 0 14px; font: 400 clamp(32px, 4vw, 50px)/1.1 var(--f-head); }
._open h1 i { color: var(--c-brass); }
._open p { margin: 0 0 20px; max-width: 34em; color: var(--c-cream); }
._open_row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
._open_art { border: 1px solid var(--c-brass); padding: 8px; }
._open_art img { border: 2px solid var(--c-brass); }
._ages { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12px; color: #a58a6a; }
._ages b { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--c-brass-2); font-size: 11px; color: var(--c-cream); }

/* ledger strip of facts */
._ledger { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
._ledger div { padding: 18px 20px; border-right: 1px solid var(--c-line); }
._ledger div:last-child { border-right: 0; }
._ledger b { display: block; font: 400 26px var(--f-head); color: var(--c-brass); }
._ledger span { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #a58a6a; }

/* article on paper */
._paper { background: var(--c-paper); color: var(--c-ink); padding: 46px 0 40px; }
._paper ._wrap { max-width: 900px; }
._toc { margin: 0 0 30px; border: 1px solid var(--c-line-2); background: #efe1c2; }
._toc summary { padding: 14px 18px; cursor: pointer; font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--c-brass-2); }
._toc ol { margin: 0; padding: 0 22px 18px 40px; }
._toc li { margin-bottom: 7px; }
._toc a { color: var(--c-ink-2); font-size: 15px; }

._paper h2 { margin: 38px 0 14px; font: 400 30px/1.2 var(--f-head); color: var(--c-ink); scroll-margin-top: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--c-line-2); }
._paper h2:first-of-type { margin-top: 0; }
._paper h3 { margin: 26px 0 10px; font: 400 22px var(--f-head); color: var(--c-brass-2); }
._paper p { margin: 0 0 15px; color: var(--c-ink-2); }
._paper strong { color: var(--c-ink); }

._say { margin: 24px 0; padding: 4px 0 4px 22px; border-left: 3px double var(--c-brass); font: italic 400 21px/1.5 var(--f-head); color: var(--c-ink); }
._figs { display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0; border-top: 1px solid var(--c-line-2); border-bottom: 1px solid var(--c-line-2); }
._figs div { flex: 1 1 140px; padding: 14px 16px; }
._figs div + div { border-left: 1px solid var(--c-line-2); }
._figs b { display: block; font: 400 24px var(--f-head); color: var(--c-brass-2); }
._figs span { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #8a7a5e; }

._mark_note { margin: 22px 0; padding: 16px 20px; background: #efe1c2; border-left: 4px solid var(--c-brass); }
._mark_note--warning { border-left-color: #a8232f; }
._mark_note--status { border-left-color: #2f6b3a; }
._mark_note b { display: block; margin-bottom: 5px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-brass-2); }
._mark_note p { margin: 0; font-size: 15.5px; }

._dots { margin: 16px 0 22px; padding: 0; list-style: none; }
._dots li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--c-line-2); }
._dots li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 9px; height: 9px; background: var(--c-brass); transform: rotate(45deg); }
._roman { margin: 16px 0 22px; padding: 0; list-style: none; counter-reset: r; }
._roman li { counter-increment: r; position: relative; padding: 12px 0 12px 54px; border-top: 1px solid var(--c-line-2); }
._roman li::before { content: counter(r, upper-roman) "."; position: absolute; left: 0; top: 12px; width: 40px; font: 400 20px var(--f-head); color: var(--c-brass); }
._plain { margin: 14px 0 20px; padding-left: 20px; }
._plain li { margin-bottom: 8px; }

._sheet { margin: 24px 0; overflow-x: auto; }
._sheet table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
._sheet caption { padding: 0 0 10px; text-align: left; font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--c-brass-2); }
._sheet th { padding: 10px 12px; text-align: left; font: 600 12px var(--f-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--c-ink); border-top: 2px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); }
._sheet td { padding: 11px 12px; border-bottom: 1px solid var(--c-line-2); color: var(--c-ink-2); }
._sheet tr:last-child td { border-bottom: 2px solid var(--c-ink); }
._sheet td:first-child { color: var(--c-ink); font-weight: 600; }

._ask { margin: 26px 0 8px; }
._ask div { border-bottom: 1px solid var(--c-line-2); padding: 14px 0; }
._ask h4 { margin: 0 0 6px; font: 600 17px var(--f-body); color: var(--c-ink); }
._ask p { margin: 0; font-size: 15.5px; }

._plate { margin: 26px 0; }
._plate img { border: 1px solid var(--c-brass-2); }
._plate figcaption { margin-top: 8px; font: italic 400 14px var(--f-head); color: var(--c-brass-2); }

._sim { margin: 26px 0; padding: 22px; background: #efe1c2; border: 1px solid var(--c-line-2); }
._sim h3 { margin: 0 0 4px; }
._sim p { font-size: 14px; color: #6f5b3e; }
._sim input[type=range] { width: 100%; accent-color: var(--c-brass-2); }
._sim_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 16px; border-top: 1px solid var(--c-line-2); }
._sim_grid div { padding: 12px 14px; border-right: 1px solid var(--c-line-2); }
._sim_grid div:last-child { border-right: 0; }
._sim_grid b { display: block; font: 400 22px var(--f-head); color: var(--c-ink); }
._sim_grid span { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #8a7a5e; }

/* voucher band */
._voucher { display: flex; align-items: stretch; margin: 0; background: var(--c-paper); color: var(--c-ink); border: 2px solid var(--c-brass); }
._voucher_art { width: 230px; flex-shrink: 0; background: var(--c-bg-2); overflow: hidden; }
._voucher_art img { width: 100%; height: 100%; object-fit: cover; }
._voucher_body { flex: 1 1 auto; padding: 26px 30px; }
._voucher_body span { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--c-brass-2); }
._voucher_body h2 { margin: 8px 0 10px; font: 400 30px/1.15 var(--f-head); border: 0; padding: 0; }
._voucher_body p { margin: 0 0 16px; color: var(--c-ink-2); font-size: 15.5px; }
._voucher_stub { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; border-left: 2px dashed var(--c-brass-2); text-align: center; }
._voucher_stub b { font: 400 26px var(--f-head); letter-spacing: 2px; }
._voucher_stub small { font-size: 11px; color: var(--c-brass-2); }

._crumbs { padding: 12px 0 0; font-size: 13px; color: #a58a6a; }
._crumbs a { color: #a58a6a; }

/* footer as a torn ticket */
._ft { position: relative; margin-top: 44px; padding: 40px 0 30px; background: var(--c-paper); color: var(--c-ink); }
._ft::before { content: ""; position: absolute; top: -9px; left: 0; right: 0; height: 18px; background: radial-gradient(circle at 9px 9px, var(--c-bg) 9px, transparent 10px) repeat-x; background-size: 26px 18px; }
._ft_grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
._ft h2 { margin: 0 0 12px; font: 600 11px var(--f-body); letter-spacing: 2.4px; text-transform: uppercase; color: var(--c-brass-2); border: 0; padding: 0; }
._ft ul { margin: 0; padding: 0; list-style: none; }
._ft li { margin-bottom: 8px; }
._ft a { color: var(--c-ink-2); font-size: 14px; }
._ft p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.7; color: var(--c-ink-2); }
._pays { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
._ft_end { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--c-line-2); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--c-brass-2); }

@media (max-width: 980px) {
  ._open ._wrap { grid-template-columns: 1fr; }
  ._ledger { grid-template-columns: repeat(2, 1fr); }
  ._voucher { flex-wrap: wrap; }
  ._voucher_art, ._voucher_stub { width: 100%; border-left: 0; }
  ._voucher_stub { border-top: 2px dashed var(--c-brass-2); }
  ._ft_grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --s-pad: 18px; }
  ._hd ._wrap { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  ._hd_nav, ._hd_act { justify-content: center; flex-wrap: wrap; gap: 14px; }
  ._paper h2 { font-size: 25px; }
  ._sim_grid { grid-template-columns: 1fr; }
  ._sim_grid div { border-right: 0; border-bottom: 1px solid var(--c-line-2); }
  ._ft_grid { grid-template-columns: 1fr; }
  ._ledger { grid-template-columns: 1fr 1fr; }
}

/* ---- visual cadence: one image, pair, ribbon or banner at least every third block ---- */
._inset { float: right; width: min(42%, 380px); margin: 6px 0 20px 30px; }
._inset img { border: 1px solid var(--c-brass-2); }
._inset figcaption { margin-top: 8px; font: italic 400 13.5px/1.5 var(--f-head); color: var(--c-brass-2); }

._pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; clear: both; }
._pair figure { margin: 0; }
._pair img { border: 1px solid var(--c-line-2); }
._pair figcaption { margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--c-brass-2); }

._shotquote { position: relative; margin: 30px 0; clear: both; }
._shotquote img { width: 100%; height: 320px; object-fit: cover; filter: sepia(.18) contrast(1.05); }
._shotquote figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 26px;
  background: linear-gradient(0deg, rgba(42, 10, 14, .94), rgba(42, 10, 14, 0));
  font: italic 400 19px/1.45 var(--f-head); color: var(--c-paper);
}

._ribbon {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; margin: 32px 0; clear: both;
  background: var(--c-bg-2); color: var(--c-paper); border-top: 3px double var(--c-brass); border-bottom: 3px double var(--c-brass);
}
._ribbon figure { margin: 0; height: 100%; }
._ribbon img { width: 100%; height: 100%; object-fit: cover; min-height: 190px; }
._ribbon > div { padding: 24px 28px; }
._ribbon span { font-size: 11px; letter-spacing: 3.4px; text-transform: uppercase; color: var(--c-brass); }
._ribbon h3 { margin: 8px 0 8px; font: 400 25px/1.2 var(--f-head); color: var(--c-paper); }
._ribbon p { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--c-cream); }

@media (max-width: 760px) {
  ._inset { float: none; width: 100%; margin: 22px 0; }
  ._pair { grid-template-columns: 1fr; }
  ._ribbon { grid-template-columns: 1fr; }
  ._shotquote img { height: 240px; }
}
._ribbon_h { margin: 8px 0 8px; font: 400 25px/1.2 var(--f-head); color: var(--c-paper); }

/* ---- proporcje obrazow i oddech miedzy blokami (poprawki po rewizji) ---- */
img { height: auto; }
._open_art { align-self: center; }
._open_art img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%; }
._plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
._voucher_art img { aspect-ratio: 4 / 3; }

._open { padding: 56px 0 46px; }
._open ._wrap { gap: 56px; align-items: center; }
._open h1 { margin: 14px 0 18px; }
._open p { margin-bottom: 26px; line-height: 1.7; }
._open_row { gap: 20px; }
._ages { margin-top: 22px; }

._paper { padding: 60px 0 54px; }
._paper h2 { margin: 52px 0 20px; padding-bottom: 12px; }
._paper h3 { margin: 34px 0 14px; }
._paper p { margin: 0 0 20px; }
._say { margin: 32px 0; padding: 8px 0 8px 26px; }
._figs, ._sheet, ._plate, ._mark_note, ._sim { margin-top: 34px; margin-bottom: 34px; }
._dots, ._roman, ._plain { margin: 24px 0 32px; }
._dots li { padding: 14px 0 14px 26px; }
._roman li { padding: 16px 0 16px 54px; }
._ask div { padding: 20px 0; }
._toc { margin-bottom: 44px; }
._ledger div { padding: 22px 20px; }

/* hero: give the portrait a real presence next to the copy */
@media (min-width: 981px) {
  ._open ._wrap { grid-template-columns: minmax(0, 1fr) 400px; }
  ._open_art img { width: 100%; }
}

@media (max-width: 980px) {
  ._open_art { width: 100%; }
  ._open_art img { width: 100%; aspect-ratio: 4 / 3; max-height: 46vh; }
}