/* LUNEVII skin over the Vercel page (R4): the page's own stylesheet keeps the layout; this file brings the Koncept no.2
   look (book serif, tracked capitals, a pen-script line, square ink-navy controls, ink entering from the edges).
   Colours are swapped in place by narzedzia/r4-skora.py. */

/* EB Garamond: the Koncept's book serif (OFL); Ephesis: its pen script, with Polish letters (OFL) */
@font-face { font-family: "EB Garamond"; src: url(../fonts/ebgaramond-var.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }
/* it24 (RECENZJA-R5-11 drobne): the italic (49 KB, first used below the first screen) is added by site.js once the hero photo
   has loaded, so it no longer shares the line with it; without scripts the <noscript> in index.html declares it */
@font-face { font-family: Ephesis; src: url(../fonts/ephesis-pl.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Switzer; src: url(../fonts/switzer-var.v1.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Boska; src: url(../fonts/boska-var.v1.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: Boska; src: url(../fonts/boska-var-i.v1.woff2) format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: Zodiak; src: url(../fonts/zodiak-var.v1.woff2) format('woff2'); font-weight: 100 900; font-display: swap; size-adjust: 90%; }
@font-face { font-family: Zodiak; src: url(../fonts/zodiak-var-i.v1.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; size-adjust: 90%; }

:root { --script: Ephesis, "EB Garamond", cursive; --caps: .18em; --navy: #131b30; }
/* ?exp=kroj / ?exp=boska: the earlier display faces; ?exp=sans: Switzer for running text as on the draft */
html.exp-kroj { --serif: Zodiak, Georgia, "Times New Roman", serif; }
html.exp-boska { --serif: Boska, Georgia, "Times New Roman", serif; }

/* the paper from Koncept no.2/Płótno */
body { background: var(--cream) url(../img/papier.webp) repeat; background-size: 512px; }

/* running text in the book serif. font-size-adjust keeps every size the draft set for its sans readable: the serif is
   scaled to the same x-height. Rules using the font shorthand (headings, set serif) reset it and keep their own size. */
html:not(.exp-sans) body { font-family: var(--serif); font-size-adjust: .5; }
.d1, .d2, .d3 { font-weight: 400; letter-spacing: -.012em; }

/* ---------- header: the logo centred over a hairline with the crescent, as in Koncept Mobile ---------- */
.wordmark { letter-spacing: 0; flex-direction: column; justify-content: center; gap: 4px; }
.wordmark__img { display: block; height: 19px; width: auto; }
.wordmark::after { content: ""; display: block; width: 100%; height: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M6.6 1.2a4 4 0 1 0 2.2 6.6A3.3 3.3 0 1 1 6.6 1.2z' fill='%231d2436'/%3E%3C/svg%3E") center / 9px 9px no-repeat,
    linear-gradient(90deg, #1d2436 0 38%, transparent 38% 62%, #1d2436 62%) center / 100% 1px no-repeat; }
@media (max-width: 900px) {
  .top .wrap { grid-template-columns: 1fr auto 1fr; }
  .wordmark { grid-column: 2; }
  .top__r { grid-column: 3; }
}
@media (min-width: 900px) { .wordmark__img { height: 22px; } }

/* ---------- hero ---------- */
/* the photo sinks into an ink horizon that bleeds off both sides */
.pdp__wash.r4-horyzont { left: -16%; right: auto; top: -46px; width: 132%; aspect-ratio: 2.9979; z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%); mask-image: linear-gradient(180deg, transparent 0, #000 34%); }
@media (min-width: 901px) { .pdp__wash.r4-horyzont { display: none; } }
/* the crescent in its own ink, then a line in capitals, the name and the script line, centred as in Koncept Hero */
.r4-sierp { position: relative; width: 148px; aspect-ratio: 1; margin: 34px auto -6px; pointer-events: none; }
.r4-brow { margin: 0 0 14px; text-align: center; font: 500 14px/1.4 var(--serif); letter-spacing: var(--caps);
  text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) {
  .pdp .d1 { text-align: center; font-size: clamp(46px, 13vw, 58px); line-height: .95; }
  .pdp .tag { text-align: center; font-size: 21px; margin-top: 10px; }
  .pdp .hello { text-align: center; margin: 14px auto 0; max-width: 30ch; color: var(--text-2); }
}
/* the pen-script line: one per key moment, never for running text */
.tag em { display: block; margin-top: 2px; font: 400 2.05em/1.05 var(--script); color: var(--accent); }

/* ---------- buy box: square ink-navy controls with tracked capitals ---------- */
.pricerow strong { font-size: 44px; }
.opt__h { font: 500 14px/1.4 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; color: var(--text-2); }
.onesize { border-radius: 2px; }
.btn { border-radius: 2px; background: var(--navy); font: 500 15px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; }
.btn--lg { font-size: 16px; justify-content: center; gap: 14px; }
.btn i { width: auto; height: auto; border-radius: 0; background: none; }
.btn i svg { width: 22px; }
.btn:active { transform: scale(.98); }
/* the toggle reads as two tabs on a hairline, the chosen one underlined in ink */
.seg { border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 0; gap: 0; }
.seg button, .seg span { border-radius: 0; font: 500 14px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.seg button[aria-selected="true"], .seg input:checked + span { background: none; color: var(--text); box-shadow: inset 0 -2px 0 var(--navy); }
.gift__occ button, .eras button { border-radius: 2px; }
.trust { font: 500 13.5px/1.35 var(--serif); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 900px) { .trust { font-size: 14px; } }
.acc summary { font-weight: 500; }

/* the sticky bar: capitals take more room, the second line gives way first */
.bar .btn { padding: 0 16px; gap: 10px; letter-spacing: .12em; }
.bar__info em { overflow: hidden; text-overflow: ellipsis; }

/* ---------- footer: the crescent over the name, as in the logo ---------- */
.foot__mark { line-height: 1; }
.foot__mark img { display: block; width: min(100%, 560px); height: auto; }
.foot__mark img.foot__znak { width: 76px; margin: 0 0 18px; }

/* the shop's pouch photo where the draft waited for a generated one */
.box__pouch--ph { margin: 0 0 24px; border-radius: 2px; overflow: hidden; aspect-ratio: 4 / 3; }
.box__pouch--ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the questions follow the night section directly now (no reviews yet): its brushed edge sits on them */
.faq { position: relative; }

/* Koncept corners: square photos, cards, sheets and chips (the draft's pills and arches read as a boho template) */
.skip, .thumbs, .thumbs button, .sizes span, .ints span, .qty, .giftrow textarea, .eras, .eras button, .scta, .seg--int,
.seg--int span, .box__card, .strip .ph, .strip figure .ph, .strip figure:first-child .ph, .pcard .ph, .pcard .badge,
.btn--ghost, .toast, .sheet, .sizeopt, .dr-ok, .dr-item img, .dr-item .q, .dr-saved img, .dr-saved button, .dr-up button img,
.lb__track img, .lb__track video, .lb__hint, .gdots, .beats .beat, .beats .beat:nth-child(n), .beat__nav button, .bar,
.bar__info, .drawer, #drClose, .faq__art, .slot, .gift, .gift__occ button, .gift__note textarea, .gift__lines button,
.lupa__go, .one__ph, .dl__ui { border-radius: 2px !important; }

/* the collection clip: hands, cup and bracelet, without the face above them */
.one__ph video, .one__ph img { object-position: 50% 100%; }

/* ---------- section numbers, „05 —— CENA” (Koncept NU04, WA02) ---------- */
.r4-nr { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font: 500 14px/1 var(--serif);
  letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent); }
.r4-nr span { font-feature-settings: "lnum" 1; letter-spacing: .08em; }
.r4-nr i { width: 44px; height: 1px; background: currentColor; opacity: .55; }
.price__sticky .r4-nr { justify-content: center; position: relative; z-index: 2; margin-bottom: 4px; }
.real .r4-nr, .foot .r4-nr { color: #c9b98f; }

/* ---------- the price as a numbers orbit: the digits on a dotted ring light up as they are added ---------- */
.r4-orbita { position: absolute; left: 50%; top: 50%; width: min(76vw, 420px); aspect-ratio: 1; transform: translate(-50%, -50%);
  overflow: visible; pointer-events: none; fill: none; stroke: var(--text); }
.r4-orbita .o1 { stroke-width: 1.1; stroke-dasharray: 0 4.4; stroke-linecap: round; opacity: .55; }
.r4-orbita .o2 { stroke-width: .5; opacity: .3; }
.r4-orbita .o3 { stroke-width: .9; stroke-dasharray: 0 3.2; stroke-linecap: round; opacity: .35; }
.r4-orbita .pl { fill: var(--text); stroke: none; opacity: .7; }
.r4-orbita .pl--o { fill: none; stroke: var(--text); stroke-width: .7; }
.r4-orbita .st { fill: var(--text); stroke: none; opacity: .55; }
.r4-orbita .nb { display: none; }
.r4-orbita text { fill: var(--text); stroke: none; font: 400 19px var(--serif); text-anchor: middle; dominant-baseline: central;
  opacity: .28; transition: opacity .6s ease; }
.r4-orbita .mk { fill: var(--accent); stroke: none; transition: transform 1.1s cubic-bezier(.77, 0, .175, 1); }
.price__stage:has(> span:nth-of-type(1).on) .r4-orbita :is(.n7, .n5) text,
.price__stage:has(> span:nth-of-type(2).on) .r4-orbita :is(.n1, .n2) text,
.price__stage:has(> span:nth-of-type(3).on) .r4-orbita .n3 text,
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .n3 text { opacity: 1; }
.r4-orbita .mk { transform: rotate(-45deg); }
.price__stage:has(> span:nth-of-type(2).on) .r4-orbita .mk { transform: rotate(180deg); }
.price__stage:has(> span:nth-of-type(3).on) .r4-orbita .mk,
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .mk { transform: rotate(270deg); }
/* the dry-brush swash under the caption is foreign to the Koncept */
.price__sticky .pw2 { display: none; }
@media (prefers-reduced-motion: reduce) { .r4-orbita .mk, .r4-orbita text { transition: none; } }
/* the ink pools at the ring's lower right, as the cloud in NU04, not as a stain behind the digits */
.price__sticky .pw:not(.pw2) { left: 64%; top: 62%; }
/* „zł” rides at the top of the figure, as a price tag, so the cloud pooling below never swallows it */
.price__stage small { align-self: center; position: relative; top: -1.15em; margin: 0 0 0 .12em; }
@media (max-width: 900px) {
  .price__stage { height: 72vw; }
  .price__sticky .pw:not(.pw2) { width: 76vw; }
}
.faq .r4-nr { margin-top: 40px; }

/* ---------- the stones as Koncept Edukacja (ED01): the stone on a navy cloud bleeding off the edge, name in capitals ---------- */
@media (max-width: 900px) {
  .stone { background: transparent; }
  .stone__art { aspect-ratio: 1 / .9; }
  .stones .ink.edge { display: none; }
  /* no arch: the cloud is free and runs off the left edge, the next stone's off the right, and so on */
  .stone__plate .arch { background: none; -webkit-mask: none; mask: none; overflow: visible; top: 0; bottom: auto; height: 100%;
    max-width: none; transform: none; left: -16%; }
  .stone:nth-of-type(even) .stone__plate .arch { left: auto; right: -16%; }
  .stone__plate .gr { -webkit-mask-image: none; mask-image: none; }
  .stone__art figcaption { font: 500 14px/1.3 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
  /* the painted numeral stays, as the ghost numeral behind the name in ED01 */
  .stone__text { position: relative; }
  .stone .num { position: absolute; right: 0; top: 14px; --nh: 132px; opacity: .13; margin: 0; }
  .stone__name { font-size: clamp(38px, 10.6vw, 46px); line-height: 1.02; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
}
.r4-sub { margin: 0 0 18px; font: 500 14px/1.4 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent); }
.stone__for b { font: 500 14px/1.4 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.facts dt { letter-spacing: 0; }
@media (min-width: 901px) {
  /* beside the photo the name is set left, so the crescent and the line in capitals follow it */
  .r4-sierp { margin-left: -10px; }
  .r4-brow { text-align: left; }
  .stone__name { font-size: clamp(44px, 4.4vw, 72px); line-height: 1.02; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
}

/* ---------- seams: the next section rises as the edge of an ink cloud (AT03), also before the ink arrives ---------- */
.edge::before, .edge.lite::before, .no-gl .edge::before {
  -webkit-mask-image: url(../img/r4/e_band_mask.webp); mask-image: url(../img/r4/e_band_mask.webp); }

/* ---------- „Z bliska” as the Koncept's dark sections: capitals in cream, a few stars, gold hairlines ---------- */
.real { background-color: var(--dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23efe6d2'%3E%3Ccircle cx='23' cy='41' r='.9' opacity='.5'/%3E%3Ccircle cx='131' cy='17' r='.6' opacity='.4'/%3E%3Ccircle cx='219' cy='88' r='1.1' opacity='.45'/%3E%3Ccircle cx='76' cy='152' r='.6' opacity='.35'/%3E%3Ccircle cx='181' cy='203' r='.8' opacity='.4'/%3E%3Ccircle cx='38' cy='231' r='.5' opacity='.3'/%3E%3Ccircle cx='247' cy='247' r='.6' opacity='.35'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(var(--dark) 0, rgba(19, 27, 48, 0) 140px),
    radial-gradient(120% 70% at 85% 0%, rgba(47, 74, 120, .32), transparent 60%);
  background-size: 260px 260px, auto, auto; }
/* (the glow fades in under the torn edge, which is flat night: R4-12) */
.real h2 { text-transform: uppercase; letter-spacing: .12em; line-height: 1.05; }
@media (max-width: 900px) { .real h2 { font-size: clamp(36px, 10vw, 44px); } }
.real__head p { color: rgba(238, 232, 220, .82); }
.real .strip .ph { outline: 1px solid rgba(201, 185, 143, .38); outline-offset: 5px; }
.real .strip figure { padding: 6px; }
.real .strip figcaption { font: 500 14px/1.3 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; color: #c9b98f; }
.real .sdots i { width: 16px; height: 2px; border-radius: 0; }
.real .sdots i.on { width: 30px; background: #c9b98f; }
.rspec { color: rgba(238, 232, 220, .8); }
@media (max-width: 900px) { .faq .r4-nr { margin-left: var(--pad); margin-right: var(--pad); } }

/* ---------- „Trzy warstwy jednej tarczy” as the logo's rings: one bead per ring, the crescent in the middle ---------- */
.r4-tarcza { display: block; position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 30px auto 6px; }
.r4-tarcza svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--text); overflow: visible; }
.r4-tarcza .t1 { stroke-width: 1.1; stroke-dasharray: 0 4.6; stroke-linecap: round; opacity: .55; }
.r4-tarcza .t2 { stroke-width: .9; stroke-dasharray: 0 3.4; stroke-linecap: round; opacity: .45; }
.r4-tarcza .t3 { stroke-width: .6; opacity: .4; }
.r4-tarcza .tp { fill: var(--text); stroke: none; opacity: .65; }
.r4-tarcza .tp--o { fill: none; stroke: var(--text); stroke-width: .7; }
.r4-tarcza__znak { position: absolute; left: 50%; top: 50%; width: 30%; height: auto; transform: translate(-50%, -54%); mix-blend-mode: multiply; }
/* a zero-width anchor, not a transform: a transform would isolate the stones' multiply and show their white matte */
.r4-tarcza__k { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 0; margin-top: -22px; }
.r4-tarcza__k img { width: 44px; height: 44px; max-width: none; flex: none; border-radius: 50%; object-fit: cover; mix-blend-mode: multiply; }
.r4-tarcza__k b { font: 500 14px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--text); }
/* obsidian on the outer ring at -60°, tiger's eye on the middle one at 165°, haematite on the inner one at 60° */
.r4-tarcza .k1 { left: 71.7%; top: 12.5%; }
.r4-tarcza .k2 { left: 19.4%; top: 58.2%; }
.r4-tarcza .k3 { left: 60%; top: 67.3%; }
/* on the phone the rings sit between the title and the list (desktop: R4-12) */
@media (max-width: 900px) {
  /* the list keeps the words; the beads are on the rings now */
  .trio__grid { gap: 0; margin-top: 18px; }
  .trio__grid .pic, .trio__grid article::before { display: none; }
  .trio__grid article, .trio__grid article:nth-of-type(n) { display: block; padding: 16px 0; border-top: 1px solid var(--line-2); }
  .trio__grid article:last-of-type { border-bottom: 1px solid var(--line-2); }
  .trio__grid small { font: 500 14px/1.4 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
}

/* ---------- history (Storytelling): capitals and hairlines instead of grey pills, the feather on the last sheet ---------- */
.swipehint b { font: 500 14px/1.3 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) {
  .beat__nav span { font: 500 14px/1 var(--serif); letter-spacing: .16em; font-feature-settings: "lnum" 1; color: var(--muted); }
  .beat__nav button { background: none; padding: 0 0 2px; border-radius: 0; border-bottom: 1px solid var(--text);
    font: 500 14px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
  .beat__nav button i { width: auto; height: auto; background: none; color: var(--text); border-radius: 0; }
  .r4-pioro { display: block; width: 74%; height: auto; margin: 0 0 6px auto; }
}
@media (min-width: 901px) { .r4-pioro { display: none; } }
.next small { font: 500 14px/1.4 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; }
.next i { border: 0; border-radius: 0; width: 34px; }

/* the collection clip framed on hands, cup and bracelet: the face above stays out of the frame */
@media (max-width: 900px) { .one__ph { aspect-ratio: 5 / 4; } }

/* ritual steps numbered in light roman figures, „01” as in the Koncept, not italic */
.rsteps > li::before { content: counter(r, decimal-leading-zero); font: 400 34px/1 var(--serif); font-style: normal;
  font-feature-settings: "lnum" 1; letter-spacing: .02em; top: 24px; opacity: 1; }

/* ---------- R4-8: the reviewer's fixes ---------- */
/* the sweep under the button is a lighter navy, not gold (gold over navy read as olive), and only where a pointer hovers:
   a tap leaves :hover stuck on touch screens */
.btn::before { background: var(--accent); opacity: .7; }
@media (hover: none) { .btn:hover:not(:focus-visible)::before { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.btn.done, .btn--ghost.done { background: var(--accent); color: #f4ede2; border-color: var(--accent); }
/* the sticky bar on a narrow phone: the name and the price, the size note steps aside, no ellipsis */
.bar__info em span { white-space: nowrap; }
@media (max-width: 400px) {
  .bar__info em span { display: none; }
  .bar .btn { padding: 0 12px 0 14px; gap: 6px; font-size: 14px; letter-spacing: .1em; }
}
/* nothing set below 14 px: the announcement bar and the loupe's note in the book serif's capitals */
.ann { font: 500 14px/1.4 var(--serif); letter-spacing: .14em; }
@media (max-width: 900px) { .ann { font-size: 14px; letter-spacing: .1em; } }
.lupa figcaption b span { font: 500 14px/1.2 var(--serif); letter-spacing: .14em; }
.foot__tag { font-size: clamp(14px, 1.05vw, 15px); }
/* the loupe's prompt as a line in capitals with an arrow, not a pill */
.lupa__go { min-height: 44px; padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--text); border-radius: 0 !important; background: none;
  font: 500 14px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.lupa__go svg { color: var(--accent); }
.lupa__go:active { background: none; opacity: .7; }
/* share and save as bare ink marks on the photo, no cream discs */
.mact button { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--text); }
.mact button[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--accent); }
/* gallery dots as short dashes on the photo */
@media (max-width: 900px) {
  .gdots { padding: 8px 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0 !important; gap: 6px; }
  .gdots i { width: 16px; height: 2px; border-radius: 0; background: rgba(29, 36, 54, .3); }
  .gdots i.on { width: 30px; background: var(--text); }
}
/* gold only on the night: on cream the ritual figures, trust icons, the breath ring and the loupe dot are in ink */
.rsteps > li::before, .steps li::before { color: var(--accent); }
.trust svg, .measure-tip summary svg, .hint svg { color: var(--accent); }
.breath i{ border-color: var(--accent); }@media (hover:hover) and (pointer:fine){.breath:hover i + i{ border-color: var(--accent); }}
.breath i + i { border-color: var(--line-2); }
.breath.inhale i:first-of-type { background: rgba(47, 74, 120, .1); }
/* RECENZJA-R5-5 drobne: the ink plate became the button's first child (G66), so the base `i:first-child` rules stopped
   matching: the inner ring sat at .5 (52 px, „oddychaj ze mną” crossed it) and no longer breathed. first-of-type restores both */
.breath i:first-of-type { transform: scale(.72); }
.breath.inhale i:first-of-type { transform: scale(1); }
.lupa__h::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(47, 74, 120, .18); }
.ann span + span::before { color: var(--accent); }
.nav a::after, .storyprog b, .onesize b::after { background: var(--accent); }
/* the stone's roman numeral sits above its name at the right, small, so it never runs into the heading or the text */
@media (max-width: 900px) {
  .stone .num { position: relative; right: auto; top: auto; --nh: 54px; opacity: .55; margin: 0 0 4px auto; }
}
/* the price orbit (R4-8): numerals read from the ring (larger, half-lit when waiting), the inner ring opens wide enough
   for the equation, and the crescent parks beside the digits it counts, never on the sum: between 7 and 5, between
   1 and 2, then just before the 3 */
.r4-orbita text { font-size: 21px; opacity: .55; }
.price__stage:has(> span:nth-of-type(3).on) .r4-orbita .mk,
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .mk { transform: rotate(250deg); }
@media (max-width: 900px) {
  .price__stage { height: 96vw; }
  .r4-orbita { width: min(94vw, 440px); }
}
/* ink bleeding in from the edge behind the art: the ritual from the left, the box from the right */
.r4-bok { top: 6%; height: 88%; width: auto; aspect-ratio: .6667; }
.r4-bok--l { left: -5%; }
.r4-bok--p { right: -5%; }
/* the collection clip sinks into an ink horizon, as the hero photo does; the text waits below the drips */
.r4-ogon { display: none; }
@media (max-width: 900px) {
  .one { grid-template-columns: minmax(0, 1fr); }
  .r4-ogon.deco { display: block; position: relative; width: 132vw; aspect-ratio: 2.9979; margin: -76px 0 -92px calc(-16vw - var(--pad, 18px)); }
}

/* ---------- R4-9 ---------- */
/* desktop stones as ED01: no arch and no per-stone tint; the cloud runs off the left edge of the screen behind the stone.
   The sticky panel is its own stacking context, so it keeps the section's background (the same per-stone colour, so no
   seam) for the stones to multiply onto; the arch's reveal layer stays, only its arch shape becomes a rectangle */
@media (min-width: 901px) {
  .stones__art .arch { background: none; left: 0; right: auto; transform: none; max-width: none; aspect-ratio: auto; width: 84%; top: 5%; bottom: 0;
    -webkit-mask-image: linear-gradient(#000, #000), var(--a905); mask-image: linear-gradient(#000, #000), var(--a905); }
  .stones__art .stone__plate .gr { -webkit-mask-image: none; mask-image: none; }
}
/* the questions: the night's ink runs down into the top-right corner, under the seam, beside the title */
.r4-rog { top: 46px; right: 0; width: min(38vw, 260px); aspect-ratio: 1; }
@media (min-width: 901px) { .r4-rog { width: 240px; } }
/* the pouch photo sinks into the ink horizon; the button waits below the drips */
.box__pouch--ph { position: relative; overflow: visible; margin-bottom: 58px; }
.box__pouch .r4-ogon--in.deco { display: block; position: absolute; left: 0; width: 100%; height: auto; margin: 0; top: calc(100% - 76px); aspect-ratio: 2.9979; }

/* ---------- R4-10 ---------- */
/* the price at the scale of NU04 on every screen: the orbit sets the scale, the equation and the painted 3 fit inside
   its inner ring, the small 3 on the ring gives way to the painted one, the cloud pools off the lower right */
.price__stage .ink3 .ink { height: 74%; margin-top: 0; }
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .n3 text { opacity: .18; }
@media (min-width: 901px) {
  .price__sticky { --orb: min(440px, 52svh); }
  .price__stage { height: calc(var(--orb) * .9); }
  .r4-orbita { width: var(--orb); }
  .price__stage > span { font-size: calc(var(--orb) * .5); }
  .price__stage > span.eq { font-size: calc(var(--orb) * .19); }
  .price__stage .ink3 .ink { height: calc(var(--orb) * .72); }
  .price__sticky .pw:not(.pw2) { width: calc(var(--orb) * .52); left: calc(50% + var(--orb) * .42); top: calc(55% + var(--orb) * .28); }
}
/* photos sink into the ink without a straight edge or a grey mist: the photo's own lower edge is the cloud's edge
   (e_tear_mask, the seam's cloud inverted) and the ink waits behind it, its solid top showing through the gaps */
.box__pouch--ph img { position: relative; z-index: 1; }
.box__pouch--ph img {
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 66px) no-repeat, url(../img/r4/e_tear_mask.webp) bottom / 100% 72px no-repeat;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 66px) no-repeat, url(../img/r4/e_tear_mask.webp) bottom / 100% 72px no-repeat; }
@media (max-width: 900px) {
  .one__ph, .pdp .stage {
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 66px) no-repeat, url(../img/r4/e_tear_mask.webp) bottom / 100% 72px no-repeat;
    mask: linear-gradient(#000, #000) top / 100% calc(100% - 66px) no-repeat, url(../img/r4/e_tear_mask.webp) bottom / 100% 72px no-repeat; }
  .one__ph { position: relative; z-index: 1; }
  .pdp__media { z-index: 1; }
  .pdp__wash.r4-horyzont { top: -76px; -webkit-mask-image: none; mask-image: none; }
  .gdots { bottom: 78px; }
}
/* the arrow keeps its distance from the button's edge, also when the capitals run long on a narrow phone */
.btn { padding: 0 20px 0 24px; }
@media (max-width: 400px) { .btn { gap: 10px; padding: 0 16px 0 18px; letter-spacing: .1em; } }
/* the whole name in the first screen of a 390×844 phone: a smaller crescent over it */
@media (max-width: 900px) { .r4-sierp { width: 112px; margin: 24px auto -4px; } }
@media (max-width: 360px) { .dr-foot .btn { font-size: 14px; letter-spacing: .06em; } }
/* the sweep under a button is decoration, clipped by the button: it takes no taps (the tap gate counted it as target) */
.btn::before { pointer-events: none; }

/* ---------- R4-11 ---------- */
/* „Z bliska” as mockup 139: the tiger's eye on the night, off the right edge beside the title (gold lives on navy) */
.r4-kamien { position: absolute; right: -12vw; top: -14px; width: 40vw; max-width: 520px; height: auto; pointer-events: none; }
@media (min-width: 901px) { .r4-kamien { right: -40px; top: -70px; width: 25vw; } }
.real .wrap { position: relative; }
/* history: the ink plate sits in the first card's drawing, from its left edge */
.beat__art { position: relative; }
.beat__art .r4-bok { top: 4%; height: 92%; }
/* the reading line through the page in ink, not gold */
.rthread path { stroke: var(--accent); }
/* the gallery's zoom as a bare ink mark, like share and save */
.zoom { background: none !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* nothing under 14 px on the desktop either */
@media (min-width: 901px) {
  .nav a, .bag__t, .pricerow span, .trust li, .eras button, .lupa__h, .trio__grid small, .fine, .scta__t, .box__list small, .foot small { font-size: 14px; }
}
/* the grey small print on the phone a size up and darker: facts beside the stones and the fine print */
@media (max-width: 900px) { .facts dd, .fine { font-size: 15px; color: var(--text-2); } }
@media (min-width: 901px) { .box__list li span small, .dr-item span small { font-size: 14px; } }

/* ---------- R4-12: one paper ---------- */
/* every cream section lies on the page's own paper, as in the Koncept: no flat panel meets the texture,
   so the cream→cream seams (a grey band, a straight line) go; only the night keeps its torn edges */
.story, .trio, .ritual, .price, .faq, .coll, .stones { background: transparent; }
.ink.edge:not([data-dark]) { display: none; }
/* the card under „Trzy warstwy” lies flat on the paper: a hairline, no shadow */
.scta { box-shadow: 0 0 0 1px var(--line); }
/* two-line headings: a descender never touches the capital below */
.d2 { line-height: 1.08; }

/* ---------- R4-12: the desktop without the draft's last layouts ---------- */
@media (min-width: 901px) {
  /* hero (Hero 135): the photo ends in the cloud on its right and lower edge instead of the draft's S-curve;
     the thumbnails ride above the torn edge, the crescent is smaller so the button sits above the fold at 1440×900 */
  .pdp .stage {
    -webkit-mask: linear-gradient(#000, #000) left top / calc(100% - 66px) calc(100% - 66px) no-repeat,
      url(../img/r4/e_tear_mask_v.webp) right top / 72px calc(100% - 66px) no-repeat,
      url(../img/r4/e_tear_mask.webp) left bottom / calc(100% - 66px) 72px no-repeat;
    mask: linear-gradient(#000, #000) left top / calc(100% - 66px) calc(100% - 66px) no-repeat,
      url(../img/r4/e_tear_mask_v.webp) right top / 72px calc(100% - 66px) no-repeat,
      url(../img/r4/e_tear_mask.webp) left bottom / calc(100% - 66px) 72px no-repeat; }
  .thumbs { bottom: 96px; }
  .r4-sierp { width: 96px; margin-top: 18px; }

  /* Trzy warstwy (Logo 063, Numerologia 103): the rings on the left, the three layers as a list beside them */
  .trio .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(56px, 7vw, 120px); align-items: center; }
  .trio__head { grid-column: 2; grid-row: 1; text-align: left; margin: 0; max-width: 560px; }
  .trio__head .lead { margin: 18px 0 0; }
  .r4-tarcza { grid-column: 1; grid-row: 1 / span 4; justify-self: end; width: min(100%, 540px); margin: 0; }
  .r4-tarcza__k img { width: 56px; height: 56px; }
  .trio__grid, .trio__close, .trio__note { grid-column: 2; max-width: 560px; }
  .trio__grid { grid-template-columns: 1fr; gap: 0; margin-top: 30px; text-align: left; }
  .trio__grid > svg, .trio__grid .pic, .trio__grid article::before { display: none; }
  .trio__grid article, .trio__grid article:nth-of-type(n) { display: block; margin: 0; padding: 18px 0; border-top: 1px solid var(--line-2); }
  .trio__grid article:last-of-type { border-bottom: 1px solid var(--line-2); }
  .trio__grid small { font: 500 14px/1.4 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
  .trio__grid h3 { font-size: 30px; margin: 2px 0 4px; }
  .trio__grid p { max-width: none; margin: 0; }
  .trio__close { text-align: left; font-size: 30px; margin: 30px 0 0; }
  .trio__note { text-align: left; margin-left: 0; }
  .scta { grid-column: 1 / -1; }

  /* Kolekcja (E25 on the desktop): the film sinks into the same ink horizon, torn at both ends under the film's corners */
  .coll .one { position: relative; }
  .one__ph {
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 66px) no-repeat, url(../img/r4/e_tear_mask.webp) bottom / 100% 72px no-repeat;
    mask: linear-gradient(#000, #000) top / 100% calc(100% - 66px) no-repeat, url(../img/r4/e_tear_mask.webp) bottom / 100% 72px no-repeat;
    position: relative; z-index: 1; }
  .coll .r4-ogon.deco { display: block; position: absolute; left: -30px; top: calc(100% - 76px);
    width: calc((100% - 72px) / 2 + 60px); height: auto; aspect-ratio: 2.9979;
    -webkit-mask: url(../img/r4/e_tear_mask_vl.webp) left / 72px 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 132px) 100% no-repeat,
      url(../img/r4/e_tear_mask_v.webp) right / 72px 100% no-repeat;
    mask: url(../img/r4/e_tear_mask_vl.webp) left / 72px 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 132px) 100% no-repeat,
      url(../img/r4/e_tear_mask_v.webp) right / 72px 100% no-repeat; }

  /* Pudełko: the cloud beside the hands ends in its own torn edge, not in the cut of its frame */
  .r4-bok--p {
    -webkit-mask: linear-gradient(#000, #000) left / calc(100% - 66px) 100% no-repeat, url(../img/r4/e_tear_mask_v.webp) right / 72px 100% no-repeat;
    mask: linear-gradient(#000, #000) left / calc(100% - 66px) 100% no-repeat, url(../img/r4/e_tear_mask_v.webp) right / 72px 100% no-repeat; }

  /* the eras in the Koncept's capitals; the stones' rail at the edge of the picture column, off the stone */
  .eras button { font: 500 14px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
  .srail { justify-self: end; margin-left: 0; margin-right: -44px; }
}

/* the price cloud on the phone sits under the equation's baseline, not on the 5 */
@media (max-width: 900px) { .price__sticky .pw:not(.pw2) { top: calc(62% + 24px); } }

/* ---------- R4-M1: one motion language (FABLE-R4M) — the ink paints, the pen rules, words settle on dry paper ---------- */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-pen: cubic-bezier(.45, .05, .3, 1); }
@media (prefers-reduced-motion: no-preference) {
  /* r4-ruch.js marks only what is below the first screen; individual translate/scale keep each element's own transform */
  .js .r4-o { opacity: 0; translate: 0 12px; }
  .js .r4-o.r4-in { opacity: 1; translate: none; transition: opacity .6s var(--ease-out) var(--d, 0s), translate .6s var(--ease-out) var(--d, 0s); }
  /* a section number: the figures settle, then the pen draws its rule from the left */
  .js .r4-nr.r4-o i { scale: 0 1; transform-origin: 0 50%; }
  .js .r4-nr.r4-o.r4-in i { scale: none; transition: scale .5s var(--ease-pen) calc(var(--d, 0s) + .15s); }
  .js .r4-o.r4-now, .js .r4-o.r4-now i { transition: none; }
  /* hero: „nie dla ozdoby.” is written left to right when it can be read (on a phone after the first scroll, not under
     the bar); the swashes keep their room */
  .js .tag.r4-czeka em { clip-path: inset(-20% 100% -35% -6%); }
  .js .pdp.go .tag.r4-czeka.r4-pisz em { animation: r4-pisze .95s var(--ease-pen) .45s both; }
}
@keyframes r4-pisze { from { clip-path: inset(-20% 100% -35% -6%); } to { clip-path: inset(-20% -6% -35% -6%); } }
/* the bag: a sheet that answers at once and leaves faster than it came; the counter nods, it does not jump */
.drawer { transition: transform .28s var(--ease-out), visibility 0s linear .28s; }
.drawer.on { transition: transform .42s var(--ease-out); }
.scrim { transition: opacity .2s ease; }
.pop { animation: r4-pop .25s var(--ease-out); }
@keyframes r4-pop { 40% { transform: scale(1.1); } }
/* the bottom bar slides in when the hero's button leaves; a hairline, no shadow (the Koncept has none) */
@media (max-width: 900px) { .bar { transition: transform .24s var(--ease-out); box-shadow: none; } }

/* ---------- R4-M2: the price as the page's clock (FABLE-R4M, signature 1; NU04, DE10) ---------- */
/* the orbit is drawn like a clock hand sweeping from twelve: ring, figures and the crescent appear as it passes */
@property --r4-kat { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@media (prefers-reduced-motion: no-preference) {
  .js .r4-orb-czeka .r4-orbita { --r4-kat: 0deg;
    -webkit-mask: conic-gradient(#000 var(--r4-kat), transparent 0); mask: conic-gradient(#000 var(--r4-kat), transparent 0); }
  .js .r4-orb-czeka.r4-orb .r4-orbita { animation: r4-zegar 1.4s var(--ease-pen) both; }
}
@keyframes r4-zegar { from { --r4-kat: 0deg; } to { --r4-kat: 360deg; } }
/* on „3” the three stones land on the ring one after another; the two small planets step aside for them */
.r4-orbita .kr { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; translate: 0 -8px; }
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .kr { opacity: 1; translate: none;
  transition: opacity .4s var(--ease-out) var(--kd, .9s), translate .5s var(--ease-out) var(--kd, .9s); }
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .kr--tig { --kd: .99s; }
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .kr--hem { --kd: 1.08s; }
.r4-orbita .pl { transition: opacity .3s ease; }
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .pl { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .r4-orbita .kr { transition: none !important; translate: none; } }
/* the step dots as the moon's phases: new, crescent, quarter, full — the count ends in a full moon */
.price__dots button::before, .price__dots button.on::before { width: 14px; height: 14px; border-radius: 50%; background: none;
  box-shadow: inset 0 0 0 1px var(--text); opacity: .4; transition: opacity .3s ease, scale .3s var(--ease-out); }
.price__dots button[data-st="1"]::before { box-shadow: inset 0 0 0 1px var(--text), inset -4px 0 0 0 var(--text); }
.price__dots button[data-st="2"]::before { background: linear-gradient(90deg, transparent 50%, var(--text) 50%); }
.price__dots button[data-st="3"]::before { background: var(--text); }
.price__dots button.on::before { opacity: 1; scale: 1.2; }

/* ===== R4-M3: Trzy warstwy (FABLE-R4M, signature 2). A drop on the sign: the rings spread outward like water
   (inner first, decelerating), each stone falls onto its ring when that ring is ~70% out, its name settles after. ===== */
.r4-tarcza :is(.t1, .t2, .t3) { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .26s ease; }
.r4-tarcza__k b { transition: opacity .26s ease; }
.r4-tarcza__k img { transition: opacity .26s ease, scale .26s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .js .r4-fala-czeka :is(.t1, .t2, .t3) { opacity: 0; scale: .5; }
  .js .r4-fala-czeka :is(.tp, .r4-tarcza__k b) { opacity: 0; }
  .js .r4-fala-czeka .r4-tarcza__k img { opacity: 0; translate: 0 -10px; }
  .js .r4-fala :is(.t1, .t2, .t3) { transition: opacity .5s var(--ease-out) var(--fd), scale var(--fl) var(--ease-out) var(--fd); }
  .js .r4-fala .t3 { --fd: 0s; --fl: .7s; }
  .js .r4-fala .t2 { --fd: .12s; --fl: .78s; }
  .js .r4-fala .t1 { --fd: .24s; --fl: .86s; }
  .js .r4-fala .r4-tarcza__k img { transition: opacity .4s var(--ease-out) var(--kd), translate .4s var(--ease-out) var(--kd); }
  .js .r4-fala .r4-tarcza__k b { transition: opacity .3s ease calc(var(--kd) + .3s); }
  .js .r4-fala .k3 { --kd: .49s; }
  .js .r4-fala .k2 { --kd: .67s; }
  .js .r4-fala .k1 { --kd: .84s; }
  .js .r4-fala .tp { transition: opacity .4s ease .9s; }
  .r4-tarcza[data-on] .r4-tarcza__k img { scale: .94; }
  .r4-tarcza[data-on="1"] .k1 img, .r4-tarcza[data-on="2"] .k2 img, .r4-tarcza[data-on="3"] .k3 img { scale: 1.08; }
}
/* a row lights its ring: the other rings and stones step back */
.r4-tarcza[data-on] :is(.t1, .t2, .t3) { opacity: .12; }
.r4-tarcza[data-on="1"] .t1, .r4-tarcza[data-on="2"] .t2, .r4-tarcza[data-on="3"] .t3 { opacity: .9; }
.r4-tarcza[data-on] .r4-tarcza__k > * { opacity: .3; }
.r4-tarcza[data-on="1"] .k1 > *, .r4-tarcza[data-on="2"] .k2 > *, .r4-tarcza[data-on="3"] .k3 > * { opacity: 1; }
.trio__grid article { -webkit-tap-highlight-color: transparent; }
.trio__grid article h3 { transition: color .26s ease; }
.trio .wrap:has(.r4-tarcza[data-on="1"]) .trio__grid article:nth-of-type(1) h3,
.trio .wrap:has(.r4-tarcza[data-on="2"]) .trio__grid article:nth-of-type(2) h3,
.trio .wrap:has(.r4-tarcza[data-on="3"]) .trio__grid article:nth-of-type(3) h3 { color: var(--accent); }


/* the era tabs are a desktop control; on the phone their rows are not rendered either */
@media (max-width: 900px) { .eras li { display: none; } }

/* ===== R4-M4: history (FABLE-R4M). Each era card: the drawing starts, the year is written, the title and the text settle.
   Fast on purpose: the cards are swiped one after another. ===== */
@media (prefers-reduced-motion: no-preference) {
  .js .r4-ep-czeka .beat__when { clip-path: inset(-12% 100% -12% -4%); }
  .js .r4-ep-czeka > :is(h3, p) { opacity: 0; translate: 0 10px; }
  .js .r4-ep-czeka.r4-ep .beat__when { clip-path: inset(-12% -4% -12% -4%); transition: clip-path .5s var(--ease-pen) .3s; }
  .js .r4-ep-czeka.r4-ep > :is(h3, p) { opacity: 1; translate: none; transition: opacity .6s var(--ease-out) var(--d), translate .6s var(--ease-out) var(--d); }
  .js .r4-ep-czeka.r4-ep > h3 { --d: .12s; }
  .js .r4-ep-czeka.r4-ep > p { --d: .22s; }
  .js .r4-ep-czeka.r4-now > *, .js .r4-ep-czeka.r4-now .beat__when { transition: none; }
  /* the feather is laid down on the page after the cloud: a small turn into place */
  .js .r4-pioro.r4-o { rotate: -2deg; transform-origin: 100% 100%; }
  .js .r4-pioro.r4-o.r4-in { rotate: none; transition: opacity .7s var(--ease-out) .5s, translate .7s var(--ease-out) .5s, rotate .7s var(--ease-out) .5s; }
}
/* desktop era tabs: the active era is underlined in ink, the line slides (300 ms) instead of a filled tab jumping */
@media (min-width: 901px) {
  .eras button.on { background: none; color: var(--text); }
  .eras::after { content: ''; position: absolute; left: 0; bottom: 6px; width: 1px; height: 1.5px; background: var(--text);
    transform-origin: 0 50%; transform: translateX(var(--x, 0)) scaleX(var(--w, 0)); opacity: 0; pointer-events: none; }
  .eras.r4-kreska::after { opacity: 1; transition: transform .3s var(--ease-out), opacity .2s ease; }
}

/* R4-M4: the pen rules the rows. With motion, a list row's hairline is drawn from the left as the row settles
   (stone facts, the three layers); without JS or with reduced motion the plain border stays. */
@media (prefers-reduced-motion: no-preference) {
  .js .facts > div, .js .trio__grid > article { position: relative; border-top-color: transparent; }
  .js .facts > div::after, .js .trio__grid > article::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
    background: var(--line-2); transform-origin: 0 50%; pointer-events: none; }
  .js .facts > div.r4-o::after, .js .trio__grid > article.r4-o::after { scale: 0 1; }
  .js .facts > div.r4-in::after, .js .trio__grid > article.r4-in::after { scale: none; transition: scale .5s var(--ease-pen) var(--d, 0s); }
  .js .r4-now::after { transition: none; }
}
/* phone history deck: the card clips only vertically, its picture clips its own sides. Same look; the cards' titles
   are no longer "cut" by the card itself while they wait off screen inside the swipe deck (overflow gate). */
@media (max-width: 900px) {
  .beats .beat, .beats .beat:nth-child(n) { overflow: visible; overflow-y: clip; }
  .beats .beat__art { overflow-x: clip; }
}
.r4-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* R4-M4b: readable on the phone for 45–60 (workspace standard): running text 17 px, text 20 px from the screen's edges.
   The footer's small print and the stone captions stay smaller as a deliberate step down. */
@media (max-width: 900px) {
  :root { --pad: 20px; }
  .beats .beat > p, .pdp__info .desc, .stone__for, .rsteps p, .real__head > p, .trio__grid article p, .acc__b p,
  .facts dd, .lupa__t, .fine, .rspec, .foot__row p, .box__list li span, .box__list li > span small { font-size: 17px; }
  .scta { padding: 16px; }
}
/* the play / 3D marks on the thumbnails are pictures, not targets */
.thumbs button::before, .thumbs button::after { pointer-events: none; }

/* ===== R4-M5 (review M3) ===== */
/* Kolekcja, phone: a different stretch of the torn edge, so no tongue of the white sweater stands over the ink */
@media (max-width: 900px) {
  .one__ph {
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 66px) no-repeat, url(../img/r4/e_tear_mask.webp) 38% 100% / 135% 72px no-repeat;
    mask: linear-gradient(#000, #000) top / 100% calc(100% - 66px) no-repeat, url(../img/r4/e_tear_mask.webp) 38% 100% / 135% 72px no-repeat; }
}
/* "Weź go / ze sobą": the g's tail sat on the b; this heading gets a touch more leading */
#collH { line-height: 1.16; }
/* small phones (360×780, 390×664): a smaller crescent lifts the name above the bottom bar */
@media (max-width: 380px) { .r4-sierp { width: 72px; margin: 14px auto -2px; } }
/* short phones (390×664, 360×640): a 4:3 photo and no crescent (the logo carries it) put the name above the bar */
@media (max-width: 900px) and (max-height: 700px) { .pdp .stage { aspect-ratio: 4 / 3; } .r4-sierp { display: none; }
  /* in the shorter frame the bracelet fills the lower half: the gallery's dashes move to the clear stone at the top left, away from share and save */
  .gdots { top: 12px; bottom: auto; left: 20px; transform: none; } }
/* Trzy warstwy: the outer rings read as rings (were .55/.45), the lit ring is drawn whole */
.r4-tarcza .t1 { stroke-width: 1.3; opacity: .75; }
.r4-tarcza .t2 { stroke-width: 1.1; opacity: .65; }
.r4-tarcza .t3 { opacity: .6; }
.r4-tarcza[data-on="1"] .t1, .r4-tarcza[data-on="2"] .t2, .r4-tarcza[data-on="3"] .t3 { opacity: 1; stroke-dasharray: none; stroke-width: 1.2; }
/* the phone's small dial per row: the row's own ring in ink, the other two faint, its stone on it */
.r4-mini { display: none; }
@media (max-width: 900px) {
  .r4-mini { display: block; float: right; position: relative; width: 60px; height: 60px; margin: 2px 0 8px 16px; }
  .r4-mini svg { width: 100%; height: 100%; fill: none; stroke: var(--text); overflow: visible; }
  .r4-mini circle { stroke-width: 1.6; stroke-dasharray: 0 6; stroke-linecap: round; opacity: .35; }
  .r4-mini .mc { fill: var(--text); stroke: none; opacity: .6; }
  .r4-mini--1 .m1, .r4-mini--2 .m2, .r4-mini--3 .m3 { stroke-dasharray: none; stroke-width: 2.2; opacity: 1; }
  .r4-mini img { position: absolute; width: 20px; height: 20px; max-width: none; border-radius: 50%; mix-blend-mode: multiply; translate: -50% -50%; }
  .r4-mini--1 img { left: 80.6%; top: 19.4%; }
  .r4-mini--2 img { left: 72.4%; top: 27.6%; }
  .r4-mini--3 img { left: 64.1%; top: 35.9%; }
}
/* price, phone: the cloud pools under the 75's baseline, not into its 5; the caption moves down with it */
@media (max-width: 900px) {
  .price__sticky .pw:not(.pw2) { top: calc(62% + 46px); }
  .price__cap { margin-top: 34px; }
}
/* price, desktop, as Numerologia 103: the words on the left (number, title, the step's caption, the moon phases),
   the orbit large on the right; no empty sides around a narrow centre column */
@media (min-width: 901px) {
  .price__sticky { --orb: min(600px, 64svh); --cx: 70%; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto auto;
    column-gap: 48px; row-gap: 0; justify-items: start; align-content: center; text-align: left; }
  .price__sticky > .r4-nr { grid-column: 1; grid-row: 1; align-self: end; }
  .price__h { grid-column: 1; grid-row: 2; max-width: 13ch; font-size: clamp(40px, 3.5vw, 54px); margin: 18px 0 0; }
  .price__stage { grid-column: 2; grid-row: 1 / -1; justify-self: center; align-self: center; height: calc(var(--orb) * .9); }
  .price__cap { grid-column: 1; grid-row: 3; margin: 30px 0 0; max-width: 26ch; min-height: 2.8em; }
  .price__dots { grid-column: 1; grid-row: 4; align-self: start; margin: 18px 0 0 -10px; }
  .price__sticky .pw:not(.pw2) { left: calc(var(--cx) + var(--orb) * .4); top: calc(50% + var(--orb) * .3); }
  .price__sticky .pw2 { left: 46%; right: 2%; }
}

/* ===== R4-M5: the second half of the page (FABLE-R4M) ===== */
@media (prefers-reduced-motion: no-preference) {
  /* ritual: the step's number waits pale and is inked when the step reaches the middle; its rule is drawn like the others */
  .js .rsteps > li.r4-o:not(.r4-srodek):not(.r4-now)::before { opacity: .3; }
  .js .rsteps > li.r4-o::before { transition: opacity .3s ease; }
  .js .rsteps > li { border-top-color: transparent; }
  .js .rsteps > li::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-2); transform-origin: 0 50%; pointer-events: none; }
  .js .rsteps > li.r4-o::after { scale: 0 1; }
  .js .rsteps > li.r4-in::after { scale: none; transition: scale .5s var(--ease-pen) var(--d, 0s); }
  /* the box is packed: its rows come in from the side, one after another, the 21-day card last */
  .js .box__list > li.r4-o { translate: -12px 0; } /* from the left, where the sign gives room; the long right edge never nears the screen */
  .js .box__list > li.r4-o.r4-in { translate: none; transition: opacity .45s var(--ease-out) calc(var(--d, 0s) * 1.17), translate .45s var(--ease-out) calc(var(--d, 0s) * 1.17); }
  /* the footer's crescent is painted from the left, as in the hero */
  .js .foot__znak.r4-o { opacity: 1; translate: none; clip-path: inset(-4% 100% -4% -4%); }
  .js .foot__znak.r4-o.r4-in { clip-path: inset(-4% -4% -4% -4%); transition: clip-path .9s var(--ease-pen) .1s; }
  .js .foot__znak.r4-now { transition: none; }
}
/* questions: an answer opens by growing its height (280 ms) and fading in; where the browser can't animate to auto, it opens at once */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .acc--faq { interpolate-size: allow-keywords; }
    .acc--faq details::details-content { height: 0; overflow: clip; transition: height .28s var(--ease-out), content-visibility .28s allow-discrete; }
    .acc--faq details[open]::details-content { height: auto; }
    .acc--faq details .acc__b { transition: opacity .2s ease .08s; }
    @starting-style { .acc--faq details[open] .acc__b { opacity: 0; } }
  }
}
/* Z bliska: the stone drifts up a little as the night passes (scroll-linked, no pin) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .r4-kamien { animation: r4-dryf linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes r4-dryf { from { translate: 0 10px; } to { translate: 0 -14px; } }

/* ===== R4-M6: hands and pointers ===== */
/* toggles: the chosen option's underline is one line that slides (260 ms); without JS the inset line stays */
.seg { position: relative; }
.seg.r4-suwak button[aria-selected="true"], .seg.r4-suwak input:checked + span { box-shadow: none; }
.seg.r4-suwak::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 2px; margin-top: -2px; background: var(--navy);
  transform-origin: 0 0; transform: translate(var(--sx, 0), var(--sy, 0)) scaleX(var(--sw, 0)); pointer-events: none;
  transition: transform .26s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .seg.r4-suwak::after { transition: none; } }
/* a pointer over a button or a "next" link moves its arrow a step forward */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn i, .next i { transition: translate .2s var(--ease-out); }
  .btn:hover i, .next:hover i { translate: 4px 0; }
}
/* the splash where the stones land in the pouch is ink, like every other drop on the page */
.drop { background: var(--navy); }

/* ---------- R4-M7: questions in three chapters (Wartości 027/039) ---------- */
/* a small sign in the pen's thin line, then the chapter name in spaced capitals; the questions keep their own rules */
.acc--faq .r4-grupa { display: flex; align-items: center; gap: 14px; margin: 46px 0 6px; font: 500 14px/1.2 var(--serif);
  letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.acc--faq .r4-grupa:first-child { margin-top: 20px; }
.acc--faq > details:has(+ .r4-grupa) { border-bottom: 1px solid var(--line-2); }
.r4-ik { width: 34px; height: 34px; flex: none; overflow: visible; fill: none; stroke: var(--navy); stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round; }
.r4-ik circle:not(.r4-ik__nic) { fill: var(--cream); }
.r4-ik .r4-ik__nic { stroke-width: .8; opacity: .55; }
/* the sign is drawn with the pen when its chapter settles: line by line, the beads one after another */
@media (prefers-reduced-motion: no-preference) {
  .js .r4-o .r4-ik > * { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .r4-o.r4-in .r4-ik > * { stroke-dashoffset: 0;
    transition: stroke-dashoffset .7s var(--ease-pen) calc(var(--d, 0s) + .12s + var(--i, 0) * 60ms); }
  .js .r4-now .r4-ik > * { transition: none; }
}

/* ---------- R4-M8: what is in the box, one kind of sign (Opakowania 022) ---------- */
.r4-znak { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(29, 36, 54, .22); }
.r4-znak .r4-ik { width: 28px; height: 28px; }
.r4-znak i { font: italic 400 21px/1 var(--serif); color: var(--navy); font-feature-settings: "lnum" 1; translate: 0 1px; }

/* ---------- R4-M9 (review M8) ---------- */
/* the dial's stone names stand on clean paper: a patch of the page's paper behind each, so no orbit runs through the letters */
.r4-tarcza__k b { background: var(--cream); padding: 4px 8px 3px; }
/* hematite is a dark metallic grey: on the small phone dial it read as a pale glint against the ring */
.r4-mini--3 img { filter: brightness(.8) contrast(1.35); }
/* running text for 45–60 (review M8): the stones' "more" panels and the buy steps reach 17 px on the phone too */
@media (max-width: 900px) {
  .more__b p, .acc__b ol.steps li { font-size: 17px; }
}
.gift small { font-size: 14px; }
/* desktop: descriptions 17.5 px, answers and panels 17 px, facts 16 px, small print 15 px */
@media (min-width: 901px) {
  .beats .beat > p, .stone__for, .pdp__info .desc, .trio__grid article p { font-size: 17.5px; }
  .acc__b p, .more__b p, .lupa__t, .rsteps p, .acc__b ol.steps li { font-size: 17px; }
  .facts dd { font-size: 16px; }
  .fine, .rspec, .box__list li span small { font-size: 15px; }
}

/* ---------- R4-M9: the ritual's sentence as Storytelling ST03 ---------- */
/* centred between two ink corners, a small crescent under it; no frame, the corners hold it */
.r4-cytat { position: relative; margin: 14px 0 4px; padding: 46px 30px 28px; text-align: center; isolation: auto; }
.r4-cytat__rog { width: min(46%, 190px); aspect-ratio: 1; }
.r4-cytat__rog--lg { left: -6px; top: -4px; }
.r4-cytat__rog--pd { right: -6px; bottom: -4px; }
.r4-cytat .intq--lg { position: relative; margin: 0 auto; max-width: 20ch; min-height: 0; }
.r4-cytat__ks { display: block; width: 16px; height: 16px; margin: 16px auto 0; fill: var(--navy); }
/* the corners must never end in a straight cut mid-page: on a phone the sentence runs to the screen's edges, which cut them
   (the steps' text is centred and each step is indented 50 px); on desktop they dissolve into the paper toward the column */
@media (max-width: 900px) {
  .r4-cytat { width: 100vw; margin-left: calc(-1 * ((100vw - 100% - 50px) / 2 + 50px)); padding: 50px 56px 32px; }
  .r4-cytat__rog { width: min(44vw, 190px); }
  .r4-cytat__rog--lg { left: 0; top: 0; -webkit-mask: linear-gradient(transparent, #000 24%); mask: linear-gradient(transparent, #000 24%); }
  .r4-cytat__rog--pd { right: 0; bottom: 0; -webkit-mask: linear-gradient(0deg, transparent, #000 24%); mask: linear-gradient(0deg, transparent, #000 24%); }
}
@media (min-width: 901px) {
  .r4-cytat__rog--lg { -webkit-mask: linear-gradient(90deg, transparent, #000 22%), linear-gradient(transparent, #000 22%); -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent, #000 22%) intersect, linear-gradient(transparent, #000 22%); }
  .r4-cytat__rog--pd { -webkit-mask: linear-gradient(270deg, transparent, #000 22%), linear-gradient(0deg, transparent, #000 22%); -webkit-mask-composite: source-in;
    mask: linear-gradient(270deg, transparent, #000 22%) intersect, linear-gradient(0deg, transparent, #000 22%); }
}

/* ===== R5 „Atrament”: the hero is one ink composition on the page's own paper (Hero 135 / Mobile 140) ===== */
/* the picture carries the crescent and the ink; a second moon or a second horizon under it only repeats it */
.pdp__info > .r4-sierp, .pdp__wash.r4-horyzont { display: none; }
.pdp__info > .r4-brow { margin-top: 26px; }
@media (max-width: 900px) {
  /* the dots sit on the paper under the bracelet, not on it */
  .gdots { bottom: 14px; }
}

/* ===== R5: the night of Koncept no.2 (139, 143, 015): near-black in the middle, a shade of navy where the ink seams
   meet it; bronze, not pale gold, for hairlines and capitals on the night ===== */
:root { --dark: #101a28; --night: #050b11; --on-dark: #eadfd0; --dark-accent: #b28e61; --bronze: #b28e61; }
.real, .foot { background-color: var(--night);
  background-image: linear-gradient(180deg, var(--dark) 0, var(--night) 22%, var(--night) 78%, var(--dark) 100%); }
.real { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23eadfd0'%3E%3Ccircle cx='31' cy='47' r='.7' opacity='.5'/%3E%3Ccircle cx='190' cy='22' r='.6' opacity='.4'/%3E%3Ccircle cx='121' cy='151' r='.8' opacity='.45'/%3E%3Ccircle cx='233' cy='199' r='.6' opacity='.35'/%3E%3Ccircle cx='72' cy='231' r='.5' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"),
  linear-gradient(180deg, var(--dark) 0, var(--night) 22%, var(--night) 78%, var(--dark) 100%); }
.foot::after { background: linear-gradient(180deg, var(--dark) 0, rgba(5, 11, 17, .35) 26%, rgba(5, 11, 17, .25) 45%, rgba(5, 11, 17, .94) 100%); }
.real .r4-nr, .foot .r4-nr, .real .strip figcaption { color: var(--bronze); }
.real .sdots i.on { background: var(--bronze); }

/* ===== R5: „Z bliska” = Ciemne 139: the tiger's eye glows out of the night beside the title; text stays on pure night ===== */
.r5-oko { position: absolute; right: -20px; top: -40px; width: 78vw; max-width: 620px; height: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 96%), linear-gradient(90deg, transparent 0, #000 34%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 96%), linear-gradient(90deg, transparent 0, #000 34%); mask-composite: intersect; }
.real .real__head { position: relative; padding-top: 70vw; }
@media (min-width: 901px) {
  .r5-oko { right: 0; top: -120px; width: 44vw; max-width: 640px; }
  .real .real__head { padding-top: 0; max-width: 46%; min-height: 34vw; }
}

/* ===== R5: Kolekcja = Ciemne 136: night; the rock photo sinks into it; cream type; CTA with a 1 px bronze outline ===== */
.coll { background-color: var(--night); background-image: linear-gradient(180deg, var(--dark) 0, var(--night) 26%); color: var(--on-dark); }
.coll h2, .coll .one__buy strong { color: var(--on-dark); }
.coll .one__lead, .coll .fine { color: rgba(234, 223, 208, .84); }
.coll .r4-nr { color: var(--bronze); }
.coll .r4-nr i { background: var(--bronze); }
.coll .ink.edge.bt, .coll .r4-ogon.deco { display: none !important; }
.coll .one__ph { -webkit-mask: linear-gradient(180deg, #000 0, #000 72%, transparent 100%); mask: linear-gradient(180deg, #000 0, #000 72%, transparent 100%); }
.coll .btn { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--bronze); }
.coll .btn::before { background: var(--bronze); opacity: .18; }
@media (max-width: 900px) { .coll .one__ph { aspect-ratio: 4 / 5; } }
.foot { background-image: linear-gradient(180deg, var(--night) 0, var(--night) 78%, var(--dark) 100%); }
.foot::after { background: linear-gradient(180deg, var(--night) 0, rgba(5, 11, 17, .35) 26%, rgba(5, 11, 17, .25) 45%, rgba(5, 11, 17, .94) 100%); }

/* ===== R5: stones (Edukacja 050): the indigo plume lives in the image; the old wash layer under it turned gold to olive ===== */
.stone__plate .arch, .stones__art .arch { display: none; }
@media (max-width: 900px) {
  .stone__art figcaption { bottom: -4px; padding: 0 24px; }
  .stone__art .stone__plate { margin-bottom: 18px; }
}

/* ===== R5: Storytelling 012: a swallow flies out of the ink horizon above the quote (arrives last, after the horizon) ===== */
.r4-cytat .r5-ptak { position: relative; display: block; width: min(100%, 520px); aspect-ratio: 2; margin: -18px auto 6px; }
.r4-cytat .r5-ptak canvas { width: 100%; height: 100%; }
/* the swallow's horizon takes the place of the upper-left ink corner and runs in from the screen edge */
.r4-cytat:has(.r5-ptak) .r4-cytat__rog--lg { display: none; }
.r4-cytat .r5-ptak { width: calc(100% + 30px); max-width: none; margin: -30px 0 10px -30px; }
@media (max-width: 900px) {
  .r4-cytat { padding-top: 24px; }
  .r4-cytat .r5-ptak { width: calc(100% + 56px); margin: 0 0 6px -56px; }
}

/* ===== R5: the box photo (Opakowania 043) carries the section on desktop: the full column, not a 340 px thumbnail ===== */
@media (min-width: 901px) { .box__pouch--ph { max-width: none; } }

/* ===== R5-M: emergence from the night (Z bliska: 900 ms, scale 1.04 → 1; Kolekcja: 600 ms), ease-out, once ===== */
.r5-oko, .coll .one__ph { transition: opacity 900ms cubic-bezier(.23, 1, .32, 1), transform 900ms cubic-bezier(.23, 1, .32, 1); }
.coll .one__ph { transition-duration: 600ms; }
.r5-oko { transform-origin: 70% 45%; }
.r5-czeka:not(.r5-in) { opacity: 0; }
.r5-oko.r5-czeka:not(.r5-in) { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .r5-czeka { opacity: 1 !important; transform: none !important; } }

/* ===== R5-1 (RECENZJA-R5-1) ===== */
/* błąd 1: the night stone and the Kolekcja photo rise out of the seam softly, never a straight line under it */
.r5-oko {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 55%, transparent 96%), linear-gradient(90deg, transparent 0, #000 34%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 55%, transparent 96%), linear-gradient(90deg, transparent 0, #000 34%); }
.coll .one__ph {
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 18%, #000 74%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 18%, #000 74%, transparent 100%); }
@media (min-width: 901px) {
  /* Ciemne 136: the rock fills the left half and dissolves into the night on every side but the screen's */
  .coll .one__ph {
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 0, #000 8%, #000 70%, transparent 100%);
    mask-composite: intersect; }
}
/* błąd 2: the gallery is not a torn photograph: the dark photos stay whole rectangles, only the paper hero melts into the page */
.pdp .stage { -webkit-mask: none !important; mask: none !important; }
#stage > img[data-img^="p_hero"]:not(.in) { -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent); mask-image: linear-gradient(180deg, #000 84%, transparent); }
@media (min-width: 901px) {
  #stage > img[data-img^="p_hero"]:not(.in) {
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent), linear-gradient(90deg, #000 88%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 86%, transparent), linear-gradient(90deg, #000 88%, transparent); mask-composite: intersect; }
  /* the thumbnails: a printed caption strip (paper, one hairline), not a frosted rounded plate */
  .thumbs { bottom: 24px; background: #f2e9de; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0 !important; box-shadow: 0 0 0 1px rgba(18, 31, 46, .22); }
  .thumbs button, .thumbs button img { border-radius: 0 !important; }
}
/* błąd 4: descenders no longer touch the next line */
.d2 { line-height: 1.15; }
#collH { line-height: 1.24; }
/* G2 on the phone: Mobile 140 has no moon in its photo; the page paints its crescent above the name */
@media (max-width: 900px) { .pdp__info > .r4-sierp { display: block; } }
/* kicz: the 3D bead floats on the paper like the stones, without a cream dish, gold rings or a shadow */
.lupa__dish { background: none; box-shadow: none; outline: 0; }
.lupa__dish::after { display: none; }
/* drobne: a solid paper header (no ghost of the text scrolling under the logo); 14 px minimum; the gift tip is running text */
.top { background: #f2e9de; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mini__t em { font-size: 14px; }
.gift__tip { font-size: 17px; line-height: 1.5; }

/* ---------- R5-1 krok 7: lista jak Ciemne 139 w „Z bliska” (nawigacja paska zdjęć) ---------- */
.r5-lista { position: absolute; left: var(--pad); top: 0; z-index: 2; width: 44vw; max-width: 220px; margin: 0; padding: 0; list-style: none; }
.r5-lista li + li::before { content: ""; display: block; width: 1px; height: 14px; margin: 5px 0 5px 1px; background: var(--bronze); opacity: .75; }
.r5-lista button { display: block; min-height: 24px; padding: 2px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 14px/1.32 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: rgba(238, 232, 220, .66);
  transition: color 200ms ease; -webkit-tap-highlight-color: transparent; }
.r5-lista button span { display: block; color: var(--bronze); letter-spacing: .1em; }
.r5-lista button[aria-current] { color: #f4ecdf; }
.r5-lista button:focus-visible { outline: 1px solid var(--bronze); outline-offset: 4px; }
@media (hover: hover) { .r5-lista button:hover { color: #f4ecdf; } }
@media (min-width: 901px) {
  .r5-lista { left: calc(46% + 56px); top: 12px; width: 240px; max-width: none; }
  .r5-lista li + li::before { height: 18px; margin: 7px 0 7px 1px; }
}
@media (max-width: 900px) {
  .r5-lista { top: 4px; width: 54vw; max-width: 240px; }
  .r5-lista button { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; }
  .r5-lista button span { display: inline; }
  .r5-lista li + li::before { height: 12px; margin: 4px 0 4px 1px; }
}
@media (max-width: 900px) { .real .real__head { padding-top: max(70vw, 268px); } }

/* ---------- R5-1 krok 8: Kolekcja i Pudełko jako sceny, nie karty ---------- */
@media (min-width: 901px) {
  /* Ciemne 136: the rock runs out of the screen's left edge and only its right side melts into the night */
  .coll .one__ph {
    --bleed: calc(max(0px, (100vw - var(--max)) / 2) + var(--pad));
    margin-left: calc(var(--bleed) * -1); width: calc(100% + var(--bleed)); aspect-ratio: auto; height: min(46vw, 640px);
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%), linear-gradient(90deg, #000 0, #000 58%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%), linear-gradient(90deg, #000 0, #000 58%, transparent 100%);
    mask-composite: intersect; }
  .coll .one__ph video, .coll .one__ph img { object-position: 30% 70%; }
}
@media (max-width: 900px) {
  /* Opakowania 043: the box scene runs edge to edge and sinks into the ink band, not a card inside the margins */
  .box__pouch--ph { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); border-radius: 0 !important; aspect-ratio: 4 / 3.4; }
  .box__pouch--ph img { border-radius: 0 !important; object-position: 50% 60%; }
}

/* ---------- R5-1 ruch (RUCH-R5-1) ---------- */
/* P0-1: the product name stands from frame 0; the brush stays on the section titles */
.js #h1 .ln > span { -webkit-mask-image: none !important; mask-image: none !important; }
/* P0-2: the buying column never "arrives": price, options, button and thumbs are there from the first frame */
.js .pdp:not(.go) .pdp__info > :not(h1):not(.deco), .js .pdp:not(.go) .thumbs, .js .pdp:not(.go) .mact, .js .pdp:not(.go) .gdots { opacity: 1; }
.js .pdp.go .pdp__info > :not(h1):not(.deco), .js .pdp.go .thumbs, .js .pdp.go .mact, .js .pdp.go .gdots { animation: none; }
/* P0-3: „nie dla ozdoby.” waits from the first paint (class set in <head>), so it never shows, vanishes and writes again;
   if the motion script never runs, it writes itself after 3 s */
@media (prefers-reduced-motion: no-preference) {
  .js.pisz .pdp .tag em { clip-path: inset(-20% 100% -35% -6%); }
  .js.pisz .pdp .tag:not(.r4-czeka) em { animation: r4-pisze .95s var(--ease-pen) 3s both; }
}
/* P2-10: the night pictures emerge in 700 ms (stone) and 500 ms (Kolekcja) */
.r5-oko { transition-duration: 700ms; }
.coll .one__ph { transition-duration: 500ms; }


/* ---------- R5-1 sygnatura hero „Tusz przybywa” (RUCH-R5-1 §3, wariant D bez WebGL) ----------
   The photo is an <img> from frame 0 (LCP, no-JS and final state). Over its ink lies clean paper (the photo with the
   ink painted out) clipped by the ink's silhouette, inline here so it is there at the first paint; r5-ruch.js then
   uncovers the ink along its arrival map: out of the nib and down the river, the moon last (on a phone too since
   R5-4, G48). Once a session; never with reduced motion or data saver (class `tusz` set in <head>).
   If the script never runs, the cover fades after 3 s. */
.hero-tusz { display: none; }
.tusz .hero-tusz { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  /* the photo melts into the page at its bottom; the cover does not fade with it (two fades let the ink show through as
     a grey haze), it carries the same melt in its colour instead */
  background: linear-gradient(180deg, rgba(242, 233, 222, 0) 84%, #f2e9de), #ede4d9 url("../img/r5/hero_tusz_m_papier.jpg") 50% 50% / cover no-repeat;
  --tm: url("data:image/png;base64,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"); -webkit-mask: var(--tm) 50% 50% / cover no-repeat; mask: var(--tm) 50% 50% / cover no-repeat;
  animation: tusz-zapas .4s cubic-bezier(.23, 1, .32, 1) 3s forwards; }
.tusz .hero-tusz canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.tusz .hero-tusz.leci { animation: none; background: none; -webkit-mask: none; mask: none; }
.tusz .hero-tusz.done { opacity: 0; transition: opacity .4s cubic-bezier(.23, 1, .32, 1); }
@keyframes tusz-zapas { to { opacity: 0; visibility: hidden; } }
@media (min-width: 901px) {
  .tusz .hero-tusz { background: linear-gradient(180deg, rgba(242, 233, 222, 0) 86%, #f2e9de), linear-gradient(90deg, rgba(242, 233, 222, 0) 88%, #f2e9de),
      #ebe1d6 url("../img/r5/hero_tusz_d_papier.jpg") 50% 50% / cover no-repeat;
    --td: url("/assets/img/r5/hero_tusz_d_maska.png"); -webkit-mask: var(--td) 50% 50% / cover no-repeat; mask: var(--td) 50% 50% / cover no-repeat; }
  .tusz .hero-tusz.leci { background: none; -webkit-mask: none; mask: none; }
}

/* R5-1 krok 3: „Pod lupą” without the cream dish: the bead's frames are on white and multiply into the page paper */
.lupa__dish canvas { mix-blend-mode: multiply; }

/* ===== R5-2 krok 1: the crescent sits just under the photo's melt, with the name as one group (Mobile 140), and never
   pushes the name under the bottom bar; without JS it is not painted, so it takes no room ===== */
@media (max-width: 900px) {
  .pdp__info > .r4-sierp { display: none; }
  .js .pdp__info > .r4-sierp { display: block; position: relative; z-index: 3; width: 64px; margin: -28px auto 0; }
  .js .pdp__info > .r4-sierp + .r4-brow { margin-top: 6px; }
}
/* short phones (390×664, 360×640): no crescent; the dashes stay in one row under the bracelet, as on taller phones */
@media (max-width: 900px) and (max-height: 700px) {
  .js .pdp__info > .r4-sierp { display: none; }
  .pdp__info > .r4-brow, .js .pdp__info > .r4-sierp + .r4-brow { margin-top: 14px; }
  .gdots { top: auto; bottom: 14px; left: 50%; transform: translateX(-50%); }
}

/* ===== R5-2 krok 3: on the desktop the gallery's frames cross like a print laid on the paper; the sketch's dry-brush
   stripes every 140 px read as a broken video signal (Koncept no.2 has no such motion) ===== */
.stage > img.in, .stage > video.in { -webkit-mask-image: none; mask-image: none; animation: r5-galin .34s cubic-bezier(.23, 1, .32, 1) forwards; }
@keyframes r5-galin { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
/* R5-2 krok 7: the descender of „przy” no longer touches the ascender of „blisko” (360, 390, 1440) */
#storyH { line-height: 1.24; }
/* R5-2 krok 9: share, save and the dashes in cream over the gallery's dark frames on a phone */
.pdp__media .mact button, .pdp__media .gdots i { transition: color .25s ease, background-color .25s ease; }
@media (max-width: 900px) {
  .pdp__media.ciemno .mact button { color: #f2e9de; }
  .pdp__media.ciemno .gdots i { background: rgba(242, 233, 222, .4); }
  .pdp__media.ciemno .gdots i.on { background: #f2e9de; }
}
/* R5-2 krok 9: on a phone the box's photo also begins in a torn ink edge (no straight line on the paper above it) */
@media (max-width: 900px) {
  .box__pouch--ph img {
    -webkit-mask: url(../img/r4/e_tear_mask_top.webp) top / 100% 72px no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 132px) no-repeat, url(../img/r4/e_tear_mask.webp) bottom / 100% 72px no-repeat;
    mask: url(../img/r4/e_tear_mask_top.webp) top / 100% 72px no-repeat, linear-gradient(#000, #000) center / 100% calc(100% - 132px) no-repeat, url(../img/r4/e_tear_mask.webp) bottom / 100% 72px no-repeat; }
}
/* R5-2 krok 5: on a phone the night's edge is cropped at its own proportions, not squeezed from 12:1 to ~4.5:1 (the
   squeeze turned its bulges and drops into spikes like grass); the engine does the same with `fitMobile: 0` */
@media (max-width: 900px) {
  .edge[data-dark]::before { -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-position: 50% 0; mask-position: 50% 0; }
}

/* ===== R5-3 (krok 8 recenzji R5-2): Kamienie jak Edukacja 018. Na telefonie trzy fakty stoją na włoskowych kreskach
   wokół kamienia (dwa nad nim, jeden pod nim) zamiast tabeli pod opisem; treść faktów bez zmian, opis 17 px.
   Kolejność czytania: nazwa, opis, okaz z faktami, lupa. ?exp=tabela pokazuje dawną tabelę. ===== */
@media (max-width: 900px) {
  html:not(.exp-tabela) .okaz { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: 20px;
    margin: 34px calc(-1 * var(--pad)) 30px; padding: 0 var(--pad); }
  /* the plate is the figure (no caption room): 390 × 317 on a 390 phone, the ink's edges measured on it (--y1, --y2 top, --b3 bottom;
     it24: landscape drawings, measured with scratchpad kraw24.mjs) */
  /* it26 (R5-12 krok 5): every leader ends on the stone's outline, 3 px inside it, not on its ink. Measured on the canvas the
     drawing really fills (390 × 295, cover; top values = canvas y + 18.5, bottom = canvas y + 24.6), the first fact at x --x1 */
  html:not(.exp-tabela) .okaz { --pw: min(100vw, 600px); --x1: 180; --y1: 160; --y2: 129; --b3: 239; }
  html:not(.exp-tabela) #tygrysie-oko .okaz { --x1: 150; --y1: 177; --y2: 96; --b3: 248; }
  html:not(.exp-tabela) #hematyt .okaz { --x1: 150; --y1: 134; --y2: 97; --b3: 237; }
  html:not(.exp-tabela) .okaz > .stone__art { grid-column: 1 / -1; grid-row: 2; margin: -48px calc(-1 * var(--pad)) -12px;
    height: auto; aspect-ratio: 390 / 317; }
  html:not(.exp-tabela) .okaz .stone__plate { inset: 0; margin-bottom: 0; }
  html:not(.exp-tabela) .okaz > .facts { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
    margin: 0; border: 0; position: relative; z-index: 2; pointer-events: none; }
  html:not(.exp-tabela) .okaz .facts > div { display: block; padding: 0; border: 0; position: relative; pointer-events: auto; }
  html:not(.exp-tabela) .okaz .facts > div:nth-child(1) { grid-area: 1 / 1; align-self: end;
    --x: calc(var(--pw) * var(--x1) / 390 - 20px); --l: calc(var(--pw) * var(--y1) / 390 - 55px); }
  html:not(.exp-tabela) .okaz .facts > div:nth-child(2) { grid-area: 1 / 2; align-self: end;
    --x: calc(var(--pw) * 290 / 390 - var(--pw) / 2 - 10px); --l: calc(var(--pw) * var(--y2) / 390 - 55px); }
  html:not(.exp-tabela) .okaz .facts > div:nth-child(3) { grid-area: 3 / 2;
    --x: calc(var(--pw) * 270 / 390 - var(--pw) / 2 - 10px); --l: calc(var(--pw) * (320 - var(--b3)) / 390 - 26px); }
  html:not(.exp-tabela) .okaz .facts dt { font: 500 14px/1.35 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
  html:not(.exp-tabela) .okaz .facts dd { font-size: 17px; line-height: 1.4; color: var(--text-2); margin: 0; }
  /* the leader: a hairline from the fact to the stone, ending in an ink dot on the stone's edge */
  html:not(.exp-tabela) .okaz .facts > div::after { content: ''; position: absolute; left: var(--x, 18px); right: auto; top: calc(100% + 10px); width: 1px;
    height: var(--l, 40px); background: var(--text); opacity: .55; transform-origin: 50% 0; scale: none; }
  html:not(.exp-tabela) .okaz .facts > div::before { content: ''; position: absolute; left: calc(var(--x, 18px) - 2px); top: calc(100% + 10px + var(--l, 40px) - 2px);
    width: 5px; height: 5px; border-radius: 50%; background: var(--text); }
  html:not(.exp-tabela) .okaz .facts > div:nth-child(3)::after { top: auto; bottom: calc(100% + 14px); transform-origin: 50% 100%; }
  html:not(.exp-tabela) .okaz .facts > div:nth-child(3)::before { top: auto; bottom: calc(100% + 14px + var(--l, 40px) - 3px); }
}
/* with motion the pen draws each leader once the stone has arrived: the plate itself starts it (`.okaz.kamien`, set when
   the stone starts to paint), so the lines never point at empty paper (R5-3 błąd 7); then the dot lands on the edge.
   The words never wait. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.exp-tabela) .okaz .facts > div.r4-o { opacity: 1; translate: none; }
  html.js:not(.exp-tabela) .okaz:not(.kamien) .facts > div::after { scale: 1 0; }
  html.js:not(.exp-tabela) .okaz:not(.kamien) .facts > div::before { opacity: 0; scale: .4; }
  html.js:not(.exp-tabela) .okaz.kamien .facts > div::after { transition: scale .55s var(--ease-pen) calc(1.3s + var(--i, 0) * 120ms); }
  html.js:not(.exp-tabela) .okaz.kamien .facts > div::before { transition: opacity .2s ease calc(1.85s + var(--i, 0) * 120ms), scale .3s var(--ease-out) calc(1.85s + var(--i, 0) * 120ms); }
  html.js:not(.exp-tabela) .okaz .facts > div:nth-child(2) { --i: 1; }
  html.js:not(.exp-tabela) .okaz .facts > div:nth-child(3) { --i: 2; }
}

/* pulpit: kamień wypełnia lewą kolumnę, więc fakty idą pod opisem jak podpis Edukacji 050: trzy kolumny przedzielone
   włoskową kreską, podpis kapitalikami, zdanie 17 px (było 16 px w tabeli) */
@media (min-width: 901px) {
  html:not(.exp-tabela) .okaz > .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 0; border: 0; }
  html:not(.exp-tabela) .okaz .facts > div { display: block; position: relative; padding: 2px 18px 4px; border: 0; border-left: 1px solid var(--line-2); }
  html:not(.exp-tabela) .okaz .facts > div:first-child { padding-left: 0; border-left: 0; }
  html:not(.exp-tabela) .okaz .facts dt { font: 500 14px/1.35 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
  html:not(.exp-tabela) .okaz .facts dd { font-size: 17px; line-height: 1.42; color: var(--text-2); margin: 0; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.exp-tabela) .okaz .facts > div { border-left-color: transparent; }
  html.js:not(.exp-tabela) .okaz .facts > div::after { left: -1px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: 50% 0; }
  html.js:not(.exp-tabela) .okaz .facts > div:first-child::after { content: none; }
  html.js:not(.exp-tabela) .okaz .facts > div.r4-o::after { scale: 1 0; }
}
/* ?exp=tabela: the old table, with the plate full width again */
@media (max-width: 900px) { html.exp-tabela .okaz > .stone__art { margin-inline: calc(-1 * var(--pad)); } }
/* 360 px: „Pochyl telefon” wraps from the left, beside its icon, not centred under it */
@media (max-width: 380px) { .lupa__go { text-align: left; } }
/* the plate's caption only names the stone for screen readers: its heading sits right above it */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.exp-tabela .okaz figcaption.sr-only { width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* ===== R5-3 (R5-2 drobne): Pudełko na pulpicie jak Opakowania 022: tekst z lewej, zdjęcie pudełka wychodzi z prawej
   krawędzi ekranu, a jego lewy brzeg rozdziera się w papier. Rysunek dłoni zostaje na telefonie. ?exp=pudelko = dawny układ. ===== */
@media (min-width: 901px) {
  html:not(.exp-pudelko) .box { display: block; padding-top: clamp(40px, 5vw, 80px); }
  html:not(.exp-pudelko) .box__art { display: none; }
  html:not(.exp-pudelko) .box__text { max-width: none; display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px);
    align-items: start; padding: 0 0 0 calc(max(0px, (100vw - var(--max)) / 2) + var(--pad) * 2); }
  html:not(.exp-pudelko) .box__text > * { grid-column: 1; }
  html:not(.exp-pudelko) .box__text > .box__pouch--ph { grid-column: 2; grid-row: 1 / span 5; align-self: stretch; margin: 0; min-height: min(46vw, 640px);
    aspect-ratio: auto; max-width: none; border-radius: 0 !important;
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); }
  html:not(.exp-pudelko) .box__pouch--ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; border-radius: 0 !important;
    -webkit-mask: url(../img/r4/e_tear_mask_left.webp) left / 150px 100% no-repeat, linear-gradient(#000, #000) right / calc(100% - 149px) 100% no-repeat;
    mask: url(../img/r4/e_tear_mask_left.webp) left / 150px 100% no-repeat, linear-gradient(#000, #000) right / calc(100% - 149px) 100% no-repeat; }
  html:not(.exp-pudelko) .box__pouch .r4-ogon--in.deco { display: none; }
}
/* R5-2 (czytelność pulpitu): listy i specyfikacje 17 px jak tekst ciągły; drobny druk zostaje 15 px */
@media (min-width: 901px) { .box__list li span small, .rspec { font-size: 17px; } }

/* ===== R5-4 (kroki RECENZJA-R5-3) ===== */
/* krok 1: the ink's cover waits, hidden from the first paint, for the photo it covers; the photo waits for its decode
   too, so both arrive in one frame (R5-3: a ghost of the cover on empty paper, then the phone's photo cut by the desktop mask) */
.tusz .hero-tusz:not(.gotowe) { visibility: hidden; }
/* R5-5 iteracja 10: with the ink to come, the photo stays off until the inline script has its cover decoded (the parser
   painted the finished ink before reaching the script on a slow phone); if the script never runs it comes back after 3 s */
.tusz #stage > img[data-img^="p_hero"]:not(.jest) { opacity: 0; animation: tusz-foto 0s linear 3s forwards; }
@keyframes tusz-foto { to { opacity: 1; } }
/* krok 3: pulpit: the night's edge is its own shape; the old 34 % fade at its top turned the highest humps into grey smoke */
@media (min-width: 901px) {
  .edge.up[data-dark], .edge.bt[data-dark], .edge.dn[data-dark] { -webkit-mask-image: none; mask-image: none; }
}
/* krok 3: „Z bliska”: the photo's black is deeper than the night's navy, so its rectangle showed under the seam; lighten
   lets the night through the black and keeps the lit stone */
.r5-oko { mix-blend-mode: lighten; }
/* krok 3: Pytania: the ink corner under the seam starts in its own torn edge, not a straight cut (phone and desktop) */
.r4-rog {
  -webkit-mask: url(../img/r4/e_tear_mask_top.webp) top / 100% 46px no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - 45px) no-repeat;
  mask: url(../img/r4/e_tear_mask_top.webp) top / 100% 46px no-repeat, linear-gradient(#000, #000) bottom / 100% calc(100% - 45px) no-repeat; }
/* the stone's fade starts at the section's top, not 35 px above it under the seam (the seam cut it in a straight line) */
@media (min-width: 901px) { .r5-oko { top: -85px; } }
/* krok 4: Cena na telefonie: orbita zajmuje całą szerokość, więc chmura nie ma miejsca poza łukami i dotykała podpisu;
   zostaje „3” pisana tuszem i księżyce. ?exp=chmura przywraca chmurę */
@media (max-width: 900px) { html:not(.exp-chmura) .price__sticky .pw:not(.pw2) { display: none; } }
/* krok 5: niskie telefony (≤ 700 px): pod bransoletką nie ma wolnego papieru, więc kreski galerii znikają, zamiast leżeć
   na koralikach; przesuwanie palcem i strzałki klawiatury działają dalej */
@media (max-width: 900px) and (max-height: 700px) { .gdots { display: none; } }
/* krok 7: Pytania na telefonie dostają rysunek z arkusza 12 (zerwana żyłka, koraliki malowane, R5-ry-broken-v3) nad
   nagłówkiem, zamiast samego rogu tuszu */
@media (max-width: 900px) {
  .faq__art { display: block; position: relative; top: 0; width: min(70vw, 320px); margin: -6px auto 0; padding: 0; background: none; box-shadow: none; }
  .faq__art .faq__plate { width: 100%; max-height: none; aspect-ratio: 1 / .9; }
  .faq .r4-rog { display: none; }
}
/* krok 8: pulpit: the sticky stone panel carries the page's paper grain (it was flat cream: a vertical seam beside the text) */
@media (min-width: 901px) {
  .stones__art { background: var(--cream) url(../img/papier.webp) repeat; background-size: 512px; }
}
/* krok 8: Trzy warstwy: the layer's title and its sentence get air between them (descenders touched the next line) */
.trio__grid article h3 { margin-bottom: 10px; }
/* krok 8: pulpit: Kolekcja ends with its words, not 480 px of night (the rock fades out below the text by itself) */
@media (min-width: 901px) { .coll { padding-bottom: 36px; } }

/* R5-4 (RECENZJA-R5-3 błąd 9): on a phone the bar's first appearance as the page opens is instant; it slid in over the
   price already on screen at 0,15–0,3 s. r5-ruch.js adds `.ruch` two frames after it, so later appearances slide */
@media (max-width: 900px) { .js .bar:not(.ruch) { transition: none; } }

/* ---------- R5-5 (RECENZJA-R5-4) ---------- */
/* błąd 4: on a phone the bottom bar stands from the first paint for visitors with scripts (`js` is set in <head>), so it
   never lands on the price already on screen; r5-ruch.js adds `.ruch` once the page has decided, later changes slide */
@media (max-width: 900px) { .js .bar:not(.ruch) { transform: none; transition: none; } }
/* błąd 3: the phone's hero frame is cut from its upper part, not its middle, so the pen's nib stays in the square stage
   (22 %) and on low phones (28 %, the melt shortened to 92 % so the ring's lower beads stay whole). The photo, the
   clean-paper cover, its silhouette and the canvas share --hy and --hm (r5-ruch.js reads them for the cover's melt) */
@media (max-width: 900px) {
  #stage { --hy: 22%; --hm: 84%; }
  #stage > img[data-img^="p_hero"] { object-position: 50% var(--hy); }
  #stage > img[data-img^="p_hero"]:not(.in) { -webkit-mask-image: linear-gradient(180deg, #000 var(--hm), transparent); mask-image: linear-gradient(180deg, #000 var(--hm), transparent); }
  .tusz .hero-tusz { background: linear-gradient(180deg, rgba(242, 233, 222, 0) var(--hm), #f2e9de), #ede4d9 url("../img/r5/hero_tusz_m_papier.jpg") 50% var(--hy) / cover no-repeat;
    -webkit-mask-position: 50% var(--hy); mask-position: 50% var(--hy); }
  .tusz .hero-tusz canvas { object-position: 50% var(--hy); }
}
@media (max-width: 900px) and (max-height: 700px) { #stage { --hy: 28%; --hm: 92%; } }
/* drobne: without scripts the stones and the questions' drawing are empty canvases (the leaders pointed at bare paper);
   their painted pictures stand in, multiplied into the page like the ink engine lays them */
html:not(.js) .stone__plate .ink.main, html:not(.js) .faq__plate .ink.main { background: center / contain no-repeat; mix-blend-mode: multiply; }
/* it24: the stone drawings are landscape and reach the plate's left edge (and the screen's), as the engine shows them */
html:not(.js) .stone__plate .ink.main { background-size: cover; }
html:not(.js) .stone__plate .ink.main[data-art="obs"] { background-image: url(../img/obs_illus.0001cb4b.jpg); }
/* RECENZJA-R5-5 drobne: the same for the Historia intro's hands and the ritual's swallow (400 and 260 px of bare paper) */
html:not(.js) .beat--intro .ink[data-art="hero"], html:not(.js) .r4-cytat .r5-ptak { background: center / contain no-repeat; mix-blend-mode: multiply; }
html:not(.js) .beat--intro .ink[data-art="hero"] { background-image: url(../img/hero_illus.eb30a6e2.jpg); }
html:not(.js) .r4-cytat .r5-ptak { background-image: url(../img/r5/ptak_illus.jpg); }
html:not(.js) .stone__plate .ink.main[data-art="tig"] { background-image: url(../img/tig_illus.ff2cb31e.jpg); }
html:not(.js) .stone__plate .ink.main[data-art="hem"] { background-image: url(../img/hem_illus.9352cd14.jpg); }
html:not(.js) .faq__plate .ink.main[data-art="broken"] { background-image: url(../img/broken_illus.56e003de.jpg); }
html:not(.js) .lupa[data-lupa="obs"] .lupa__dish { background: url(../img/lupa_obs0.85ce1613.webp) 50% 44% / contain no-repeat; background-blend-mode: multiply; }
html:not(.js) .lupa[data-lupa="tig"] .lupa__dish { background: url(../img/lupa_tig0.96026d28.webp) 50% 44% / contain no-repeat; background-blend-mode: multiply; }
html:not(.js) .lupa[data-lupa="hem"] .lupa__dish { background: url(../img/lupa_hem0.080b9032.webp) 50% 44% / contain no-repeat; background-blend-mode: multiply; }

/* R5-7 (G62): the clip's poster comes with the loader a screen before it scrolls in; without scripts it is a background */
/* R5 it12 (G83, RECENZJA-R5-6 krok 5): Chrome bez skryptów zawsze rysuje kontrolki <video>, więc plakat jest tłem figury,
   a samo wideo zostaje niewidoczne (trzyma rozmiar); malowane zdjęcia „Z bliska” bez skryptu pokazują swoje <img> */
html:not(.js) .one__ph:has(video[data-poster="v_skala_p"]) { background: url(../img/r5/v_skala_p.jpg) 50% 100% / cover no-repeat; }
html:not(.js) .one__ph video { visibility: hidden; }
html:not(.js) .ink.paint img { display: block; }

/* ---------- R5-8 (FABLE-R5-M ruchy 4–6) ---------- */
/* 6: the pen rules the night's list, stroke after stroke from the top; the entries never hide */
.r5-lista li:nth-child(2) { --i: 0; } .r5-lista li:nth-child(3) { --i: 1; } .r5-lista li:nth-child(4) { --i: 2; } .r5-lista li:nth-child(5) { --i: 3; }
.r5-lista.r5-kreski li + li::before { transform-origin: 50% 0; scale: 1 0; }
.r5-lista.r5-kreski.r5-in li + li::before { scale: none; transition: scale .45s var(--ease-pen) calc(600ms + var(--i) * 110ms); }
@media (prefers-reduced-motion: reduce) { .r5-lista.r5-kreski li + li::before { scale: none !important; transition: none !important; } }
/* 5: the halo behind the 3 is cut (RECENZJA-R5-5 krok 4: a beige stain behind a "holy" number; G44 stands) */
/* 4: ink spreads in water inside the inner ring and breathes with it (RECENZJA-R5-5 krok 4: Atrament R1, cobalt-indigo so it
   stays blue on the warm paper, low density so the words keep their contrast); it replaces the ring's flat inhale fill */
.breath .r5-oddech { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; pointer-events: none; border-radius: 50%;
  -webkit-clip-path: circle(50%); clip-path: circle(50%); transform: translate(-50%, -50%) scale(.72); transition: transform 4s cubic-bezier(.45, 0, .55, 1); }
.breath.oddech.inhale .r5-oddech { transform: translate(-50%, -50%) scale(1); }
.breath.oddech.inhale i:first-of-type { background: transparent; }
.breath .r5-oddech canvas { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .breath .r5-oddech { display: none; } }

/* 3: Storytelling 012: the swallow flies out of its ink trail toward its sentence. RECENZJA-R5-5 krok 3: the sentence sits in
   the plate's empty right half, beside the bird (it was under the plate, 260 px lower, so a new intention was written off
   screen); the plate's ink is the figure's only ink (no corners, G12); a new intention is written line by line */
.r4-cytat .r5-ptak { aspect-ratio: 3 / 2; }
.r4-cytat:has(.r5-ptak) { display: grid; grid-template-columns: minmax(0, 1fr); padding: 18px 0 20px; }
.r4-cytat:has(.r5-ptak) .r4-cytat__rog { display: none; }
.r4-cytat:has(.r5-ptak) .r5-ptak { grid-area: 1 / 1; }
.r4-cytat:has(.r5-ptak) .intq--lg { grid-area: 1 / 1; z-index: 1; align-self: start; justify-self: end; width: 50%; max-width: none;
  margin: 3% 0 0; text-align: right; }
.r4-cytat:has(.r5-ptak) .r4-cytat__ks { grid-area: 2 / 1; margin: 0 0 0 auto; }
@media (max-width: 900px) {
  .r4-cytat:has(.r5-ptak) { padding: 10px 20px 22px 0; }
  .r4-cytat:has(.r5-ptak) .r5-ptak { width: auto; margin: 0; }
  .r4-cytat:has(.r5-ptak) .intq--lg { width: 52%; margin-top: 2%; }
}
.r4-cytat .intq--lg.swap { transition: opacity .18s ease; }
.r4-cytat .intq--lg.pisze::before, .r4-cytat .intq--lg.pisze::after { content: none; }
.r4-cytat .intq--lg .pl { -webkit-mask-image: var(--bm); mask-image: var(--bm); -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.r4-cytat .intq--lg.pisz-go .pl { -webkit-mask-position: 0 0; mask-position: 0 0;
  transition: -webkit-mask-position .45s var(--ease-pen) calc(var(--l) * 200ms), mask-position .45s var(--ease-pen) calc(var(--l) * 200ms); }

/* 2: „Horyzont czasu”: one band of ink mountains (Atrament S5 | S6 | S5) under the seven eras, behind the cards and
   their drawings, travelling at half their speed; written once from the left. The cord through the eras is now
   redundant: ?exp=nic brings it back; ?exp=horyzont-stoi keeps the band at the cards' speed */
.pan__track { position: relative; }
.r5-horyzont { position: absolute; left: 0; top: 60%; width: 640vw; aspect-ratio: 12.97; height: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 86%, transparent); }
.r5-horyzont canvas { display: block; width: 100%; height: 100%; }
/* R5 it14 (RECENZJA-R5-7 krok 1): no z-index here. With it each card was its own stacking group, `multiply` met a
   transparent backdrop and the WebGL plate's white showed: nine white squares by day (the evening veil hid them). The band
   is the track's first child, so the cards paint over it in DOM order anyway */
#pan .beats, #pan .beat--intro .beat__art, #pan .beat--outro .beat__art { position: relative; }
html:not(.exp-nic) .pan__thread { display: none !important; }
html:not(.js) .r5-horyzont { display: none; }
@media (max-width: 900px) { #pan { overflow-x: clip; } }
/* phone: the cards' drawing panels cover the band completely, so it stays off (no 150 KB for nothing) */
@media (max-width: 900px) { .r5-horyzont { display: none; } }
@media (min-width: 901px) {
  /* R5-5 krok 2: a third layer keeps the band out of the intro's words (--hz-od set in layPan), soft over 160 px */
  .r5-horyzont { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 86%, transparent), linear-gradient(90deg, #000 calc(100% - 320px), transparent), linear-gradient(90deg, transparent var(--hz-od, 0px), #000 calc(var(--hz-od, 0px) + 160px)); -webkit-mask-composite: source-in, source-in;
    mask-image: linear-gradient(transparent, #000 22%, #000 86%, transparent), linear-gradient(90deg, #000 calc(100% - 320px), transparent), linear-gradient(90deg, transparent var(--hz-od, 0px), #000 calc(var(--hz-od, 0px) + 160px)); mask-composite: intersect, intersect; }
}

/* iteracja 10: Cena, the caption under the orbit is written by the pen like the headings (no opacity fade) */
.price__cap { transition: none; }
.price__cap.pisz { -webkit-mask-image: var(--bm); mask-image: var(--bm); -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.price__cap.pisz.pisz-go { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position .7s var(--ease-pen), mask-position .7s var(--ease-pen); }

/* R5 it11 (G81): „Obsydian odbija” – rezerwa woskiem. Tusz z lewej opływa zewnętrzną orbitę (a = 104/240 szerokości tarczy);
   płyta 3,14a × 3,28a, środek koła w (1,71a, 1,64a) – geometria z narzedzia/r5-wosk.py. W środku koła zostaje czysty papier. */
.r4-tarcza .r5-wosk { left: -24.1%; top: -21.07%; width: 136.06%; aspect-ratio: .9573; z-index: 0; }
.r4-tarcza > svg, .r4-tarcza__znak, .r4-tarcza__k { z-index: 1; }
.trio { overflow-x: clip; }
html:not(.js) .r4-tarcza .r5-wosk { background: url(../img/r5/wosk_illus.jpg) center / 100% 100%; mix-blend-mode: multiply; }
/* telefon: tarcza stoi między wstępem a listą warstw, więc tusz gaśnie, zanim dojdzie do słów nad i pod nią */
@media (max-width: 900px) {
  .r4-tarcza { margin: 58px auto 22px; }
  /* G84: na telefonie tusz przychodzi z prawej: lewa strona tarczy, gdzie wisi „Tygrysie oko”, zostaje papierem, a etykieta
     odsuwa się na ≥ 20 px od krawędzi; „Obsydian” kończy się na prawym brzegu koralika, w czystym kole */
  .r4-tarcza .r5-wosk { left: -11.96%; scale: -1 1; }
  .r4-tarcza .k1 b { align-self: flex-end; translate: 22px 0; }
  .r4-tarcza .k2 b { translate: 12px 0; }
  .r4-tarcza .r5-wosk { --m: linear-gradient(180deg, transparent 22px, #000 80px, #000 calc(100% - 98px), transparent calc(100% - 46px)); -webkit-mask-image: var(--m); mask-image: var(--m); }
}

/* R5 it12 (G82, RECENZJA-R5-6 krok 1): bez JS. Tor Historii na pulpicie staje się siatką pod wstępem (bez skryptu nikt go
   nie przesuwa, a `overflow: hidden` chował sześć epok), karty dostają swoje rysunki jako obrazy, a kamienie stoją na
   własnych planszach w kartach jak na telefonie (scena pulpitu zmienia kamienie skryptem, więc bez niego była pusta) */
html:not(.js) #pan .beat__art { z-index: auto; }
/* biel rysunku mnoży się z kolorem toru w samym tle (karta jest osobnym kontekstem, więc `mix-blend-mode` dawał biały kwadrat) */
html:not(.js) #pan .beat__art .ink:not(.gr) { background-position: center; background-size: contain; background-repeat: no-repeat; background-color: var(--cream-2); background-blend-mode: multiply; mix-blend-mode: normal; }
html:not(.js) #pan .beat__art .ink[data-art="ochre"] { background-image: url(../img/ochre_illus.519b037d.jpg); }
html:not(.js) #pan .beat__art .ink[data-art="shells"] { background-image: url(../img/shells_illus.99f86427.jpg); }
html:not(.js) #pan .beat__art .ink[data-art="wedjat"] { background-image: url(../img/wedjat_illus.7a94999f.jpg); }
html:not(.js) #pan .beat__art .ink[data-art="seal"] { background-image: url(../img/seal_illus.293a5177.jpg); }
html:not(.js) #pan .beat__art .ink[data-art="bulla"] { background-image: url(../img/bulla_illus.ceeccf63.jpg); }
html:not(.js) #pan .beat__art .ink[data-art="lunula"] { background-image: url(../img/r5/lunula_lustro_illus.jpg); }
html:not(.js) #pan .beat__art .ink[data-art="ribbon"] { background-image: url(../img/r5/ribbon_lustro_illus.jpg); }
html:not(.js) #pan .beat__art .ink[data-art="pass"] { background-image: url(../img/pass_illus.6f9217ec.jpg); }
@media (min-width: 901px) {
  html:not(.js) .pan { height: auto !important; }
  html:not(.js) .pan__sticky { position: relative; top: 0; height: auto; overflow: visible; }
  html:not(.js) .pan__track { display: block; width: auto; height: auto; padding: 72px clamp(56px, 6vw, 120px) 96px; }
  html:not(.js) .beat--intro, html:not(.js) .beat--outro { height: auto; padding: 0; grid-template-columns: minmax(0, 420px) minmax(0, 500px); }
  html:not(.js) .beat--intro .beat__art, html:not(.js) .beat--outro .beat__art { height: auto; width: 100%; }
  html:not(.js) .beats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: start; gap: 64px clamp(40px, 4vw, 72px); height: auto; padding: 80px 0; }
  html:not(.js) .beats .beat, html:not(.js) .beats .beat:nth-child(n) { width: auto; top: 0; }
  html:not(.js) .stones__art, html:not(.js) .srail { display: none; }
  html:not(.js) .stone .stone__art.m-only { display: block; position: absolute; right: 100%; top: 50%; width: calc(100% * 56 / 44); height: min(80svh, 729px); aspect-ratio: auto; translate: 0 -50%; margin: 0; }
  html:not(.js) .stone :is(.stone__text, .okaz) { position: static; }
  html:not(.js) .stone .stone__plate .ink.main { background-color: #f2e9de; background-blend-mode: multiply; mix-blend-mode: normal; }
}

/* G84 (RECENZJA-R5-6 krok 2), pulpit: „Tygrysie oko” zaczyna się równo z lewym brzegiem koralika, więc leży w czystym kole,
   nie na tuszu (kremowe tło etykiety wycinało w akwareli prostokąt) */
@media (min-width: 901px) {
  .r4-tarcza .k2 b { align-self: flex-start; translate: -28px 0; }
}

/* R5 it12 (G85, RECENZJA-R5-6 krok 4): cała obietnica „…nie dla ozdoby.” nad paskiem także na niskich telefonach.
   360×780: mniejszy sierp (−24 px); 390×664 i 360×640: kadr 3:2 zamiast 4:3 i ciaśniej nad nazwą (−50 px) */
@media (max-width: 380px) and (max-height: 800px) and (min-height: 701px) { .js .pdp__info > .r4-sierp { width: 44px; margin: -24px auto 0; }
  .js .pdp__info > .r4-sierp + .r4-brow { margin-top: 2px; } }
@media (max-width: 900px) and (max-height: 700px) {
  .pdp .stage { aspect-ratio: 3 / 2; }
  .pdp__info > .r4-brow, .js .pdp__info > .r4-sierp + .r4-brow { margin-top: 4px; }
  .pdp__info { padding-top: 10px; }
}

/* R5 it12 (G86, RECENZJA-R5-6 drobne): księżyc cytatu nie stoi sam w pustej ćwiartce planszy jaskółki; w karuzeli Historii
   licznik „n / 7” ma tylko bieżąca karta (licznik następnej zaglądał samotnie przy prawej krawędzi) */
.r4-cytat:has(.r5-ptak) .r4-cytat__ks { display: none; }
@media (max-width: 900px) {
  .js .beats .beat .beat__nav span { transition: opacity .2s ease; }
  .js .beats .beat:not(.cur) .beat__nav span { opacity: 0; }
}

/* ---------- it13: Cena jak Numerologia 103 ---------- */
/* the count is painted over one light ink mist that runs through the orbit: dense left of the sum, a pale tail out past
   the ring's lower right; it spreads with each step (45, 65, 85, 100 %). Not a round halo behind the 3 (G74), not a
   full-width band on the phone (G44); the old dark blot (NU04) only behind ?exp=kleks */
/* no isolation here: the painted 3 is paper + ink and vanishes into the page only by multiply (isolated, it showed a box);
   the mist is the stage's first child, so the orbit and the digits paint over it in DOM order */
.price__stage .r5-mgla { position: absolute; inset: auto; z-index: 0; --ow: min(94vw, 440px); width: calc(var(--ow) * .85); height: auto;
  aspect-ratio: 1.105; left: calc(50% - var(--ow) * .3232); top: calc(50% - var(--ow) * .2577); }
@media (min-width: 901px) { .price__stage .r5-mgla { --ow: var(--orb); } }
html:not(.exp-kleks):not(.exp-chmura) .price__sticky .pw:not(.pw2) { display: none; }
html.exp-kleks .price__stage .r5-mgla { display: none; }
html:not(.js) .price__stage .r5-mgla { display: none; }

/* ---------- it14 (RECENZJA-R5-7) ---------- */
/* krok 1b: the dial's beads are the transparent 3D beads the price already uses; a JPG with `multiply` inside the dial's
   stacking group left a white disc round each bead */
.r4-tarcza__k img { mix-blend-mode: normal; object-fit: contain; border-radius: 0; }
/* krok 2: on a phone the hero frame gives way by the screen's height, not its width: everything else on the first screen
   (header, crescent, name, price, „…nie dla ozdoby.”, bar) takes ~410–456 px, so the frame takes the rest, between
   56vw and a square (≤ 700 px: between 46vw and 4:3). Measured by day at 16 sizes, 320×568 to 414×896 */
@media (max-width: 900px) and (min-height: 701px) { .pdp .stage { aspect-ratio: auto; height: clamp(56vw, calc(100svh - 456px), 100vw); } }
@media (max-width: 900px) and (max-height: 700px) { .pdp .stage { aspect-ratio: auto; height: clamp(46vw, calc(100svh - 410px), 75vw); } }


/* R5 it14 (G90, RECENZJA-R5-7 krok 3): bez JS dłonie w „Jak nosić” są obrazem tła, jak kamienie (bez skryptu płótno nie
   wywoła rysunku). Kremowe tło sticky .ritual__art jest w tej samej grupie, więc multiply działa bez podkładu. */
html:not(.js) #rytual .ritual__art .ink.main[data-art="hands"] { background: url(../img/hands_illus.394501ca.jpg) center / contain no-repeat; mix-blend-mode: multiply; }

/* R5 it14 (G96): podpowiedź lupy i przycisk „Pochyl telefon” dzielą jedno miejsce w podpisie, a ukryty z nich dalej
   trzyma swoją wysokość (podpowiedź ma w HTML tekst „przesuń palcem”, który skrypt podmienia). Dotąd z ruchem stał
   przycisk (44 px), bez ruchu podpowiedź (57 px): kamienie niżej leżały o 10,7 px inaczej, a iPhone po stuknięciu
   w przycisk przesuwał resztę strony. */
.lupa figcaption { display: grid; grid-template-columns: minmax(0, 1fr); }
.lupa figcaption > * { grid-column: 1; }
.lupa__h, .lupa__go { grid-row: 3; align-self: start; }
.lupa__go { justify-self: start; }
.js .lupa__h[hidden], .js .lupa__go[hidden] { display: flex; visibility: hidden; }

/* R5 it14 (G97, RECENZJA-R5-7 drobne): na 401–416 px „rozmiar uniwersalny” w pasku urywał się wielokropkiem. Notka
   ustępuje według szerokości treści własnego pola (tekst 175 px, próg 180), nie ekranu: tak samo przy innym piśmie i przycisku. */
.bar__info { container-type: inline-size; }
@container (max-width: 180px) { .bar__info em span { display: none; } }

/* ---------- it16 (RECENZJA-R5-8) ---------- */
/* G101, krok 2: the frame rule above has no upper height bound any more (it was 701–840): at 412–430 px wide and
   841–875 px high the square frame pushed „…nie dla ozdoby.” under the bar; tall phones still get the square (100vw).
   Where the frame is cut down (701–840), it is cut lower and melts later, as on low phones, so the ring's lower arc
   stays whole and the gallery's dashes sit on paper, not on the beads */
@media (max-width: 900px) and (min-height: 701px) and (max-height: 840px) { #stage { --hy: 28%; --hm: 92%; } }
/* the flattest frames (under ~0.75 of the width: 414×736, 412×760, 390×730) cannot hold both the nib and the whole ring;
   the ring wins, the river comes in from the frame's top edge */
@media (max-width: 900px) and (min-width: 400px) and (min-height: 701px) and (max-height: 775px),
       (max-width: 399px) and (min-height: 701px) and (max-height: 735px) { #stage { --hy: 44%; --hm: 95%; } }
/* drobne: on short phones the price row's top peeked over the bar as half digits; the paper of the bar runs up into a
   short fade, only at the top of the page (scroll-driven, gone after 160 px; without support nothing changes) */
@media (max-width: 900px) {
  .bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--cream)); opacity: 0; }
  @supports (animation-timeline: scroll()) {
    .bar::before { opacity: 1; animation: r5-bar-fade linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
  }
}
@keyframes r5-bar-fade { to { opacity: 0; } }
/* G102, krok 3: without scripts the magnified beads stood on white discs (the stand-in webp is opaque, and
   `background-blend-mode` only mixes the element's own layers); the dish itself is multiplied into the page, as the
   Historia drawings are without scripts (G82) */
html:not(.js) .lupa__dish { mix-blend-mode: multiply; }

/* ---------- it17 (pętla „magia bez kiczu”, Koncept: kolaż astralny) ---------- */
/* G104: behind every era's drawing a pale watercolour moon that waxes with time (a crescent 164 000 years ago, full
   today; narzedzia/r5-ksiezyc.py). It is the drawing's own kind of plate, multiplied like it, so the order of the two
   does not matter; the drawing goes first because the scripts find it as the card's first plate. ?exp=bez-ksiezyca hides it */
html:not(.js) #pan .beat__art .ink.ks { background: center / contain no-repeat; mix-blend-mode: multiply; }
html:not(.js) #pan .beat__art .ink.ks[data-art="ks1"] { background-image: url(../img/r5/ks1_illus.jpg); }
html:not(.js) #pan .beat__art .ink.ks[data-art="ks2"] { background-image: url(../img/r5/ks2_illus.jpg); }
html:not(.js) #pan .beat__art .ink.ks[data-art="ks3"] { background-image: url(../img/r5/ks3_illus.jpg); }
html:not(.js) #pan .beat__art .ink.ks[data-art="ks4"] { background-image: url(../img/r5/ks4_illus.jpg); }
html:not(.js) #pan .beat__art .ink.ks[data-art="ks5"] { background-image: url(../img/r5/ks5_illus.jpg); }
html:not(.js) #pan .beat__art .ink.ks[data-art="ks6"] { background-image: url(../img/r5/ks6_illus.jpg); }
html:not(.js) #pan .beat__art .ink.ks[data-art="ks7"] { background-image: url(../img/r5/ks7_illus.jpg); }
.exp-bez-ksiezyca .beat__art .ink.ks { display: none; }

/* ---------- it18 (RECENZJA-R5-9) ---------- */
/* G107, krok 2: at the top of the page the price row never stands whole above the bar on any phone (measured at 19
   sizes: under it, or cut, 4–47 px showing; on 360×780 and 360×740 the upper halves of „75 zł”). The bar carries the
   price there, so the row's words wait for the first scroll and come in over the next ~50 px, by which point the row
   has cleared the bar; its hairline stays as the divider. Scroll-driven: the first frame and the frame after scripts
   are the same, and without support nothing changes */
@media (max-width: 900px) {
  @supports (animation-timeline: scroll()) {
    .pdp .pricerow > * { animation: r5-pr-in linear both; animation-timeline: scroll(root); animation-range: 4px 56px; }
  }
}
@keyframes r5-pr-in { from { opacity: 0; } }
/* G109, krok 4: the last era card could not snap to the start like the others (the list ran out), so it stood 49 px
   further right and the previous card's „…DZIŚ →” showed on its left; a spacer of the missing width (14 % of the
   list minus the gap) lets it reach the same place */
@media (max-width: 900px) { .beats::after { content: ""; flex: 0 0 calc(14% - 10px); } }
/* G108, krok 3: highlights are an even pale wash under the lower half of the line (narzedzia/r5-zakreslenie.py); the
   flat stand-in without WebGL is the same band, not a full-height pill */
.no-gl mark.hl { background: linear-gradient(transparent 50%, rgba(180, 191, 214, .72) 50%, rgba(180, 191, 214, .72) 90%, transparent 90%);
  padding: 0 .08em; margin: 0 -.08em; border-radius: 0; }

/* ---------- it21 (RECENZJA-R5-10) ---------- */
/* G119, drobne: at the end of the desktop track the previous card stood cut by the screen's left edge („…ny ślad.”);
   the still frame of the track fades into the paper behind it over its first ~60 px (the intro text starts past it) */
@media (min-width: 901px) {
  .js .pan__sticky { -webkit-mask-image: linear-gradient(90deg, transparent, #000 clamp(40px, 4.4vw, 64px));
    mask-image: linear-gradient(90deg, transparent, #000 clamp(40px, 4.4vw, 64px)); }
}

/* it22 (G121, FABLE-R5-11 moment 1b, Edukacja 050): the stone's numeral is a large pale figure standing behind the right end of
   its name ("22" behind LABRADORYT), out of the flow. Phone: 112 px at .14, its lower part behind the name; desktop: 150 px at
   .14 in the text column's top right. Behind the name, so text contrast is unchanged */
/* it23 fix: no isolation on .stone__text (it holds the phone plates, whose multiply must reach the page paper); the
   name and its line sit above the numeral instead */
.stone__text { position: relative; }
.stone .num { z-index: 0; }
.stone__name, .stone .r4-sub { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .stone .num { position: absolute; right: 20px; top: -22px; --nh: 112px; opacity: .14; margin: 0; }
  #obsydian .num { top: 10px; }
}
@media (min-width: 901px) {
  .stone .num { position: absolute; right: clamp(24px, 4.4vw, 64px); top: 0; --nh: 150px; opacity: .14; margin: 0; }
}

/* it22 (G122, FABLE-R5-11 moment 3, Numerologia 103): the orbit's numerals at display size, placed unevenly as in 103
   (7 high right, 5 low right, 1 and 2 on the left, 3 at the top where the beads lead), and only the ones in play: each step
   writes its two digits (420 ms, second 140 ms later), the digits already counted step back, and when the painted 3
   arrives they all fade to .28, their work done. The crescent parks between the digits it counts */
.r4-orbita { overflow: visible; }
.r4-orbita text { font-size: 44px; font-feature-settings: "lnum"; opacity: 0; translate: 0 5px;
  transition: opacity .42s var(--ease-out) var(--nd, 0s), translate .42s var(--ease-out) var(--nd, 0s); }
.price__stage:has(> span:nth-of-type(1).on) .r4-orbita :is(.n7, .n5) text,
.price__stage:has(> span:nth-of-type(2).on) .r4-orbita :is(.n1, .n2) text,
.price__stage:has(> span:nth-of-type(3).on) .r4-orbita .n3 text { opacity: 1; translate: none; }
.price__stage:has(> span:nth-of-type(1).on) .r4-orbita .n5 text,
.price__stage:has(> span:nth-of-type(2).on) .r4-orbita .n2 text { --nd: .14s; }
.price__stage:has(> span:nth-of-type(2).on) .r4-orbita :is(.n7, .n5) text,
.price__stage:has(> span:nth-of-type(3).on) .r4-orbita :is(.n7, .n5, .n1, .n2) text { opacity: .4; translate: none; }
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita text { opacity: .28; translate: none; }
.r4-orbita .mk { transform: rotate(-17.5deg); }
.price__stage:has(> span:nth-of-type(2).on) .r4-orbita .mk { transform: rotate(180deg); }
html:not(.js) .r4-orbita text { opacity: .4; translate: none; }
@media (prefers-reduced-motion: reduce) { .r4-orbita text { transition: none; } }

/* it24 (RECENZJA-R5-11 krok 6): Cena, the orbit's numerals are written by the pen like the headings, not crossfaded: each
   one sits under its own SVG <mask> holding the --bm brush (index.html, #pm7 … #pm3), slid across it in 420 ms (a CSS
   mask on SVG text lands off its box in Chrome when the viewBox starts below zero, so only the 5 showed). The crescent
   carries the sum over the top (past the pale 7 and the 3's empty place); the 1 and the 2 are written once it has passed
   them, so it never crosses a numeral as it appears; for the 3 it moves 70°. */
.js .r4-orbita text { translate: none; transition: opacity .2s linear var(--nd, 0s); }
.js .r4-orbita .pm { transform: translateX(-40px); transition: transform .42s var(--ease-pen) var(--nd, 0s); }
.js .price__stage:has(> span:nth-of-type(1).on) .r4-orbita :is(.m7, .m5) .pm,
.js .price__stage:has(> span:nth-of-type(2).on) .r4-orbita :is(.m7, .m5, .m1, .m2) .pm,
.js .price__stage:has(> span:nth-of-type(3).on) .r4-orbita .pm,
.js .price__stage:has(> span:nth-of-type(4).on) .r4-orbita .pm { transform: none; }
.price__stage:has(> span:nth-of-type(1).on) .r4-orbita .m5 .pm { --nd: .14s; }
.price__stage:has(> span:nth-of-type(2).on) .r4-orbita :is(.n1 text, .m1 .pm) { --nd: .5s; }
.price__stage:has(> span:nth-of-type(2).on) .r4-orbita :is(.n2 text, .m2 .pm) { --nd: .64s; }
.price__stage:has(> span:nth-of-type(2).on) .r4-orbita .mk { transform: rotate(-180deg); transition-duration: .9s; }
.price__stage:has(> span:nth-of-type(3).on) .r4-orbita .mk { transform: rotate(-110deg); transition-duration: .9s; }
/* it26 (R5-12 krok 5): once the painted 3 arrives the crescent has nothing left to count; it moves on to the empty lower
   right of the ring (where the small planets stood), so the upper left keeps only the three beads and the faded 1 and 3 */
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .mk { transform: rotate(45deg); transition-duration: 1.1s; }
@media (prefers-reduced-motion: reduce) { .js .r4-orbita text, .js .r4-orbita .pm { transition: none; } }

/* it25 (FABLE-R5-11 moment 4, Ciemne 136 / 143): „Tusz w nocy”. The page's ink, pale on the night: Atrament R3 at the
   night's right edge, lit, not subtracted (the wash engine's light mode, data-lite #8796ae at .22). It arrives once from
   the screen's edge (1600 ms). It lies under the whole .wrap, so never under text; on the phone it shows through the
   video's fading foot beside the heading, on the desktop past the text column (from about 1290 px on 1440; hidden where
   the column reaches the edge). Without scripts the same blot is a still. */
/* G134: seen on the render it reads as a cloud or smoke in the night sky, not as Concept 136's ink, so it stays behind
   ?exp=noc (off by default), as Fable allowed („do wycięcia bez żalu”) */
.r5-noc { display: none; }
html.exp-noc .coll { position: relative; overflow-x: clip; }
html.exp-noc .coll > .wrap { position: relative; z-index: 1; }
html.exp-noc .r5-noc { display: block; position: absolute; z-index: 0; pointer-events: none; margin: 0; }
.r5-noc canvas { display: block; width: 100%; height: 100%; }
.r5-noc--m { aspect-ratio: 3 / 2; }
.r5-noc--d { aspect-ratio: 2 / 3; }
@media (max-width: 900px) { html.exp-noc .r5-noc--d { display: none; } .r5-noc--m { width: 74vw; left: 46vw; top: calc(125vw + 6px); } }
@media (min-width: 901px) { html.exp-noc .r5-noc--m { display: none; } .r5-noc--d { width: min(18vw, 300px); left: calc(53.5% + 510px); top: 10%; } }
html:not(.js) .r5-noc--m { background: url(../img/r5/noc_lite.webp) 0 0 / 100% 100% no-repeat; }
html:not(.js) .r5-noc--d { background: url(../img/r5/noc_d_lite.webp) 0 0 / 100% 100% no-repeat; }

/* ===== it26 (RECENZJA-R5-12) ===== */
/* krok 1: on the desktop the old stone leaves at once and quickly, the new one is the first drop (no two stones in one place) */
.stones__art .ink.main:not(.on) { transition: opacity .22s cubic-bezier(.23, 1, .32, 1); }
/* krok 5: the leaders now cross the ink to the stone; the dot gets a paper rim so it reads on the dark edge of the stone */
@media (max-width: 900px) { html:not(.exp-tabela) .okaz .facts > div::before { box-shadow: 0 0 0 1.5px var(--cream); } }

/* ===== it28 „Czytelnie” (F4, 3.11): readability without cutting a word =====
   Measured at 390: text set with plain font-size inherits font-size-adjust .5 and reads as a 17 px sans; every label set with the
   `font` shorthand lost it and rendered as 14 px Garamond, i.e. ~11 px of a sans (73 caps labels, the trust row, the toggles).
   Caps labels get 16 px and tracking .12em; the quiet ones go back to sentence case in the reading size; running text 18 px. */
:root { --caps: .12em; --muted: #4a5164; }

/* 1. caps labels that stay caps (Koncept): 14 → 16 px */
.r4-brow, .opt__h, .r4-nr, .stone__for b, .swipehint b, .acc--faq .r4-grupa, .real .strip figcaption, .r5-lista button,
.r4-tarcza__k b, .stone__art figcaption { font-size: 16px; letter-spacing: var(--caps); }
.r4-nr span, .r5-lista button span { letter-spacing: .08em; }
.ann { font-size: 15px; letter-spacing: .1em; }
.seg button, .seg span { font-size: 15px; letter-spacing: .1em; }
.foot__tag span { font-size: 15px; letter-spacing: .14em; }
@media (max-width: 900px) {
  html:not(.exp-tabela) .okaz .facts dt { font-size: 15.5px; letter-spacing: .1em; line-height: 1.3; }
  .bar .btn { font-size: 15px; letter-spacing: .08em; }
}
@media (min-width: 901px) {
  html:not(.exp-tabela) .okaz .facts dt { font-size: 16px; letter-spacing: .12em; }
}

/* 2. quiet labels back to sentence case in the reading size (font-size-adjust restored after the shorthand) */
.trust { font: 400 17px/1.35 var(--serif); font-size-adjust: .5; letter-spacing: 0; text-transform: none; color: var(--text); }
.r4-sub, .trio__grid small { font: italic 400 21px/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--accent); }
.beat__nav button, .next small { font: 400 17px/1.3 var(--serif); font-size-adjust: .5; letter-spacing: 0; text-transform: none; }
.beat__nav span { font-size: 16px; letter-spacing: .06em; }
.lupa figcaption b span { font: italic 400 17px/1.2 var(--serif); letter-spacing: 0; text-transform: none; }
.lupa__h { font-size: 16px; font-size-adjust: .5; }

/* 3. small print up to the reading size */
.pricerow span, .hint, .scta__t, .onesize, .spec dt, .spec dd { font-size: 17px; font-size-adjust: .5; }
.beadrow button { font-size: 16px; font-size-adjust: .5; }
.foot small, .foot li a { font-size: 16px; font-size-adjust: .5; }
.gift small, .mini__t em { font-size: 16px; font-size-adjust: .5; }

/* 4. running text on the phone: 17 → 18 px (facts beside the stones stay 17: the leaders are measured to them) */
@media (max-width: 900px) {
  body { font-size: 18px; }
  .beats .beat > p, .stone__for, .pdp__info .desc, .trio__grid article p, .acc__b p, .more__b p, .rsteps p,
  .acc__b ol.steps li, .lupa__t, .gift__tip { font-size: 18px; line-height: 1.6; }
  .trust { display: grid; gap: 10px; }
  .trust svg { width: 22px; height: 22px; }
}
/* 5. leads stay above the running text: they are set with the shorthand (Garamond 21 px = 17 px sans), body is now 18 */
@media (max-width: 900px) {
  p.lead, .stone__role, .one__lead { font-size: 23px; line-height: 1.38; }
  .real__head p, .rspec { font-size: 18px; line-height: 1.6; }
}
.lupa__go { font-size: 16px; letter-spacing: .1em; }
@media (max-width: 374px) { .beadrow button { font-size: 15px; } .beadrow button + button::before { margin: 0 5px 0 1px; } }

/* it31 (AUDYT-ZDJEC-R5): the day photos left the story (stones, Razem, Rytuał); they live in the gallery and the box */
/* ===== it29: buy box from AUDYT-KONWERSJI-R5 (only facts already on the page and in CLAIMS) ===== */
/* trust row right under the button: product facts first, the statutory 14 days last, as information (CLAIMS #4–#6, #45) */
.trust { margin-top: 18px; padding-top: 0; border-top: 0; }
.hint { margin-top: 18px; }
.fitnote { margin: 10px 0 0; font-size: 17px; font-size-adjust: .5; line-height: 1.45; color: var(--text-2); }
.gift__ship { margin: 14px 0 0; font-size: 17px; font-size-adjust: .5; line-height: 1.45; color: var(--text-2); }
/* the honest word on every visualisation (CLAIMS #3, #69) */
.gal-w { margin: 8px 0 0; text-align: right; font: italic 400 15px/1.3 var(--serif); color: var(--muted); }
/* it30 (R5-13 krok 1): on a phone too it is a plain line on the paper under the photo; over the photo it met the dashes, sank
   under the ink, lay on the beads of short screens and fell to 1.4 : 1 on the night frames */
@media (max-width: 900px) { .gal-w { margin: 10px 0 0; padding: 0 var(--pad, 20px); text-align: left; }
  /* it30: under the gallery it takes no height (the empty paper left of the moon), so the name and the line under it keep
     their place above the bar on every phone (fold) */
  .pdp__media > .gal-w { position: absolute; z-index: 2; left: 0; top: calc(100% + 8px); margin: 0; width: max-content; max-width: 100%; } }
.real .strip figcaption .vz { text-transform: none; letter-spacing: 0; font: italic 400 15px/1.3 var(--serif); color: #b7aa8c; }
.vz-ph { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 2px 8px; border-radius: 2px; background: rgba(242, 233, 222, .86);
  font: italic 400 15px/1.3 var(--serif); color: var(--text-2); }
.real .strip figcaption .vz { display: block; margin-top: 2px; }
.vz-ph { right: 16px; bottom: 14px; padding: 3px 10px; }
/* Z bliska: one honest line under the strip (a second caption line made the strip scroll up and down) */
.gal-w--noc { position: static !important; margin: 10px 0 0 !important; padding: 0 var(--pad, 20px); text-align: left; color: #b7aa8c; }
@media (min-width: 901px) { .gal-w--noc { padding: 0; } }

/* ===== it30 (RECENZJA-R5-13 §8): kroki bez danych klienta ===== */
/* krok 4: the decision zone in the type it28 promised: the bar's price in ink at 17 px, the toggles and the bar's button 16 px */
.bar__info em { font-size: 17px; font-size-adjust: .5; color: var(--text); }
.seg button, .seg span { font-size: 16px; }
@media (max-width: 900px) { .bar .btn { font-size: 16px; } }
/* krok 5: step 01 keeps the height of its longer text, so the steps under it do not jump when the hand changes */
#handBody { min-height: calc(5lh); }
@media (max-width: 389px) { #handBody { min-height: calc(6lh); } }
@media (min-width: 901px) { #handBody { min-height: calc(3lh); } }
/* drobne: the hint's second line starts at the left like the first; the trust row 17 px on the desktop as on a phone */
.hint { text-align: left; }
.trust > * { font-size: 17px; }
/* krok 1 on short phones (no moon, the brow 14 px under the photo): the line goes back into the flow under the photo and the
   photo gives up exactly its height (28 px), so the name and the line under it keep their place above the bar */
@media (max-width: 900px) and (max-height: 700px) {
  .pdp .stage { height: clamp(46vw, calc(100svh - 438px), 75vw); }
  .pdp__media > .gal-w { position: static; margin: 8px 0 0; }
}
/* krok 4: with the 16 px label the bar's button grew and cut the name at 360; tighter tracking there, the arrow goes at 320 */
@media (max-width: 374px) { .bar .btn { letter-spacing: .05em; padding: 0 12px; } }
@media (max-width: 340px) { .bar .btn i { display: none; } }

/* ===== it32 (FABLE-R5-14 moment 1): the decision zone speaks the page's language ===== */
/* 1b: the frame's caption on the paper under the photo (phone), right of the visualisation note and the crescent */
.gal-cap { display: none; }
@media (max-width: 900px) {
  .pdp__media > .gal-cap { display: block; position: absolute; z-index: 2; right: var(--pad, 20px); top: calc(100% + 6px); margin: 0;
    max-width: 150px; text-align: right; font: italic 400 17px/1.22 var(--serif); font-size-adjust: .5; color: var(--text); }
}
@media (max-width: 900px) and (max-height: 700px) { .pdp__media > .gal-cap { top: auto; bottom: 0; max-width: 190px; } }
/* 1a: "Na prezent" is a card from the box, not a grey form: no field, words instead of pills, the note on a torn card */
.gift { margin-top: 14px; padding: 16px 0 2px; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; }
.gifts.on .gift { gap: 14px; }
.gift__h { margin: 0; font: 500 16px/1.3 var(--serif); font-size-adjust: .5; letter-spacing: var(--caps); text-transform: uppercase; color: var(--text-2); }
.gift__occ { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.gift__occ button { min-height: 48px; padding: 0 2px; border: 0; border-radius: 0; background: none; text-align: left; cursor: pointer;
  font: 400 18px/1.25 var(--serif); font-size-adjust: .5; color: var(--text-2); box-shadow: inset 0 -1px 0 var(--line-2);
  transition: box-shadow .2s ease, color .2s ease; }
.gift__occ button[aria-pressed="true"] { background: none; color: var(--text); box-shadow: inset 0 -2px 0 var(--navy); }
.gift__occ button:active { transform: none; }
@media (hover: hover) { .gift__occ button:hover { color: var(--text); } }
.gift__tip { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text); min-height: 3lh; }
.gift__tip.pisz { -webkit-mask-image: var(--bm); mask-image: var(--bm); -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.gift__tip.pisz.pisz-go { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position .52s var(--ease-pen), mask-position .52s var(--ease-pen); }
.gift__note > span:first-child { display: block; margin: 4px 0 10px; font: 500 16px/1.3 var(--serif); font-size-adjust: .5; letter-spacing: var(--caps);
  text-transform: uppercase; color: var(--text-2); }
.gift__card { position: relative; display: block; isolation: isolate; }
.gift__card::before { content: ""; position: absolute; inset: -8px 0; z-index: -1; background: #fbf7f0; rotate: -.8deg;
  -webkit-mask: url(../img/r4/e_tear_mask_top.webp) left top / auto 22px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 40px) no-repeat, url(../img/r4/e_tear_mask.webp) left bottom / auto 22px repeat-x;
  mask: url(../img/r4/e_tear_mask_top.webp) left top / auto 22px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 40px) no-repeat, url(../img/r4/e_tear_mask.webp) left bottom / auto 22px repeat-x; }
.gift__note textarea { min-height: 104px; padding: 16px 18px; border: 0; border-radius: 0; background: transparent; resize: none;
  font: italic 400 19px/1.45 var(--serif); font-size-adjust: .5; color: var(--text); }
.gift__note textarea::placeholder { color: var(--text-2); opacity: 1; }
.gift__note textarea:focus { outline: none; }
.gift__note textarea:focus-visible { outline: 1px solid var(--navy); outline-offset: -4px; }
.gift__lines { gap: 0; }
.gift__lines button { min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: none; text-align: left; cursor: pointer;
  font: italic 400 18px/1.4 var(--serif); font-size-adjust: .5; color: var(--text); text-decoration: underline 1px rgba(29, 36, 54, .4); text-underline-offset: 5px; }
@media (hover: hover) { .gift__lines button:hover { text-decoration-color: var(--text); } }
.gift__foot { display: flex; align-items: center; gap: 14px; }
.gift__foot small { margin: 0; }
.gift__box { flex: none; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; }
.gift__box img { display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: url(../img/r4/e_tear_mask_top.webp) left top / auto 9px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 16px) no-repeat, url(../img/r4/e_tear_mask.webp) left bottom / auto 9px repeat-x;
  mask: url(../img/r4/e_tear_mask_top.webp) left top / auto 9px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 16px) no-repeat, url(../img/r4/e_tear_mask.webp) left bottom / auto 9px repeat-x; }
.gift__box:focus-visible { outline: 1px solid var(--navy); outline-offset: 3px; }
.gift__ship { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .gifts.on .gift > * { animation: lv-gift-in 320ms cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--k, 0) * 40ms); }
  .gift > :nth-child(2) { --k: 1; } .gift > :nth-child(3) { --k: 2; } .gift > :nth-child(4) { --k: 3; }
  .gift > :nth-child(5) { --k: 4; } .gift > :nth-child(6) { --k: 5; } .gift > :nth-child(7) { --k: 6; }
}
@keyframes lv-gift-in { from { opacity: 0; transform: translateY(-6px); } }
/* the bar says the tap will add a gift */
@media (max-width: 900px) { .bar--gift .bar__info em::after { content: " · na prezent"; } }

/* ===== it32 (FABLE-R5-14 moment 3): Pudełko, the contents pointed at on the photo (phone); the desktop keeps its list ===== */
@media (min-width: 901px) { .box__list--top { margin-bottom: 0; } .box__list--bot { margin-top: 0; border-top: 0; } }
.box__kreski { display: none; }
@media (max-width: 900px) {
  #paczka .box__text { position: relative; }
  .box__list .r4-znak { display: none; }
  .box__list { border-top: 0; }
  .box__list li { display: block; padding: 0; border-bottom: 0; }
  .box__list li > span:last-child { display: block; font: 500 17px/1.3 var(--serif); font-size-adjust: .5; color: var(--text); }
  .box__list li > span small { display: block; margin-top: 4px; font: 400 17px/1.42 var(--serif); font-size-adjust: .5; color: var(--text-2); }
  .box__list--top { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 24px 0 10px; }
  .box__list--top li:nth-child(2) { order: -1; }
  .box__list--bot { margin: 0 0 24px; padding-top: 14px; border-top: 1px solid var(--line-2); }
  .box__kreski { display: block; position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
  .box__kreski path { fill: none; stroke: rgba(29, 36, 54, .62); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .box__kreski circle { fill: var(--navy); stroke: #f2e9de; stroke-width: 1.5; }
  .box__kreski.czeka path { stroke-dashoffset: 1; }
  .box__kreski.czeka circle { opacity: 0; }
  .box__kreski.czeka.rysuj path { stroke-dashoffset: 0; transition: stroke-dashoffset .48s var(--ease-pen) .35s; }
  .box__kreski.czeka.rysuj path:nth-of-type(2) { transition-delay: .23s; }
  .box__kreski.czeka.rysuj circle { opacity: 1; transition: opacity .16s ease-out .8s; }
  .box__kreski.czeka.rysuj circle:nth-of-type(2) { transition-delay: .68s; }
}

/* ===== it32 (FABLE-R5-14 moment 2): Razem, the card closes the dial on one string ===== */
.scta > img { display: none; }
.scta__ring { position: relative; display: block; flex: none; width: 64px; height: 64px; }
.scta__ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scta__ring .zylka { fill: none; stroke: rgba(29, 36, 54, .5); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.scta__ring img, .scta__lot { width: 20px; height: 20px; max-width: none; border-radius: 50%; mix-blend-mode: multiply; }
.scta__ring img { position: absolute; translate: -50% -50%; }
.scta__ring .k1 { left: 50%; top: 12.5%; } .scta__ring .k2 { left: 82.5%; top: 68.75%; } .scta__ring .k3 { left: 17.5%; top: 68.75%; }
.scta__ring .k3, .scta__lot.k3 { filter: brightness(.8) contrast(1.35); }
.scta__lot { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; }
.scta__ring.czeka img { opacity: 0; }
.scta__ring.czeka img.jest { opacity: 1; transition: opacity 80ms ease-out; }
.scta__ring.czeka .zylka { stroke-dashoffset: 1; }
.scta__ring.czeka.rysuj .zylka { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ease-pen); }
@media (max-width: 900px) {
  .scta { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; padding: 18px 0; border-radius: 0; background: none;
    box-shadow: none; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
}
@media (min-width: 901px) { .scta { padding-left: 16px; } }

/* it32 (FABLE-R5-14 drobne, AUDYT-KONWERSJI poprawka 5): the one size is a fact, not a select: a plain line on a hairline */
.onesize { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; }
/* it32: the box labels now start at the text edge (no sign beside them), so on the phone they settle from below, not from the left */
@media (max-width: 900px) { .js .box__list > li.r4-o { translate: 0 10px; } }

/* ---------- it33 (RECENZJA-R5-14): kroki 1–5 ---------- */
/* krok 3: the flying beads live in the page (absolute in document space), so a scroll carries them with their cards */
.scta__lot { position: absolute; }
/* krok 4: an even ring — the hematite as drawn (no filter, no grey disc), the string masked under each bead (index.html) */
.scta__ring .k3, .scta__lot.k3 { filter: none; }
/* krok 6 (part): the desktop row speaks the phone's language, hairlines above and below instead of a 1 px frame */
@media (min-width: 901px) {
  .scta { box-shadow: none; border-radius: 0; background: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
}
/* drobne: on 360–380 phones the crescent stands between the note and the caption; the caption keeps to its right and wraps */
@media (max-width: 380px) and (min-height: 701px) { .pdp__media > .gal-cap { max-width: calc(50% - 64px); text-wrap: balance; } }
/* krok 5: the limit sits under the note's card; the box is a labelled link that opens the photo viewer */
.gift__lim { display: block; margin: 0; font-size: 17px; line-height: 1.45; color: var(--text-2); }
.gift__foot { display: block; }
.gift__box { display: inline-flex; align-items: center; gap: 14px; width: auto; height: auto; min-height: 56px; padding: 0; text-align: left; color: var(--text); }
.gift__box img { flex: none; width: 56px; height: 56px; }
.gift__box span { font: italic 400 18px/1.35 var(--serif); font-size-adjust: .5; text-decoration: underline 1px rgba(29, 36, 54, .4); text-underline-offset: 5px; }
@media (hover: hover) { .gift__box:hover span { text-decoration-color: var(--text); } }
.gift > :nth-child(8) { --k: 7; }
/* drobne: at 320 the occasion words keep to one line */
@media (max-width: 340px) { .gift__occ { gap: 0 12px; } .gift__occ button { font-size: 17px; white-space: nowrap; } }


/* ---------- it34 (FABLE-R5-15 „Kino”, krok 2 „Fundament”; G172–G176) ---------- */
/* §5.1 words stand from the first frame: the settle stays only on ornaments (the pen, the footer mark, an overline's rule);
   ?exp=pioro brings back the pen on words */
html.js:not(.exp-pioro) .r4-o:not(.r4-pioro, .foot__znak) { opacity: 1; translate: none; transition: none; }
html.js:not(.exp-pioro) .bp .ln > span { -webkit-mask-image: none !important; mask-image: none !important; }
html.js:not(.exp-pioro) .tag.r4-czeka em { clip-path: none; animation: none; }
html.js:not(.exp-pioro) .price__cap.pisz { -webkit-mask-image: none; mask-image: none; }
/* §5.3 a press answers in 160 ms; the drawer is a sheet, ≤ 320 ms in, 220 ms out */
.btn { transition: background-color 200ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1); }
.btn:active { transform: scale(.97); }
.drawer { transition: transform .22s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .22s; }
.drawer.on { transition: transform .32s cubic-bezier(.32, .72, 0, 1); }

/* ---------- it34b (FABLE-R5-15 §6: czytelność 1, 2, 4, 5 i konwersja 1–7; G177–G182) ---------- */
/* a price never breaks: "75 zł" on one line at 320 too (it broke into "75" / "zł" in the hero) */
.pricerow strong, .one__buy strong, .bar__info em, .scta strong { white-space: nowrap; }
.pricerow strong { flex-shrink: 0; }
/* the separator ends a line instead of starting one ("· hematyt" at 320) */
.beadrow button + button::before { content: none; }
.beadrow button:not(:last-child)::after { content: "·"; display: inline-block; margin: 0 1px 0 8px; color: var(--muted); text-decoration: none; }
@media (max-width: 374px) { .beadrow button:not(:last-child)::after { margin: 0 0 0 5px; } }
/* stone names: tighter caps, so "TYGRYSIE OKO" keeps 20 px from the edge at 320 and at 125 % text */
.stone__name { letter-spacing: .06em; }
.lupa__go { white-space: nowrap; }
/* the finale on a phone: price above, full-width filled button (one rule with the purchase zone) */
@media (max-width: 900px) { .one__buy { display: grid; justify-items: start; gap: 14px; } .one__buy .btn { width: 100%; flex: none; } }
.coll .btn { background: var(--on-dark); color: var(--navy); box-shadow: none; }
.coll .btn::before { background: var(--navy); opacity: .1; }
/* "Zdjęcia to wizualizacje": 17 px in ink like the frame caption beside it; on the night in its cream */
.gal-w { font-size: 17px; font-size-adjust: .5; color: var(--text); }
.gal-w--noc { color: var(--on-dark); }
.hint { min-height: 44px; }
.foot small { font-size: 17px; }
/* "wizualizacja" on the box photo: no light box, a plain line on the paper under the photo */
.box__pouch--ph .vz-ph { top: calc(100% + 12px); bottom: auto; right: 0; padding: 0; border-radius: 0; background: none; font-size: 16px; font-size-adjust: .5; color: var(--text-2); }
@media (max-width: 900px) { .box__pouch--ph .vz-ph { right: var(--pad, 20px); } }
/* the notes about tradition and the doctor at 17 px on a desktop too */
@media (min-width: 901px) { .trio__note, #pytania .fine { font-size: 17px; font-size-adjust: .5; } }
/* the announcement in one line on narrow phones: lower case is a third narrower than spaced capitals */
@media (max-width: 360px) { .ann { text-transform: none; letter-spacing: .02em; white-space: nowrap; } }
/* the bar names the size only where it fits whole */
@media (max-width: 459px) { .bar__info em span { display: none; } }
/* the gift panel: optional fields say so; from a gift ad the panel stands open from the first frame, without its entrance */
.gift__opt { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.gift__zwrot { margin-top: -4px; }
.dla-prezent .gifts.on .gift > * { animation: none; }
/* a link that leaves the page says so with its arrow */
.next--out i svg { width: 18px; height: 18px; }
/* the magnifier on narrow phones (≤ 383): the bead above, its words across the full width; beside it the text ran
   2–3 words a line in 128 px and "POCHYL TELEFON" did not fit (W1-CZYT P1-4) */
@media (max-width: 383px) { .lupa { grid-template-columns: minmax(0, 1fr); gap: 12px; } .lupa__dish { width: 132px; } }
/* the box photo on a desktop bleeds to the screen's edge: its label keeps the page's margin */
@media (min-width: 901px) { .box__pouch--ph .vz-ph { right: 24px; } }
.gift__opt { white-space: nowrap; }

/* ---------- it35 S-D „Cena za kciukiem” (G197) ---------- */
/* the thumb draws the orbit (inline --r4-kat), never the 1.4 s clock */
.price__stage.sd .r4-orbita { animation: none !important; }
/* the stones land only at the end of the thumb's path (.92), then quickly one after another */
.price__stage.sd:not(.sd-kr) .r4-orbita .kr { opacity: 0 !important; translate: 0 -8px !important; transition: none !important; }
.price__stage.sd.sd-kr:has(> span:nth-of-type(4).on) .r4-orbita .kr { --kd: 0s; }
.price__stage.sd.sd-kr:has(> span:nth-of-type(4).on) .r4-orbita .kr--tig { --kd: .08s; }
.price__stage.sd.sd-kr:has(> span:nth-of-type(4).on) .r4-orbita .kr--hem { --kd: .16s; }
/* T6: the drawing of the box rises 40 px towards the phases (ink stays ≥ 24 px under the dots) */
@media (max-width: 900px) { #paczka > .box__art { margin-top: -40px; } }

/* it35b: in the thumb version the caption reads above the orbit on a phone, under „Nawet cena.” (it lay under the bar
   during every step but the last); the timed version (?exp=cena-czas) keeps it under the dots' row as before */
@media (max-width: 900px) {
  html.js:not(.exp-cena-czas) .price__sticky > .r4-nr { order: 1; }
  html.js:not(.exp-cena-czas) .price__sticky > .price__h { order: 2; }
  html.js:not(.exp-cena-czas) .price__sticky > .price__cap { order: 3; margin-top: 6px; }
  html.js:not(.exp-cena-czas) .price__sticky > .price__stage { order: 4; }
  html.js:not(.exp-cena-czas) .price__sticky > .price__dots { order: 5; }
}

/* ---------- it36 „Kciuk wybiera, pióro kończy” (W2 panel on it35b, G198–G203) ---------- */
/* the old numeral leaves in 140 ms, before the pen starts the next one (it lingered .35 s under it: two numerals at once) */
.price__stage.sd > span { transition: opacity .14s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .14s; }
.price__stage.sd > span.on { transition: opacity .14s cubic-bezier(.23, 1, .32, 1); }
/* the orbit is drawn once, in time (600 ms), when the ring's top passes 40 px above the bar */
.price__stage.sd.sd-orb .r4-orbita { animation: r4-zegar .6s cubic-bezier(.23, 1, .32, 1) both !important; }
/* the orbit's crescent and numerals keep pace with a step of ~700 ms (they took up to 1.1 s and came after the step) */
.price__stage.sd .r4-orbita .mk { transition-duration: .3s !important; transition-timing-function: cubic-bezier(.23, 1, .32, 1) !important; }
.price__stage.sd .r4-orbita .pm { transition-duration: .24s; transition-timing-function: cubic-bezier(.23, 1, .32, 1); }
.price__stage.sd .r4-orbita * { --nd: 0s !important; }
.price__stage.sd .r4-orbita :is(.n5, .m5, .n2, .m2) * { --nd: .06s !important; }
/* the stones travel up the inner ring like beads on a line (rotation about the ring's centre), larger (22 units) */
.r4-orbita .kr { transform-box: fill-box; translate: none; rotate: -45deg; }
/* the pivot is the ring's centre (0, 0) measured from each stone's own box: view-box places that box differently per engine */
.r4-orbita .kr--obs { transform-origin: -59.4px 60.3px; }
.r4-orbita .kr--tig { transform-origin: -71px 36.9px; }
.r4-orbita .kr--hem { transform-origin: -75px 11px; }
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .kr { rotate: none;
  transition: opacity .3s var(--ease-out) var(--kd, .9s), rotate .7s cubic-bezier(.23, 1, .32, 1) var(--kd, .9s); }
.price__stage.sd:not(.sd-kr) .r4-orbita .kr { translate: none !important; rotate: -45deg !important; }
/* the front bead (hematite) is pulled first, the others follow, so they never run into each other on the way */
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .kr--hem { --kd: .9s; }
.price__stage:has(> span:nth-of-type(4).on) .r4-orbita .kr--obs { --kd: 1.08s; }
.price__stage.sd.sd-kr:has(> span:nth-of-type(4).on) .r4-orbita .kr--hem { --kd: 0s; }
.price__stage.sd.sd-kr:has(> span:nth-of-type(4).on) .r4-orbita .kr--tig { --kd: .09s; }
.price__stage.sd.sd-kr:has(> span:nth-of-type(4).on) .r4-orbita .kr--obs { --kd: .18s; }
@media (prefers-reduced-motion: reduce) { .r4-orbita .kr { rotate: none !important; } }
/* the sum, readable in every state (the end, reduced motion, a return visit): parts not reached yet at 5:1 */
.price__rach { position: relative; z-index: 2; margin: 10px 0 0; font: 400 17px/1.45 var(--serif); color: var(--text);
  text-align: center; font-feature-settings: "lnum" 1; }
.price__rach span { white-space: nowrap; transition: color .3s ease; }
.price__rach i { font-style: normal; }
.price__rach .przed { color: #5d6170; }
@media (max-width: 900px) { html.js:not(.exp-cena-czas) .price__sticky > .price__rach { order: 6; } }
@media (min-width: 901px) { .price__rach { grid-column: 1; grid-row: 5; text-align: left; margin: 12px 0 0; } }
/* ---------- it37 „Szlif po W3” ---------- */
/* G209: „nie dla ozdoby.” stands whole from the first frame (the 3 s fallback pen wrote it late on every load); ?exp=pioro keeps the pen */
html.js:not(.exp-pioro) .pdp .tag em { clip-path: none !important; animation: none !important; }
/* G213: on the desktop the trust row under the button reads at the description's size (it was 14 px) */
@media (min-width: 901px) { .pdp .trust li { font-size: 17px; } }
/* G214: at 320 the longest intention stays inside its column (it ran 9 px from the screen's edge) */
@media (max-width: 359px) { .seg--int span { letter-spacing: .06em; padding-right: 0; } }
/* G215: at 320 the three stones under the price stay on one line (hematyt dropped to a second line with a 48 px gap) */
@media (max-width: 359px) {
  .beadrow { column-gap: 3px; } .beadrow__i { margin-right: 3px; } .beadrow__i img { width: 18px; height: 18px; }
  .beadrow button:not(:last-child)::after { margin: 0 0 0 3px; }
}
/* G216: in the pouch the photo sits by the product's name, not in the middle of a tall gift row */
.dr-item img { align-self: start; }
/* the page's gift panel rule (.gift border-top) leaked into the pouch's "Na prezent" line: no rule there */
.dr-item .gift { margin-top: 3px; padding: 0; border-top: 0; }
/* G222 (R5-17 drobne): the hero's crescent never covers „Zdjęcia to wizualizacje”: where the row has room (≥ 375 px) it sits
   right after the words, before „W tuszu”; on narrower phones it goes, as on short ones (the name moves up 28 px) */
@media (max-width: 900px) and (min-height: 701px) { .js .pdp__info > .r4-sierp { margin-left: 186px; margin-right: 0; } }
@media (max-width: 374px) and (min-height: 701px) {
  .js .pdp__info > .r4-sierp { display: none; }
  .pdp__info > .r4-brow, .js .pdp__info > .r4-sierp + .r4-brow { margin-top: 14px; }
}
/* G223 (R5-15–R5-17 krok): on the desktop Pudełko's contents read like the stones' facts (a small-caps label, 17 px words),
   without icons in rings, the last shop pattern on the desktop; texts 1:1 */
@media (min-width: 901px) {
  .box__list .r4-znak { display: none; }
  .box__list li { display: block; padding: 16px 0 15px; }
  .box__list li > span:last-child { display: block; font: 500 14px/1.35 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
  .box__list li > span:last-child small { display: block; margin-top: 7px; font: 400 17px/1.42 var(--serif); font-size-adjust: .5; letter-spacing: 0; text-transform: none; color: var(--text-2); }
}

/* ---------- it39 (FABLE-R5-15 §3.1, S-A „Nawlekanie”): A by default on the phone (W2: AD + ruch, G226); B ?exp=stawianie, the old ring with the flight ?exp=lot ----------
   The card's ring becomes the bracelet itself: 30 beads (obsidian, hematite, tiger's eye in turn, as in the hero picture)
   on one string, Ø 168 px beside the name and price; under 375 px the bracelet stands above them. No JS, reduced motion,
   desktop: the bracelet (or the desktop's small ring) stands complete */
.scta__ring > .scta__nic { display: none; }
@media (max-width: 900px) {
  html:not(.exp-lot) .scta { grid-template-columns: 168px minmax(0, 1fr); column-gap: 18px; row-gap: 0; align-items: center; }
  html:not(.exp-lot) .scta__ring { grid-column: 1; grid-row: 1 / span 2; width: 168px; height: 168px; }
  html:not(.exp-lot) .scta__ring > :not(.scta__nic) { display: none; }
  html:not(.exp-lot) .scta__nic { display: block; width: 100%; height: 100%; overflow: visible; }
  html:not(.exp-lot) .scta__t { grid-column: 2; grid-row: 1; align-self: end; }
  html:not(.exp-lot) .scta strong { grid-column: 2; grid-row: 2; align-self: start; margin-top: 10px; }
  html:not(.exp-lot) .scta .btn { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
  .scta__nic .nic { fill: none; stroke: rgba(29, 36, 54, .78); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .scta__nic { filter: drop-shadow(0 2px 1.5px rgba(29, 36, 54, .2)); }
  /* W2 (AD + ruch): before the threshold the first bead lies at six o'clock on 12 px of loose string; the loose end is
     the pen (a straight 28 px tail along the tangent), the circle is made by the beads */
  .scta__nic .ogon { display: none; }
  .scta__nic .ogon line { stroke: rgba(29, 36, 54, .78); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  html:not(.exp-lot):not(.exp-stawianie) .nawlecz .scta__nic .ogon { display: inline; }
  html:not(.exp-lot):not(.exp-stawianie) .nawlecz .scta__nic .ogon line { stroke-dashoffset: .571; }
  .nawlecz .scta__nic .kz { opacity: 0; }
  html:not(.exp-lot):not(.exp-stawianie) .nawlecz .scta__nic .kz.k0 { opacity: 1; }
  html:not(.exp-lot):not(.exp-stawianie) .nawlecz .scta__nic .nic { stroke-dashoffset: 1; }
}
/* the name stays on one line beside the bracelet down to 340 px: Ø 152 on 375–389, Ø 144 on 340–374; below, it stands above */
@media (max-width: 389px) {
  html:not(.exp-lot) .scta { grid-template-columns: 152px minmax(0, 1fr); column-gap: 16px; }
  html:not(.exp-lot) .scta__ring { width: 152px; height: 152px; }
}
@media (max-width: 374px) {
  html:not(.exp-lot) .scta { grid-template-columns: 144px minmax(0, 1fr); }
  html:not(.exp-lot) .scta__ring { width: 144px; height: 144px; }
}
@media (max-width: 339px) {
  html:not(.exp-lot) .scta { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  html:not(.exp-lot) .scta__ring { width: 168px; height: 168px; }
  html:not(.exp-lot) .scta__ring { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-bottom: 16px; }
  html:not(.exp-lot) .scta__t { grid-column: 1; grid-row: 2; align-self: center; }
  html:not(.exp-lot) .scta strong { grid-column: 2; grid-row: 2; align-self: center; margin-top: 0; }
}
/* ---------- it41 (R5-18 „wow 9,5”, panel W2-DUZA-AD: duża domyślnie, G231; mała ?exp=mala): the bracelet as large as
   the card, the name and price inside it. The same 30 beads and the same stringing (G226/G228), only the ring spans the
   card's width (≤ 360 px, beads 30–33 px, so the stones read as stones) and the offer stands still in its middle from
   the first frame, like a card on a jeweller's tray; the button below. Phone only ---------- */
@media (max-width: 900px) {
  html:not(.exp-lot):not(.exp-mala) .scta { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 0; column-gap: 0; justify-items: center; }
  html:not(.exp-lot):not(.exp-mala) .scta__ring { grid-column: 1; grid-row: 1 / span 2; justify-self: center; width: min(100%, 360px); height: auto; aspect-ratio: 1; margin: 0; }
  html:not(.exp-lot):not(.exp-mala) .scta__t { grid-column: 1; grid-row: 1; align-self: end; justify-self: center; text-align: center; text-wrap: balance; max-width: 66%; position: relative; }
  html:not(.exp-lot):not(.exp-mala) .scta__t b { display: block; font-size: 22px; margin-bottom: 6px; }
  html:not(.exp-lot):not(.exp-mala) .scta strong { grid-column: 1; grid-row: 2; align-self: start; justify-self: center; margin: 12px 0 0; font-size: 36px; position: relative; }
  html:not(.exp-lot):not(.exp-mala) .scta .btn { grid-column: 1; grid-row: 3; justify-self: stretch; margin-top: 24px; }
  html:not(.exp-lot):not(.exp-mala) .scta__nic .nic, html:not(.exp-lot):not(.exp-mala) .scta__nic .ogon line { stroke-width: .8; }
  html:not(.exp-lot):not(.exp-mala) .scta__nic { filter: drop-shadow(0 3px 3px rgba(29, 36, 54, .2)); }
}
/* ---------- it42 (FABLE-R5-15 P2-1 + §3.5 S-E „Zapada noc”): on the phone the Z bliska index stands in the flow under
   the lead, as the strip's table of contents (one column, rows ≥ 44 px, reading order = the reader's; two columns broke
   „W / DŁONIACH” and „NA CO / DZIEŃ” on 360–390), instead of lying on the tiger's-eye sphere before „06 Z bliska”; the sphere stays alone as the opening
   plane. Old placement ?exp=spis-na-kuli ---------- */
@media (max-width: 900px) {
  html:not(.exp-spis-na-kuli) .r5-lista { position: relative; left: auto; top: auto; z-index: 1; width: auto; max-width: none;
    display: grid; grid-template-columns: minmax(0, 1fr); margin: 28px 0 24px;
    border-top: 1px solid rgba(184, 149, 79, .32); }
  html:not(.exp-spis-na-kuli) .r5-lista li { border-bottom: 1px solid rgba(184, 149, 79, .32); }
  html:not(.exp-spis-na-kuli) .r5-lista li + li::before { display: none; }
  html:not(.exp-spis-na-kuli) .r5-lista button { width: 100%; min-height: 44px; padding: 6px 0; align-items: center; }
}
/* without the index on it, the sphere's place above „06” closes up: the number starts in the sphere's dark, fading
   lowest fifth (its top −40 px, its height 78 vw), not after it */
@media (max-width: 900px) { html:not(.exp-spis-na-kuli) .real .real__head { padding-top: max(calc(62vw - 30px), 200px); } }
/* S-E: the sphere lags the paper by up to 30 px while the night's edge soaks in (95 % → 55 % of the screen), so it reads
   as a second plane; both ways, none with reduced motion. `translate`, so it never fights the arrival's `transform` */
.r5-oko { translate: 0 var(--oko-y, 0px); }
@media (prefers-reduced-motion: reduce) { .r5-oko { translate: none; } }
/* ---------- it43 (FABLE-R5-15 §3.5 „Pasek nocy”, a form for the user to choose, so only behind flags): A ?exp=pasek-noc —
   the bar turns night once, at the night's edge above Z bliska, and stays night to the end (also over Pytania, a page
   lying on the night); B ?exp=pasek-sekcja — the bar takes the tone of the section under its line. Night bar: #050b11,
   name and price cream, the button full cream with navy letters (as Kolekcja's), same words, same place ---------- */
@media (max-width: 900px) {
  .bar.noc { background: #050b11; border-top-color: rgba(242, 233, 222, .14); }
  .bar.noc .bar__info > span, .bar.noc .bar__info em { color: #f2e9de; }
  .bar.noc .btn { background: var(--on-dark); color: var(--navy); }
  .bar.noc .btn::before { background: var(--navy); opacity: .1; }
  html.exp-pasek-noc .bar.ruch, html.exp-pasek-sekcja .bar.ruch { transition: transform .24s var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
  html.exp-pasek-noc .bar .btn, html.exp-pasek-sekcja .bar .btn { transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
  html.exp-pasek-noc .bar__info > span, html.exp-pasek-noc .bar__info em,
  html.exp-pasek-sekcja .bar__info > span, html.exp-pasek-sekcja .bar__info em { transition: color 160ms ease; }
  .bar.skok, .bar.skok .btn, .bar.skok .bar__info > span, .bar.skok .bar__info em { transition-duration: 0s !important; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .bar.noc, .bar.noc .btn, .bar.noc .bar__info > span, .bar.noc .bar__info em { transition-duration: 0s !important; }
}
/* ---------- it44 (FABLE-R5-15 T8, T10) ----------
   T8: Z bliska's frames are cut clean like a contact sheet of prints: no radius, no outline, 6 px of night between them
   (rounded framed cards read as a shop carousel); the next frame still peeks ≥ 24 px. Under the strip one „Dalej:
   Pytania ↓” in cream (≥ 7 : 1 on the night), 18 px, ≥ 44 px to tap: delivery, returns and the gift wait there */
html .real .strip figure .ph, html .real .strip figure:first-child .ph { border-radius: 0 !important; outline: none; }
.real .strip figure { padding: 0; }
@media (max-width: 900px) { .real .strip { gap: 6px; } }
.real__dalej { margin: 20px 0 0; }
.real__dalej a span { margin-left: .35em; }
.real__dalej a { display: inline-flex; align-items: center; min-height: 44px; font: 400 18px/1.3 var(--serif); color: #f2e9de;
  text-decoration: underline; text-decoration-color: rgba(242, 233, 222, .4); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.real__dalej a:focus-visible { outline: 1px solid var(--bronze); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .real__dalej a:hover { text-decoration-color: currentColor; } }
/* T10: night into night needs no torn edge: the band of black between the collection's last line and the footer's mark
   244 → 72 px on the phone (96 on the desktop); the footer's macro of beads lags the page by ≤ 12 % (r5-ruch.js) and the
   mark settles once like an end title (opacity 200 ms) */
@media (max-width: 900px) {
  .coll { padding-bottom: 24px; }
  .coll > .ink.edge.bt { display: none; }
  .foot .wrap { padding-top: 48px; }
}
@media (min-width: 901px) { .foot .wrap { padding-top: 60px; } }
.foot__bg img { translate: 0 var(--foot-y, 0px); }
.js .foot__mark.czeka { opacity: 0; }
.foot__mark { transition: opacity 200ms ease; }
@media (prefers-reduced-motion: reduce) { .foot__bg img { translate: none; } .js .foot__mark.czeka { opacity: 1; } }

/* ===== it45 (R5-19 krok 3): on short phones (≤ 700 px tall) the whole ring of the hero photo stands above the line
   „Zdjęcia to wizualizacje” (four rounds it was cut by it). The photo gets 14 px more (100svh − 424), the brow and the name
   give back 12 px (around the brow; the name keeps its air to the line under it), so „nie dla ozdoby.” stands ≥ 15 px above the bar (2 px lower than before); the frame goes lower (--hy 41 %): the ring
   with 4–17 px of paper under it on 320–390, the nib's tip at the top edge ===== */
@media (max-width: 900px) and (max-height: 700px) {
  .pdp .stage { height: clamp(46vw, calc(100svh - 424px), 75vw); }
  #stage { --hy: 41%; }
  .pdp .r4-brow { margin-bottom: 8px; }
  .pdp__info > .r4-brow, .js .pdp__info > .r4-sierp + .r4-brow { margin-top: 0; }
  .pdp__media > .gal-w { margin-top: 6px; }
}

/* ===== it46 (R5-19 „wow pulpitu 9,5”, plan krok 7; po panelu W2-DUZA-PULPIT-AD domyślnie, G242–G243; stary wiersz z lotem ?exp=mala-pulpit):
   the desktop card strings the phone's large bracelet. The ring (320 px) holds the name, the stones and the price still in
   its middle from the first frame; the button stands to its right, on the ring's centre line, so the card stays a row
   (≈ 330 px tall, not a column). Same 30 beads, the same stringing, start and knot at 12; no flight from the thread above
   (the beads are made by the card). Reduced motion, no JS: the bracelet stands complete ===== */
@media (min-width: 901px) {
  html:not(.exp-mala-pulpit) .scta { display: grid; grid-template-columns: 320px auto; grid-template-rows: auto auto; column-gap: 56px; row-gap: 0;
    justify-content: center; align-items: center; padding: 28px 0; }
  html:not(.exp-mala-pulpit) .scta__ring { grid-column: 1; grid-row: 1 / span 2; width: 320px; height: 320px; margin: 0; }
  html:not(.exp-mala-pulpit) .scta__ring > :not(.scta__nic) { display: none; }
  html:not(.exp-mala-pulpit) .scta__nic { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(29, 36, 54, .2)); }
  html:not(.exp-mala-pulpit) .scta__t { grid-column: 1; grid-row: 1; align-self: end; justify-self: center; text-align: center; text-wrap: balance; max-width: 62%; position: relative; }
  html:not(.exp-mala-pulpit) .scta__t b { display: block; font-size: 24px; margin-bottom: 6px; }
  html:not(.exp-mala-pulpit) .scta strong { grid-column: 1; grid-row: 2; align-self: start; justify-self: center; margin: 12px 0 0; font-size: 38px; position: relative; }
  html:not(.exp-mala-pulpit) .scta .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  html:not(.exp-mala-pulpit) .scta__nic .nic { fill: none; stroke: rgba(29, 36, 54, .78); stroke-width: .8; stroke-dasharray: 1; stroke-dashoffset: 0; }
  html:not(.exp-mala-pulpit) .scta__nic .ogon { display: none; }
  html:not(.exp-mala-pulpit) .scta__nic .ogon line { stroke: rgba(29, 36, 54, .78); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  html:not(.exp-mala-pulpit) .nawlecz .scta__nic .ogon { display: inline; }
  html:not(.exp-mala-pulpit) .nawlecz .scta__nic .ogon line { stroke-dashoffset: .571; }
  html:not(.exp-mala-pulpit) .nawlecz .scta__nic .kz { opacity: 0; }
  html:not(.exp-mala-pulpit) .nawlecz .scta__nic .kz.k0 { opacity: 1; }
  html:not(.exp-mala-pulpit) .nawlecz .scta__nic .nic { stroke-dashoffset: 1; }
}

/* it46b (W2-DUZA-PULPIT-AD, G243): the large card is the desktop default (the row with the small ring and the flight
   ?exp=mala-pulpit). The card hangs on the text column: the button's left edge on the column's edge (the column starts
   at 50 % + half the wrap's gap: 548 / 685 / 731 / 770 px on 1024 / 1280 / 1366 / 1440), the ring 56 px before it; a
   longer gift label grows the button to the right only; the hairlines run from the ring's left edge to the button's
   right. The button stands on the price's centre line (row 2), so „75 zł” and „Dodaj do sakiewki” read as one line */
@media (min-width: 901px) {
  html:not(.exp-mala-pulpit) .scta { justify-self: start; width: max-content; margin-left: calc(50% + clamp(56px, 7vw, 120px) / 2 - 376px); }
  html:not(.exp-mala-pulpit) .scta .btn { grid-row: 2; align-self: start; justify-self: start; margin-top: 4px; }
}

/* ---------- it47 · Orientacja (FABLE-R5-15 §5.2, G244–G246): rozdział w nagłówku telefonu i spis jako arkusz ---------- */
.rozdz { display: none; }
@media (max-width: 900px) {
  /* the empty left column of the phone header: „3 z 8 ▾” over the chapter's name, like a chapter plate in miniature */
  .rozdz:not([hidden]) { grid-column: 1; justify-self: start; display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 3px; min-width: 44px; min-height: 44px; max-width: 100%; margin: 0; padding: 4px 0; /* the grid's own 12 px gap keeps it off the mark */
    border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: opacity .2s var(--ease-out), transform .16s var(--ease-out), visibility 0s linear 0s; }
  .rozdz.off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease-out), visibility 0s linear .2s; }
  .rozdz:active { transform: scale(.97); }
  .rozdz:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
  .rozdz__n { display: flex; align-items: center; gap: 0; font: 500 15px/1.1 var(--serif); letter-spacing: .02em; font-feature-settings: "lnum" 1; white-space: nowrap; }
  .rozdz__n svg { flex: none; width: 12px; height: 7px; margin: 1px 0 0 7px; } /* no flex gap: it split „4 | z 8” unevenly */
  .rozdz__t { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; padding-right: 4px; font: italic 400 17px/1.1 var(--serif); } /* room for the italic overhang (the „ć” of „nosić”) inside the clip */
  .rozdz--nr .rozdz__t { display: none; }
  .rozdz--nr .rozdz__n { font-size: 17px; }
}

/* the sheet: paper from below, hairlines, small radius; every row ≥ 56 px, the questions' groups ≥ 44 px */
html.spis-on { overflow: hidden; } /* it51: only the root; a hidden body becomes its own scroller and takes the sticky header away with it */
.spis { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - 24px); margin: 0; padding: 0;
  border: 0; border-radius: 12px 12px 0 0; background: #f2e9de; color: var(--text); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 -1px 0 rgba(29, 36, 54, .1); transform: translateY(100%); transition: transform .2s cubic-bezier(.32, .72, 0, 1); }
.spis.on { transform: none; transition-duration: .24s; }
.spis::backdrop { background: rgba(19, 27, 48, 0); transition: background .2s ease; }
.spis.on::backdrop { background: rgba(19, 27, 48, .45); }
.spis__in { padding: 6px 20px max(20px, env(safe-area-inset-bottom)); }
.spis__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.spis__h h2 { margin: 0; font: 500 15px/1.2 var(--serif); letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent); }
.spis__x { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.spis__x svg { width: 14px; height: 14px; }
.spis__l, .spis__p { list-style: none; margin: 0; padding: 0; }
.spis__l > li { border-top: 1px solid var(--line); }
.spis__l > li > a { display: grid; grid-template-columns: 26px 28px 1fr; column-gap: 12px; align-items: center; min-height: 56px; color: inherit; text-decoration: none; }
.spis__n { font: 500 15px/1 var(--serif); letter-spacing: .08em; font-feature-settings: "lnum" 1; }
.spis__l > li > a > i { height: 1px; background: currentColor; opacity: .55; }
.spis__l b { position: relative; justify-self: start; font: 400 21px/1.15 var(--serif); }
.spis__pioro { position: absolute; left: -2px; right: -4px; bottom: -7px; width: calc(100% + 6px); height: 8px; overflow: visible; opacity: 0; }
.spis__pioro path { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spis [aria-current] .spis__pioro { opacity: 1; }
.spis.on [aria-current] .spis__pioro path { stroke-dashoffset: 0; transition: stroke-dashoffset .24s var(--ease-pen) .12s; }
.spis [aria-current] > i { height: 1.5px; opacity: 1; }
.spis__p { margin: -6px 0 8px 78px; }
.spis__p a { display: flex; align-items: center; min-height: 44px; font: italic 400 17px/1.2 var(--serif); color: inherit; text-decoration: none; }
.spis a:focus-visible, .spis__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.spis a:active { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .spis, .spis.on, .spis::backdrop, .spis.on::backdrop { transition: none; }
  .spis [aria-current] .spis__pioro path { stroke-dashoffset: 0; transition: none; }
}

/* it48 (R5-20 błąd 1, G247): on short screens (≤ 700 px) the whole list fits: rows 48 px, heading 48 px (616 px window on
   360 × 640 holds ~600 px). Shorter still (iPhone SE with bars, ~553 px) the sheet scrolls and its lower edge fades while
   more is below, so a hairline never reads as the end of the list. */
@media (max-height: 700px) {
  .spis__h { min-height: 48px; }
  .spis__l > li > a { min-height: 48px; }
  .spis__p { margin: -4px 0 4px 78px; }
}
.spis__fade { position: sticky; bottom: 0; height: 56px; margin-top: -56px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(242, 233, 222, 0), #f2e9de 80%); transition: opacity .15s ease; }
.spis.dalej .spis__fade { opacity: 1; } /* paper over the last rows, never the page through the sheet */

/* it49 (R5-20 „czytelność pulpitu”, G248): the last 14 px words on the desktop a size up for readers 45–60: the history
   axis (7 caps buttons) and Pudełko's item names (caps over 17 px words) go to 16 px; tracking eased so the caps keep their
   width in check */
@media (min-width: 901px) {
  .eras button { font-size: 16px; letter-spacing: .12em; }
  .box__list li > span:last-child { font-size: 16px; letter-spacing: .14em; }
}

/* ===== it50 · Strefa decyzji pulpitu (W1-PULPIT-R5-21 §3.1 K1, G249) ===== */
/* on every desktop the one size reads as one fact row: „ROZMIAR” beside „Uniwersalny • na elastycznej żyłce” on the same hairline */
@media (min-width: 901px) {
  .pdp .opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
  .pdp .opt__h { grid-column: 1; margin: 0; padding-right: 18px; min-height: 44px; align-items: center; border-bottom: 1px solid var(--line-2); }
  .pdp .opt .onesize { grid-column: 2; flex-wrap: wrap; }
  .pdp .opt .fitnote { grid-column: 1 / -1; }
  /* the delivery and the return come first under the button: the same four facts, the two a buyer asks at the button lead */
  .pdp .trust li:nth-child(3), .pdp .trust li:nth-child(4) { order: -1; }
}
/* short desktop windows (≤ 820 px): the button and „Dostawa InPost · 14 dni na zwrot” stay in the first screen */
@media (min-width: 901px) and (max-height: 820px) {
  .pdp .r4-brow { margin-top: 14px; }
  .pdp .gifts { margin-top: 12px; }
  .pdp .trust { margin-top: 12px; }
}
/* it50 · K3 (G250): the pouch is the moment of decision, nothing in it under 15 px; the words read at 16 px, on every screen */
.drawer header button, #drClose { font-size: 15px; }
.dr-ok, .dr-item span, .dr-item .gift, .dr-item .card, .dr-saved small, .dr-up small, .dr-saved span, .dr-saved button, .dr-up button, .dr-back { font-size: 16px; font-size-adjust: .5; }
.dr-item span small { font-size: 15px; }
.dr-ok { padding: 10px 16px; } /* the inset rule: words ≥ 16 px from the sides of their own field */
.dr-item .q output { font-size: 16px; }
.dr-note { font-size: 16px; font-size-adjust: .5; line-height: 1.45; }
/* the finale's line of facts, 1:1, right under the checkout button */
.dr-fine { margin: 10px 0 0; text-align: center; font-size: 16px; font-size-adjust: .5; line-height: 1.45; color: var(--text-2); }
/* it50 · K2 (G253): „Dopisz liścik (nieobowiązkowy)” under „Na prezent”, opening the gift panel's own field in place */
.dr-lis { display: block; min-height: 44px; margin-top: 2px; padding: 0; font: italic 400 16px/1.3 var(--serif); font-size-adjust: .5; color: var(--accent);
  text-align: left; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.dr-lis em { font-style: italic; color: var(--text-2); }
.dr-lisf { margin: 0; padding: 14px 0 16px; border-bottom: 1px solid var(--line); list-style: none; }
.dr-lis[hidden] { display: none; }
.dr-lisf label > span { display: block; font-size: 16px; font-size-adjust: .5; color: var(--text); }
.dr-lisf label > span em { font-style: italic; color: var(--text-2); }
.dr-lisf textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--paper, #f2e9de);
  font: 400 17px/1.4 var(--serif); font-size-adjust: .5; color: var(--text); resize: vertical; }
.dr-lisf small { display: block; margin-top: 6px; font-size: 15px; font-size-adjust: .5; color: var(--text-2); }
.dr-lisl { display: grid; gap: 6px; margin-top: 8px; }
.dr-lisl button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 2px; text-align: left; font: italic 400 16px/1.3 var(--serif); font-size-adjust: .5; color: var(--text); }
.dr-lisl button:active, .dr-lisok:active, .dr-lis:active { transform: scale(.98); }
.dr-lisok { min-height: 44px; margin-top: 10px; padding: 0 18px; border: 1px solid var(--navy); border-radius: 2px; font: 500 15px/1 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.dr-lisl button, .dr-lisok { transition: transform .16s ease-out; }
/* it50 · K4 (G252): on the desktop „Dostawa InPost” and „14 dni na zwrot” open „Dostawa i zwroty” (the button is added by script) */
@media (min-width: 901px) {
  .pdp .trust__b { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit;
    color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); text-underline-offset: 5px;
    transition: text-decoration-color .15s ease; }
  .pdp .trust__b:hover { text-decoration-color: currentColor; }
}
/* it50 · AD-7 (G254): the header's label keeps to two lines; „· rozmiar uniwersalny” gives way first */
.mini__t--kr em span { display: none; }

/* ===== it51 · Orientacja pulpitu (W1-PULPIT-R5-21 krok 2, G255–G257) ===== */
/* the menu's slot holds one line beside the mark, after a hairline: „3 z 8 · Razem ▾” (above chapter 1: „Spis rozdziałów ▾”).
   It never swaps with emptiness when the header's buy button comes in. The old five links: ?exp=menu-5 */
@media (min-width: 901px) {
  html:not(.exp-menu-5) .top .nav { display: none; }
  html:not(.exp-menu-5) .top .wordmark { grid-column: 1; grid-row: 1; }
  html:not(.exp-menu-5) .top .top__r { grid-column: 3; grid-row: 1; }
  html:not(.exp-menu-5) .rozdz:not([hidden]) { grid-column: 2; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
    margin: 0; padding: 0 4px 0 0; border: 0; background: none; color: var(--text); white-space: nowrap; cursor: pointer; transition: transform .16s var(--ease-out); }
  .rozdz::before { content: ""; flex: none; width: 1px; height: 24px; margin-right: 20px; background: var(--line-2); }
  .rozdz__n { display: contents; }
  .rozdz__nr, .rozdz__z { font: 500 16px/1 var(--serif); letter-spacing: .02em; font-feature-settings: "lnum" 1; }
  .rozdz__t { order: 1; font: italic 400 19px/1.1 var(--serif); padding-right: 3px; }
  .rozdz__t::before { content: "·"; display: inline-block; margin: 0 10px; font-style: normal; color: var(--accent); }
  .rozdz__n svg { order: 2; flex: none; width: 12px; height: 7px; margin: 2px 0 0 8px; transition: transform .2s var(--ease-out); }
  .rozdz[aria-expanded="true"] .rozdz__n svg { transform: rotate(180deg); }
  .rozdz--spis .rozdz__nr, .rozdz--spis .rozdz__z { display: none; }
  .rozdz--spis .rozdz__t::before { content: none; }
  @media (hover: hover) and (pointer: fine) { .rozdz:hover .rozdz__t { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); text-underline-offset: 5px; } }
  .rozdz:active { transform: scale(.97); }
  .rozdz:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
  /* the list as a panel hanging from the header, on the label's left edge, ≤ 420 px; it drops 6 px and settles, 200 ms */
  html.spis-on { scrollbar-gutter: stable; }
  .spis { inset: var(--spis-top, 80px) auto auto var(--spis-left, 24px); width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - var(--spis-top, 80px) - 24px);
    border: 1px solid var(--line-2); border-radius: 4px; box-shadow: 0 22px 44px -24px rgba(19, 27, 48, .4); transform: translateY(-6px); opacity: 0;
    transition: transform .16s var(--ease-out), opacity .14s ease; }
  .spis.on { transform: none; opacity: 1; transition-duration: .2s, .16s; }
  .spis.on::backdrop { background: rgba(19, 27, 48, .12); }
  .spis__in { padding: 2px 24px 14px; }
  .spis__h { min-height: 52px; }
  .spis__l > li > a { min-height: 48px; }
  .spis__l b { font-size: 20px; }
  .spis__p { margin: -4px 0 6px 78px; }
  /* the desktop without the thread under the header and its bead (for the user's decision; the default keeps them) */
  html.exp-bez-nici .rthread, html.exp-bez-nici .rbead { display: none; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .rozdz__n svg { transition: none; } }

/* ===== it52 · Pismo pulpitu (W1-PULPIT-R5-21 krok 3: C3, C5, C6, AD-6; G258–G260) ===== */
/* C3: running text on the desktop reads at 18 px from 1024 and 19 px from 1280 (the 17.5 px leads 19.5); labels stay */
@media (min-width: 1024px) {
  html main .pdp .desc, html main #panTrack .beat p:not(.r4-nr), html main .stone__text .stone__for, html main #trioGrid p,
  html main .acc__b p, html main .acc__b ol.steps li, html main .acc__b dl.spec dd, html main .more__b p, html main .rsteps p,
  html main #razem .trio__note, html main #pytania .faq__text .fine, html main #z-bliska .rspec, html main #cena .price__rach,
  html main #z-bliska .real__head p:not(.r4-nr), html main .stone__text .lupa__t { font-size: 18px; }
}
@media (min-width: 1280px) {
  html main .acc__b p, html main .acc__b ol.steps li, html main .acc__b dl.spec dd, html main .more__b p, html main .rsteps p,
  html main #razem .trio__note, html main #pytania .faq__text .fine, html main #z-bliska .rspec, html main #cena .price__rach,
  html main #z-bliska .real__head p:not(.r4-nr), html main .stone__text .lupa__t { font-size: 19px; }
  html main .pdp .desc, html main #panTrack .beat p:not(.r4-nr), html main .stone__text .stone__for, html main #trioGrid p { font-size: 19.5px; }
}
/* C5: the questions one clicks and the lines by the buttons, never under 16 px on the desktop */
@media (min-width: 901px) {
  html main .pdp .acc summary, html main .stone__text .more summary, html main .stone__text .more summary span { font-size: 17px; }
  html main #razem .scta .btn, html main #breathTxt, html main .box__text .fine, html main .one__t .fine { font-size: 16px; }
  html main .acc__b dl.spec > div { font-size: 16px; }
}
/* C6: up to 1280 the loupe's words and the breath's sentence go under their circle, at the column's full width (they were
   228–271 px and 188–238 px wide, 17–22 characters a line) */
@media (min-width: 901px) and (max-width: 1280px) {
  .stone__text .lupa { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* the breath's sentence under its circle on every desktop (at 1440 it was 295 px wide, 23 characters a line) */
@media (min-width: 901px) { .rsteps__breath { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; } }
/* AD-6: below 1400 px the stone switch moves 16 px into the drawing's gutter, off the lead column (it touched it: 1–12 px) */
@media (min-width: 901px) and (max-width: 1399px) { .srail { translate: -16px 0; } }

/* it53 · Film bez przerw (W1-PULPIT-R5-21 krok 4, AD-2): on the desktop no seam leaves more than ~72 px of bare paper
   (Rytuał → Cena, the pause after the breath, up to 96). Contents, order and the hand-offs T2/T3/T5/T6 stay as they were. */
@media (min-width: 1024px) {
  /* hero → Historia: the intro's ink starts 58–72 px into the track, so the hero keeps no air of its own and the intro sits 10 px higher */
  .pdp__grid { padding-bottom: 0; }
  #pan .beat--intro { top: -10px; }
  /* Historia → Kamienie: the stones rise under the held last frame of the track (the eras axis is gone by then);
     --kam-in is measured from the frame and the stone's ink (site.js), so the seam is 64 px on every window */
  html.js #kamienie { margin-top: calc(-1 * var(--kam-in, 0px)); }
  /* Kamienie → Razem (the last stone keeps 99 px of its own) and Razem → Rytuał (the ritual's ink starts 49 px into its figure) */
  .trio { padding-top: 48px; padding-bottom: 0; margin-bottom: -16px; }
  /* Rytuał → Cena and Cena → Pudełko: the price scene is as tall as its contents (it was a full window with 200 px of air) */
  .price__sticky { min-height: 0; padding-top: 0; padding-bottom: 0; }
  #cena { margin-top: -24px; }
  html:not(.exp-pudelko) .box { padding-top: 56px; }
}

/* it55 · Noc bez planety (W1-PULPIT-R5-21 krok 6, AD-3), desktop only. The stars are one 1600 × 1000 field of the same
   density as the old 260 px tile (its grid read at 2,2× brightness); the tiger's eye stands whole in the night beside the
   list 01–05, its right edge 24 px from the window, ≤ 480 px; the photo is cut at its top, right and bottom, so those edges
   dissolve into the night (its left is the photo's own black, gone under lighten). Parallax 30 → 0 and T7 as before.
   ?exp=kula-krawedz = the old sphere on the window's edge; ?exp=bez-gwiazd = the night without dots (Koncept 1:1). */
@media (min-width: 901px) {
  .real { background-image: url(../img/r5/noc-gwiazdy.svg), linear-gradient(180deg, var(--dark) 0, var(--night) 22%, var(--night) 78%, var(--dark) 100%);
    background-size: 1600px 1000px, auto; background-repeat: repeat, no-repeat; }
  html:not(.exp-kula-krawedz) .r5-oko { --oko-w: min(480px, max(150px, calc(50vw - 310px)));
    width: var(--oko-w); max-width: none; right: 24px; top: calc(190px - var(--oko-w) / 2);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 68%, transparent 98%), linear-gradient(180deg, transparent 0, #000 16%, #000 64%, transparent 96%);
    mask-image: linear-gradient(90deg, #000 0, #000 68%, transparent 98%), linear-gradient(180deg, transparent 0, #000 16%, #000 64%, transparent 96%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}
html.exp-bez-gwiazd .real { background-image: linear-gradient(180deg, var(--dark) 0, var(--night) 22%, var(--night) 78%, var(--dark) 100%); }

/* it56 · Strefa decyzji na niskich oknach laptopów (R5-21 błąd 1): on a desktop window up to 820 px tall the whole
   button and „Dostawa InPost · 14 dni na zwrot” stand ≥ 16 px above the window's bottom (1536 × 730, 1366 × 657, 1280 × 690,
   1152 × 720, 1024 × 640, by day and at 21). The column only tightens: the title and the line under it scale with the
   window's height, the price note reads as one line, the steps between rows go 12 → 8 px; no word changes size below 16 px.
   The evening greeting moves under the facts on these windows (site.js, `hello` placement), so the evening costs no height. */
@media (min-width: 901px) and (max-height: 820px) {
  .pdp__info { padding-top: 4px; }
  .pdp .r4-brow, .js .pdp__info > .r4-sierp + .r4-brow { margin-top: 10px; margin-bottom: 8px; }
  .pdp .d1 { font-size: clamp(44px, min(4.6vw, 8vh), 72px); }
  .pdp h1 { margin-bottom: 8px; }
  .pdp .tag { font-size: clamp(20px, min(1.8vw, 3.2vh), 27px); }
  .pdp .tag em { font-size: 1.9em; }
  .pdp .pricerow { margin-top: 10px; padding-top: 10px; }
  .pdp .pricerow span br { display: none; }
  .pdp .beadrow, .pdp .opt, .pdp .gifts, .pdp .buyrow { margin-top: 8px; }
  .pdp .opt__h { min-height: 40px; }
  .pdp .trust { margin-top: 10px; }
  .pdp .hello--pod { margin: 14px 0 0; }
}
/* windows up to 680 px tall (1024 × 640, 1280 × 650): a few more pixels from the column's head */
@media (min-width: 901px) and (max-height: 680px) {
  .pdp .r4-brow, .js .pdp__info > .r4-sierp + .r4-brow { margin-top: 4px; margin-bottom: 6px; }
  .pdp .opt__h { min-height: 36px; }
  .pdp .tag em { font-size: 1.8em; }
  .pdp .pricerow { margin-top: 8px; padding-top: 8px; }
}

/* the same column when the button still misses the first screen on a taller window (a larger text size): site.js measures
   once the fonts are in and sets html.ciasno; it only ever tightens, never loosens, so the column cannot flicker */
@media (min-width: 901px) {
  html.ciasno .pdp__info { padding-top: 4px; }
  html.ciasno .pdp .r4-brow, html.js.ciasno .pdp__info > .r4-sierp + .r4-brow { margin-top: 10px; margin-bottom: 8px; }
  html.ciasno .pdp .d1 { font-size: clamp(44px, min(4.6vw, 8vh), 72px); }
  html.ciasno .pdp h1 { margin-bottom: 8px; }
  html.ciasno .pdp .tag { font-size: clamp(20px, min(1.8vw, 3.2vh), 27px); }
  html.ciasno .pdp .tag em { font-size: 1.9em; }
  html.ciasno .pdp .pricerow { margin-top: 10px; padding-top: 10px; }
  html.ciasno .pdp .pricerow span br { display: none; }
  html.ciasno .pdp .beadrow, html.ciasno .pdp .opt, html.ciasno .pdp .gifts, html.ciasno .pdp .buyrow { margin-top: 8px; }
  html.ciasno .pdp .opt__h { min-height: 40px; }
  html.ciasno .pdp .trust { margin-top: 10px; }
  html.ciasno .pdp .hello--pod { margin: 14px 0 0; }
  html.ciasno .pdp .r4-brow, html.js.ciasno .pdp__info > .r4-sierp + .r4-brow { margin-top: 4px; margin-bottom: 6px; }
  html.ciasno .pdp .opt__h { min-height: 36px; }
  html.ciasno .pdp .tag em { font-size: 1.8em; }
  html.ciasno .pdp .pricerow { margin-top: 8px; padding-top: 8px; }
}
/* 821–900 px tall windows in the evening: the greeting stays under the title, the price row gives back its 6 px */
@media (min-width: 901px) and (max-height: 900px) {
  .pdp .hello:not([hidden]):not(.hello--pod) { margin-bottom: 10px; }
  .pdp .hello:not([hidden]) ~ .pricerow { margin-top: 12px; }
}

/* it56 · Kula w nocy cała (R5-21 błąd 2): from 901 px the night's tiger's eye is a whole polished bead on black
   (`v_oko_kula.jpg`, the R3 bead photo relit from the upper left, the drill hole kept: it is a bead of this bracelet),
   in the place it55 gave it; nothing to dissolve any more, so no mask. The phone keeps its corner stone (`v_oko_p.jpg`).
   ?exp=kula-krawedz = the it54 stone on the window's edge. */
@media (min-width: 901px) {
  html:not(.exp-kula-krawedz) .r5-oko { -webkit-mask-image: none; mask-image: none; }
}