/* ==========================================================================
   ewardega UI v3 "Meridian": blog (lista wpisów, archiwa) i wpis.
   Mapa: lista L (hero, wpisy, newsletter) + D finał; wpis L (okruszki, H1, kadr .ui-win, spis, prose)
   + D płyta "Przećwicz to na stole" + L powiązane + D stopka. Tokeny i komponenty wspólne: ui.css.
   ========================================================================== */

/* 1. Hero listy (jasne): strona cicha (elewacja.md §3.7). Okruszki, etykieta, "Blog." w skali --ui-h1-blog, obok
   (od 900 px) lead przy dolnej linii tytułu. Bez meridianu w tle, bez wejścia: wszystko stoi od pierwszej klatki. */
.ui-bh { padding-bottom: clamp(24px, 3.4vw, 48px); }
.ui-bh__in { display: grid; gap: clamp(20px, 3vw, 36px); }
.ui-bh__in > * { min-width: 0; }
.ui-bh__head { display: grid; gap: clamp(16px, 2.4vw, 28px); align-items: end; }
.ui-bh__tw { display: grid; gap: clamp(10px, 1.4vw, 18px); justify-items: start; }
.ui-bh .ui-eyebrow { color: var(--ui-gold-ink); }
/* Odbiór: autorka z twarzą zamiast etykiety "Art Massage Academy" (także na telefonie: twarz w pierwszym ekranie) */
.ui-bh__by { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ui-ink); }
.ui-bh__av { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.ui-bh__av img { width: 100%; height: 100%; object-fit: cover; }
.ui-bh__by > span:last-child { display: grid; gap: 1px; line-height: 1.25; }
.ui-bh__by small { font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-gold-ink); }
.ui-bh__by b { font-size: var(--ui-fs-s); font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--ui-t2) var(--ui-ease); justify-self: start; }
.ui-bh__by:hover b { background-size: 100% 1px; }
.ui-bh__by:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 4px; border-radius: 999px; }
@media (min-width: 900px) { .ui-bh__av { width: 52px; height: 52px; } }
.ui-bh__h {
	font-size: var(--ui-h1-blog); font-weight: 300; line-height: .86; letter-spacing: -.055em; font-kerning: normal;
	margin-left: -.05em; max-width: none; padding-bottom: .1em; /* zejście "g" nie dotyka linii */
	color: var(--ui-ink);
}
.ui-bh__h--s { font-size: var(--ui-h1-page); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.ui-bh__side { display: grid; gap: 18px; justify-items: start; }
.ui-bh__lead { max-width: 30em; }
@media (min-width: 900px) {
	.ui-bh__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); }
	/* Dół leadu na linii bazowej "Blog." (zejście g wychodzi poniżej) */
	.ui-bh__side { padding-bottom: calc(var(--ui-h1-blog) * .2); }
	.ui-bh__head:has(.ui-bh__h--s) .ui-bh__side { padding-bottom: .4em; }
}
/* Telefon: lead krótszy optycznie (15 px), żeby najnowszy wpis wszedł w pierwszy ekran zaraz pod tytułem */
@media (max-width: 599px) {
	.ui-bh__lead { font-size: var(--ui-fs-s); line-height: 1.55; }
	.ui-bh .ui-eyebrow { display: none; }
}

/* Kategorie (archiwa, przy co najmniej dwóch kategoriach) */
.ui-bcats ul { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-bcats__a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
	font-size: var(--ui-fs-s); font-weight: 500; border: 1px solid var(--ui-line-2); transition: background-color var(--ui-t1), border-color var(--ui-t1), color var(--ui-t1);
}
.ui-bcats__a small { font-size: var(--ui-fs-xs); color: var(--ui-ink-3); }
.ui-bcats__a:hover { border-color: var(--ui-ink); }
.ui-bcats__a[aria-current] { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-snow); }
.ui-bcats__a[aria-current] small { color: var(--ui-snow-2); }

/* 2. Spis wpisów: wiersze ze statyczną okładką (bez numerów, bez kadru za kursorem, bez filtrów) ---------------- */
.ui-bl { padding-top: 0; }
.ui-bl__rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ui-line-2); }
.ui-bl__n { font-size: var(--ui-fs-xs); font-weight: 600; color: var(--ui-ink-3); }
.ui-bls { display: grid; margin: 0; padding: 0; list-style: none; }
.ui-blr { position: relative; border-bottom: 1px solid var(--ui-line); }
.ui-blr__a { position: relative; display: grid; gap: 16px; padding-block: clamp(20px, 3vw, 36px); }
.ui-blr__a > * { min-width: 0; }
.ui-blr__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--ui-r-l); background: var(--ui-paper); }
.ui-blr--new .ui-blr__media { aspect-ratio: 16 / 10; }
.ui-blr__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ui-blr__body { display: grid; gap: 12px; align-content: start; justify-items: start; }
.ui-blr__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: var(--ui-fs-xs); font-weight: 600; line-height: 1.5; color: var(--ui-ink-3); }
.ui-blr__meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: var(--ui-gold-ink); vertical-align: middle; }
.ui-blr__t {
	font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 300; line-height: 1.1; letter-spacing: -.032em;
	max-width: 24em; text-wrap: balance; font-kerning: normal; color: var(--ui-ink);
}
.ui-blr__ts { color: var(--ui-ink-2); }
/* Jeden link na wiersz: tytuł rozciągnięty na cały wiersz; złota kreska pod tytułem przy najechaniu */
.ui-blr__t a {
	color: inherit; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone;
	background: linear-gradient(var(--ui-gold), var(--ui-gold)) 0 100% / 0 1px no-repeat;
	transition: background-size .6s var(--ui-ease-out-expo);
}
.ui-blr__t a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.ui-blr__t a:focus-visible { outline: none; }
.ui-blr:has(.ui-blr__t a:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 4px; border-radius: var(--ui-r); }
.ui-blr__x { font-size: var(--ui-fs-lead); line-height: 1.55; color: var(--ui-ink-2); max-width: 32em; text-wrap: pretty; }
/* Kolejne wpisy: zajawka mniejsza, przycięta (telefon dwie linie, od 900 px jedna) */
.ui-blr:not(.ui-blr--new) .ui-blr__x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--ui-fs-s); max-width: 44em; }
.ui-blr__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.ui-blr__foot time { font-size: var(--ui-fs-xs); color: var(--ui-ink-3); font-variant-numeric: normal; }
.ui-blr__go { display: inline-flex; align-items: center; gap: 12px; font-size: var(--ui-fs-s); font-weight: 600; color: var(--ui-ink); }
.ui-blr__go i {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ui-line-2);
	transition: background-color var(--ui-t2), border-color var(--ui-t2), color var(--ui-t2);
}
.ui-blr__go .ui-ic { width: 18px; height: 18px; transition: transform var(--ui-t2) var(--ui-ease); }
@media (hover: hover) {
	.ui-blr:hover .ui-blr__t a { background-size: 100% 1px; }
	.ui-blr:hover .ui-blr__go i { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-snow); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.ui-blr__img { transition: scale 1.2s var(--ui-ease-out-expo); }
	.ui-blr:hover .ui-blr__img { scale: 1.04; }
	.ui-blr:hover .ui-blr__go .ui-ic { transform: translateX(3px); }
}
/* Najnowszy: większy tytuł, zajawka, "Czytaj artykuł" */
.ui-blr--new .ui-blr__a { padding-top: clamp(16px, 2.4vw, 32px); }
.ui-blr--new .ui-blr__t { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.06; letter-spacing: -.035em; }
.ui-blr--new .ui-blr__body { gap: 16px; }
.ui-blr--new .ui-blr__foot { margin-top: 4px; }
@media (min-width: 900px) {
	/* Najnowszy: tekst 7/12 po lewej, okładka 5/12 po prawej */
	.ui-blr--new .ui-blr__a { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: center; padding-bottom: clamp(32px, 3.4vw, 48px); }
	.ui-blr--new .ui-blr__media { grid-column: 2; grid-row: 1; }
	.ui-blr--new .ui-blr__body { grid-column: 1; grid-row: 1; gap: 20px; }
	.ui-blr--new .ui-blr__foot { justify-content: flex-start; gap: 32px; padding-top: 20px; border-top: 1px solid var(--ui-line); }
	/* Kolejne: okładka 200x150 po lewej (kadr studia, detal), tytuł, zajawka w jednej linii, data i strzałka po prawej */
	.ui-blr:not(.ui-blr--new) .ui-blr__a { grid-template-columns: 200px minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
	.ui-blr:not(.ui-blr--new) .ui-blr__media { width: 200px; aspect-ratio: 4 / 3; border-radius: var(--ui-r); }
	.ui-blr:not(.ui-blr--new) .ui-blr__body { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 3vw, 56px); row-gap: 10px; align-items: center; }
	.ui-blr:not(.ui-blr--new) .ui-blr__meta, .ui-blr:not(.ui-blr--new) .ui-blr__t, .ui-blr:not(.ui-blr--new) .ui-blr__x { grid-column: 1; }
	.ui-blr:not(.ui-blr--new) .ui-blr__foot { grid-column: 2; grid-row: 1 / span 3; width: auto; gap: clamp(20px, 2.4vw, 40px); }
	.ui-blr:not(.ui-blr--new) .ui-blr__x { -webkit-line-clamp: 1; }
}
.ui-bl__empty { display: grid; gap: 12px; justify-items: start; padding-block: clamp(24px, 4vw, 48px); }
.ui-bl__nl { padding-top: 0; }
/* Siatka kart (wpis: "Przeczytaj także") */
.ui-bl__grid { display: grid; gap: clamp(16px, 2vw, 28px); }
@media (min-width: 720px) { .ui-bl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ui-bl__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Karta wpisu: jasna karta, ciemny kadr (.ui-win) z numerem, jeden link rozciągnięty na całość */
.ui-bc {
	position: relative; display: flex; flex-direction: column; padding: 8px;
	background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r-l); box-shadow: var(--ui-sh-1);
	transition: transform var(--ui-t3) var(--ui-ease), box-shadow var(--ui-t3) var(--ui-ease), border-color var(--ui-t2);
}
.ui-bc:hover { transform: translateY(-4px); box-shadow: var(--ui-sh-2); border-color: var(--ui-line-2); }
.ui-bc:has(.ui-bc__t a:focus-visible) { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.ui-bc__t a:focus-visible { outline: none; }
.ui-bc__media { aspect-ratio: 3 / 2; border-radius: var(--ui-r); flex: none; }
/* Zdjęcia wpisów bez filtrów i winiety (elewacja 2.2.0: grading tylko w plikach, pliki są w bibliotece mediów) */
.ui-bc:hover .ui-bc__img { transform: scale(1.035); }
.ui-bc__n {
	position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 10px;
	border-radius: 999px; font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .1em; color: var(--ui-snow);
	background: rgba(11, 9, 7, .62); border: 1px solid var(--ui-hair-2);
}
.ui-bc__n::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ui-gold); }
.ui-bc__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 1.6vw, 22px) clamp(10px, 1.2vw, 16px) 8px; }
.ui-bc__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ui-bc__min { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-fs-xs); color: var(--ui-ink-3); }
.ui-bc__min .ui-ic { color: var(--ui-gold-ink); }
.ui-bc__t { font-size: clamp(1.25rem, 1.1rem + .55vw, 1.5625rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.22; text-wrap: balance; }
.ui-bc__t a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.ui-bc__x { font-size: var(--ui-fs-s); line-height: 1.6; color: var(--ui-ink-2); text-wrap: pretty; }
.ui-bc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ui-line); }
.ui-bc__foot time { font-size: var(--ui-fs-xs); color: var(--ui-ink-3); }
/* Daty bez cyfr tabelarycznych: szeroka jedynka rozbija "11" na "1 1" */
.ui-bc__foot time, .ui-ar__dl time { font-variant-numeric: normal; font-feature-settings: normal; }
.ui-nowrap { white-space: nowrap; }
.ui-bc__go { display: inline-flex; align-items: center; gap: 12px; font-size: var(--ui-fs-s); font-weight: 600; }
.ui-bc__go i {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ui-line-2);
	transition: background-color var(--ui-t2), border-color var(--ui-t2), color var(--ui-t2);
}
.ui-bc__go .ui-ic { width: 18px; height: 18px; transition: transform var(--ui-t2) var(--ui-ease); }
.ui-bc:hover .ui-bc__go i { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-snow); }
.ui-bc:hover .ui-bc__go .ui-ic { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ui-bc:hover { transform: none; } .ui-bc:hover .ui-bc__img { transform: none; } }

/* Wyróżniony (najnowszy) wpis: kadr obok treści od 900 px */
.ui-bc--lead .ui-bc__t { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.06; }
.ui-bc--lead .ui-bc__x { font-size: var(--ui-fs-lead); line-height: 1.55; max-width: 32em; }
@media (min-width: 900px) {
	.ui-bc--lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: 10px; }
	.ui-bc--lead .ui-bc__media { aspect-ratio: auto; min-height: clamp(380px, 38vw, 560px); }
	.ui-bc--lead .ui-bc__body { justify-content: center; gap: 20px; padding: clamp(28px, 3.4vw, 56px); }
	.ui-bc--lead .ui-bc__foot { margin-top: 12px; }
	.ui-bc--lead .ui-bc__n { top: 18px; left: 18px; }
}

/* Paginacja */
.ui-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(40px, 5vw, 64px); }
.ui-pag__n { display: flex; gap: 4px; }
.ui-pag__n a, .ui-pag__n span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-pag__n a:hover { background: rgba(22, 18, 14, .06); }
.ui-pag__n .current { background: var(--ui-ink); color: var(--ui-snow); }
.ui-pag__arr { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ui-line-2); }
.ui-pag__arr:hover { border-color: var(--ui-ink); }
span.ui-pag__arr { opacity: .35; }
.ui-pag__of { width: 100%; text-align: center; font-size: var(--ui-fs-xs); color: var(--ui-ink-3); }

/* 3. Wpis: ciemne hero (okruszki, chipy, H1, zajawka, meta) z kadrem w prawej kolumnie ------------ */
.ui-ar { position: relative; }
.ui-arh { padding-bottom: clamp(40px, 6vw, 96px); }
.ui-arh__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
.ui-arh__in > * { min-width: 0; }
.ui-arh__txt { display: grid; justify-items: start; align-content: start; }
.ui-arh__txt > * { max-width: 100%; }
.ui-ar__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(8px, 1.4vw, 20px) 0 clamp(18px, 2.4vw, 28px); }
.ui-arh .ui-chip--gold { color: var(--ui-gold); border-color: rgba(201, 164, 106, .42); background: rgba(201, 164, 106, .1); }
.ui-ar__h {
	font-size: var(--ui-h1-page); font-weight: 300; letter-spacing: -.045em; line-height: 1;
	max-width: 15.5em; text-wrap: balance; font-kerning: normal; color: var(--ui-snow);
}
/* "Temat: podtytuł": podtytuł w osobnym wierszu od 720 px, jak na kartach */
@media (min-width: 720px) { .ui-ar__h2l { display: block; color: var(--ui-snow-2); } }
.ui-ar__intro { display: grid; gap: 28px; width: 100%; margin-top: clamp(22px, 3vw, 40px); }
.ui-ar__lead { max-width: 34em; }
.ui-ar__meta { display: grid; gap: 16px; padding-top: 18px; border-top: 1px solid var(--ui-hair-2); }
.ui-ar__by { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; justify-self: start; color: var(--ui-snow); }
.ui-ar__av { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.ui-ar__av img { object-fit: cover; }
.ui-ar__by > span:last-child { display: grid; gap: 2px; line-height: 1.3; }
.ui-ar__by b { font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--ui-t2) var(--ui-ease); justify-self: start; }
.ui-ar__by:hover b { background-size: 100% 1px; }
.ui-ar__by small { font-size: var(--ui-fs-xs); color: var(--ui-gold); font-weight: 600; letter-spacing: .02em; }
.ui-ar__dl { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.ui-ar__dl dt { font-size: var(--ui-fs-xs); color: var(--ui-snow-3); }
.ui-ar__dl dd { font-size: var(--ui-fs-s); font-weight: 600; color: var(--ui-snow); }
/* Telefon i tablet: meta w jednym wierszu (awatar 40 px, autorka; data po prawej) */
@media (max-width: 1023px) {
	.ui-ar__intro { gap: 20px; }
	.ui-ar__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 14px; }
	.ui-ar__by { min-height: 44px; gap: 12px; }
	.ui-ar__av { width: 40px; height: 40px; }
	.ui-ar__dl { text-align: right; }
	.ui-ar__dl > div { display: grid; gap: 2px; }
}
@media (min-width: 1024px) {
	/* Bez kadru: zajawka i meta obok siebie pod H1 (jak dotąd) */
	.ui-arh:not(.ui-arh--cover) .ui-ar__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(40px, 5vw, 88px); }
	.ui-arh:not(.ui-arh--cover) .ui-ar__meta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	/* Z kadrem: tekst po lewej, kadr po prawej, dolne krawędzie meta i kadru w jednej linii */
	.ui-arh--cover .ui-arh__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 88px); align-items: stretch; }
	/* Okruszki na wysokości górnej krawędzi kadru, reszta tekstu przy dolnej (meta w linii z dołem kadru) */
	.ui-arh--cover .ui-arh__txt { display: flex; flex-direction: column; align-items: flex-start; }
	.ui-arh--cover .ui-arh__txt > .ui-crumbs { margin-bottom: auto; }
	/* Kadr 4:3 na środku wysokości kolumny tekstu: plik 1100 px wypełnia okno ok. 520 px bez powiększania
	   (ok. 1,75 px obrazu na px CSS); pion 5:6 sprzed elewacji powiększał go prawie dwukrotnie */
	.ui-arh--cover .ui-ar__cover { align-self: center; }
	.ui-arh--cover .ui-ar__frame { aspect-ratio: 4 / 3; }
	.ui-arh--cover .ui-ar__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; }
	.ui-arh--cover .ui-ar__dl { text-align: right; }
}

.ui-arh__txt { position: relative; }

/* Kadr wyróżniający (elewacja 2.2.0, §4.7; r3): dzienny wycinek v3-bl-* z motywu (1500x1000, 3:2, object-position
   z ewardega_ui_blog_figures()) w ciemnym oknie hero, bez filtra i bez najazdu. Wpis bez kadru w motywie: obraz wyróżniający (1100 px),
   okno nie szersze niż plik. */
.ui-ar__cover { margin: 0; width: 100%; max-width: 1100px; }
.ui-ar__frame { aspect-ratio: 16 / 10; border-radius: var(--ui-r-xl); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .75); }
.ui-ar__img { object-position: 50% 30%; }
.ui-ar__cover figcaption { margin: 12px 0 0; font-size: var(--ui-fs-xs); color: var(--ui-snow-3); }

/* 4. Wpis: treść i spis ------------------------------------------------------------------- */
.ui-ar { --ui-ar-cols: minmax(0, 1fr) minmax(0, 42rem) minmax(0, 1fr); --ui-ar-gap: clamp(40px, 4vw, 72px); }
.ui-ar__body { padding-top: clamp(40px, 6vw, 88px); padding-bottom: var(--ui-sec); }
.ui-ar__prose { max-width: 42rem; font-size: 1.0625rem; line-height: 1.75; color: rgba(22, 18, 14, .8); gap: 20px; }
.ui-ar__prose > p:first-child { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.375rem); line-height: 1.55;color: var(--ui-ink); letter-spacing: -.008em; }
.ui-ar__prose h2 { margin-top: clamp(28px, 4vw, 48px); scroll-margin-top: 96px; }
.ui-ar__prose h3 { scroll-margin-top: 96px; }
/* Duży ekran: 18 px w tej samej kolumnie, ok. 70 znaków w wierszu zamiast 80 */
@media (min-width: 1200px) { .ui-ar__prose { font-size: 1.125rem; } }
.ui-ar__prose--num { counter-reset: ui-h; }
/* Numer rozdziału i złota kreska obok. Kreska to osobne pudełko 1 px z jednolitym tłem (::after): przeglądarka dociąga je
   do pełnego piksela, więc przy ułamkowym położeniu H2 nie blednie do szarości (gradient 1 px rozlewał się na dwa piksele). */
.ui-ar__prose--num h2 { position: relative; }
.ui-ar__prose--num h2::before {
	counter-increment: ui-h; content: counter(ui-h, decimal-leading-zero);
	display: block; width: max-content; height: 16px; margin-bottom: 14px;
	font-size: var(--ui-fs-xs); font-weight: 700; line-height: 16px; letter-spacing: .12em; color: var(--ui-gold-ink);
}
.ui-ar__prose--num h2::after { content: ""; position: absolute; top: 8px; left: 38px; width: 52px; height: 1px; background: var(--ui-gold); }
/* Sygnały i podsumowanie to karty z własną etykietą: bez numeru, więc numery przy H2 = numery w spisie i na osi kroków */
.ui-ar__prose--num :is(.ui-ar__warn, .ui-ar__sum) h2::before, .ui-ar__prose--num :is(.ui-ar__warn, .ui-ar__sum) h2::after { content: none; }
/* Listy w treści: punkt jako blok z wcięciem (wspólny .ui-prose li to flex, który rozbija "<strong>Etykieta:</strong> tekst"
   na dwie kolumny); propozycja do fundamentu w raporcie */
.ui-ar__prose ul, .ui-ar__prose ol { gap: 10px; }
.ui-ar__prose ul > li, .ui-ar__prose ol > li { display: block; position: relative; padding-left: 30px; }
/* Wiersz punktu w pełnych pikselach (17 px x 1,75 = 29,75 px dawało ułamkowe położenie kreski: raz złota, raz wyblakła) */
.ui-ar__prose ul > li { line-height: 30px; }
.ui-ar__prose ul > li::before { position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; margin: 0; border-radius: 50%; background: var(--ui-gold); }
/* Punkt listy to złota kropka meridianu, nie kreska (kreska czytała się jak pauza przed tekstem) */
.ui-ar__prose ul > li { padding-left: 26px; }
.ui-ar__prose ol > li { padding-left: 40px; }
.ui-ar__prose ol > li::before { position: absolute; left: 0; top: .3em; }
.ui-ar__prose li strong:first-child { color: var(--ui-ink); }
/* Ilustracja monolinii w treści: czysta jasna karta (bez siatki punktów, recenzja r2), podpisy paneli pod spodem */
.ui-ar__il { margin-block: 12px; display: grid; gap: 0; border: 1px solid var(--ui-line); border-radius: var(--ui-r-l); background: var(--ui-card); overflow: hidden; }
.ui-ar__il-art {
	padding: clamp(14px, 3vw, 28px) clamp(10px, 3vw, 28px) clamp(6px, 1.4vw, 12px);
}
.ui-ar__il-art .il { display: block; width: 100%; height: auto; color: var(--ui-gold-ink); }
.il--blog .il__ring { fill: none; stroke: currentColor; stroke-width: 1; opacity: .35; vector-effect: non-scaling-stroke; }
.il--blog .il__drop { opacity: .35; }
.il--blog .il__halo { vector-effect: non-scaling-stroke; }
.ui-ar__il figcaption { padding: clamp(14px, 2vw, 20px) clamp(16px, 2.4vw, 28px); border-top: 1px solid var(--ui-line); color: var(--ui-ink-2); }
.ui-ar__il-k { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(16px, 3vw, 40px); }
.ui-ar__prose .ui-ar__il-k > li { display: grid; gap: 4px; align-content: start; padding: 0; }
.ui-ar__prose .ui-ar__il-k > li::before { content: none; display: none; }
.ui-ar__il-k b { display: flex; align-items: baseline; gap: 8px; font-size: var(--ui-fs-s); font-weight: 600; line-height: 1.35; color: var(--ui-ink); }
.ui-ar__il-k b .tnum { font-size: var(--ui-fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--ui-gold-ink); }
.ui-ar__il-k > li > span, .ui-ar__il-c { font-size: .875rem; line-height: 1.55; color: var(--ui-ink-2); }
/* Telefon: dwa panele jeden pod drugim (w dwóch kolumnach po ok. 150 px wiersze rwały się po słowie) */
@media (max-width: 519px) {
	.ui-ar__il-k { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.ui-ar__prose .ui-ar__il-k > li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-line); }
}
/* Rysunek z dwoma panelami na telefonie: wspólny kadr znika, każdy panel stoi na pełnej szerokości nad swoim podpisem,
   kreska grubsza (1,5 px) */
.ui-ar__il-p { display: none; }
@media (max-width: 559px) {
	.ui-ar__il--2 > .ui-ar__il-art { display: none; }
	.ui-ar__il--2 figcaption { border-top: 0; padding-top: 4px; }
	.ui-ar__il-p {
		display: block; margin: 0 calc(-1 * clamp(16px, 2.4vw, 28px)) 12px; padding: 14px 12px 4px;
		border-bottom: 1px solid var(--ui-line);
	}
	.ui-ar__prose .ui-ar__il-k > li + li { margin-top: 18px; padding-top: 0; border-top: 0; }
	.ui-ar__il-p .il { display: block; width: 100%; height: auto; overflow: hidden; color: var(--ui-gold-ink); }
	.ui-ar__il-p .il__d { stroke-width: 1.5; }
}
/* Wariant "kroki": punkt na meridianie na każdy rozdział (numery nad punktami od 720 px), pod spodem skróty rozdziałów jako linki */
.il--steps .il__num { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; fill: currentColor; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) { .il--steps .il__num { display: none; } }
.ui-ar__il-s { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
@media (min-width: 720px) { .ui-ar__il-s { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }
.ui-ar__prose .ui-ar__il-s > li { display: block; padding: 0; border-top: 1px solid var(--ui-line); }
.ui-ar__prose .ui-ar__il-s > li::before { content: none; display: none; }
.ui-ar__il-s a, .ui-ar__il-sx { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--ui-fs-s); font-weight: 500; line-height: 1.3; color: var(--ui-ink-2); text-decoration: none; }
.ui-ar__il-s a:hover { color: var(--ui-ink); }
.ui-ar__il-s a:hover .tnum { color: var(--ui-ink); }
.ui-ar__il-s .tnum { flex: none; min-width: 2ch; font-size: var(--ui-fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--ui-gold-ink); transition: color var(--ui-t1); }
.ui-ar__il--steps .ui-ar__il-c { margin-top: 12px; }

/* Cytat wyróżniony: zdanie z wpisu dużym krojem na złotej nitce (nitka stoi, cytat wchodzi tylko .ui-rise).
   Ten sam wygląd dostaje zwykły cytat z treści (blockquote w edytorze WordPressa), więc przerywnik bierze się z markupu. */
.ui-ar__prose > blockquote, .ui-ar__prose > .wp-block-quote, .ui-ar__prose > .wp-block-pullquote {
	position: relative; margin: clamp(20px, 3vw, 40px) 0; padding: 6px 0 6px clamp(22px, 3vw, 36px); border: 0; border-left: 1px solid var(--ui-gold); background: none;
}
.ui-ar__prose > :is(blockquote, .wp-block-quote, .wp-block-pullquote) p { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); font-weight: 300; line-height: 1.22; letter-spacing: -.025em; color: var(--ui-ink); text-wrap: balance; }
.ui-ar__prose > :is(blockquote, .wp-block-quote, .wp-block-pullquote) cite { display: block; margin-top: 14px; font-size: var(--ui-fs-xs); font-style: normal; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-gold-ink); }
/* Odbiór: zdanie wyróżnione w miejscu (ewardega_ui_blog_quote()): wydzielone z akapitu, większy krój na złotej nitce,
   bez powtórki w osobnym bloku. Jedno zdanie, więc stopień niższy niż dawny cytat (do 28 px). */
.ui-ar__prose > p.ui-ar__hl {
	position: relative; margin-block: clamp(4px, 1vw, 12px); padding: 4px 0 4px clamp(18px, 2.4vw, 28px); border-left: 1px solid var(--ui-gold);
	font-size: clamp(1.25rem, 1.08rem + .7vw, 1.75rem); font-weight: 300; line-height: 1.3; letter-spacing: -.02em; color: var(--ui-ink); text-wrap: pretty;
}

/* Sygnały ostrzegawcze: karta z ikoną i numerowanymi punktami (pomarańcz tylko jako tekst numerów, AA na jasnym) */
.ui-ar__warn {
	position: relative; display: grid; gap: 16px; margin-top: clamp(28px, 4vw, 48px); padding: clamp(20px, 3vw, 36px);
	border: 1px solid var(--ui-line-2); border-radius: var(--ui-r-l); background: var(--ui-card); box-shadow: var(--ui-sh-1);
}
.ui-ar__warn-i { position: absolute; top: clamp(18px, 2.6vw, 30px); right: clamp(18px, 2.6vw, 30px); width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: rgba(168, 79, 2, .08); fill: none; stroke: var(--ui-orange-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ui-ar__warn-i circle { fill: var(--ui-orange-ink); }
.ui-ar__prose .ui-ar__warn h2 { margin-top: 0; padding-right: 60px; }
.ui-ar__prose .ui-ar__warn ul { counter-reset: ui-w; gap: 0; }
.ui-ar__prose .ui-ar__warn ul > li { counter-increment: ui-w; padding: 12px 0 12px 44px; line-height: 1.6; border-top: 1px solid var(--ui-line); }
.ui-ar__prose .ui-ar__warn ul > li::before {
	content: counter(ui-w, decimal-leading-zero); left: 0; top: calc(12px + .8lh - 8px); width: auto; height: auto; border-radius: 0; background: none;
	font-size: var(--ui-fs-xs); font-weight: 700; line-height: 16px; letter-spacing: .08em; color: var(--ui-orange-ink); font-variant-numeric: tabular-nums;
}
/* Rozdział "Najkrócej" jako karta podsumowania ze złotą ramką */
.ui-ar__sum {
	position: relative; display: grid; gap: 18px; margin-top: clamp(28px, 4vw, 48px); padding: clamp(20px, 3vw, 36px);
	border: 1px solid var(--ui-gold); border-radius: var(--ui-r-l); background: var(--ui-card); box-shadow: 0 0 0 5px rgba(201, 164, 106, .09), var(--ui-sh-1);
}
.ui-ar__prose .ui-ar__sum h2 { margin-top: 0; }
.ui-ar__kadr { display: grid; gap: 12px; margin-block: 12px; }
.ui-ar__kadr .ui-win { aspect-ratio: 16 / 9; border-radius: var(--ui-r-l); }
.ui-ar__kadr .ui-win img { height: 100%; border-radius: 0; } /* .ui-prose img ma height:auto */
.ui-ar__kadr figcaption { display: flex; align-items: center; gap: 12px; }
.ui-ar__kadr figcaption::before { content: ""; width: 28px; height: 1px; background: var(--ui-gold); }
.ui-ar__pages { display: flex; gap: 12px; align-items: center; font-weight: 600; }

/* Spis: lista na złotej linii (desktop, od 1100 px); niżej "Spis treści" przypięty nad dokiem i popover (sekcja 8) */
.ui-ar__side { display: none; }
.ui-ar__toc-ol a { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; gap: 6px; min-height: 44px; padding: 10px 6px; border-radius: 12px; font-size: var(--ui-fs-s); line-height: 1.4; color: var(--ui-ink-2); transition: color var(--ui-t1), background-color var(--ui-t1); }
.ui-ar__toc-ol a:hover { color: var(--ui-ink); background: rgba(22, 18, 14, .04); }
.ui-ar__tn { font-size: var(--ui-fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--ui-gold-ink); }
.ui-ar__toc-ol a[aria-current] { color: var(--ui-gold-ink); font-weight: 600; }
.ui-ar__toc { display: none; }
.ui-ar__toc .ui-ar__toc-ol { scrollbar-width: thin; scrollbar-color: var(--ui-line-2) transparent; }
@media (min-width: 1100px) {
	.ui-ar__body { display: grid; grid-template-columns: var(--ui-ar-cols); column-gap: var(--ui-ar-gap); align-items: start; }
	.ui-ar__main { grid-column: 2; grid-row: 1; }
	.ui-ar__side { display: block; position: sticky; z-index: 20; grid-column: 1; grid-row: 1; top: calc(var(--ui-hd) + 40px); width: min(100%, 288px); margin: 0; }
	/* Spis nigdy wyższy niż ekran: lista przewija się sama (bieżący rozdział trzyma JS), etykieta i "Na początek" zostają */
	.ui-ar__toc { display: grid; gap: 16px; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - var(--ui-hd) - 72px); max-height: calc(100dvh - var(--ui-hd) - 72px); }
	/* Lista przewija się w swoim pudełku; 8 px z lewej, żeby halo bieżącego punktu nie było ucięte */
	.ui-ar__toc > .ui-ar__toc-ol { overflow: auto; overscroll-behavior: contain; margin-left: -8px; padding-left: 8px; }
	.ui-ar__toc > .ui-ar__toc-ol.is-over { --m-t: 28px; --m-b: 40px; -webkit-mask: linear-gradient(transparent, #000 var(--m-t), #000 calc(100% - var(--m-b)), transparent); mask: linear-gradient(transparent, #000 var(--m-t), #000 calc(100% - var(--m-b)), transparent); }
	.ui-ar__toc > .ui-ar__toc-ol.is-start { --m-t: 0px; }
	.ui-ar__toc > .ui-ar__toc-ol.is-end { --m-b: 0px; }
	.ui-ar__prose h2, .ui-ar__prose h3 { scroll-margin-top: 24px; }
	/* Lista na linii: punkty jak na meridianie, przeczytane złote, bieżący z halo; linia napełnia się w czasie czytania */
	.ui-ar__toc .ui-ar__toc-ol { position: relative; display: grid; }
	.ui-ar__toc .ui-ar__toc-ol::before, .ui-ar__toc .ui-ar__toc-ol::after { content: ""; position: absolute; left: 12px; top: 24px; bottom: 24px; width: 1px; background: var(--ui-line-2); }
	.ui-ar__toc .ui-ar__toc-ol::after { background: var(--ui-gold); transform: scaleY(0); transform-origin: top; display: none; }
	.ui-ar__toc .ui-ar__toc-ol a { position: relative; grid-template-columns: 9px 28px minmax(0, 1fr); gap: 0 12px; padding: 10px 0; border-radius: 0; background: none; }
	.ui-ar__toc .ui-ar__toc-ol a::before {
		content: ""; position: relative; z-index: 1; align-self: start; margin-top: .45em; width: 9px; height: 9px; border-radius: 50%;
		border: 1px solid var(--ui-line-2); background: var(--ui-ivory); box-shadow: 0 0 0 4px var(--ui-ivory);
		transition: border-color var(--ui-t2), background-color var(--ui-t2), box-shadow var(--ui-t2);
	}
	.ui-ar__toc .ui-is-read a::before { border-color: var(--ui-gold); background: var(--ui-gold); }
	.ui-ar__toc a[aria-current]::before { border-color: var(--ui-gold); background: var(--ui-ivory); box-shadow: 0 0 0 4px var(--ui-ivory), 0 0 0 7px rgba(201, 164, 106, .3); }
	.ui-ar__toc a:hover::before { border-color: var(--ui-gold); }
	.ui-ar__top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-ink-3); }
	.ui-ar__top:hover { color: var(--ui-ink); }
	.ui-ar__body--solo .ui-ar__main { grid-column: 2; }
}
@media (min-width: 1100px) and (max-height: 820px) {
	.ui-ar__toc { gap: 10px; }
	.ui-ar__toc .ui-ar__toc-ol a { padding-block: 7px; min-height: 40px; }
}

/* Najbliższy kurs w prawym marginesie (od 1300 px, gdy kolumna ma co najmniej ok. 210 px): ciemna karta, lepka pod headerem */
.ui-ar__rail { display: none; }
@media (min-width: 1300px) {
	.ui-ar__rail { display: block; grid-column: 3; grid-row: 1; position: sticky; top: calc(var(--ui-hd) + 40px); max-width: 280px; justify-self: end; width: 100%; }
	.ui-ar__nx {
		display: grid; gap: 6px; padding: 8px 8px 16px; border-radius: var(--ui-r-l); box-shadow: var(--ui-sh-2);
		transition: transform var(--ui-t2) var(--ui-ease), box-shadow var(--ui-t2);
	}
	.ui-ar__nx:hover { transform: translateY(-3px); }
	.ui-ar__nx:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
	.ui-ar__nx-m { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 4; margin-bottom: 8px; border-radius: calc(var(--ui-r-l) - 8px); background: var(--ui-noir-3); }
	.ui-ar__nx-m img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .9; transition: transform 1.2s var(--ui-ease); }
	.ui-ar__nx:hover .ui-ar__nx-m img { transform: scale(1.04); }
	.ui-ar__nx > :not(.ui-ar__nx-m) { padding-inline: 10px; }
	.ui-ar__nx .ui-label { color: var(--ui-gold); }
	.ui-ar__nx-d { font-size: 1.375rem; font-weight: 300; letter-spacing: -.02em; line-height: 1.2; color: var(--ui-snow); }
	.ui-ar__nx-t { font-size: var(--ui-fs-s); color: var(--ui-snow-2); line-height: 1.4; }
	.ui-ar__nx-x { font-size: var(--ui-fs-xs); font-weight: 600; color: var(--ui-gold); line-height: 1.4; }
	.ui-ar__nx-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 4px; }
	.ui-ar__nx-p { font-size: var(--ui-fs-s); font-weight: 600; color: var(--ui-snow); }
	.ui-ar__nx-go { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 6px; border-top: 1px solid var(--ui-hair); font-size: var(--ui-fs-s); font-weight: 600; color: var(--ui-snow); }
	.ui-ar__nx-go .ui-ic { transition: transform var(--ui-t2) var(--ui-ease); }
	.ui-ar__nx:hover .ui-ar__nx-go .ui-ic { transform: translateX(4px); }
}
@media (min-width: 1300px) and (prefers-reduced-motion: reduce) { .ui-ar__nx:hover, .ui-ar__nx:hover .ui-ar__nx-m img { transform: none; } }

/* Pasek postępu czytania: złota linia 2 px u góry ekranu, napędzana przewijaniem treści (bez JS) */
.ui-ar__bar { display: none; }
/* Od 1100 px postęp pokazuje złota linia spisu, więc pasek u góry ekranu jest tylko na telefonie i tablecie */
@media (min-width: 1100px) { .ui-ar:has(.ui-ar__toc) .ui-ar__bar { display: none !important; } }
@supports (animation-timeline: view()) and (timeline-scope: --a) {
	@media (prefers-reduced-motion: no-preference) {
		.ui-ar { timeline-scope: --ui-read; }
		.ui-ar__body { view-timeline: --ui-read block; }
		.ui-ar__bar { display: block; position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 2px; background: var(--ui-gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }
		.ui-ar__bar, .ui-ar__toc .ui-ar__toc-ol::after { animation: ui-read linear both; animation-timeline: --ui-read; animation-range: contain 0% contain 100%; }
		.ui-ar__toc .ui-ar__toc-ol::after { display: block; animation-name: ui-read-y; }
	}
}
@keyframes ui-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ui-read-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Nota o autorce */
.ui-ar__author {
	display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px 20px; align-items: center;
	margin-top: clamp(48px, 6vw, 80px); padding: clamp(14px, 2vw, 22px);
}
.ui-ar__face { width: 96px; aspect-ratio: 4 / 5; border-radius: var(--ui-r); }
.ui-ar__who { display: grid; gap: 4px; }
.ui-ar__name { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.15; }
.ui-ar__role { font-size: var(--ui-fs-s); font-weight: 600; color: var(--ui-gold-ink); }
.ui-ar__facts { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--ui-line); }
.ui-ar__facts li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; font-size: var(--ui-fs-s); color: var(--ui-ink-2); line-height: 1.5; }
.ui-ar__facts li::before { content: ""; justify-self: center; width: 6px; height: 6px; margin-top: calc(.75em - 3px); border-radius: 50%; background: var(--ui-gold); }
.ui-ar__more { grid-column: 1 / -1; }
@media (min-width: 720px) {
	.ui-ar__author { grid-template-columns: 168px minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; column-gap: 28px; }
	.ui-ar__face { grid-row: 1 / span 3; width: 168px; }
	.ui-ar__facts, .ui-ar__more { grid-column: 2; }
	.ui-ar__facts { padding-top: 12px; }
}

/* 5. Płyta "Przećwicz to na stole" (ciemna) z najbliższymi terminami ------------------------ */
.ui-ar-cta__in { display: grid; gap: clamp(32px, 4vw, 56px); }
/* Poświata za ilustracją po lewej (nie pod listą terminów) */
.ui-ar-cta .ui-plate__glow { inset: 18% auto auto -12%; width: 52%; opacity: .75; }
/* Dłoń przy nagłówku (prawa kolumna wiersza H2), nie pod przyciskiem: kolumna nie ma pustego ogona */
.ui-ar-cta__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 20px; justify-items: start; align-content: start; }
.ui-ar-cta__head > * { grid-column: 1 / -1; }
.ui-ar-cta__head > .ui-chap { grid-row: 1; }
.ui-ar-cta__h { grid-column: 1; grid-row: 2; }
.ui-ar-cta__il { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; width: clamp(92px, 9vw, 150px); height: auto; margin-bottom: .35em; }
.ui-ar-cta__head > .ui-lead { grid-row: 3; }
.ui-ar-cta__btn { grid-row: 4; }
.ui-ar-cta__btn { margin-top: 8px; }
.ui-ar-cta__terms { display: grid; gap: 14px; align-content: start; }
/* Odbiór: od 1300 px (karta "Najbliższy termin" w marginesie) płyta bez terminu z karty, niżej pełna lista */
.ui-ar-cta__terms--w { display: none; }
@media (min-width: 1300px) { .ui-ar-cta__terms--n { display: none; } .ui-ar-cta__terms--w { display: grid; } }
@media (min-width: 1024px) {
	.ui-ar-cta__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 5vw, 96px); align-items: start; }
	.ui-ar-cta__terms .ui-label { min-height: 1.5em; display: flex; align-items: center; }
}
/* Wiersz terminu na ciemnej płycie (wspólny .ui-dr w ui.css jest jasny) */
.ui-ar-cta .ui-dr { background: rgba(246, 242, 236, .045); border-color: var(--ui-hair); }
.ui-ar-cta .ui-dr:hover { border-color: var(--ui-hair-2); box-shadow: none; background: rgba(246, 242, 236, .07); }
.ui-ar-cta .ui-dr__main a, .ui-ar-cta .ui-dr .ui-price { color: var(--ui-snow); }
.ui-ar-cta .ui-dr__city, .ui-ar-cta .ui-dr__days, .ui-ar-cta .ui-dr__main small { color: var(--ui-snow-2); }
.ui-ar-cta .ui-dr__city .ui-ic { color: var(--ui-gold); }
/* Układ wiersza: wspólny wariant z ui.css (sekcja 21); tu tylko kolory płyty i cel 44 px */
.ui-ar-cta .ui-dr__main a { min-height: 44px; }
.ui-ar-cta .ui-dr .ui-dp b { color: var(--ui-snow); }
.ui-ar-cta .ui-tl__empty { color: var(--ui-snow-2); }
/* "Zapisz się" w wierszach jako obrys na ciemnym: wspólna reguła w ui.css (single.php: lista z 'next' => false). */
/* Wąska płyta (telefon do ok. 380 px: lista 232 do 300 px): miasto i dni w osobnych wierszach, "Zapisz się" na całą
   szerokość pod spodem. Wspólny układ z ui.css (56px max-content 1fr auto) wypychał przycisk poza płytę (r2). */
@container (max-width: 319px) {
	.ui-ar-cta .ui-dr {
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas: "dp main" "dp st" "dp city" "dp days" "dp price" "act act";
	}
	.ui-ar-cta .ui-dr__city { min-width: 0; white-space: normal; }
	.ui-ar-cta .ui-dr__city + .ui-dr__days::before { content: none; }
	.ui-ar-cta .ui-dr__act { justify-self: stretch; }
	.ui-ar-cta .ui-dr__act .ui-btn { flex: 1; }
}

/* 6. Powiązane wpisy ---------------------------------------------------------------------- */
.ui-ar-rel__all { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
/* Telefon: poziomy rząd kart ze snapem (jak w aplikacji), bez zajawek; kolejna karta wystaje z prawej */
@media (max-width: 719px) {
	.ui-ar-rel .ui-bl__grid {
		display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin-inline: calc(-1 * var(--ui-g)); padding: 4px var(--ui-g) 12px; scroll-padding-inline: var(--ui-g);
	}
	.ui-ar-rel .ui-bl__grid::-webkit-scrollbar { display: none; }
	.ui-ar-rel .ui-bc { flex: 0 0 82%; scroll-snap-align: start; }
	.ui-ar-rel .ui-bc:hover { transform: none; }
	.ui-ar-rel .ui-bc__x { display: none; }
	.ui-ar-rel .ui-bc__t { font-size: 1.1875rem; }
}


/* 7. Runda 3 ------------------------------------------------------------------------------- */
/* Newsletter pod listą: bilet i karta formularza zaczynają się na jednej wysokości */
@media (min-width: 1024px) { .ui-bl__nl .ui-nl { align-items: start; } }

/* Spis treści: sygnały i podsumowanie bez numeru (krótka złota kreska zamiast liczby) */
.ui-ar__tn--x { align-self: center; justify-self: start; width: 12px; height: 1px; background: var(--ui-gold); }

/* Karty z wyliczeń w treści (lista albo akapity z pogrubioną etykietą): numer, etykieta jako tytuł, reszta zdania pod nią */
.ui-ar__prose .ui-ar__tiles { counter-reset: ui-t; display: grid; gap: 10px; margin-block: 8px; padding: 0; }
.ui-ar__prose .ui-ar__tiles > :is(li, p) {
	counter-increment: ui-t; position: relative; display: block; margin: 0; padding: 48px 20px 20px;
	font-size: var(--ui-fs-s); line-height: 1.6; color: var(--ui-ink-2);
	background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r-l); box-shadow: var(--ui-sh-1);
}
.ui-ar__prose .ui-ar__tiles > :is(li, p)::before {
	content: counter(ui-t, decimal-leading-zero); position: absolute; top: 18px; left: 20px; width: auto; height: auto; margin: 0;
	border-radius: 0; background: none; font-size: var(--ui-fs-xs); font-weight: 700; line-height: 16px; letter-spacing: .12em; color: var(--ui-gold-ink); font-variant-numeric: tabular-nums;
}
/* Złoty punkt meridianu w prawym górnym rogu karty */
.ui-ar__prose .ui-ar__tiles > :is(li, p)::after {
	content: ""; position: absolute; top: 22px; right: 20px; width: 7px; height: 7px; border-radius: 50%;
	background: var(--ui-gold); box-shadow: 0 0 0 4px rgba(201, 164, 106, .16);
}
.ui-ar__prose .ui-ar__tiles strong:first-child { display: block; margin-bottom: 6px; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--ui-ink); }
@media (min-width: 560px) {
	.ui-ar__prose .ui-ar__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	/* Pięć kart: dwie szerokie, trzy węższe (siatka 6 kolumn), bez samotnej karty na końcu */
	.ui-ar__prose .ui-ar__tiles--n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.ui-ar__prose .ui-ar__tiles--n5 > :nth-child(-n+2) { grid-column: span 3; }
	.ui-ar__prose .ui-ar__tiles--n5 > :nth-child(n+3) { grid-column: span 2; }
	.ui-ar__prose .ui-ar__tiles--n3 > :last-child { grid-column: 1 / -1; }
}

/* Oś czasu sesji: dwa paski w skali 0 do 120 min, liczby z rozdziału także jako tekst pod paskiem */
.ui-ar__prose .ui-ar__tm {
	display: grid; gap: 22px; margin-block: 12px; padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 32px) clamp(16px, 2.4vw, 24px);
	background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r-l); box-shadow: var(--ui-sh-1);
}
.ui-ar__tm-ax { position: relative; height: 16px; margin-left: 0; }
.ui-ar__tm-ax span { position: absolute; left: var(--x); top: 0; translate: -50% 0; font-size: var(--ui-fs-xs); font-weight: 600; line-height: 16px; color: var(--ui-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-ar__tm-ax span:first-child { translate: 0 0; }
.ui-ar__tm-ax span:last-child { translate: -100% 0; }
.ui-ar__tm-r { display: grid; gap: 10px; }
.ui-ar__prose .ui-ar__tm-n { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--ui-ink); }
.ui-ar__tm-bar {
	position: relative; height: 14px; border-radius: 999px;
	background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(22, 18, 14, .14) calc(25% - 1px) 25%), rgba(22, 18, 14, .05);
}
.ui-ar__tm-s { position: absolute; top: 0; bottom: 0; left: var(--a); width: calc(var(--b) - var(--a)); border-radius: 999px; background: var(--ui-gold); transform-origin: left; }
.ui-ar__tm-s--2 { background: rgba(201, 164, 106, .4); border-radius: 0 999px 999px 0; }
.ui-ar__tm-s:not(.ui-ar__tm-s--2) { z-index: 1; }
.ui-ar__tm-d { position: absolute; z-index: 2; top: 50%; left: var(--x); width: 8px; height: 8px; translate: -50% -50%; border-radius: 50%; background: var(--ui-card); border: 2px solid var(--ui-gold-ink); }
.ui-ar__prose .ui-ar__tm-l { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--ui-fs-s); line-height: 1.5; color: var(--ui-ink-2); }
.ui-ar__tm-l span { display: inline-flex; gap: 6px; align-items: baseline; }
.ui-ar__tm-l b { font-weight: 600; color: var(--ui-ink); }
.ui-ar__tm-l b::after { content: ":"; }
.ui-ar__prose .ui-ar__tm-x { font-size: .875rem; line-height: 1.55; color: var(--ui-ink-3); }
.ui-ar__tm figcaption { padding-top: 14px; border-top: 1px solid var(--ui-line); font-size: .875rem; line-height: 1.55; color: var(--ui-ink-2); }

/* Rysunek "nadgarstek" (r2): segmenty jak w manekinie (przedramię, staw, śródręcze, palce), oś złotą przerywaną linią,
   łuk kąta prostego. Bez celowników i bez punktu przeciążenia. */
.il--wrist .il__axis { fill: none; stroke: var(--ui-gold); stroke-width: 1; stroke-dasharray: 3 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.il--wrist .il__d:not(.il__base) { stroke-width: 1.5; }
.ui-ar__prose .ui-ar__tm > .ui-label { color: var(--ui-gold-ink); }

/* 8. Elewacja 2.2.0 ---------------------------------------------------------------------- */
/* Inwentarz ruchu (elewacja.md §3.0): lista bloga bez wejścia i bez sygnatury, wpis bez wejścia i z jedną sygnaturą
   ("Meridian czytania"). Rysunki na tych stronach (meridian hero wpisu, ilustracje w treści, technika na karcie
   "Najbliższy kurs" i na płycie terminów) stoją narysowane od pierwszej klatki; ruch poza sygnaturą to tylko .ui-rise. */
.js :is(.ui-blog, .ui-ar, .ui-ar-cta) .il:not(.x) .il__d { stroke-dashoffset: 0; transition: none; }
.js :is(.ui-blog, .ui-ar, .ui-ar-cta) .il:not(.x) :is(.il__pt, .il__city, .il__leaf) { opacity: 1; transition: none; }
:is(.ui-blog, .ui-ar, .ui-ar-cta) .il--tech .il__d { stroke-dasharray: none; animation: none; }

/* Meridian czytania: punkt przy każdym rozdziale spisu (złoty krążek nad pierścieniem a::before). Zapala się
   (opacity) na osi view() swojego H2; bez wsparcia osi zapala go klasa ui-is-read z ui-blog.js. */
.ui-ar__toc-ol a { position: relative; }
.ui-ar__tp { position: absolute; z-index: 2; left: 0; top: calc(10px + .45em); width: 9px; height: 9px; border-radius: 50%; background: var(--ui-gold); opacity: 0; pointer-events: none; transition: opacity var(--ui-t2); }
.ui-ar__toc-ol .ui-is-read .ui-ar__tp, .ui-ar__toc-ol a[aria-current] .ui-ar__tp { opacity: 1; }
@media (min-width: 1100px) {
	/* Pierścień zostaje szary do zapalenia; bieżący rozdział ma halo, punkt i złoty tekst */
	.ui-ar__toc .ui-is-read a::before { border-color: var(--ui-gold); background: var(--ui-ivory); }
	.ui-ar__toc a[aria-current]::before { box-shadow: 0 0 0 4px var(--ui-ivory), 0 0 0 7px rgba(201, 164, 106, .32); }
}
@supports (animation-timeline: view()) and (timeline-scope: --a) {
	@media (prefers-reduced-motion: no-preference) {
		/* Oś H2 liczona w oknie skróconym od dołu o 65%: "entry 0%" to chwila, gdy góra H2 mija linię 35% od góry okna,
		   czyli ta sama, w której ui-blog.js (rootMargin -65%) ustawia bieżący rozdział. Punkt nie wyprzedza spisu (r2). */
		.ui-ar__prose h2 { view-timeline-inset: 0% 65%; }
		.ui-ar__tp { transition: none; animation: ui-tp linear both; animation-timeline: var(--tl); animation-range: entry 0% entry 60%; }
		/* Mapa kroków w treści: te same punkty, ta sama oś (przed rozdziałem przygaszone) */
		.ui-ar__il--steps .il__pt--tl .il__core, .ui-ar__il--steps .il__pt--tl .il__halo { animation: ui-tp-dim linear both; animation-timeline: var(--tl); animation-range: entry 0% entry 60%; }
	}
}
@keyframes ui-tp { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-tp-dim { from { opacity: .28; } to { opacity: 1; } }

/* Telefon i tablet: "Spis treści" przypięty nad dokiem (sticky na końcu treści artykułu, więc jest tylko przy czytaniu),
   lista w popoverze nad wszystkim. Pasek postępu u góry zostaje. Wyżej dok: przycisk podnosi się nad niego. */
.ui-ar__tocb, .ui-ar__pop { display: none; }
@media (max-width: 1099px) {
	.ui-ar__tocb {
		position: sticky; z-index: 30; bottom: calc(12px + var(--ui-safe)); display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px;
		width: min(100%, 420px); min-height: 56px; margin: clamp(32px, 6vw, 48px) 0 0; padding: 7px 18px 7px 7px; border-radius: 999px; text-align: left; cursor: pointer;
		font: inherit; color: var(--ui-ink); background: var(--ui-card); border: 1px solid var(--ui-line-2); box-shadow: 0 18px 40px -18px rgba(22, 18, 14, .45);
		transition: bottom var(--ui-t3) var(--ui-ease-sheet);
	}
	body:has(.ui-dock.is-in:not(.is-hid)) .ui-ar__tocb { bottom: calc(var(--ui-dock) + 12px + var(--ui-safe)); }
	body:has(.ui-dock.is-in.has-next:not(.is-hid)) .ui-ar__tocb { bottom: calc(var(--ui-dock) + 64px + var(--ui-safe)); }
	/* Odbiór r5: przy czytaniu (body.ui-ar-reading z ui-blog.js) dok bez wiersza "Najbliżej": pigułka i zakładki, bez paska
	   terminu (razem było ok. 185 z 844 px). Ukryty wiersz nie łapie fokusu (visibility). Propozycja do fundamentu: to samo w ui.js 16. */
	body.ui-ar-reading .ui-dock.has-next .ui-dock__next { height: 0; border-bottom-color: transparent; visibility: hidden; }
	body.ui-ar-reading:has(.ui-dock.is-in.has-next:not(.is-hid)) .ui-ar__tocb { bottom: calc(var(--ui-dock) + 12px + var(--ui-safe)); }
	.ui-ar__tocb-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ui-gold-ink); background: var(--ui-ivory); }
	.ui-ar__tocb-i .ui-ic { width: 18px; height: 18px; }
	.ui-ar__tocb-t { display: grid; min-width: 0; line-height: 1.3; }
	.ui-ar__tocb-t small { font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-gold-ink); }
	.ui-ar__tocb-t b { font-size: var(--ui-fs-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.ui-ar__tocb-n { font-size: var(--ui-fs-xs); font-weight: 600; color: var(--ui-ink-3); }
	.ui-ar__tocb[hidden], .ui-ar__tocb-n[hidden] { display: none; }
	/* Popover: arkusz u dołu ekranu (nad dokiem, który na czas otwarcia zjeżdża) */
	.ui-ar__pop:popover-open {
		display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 4px; position: fixed; inset: auto var(--ui-g) calc(12px + var(--ui-safe)); margin: 0;
		width: auto; max-width: 560px; max-height: min(84dvh, 720px); padding: 10px 10px 6px 18px; border: 1px solid var(--ui-line); border-radius: 24px;
		color: var(--ui-ink); background: var(--ui-card); box-shadow: 0 30px 80px -24px rgba(22, 18, 14, .55);
	}
	.ui-ar__pop::backdrop { background: rgba(11, 9, 7, .32); }
	.ui-ar__pop-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
	.ui-ar__pop-x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; color: var(--ui-ink-2); background: none; cursor: pointer; }
	.ui-ar__pop-x:hover { color: var(--ui-ink); background: rgba(22, 18, 14, .05); }
	/* Odbiór: wyżej (11 pozycji mieści się na 844 px) i z zapasem u dołu, żeby ostatni wiersz dało się wyjechać spod maski */
	.ui-ar__pop .ui-ar__toc-ol { overflow: auto; overscroll-behavior: contain; margin: 0; padding: 0 8px 24px 0; }
	.ui-ar__pop .ui-ar__toc-ol.is-over:not(.is-end) { -webkit-mask: linear-gradient(#000 calc(100% - 48px), transparent); mask: linear-gradient(#000 calc(100% - 48px), transparent); }
	/* Wiersz popovera: pierścień, numer, tytuł (punkt zapala się jak w spisie bocznym) */
	.ui-ar__pop .ui-ar__toc-ol li + li { border-top: 1px solid var(--ui-line); }
	.ui-ar__pop .ui-ar__toc-ol a { grid-template-columns: 9px 28px minmax(0, 1fr); gap: 0 12px; padding: 12px 4px 12px 2px; border-radius: 0; }
	.ui-ar__pop .ui-ar__toc-ol a::before { content: ""; align-self: start; margin-top: .45em; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ui-line-2); background: var(--ui-card); }
	.ui-ar__pop .ui-is-read a::before, .ui-ar__pop a[aria-current]::before { border-color: var(--ui-gold); }
	.ui-ar__pop .ui-ar__tp { left: 2px; top: calc(12px + .45em); }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) { .ui-ar__tocb { transition: none; } }

/* r3: pasek nagłówka na wpisach i liście bloga kryjący. Szkło .96 z ui.css przepuszczało tekst artykułu pod logo
   (zrzut r2 hd-390: czytelne wiersze za logo na telefonie po zjechaniu z ciemnego hero). Propozycja do fundamentu:
   to samo globalnie. Ciemny stan nad hero bez zmian. */
.ewa-ui--blog .ui-hd:not([data-tone="dark"])::before { background-color: rgb(247, 244, 239); }

/* Odbiór: spis wpisu bez numerów (pole nonum w ewardega_ui_blog_figures()): bez kolumny numeru, punkt i tytuł */
.ui-ar__toc-ol a.ui-ar__nn { grid-template-columns: minmax(0, 1fr); }
.ui-ar__toc .ui-ar__toc-ol a.ui-ar__nn, .ui-ar__pop .ui-ar__toc-ol a.ui-ar__nn { grid-template-columns: 9px minmax(0, 1fr); }

/* Odbiór 2026-10-12: finał /blog/ z nl-fin-dlonie (ui/blog.php), bez odbicia lustrzanego. Górny brzeg dysku (szczelina
   ensō bez złotej obręczy) schodzi w tło finału: zęby pędzla maski nie odcinają się od czerni */
.ewa-ui--blog .ui-final__disk::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--ui-noir) 0, rgba(11, 9, 7, 0) 22%); }