/* receipt.css - everything that is not a chart.
   Rules: tokens only, light theme only, no em/en dashes, and the page must
   look finished BEFORE any JavaScript runs (nothing hidden by default). */

/* ====================================================================== */
/* Base                                                                   */
/* ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.rx-page {
  margin: 0;
  /* a darker desk under the paper, with a soft vignette, so the bright strip
     reads as a physical receipt lying on a surface */
  background-color: var(--paper-deep);
  background-image: radial-gradient(
    ellipse at 50% 0%,
    var(--paper-muted),
    var(--paper-deep) 70%
  );
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Very faint paper grain over the whole viewport. feTurbulence generates the
   graphic, so the element needs no background of its own. */
body.rx-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  background: var(--paper);
  filter: url(#rx-grain);
  mix-blend-mode: multiply;
}

.rx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3, p, ul, figure, figcaption { margin: 0; }
ul { padding: 0; list-style: none; }

::selection { background: var(--sulphur-soft); color: var(--ink); }

.rx-noscript {
  max-width: var(--strip-w);
  margin: var(--sp-6) auto;
  padding: var(--sp-4);
  border: var(--hairline-w) solid var(--ink);
  background: var(--paper-bright);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
}

/* ====================================================================== */
/* Header (sticky, ink on paper)                                          */
/* ====================================================================== */

.rx-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  min-height: var(--header-h);
  padding: var(--sp-2) clamp(1rem, 4vw, 2rem);
  background: var(--paper);
  border-bottom: var(--hairline-w) solid var(--hairline);
  color: var(--ink);
}

.rx-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.rx-header__mark { display: block; color: var(--ink); flex: none; }

.rx-header__kicker { font-weight: 400; }

.rx-cursor {
  display: inline-block;
  margin-left: 0.15em;
  color: var(--vermilion);
  animation: rx-blink 1.1s step-end infinite;
}

@keyframes rx-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.rx-header__meta {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  color: var(--graphite);
  text-transform: uppercase;
}

/* Slide counter ("03 / 08"), appended by render.js inside .rx-header__meta
   so it reads as the right hand end of the meta line. */
.rx-header__slide {
  display: inline-block;
  margin-left: var(--sp-3);
  color: var(--ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--ls-mono);
  white-space: nowrap;
}

/* A / B variant switch (index.html <-> paragon.html) */
.rx-variants {
  flex: none;
  display: flex;
  gap: 0.35em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.rx-variants__link {
  padding: 0.1em 0.45em;
  border: var(--hairline-w) solid var(--hairline);
  color: var(--graphite);
  text-decoration: none;
}

.rx-variants__link:hover,
.rx-variants__link:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

.rx-variants__link[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper-bright);
}

.rx-ticker {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  text-align: right;
  color: var(--graphite);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.rx-ticker__value {
  display: inline-block;
  min-width: 7.5em;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background-color: transparent;
  transition: background-color .22s ease-out, color .22s ease-out;
}

/* motion.js adds this for 300 ms on every count-up step */
.rx-ticker__value.is-ticking {
  background-color: var(--sulphur-soft);
  color: var(--vermilion-deep);
}

/* ====================================================================== */
/* The receipt strip                                                      */
/* ====================================================================== */

.rx-strip {
  /* motion.js writes --shadow-x (a px string) during the hero mouse parallax,
     so the softest shadow layer drifts with the pointer. Default 0px. */
  --shadow-x: 0px;
  position: relative;
  width: min(100%, var(--strip-w));
  margin: calc(var(--tooth-h) + var(--sp-7)) auto calc(var(--tooth-h) + var(--sp-9));
  padding: var(--sp-8) var(--strip-pad);
  background-color: var(--paper-bright);
  /* thermal banding: 1 px print lines every 3 px, at about 2% ink */
  background-image: repeating-linear-gradient(
    180deg,
    rgb(var(--ink-rgb) / 0.02) 0 1px,
    rgb(var(--ink-rgb) / 0) 1px 3px
  );
  /* crumple shadow, five layers, as heavy as variant B */
  box-shadow:
    0 1px 0 rgb(var(--ink-rgb) / 0.10),
    0 3px 8px rgb(var(--ink-rgb) / 0.10),
    0 12px 26px rgb(var(--ink-rgb) / 0.14),
    0 30px 60px rgb(var(--ink-rgb) / 0.12),
    var(--shadow-x) 60px 110px rgb(var(--ink-rgb) / 0.10);
}

/* Torn zigzag edges. Pure CSS, scales to any width, no JS.
   One tooth is --tooth-w wide and --tooth-h tall (45 degree teeth).

   Two layers: the bright teeth in front, and the same zigzag offset a few px
   down and to the right in --paper-muted behind them, so the tear has depth.
   The mask carries both shapes (two mask layers union by default), while the
   bright zigzag is painted as a background layer over a muted ground, so the
   muted layer shows exactly where the offset copy sticks out. */
.rx-strip::before,
.rx-strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--tooth-h) + 3px);
  background-color: var(--paper-muted);
  background-image:
    conic-gradient(from -45deg at bottom,
      #0000, var(--paper-bright) 1deg 89deg, #0000 90deg);
  background-size: var(--tooth-w) var(--tooth-h);
  background-position: 50% 0;
  background-repeat: repeat-x;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      50% 0 / var(--tooth-w) var(--tooth-h) repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      calc(50% + 5px) 3px / var(--tooth-w) var(--tooth-h) repeat-x;
          mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      50% 0 / var(--tooth-w) var(--tooth-h) repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      calc(50% + 5px) 3px / var(--tooth-w) var(--tooth-h) repeat-x;
  filter: drop-shadow(0 1px 0 rgb(var(--ink-rgb) / 0.10));
  pointer-events: none;
}

.rx-strip::before { top: calc(-1 * var(--tooth-h) + 1px); }

.rx-strip::after {
  bottom: calc(-1 * var(--tooth-h) + 1px);
  transform: scaleY(-1);
}

@media (max-width: 600px) {
  .rx-strip {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: var(--sp-7);
  }
}

/* ====================================================================== */
/* Sections, separators, print wrapper                                    */
/* ====================================================================== */

.rx-section {
  position: relative;
  padding: var(--sp-8) 0;
  contain: layout;
}

.rx-section--hero { padding-top: var(--sp-4); }

/* dashed hairline + perforation dots between sections */
.rx-section + .rx-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--strip-pad));
  right: calc(-1 * var(--strip-pad));
  height: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--hairline) 0 7px,
    transparent 7px 14px
  );
}

.rx-section + .rx-section::after {
  content: "";
  position: absolute;
  top: 7px;
  left: calc(-1 * var(--strip-pad));
  right: calc(-1 * var(--strip-pad));
  height: 4px;
  background-image: radial-gradient(circle at 2px 2px, var(--hairline) 1.1px, transparent 1.2px);
  background-size: 14px 4px;
  opacity: 0.85;
}

/* motion.js animates this clip-path; default is fully visible */
.rx-print { clip-path: inset(0 0 0 0); }

/* The slide grid. Below the slide breakpoint these three wrappers are plain
   blocks, so the receipt flows exactly as it did before slide mode. */
.rx-slide { display: block; }
.rx-slide__copy,
.rx-slide__data { min-width: 0; }

/* ====================================================================== */
/* Typography inside the receipt                                          */
/* ====================================================================== */

/* ---- hero receipt header block: RACHUNEK + the meta rows -------------- */

.rx-invoice {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 8vw, 6.5rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 0.95;
  color: var(--ink);
  border-bottom: 1px dotted var(--ink);
  padding-bottom: 0.2em;
  margin-bottom: 0.6rem;
}

.rx-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  row-gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* the row is a pass through, so the key and the value become grid items and
   every key column lines up across all rows */
.rx-meta__row { display: contents; }

.rx-meta__k { color: var(--graphite); }
.rx-meta__v { color: var(--ink); }

.rx-stars {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.22em;
  color: var(--graphite);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.rx-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-head);
  font-size: var(--fs-title-sec);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
  margin-bottom: var(--sp-5);
}

.rx-section--hero .rx-title { font-size: var(--fs-title); line-height: 0.88; }

.rx-title em {
  font-style: normal;
  color: var(--vermilion);
}

.rx-lede {
  font-size: var(--fs-lede);
  line-height: 1.42;
  max-width: 38em;
  color: var(--ink);
  margin-bottom: var(--sp-6);
  text-wrap: pretty;
}

/* ---- receipt lines with dotted leaders -------------------------------- */

.rx-lines {
  margin: 0 0 var(--sp-6);
  border-top: var(--hairline-w) solid var(--hairline);
}

.rx-line {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 0.55rem 0;
  border-bottom: var(--hairline-w) solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.rx-line__label { flex: 0 1 auto; color: var(--graphite); }

.rx-line__note {
  flex: none;
  margin-left: 0.6em;
  color: var(--faint);
  text-transform: none;
  font-size: var(--fs-mono-sm);
}

.rx-leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 0;
  margin: 0 0.5em 0.26em;
  border-bottom: 1px dotted var(--hairline);
  align-self: flex-end;
}

.rx-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  color: var(--ink);
}

.rx-line .rx-num { flex: none; }

.rx-line--big {
  padding: 0.9rem 0;
  border-bottom-width: 2px;
  border-bottom-color: var(--ink);
  font-size: 1.05rem;
}

.rx-line--big .rx-line__label { color: var(--ink); }

.rx-line--big .rx-num { font-size: 1.6rem; letter-spacing: 0.01em; }

/* ---- highlighter ------------------------------------------------------ */

.rx-highlight {
  font-size: var(--fs-lede);
  line-height: 1.5;
  margin-bottom: var(--sp-6);
}

.rx-hl {
  position: relative;
  z-index: 0;
  display: inline;
  transform-origin: left center;
  padding: 0.05em 0.15em;
}

.rx-hl::before {
  content: "";
  position: absolute;
  inset: 0.05em -0.1em 0.02em -0.1em;
  z-index: -1;
  background: var(--sulphur-soft);
  transform: scaleX(var(--hl, 1));
  transform-origin: left center;
}

/* ---- big number ------------------------------------------------------- */

.rx-big { margin: 0 0 var(--sp-6); }

.rx-big .rx-num {
  display: block;
  font-size: var(--fs-big);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.rx-big__label {
  display: block;
  margin-top: var(--sp-2);
  max-width: 26em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: var(--lh-mono);
  color: var(--graphite);
  text-transform: uppercase;
}

/* ---- line item (the bill row that opens every section) ---------------- */

.rx-lineitem {
  display: flex;
  align-items: baseline;
  padding-bottom: 0.5rem;
  margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.rx-lineitem__no {
  flex: none;
  margin-right: 0.9em;
  padding: 0.1em 0.4em;
  background: var(--ink);
  color: var(--paper-bright);
}

.rx-lineitem__name { flex: 0 1 auto; }

.rx-lineitem__usd {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.rx-lineitem__note {
  flex: none;
  margin-left: 0.7em;
  color: var(--faint);
  font-size: var(--fs-mono-sm);
  text-transform: none;
}

/* ---- charts wrapper --------------------------------------------------- */

.rx-charts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  margin-bottom: var(--sp-6);
}

/* ---- callouts --------------------------------------------------------- */

.rx-callouts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.rx-callout {
  padding: 0.35rem 0 0.35rem var(--sp-4);
  border-left: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: var(--lh-mono);
  color: var(--ink);
}

/* ---- data gap stamp --------------------------------------------------- */

.rx-gap {
  display: inline-block;
  margin: 0 0 var(--sp-6);
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--receipt-red);
  outline: 1px solid var(--receipt-red);
  outline-offset: 2px;
  color: var(--receipt-red);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  transform: rotate(-6deg);
  transform-origin: left center;
  mix-blend-mode: multiply;
  max-width: 30em;
}

/* The closing NIEZAPLACONE stamp. render.js drops it in as a plain block
   sibling right after .rx-total, so a right aligned block with a negative top
   margin lands it over the bottom right corner of the total. No float, no
   absolute positioning, so it stays correct before JS runs. */
.rx-gap--unpaid {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: -1.2rem 0 0 auto;
  padding: 0.6rem 1.4rem;
  border-width: 3px;
  border-color: var(--receipt-red);
  outline-color: var(--receipt-red);
  color: var(--receipt-red);
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  transform: rotate(-8deg);
  transform-origin: right center;
}

/* ---- halftone stamp figure -------------------------------------------- */

.rx-stamp {
  position: relative;
  width: 100%;
  margin: var(--sp-6) 0;
  border-top: var(--hairline-w) solid var(--ink);
  border-bottom: var(--hairline-w) solid var(--ink);
  background: var(--paper-bright);
}

.rx-stamp canvas {
  width: 100%;
  aspect-ratio: 16 / 6;
  display: block;
  image-rendering: pixelated;
}

@media (max-width: 600px) {
  .rx-stamp canvas { aspect-ratio: 16 / 5; }
}

.rx-stamp__label {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  padding: 0.2rem 0.45rem;
  border: 2px solid var(--ink);
  background: var(--paper-bright);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ---- footnote --------------------------------------------------------- */

.rx-footnote {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  line-height: 1.55;
  color: var(--faint);
  max-width: 46em;
}

/* ====================================================================== */
/* Closing section                                                        */
/* ====================================================================== */

.rx-section--closing {
  position: relative;
  isolation: isolate;
  padding-bottom: var(--sp-7);
}

.rx-band {
  position: absolute;
  left: calc(-1 * var(--strip-pad));
  right: calc(-1 * var(--strip-pad));
  bottom: 0;
  height: 62%;
  z-index: -1;
  background: var(--sulphur-soft);
  transform: scaleY(1);
  transform-origin: bottom center;
  pointer-events: none;
}

.rx-section--closing .rx-lines { border-top-color: var(--ink); }
.rx-section--closing .rx-line { border-bottom-color: var(--hairline); }

.rx-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4em;
  padding: 0.8rem 1rem;
  border: 3px double var(--ink);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
}

.rx-total__label {
  flex: none;
  font-size: 1rem;
  color: var(--ink);
}

.rx-total .rx-num {
  flex: 1 1 auto;
  text-align: right;
  font-size: var(--fs-big);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.rx-thanks {
  margin: var(--sp-7) 0 var(--sp-5);
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 2.4vw, 1.35rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}

.rx-sources {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  color: var(--faint);
  text-align: center;
}

/* decorative fiscal footer under the barcode */
.rx-fiscal {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--faint);
  text-align: center;
}

/* ====================================================================== */
/* Print head (fixed thermal print line)                                  */
/* ====================================================================== */

.rx-printhead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(100%, var(--strip-w));
  height: 1px;
  background: var(--ink);
  box-shadow: 0 0 12px var(--sulphur);
  opacity: 0;
  pointer-events: none;
  z-index: 25;
}

/* ====================================================================== */
/* Right edge dot nav (one square per slide)                              */
/* ====================================================================== */

/* Hidden by default: it only makes sense once the page is a deck, so it is
   switched on inside the slide media query below. */
.rx-dots {
  display: none;
  position: fixed;
  top: 50%;
  right: clamp(0.5rem, 1.1vw, 1rem);
  z-index: 28;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-50%);
}

.rx-dots__dot {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--ink);
  opacity: 0.3;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease-out,
              opacity var(--dur-fast) ease-out;
}

.rx-dots__dot:hover,
.rx-dots__dot:focus-visible { opacity: 0.7; }

.rx-dots__dot.is-active {
  background: var(--vermilion);
  opacity: 1;
}

/* ====================================================================== */
/* Slide mode                                                             */
/* One section = one slide, snapped, never taller than --slide-h.         */
/* Below 900px wide or 620px tall nothing here applies and the receipt     */
/* flows as one narrow column exactly as before.                          */
/* ====================================================================== */

/* proximity is the base so a short or narrow viewport never traps a swipe;
   the deck upgrades it to mandatory. */
html {
  scroll-padding-top: var(--header-h);
  scroll-snap-type: y proximity;
}

@media (min-width: 900px) and (min-height: 620px) {

  html { scroll-snap-type: y mandatory; }

  /* ---- header: one exact row, never wraps --------------------------- */

  .rx-header {
    height: var(--header-h);
    min-height: 0;
    flex-wrap: nowrap;
    padding-block: 0;
    overflow: hidden;
  }

  .rx-header__meta {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    overflow: hidden;
    white-space: nowrap;
  }

  .rx-header__slide { flex: none; margin-left: 0; }

  /* ---- the strip starts right under the header ----------------------- */

  /* Only the very top teeth sit above the first slide; the strip carries no
     padding of its own any more, every slide pads itself. */
  .rx-strip {
    margin-top: var(--tooth-h);
    margin-bottom: calc(var(--tooth-h) + var(--sp-7));
    padding-block: 0;
  }

  /* ---- sections become slides ---------------------------------------- */

  .rx-section {
    min-height: var(--slide-h);
    display: grid;
    align-content: center;
    padding-block: var(--slide-pad);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* The hero loses exactly what the top teeth take, so it still fits, and
     its snap area grows back over them: the deck rests at scroll 0 with the
     torn top edge visible right under the header. */
  .rx-section--hero {
    min-height: calc(var(--slide-h) - var(--tooth-h));
    padding-top: var(--slide-pad);
    scroll-margin-top: var(--tooth-h);
  }

  .rx-section--closing { padding-bottom: var(--slide-pad); }

  /* ---- two column slide ---------------------------------------------- */

  .rx-slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--slide-gap);
    align-items: center;
    max-height: calc(var(--slide-h) - 2 * var(--slide-pad));
  }

  .rx-slide--hero {
    max-height: calc(var(--slide-h) - var(--tooth-h) - 2 * var(--slide-pad));
  }

  /* Safety valve only: the content is sized to fit without it. The cap is
     written out rather than as 100%, because a percentage max-height on a
     grid item resolves against an auto sized row and would never clamp. */
  .rx-slide__data {
    max-height: calc(var(--slide-h) - 2 * var(--slide-pad));
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* ---- compact type -------------------------------------------------- */

  /* the headline is the hero of the slide */
  .rx-title {
    font-size: var(--fs-title-slide);
    line-height: var(--lh-title-slide);
    margin-bottom: var(--gap-v);
  }

  .rx-section--hero .rx-title {
    font-size: var(--fs-title-hero);
    line-height: 0.9;
    margin-bottom: var(--gap-v);
  }

  .rx-lede {
    font-size: var(--fs-lede-slide);
    line-height: 1.35;
    max-width: 34em;
    margin-bottom: var(--gap-v-sm);
  }

  .rx-stars { margin-bottom: var(--gap-v-sm); }

  /* The hero copy column now carries the receipt header block, so the block
     is measured against the slide: at 1366x768 the slide gives about 660px
     inside the padding, and the column spends about 68px on RACHUNEK plus
     its dotted rule, about 97px on the five meta rows, about 27px on the
     stars line, about 112px on a two line headline and about 57px on a two
     line lede. That is roughly 360px, comfortably inside the slide. */
  .rx-invoice {
    font-size: clamp(2.4rem, 6.5svh, 4.6rem);
    margin-bottom: var(--gap-v-sm);
  }

  .rx-meta { margin-bottom: var(--gap-v); }

  .rx-highlight {
    font-size: var(--fs-lede-slide);
    line-height: 1.45;
    margin-bottom: 0;
  }

  /* the number steps back and sits on one line with its label to the right */
  .rx-big {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: var(--gap-v-sm);
  }

  .rx-big .rx-num {
    flex: none;
    font-size: var(--fs-big-slide);
    line-height: 0.92;
  }

  .rx-big__label {
    margin-top: 0;
    max-width: 18em;
    font-size: var(--fs-mono-sm);
  }

  .rx-lineitem {
    padding-bottom: 0.35rem;
    margin-bottom: var(--gap-v-sm);
  }

  .rx-lines { margin-bottom: var(--gap-v); }

  .rx-line { padding: 0.4rem 0; }

  .rx-line--big { padding: 0.65rem 0; }

  .rx-callouts { gap: var(--gap-v-sm); margin-bottom: var(--gap-v-sm); }

  .rx-callout {
    padding: 0.15rem 0 0.15rem var(--sp-3);
    font-size: 0.65rem;
    line-height: 1.3;
  }

  .rx-gap {
    margin-bottom: var(--gap-v-sm);
    padding: 0.3rem 0.6rem;
    font-size: 0.65rem;
    line-height: 1.35;
    max-width: 26em;
    transform: rotate(-4deg);
  }

  .rx-charts { gap: var(--chart-gap); margin-bottom: 0; }

  .rx-footnote {
    font-size: var(--fs-foot-slide);
    line-height: 1.35;
    max-width: none;
  }

  /* ---- stamp: a wide band, height driven by the viewport -------------- */

  /* whatever sits above the stamp already carries a bottom margin */
  .rx-stamp { margin: 0 0 var(--gap-v-sm); }

  .rx-stamp canvas {
    width: 100%;
    height: var(--stamp-h);
    aspect-ratio: auto;
  }

  .rx-stamp__label {
    left: var(--sp-2);
    bottom: var(--sp-2);
    border-width: 1px;
  }

  /* ---- closing ------------------------------------------------------- */

  .rx-section--closing .rx-line { padding: 0.3rem 0; }

  .rx-total { padding: var(--gap-v) 1rem; }

  .rx-total .rx-num {
    font-size: var(--fs-big-slide);
    line-height: 0.95;
  }

  /* the compact .rx-gap rule above would otherwise flatten this one, so the
     closing stamp restates its own size and its steeper angle */
  .rx-gap--unpaid {
    margin-top: -1rem;
    padding: 0.4rem 0.9rem;
    font-size: 1.2rem;
    letter-spacing: 0.18em;
    max-width: none;
    transform: rotate(-8deg);
  }

  .rx-thanks {
    margin: var(--gap-v) 0;
    font-size: clamp(0.9rem, 1.5vw, 1.35rem);
  }

  .rx-sources { margin-top: var(--gap-v); }

  /* ---- dot nav ------------------------------------------------------- */

  .rx-dots { display: flex; }
}

/* ====================================================================== */
/* Reduced motion                                                         */
/* ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .rx-cursor { animation: none; opacity: 1; }
  * { scroll-behavior: auto; }
}