/*
 * responsive.css — adaptive layer for grawklasy theme.
 *
 * Enqueued AFTER main.css. Holds:
 *   - mobile-first responsive rules (min-width media queries)
 *   - desktop visual corrections against the design reference
 *   - per-block fixes added incrementally during the responsive program
 *
 * Breakpoints (see docs/adr/0001-responsive-breakpoints.md):
 *   tablet  ≥640px
 *   desktop ≥1024px
 *   wide    ≥1440px
 *
 * Tokens come from tokens.css (--gk-*) and main.css legacy :root.
 *
 * Cascade rule: this file always wins same-specificity ties because of
 * enqueue order. Use class-only selectors; avoid !important.
 *
 * Sections appear in priority order from .context/design/blocks-priority.md.
 */

/* =========================================================
 * P0 — shared blocks (PR #3)
 * ========================================================= */

/* ---------- header.php ---------- */

/* Per-link arrow icon (↳) IS in the owner's design — kept from main.css
   (.gk-nav__list a::before, arrow-black/white.png). Earlier RWD pass hid it
   by mistake; restored per owner feedback 06.26. */

/* Extend mobile burger from main.css's 820px breakpoint up to our
 * 1024px desktop threshold (ADR-0001). 821-1023 is the gap. */
@media (min-width: 821px) and (max-width: 1024px) {
	.gk-header__inner {
		flex-wrap: nowrap;
		position: relative;
	}
	.gk-header__brand {
		order: 1;
	}
	.gk-navToggle {
		order: 2;
		margin-left: auto;
		display: inline-flex;
	}
	.gk-nav {
		order: 3;
		flex: 0 0 auto;
		justify-content: flex-start;
		position: fixed;
		inset: 72px 18px auto 18px;
		background: var(--gk-color-bg);
		border: 1px solid var(--gk-color-line);
		border-radius: var(--gk-radius-lg);
		box-shadow: var(--gk-shadow-card);
		padding: 14px;
		transform: translateY(-10px);
		opacity: 0;
		pointer-events: none;
		transition: opacity .15s ease, transform .15s ease;
	}
	body.gk-navOpen .gk-nav {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.gk-nav .gk-nav__list {
		flex-direction: column;
		align-items: flex-start;
		margin-left: 0;
		margin-top: 0;
		width: 100%;
		max-height: min(70vh, 520px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-right: 4px;
	}
	.gk-header__inner {
		padding-bottom: 16px;
	}
}

/* Hide social icons in the mobile/tablet header — burger has the nav,
 * social moves to the footer where it belongs. */
@media (max-width: 1024px) {
	.gk-header__actions {
		display: none;
	}
}

/* ---------- cta-strip (footer.php → .gk-support__bottom) ---------- */

/* Mobile button: scale down so the label fits without clipping. */
@media (max-width: 639px) {
	.gk-support__bottom .gk-support__btn {
		font-size: 14px;
		padding: .7rem 1rem;
		letter-spacing: .03em;
		line-height: 1.25;
		text-align: center;
		white-space: normal;
	}
}

@media (max-width: 374px) {
	.gk-support__bottom .gk-support__btn {
		font-size: 12px;
		padding: .6rem .7rem;
	}
}

/* ---------- footer.php ---------- */

/* Footer stacks at ≤980 in main.css; 981–1023 was a gap where the desktop
   2-col panel (330px + 1fr with a fixed 395px sub-col) overflowed/clipped on
   iPad-landscape widths. Extend the stack up to 1023. */
@media (max-width: 1024px) {
	.gk-footerPanel {
		grid-template-columns: 1fr;
	}
	.gk-footerPanel__left {
		grid-row: auto;
		border-right: 0;
		border-bottom: 3px solid var(--gk-black);
	}
	.gk-footerPanel__top,
	.gk-footerPanel__mid,
	.gk-footerPanel__bottom {
		grid-template-columns: 1fr;
	}
	.gk-footerPanel__title,
	.gk-footerPanel__mid,
	.gk-footerPanel__bottom {
		padding-left: 18px;
	}
	.gk-footerPanel__social,
	.gk-footerPanel__contact,
	.gk-footerPanel__links {
		border-left: 0;
		border-top: 3px solid var(--gk-black);
	}
}

/* Tighter padding on small screens; matches mobile rhythm. */
@media (max-width: 639px) {
	.gk-footer {
		padding: 0 0 32px;
	}
	.gk-footerPanel__mid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.gk-footerPanel__col {
		padding: 12px 14px;
	}
	.gk-footerPanel__title {
		font-size: var(--gk-fs-h4);
		line-height: var(--gk-lh-tight);
	}
}

/* Footer links inline list — wrap cleanly on narrow screens. */
@media (max-width: 374px) {
	.gk-footerLinks.gk-footerLinks--inline {
		flex-wrap: wrap;
		gap: 8px 12px;
	}
}

/* ---------- divider.php (decorative marker squares) ---------- */

/* Mobile compact dividers. */
@media (max-width: 639px) {
	.gk-divider .gk-decorSquares .gk-square {
		width: 22px;
		height: 18px;
	}
	.gk-section--tight.gk-divider {
		padding-top: 16px;
		padding-bottom: 16px;
	}
}

/* =========================================================
 * P0 — critical block fixes (PR #4)
 * ========================================================= */

/* ---------- events.php / events-page.php ---------- */

/* Tablet + small desktop: collapse the 2-col head grid (otherwise it
 * forces ~720px and breaks below). Reset the offset prose layout. */
@media (max-width: 1024px) {
	.gk-eventsMock__head,
	.gk-eventsPage__head {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.gk-eventsMock__headRight.gk-prose,
	.gk-eventsPage__headRight.gk-prose {
		margin-top: 0;
		padding-left: 0;
	}
	.gk-eventsMock__wrap,
	.gk-eventsPage__wrap {
		padding: 40px 28px;
	}
	.gk-eventsMock__titleLine,
	.gk-eventsPage__titleLine {
		font-size: 56px;
	}
}

/* Event cards stack at ≤980 in main.css; 981–1023 (iPad landscape) kept the
   horizontal 3-col row which cramped the text. Extend the stack up to 1023 so
   tablet cards get the same spacious stacked layout as ≤980. */
@media (max-width: 1024px) {
	.gk-eventsMock__row,
	.gk-eventIndex__item.gk-eventsMock__row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		height: auto;
	}
	.gk-eventsMock__thumb {
		flex: 0 0 auto;
		align-self: stretch;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: auto;
		min-height: min(220px, 42vw);
		margin: 10px 0 0;
	}
	.gk-eventsMock__thumb img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
	.gk-eventsMock__main {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		align-self: stretch;
	}
	.gk-eventsMock__side {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding: 0 0 12px;
		align-self: stretch;
	}
	/* CTA w układzie kolumnowym (≤1024): statyczny, pełna szerokość karty,
	   przyklejony pod ramką opisu (był absolutny bottom:-57px → odklejał się
	   i był węższy/nierówny w zakresie 981–1024). */
	.gk-eventsMock__side {
		padding-bottom: 0;
	}
	.gk-eventsMock__itemBtn,
	.gk-eventsMock__row .gk-eventsMock__rowLink .gk-eventsMock__itemBtn,
	.gk-btn.gk-btn--primary.gk-eventsMock__itemBtn {
		position: static;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		margin: 0;
		display: block;
	}
	.gk-eventsMock__itemDetails {
		margin-bottom: 0;
	}
}

/* Phone: small thumbnail LEFT + title/date RIGHT (top row), description + CTA
 * full-width below. Owner: keep the photo small (was full-width & blurry). */
@media (max-width: 767px) {
	.gk-eventsMock__row,
	.gk-eventIndex__item.gk-eventsMock__row {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 14px;
		padding: 14px;
	}
	.gk-eventsMock__thumb {
		flex: 0 0 130px;
		width: 130px;
		max-width: 38%;
		height: 130px;
		min-height: 0;
		margin: 0;
	}
	.gk-eventsMock__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.gk-eventsMock__main {
		flex: 1 1 0;
		min-width: 0;
		padding: 0;
	}
	.gk-eventsMock__side {
		flex: 0 0 100%;
		width: 100%;
		padding: 0;
		margin-top: 12px;
	}
	/* Opis nie może najeżdżać na zdjęcie — wyzeruj ewentualny ujemny margines
	   z desktopu i trzymaj się dołu górnego rzędu. */
	.gk-eventsMock__itemDetails {
		margin-top: 0;
	}
	.gk-eventsMock__row + .gk-eventsMock__row {
		margin-top: 24px;
	}
	.gk-eventsMock__itemTitle {
		font-size: 20px;
		padding-left: 8px;
		padding-right: 8px;
	}
	.gk-eventsMock__itemMeta {
		font-size: 15px;
	}
}

@media (max-width: 639px) {
	.gk-eventsMock__titleLine,
	.gk-eventsPage__titleLine {
		font-size: 40px;
	}
	.gk-eventsMock__wrap,
	.gk-eventsPage__wrap {
		padding: 24px 16px;
	}
}

/* ---------- cooperate.php / cooperate-page.php ---------- */

/* Tablet + small desktop: stack the 2-col grid. The right column had
 * margin-top:237px + padding-left:60px that hid its content on small
 * viewports — both are zeroed here. */
@media (max-width: 1024px) {
	.gk-cooperate__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.gk-cooperate__right {
		margin-top: 16px;
		padding-left: 0;
	}
	/* Desktop fixed values leak to mobile — neutralise. Specyficzność 0,2,0 by
	   pobić main.css .gk-decorSquares.gk-cooperate__squares (absolute) i width. */
	.gk-decorSquares.gk-cooperate__squares {
		position: static;
		right: auto;
		top: auto;
		margin-top: 8px;
	}
	.gk-cooperate__media {
		width: 100%;
		max-width: 100%;
	}
	.gk-cooperate__leadTitle {
		margin: 35px 0;
	}
}

/* ---------- support.php (homepage teaser block, ≠ supportPage) ---------- */

/* The 2-col 420+420 grid demands ~840px. Stack below 1024 and zero out
 * the left-column 100px offset so the widget sits flush. */
@media (max-width: 1024px) {
	.gk-support__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	/* Reverse order: image + description first, calculator + support options
	   below. Everything full width. */
	.gk-support__right {
		order: 1;
		padding-left: 0;
		max-width: none;
		width: 100%;
	}
	.gk-support__left {
		order: 2;
		margin-left: 0;
		max-width: none;
		width: 100%;
	}
	.gk-support__prose,
	.gk-support__mediaText {
		max-width: none;
	}
	.gk-support__media {
		width: 100%;
	}
	.gk-support__widget {
		margin-top: 24px;
		width: 100%;
		max-width: none;
	}
	.gk-support__title {
		margin-top: 0;
	}
}

/* ---------- supportPage.php (currently display:none in main.css) ---------- */

/* The `.gk-supportPage` block is hidden globally in main.css. That is
 * intentional — the wesprzyj-nas page still renders the older
 * `.gk-support` block. When the owner swaps the page content to use
 * the new block, remove the `display:none` rule in main.css and the
 * mobile rules below take effect. */
@media (max-width: 1024px) {
	.gk-supportPage__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* =========================================================
 * P1 — page blocks (PR #5)
 * ========================================================= */

/* ---------- hero.php (home only) ---------- */

/* Tablet + small desktop: drop the fixed 870px stage height, shrink the
 * left-anchored logo + headline so MISJA: EDUKACJA sits over the photo
 * instead of off-canvas, and let the teal accent stretch to the edge. */
@media (max-width: 1024px) {
	.gk-hero {
		width: 100%;
		margin-inline: 0;
		margin-bottom: 56px;
	}
	.gk-hero__stage {
		height: auto;
		max-height: none;
		aspect-ratio: 16 / 9;
	}
	.gk-hero__logo {
		margin-left: 32px;
	}
	.gk-hero__headline {
		margin-left: 32px;
		bottom: 16px;
		max-width: min(560px, 92vw);
	}
	.gk-hero__kicker,
	.gk-hero__title {
		font-size: clamp(36px, 6.5vw, 64px);
	}
	.gk-hero__headlineBox h1 {
		font-size: clamp(32px, 6vw, 60px);
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.gk-hero__accent {
		bottom: -3px;
		width: 60%;
		height: 24px;
	}
}

@media (max-width: 639px) {
	.gk-hero__stage {
		aspect-ratio: 4 / 5;
	}
	.gk-hero__logo {
		margin-left: 16px;
		margin-top: 16px;
	}
	.gk-hero__headline {
		margin-left: 16px;
	}
	.gk-hero__accent {
		bottom: -16px;
		height: 16px;
	}
}

/* ---------- about-intro.php (home, o-nas) ---------- */

/* Tablet + small desktop: 2-col stacks; bring image+text inline so the
 * narrow tablet width doesn't crush the right image to ~200px. */
@media (max-width: 1024px) {
	.gk-about__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.gk-about__line {
		display: none;
	}
	.gk-aboutIntro__bottom {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.gk-aboutIntro__topHead {
		flex-wrap: wrap;
	}
}

@media (max-width: 639px) {
	.gk-aboutIntro__introWide p {
		font-size: 18px;
	}
}

/* ---------- projects-hero.php (nasze-projekty) ---------- */

@media (max-width: 1024px) {
	.gk-projectsHero__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.gk-projectsHero__media {
		max-width: 100%;
	}
}

/* projects.php (homepage teaser) — large media has 100px margin-left
 * that pushes content off-canvas on tablets. */
@media (max-width: 1024px) {
	.gk-projectsHome__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.gk-projectsHome__media {
		max-width: 100%;
		margin-left: 0;
		width: 100%;
	}
	.gk-projectsHome__media .gk-media {
		width: 100%;
	}
}

/* ---------- project-section.php ---------- */

/* Stack the 1fr 1fr "logo + description / title + image" grid on tablet. */
@media (max-width: 1024px) {
	.gk-projectSection__top {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.gk-projectSection__topSquares {
		justify-content: flex-start;
	}
	.gk-titlePlate.gk-projectSection__title > .gk-titlePlate__text {
		font-size: 32px;
	}
	.gk-projectSection__rightTitle {
		font-size: 32px;
	}
}

@media (max-width: 639px) {
	.gk-projectSection__leftProse {
		font-size: 18px;
	}
	.gk-titlePlate.gk-projectSection__title > .gk-titlePlate__text {
		font-size: 26px;
	}
	.gk-projectSection__rightTitle {
		font-size: 26px;
	}
}

/* ---------- event-index-row.php ---------- */

/* Row layout already handled in PR #4 for .gk-eventsMock__row at <768.
 * This block ensures the keyboard-focusable button variant (renders as
 * <button> on the wydarzenia archive) also stacks. */
@media (max-width: 767px) {
	.gk-eventIndex__item.gk-eventsMock__row {
		flex-direction: column;
		text-align: left;
	}
}

/* ---------- event-expanded.php (wydarzenia archive expanded view) ---------- */

/* The expanded event view is desktop-2-col: left=description/BILET/map,
 * right=program timetable. Stack on tablet; zero the 245px left padding
 * that anchors content to the desktop offset. */
@media (max-width: 1024px) {
	.gk-eventExpanded__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.gk-eventExpanded__left {
		padding-left: 0;
	}
	.gk-eventExpanded__headerTop {
		flex-wrap: wrap;
	}
}

@media (max-width: 639px) {
	.gk-eventExpanded__title {
		font-size: clamp(28px, 6vw, 44px);
	}
}

/* =========================================================
 * P2 / P3 — polish blocks (PR #6)
 * ========================================================= */

/* ---------- partners.php (home) ---------- */

/* Logos already wrap via flex. Tighten gap + size on tablet/mobile so
 * 5 logos don't shrink to illegible scale at intermediate widths. */
@media (max-width: 1024px) {
	.gk-partners__logos {
		gap: 24px 32px;
	}
	.gk-partners__logos img {
		max-height: 40px;
	}
}

@media (max-width: 639px) {
	.gk-partners__logos {
		gap: 16px 20px;
	}
	.gk-partners__logos img {
		max-height: 32px;
	}
}

/* ---------- people.php (kontakt) ---------- */

/* Existing main.css already drops to 2-col, then 1-col at narrow widths.
 * Unwind the 100px left margin that anchors the grid to desktop offset
 * — collapses on tablet so the grid fills its container. */
@media (max-width: 1024px) {
	.gk-peopleGrid {
		margin-left: 0;
	}
}

@media (max-width: 639px) {
	.gk-person__name {
		font-size: 1.1rem;
	}
	.gk-person__role {
		font-size: 12px;
		white-space: normal;
		word-break: break-word;
	}
}

/* ---------- about-actions.php (o-nas — NASZE DZIAŁANIA) ---------- */

/* Items have padding-left:100px and font-size:33.33px tuned for desktop.
 * Below 1024 these crowd small viewports — scale down and zero the
 * left offset so action rows breathe. */
@media (max-width: 1024px) {
	.gk-actionsItem {
		padding-bottom: 32px;
	}
	.gk-actionsItem__body {
		padding-left: 0;
	}
	.gk-actionsItem__body,
	.gk-actionsItem__body * {
		font-size: 22px;
	}
	.gk-actionsItem__body div {
		font-size: 16px;
	}
	.gk-actionsItem__squares .gk-square {
		width: 44px !important;
		height: 36px !important;
	}
	.gk-actionsItem__tag {
		padding-left: 16px;
		padding-right: 24px;
	}
}

@media (max-width: 639px) {
	.gk-actionsItem__body,
	.gk-actionsItem__body * {
		font-size: 18px;
	}
	.gk-actionsItem__squares .gk-square {
		width: 32px !important;
		height: 26px !important;
	}
}

/* ---------- contact-title.php / contact-details.php (kontakt) ---------- */

@media (max-width: 1024px) {
	.gk-contactTitle .gk-container {
		flex-wrap: wrap;
		gap: 16px;
	}
}

@media (max-width: 639px) {
	.gk-contactDetails__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.gk-contactTitle {
		padding-top: 16px;
		padding-bottom: 12px;
	}
}

/* ---------- project-gallery.php (nasze-projekty) ---------- */

/* Slider arrows + media frame may overflow on tablet; constrain. */
@media (max-width: 1024px) {
	.gk-projectsHomeSlider__slide .gk-media {
		width: 100%;
		height: auto;
	}
	.gk-projectsHomeSlider__tag {
		max-width: 90%;
	}
}

/* ---------- event-map.php (wydarzenia-expanded) ---------- */

/* main.css already has a <520 rule that caps the map at 280px.
 * Add a tablet step so the map doesn't take 52vw on iPads in landscape. */
@media (min-width: 521px) and (max-width: 1024px) {
	.gk-eventMap {
		min-height: 360px;
	}
	.gk-eventMap__canvas {
		height: 360px;
		min-height: 360px;
	}
}

/* =========================================================
 * Polish round 2 — global + per-block (PR #7)
 *
 * Targets every ⚠️ Partial / ❌ Open finding from diff-results.md that
 * can be closed in CSS alone (no PHP/CMS edits).
 * ========================================================= */

/* ---------- global container width ---------- */

/* `--gk-container` lives in main.css :root at 1682px. Mockup canvas is
 * ~1800px. Override here so all `.gk-container` consumers + `.gk-hero`
 * + section max-widths grow to the mockup width. main.css cascade
 * stays consistent — every consumer reads the same var. */
:root {
	--gk-container: 1800px;
}

/* ---------- header.php — desktop whitespace ---------- */

/* main.css has `padding-bottom:65px` on `.gk-header__inner` (visible
 * gap between header and hero in renders). Mockup shows tight rhythm;
 * trim to 24px at desktop only — mobile burger panel already overrides. */
@media (min-width: 1025px) {
	.gk-header__inner {
		padding-bottom: 24px;
	}
}

/* ---------- hero.php — photo crop ---------- */

/* BREAKPOINT NOTE — 981, not 1025. main.css has no 1024/1025 boundary at all:
   every media query in it is 980/981 (plus 820 and 520 for phones), so its
   mobile guard is `@media (max-width: 980px)` and its desktop declarations
   engage from 981 up. A correction of a main.css DESKTOP value therefore has
   to start at 981 too, or the 981-1024 band renders the uncorrected value —
   and 1024 is one of the four review widths. Corrections stay at 1025 only
   where THIS file already owns 981-1024 with a `max-width: 1024px` tablet
   rule (a collapsed grid, a stacked card), which is stated at each of those
   blocks. Do not "tidy" a 981 back to 1025.

   THE AUDIT, so the next reader can check it instead of re-deriving it. Every
   `@media (min-width: 1025px)` block in this file, what it corrects, and why
   1025 is the right floor for it — in each case because a `max-width: 1024px`
   rule in THIS file already owns 981-1024, so the band is deliberately on a
   tablet treatment rather than on main.css's uncorrected desktop value:

     block  corrects                          981-1024 owned by (this file)
     ─────  ────────────────────────────────  ──────────────────────────────
     hdr    .gk-header__inner padding-bottom  padding-bottom:16px  (≤1024)
     evExp  .gk-eventExpanded__grid 2-col      grid-template-columns:1fr
     P1     about / projectsHome / eventsMock  each parent grid → 1fr, and
            / cooperate 2-col compositions     .gk-about__line display:none
     title  .gk-about__title fluid font        .gk-about__grid → 1fr, so the
                                               plate has the full container
                                               and main.css's 95px fits
     coop   .gk-cooperate__grid stretch        grid-template-columns:1fr
     ftr    .gk-footerPanel__top 20% track     grid-template-columns:1fr
     #6a    .gk-footerPanel__top 24% track,    the panel collapses to ONE
            --gk-footer-inset, the per-cell    column at 1024 (measured:
            padding, the left-aligned title,   330+1331 → 945), so there is
            the link split and title clamp     no multi-column footer to
                                               correct below it
     #6b    --gk-footer-inset 24px and the     same collapse; this block is
            matching title clamp, 1025-1299    a sub-band of #6a and cannot
                                               reach below its floor
     sq     .gk-actionsItem__squares size      44/36px !important
     #1     .gk-projectsHome__grid + title     grid-template-columns:1fr
     #4     .gk-eventsPage__wrap padding       padding:40px 28px
     #3     event-card insets                  .gk-eventsMock__row stacks
     #2a    .gk-projectSection__top row        grid-template-columns:1fr, so
            tracks, both columns on subgrid,   there is no second column for
            and the mark's margin-bottom       the gallery to align to
     #2c    the stacked-plate overlap on       NOTHING in this file — the one
     /#4b   „NASZE PROJEKTY", „WESPRZYJ NAS"   row without a ≤1024 owner; see
     /#6    and „NASZE WARTOŚCI"               the paragraph below
     #4a    .gk-support__square margin-left,   .gk-support__left
            which cancels the 100px indent     margin-left:0
            it inherits from its column

   That is the complete list — fifteen blocks. All but one are owned at ≤1024
   by a rule in this file, or (the two #6 rows) sit above a real 1024 collapse
   that leaves nothing to correct below it.

   #2c/#4b/#6 is the single exception, and it is deliberate: that floor is not
   ours but the REFERENCE's. The treatment it copies — „AKTUALNA OFERTA", the
   #4 row above — declares its `--gk-plate-gap` unscoped and keeps only the
   overlap inside `min-width: 1025px`, so below 1025 those plates touch. Taking
   the same floor is what makes „same treatment as AKTUALNA OFERTA" true at
   every breakpoint rather than only on desktop; the measurements on both sides
   of the boundary are at that block. If you add another 1025 block with no
   ≤1024 owner, add a row here saying why.

   Everything else this file corrects is pinned at 981: the hero crop, the
   footer rhythm, #7's introWide line-height and the teal-panel exception,
   #10's mark, #14/#15's cooperate page, #16's row insets AND its callout type,
   #19's contact grid and kv metrics, and #3a's cooperate-page mark, which
   takes 981 because the 103px indent it cancels is itself a 981 rule. Note
   that #6 is the file's one deliberate 1025 FAMILY rather than a single rule
   — the row above, the inset block and its 1025-1299 sub-band all take that
   floor for the same reason.
   #10's footer wordmark is in neither list: it is a `max-width: 1024px` cap,
   the exact complement of #6's floor, so it has no row in the table above —
   the reasoning lives at that rule further down this file. */

/* Mockup shows wider group photo with kids near bottom. Default
 * background-position:center crops too tight at desktop. Anchor to
 * center-bottom so the kids stay in view.
 * 981: main.css:613 declares background-position at base level and this file
 * has no tablet rule for it, so 1025 would leave 981-1024 on the tight crop. */
@media (min-width: 981px) {
	.gk-hero__bg {
		background-position: center 65%;
	}
}

/* ---------- divider.php — marker icon consistency ---------- */

/* Multiple blocks render their own `.gk-decorSquares` with bespoke
 * square sizes. Normalize the rhythm so it reads as a single visual
 * language across pages. */
.gk-decorSquares {
	gap: 8px;
}
.gk-decorSquares .gk-square {
	border-radius: 0;
}

/* ---------- footer.php — desktop typography rhythm ---------- */

/* 981: both values correct main.css declarations made at base level
   (main.css:1948, :1983) and neutralised there only inside
   `@media (max-width: 980px)`, so 981 is where ours has to take over. */
@media (min-width: 981px) {
	.gk-footer {
		padding: 0 0 96px;
	}
	.gk-footerPanel__title {
		letter-spacing: 0.02em;
	}
}

/* ---------- wydarzenia-expanded — desktop 2-col grid restored ---------- */

/* PR #5 stacked the expanded event view at <1024 (correct). At desktop
 * the mockup has 2-col: left=description+BILET+map,
 * right=PROGRAM PIERWSZEGO DNIA + PROGRAM DRUGIEGO DNIA. */
@media (min-width: 1025px) {
	.gk-eventExpanded__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
		gap: 48px;
	}
}

/* BILET pricing card framing + Patroni list polish */
.gk-eventExpanded__proseBox {
	border-radius: 8px;
}

@media (max-width: 639px) {
	.gk-eventExpanded__proseBox {
		padding: 16px;
	}
}

/* ---------- support.php — donation amount grid @ 375 ---------- */

/* main.css <520 forces 1-col → 9 stacked buttons. Override back to 2-col
 * on phones so the amount picker stays compact. */
@media (max-width: 519px) {
	.gk-donationWidget__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
}

/* ---------- about / cooperate / wspolpracuj — callout wrap ---------- */

.gk-cooperate__leadTitle,
.gk-about__lead,
.gk-aboutIntro__leadCallout {
	text-wrap: pretty;
}

/* ---------- home „Kilka słów o nas" (gk-about) — wg PSD Marka ----------
   Owner-approved 06.29 (promoted from .context/mockups/home/candidate.css). */

/* Tytuł ZAWSZE 2 linie „KILKA SŁÓW" / „O NAS" — każda linia niełamana. */
.gk-about .gk-about__titleLine {
	white-space: nowrap;
}
.gk-titlePlate.gk-about__title {
	max-width: none;
}

/* Tekst (prose) węższy — nie szerszy niż CTA, zawijanie jak u Marka. */
.gk-about__prose {
	max-width: 50ch;
}

@media (min-width: 1025px) {
	/* Zdjęcie odsunięte (wartości od ownera). */
	.gk-about__media {
		margin-right: 125px;
		margin-left: 50px;
	}
	/* Kompozycja wg mocka: [tekst | zdjęcie] → linia-separator (pełna
	   szerokość) → kwadrat pod linią. Linia i kwadrat NIE są już kotwiczone
	   do zdjęcia (skakały, gdy kolumna tekstu była wyższa niż zdjęcie na
	   węższych ekranach). Teraz to normalne wiersze gridu na całą szerokość. */
	.gk-grid.gk-about__grid {
		position: relative;
	}
	.gk-about__line {
		position: static;
		grid-column: 1 / -1;
		left: auto;
		right: auto;
		width: 100%;
		margin: 44px 0 0;
	}
	.gk-section.gk-section--tight.gk-about .gk-about__decorBottom {
		position: static;
		grid-column: 1 / -1;
		display: flex;
		justify-content: flex-start;
		gap: 30px;
		margin: 24px 0 0;
	}
	/* CTA: tekst wycentrowany, zawsze jedna linia; skala fontu tak, by
	   mieścił się w węższej lewej kolumnie (był łamany na 2 linie). */
	.gk-about__actions {
		justify-content: flex-start;
	}
	.gk-btn.gk-btn--primary.gk-about__btn {
		text-align: center;
		white-space: nowrap;
		font-size: clamp(15px, 1.55vw, 23px);
	}
	/* projectsHome — odstęp nad opisem (owner). */
	.gk-prose.gk-projectsHome__description {
		margin-top: 60px;
	}
	/* projectsHome — slider wyrównany z tekstem „W ramach" (intro ma
	   margin-left:120px; media miało 100px → 20px za lewo). */
	.gk-projectsHome__media {
		margin-left: 120px;
	}
	/* projectsHome — teal „NASZE PROJEKTY" wydłużony do końca content space:
	   side wypełnia prawą kolumnę, linie tytułu blokowe. */
	.gk-projectsHome__side {
		width: auto;
		justify-self: stretch;
	}
	/* Górny wiersz („NASZE") = szerokość słowa; dolny („PROJEKTY") rozciągnięty
	   do krawędzi content space (step jak w PSD Marka). */
	.gk-projectsHome__title .gk-projectTitle__line--one {
		display: inline-block;
		width: auto;
	}
	.gk-projectsHome__title .gk-projectTitle__line--two {
		display: block;
	}

	/* eventsMock („AKTUALNE WYDARZENIA") — intro rozłożony pionowo by wypełnić
	   wysokość bloku tytuł+kwadraty (był zbity na górze). Wg PSD Marka. */
	.gk-eventsMock__head {
		align-items: stretch;
	}
	.gk-eventsMock__headRight {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	/* Kwadraty-separatory (owner): odstępy jawne, bez margin-top na kontenerze. */
	.gk-decorSquares.gk-eventsMock__squares {
		display: flex;
		gap: 35px;
		margin-top: 0;
	}
	.gk-eventsMock__squares .gk-square:first-child {
		margin-top: 35px;
	}
	.gk-eventsMock__squares .gk-square:last-child {
		margin-bottom: 25px;
	}

	/* cooperate — turkusowa linia na pełną szerokość kontentu (była tylko
	   szerokości lewej kolumny). Wg PSD Marka linia idzie pod całą sekcją. */
	.gk-cooperate__line {
		margin-right: calc(-100% - 36px);
	}
}

/* ---------- home „Kilka słów o nas" (gk-about) — plakietka tytułu ----------
   Problem: w układzie 2-kol (>=1025px) lewa kolumna jest węższa niż tytuł
   w stałych 95px → słowo („SŁÓW") wychodziło poza turkusowe tło (max-width
   przycinał tło, tekst z white-space:nowrap wystawał). Skala fontu płynna
   względem szerokości okna, tak by wiersz ZAWSZE mieścił się w tle. Przy
   >=1440px wraca do 95px (bez zmian). Padding symetryczny (em) — równe
   odstępy z każdej strony, wiersze stykają się (bez przerwy w środku). */
@media (min-width: 1025px) {
	.gk-section.gk-about .gk-titlePlate.gk-about__title .gk-titlePlate__text,
	.gk-section.gk-about .gk-titlePlate.gk-about__title .gk-about__titleLine {
		font-size: clamp(58px, 8.46vw - 24.5px, 95px);
	}
	/* Plate padding used to be set here (0.38em sides, 0.38/0.2em stacked
	   top/bottom). It moved to the „#1b title plates" block below, which owns
	   plate padding for every title plate and compensates the font's own
	   ascent/descent so the PAINTED gap is uniform. Two reasons it could not
	   stay here: at (0,6,0) it outranked that block, and being scoped to
	   min-width:1025 it left 981-1024 — a review width — on main.css's raw
	   values. Only the font-size clamp above belongs to this block. */
}

/* ---------- home „Aktualna oferta" (eventsMock) — CTA kafelka ----------
   Etykiety CTA różnią się długością („ZOBACZ SZCZEGÓŁY" vs
   „ZAPISZ SIĘ NA WYDARZENIE"). Przy stałym 23px dłuższe łamały się na 2 linie
   w wąskim slocie (desktop 2-kol ~300–370px, mobile ~280px). CSS nie zmierzy
   długości tekstu, więc font skaluje się do szerokości samego przycisku
   (container query) — dowolna etykieta zawsze w JEDNEJ linii, wyśrodkowana;
   krótkie etykiety rosną do 23px. */
.gk-eventsMock__side {
	container-type: inline-size;
}
.gk-eventsMock__itemBtn,
.gk-eventsMock__row .gk-eventsMock__rowLink .gk-eventsMock__itemBtn,
.gk-btn.gk-btn--primary.gk-eventsMock__itemBtn {
	white-space: nowrap;
	text-align: center;
	font-size: clamp(12px, 4cqi, 23px);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* ---------- home „Wesprzyj nas" (cooperate/support) — wyrównanie dołu ----------
   „Dziękujemy za wsparcie!" (lewa kolumna) ma kończyć się na tej samej linii co
   dół „WESPRZYJ NAS" (prawa kolumna). Wcześniej pokrywały się tylko przy ~1440px
   (przypadek), przy innych szerokościach rozjazd ±100–340px. Rozciągamy obie
   kolumny do równej wysokości i dociskamy oba elementy do dołu (margin-top:auto),
   więc dolne krawędzie zawsze się pokrywają. Tylko desktop 2-kol (na mobile układ
   jednokolumnowy — auto rozepchnęłoby sekcję). */
@media (min-width: 1025px) {
	.gk-cooperate__grid {
		align-items: stretch;
	}
	.gk-cooperate__left {
		display: flex;
		flex-direction: column;
	}
	.gk-cooperate__left .gk-support__left {
		margin-top: auto;
	}
	.gk-cooperate__right .gk-support__title {
		margin-top: auto;
	}
}

/* ---------- nasze-projekty (page-id-15) — sekcje bez dolnego paddingu --------
   Owner: na tej stronie .gk-section ma mieć padding tylko z góry (dół = 0).
   Nadpisuje warianty (--tight, mobilne) wyższą specyficznością (body.page-id). */
body.page-id-15 .gk-section {
	padding-bottom: 0;
}

/* ---------- kontakt — linia separująca po każdej sekcji ----------
   Wg designu każdą sekcję (dane fundacji, Zarząd, Zespół) oddziela turkusowa
   linia na całą szerokość kontentu. Ostatnią linię (po „Zespół Fundacji")
   rysuje osobny blok .gk-divider, więc pomijamy ostatnią sekcję .gk-people. */
.gk-section.gk-contactDetails > .gk-container,
.gk-section.gk-people:not(:last-of-type) > .gk-container {
	border-bottom: 2px solid var(--gk-teal);
	padding-bottom: 70px;
}

/* Odstęp NAD linią niesie padding-bottom kontenera (70px wyżej), więc sama
   sekcja zeruje swój padding-bottom i linia ma ten sam odstęp góra/dół.
   Odstęp GÓRNY tych sekcji ma jednego właściciela — blok #19 niżej w tym
   pliku: klienckie `padding-top: 0` plus margin-top na sekcjach .gk-people. */
body.page-id-12 .gk-section.gk-contactDetails,
body.page-id-12 .gk-section.gk-people {
	padding-bottom: 0;
}

/* Ostatnia linia (blok .gk-divider) — bez kwadratu, sama linia, ten sam
   odstęp 70px nad linią. */
.gk-divider .gk-decorSquares {
	display: none;
}
.gk-section--tight.gk-divider {
	padding-top: 70px;
	padding-bottom: 0;
}

/* Wartości w danych fundacji były renderowane Gabarito (brak lekkiej odmiany →
   wszystko wyglądało pogrubione). Red Hat Display ma regular; etykiety bold. */
.gk-kv__label {
	font-family: "Red Hat Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
}
.gk-kv__value {
	font-family: "Red Hat Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
}

/* Tytuł „Fundacja / GRA W KLASY" — równe odstępy z każdej strony.

   The earlier revision of this rule set only the two HORIZONTAL paddings and
   its comment already claimed „równe odstępy z każdej strony"; the verticals
   stayed on main.css:2269/2273. Measured from painted pixels at 1440 that gave
   „Fundacja" L30 R36 T12 and „GRA W KLASY" L29 R28 B11 — the horizontal gaps
   nearly three times the vertical ones. („marginesy gora dol prawa lewa takie
   same analogicznie jak robilismy to wczesniej.")

   Same mechanism as #1: the painted gap is the target MINUS that side's
   intrinsic excess (the face's own bearing/leading inside the box). This plate
   now uses the SHARED `--gk-plate-x-top/-bottom/-side` constants, exactly like
   every other plate family — see „ONE SET OF CONSTANTS" below. The per-line,
   per-glyph constants it used to carry were, at a 43px face:
     „Fundacja"     top 5.28px (0.1228em)  left 2px (0.0465em)  right 2.44px (0.0567em)
     „Gra w klasy"  bottom 5.84px (0.1358em)  left 1px (0.0233em)  right 0.19px (~0)

   ⚠ THE RIGHT CONSTANT ON „Fundacja" WAS 0.186em (8px) AND WAS WRONG — it made
   the painted right gap 12.5px against 18.25px on its own left and 18.25px on
   the line below, which is exactly what the client filed („odstep po prawej od
   Fundacja jest mniejszy niz Gra w klasy po prawej"). Re-measured from painted
   pixels at deviceScaleFactor 4: plate right edge minus ink right edge, minus the
   declared padding, gives the last glyph's real right bearing — „a" 2.438px, not
   8px. His own crop decoded to the same 12 vs 18, so the render and his eye
   agreed and only this constant was off.

   ⚠ ONE SET OF CONSTANTS, NOT PER-GLYPH — the client's instruction:
   „czemu `gk-titlePlate__small` ma inny padding niz `gk-titlePlate__big`? …
   powinny byc rowne we wszystkich naszych podkreslonych elementach tak jak
   wczesniej." He is right, and #1b had already settled the same question for
   every other plate: „compensating [the right bearing] per word would make the
   two lines optically inconsistent with each other, which is worse than the ~2px
   it saves." This plate and the `.gk-people` plates below were the two that broke
   that rule; both are now on the shared constants, so all four plates on
   /kontakt/ declare IDENTICAL padding.

   The trade this makes, measured at 1440 (painted, cap-to-top / baseline-to-
   bottom / left / right):
     shared constants   18 / 17 / 17.5, 16.5 / 18.25, 16   <- now
     per-glyph          18 / 18 / 18.25, 18  / 18.5, 18.25  <- before
   i.e. the declared values become equal and the PAINTED spread grows from 0.5px
   to 2.25px, because „a" and „y" simply have different right bearings and one
   number cannot cancel both. That is the same ~2px residual already accepted on
   „NASZE PROJEKTY" and „AKTUALNA OFERTA".

   The gain beyond consistency: these constants are per-TYPEFACE, so unlike the
   per-glyph ones they are NOT coupled to the copy. An owner edit to
   `title_small` / `title_big` can no longer silently unbalance this plate — which
   is exactly what happened when „GRA W KLASY" became „Gra w klasy".
   Unlike #1 the right bearing IS compensated per line here: these are two
   different words, their plates are 115px apart on the right in our render and
   105px apart in the design, so there is no two-line optical consistency to
   protect — while an uncompensated right would leave „Fundacja" 8px looser than
   its own left, which is the thing being complained about.

   The target is the shared `--gk-plate-gap` (0.42em = 18.06px at this face), not
   a new constant. That is also what the design measures vertically: an ink scan
   of the kontakt JPG gives the pair's outer gaps as top 19px / bottom 18px, with
   the horizontal ones 22-32px. Equalising on 18 rather than on the horizontal
   26-32 is deliberate — it keeps the pair 111px tall against the design's 116px,
   where equalising on 26 would make it 168px.

   The inner edges stay untouched: „Fundacja" keeps padding-bottom 0 and the big
   line padding-top 0, so the two plates still meet, exactly as the design has
   them (its two rectangles even overlap by 5px).

   ⚠ THE BOTTOM GAP IS MEASURED TO THE BASELINE, NOT TO THE INK. This value was
   set twice before landing here and the reason matters, because it decides every
   plate on the page:

     `gap - 0.1358em`  original, while the line read „GRA W KLASY" (no descender)
     `gap + 0.0749em`  after the owner changed the copy to „Gra w klasy" — the
                       „y" dropped the INK 9px, so this compensated the ink back
                       to an 18px gap
     `gap - 0.133em`   what is here now: the ink measured equal and the client
                       still called the plate uneven, and he was right

   Measured with a per-column ink-bottom scan, which separates the baseline (the
   bottom shared by most glyph columns) from the descender tip (the lowest single
   column): with the ink equalised, the gap from the plate's bottom edge to the
   BASELINE was 27px while the gap above the cap line was 18px. The eye reads the
   baseline as the bottom of the text and the „y" tail as hanging past it, so
   „równe odstępy" means cap-to-top == baseline-to-bottom, not ink-to-both.

   The design does the same thing: its „Zarząd Fundacji" plate is 17px above the
   cap and 10px to the descender tip, i.e. ~19px below the baseline. Equal by
   baseline, not by ink.

   Because the reference is now the baseline, the value is NO LONGER coupled to
   whether the text has a descender — „Gra w klasy" and „GRA W KLASY" produce the
   same plate geometry, and only the tail hangs. That is the reason to prefer this
   formulation over the ink one, beyond matching the client's eye. */
/* Family constants for THIS plate. #1b's `:root` set is measured on „NASZE" /
   „PROJEKTY" and its own comment says they are per-TYPEFACE and that „a family
   whose plates use a different face overrides them on itself" — the events
   headings already do. This pair renders at a 43px face where the `:root` side
   value of 0.061em over-subtracts, which left the sides 1-2px TIGHTER than the
   verticals: („lepiej jeszcze gora i dol powinan byc rown prawej i lewej" — his
   crop decodes to top 18, bottom 17, sides 16-18, matching the render exactly).

   Re-measured here from painted pixels at deviceScaleFactor 4, as the excess
   over the DECLARED padding, so the constant IS the excess and every painted gap
   lands on `--gk-plate-gap`:

       top     5.659px  0.1316em
       bottom  5.519px  0.1283em   (to the BASELINE — see the note below)
       side    1.626px  0.0378em   mean of F 2.063 / a 2.813 / G 1.063 / y 0.563

   The side value is the MEAN of the four side bearings on this plate, because one
   constant serves both lines and both sides — his „powinny byc rowne we
   wszystkich naszych podkreslonych elementach" rules out per-glyph values. That
   leaves an irreducible ±1.1px: „a" ends up 1.19px looser than target and „y"
   1.06px tighter, since no single number cancels a 2.25px spread in bearings.
   Everything now sits within ~1.2px of the same gap instead of 2.1px. */
.gk-section.gk-contactDetails .gk-contactDetails__title {
	--gk-plate-x-top: 0.1316em;
	--gk-plate-x-bottom: 0.1283em;
	--gk-plate-x-side: 0.0378em;
}

.gk-section.gk-contactDetails .gk-contactDetails__title .gk-titlePlate__small {
	padding-top: calc(var(--gk-plate-gap) - var(--gk-plate-x-top)) !important;
	padding-bottom: 0 !important;
	padding-left: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
	padding-right: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
}

.gk-section.gk-contactDetails .gk-contactDetails__title .gk-titlePlate__big {
	padding-top: 0 !important;
	padding-bottom: calc(var(--gk-plate-gap) - var(--gk-plate-x-bottom)) !important;
	padding-left: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
	padding-right: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
}

/* …and the same four gaps below 980px. `main.css:4044` pins
   `padding-left: 10px !important` on BOTH lines inside `max-width: 980px`, at
   (0,6,0) — six classes — so the (0,4,0) rules above lose the LEFT side there
   however many `!important`s they carry, and only the right/top/bottom follow the
   em formula. Tell-tale: the computed value was EXACTLY main.css's 10px, which is
   a specificity problem, never a cache one.

   Restated at main.css's own selector so source order settles it (responsive.css
   loads after main.css). The em formula lands within 1px of the 10px it replaces
   — 9.7px at 375, 12.0px at 640 — so this equalises the plate without changing
   how mobile reads. Same lesson as #1: excluding or overriding a family only
   covers the sides main.css happens NOT to pin; state every side that matters at
   matching specificity. */
@media (max-width: 980px) {
	.gk-section.gk-contactDetails .gk-contactDetails__title.gk-titlePlate.gk-about__title .gk-titlePlate__small,
	.gk-section.gk-contactDetails .gk-contactDetails__title.gk-titlePlate.gk-about__title .gk-titlePlate__big {
		padding-left: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
	}
}

/* Numer telefonu w każdej osobie — pogrubiony. */
.gk-person__meta a[href^="tel:"] {
	font-weight: 700;
}

/* =========================================================
 * Client review round 1
 *
 * Measurements come from .context/design/spec.json (PSD layer bboxes,
 * 1920px canvas / 1682px content container) unless noted. Item numbers
 * match the client's renumbered defect list.
 * ========================================================= */

/* ---------- #6 footer.php — „FUNDACJA GRA W KLASY" symmetry ---------- */

/* PSD footer (kontakt, y2470..2825): panel x120..1802, teal logo cell
   x120..512, title cell x512..1544 (divider „Line 5 copy" at x1544),
   social cell x1551..1802. So the social column is 251/1283 ≈ 19.6% of the
   row, not the 160px main.css uses — the divider (and with it the icons)
   belongs further left.

   THIS RULE IS THE ≤ 1024 TREATMENT ONLY, and reading it as the general answer
   is the defect #6 removed. Below 1025 the panel is a single column, the title
   has no divider to align to and no sibling cells to share an inset with, so
   centring it is simply the stacked-panel look.

   At ≥ 1025 it is SUPERSEDED and must stay superseded: the `min-width: 1025px`
   block further down sets `justify-content: flex-start; text-align: left` and
   puts the title on `--gk-footer-inset`, the same inset every other cell takes.
   The design’s title only LOOKS centred — its text (x596..1469) sits 84px from
   its cell’s left edge and 75px from its right, but that is because the cell is
   sized (ink/cell = 873/1032 = 0.846) so the right-hand gap lands near the
   shared inset, not because it is centred. Centring it satisfies „equal space
   left and right” at exactly one width and breaks the alignment at every other,
   which is what the first pass on #6 did. Do not extend this rule upward and do
   not delete the flex-start that overrides it. */
.gk-footerPanel__title {
	justify-content: center;
	/* text-align too: when the title wraps (narrow viewports) the anonymous
	   flex item fills the cell, so justify-content alone stops centring. */
	text-align: center;
	padding-left: 18px;
	padding-right: 18px;
}

/* 981 for the inset, 1025 for the track sizing — the two have different
   owners. `padding-left: 42px` is declared at main.css:1981 at BASE level and
   zeroed there only inside `@media (max-width: 980px)`, so at 981-1024 the row
   kept its 42px left inset while .gk-footerPanel__title above is centred
   unconditionally: 42px of asymmetry at the 1024 review width, which is
   exactly the defect #6 exists to remove. The 20% social track, by contrast,
   is a two-column desktop composition and this file already collapses the row
   to `grid-template-columns: 1fr` at ≤1024, so it stays at 1025. */
@media (min-width: 981px) {
	.gk-footerPanel__top {
		/* PSD has no extra row inset; the title cell starts at the divider. */
		padding-left: 0;
	}
}

@media (min-width: 1025px) {
	.gk-footerPanel__top {
		grid-template-columns: minmax(0, 1fr) 20%;
	}
}

/* #6 (cont.) — one shared inset on every footer cell.

   Captain's rule, stated plainly: „kazda komorka ma taki sam margin
   left/padding, jedyne czym sterujemy to dlugosc tytulu fundacja gry w klasy".
   Every cell takes the SAME left inset; the title's length is the only lever.
   His two observations both follow from it — the title was not aligned with the
   two rows under it, and the phone / Regulamin / Polityka did not share the
   address's inset.

   The design agrees (kontakt STOPKA, canvas 1920, container x120..1802):

       title x596  adres x591  copyright x592     inset 84 / 79 / 80 from x512
       phone x1309   Regulamin x1318              share a left edge
       ink / title cell = 873 / 1032 = 0.846      title nearly FILLS its cell

   So the design's title only LOOKS centred: it is left-aligned on the same
   inset as everything else, and the cell is sized so the right-hand gap (75)
   comes out near the inset (84). Centring it — which is what this file did
   after the first pass on #6 — produces the same visual on one width and
   breaks the alignment on all of them. It is left-aligned now.

   Why the insets did not simply fit: our column split was not the design's.

       cell            design   was      now
       middle          0.569    0.692    0.569
       Regulamin       0.174    0.154    0.174
       Polityka        0.250    0.154    0.250

   The right-hand cells were so much narrower than the design's that
   „Polityka Prywatnosci" (169px of text) was WIDER than the cell it sits in,
   so no shared inset could fit there at all. The split is the design's now, in
   both rows, which also puts the mid-row and bottom-row dividers on the same x
   the way the source has them.

   The inset itself is 68px — the value the left column already used (mid's 50px
   plus the column's 18px), kept so the address block does not move. As a
   fraction of the container that is 4.1% against the design's 5.0%; the design
   value would have shifted a column the captain has not raised.

   1025, not 981: the panel collapses to a single column at 1024 (measured:
   panelCols goes 330px+1331px to 945px between 1025 and 1024), so there is no
   multi-column footer below it to correct. That reason covers three blocks,
   not one — the 20% track above, this block, and the 1025-1299 inset sub-band
   below — which the audit table lists as rows `ftr`, `#6a` and `#6b`. The #6
   rules that do NOT depend on the multi-column panel (the row's own inset, the
   footer rhythm and the title letter-spacing) are pinned at 981 as usual. */
@media (min-width: 1025px) {
	/* Captain's value. The social column was 20% of the top row, which left an
	   empty 73px inside it before the first icon — so the title's right-hand
	   space read as 77 to the divider PLUS that 73, against 83 on its left.
	   Widening the column to 24% moves the divider left, which moves the icons
	   left with it and closes that gap. */
	.gk-footerPanel__top {
		grid-template-columns: minmax(0, 1fr) 24%;
	}

	.gk-footerPanel__mid,
	.gk-footerPanel__bottom {
		grid-template-columns: 56.9% 43.1%;
		/* the inset moves onto the cells themselves, so the row no longer
		   carries half of it */
		padding-left: 0;
	}

	/* ONE inset, on every cell, as a fraction of the container per CONTEXT.md.
	   The design's is 84/1682 = 5.0%; the panel is (viewport - 73) up to its
	   1800 cap, so 5vw - 3.65px tracks it. Clamped because the link strip
	   cannot carry an arbitrarily large inset at the bottom of the range.
	   A flat 68px was tried first and is wrong here: it does not shrink with
	   the panel, so at 1440 the inset plus the link text exceeded the strip and
	   „Polityka Prywatnosci" WRAPPED onto a second line. */
	.gk-footerPanel {
		--gk-footer-inset: clamp(28px, calc(5vw - 3.65px), 84px);
	}

	.gk-footerPanel__title,
	.gk-footerPanel__mid > .gk-footerPanel__col,
	.gk-footerPanel__copy,
	.gk-footerPanel__links {
		padding-left: var(--gk-footer-inset);
	}

	/* Title left-aligned on that inset, not centred. The design's title only
	   LOOKS centred: it is left-aligned like everything else and its cell is
	   sized so the right-hand gap comes out near the inset. */
	.gk-footerPanel__title {
		justify-content: flex-start;
		text-align: left;
	}

	/* Link cells size to their CONTENT, not to a fixed share. „Polityka
	   Prywatnosci" is twice the width of „Regulamin", so any even or fixed
	   split either wastes the strip or overflows it. The first cell carries no
	   inset of its own — the strip already starts at the shared inset, which is
	   what puts „Regulamin" on the phone number's left edge. */
	/* `0 0 auto`, not `0 1 auto`: the links carry `white-space: nowrap`
	   (main.css:2125), so a shrinkable cell does not shorten the text, it
	   OVERFLOWS it. Below about 1440 our strip is genuinely too narrow for both
	   labels plus the shared inset — the panel there is far narrower than the
	   design's 1682 canvas while the link text does not scale — so refusing to
	   shrink lets `flex-wrap: wrap` put „Polityka Prywatnosci" on a second line
	   instead of spilling out of its cell. Measured: 3 overflowing elements at
	   1100 and 1025 with `0 1 auto`, none with `0 0 auto`. */
	/* main.css:2111 justifies this strip to flex-end. With the cells sized to
	   content that pushes BOTH labels to the right of the strip — and once they
	   wrap, each line is justified separately, so „Regulamin" lands 217px right
	   of the phone number instead of on its left edge. */
	.gk-footerLinks.gk-footerLinks--inline {
		justify-content: flex-start;
	}

	/* The two cells take the design's own share of the strip, 224 : 322 = 41:59
	   (kontakt STOPKA: Regulamin cell x1249..1473, Polityka x1480..1802).
	   Content-sizing them with `margin-left: auto` gave 226 : 249 instead — the
	   captain read that correctly as „Regulamin zajmuje za duzo miejsca i
	   polityka jest scisnieta", because „Polityka Prywatnosci" is twice the
	   label but was getting barely more room than „Regulamin".

	   `min-width: max-content` is what keeps this safe: the links carry
	   white-space:nowrap, so without it a percentage basis shrinks the cell
	   under its own text and the label spills. With it the cells hold the design
	   ratio while there is room and wrap to a second line when there is not,
	   instead of overflowing. */
	.gk-footerLinks--inline li {
		justify-content: flex-start;
		text-align: left;
		min-width: max-content;
		/* the basis must include the inset, or 41% + 59% + padding exceeds the
		   strip and a flex line wraps BEFORE it shrinks — that put „Polityka"
		   on a second row at 1440 */
		box-sizing: border-box;
	}

	/* The link labels have to scale with the panel, for the same reason the
	   title does. The design's row is 1290 wide on a 1682 container and its two
	   labels take 254 of the 553 link region; our labels are a flat 16px, so at
	   1440 — where the panel is only 81% of the design's — they still needed
	   254px of a 376px strip. The design's 41:59 could not fit, and the strip
	   wrapped „Polityka Prywatnosci" onto a second line. Scaled, the ratio holds
	   at every desktop width. */
	.gk-footerLinks--inline a {
		font-size: clamp(12px, calc(0.95vw + 0.5px), 16px);
	}

	/* Captain's value: 32%, not the design's 41%. Our link labels are fluid but
	   the two cells sit in a strip narrower than the design's, so 41% still read
	   as too much for „Regulamin" against „Polityka Prywatnosci". */
	.gk-footerLinks--inline li:first-child {
		flex: 0 1 32%;
	}

	.gk-footerLinks--inline li + li {
		flex: 0 1 68%;
		padding-left: var(--gk-footer-inset);
	}

	/* The address block must be allowed to wrap now that the middle column is
	   the design's 56.9% rather than the 69% it had. main.css:2035 sets
	   `flex-wrap: nowrap` on the field and :2054 pins the label to
	   `white-space: nowrap`, so at 1025-1100 the value „ul. Warszawska 50,
	   15-077 Bialystok" overflowed its column instead of moving to the next
	   line (measured: 3 overflowing elements, none at 1440 and above). The
	   LABEL keeps its nowrap — „Adres korespondencyjny / Biuro:" is meant to
	   stay on one line — only the row is allowed to break. */
	.gk-footerPanel__field {
		flex-wrap: wrap;
	}

	/* „marlena@grawklasy.org.pl" has no space to break at, so at 1025 it ran
	   12px past its column (222px of text in 210px). `anywhere` lets it fall to
	   a second line there rather than spill. It only ever engages when the
	   column is genuinely too narrow — 1100 and above are unaffected. */
	.gk-footerPanel__value {
		overflow-wrap: anywhere;
	}

	/* The title's length is the lever the captain named. It was a flat 62px, so
	   its share of the cell ran 0.700 at 1740 and 0.903 at 1440 — left-aligning
	   a 0.700 title leaves a 250px hole on the right. Sized fluidly to hold the
	   design's 0.846 instead.

	   Re-derived after the social column went to 24%: the title cell is now
	   0.76 x (panel - 330) rather than 0.80, so the previous 5.63vw - 22.7px
	   overran it and the title WRAPPED to two lines at 1440, 1100 and 1025.
	   Target ink is cell - 2 x inset, i.e. 0.76(vw - 403) - 0.1(vw - 73), which
	   gives 5.49vw - 24.9px. The lower clamp is 32px, not 44: at 1025 a 44px
	   floor is itself wider than the cell and wraps regardless of the slope. */
	.gk-footerPanel__title {
		font-size: clamp(32px, calc(5.49vw - 24.9px), 78px);
	}
}

/* The 1025-1299 band cannot carry the design's inset. The panel there is only
   about 950-1050px against the design's 1682 canvas, while the address label
   („Adres korespondencyjny / Biuro:", pinned to one line by main.css:2054) and
   the two link labels do not scale with it. At the shared inset the field ran
   5px past its column and the link strip 11px past its own. Dropping the inset
   to 24px in this band clears both and keeps every alignment the captain asked
   for — the inset is shared, so all cells still agree with each other; it is
   simply smaller here than at 1300+. The band reaches 1299 rather than 1149
   because at 1280 the design's 41:59 link split was still 8px wider than the
   strip and wrapped „Polityka Prywatnosci" onto a second line. */
@media (min-width: 1025px) and (max-width: 1299px) {
	.gk-footerPanel {
		--gk-footer-inset: 24px;
	}

	/* The title's own size has to follow the band's inset, or the margins stop
	   matching: the main formula targets ink = cell - 2 x the PROPORTIONAL
	   inset, so against a flat 24px it left 24 on the left and 93 on the right
	   at 1280. Same derivation, 24px substituted for the inset term. */
	.gk-footerPanel__title {
		font-size: clamp(32px, calc(6.32vw - 29.5px), 78px);
	}
}

/* ---------- #10 foundation logo mark — 54px wide everywhere ---------- */

/* The mark (assets/img/square.png, natively 72×60) is drawn at a hard
   72×60 by main.css:4611 `@media (min-width:981px){.gk-square{...!important}}`,
   with a spread of per-section overrides (16/22/28/30/32/34/36/40/42/70/73px)
   underneath it. 72px is the PSD value at the design's 1682px container, so
   at a 1440 viewport (container ≈1367px, 0.81×) the mark renders ~23% larger
   than everything around it — which is the oversized look the client flagged.
   The client's 54px is that same mark measured off the 1920px design JPG at
   fit-to-window on a 1440-class screen (72 × 1440/1920 = 54).
   Height follows the asset's 72:60 ratio so the artwork is not distorted.
   `!important` is required here only to beat main.css's own `!important`.

   Confined to main.css's own desktop guard range (≥981px) because 54px is a
   desktop measurement: below it main.css:3872 deliberately drops every mark
   to 30px, and an unconditional `!important` here would beat that and blow
   the marks back up to 54px at 375/640.

   Four sections carry their own `!important` at (0,2,0) in main.css's desktop
   guard — .gk-support__rightSquares 73px (4624), .gk-projectsHero__introSquares
   72px (4631), .gk-aboutIntro 70px (4632), .gk-actionsItem__squares 72px
   (4633) — so a bare `.gk-square` at (0,1,0) loses to all four and o-nas,
   projects-hero, about-actions and the support right column would keep the
   oversized mark. They are restated here at matching specificity, where
   source order decides (responsive.css is enqueued after main.css).

   981px is a DELIBERATE deviation from ADR-0001, which sets desktop at
   ≥1024px and deprecates the 520/820/980 breakpoints; every other item in
   this pass uses min-width:1025px. It is pinned to main.css:3871's
   `@media (max-width:980px){.gk-square{width:30px!important}}` — the only
   value that lets that guard keep winning below it. main.css is frozen
   (ADR-0002) so the guard cannot be migrated, and scoping this to 1025
   instead would strand 981-1024 at main.css's oversized 70-73px marks,
   which is the very defect item 10 exists to fix. Do not "correct" this to
   1025; move it only if and when main.css's max-width:980 guard is itself
   migrated to the sanctioned breakpoint.

   That rationale covers three of the four sections, NOT
   .gk-actionsItem__squares — see the separate rule below. */
@media (min-width: 981px) {
	.gk-square,
	.gk-support__rightSquares .gk-square,
	.gk-projectsHero__introSquares .gk-square,
	.gk-aboutIntro .gk-square {
		width: 54px !important;
		height: 45px !important;
	}
}

/* o-nas „NASZE DZIAŁANIA" takes the same 54px but only from the sanctioned
   1025px, because this section is the one place where 981 would cost
   something rather than rescue something. Between 981 and 1024 the marks are
   not stranded at main.css's 72px: this file already scales them down to 44px
   at line 678 („Below 1024 these crowd small viewports"), alongside the body
   text it drops to 22px. That rule and this one are both (0,2,0) + !important,
   so source order alone would decide and this one — being later — would win
   the whole 981-1024 band and put a 54×45 mark next to 22px text at the 1024
   review width. */
@media (min-width: 1025px) {
	.gk-actionsItem__squares .gk-square {
		width: 54px !important;
		height: 45px !important;
	}
}

/* Below 981 main.css drops every mark to 30px (main.css:3872, inside its
   `max-width:980` guard) — but that rule is a bare `.gk-square` at (0,1,0),
   and TWO of the per-section rules that outrank it are NOT confined to the
   desktop guard at all: `.gk-aboutIntro .gk-square` 70x70 (main.css:3243) and
   `.gk-projectsHero__introSquares .gk-square` 72x60 (main.css:3154) are base
   declarations at (0,2,0) + !important. So they win at EVERY width and o-nas's
   intro mark stayed 70x70 while projects-hero stayed 72x60 all the way down to
   375 — the oversized mark item 10 exists to remove, still painted on mobile,
   next to 30x30 marks on every other page.

   Measured before this rule, at 980 / 640 / 375: o-nas 70x70, nasze-projekty
   and a single projekt 72x60; every other page already 30x30.

   Restated here at the same (0,2,0) + !important, where source order decides
   (responsive.css is enqueued after main.css). The value is main.css's own
   mobile 30x30, NOT the asset's 72:60 ratio: every other page's mobile mark is
   30x30 and matching them matters more here than the 1.2 aspect — a lone
   30x25 on two pages would be the new inconsistency.

   `.gk-support__rightSquares .gk-square` (73px, main.css:2524) has the same
   unscoped shape, but `.gk-support__rightSquares` is not in the DOM on
   /wesprzyj-nas/ at any width, so no rule is written for markup that does not
   render. If that block ever ships, it needs a row here. */
@media (max-width: 980px) {
	.gk-aboutIntro .gk-square,
	.gk-projectsHero__introSquares .gk-square {
		width: 30px !important;
		height: 30px !important;
	}
}

/* The footer wordmark — the other half of item 10, and it was broken at a
   review width. main.css sizes it `width:60%` at base (main.css:1968) and caps
   it at `min(220px, 72%)` only inside `max-width:980` (main.css:4254). But the
   footer panel collapses to a SINGLE column at 1024 (see #6, which is the one
   item pinned at 1025 for exactly this reason), so from 1024 down the logo's
   60% resolves against the whole panel instead of the narrow left column.

   Measured: 174.6px wide at 1440, then 545.4 x 314.5 at 1024 — more than three
   times bigger, 545px of a ~909px panel — and back to 220px at 640/375 once
   main.css's cap engages. 981-1024 was the only band with no owner, and 1024
   is a review width.

   `max-width: 1024px` is the exact complement of #6's `min-width: 1025px`, so
   the footer has no gap and no overlap. At <=980 this restates main.css's own
   value, so nothing changes there.

   BOTH of main.css's selectors have to be repeated. It writes this as
   `.gk-footerPanel__left img, .gk-footerPanel__logoImg`, and the browser scores
   a selector LIST by its best matching branch — `.gk-footerPanel__left img` is
   (0,1,1), a class plus a type. A bare `.gk-footerPanel__logoImg` here is
   (0,1,0) and loses on specificity no matter which file is enqueued later, so
   the first attempt at this rule changed nothing at all. Matching the list
   exactly puts the two at equal specificity, where source order decides. */
@media (max-width: 1024px) {
	.gk-footerPanel__left img,
	.gk-footerPanel__logoImg {
		width: min(220px, 72%);
		max-width: 100%;
	}
}

/* #10 (cont.) — the HEADER wordmark, which is what actually made the pair look
   wrong once the mark was right.

   spec.json, on all nine design pages: the header logo is 116x67 at x121/y43
   (the container's left edge) and the decor mark is 72x60. So the design's mark
   is 62.1% of the wordmark's width. Item 10 read the mark off a 1440-class
   screen — canvas 1920, scale 0.75, 72 x 0.75 = 54 — and that is exactly what
   ships. Applying the same scale to the wordmark gives 116 x 0.75 = 87 wide,
   67 x 0.75 = 50.25 tall.

   main.css:148 sizes it by `max-height:58px` with `width:auto`, and the asset
   (logo@3x, 300x173, ratio 1.734) turns that into 100.6 x 58 at EVERY width.
   That is 15.4% taller than the design's 1440-class value, which dropped the
   mark-to-wordmark ratio to 54/100.6 = 53.7% and made the 54px mark read small
   against an oversized logo — the pair in the client's screenshot.

   50px restores it: 50 x 1.734 = 86.7 wide, so 54/86.7 = 62.3% against the
   design's 62.1%.

   Fixed rather than fluid, deliberately, and for the same reason the mark is:
   both are read off a 1440-class screen, so both stay constant and the ratio
   between them holds at every width. A fluid wordmark against a fixed mark
   would break that ratio everywhere except one width.

   `.gk-header.is-scrolled .gk-header__logoImg` (main.css:155, 40px, (0,2,0)) is
   deliberately left alone — it is the scrolled state, not what he is looking
   at, and 40px is still smaller than 50 so the shrink still reads as a shrink. */
.gk-header__logoImg {
	max-height: 50px;
}

/* ---------- #13 equal top spacing on every subpage ---------- */

/* The gap between the header and the first block was set per-block, so it
   ran 0/15/22/42/70/70px across the six subpages (spread 70px). It is now
   one token, --gk-subpage-top (see tokens.css for how the value was read
   off the PSD). Home keeps a flush hero, which is what the design shows
   (główna: HERO y110 sits directly on the menu bar's y110 baseline). */

/* pages built from ACF blocks: o-nas, nasze-projekty, wspolpracuj-z-nami,
   wesprzyj-nas, kontakt */
body:not(.home) .gk-main > .gk-section:first-child {
	padding-top: var(--gk-subpage-top);
}

/* /oferta/ — archive-wydarzenie.php opens its own <main> inside the one
   header.php already emitted, so the first section sits one level deeper. */
body.post-type-archive .gk-main .gk-main > .gk-container > .gk-section:first-child {
	padding-top: var(--gk-subpage-top);
}

/* The shop archive and single products wrap their content in .gk-wooWrap
   rather than a .gk-section. The gap belongs on the wrapper, not on that
   wrap: .gk-wooWrap IS the grey panel (main.css:3625, background #f3f3f3 +
   24px padding), so padding there would inflate the panel's own inset and
   leave the header-to-panel gap at .gk-woo's 26px (main.css:3621). Padding
   .gk-woo instead mirrors the archive branch above, which pads the
   .gk-section while the teal background sits on the inner
   .gk-eventsPage__wrap. */
body.woocommerce-page .gk-main .gk-main.gk-woo {
	padding-top: var(--gk-subpage-top);
}

/* koszyk, zamówienie and moje konto do NOT go through that wrapper, and were
   rendering flush under the header at 0px. `.gk-woo` only exists in
   woocommerce.php:11, and WooCommerce routes to that template only for
   is_singular('product'), is_product_taxonomy() and the shop archive. Cart,
   checkout and my-account are ordinary WP pages, and the theme has no
   page.php, singular.php, theme.json or templates/, so they fall through to
   index.php — which calls the_content() straight inside header.php's
   <main class="gk-main"> with no wrapper at all. Nothing there is a
   .gk-section either (the cart and checkout are WooCommerce blocks,
   my-account is a plain div.woocommerce), so no branch above could match.

   Keyed to the body classes those three pages do carry, which never co-occur
   with the shop archive's `woocommerce-shop` or a product's `single-product`,
   so this cannot double up with the .gk-woo branch.

   Each of those wrappers carries padding-top:0 and margin-top:0 of its own,
   so the token does not double up with the WRAPPER — but it does add to the
   leading of the first block INSIDE it, which is the mistake this branch
   originally made: /koszyk/ rendered 91px and /moje-konto/ 97px because the
   first block brings its own margin-top (13.3px on the empty-cart heading,
   19.9px on the login heading) and that margin does not collapse into the
   padded wrapper. Making the token a margin instead does not help either —
   measured in Chromium, the child's margin still does not collapse through
   the zero-height notice wrappers those templates open with. So the padding
   stays and the leading of the first block is zeroed just below. */
body.woocommerce-cart .gk-main > *:first-child,
body.woocommerce-checkout .gk-main > *:first-child,
body.woocommerce-account .gk-main > *:first-child {
	padding-top: var(--gk-subpage-top);
}

/* The neutralisers for the three pages above. Each targets the element that
   actually owns the leading, i.e. the first block after the notice wrappers
   WooCommerce always opens these templates with:
     /moje-konto/  div.woocommerce > .woocommerce-notices-wrapper + <h2>
     /koszyk/      .wp-block-woocommerce-cart > .wp-block-woocommerce-
                   empty-cart-block (or -filled-cart-block) > first block
   Scoped to `.gk-main > *:first-child`, so only the block that opens the page
   loses its leading; the same blocks further down keep their own rhythm.
   /zamowienie/ takes the matching rule for the checkout block, but it could
   not be measured: WooCommerce 302-redirects it to /koszyk/ whenever the cart
   is empty, and filling a cart would have meant writing to the site being
   rendered. */
body.woocommerce-account .gk-main > *:first-child > .woocommerce-notices-wrapper:first-child + *,
body.woocommerce-cart .gk-main > *:first-child > :is(.wp-block-woocommerce-empty-cart-block, .wp-block-woocommerce-filled-cart-block) > *:first-child,
body.woocommerce-checkout .gk-main > *:first-child > :is(.wp-block-woocommerce-checkout-fields-block, .wp-block-woocommerce-checkout-totals-block) > *:first-child {
	margin-top: 0;
}

/* /koszyk/ is the one page that still scrolled sideways, at all four review
   widths: the products grid WooCommerce shows under an empty cart is
   `ul.wc-block-grid__products` with `margin: 0 -8px 16px` of its own
   (WooCommerce's stylesheet, not ours to edit), so it lays out 8px wider than
   the viewport — 1448 against 1440, 383 against 375. Zeroing just those two
   horizontal margins contains it: the products are flex items at
   flex-basis:25%, so they re-flow to the narrower track and keep their own
   gutters. Nothing else about the cart changes. */
body.woocommerce-cart .wc-block-grid__products {
	margin-left: 0;
	margin-right: 0;
}

/* single-projekt opens its own wrapper inside header.php's
   <main class="gk-main">, and it is not a .gk-section, so none of the
   selectors above reach it: single-projekt.php:41 emits
   <div class="gk-page gk-singleProjekt">. Item 13 is „verified on every
   page", so it takes the same token. That template renders for real: its 301
   redirect back to /nasze-projekty/ is gated on has_dedicated_page, so a
   project with that flag set is served here.

   Like every branch above, the token goes on the element that OWNS the
   leading, not on top of it. .gk-page is unstyled — it appears nowhere in
   main.css — so padding the wrapper is purely ADDITIVE to whatever
   the_content() renders inside it. ACF blocks carry no post_types
   restriction (inc/acf-blocks.php:60-77), so a projekt built from the
   theme's own blocks opens with a .gk-section--tight at main.css:341's
   `padding:70px 0`, one level below .gk-main and therefore missed by the
   :first-child rule at the top of this item — wrapper 78 + section 70 would
   render 148px against 78px everywhere else, i.e. exactly the defect item 13
   removes. So the section is targeted directly and its own padding replaced,
   and the wrapper keeps the token only when there is no section to hold it
   (plain, non-block content). Where :has() is unsupported the fallback rule
   is dropped rather than doubling up: block-built pages still land on 78px
   and plain ones keep their existing leading. */
body.single-projekt .gk-main > .gk-page.gk-singleProjekt > .gk-section:first-child {
	padding-top: var(--gk-subpage-top);
}

body.single-projekt .gk-main > .gk-page.gk-singleProjekt:not(:has(> .gk-section:first-child)) {
	padding-top: var(--gk-subpage-top);
}

/* INERT today, listed only so the token is already in place if that changes.
   single-wydarzenie.php:8-17 redirects unconditionally —
   wp_safe_redirect(archive . '#' . slug, 301) + exit before get_header() —
   whenever the archive link and the slug both resolve, which is always for a
   published event, so its <main class="gk-main gk-wydarzenieSingle">
   (line 26, main.css:1777 leaves it at 28px) never reaches a browser. Making
   that redirect conditional is not part of this change. */
body.single-wydarzenie .gk-main .gk-main.gk-wydarzenieSingle {
	padding-top: var(--gk-subpage-top);
}

/* The uniform padding above only bites if the block does not add leading of
   its own. Three of the six first-blocks did, so the first thing you could
   actually SEE still sat at 61/115/138px instead of 78. Each is scoped to
   „…:first-child", i.e. only when that block opens the page — the same block
   used further down the page keeps its own rhythm.

   Each also matches through single-projekt's .gk-page.gk-singleProjekt
   wrapper. ACF blocks carry no post_types restriction
   (inc/acf-blocks.php:60-77), so a has_dedicated_page projekt can open with
   any of these three; keyed to .gk-main alone the neutraliser would not reach
   one nested inside that wrapper and the block's own 17/37/60px would be
   added back on top of the 78px token — the same double-count the
   single-projekt branch above was rewritten to remove. */

/* o-nas — .gk-aboutIntro__topSquares pulled the top-right mark up by 17px.
   The PSD (O NAS) has the mark at y229 and the heading plate at y228, i.e.
   flush; the negative margin was breaking that alignment too. */
.gk-main > .gk-section:first-child.gk-aboutIntro .gk-aboutIntro__topSquares,
.gk-page.gk-singleProjekt > .gk-section:first-child.gk-aboutIntro .gk-aboutIntro__topSquares {
	margin-top: 0;
}

/* wesprzyj-nas — .gk-support__square added margin-top:37px. */
.gk-main > .gk-section:first-child.gk-support .gk-support__left > .gk-decorSquares:first-child,
.gk-page.gk-singleProjekt > .gk-section:first-child.gk-support .gk-support__left > .gk-decorSquares:first-child {
	margin-top: 0;
}

/* wesprzyj-nas, at and below 1024 only — .gk-support__right adds
   padding-top:4px (main.css:2454). On desktop that 4px is a column-alignment
   nudge nobody sees, because .gk-support__left opens the section and
   .gk-support__title carries a 95px margin. From 1024 down the grid is one
   column (responsive.css:377) and that margin is zeroed, so the right column
   IS the first thing on the page and the 4px landed on top of the token —
   82px measured at 1024 against 78px everywhere else. The single-column
   layout has no left column to align to, so the nudge just goes. */
@media (max-width: 1024px) {
	.gk-main > .gk-section:first-child.gk-support .gk-support__right,
	.gk-page.gk-singleProjekt > .gk-section:first-child.gk-support .gk-support__right {
		padding-top: 0;
	}
}

/* kontakt — .gk-contactTitle__title added margin-top:60px. */
.gk-main > .gk-section:first-child.gk-contactTitle .gk-contactTitle__title,
.gk-page.gk-singleProjekt > .gk-section:first-child.gk-contactTitle .gk-contactTitle__title {
	margin-top: 0;
}

/* ---------- #7 + #17 no grey text anywhere in the app ---------- */

/* One global rule, per the captain's clarification: the client wants grey
   type gone — everything that renders grey renders black instead, on every
   page. The design agrees: all 231 visible text layers across the 8 design
   JPGs sample to #000000 / #ffffff / #00c4ca / #ec008c / #fcfaf6, so there
   is no grey type in the source at all.

   Greys found rendering on the live site (11 pages scanned: the 7 designed
   pages plus a single projekt, a single wydarzenie, the shop archive and a
   product):
     #0b0b0b  --gk-black  154 nodes   (also used for 4 backgrounds / 14 borders)
     #111111  --gk-ink     93 nodes   (body copy, inherited)
     #1f2937  #111827  #374151  #4a4a4a  #6b7280   main.css literals, 31 rules
     #4b5563  #111827  #515151  WooCommerce shop chrome
     #333333  Leaflet map attribution
   Three of them are tokens, so they are retuned at the token instead of
   selector by selector; the rest are literals in frozen main.css
   (ADR-0002), so their selectors are re-stated here — responsive.css wins
   the same-specificity tie by enqueue order.

   Exception, and the only one: prose sitting on the teal panel was never grey
   in main.css, so it keeps main.css's own colour at both bands — the design's
   off-white (#fcfaf6, --gk-color-bg-soft) on desktop and #0f4f4c below 981.
   Both are re-asserted at higher specificity further down. */

/* The three neutral tokens main.css declares in its own :root. --gk-black
   is 4/255 off true black and also paints the design's black squares and
   rules, which sample to #000000 in the source, so moving it to #000000 is
   correct for those too, not just for type. */
:root {
	--gk-black: var(--gk-color-text);
	--gk-ink: var(--gk-color-text);
	--gk-muted: var(--gk-color-text);
}

/* was #1f2937 */
.gk-prose,
.gk-events__description,
.gk-eventsMock__itemDetails,
.gk-eventExpanded__section,
.gk-eventExpanded__programDay,
.gk-eventExpanded__programDay .gk-eventExpanded__programDayTitle,
.gk-eventExpanded__programDay .gk-eventExpanded__programDaySub,
.gk-eventExpanded__programDay .gk-eventExpanded__programSecTitle,
.gk-eventExpanded__programDay .gk-eventExpanded__programList,
.gk-eventExpanded__programDay .gk-eventExpanded__programList li,
.gk-eventExpanded__programDay p,
.gk-eventExpanded__programDay strong,
.gk-eventExpanded__programDay b,
.gk-wydarzenieSingle__section,
.gk-person__meta,
/* was #111827 */
.gk-eventsMock__itemMeta,
.gk-footerPanel__value,
.gk-aboutIntro__calloutParagraph,
.gk-actionsItem__text,
.gk-projectSection__rightProse,
/* was #374151 */
.gk-eventCard__excerpt,
.gk-eventsMock__itemSubtitle,
.gk-eventExpanded__meta,
.gk-wydarzenieSingle__meta,
.gk-wydarzenieSingle__programDaySub,
.gk-footerPanel__label,
/* was #4a4a4a */
.gk-kv__label,
.gk-kv__value,
.gk-donationWidget,
.gk-donationWidget__btn,
.gk-donationWidget__select,
.gk-donationWidget__notice,
/* was #6b7280 */
.gk-footerPanel__copy,
/* the two <option>s inside the donation-type select, which main.css styles
   separately from the select itself (#4a4a4a, and #1f2937 when checked) */
.gk-donationWidget__select option,
.gk-donationWidget__select option:checked,
.gk-donationWidget__select option:hover {
	color: var(--gk-color-text);
}

/* WooCommerce shop chrome. Not in the design reference, but it is still
   grey type in the app, and the rule is „no grey anywhere". Prices and
   breadcrumb come from main.css; the reviews-tab link (#515151) comes from
   WooCommerce's own stylesheet, which loads after ours, hence !important on
   that one selector only. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce .product_meta,
.woocommerce .product_meta a {
	color: var(--gk-color-text);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--gk-color-text) !important;
}

/* Leaflet's attribution credit, injected by the map library at #333. */
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-attribution span {
	color: var(--gk-color-text);
}

/* .gk-aboutIntro__introWide — line-height 45px (client named this value).
   Corroborated in the source: a row-ink profile of the O NAS design JPG
   over the same paragraph (x240..1410, y455..700) gives line pitches of
   44 and 45px. Desktop only, and 981 is where that starts: main.css tunes
   this paragraph inside `@media (max-width: 980px)` (main.css:4406-4434), so
   from 981 up its base desktop styling is what renders and 1025 would have
   left the client's named 45px out of the 981-1024 band. */
@media (min-width: 981px) {
	.gk-aboutIntro__introWide,
	.gk-aboutIntro__introWide p {
		line-height: 45px;
	}
}

/* Prose sitting ON the teal panel must NEVER go black, at any width: the
   intro beside „AKTUALNA OFERTA" on the home page and on /oferta/, plus
   /oferta/'s empty state. None of main.css's colours here is grey — #eaf6f6,
   #fff and #0f4f4c — so item 7 does not reach them at all; they only need
   protecting from the blanket `.gk-prose` rule above, which is a single class
   and would otherwise win every tie on enqueue order.

   Two bands, because main.css itself has two:
     base (desktop)          main.css:1112/1396 — #eaf6f6 / #fff on teal
     @media (max-width:980)  main.css:4073-4074 — #0f4f4c, a dark teal picked
                             for legibility once the panel's padding collapses
   The desktop band is re-asserted with the design's actual value rather than
   main.css's eyeballed one: spec.json has this layer („Zapraszamy do
   zapoznania się z kalendarzem…") at #fcfaf6 = --gk-color-bg-soft. The mobile
   band re-states main.css's own #0f4f4c verbatim — the accepted baseline's
   value, not a new eyeballed colour, and no token carries it.

   The desktop declaration is UNSCOPED rather than in `min-width: 981px` for
   the same reason as --gk-kv-blank below: a `max-width: 980px` /
   `min-width: 981px` pair leaves a real fractional gap (980.5px), and there
   the global rule would win and put #000 on #00c4c9. Unscoped base plus one
   mobile override has no gap. Measured in Chrome at 375 / 640 / 980 / 980.4 /
   980.5 / 980.8 / 981 / 1023 / 1024 / 1440: #0f4f4c up to the boundary,
   #fcfaf6 above it, rgb(0,0,0) at none of them. Contrast on #00c4c9 is
   4.3:1 for #0f4f4c and 2.1:1 for #fcfaf6 — the latter is main.css's own
   desktop treatment (#eaf6f6 was 2.2:1) and the design's own value, so it is
   carried over unchanged rather than re-picked here. */
.gk-eventsMock__headRight.gk-prose,
.gk-eventsPage__headRight.gk-prose,
.gk-eventsMock__headRight.gk-prose p,
.gk-eventsPage__headRight.gk-prose p,
.gk-eventsMock__headRight.gk-prose strong,
.gk-eventsPage__headRight.gk-prose strong,
.gk-eventsPage__empty,
.gk-eventsPage__empty p {
	color: var(--gk-color-bg-soft);
}

/* main.css gives .gk-eventsPage__empty no mobile override, so it keeps the
   off-white at every width and is deliberately absent here. */
@media (max-width: 980px) {
	.gk-eventsMock__headRight.gk-prose,
	.gk-eventsPage__headRight.gk-prose,
	.gk-eventsMock__headRight.gk-prose p,
	.gk-eventsPage__headRight.gk-prose p,
	.gk-eventsMock__headRight.gk-prose strong,
	.gk-eventsPage__headRight.gk-prose strong {
		color: #0f4f4c;
	}
}

/* ---------- #17 + #18 Donacje — „To się dzieje dzięki tobie!" ---------- */

/* #18 bold. The block is already marked up as
   `<p><strong>To się dzieje dzięki tobie! …</strong></p>` in the ACF content,
   but main.css:2516-2518 forces font-weight:400 onto that very <strong>,
   which is why it renders regular. Three independent sources agree the whole
   paragraph is bold — not just the opening sentence:
     1. spec.json (wesprzyj, y1545..1800): one text layer, font
        'RedHatDisplay-ExtraBold', 27px, no run split;
     2. the design JPG shows uniform weight across all seven lines;
     3. the stored content wraps the whole paragraph in a single <strong>.
   800 is the weight RedHatDisplay-ExtraBold.ttf is registered at. */
body.gk .gk-support__mediaText p,
body.gk .gk-support__mediaText strong,
body.gk .gk-support__mediaText b {
	font-weight: var(--gk-fw-extrabold);
}

/* #17 colour. Resolved with the captain: the client's ask was for grey type
   to go away, not to be introduced, so this paragraph is black like the rest
   of the copy — which is also what the source says (the layer is #000000 in
   spec.json, and sampling the design JPG over its bbox gives #000000 glyph
   cores; no text layer in any of the 8 design JPGs is grey, 231/231
   checked). Same --gk-color-text as the global rule above; kept as its own
   declaration only because main.css targets this block explicitly. */
.gk-support__mediaText,
.gk-support__mediaText p,
.gk-support__mediaText strong {
	color: var(--gk-color-text);
}

/* ---------- #12 project pane — two-column text + slider ---------- */

/* .gk-projectSection__top is already `display:grid; align-items:start`, so
   both columns begin at the same y — but .gk-projectSection__topSquares
   carried margin-top:72px, which pushed the whole right column (mark, then
   slider) down to sit level with the left paragraph instead of the logo.
   Dropping it lets the right column open flush with the logo, as the design
   has it (the marks sit in the logo's band, x1502..1679 / y1888 against the
   logo at x243..459 / y1813).

   WIDENED TO EVERY PANE, on the client's instruction. It was keyed to the
   MOZAIKA pane alone via `.gk-projectPane--topSquaresFlush`
   (gk_project_aligns_top_squares(), functions.php), on the reasoning that the
   item named one section — and that is exactly what tripped this up: he was
   reviewing the AKADEMIA pane, where the square still sat 72px below the logo
   while MOZAIKA was flush. Five panes, one component, two behaviours.
   The qualifier is dropped as that comment itself said it should be. The PHP
   marker class is now unused by this rule but left in place; it still gates
   nothing else, so removing it is a template change for a later round. */
.gk-projectSection__topSquares.gk-decorSquares {
	margin-top: 0;
}

/* „the text under the slider is removed" — .gk-projectSection__rightProse,
   the paragraph rendered after the carousel. display:none takes it out of
   the accessibility tree as well as the page, and leaves the ACF field and
   its stored content untouched, so this is one line to revert.

   WIDENED TO EVERY PANE. It was keyed to MOZAIKA via
   `.gk-projectPane--noRightProse` (gk_project_hides_right_prose(),
   functions.php) so as not to delete visible copy from the other four. The
   copy turned out not to be per-project at all: FOUR panes render the
   identical paragraph „Program obejmowal inspirujace…" — akademia, szkola,
   kino, konferencja — and MOZAIKA is the only pane without it. One field wired
   to one shared value, so there was nothing project-specific to protect, and
   the client asked for it gone on the pane he was looking at.

   The ACF field and its stored content are untouched, so this is still one
   line to revert. */
.gk-projectSection__rightProse {
	display: none;
}

/* ---------- #1 projectsHome („NASZE PROJEKTY" offset teal blocks) ---------- */

/* Read off główna 2 / NASZE PROJEKTY in spec.json (container x119..1801,
   width 1682):
     photo (FOTO / konferencja-140)  x237..1187  y2716..3348  → 950 × 632
     title plate „NASZE"             x1221..1607 y3009..3143  → 386 × 134
     title plate „PROJEKTY"          x1221..1794 y3106..3239  → 573 × 133
   As fractions of the container: the photo column runs 7.0%..63.5%, the
   right column 65.5%..99.6%. The grid was minmax(360px,1.2fr) /
   minmax(280px,.8fr) — a 60/40 split — so at 1440 the photo came out 689px
   wide where the design's proportion is 772px, i.e. ~11% too small. The
   grid's own width is the container width, so percentages here resolve
   against the right box. */
@media (min-width: 1025px) {
	.gk-projectsHome__grid {
		grid-template-columns: 63.5% 34.1%;
		gap: 2%;
	}

	/* Title size. main.css:471-477 gives every big split title
	   (.gk-projectTitle span and friends) a flat font-size:100px with
	   34px !important side padding. Measured against the design, that is
	   ~27% too large HERE: the design's „PROJEKTY" glyph run is 474px on
	   the 1920 canvas (385px at this container's scale) where ours is
	   489px at 100px, so the design's effective size is ~79px. The
	   oversize also made the lower plate wider than the column — its text
	   was already being clipped by .gk-projectsHome's overflow-x:clip
	   before this pass, and narrowing the column to the design ratio made
	   that worse. Sized proportionally (5.4vw ≈ 78px at 1440) with the
	   padding in em, so the plate keeps its design proportion and cannot
	   outgrow its 34.1% column at any desktop width. !important is only
	   to beat main.css's own !important on the padding.
	   Scoped to .gk-projectsHome__title — the same 100px-vs-79px gap
	   probably applies to the other split titles, but that is outside
	   this item and is noted for the next round. */
	/* Five classes, not two: main.css:514
	   `.gk-section.gk-section--paper.gk-projectsHome .gk-projectTitle span`
	   is (0,4,1) with its own !important on padding-left, so a (0,2,0)
	   selector left the left side pinned at a flat 30px while only the right
	   side scaled. Asymmetric, and at 1025 the plate then ran to within a
	   pixel of its 34.1% column, back inside .gk-projectsHome's
	   overflow-x:clip — the clipping this item exists to fix. Symmetric
	   0.42em leaves ~16px of slack at 1025 and ~30px at 1440. */
	.gk-section.gk-section--paper.gk-projectsHome .gk-projectsHome__title .gk-projectTitle__line {
		font-size: clamp(38px, 5.4vw, 94px);
		padding-left: 0.42em !important;
		padding-right: 0.42em !important;
		/* Plate height. In PSD units the design's title is ~97px (glyph run
		   474px ÷ the 4.89px-of-glyph-per-1px-of-font this face renders) in a
		   134px plate — so the plate should be 1.383em tall, where .9em of
		   line-height + .11em padding only made 1.14em. padding-top is held
		   at a flat 6.72px by main.css:2144
		   (.gk-titlePlate__text span:not(.gk-about__titleLine):first-child)
		   and zeroed with !important on the last child, so the height is
		   made up from line-height plus padding-bottom instead. */
		line-height: 1.11;
		padding-bottom: 0.18em;
	}

	/* Title line pitch is NOT set here. The stacked-plate overlap has a single
	   owner further down this file, tied to --gk-plate-gap so it can never
	   exceed the gap and clip letters; see the „Stacked-plate pitch" rule in
	   the #1b block. A second declaration of the same selector at the same
	   specificity would be dead here and would invite the two to disagree. */
}

/* ---------- #1b title plates — uniform space around the text ----------

   Captain's remark (round-1 walkthrough, „Nasze projekty"): the space between
   the coloured plate and the text must be uniform on all four sides. He read
   padding 16/34/17.1/35 off `.gk-about__titleLine` and noted the real cause
   himself — even with `line-height` equal to `font-size` the vertical space
   still renders larger than the horizontal.

   That is correct and it is a font-metrics effect, not a padding error. A CSS
   inline box is `ascent + descent` tall (1.2em for this face), so with
   `line-height: 1` the half-leading is NEGATIVE (-0.1em each side), and on top
   of it the glyphs sit (ascent - cap-height) below the box top and (descent)
   above the box bottom. Painted-pixel measurement of both plate families, at
   1440 and 1740, on „NASZE" and „PROJEKTY", gives a constant excess over the
   DECLARED padding of:

       top     0.133em     left    0.061em   (glyph side bearing)
       bottom  0.153em     right   0.028em   (varies by last glyph: E .054, Y .005)

   So the plate is compensated: each side's padding is the target gap MINUS
   that side's intrinsic excess, which makes the PAINTED gap equal on all four
   sides at every font-size. Expressed in `em` so it holds at every breakpoint
   without a media query — there is deliberately no `min-width` here, so this
   block needs no row in the 1025 audit table above.

   `--gk-plate-gap` is the resulting uniform gap. 0.42em keeps the plates within
   a few px of the width round 1 tuned against the PSD glyph run.

   „AKTUALNA OFERTA" / „AKTUALNE WYDARZENIA" joined this list on the captain's
   walkthrough („aktualna oferta tak samo jak nasze projekty powinna miec rowne
   marginesy"). Their plates carried `padding: .1em .22em .14em` with
   `padding-left/right: 34px !important` on top (main.css:1093 and :472-477),
   which measured T18 / R37 / B24 / L40 — the same vertical-vs-horizontal
   mismatch. `.gk-eventsMock__titleLine` is in the SAME main.css rule as
   `.gk-eventsPage__titleLine`, so the home heading is included deliberately
   rather than left to drift, which is the mistake item 3 had to undo.

   These two need a (0,2,0) selector: main.css pins their side padding at
   `.gk-eventsMock__title span` (0,1,1) with `!important`, which would outrank a
   bare `.gk-eventsPage__titleLine` at (0,1,0) even with `!important` here.

   Plate height is 2 x gap + 0.714em regardless of line-height (the leading term
   cancels), so these grow 114px -> 155px at their 100px face. That is the cost
   of equal margins at this size, and it is the same treatment already accepted
   on „NASZE PROJEKTY".

   Right uses the same bearing as left: the true right bearing is glyph
   dependent (0.005em after „Y", 0.054em after „E") and compensating it per
   word would make the two lines optically inconsistent with each other, which
   is worse than the ~2px it saves.

   `!important` is required throughout: main.css:483 sets padding-left/right
   with `!important`, and :first-child / :last-child / :only-child rules at
   main.css:497-506 set padding-top the same way. */
:root {
	--gk-plate-gap: 0.42em;
	/* Intrinsic excess of the plate face, measured from painted pixels. These
	   are per-TYPEFACE, not per-size — a family whose plates use a different
	   face overrides them on itself (see the events headings below). */
	--gk-plate-x-top: 0.133em;
	--gk-plate-x-bottom: 0.153em;
	--gk-plate-x-side: 0.061em;
}

.gk-titlePlate.gk-about__title .gk-about__titleLine,
.gk-titlePlate.gk-about__title.gk-titlePlate--stack .gk-about__titleLine:first-child,
.gk-titlePlate.gk-about__title.gk-titlePlate--stack .gk-about__titleLine:last-child:not(:only-child),
.gk-titlePlate.gk-about__title:not(.gk-titlePlate--stack) .gk-about__titleLine:only-child,
.gk-section.gk-section--paper.gk-projectsHome .gk-projectsHome__title .gk-projectTitle__line,
.gk-eventsPage__title .gk-eventsPage__titleLine,
.gk-eventsMock__title .gk-eventsMock__titleLine {
	line-height: 1 !important;
	padding-top: calc(var(--gk-plate-gap) - var(--gk-plate-x-top)) !important;
	padding-bottom: calc(var(--gk-plate-gap) - var(--gk-plate-x-bottom)) !important;
	padding-left: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
	padding-right: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
}

/* The events headings are set in a different face from the other plates, so
   they carry their own excess. Measured the same way, from painted pixels at a
   100px face: top 15.8px (0.158em), bottom 15.3px (0.153em), side bearing
   1.6px left and 2.6px right (0.016 / 0.026em, meaned to 0.021em — per-glyph
   bearing is not chased here for the same reason it is not on „PROJEKTY").
   With the shared constants these plates measured a 7.0px spread; with their
   own they close to ~1px like the rest. */
/* THE OVERLAP MUST NEVER EXCEED THE GAP. A stacked plate paints over the one
   above it, so an overlap larger than the previous plate's bottom margin eats
   into its LETTERS. -0.554em against a 0.42em gap cut 0.134em (~13px) off the
   bottom of „AKTUALNA" and „NASZE" — the captain caught it („it cut off the
   first word"), and it had already shipped past a review because an ink-row
   scan reads the clipped „L" as a full-height band. Measure a heading like this
   by LOOKING at it, not by scanning rows.

   Tying the overlap to the gap makes the two impossible to drift apart: at
   `overlap = gap` the previous line's letters end exactly on the next plate's
   top edge, so the pair merges seamlessly with nothing clipped, whatever the
   gap is set to.

   The consequence is that the gap now controls the word spacing too:
       word gap = plate height - overlap - cap = (2g + 0.714) - g - 0.695
                = g + 0.019em
   so a 0.42em gap cannot produce a word gap tighter than ~0.44em. The captain
   asked for ~34px, which forces a smaller gap — and the design agrees: its
   plate is 134px at a ~97px face, i.e. cap 67 with 33.5 above and below, so
   the design's own uniform gap is 0.333em, not the 0.42em first chosen here
   (0.42 was picked to preserve the round-1 plate WIDTHS, not from the PSD).

   Both stacked headings therefore take 0.333em: uniform margin ~33px, word gap
   ~35px against the design's ~34-38, and no clipping. Single plates keep the
   :root 0.42em — they have no plate below them to collide with. */
.gk-projectsHome__title .gk-projectTitle__line,
.gk-eventsPage__title .gk-eventsPage__titleLine,
.gk-eventsMock__title .gk-eventsMock__titleLine {
	--gk-plate-gap: 0.333em;
}

.gk-eventsPage__title .gk-eventsPage__titleLine,
.gk-eventsMock__title .gk-eventsMock__titleLine {
	--gk-plate-x-top: 0.158em;
	--gk-plate-x-bottom: 0.153em;
	--gk-plate-x-side: 0.021em;
}

/* `.gk-people` — „Zarząd Fundacji" and „Zespół Fundacji". This block used to
   EXCLUDE them, on the reasoning that they are small name plates rather than
   page titles, and its own comment ended „if `.gk-people` should also become
   uniform, delete its exclusion". The client asked for exactly that after
   putting the two plates side by side: „tak wyglada zarzad … powinno byc
   Fundacja Gra w klasy i rowne odstepy."

   The exclusion could not simply be deleted, though. These plates are set in
   **Red Hat Display**, not the Gabarito the shared `--gk-plate-x-*` constants
   were measured on, so the shared values leave them 9px out: they would render
   top 17.3 / bottom 8.5 / left 15.4 / right 17.4. So the rule stays and carries
   this face's own excesses instead, measured from painted pixels at its 43px
   face against the flat 10px padding it had (painted T15 / B7 / L10 / R12):

     top    +5px  (0.1163em)
     left    0px
     right  +2px  (0.0465em)

   The BOTTOM is measured to the BASELINE, not to the ink — see the long note at
   `.gk-titlePlate__big` above for why (the client called the plate uneven while
   the ink measured equal, and the design agrees with him). „Zarząd"'s ą and
   „Fundacji"'s j hang past the baseline by ~9px and are allowed to; compensating
   them to the ink put 27px under the baseline against 18px above the cap.
   `-0.1381em` puts the baseline 18.06px off the bottom edge, the descender tip
   about 9px, which is what the design has (10px).

   Both plates end in „…Fundacji", so one set of constants serves the pair — the
   descender is present in both, which is why they measured identically. As of the
   client's „padding … powinny byc rowne we wszystkich naszych podkreslonych
   elementach" these are the SHARED `--gk-plate-x-*` constants rather than values
   measured on „Zarzad"/„Zespol" — see the „ONE SET OF CONSTANTS" note on the
   „Fundacja / Gra w klasy" plate above for the 2px trade and why it is worth it.

   Target is the shared `--gk-plate-gap` (0.42em = 18.06px here), i.e. the same
   painted gap the „Fundacja / GRA W KLASY" plate above now has, so the two
   plate families on this page read identically. The design does not have equal
   margins here either — an ink scan gives the design's „Zarząd Fundacji" plate
   L25 / R26 / T17 / B10 against its rect [239,1260,609,1329] — but equal margins
   are the client's explicit instruction on this page, twice.

   The `:is(:first-child, :last-child, :only-child)` is still not decoration: the
   uniform block above reaches these plates at (0,5,0) through its `:only-child`
   branch, so a plain (0,4,0) rule here would silently lose. The pseudo-class
   brings this to (0,5,0) and, being later in the file, it wins the tie.

   One consequence worth knowing: stacked `.gk-about__titleLine` plates carry no
   negative margin (they simply touch), so equalising each plate's own padding
   widens the gap BETWEEN the two lines by ~0.154em (~15px at a 95px face) on
   „KILKA SŁÓW / O NAS" and „O nas / NASZE WARTOŚCI". The inner edges are teal
   meeting teal, so nothing about the uniform gap is visible there; only the
   two words move further apart. `.gk-projectsHome__title` does carry a
   negative margin and its pitch IS preserved — see the re-derivation below. */
/* Same re-measurement for the „Zarzad / Zespol Fundacji" plates — same reason,
   different first and last glyphs, so a different mean. „Z" has almost no left
   bearing (0.313px) while „i" has 2.31-2.56px on the right, and the `:root`
   0.061em made both sides read tighter than the verticals.

       top     5.159px  0.1200em
       bottom  6.019px  0.1400em   (to the BASELINE)
       side    1.376px  0.0320em   mean of Z 0.313 / i 2.313 / Z 0.313 / i 2.563

   The two plates' verticals disagree by 1px between instances — they sit at
   different sub-pixel y offsets, so identical padding rounds differently. The
   mean is used; that 1px is below the noise floor and chasing it would need a
   per-instance value, which there is no selector for anyway. */
.gk-section.gk-people .gk-people__title {
	--gk-plate-x-top: 0.12em;
	--gk-plate-x-bottom: 0.14em;
	--gk-plate-x-side: 0.032em;
}

.gk-section.gk-people .gk-people__title .gk-about__titleLine:is(:first-child, :last-child, :only-child) {
	line-height: 1 !important;
	padding-top: calc(var(--gk-plate-gap) - var(--gk-plate-x-top)) !important;
	padding-bottom: calc(var(--gk-plate-gap) - var(--gk-plate-x-bottom)) !important;
	padding-left: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
	padding-right: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
}

/* `.gk-projectsHomeSlider__tag` — the „KONFERENCJA" / „DOBROSTAN NAUCZYCIELA"
   caption tags over the project photo. Captain's remark: „D" sits flush to the
   left edge while „KONFERENCJA" has a margin.

   Two separate causes, and only the second one is ours:

   1. PRE-EXISTING: main.css:851 sets `padding-left: 0 !important` on
      `…--stack .gk-about__titleLine:last-child:not(:only-child)`, i.e. on the
      bold second line only. That is why the „D" is flush and „KONFERENCJA"
      (first-child, main.css:846, `padding-left: 5px`) is not. Present in the
      base at 6135096; measured there as 5/5/0/5 and 5/5/5/0.

   2. INTRODUCED BY THE #1b BLOCK ABOVE: it reaches these tags at (0,5,0)
      through its `:first-child` / `:last-child` branches, which beats
      main.css's base `padding-right: 5px !important` at (0,3,0). So the RIGHT
      padding moved 5px → 9.69px while the left stayed pinned at main.css's
      5px/0px, widening the very asymmetry the remark is about. Excluding the
      tags from #1b was not enough — the exclusion never existed for the sides
      main.css did not pin.

   Both are settled by giving the tags their own gap and stating all four sides
   explicitly. `--gk-plate-gap: 0.246em` is chosen so the tags keep the size
   they have today rather than growing: it resolves to a 5.0px side padding at
   this 27px face, which is exactly main.css's own 5px, so only the flush edge
   and the widened right side change. The compensation constants are the same
   ones measured for the big plates — the excess is a property of the face, not
   of the size.

   Specificity: main.css's last-child rule is (0,7,0) with `!important` on every
   declaration, so each selector here matches it exactly and wins on source
   order (responsive.css is enqueued after main.css). */
.gk-projectsHomeSlider__tag .gk-titlePlate.gk-about__title .gk-about__titleLine,
.gk-projectsHomeSlider__tag .gk-titlePlate.gk-about__title .gk-about__titleLine:only-child,
.gk-projectsHomeSlider__tag .gk-titlePlate.gk-about__title.gk-titlePlate--stack .gk-about__titleLine:first-child,
.gk-projectsHomeSlider__tag .gk-titlePlate.gk-about__title.gk-titlePlate--stack .gk-about__titleLine:last-child:not(:only-child) {
	--gk-plate-gap: 0.246em;
	line-height: 1 !important;
	padding-top: calc(var(--gk-plate-gap) - var(--gk-plate-x-top)) !important;
	padding-bottom: calc(var(--gk-plate-gap) - var(--gk-plate-x-bottom)) !important;
	padding-left: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
	padding-right: calc(var(--gk-plate-gap) - var(--gk-plate-x-side)) !important;
}

/* Stacked-plate pitch — the SINGLE owner of this selector. Earlier passes
   declared it twice, once here and once inside the #1 desktop block, at
   identical specificity; the second copy was dead and a future editor tuning
   the pitch there would have seen no change. There is one declaration now.

   The overlap is expressed as the gap itself, not as a literal, which is what
   enforces „THE OVERLAP MUST NEVER EXCEED THE GAP" above: with a 0.333em gap
   the plate is (0.333-0.133) + 1.0 + (0.333-0.153) = 1.38em, so the design's
   own rule — second plate's top exactly 1.0em below the first (PSD: plate 134
   at a ~97px face, second plate 97px lower) — would give -0.38em, which is
   MORE than the gap and eats into the lower plate's cap space. Clamping the
   overlap to the gap keeps the pair merged with nothing clipped whatever the
   gap is later set to; the ~0.05em it gives up is the price of that guarantee,
   and it is the regression this formulation exists to prevent. Do not
   substitute a literal back in. */
.gk-projectsHome__title .gk-projectTitle__line--two {
	margin-top: calc(-1 * var(--gk-plate-gap));
}

/* ---------- #14 (cont.) „WSPOLPRACUJ Z NAMI" — the deferred 36px overlap,
              the square's level, and one square instead of three ---------- */

/* Round 1 recorded this as deliberately deferred: "the design overlaps the
   stacked title plates by 36px; ours touch. Your call for round 2." The client
   has now made the call — "za duza jest przestrzen miedzy dolem a gora" — and
   named both places this heading appears: /wspolpracuj-z-nami/ and the
   cooperate section on the home page.

   THE 36px IS THE PSD's, read off the plate rectangles rather than the text:
     wspolpracuj z nami  Rectangle 7 copy 2  y 188..321   (796x133)
                         Rectangle 7 copy 3  y 285..419   (412x134)
                         overlap = 321 - 285 = 36
     glowna 2            Rectangle 7 copy 2  y 1215..1350 (647x135)
                         Rectangle 7 copy 3  y 1313..1447 (367x134)
                         overlap = 1350 - 1313 = 37
   CONTEXT.md: vertical distances map 1:1, so 36px is taken literally rather
   than as 27% of the design's 133px plate. That matters — 27% of our taller
   147.6px plate would be 39.96px, which is the ENTIRE overlap budget and would
   leave zero clearance.

   36px at the 95px face is 0.379em, and expressing it in em is what keeps it
   safe at every width: item 4's hard rule is that the overlap must never exceed
   the plate's painted bottom spread, which is --gk-plate-gap = 0.42em here. So
   0.379em leaves 0.041em (~3.9px at desktop) and the ratio holds at any font
   size. Verified by pixel scan: plate 1's ink ends 39px above its bottom edge
   and the incoming plate's top lands 4px below that, so the J descender of
   „WSPOLPRACUJ" survives. DO NOT round this up to 0.42em or the letters go.

   Unscoped rather than pinned at 981 because it is em-based: it scales with the
   type instead of fighting main.css's mobile sizes. */
.gk-cooperatePage__head .gk-about__titleLine + .gk-about__titleLine,
.gk-cooperate__title .gk-about__titleLine + .gk-about__titleLine {
	margin-top: -0.379em;
}

/* „kwadracik ma byc rowno z poczatkiem tla do gory" — the mark's top edge sits
   FLUSH with the top of the teal plate, i.e. offset 0.

   THIS IS THE CLIENT OVERRIDING THE PSD, deliberately and on the second pass.
   The design puts the mark 38px below the plate's top edge (wspolpracuj: marks
   at y226, plate 1 opens at y188), and that 38px shipped first; he looked at it
   and said it should be level with the background instead. His screenshot
   measured exactly plate+38, so there is no doubt which state he rejected.
   Do not "restore" 38 from spec.json.

   Ours sat at plate+22 on /wspolpracuj-z-nami/ (main.css:2999 margin-top:22px)
   and plate+34 on the home cooperate block (main.css:2919 top:34px) — two
   different numbers for the same heading. Both are now 0.

   Pinned at 981, not unscoped, because main.css changes the POSITIONING MODEL
   below it: main.css:4149 makes .gk-cooperate__squares `position:static` and
   main.css:4158 drops .gk-cooperatePage__headSquares to margin-top:8px once the
   head becomes a column. A desktop offset applied there would fight a layout
   that no longer has a right-hand slot. */
@media (min-width: 981px) {
	.gk-cooperatePage__head .gk-cooperatePage__headSquares {
		margin-top: 0;
	}

	.gk-cooperate__head .gk-cooperate__squares {
		top: 0;
	}
}

/* „na stronie wspolracuj z nami ma byc jeden kwadracik a nie trzy".
   NOTE FOR THE RECORD: the design has THREE — spec.json, wspolpracuj z nami,
   three 72x60 marks at y226, x1486 / x1611 / x1726. This is the client
   overriding his own design, said explicitly and after seeing the render, so it
   is applied as asked and flagged rather than silently followed or refused.

   The first two are hidden rather than the last two: .gk-cooperatePage__head is
   `justify-content: space-between`, so the squares block is pinned to the right
   edge and the surviving mark keeps the rightmost position the design gives it
   (left 1349.5 at 1440). Hiding the last two instead would have left the mark
   at the block's left edge, 180px further in.

   Not scoped to a width: he asked for one square, not one square on desktop. */
.gk-cooperatePage__headSquares .gk-square:nth-child(-n + 2) {
	display: none;
}

/* ---------- #12 project pane — the text under the slider ---------- */

/* „text under the slider is removed" — the second half of item 12, which the
   round-1 click path recorded as done and WAS NOT. `responsive.css` carried no
   rule for either element below the carousel.

   TWO different things sit under the slider, and the client pointed at the
   second one. Both go, and both are duplicated copy rather than per-project
   content, which is what makes hiding them safe rather than a judgement call:

     .gk-carousel__caption          629x69   „KONFERENCJA DOBROSTAN NAUCZYCIELA"
       identical on ALL FIVE panes — on MOZAIKA, on SZKOLA OD NOWA, on KINO.
       Styled only at main.css:3562. (That string is a real design layer, but
       as a section heading on the expanded conference page at y2137, not as a
       slider caption.)
     .gk-projectSection__rightProse 629x148  „Program obejmowal inspirujace…"
       identical on FOUR panes — akademia, szkola, kino, konferencja. MOZAIKA
       is the only pane without it. This is the paragraph in the client's
       screenshot.

   A field wired to one shared value rather than to each project is the tell in
   both cases: five panes, one string.

   Scope: neither element renders anywhere else on the site. Checked all nine
   pages plus a single projekt — every instance of both is inside
   `.gk-projectSection__right`. The selectors are still scoped to the project
   section rather than global, so a carousel elsewhere can carry a real caption
   later.

   `display: none` rather than a template edit: this is the responsive layer's
   job. If the owner ever wants real per-project copy under the slider, the fix
   belongs in the template and these rules come out — the content is still in
   the database, untouched. */
.gk-projectSection .gk-carousel__caption {
	display: none;
}

/* „slider powinien byc ponizej kwadracika teraz kwadrat jest prawym gornym
   rogu" — the square stays at the TOP of the right column, level with the logo,
   and the carousel sits BELOW it. That is main.css's own stacking and it is
   what ships; this comment exists so the next session does not re-open it.

   The client asked for the slider to be levelled with the logo too, and it was
   done (`f8c05aa`): .gk-projectSection__topSquares went out of flow so the
   carousel could start at the column top. He rejected the result, and the
   reason is geometric rather than aesthetic — both elements want the same
   corner. The carousel fills the column's full 629px width, so a square pinned
   `right: 0` at `top: 0` lands ON the photo. It also needed `z-index: 2` merely
   to stay visible, because the carousel is later in the flow and painted over
   it.

   So the requirement „square AND slider level with the logo" is not satisfiable
   while the carousel is full-width: one of the two has to give. He chose the
   square keeping the top line and the slider going below it, which is the
   layout he had before f8c05aa.

   Resulting geometry at 1440: logo and square both at the column top, carousel
   at logo+71 — 45px of square plus main.css's own 26px `.gk-carousel`
   margin-top. That 26px is main.css's value, not a choice made here; if he ever
   wants the slider tighter under the square, that is the number to move.

   spec.json cannot arbitrate any of this: the design has NO expanded project
   pane on this page, only the index with every pane closed. */

/* „dalej logotypy roznia sie wielkoscia" — the pane logo now renders at the
   SAME ink size as the same project's logo in the index row above it, because
   it goes through the same measured geometry. Two separate reasons it did not:

     1. the pane's <img> carried no `data-gk-logo`, so none of the constants
        reached it and main.css:3459's plain `max-height` sized it instead;
     2. AKADEMIA additionally got no crop, so 45px of BOX was only ~18.8px of
        ink — its file is 64.4% white. That is why that pair looked worst.

   Measured pane-ink / index-ink before this change, at 1440:
     mozaika 0.45 · akademia 0.43 · szkola 0.81 · kino 0.56 · konferencja 0.52
   Every pane logo was smaller than its index twin, by a different amount each
   time, which is exactly what he was pointing at across three screenshots.

   The fix is selector work, not new numbers: `.gk-projectSection__logo img` is
   added beside `.gk-projectIndex__logo img` in the constants block, in the
   sizing rule and in the ratio overrides, so the pane inherits the client's own
   index ratios and its crop. `--gk-lg-basis` resolves to
   `min(100%, 251.109px)` in both places — the pane's logo block is 629px wide,
   so the min clamps to the same 251.109 basis and the same --gk-lg-box yields
   the same size. Nothing had to be re-derived.

   SUPERSEDES the earlier `max-height: 45px` here, which set every pane logo to
   the decor square's height on his instruction. That rule made all five panes
   equal to each other; this one makes each pane equal to ITS OWN index row,
   which is what the later remark asks for. The two cannot both hold — the index
   heights are 101 / 87 / 81 / 55 / 43, not one value — and the newer instruction
   wins. main.css:3459's `max-height:52px` is beaten by the sizing rule's
   `max-height: none`, so it needs no separate override. */

/* The anchor has to stop shrink-wrapping, or the sizing basis collapses.
   main.css:3458 sets `.gk-projectSection__logo a { display: inline-block }`,
   and only some projects have a link — MOZAIKA does. An inline-block is
   shrink-to-fit, so `--gk-lg-basis: min(100%, 251.109px)` resolved `100%`
   against a box whose width was itself derived from the image: MOZAIKA came out
   173.9px wide against the index's 197.5 (ratio 0.88) while the four unlinked
   logos were exact. `display: block` makes `100%` the 629px logo block, so the
   min clamps to the same 251.109 basis the index uses.

   This is why four of five matched and one did not — worth knowing before
   suspecting the constants. */
.gk-projectSection__logo a {
	display: block;
}

/* „przerwa miedzy tekstem a logo powinna byc taka sama jak miedzy kwadratem a
   sliderem" — both gaps are 26px, which is main.css's own `.gk-carousel`
   margin-top and therefore the value the right column already uses.

   Measured before: logo -> text was **7px** on all five panes while square ->
   slider was 26px. The 7px was not a spacing decision at all — it is the
   descender space under an inline image's line box, so it also drifted with the
   container's line-height. `display: block` on the img removes it, and the
   prose then carries the real 26px.

   The gap is measured from the logo's INK, not its box: AKADEMIA's crop pulls
   the following content up by 29.8px of negative margin, so the flow already
   resumes at the ink bottom and one margin value serves all five panes.

   `margin-bottom: 0` is here as a CONSEQUENCE OF #2a below, not because
   main.css was ever wrong. main.css:3459 gives the img a `margin-bottom: 16px`
   which used to collapse straight out of `.gk-projectSection__logo` — the
   wrapper has no padding, border or height of its own — and merge with the
   26px above, so the painted gap was max(16, 26) = 26. #2a makes
   `.gk-projectSection__left` a grid container, which turns the wrapper into a
   grid item with its own formatting context, and a margin cannot collapse out
   of that: the 16px starts stacking and the gap becomes 42px.

   Invisible on the five current panes, which is why it needs stating: the
   sizing rule below replaces `margin` WHOLESALE with its computed crop
   shorthand, but only for the five pinned `data-gk-logo` keys. `$pane_logo_key`
   comes from gk_project_pinned_key(), so a projekt added later emits no
   `data-gk-logo`, keeps main.css's raw 16px and would open at 42px from its
   prose instead of the 26px this block was tuned to. The keyed logos override
   this declaration anyway, so it changes nothing on existing content. */
.gk-projectSection__logo img {
	display: block;
	margin-bottom: 0;
}

.gk-projectSection__leftProse {
	margin-top: 26px;
}

/* ---------- #11 partner logo row — equal optical size ---------- */

/* Four of the five logos are tight crops with alpha and the fifth is a JPEG
   whose own file is mostly white padding — exactly the client's diagnosis.
   The per-file canvas and ink figures live in ONE place, the constants block
   further down; they are not restated here so the two cannot drift. Rendered
   at natural size the ink heights came out 113 / 49 / 66 / 87 / 83, i.e.
   Akademia dla rodzica read less than half the height of Mozaika, and the
   tiles were neither the same height nor evenly spaced (tops 3286..3308,
   heights 72..117).

   Note: the design reference places each logo at its own natural size, and
   its Akademia mark is the older line-drawn one — the file in use is the
   client's newer _LOGO_ADR_20.12.2025.jpg. Equal optical size is therefore
   the client's instruction rather than something the design shows.

   EQUAL INK AREA. Equal ink HEIGHT turns Akademia's 4.57:1 mark into a bar
   that dominates the row and drags every other mark down with it (it was
   the widest, so it set the height for all five). Equal ink WIDTH loses it
   entirely. The five are therefore normalised on equal ink AREA: for aspect
   r and area A, h = sqrt(A/r) and w = r·h. Akademia has the largest r, so
   it is the width-binding mark at every breakpoint — its ink spans the
   tile's content box and the other four sit strictly above it in height,
   which is what stops anything shrinking.

   ONE TILE ASPECT-RATIO. The tallest ink under equal area is the squarest
   mark, so the tile's content box needs W/H = sqrt(r_max · r_min) — for
   this set sqrt(4.5696 · 1.9558) = 2.9895. One ratio covers 5-up, the 3-up
   collapse at ≤980 and the mobile band with no per-breakpoint tuning, and
   it replaces the flat `height: 96px` that used to cap the row. It is a
   static --gk-lg-tile, so every var() below is written without a fallback:
   the container always declares it and an unreachable fallback would
   only invite the two copies to disagree.

   THE CONTAINER LIST IS THE WHOLE CONTRACT, so it has to name every ancestor
   the geometry rules can run under. `.gk-projectPane` is the third: the panes
   are emitted by project-section.php as siblings of `.gk-projectIndex`, and
   they only inherit from it because assets/js/main.js moves each one into a
   `.gk-projectIndex__paneHost`. With JS off that move never happens and the
   panes render in place, so without this declaration --gk-lg-cap/-tile would
   be undefined there, --gk-lg-basis would be guaranteed-invalid, and the marks
   would paint with their clip-path applied but their negative margins dropped
   — cropped, with the removed whitespace still holding layout. Declaring the
   two constants here rather than defaulting them at the var() sites keeps this
   block the single source of truth.

   WHERE THE NUMBERS LIVE. The five ink boxes are static constants in the
   block below, keyed on a data-gk-logo attribute the template emits from the
   project's own slug — the same repo-pinned approach as
   .gk-projectPane[data-gk-project="mozaika"]. Nothing is measured at request
   time: no image is opened, no GD call is made, no attachment meta is
   written. A project whose key is not one of the five carries no geometry at
   all and keeps the plain contain-inside-the-tile sizing below. */

/* CEILING. Mark size is a pure function of column width, so without a ceiling
   the wide-column bands outscale desktop: 3-up at 980 and 2-up at 640/820 all
   render bigger marks than the 5-up desktop row, and the 820/821 column change
   became a 54% jump. The ceiling is one constant, applied as a max-width on the
   sizing basis so the ratio and every percentage inside the tile follow it with
   no per-breakpoint tuning.

   84px of content height, which is the 1440 desktop row. MEASURED in Chrome
   on the rendered row rather than read off a declaration, because the row
   carries BOTH `gk-projects__logos` and `gk-projectsHome__logos`
   (projects.php) and main.css declares a gap on each at the same (0,1,0)
   specificity — `gap:18px` first, then `gap:0 12px`, so 12px is what actually
   renders and an 18px derivation is 4.8px per column out. Measured inputs at
   a 1440 viewport:
     container            1367px      (min(1800px, 100% − 73px))
     grid columns         5 × 263.797px, column-gap 12px
     tile content width   251.797px   (content-box, 6px side padding)
     ÷ 2.9895 tile ratio  84.23px of content height
   Rounded DOWN to 84 so the cap can never sit ABOVE the widest desktop row:
   84 × 2.9895 = 251.1px of content-width cap, and every band that reaches it
   — 640, 820, 980 and every viewport from ~1437 up — lands on the 1440 row to
   within 0.15px. That 0.15px (0.27% of Akademia's ink) is the whole
   cost of rounding down. The previous 82px came from the 18px gap and left
   1440 itself 2.6% below its own uncapped value. */
.gk-projects__logos,
.gk-projectsHome__logos,
.gk-projectIndex,
.gk-projectPane {
	--gk-lg-cap: 84px;
	/* W/H = sqrt(r_max · r_min) for the five ink aspects below. */
	--gk-lg-tile: 2.9895;
}

.gk-projects__logos .gk-logoTile,
.gk-projectsHome__logos .gk-logoTile {
	display: flex;
	align-items: center;
	justify-content: center;
	/* content-box so the ratio governs the CONTENT box, which is what the
	   logos are measured against; the border box is padding + border wider */
	box-sizing: content-box;
	min-height: 0;
	height: auto;
	aspect-ratio: var(--gk-lg-tile);
	max-height: var(--gk-lg-cap);
	padding: 14px 6px;
	overflow: hidden;
}

/* MOBILE CONTAINMENT: TWO COLUMNS below 821. main.css collapses the row to ONE
   column at ≤820 — not at ≤520 — so a width-driven tile becomes as tall as the
   container is wide: ~144px per tile at 375 and ~229px at 640, i.e. roughly
   715px and 1143px of logo row. Two columns across that whole band is the
   cheapest containment: no extra ladder step, no per-tile tuning, and the
   closed-form ratio stays intact. Row height with the ceiling above applied,
   against the 536px the flat 96px tile gave below 821:
     375   2-up, 3 rows, uncapped  →  270px    (tile content 53px)
     640   2-up, 3 rows, capped    →  364px    (tile content 84px)
     820   2-up, 3 rows, capped    →  364px
     980   3-up, 2 rows, capped    →  224px
     981   5-up, 1 row,  uncapped  →   81.5px  (tile content 54px)
     1024  5-up, 1 row,  uncapped  →   84.4px  (tile content 56px)
     1440  5-up, 1 row,  capped    →  112px    (tile content 84px)

   Two costs, stated rather than left silent, both where the ceiling or the
   containment beats "no mark drops below its equal-height value":
     375 — two columns of 157px cannot carry a 4.57:1 mark at 60px, so every
           mark lands lower: Akademia 34.5px, Mozaika 52.7px against the flat
           60px the equal-height rule gave.
     640 — the 2-up column is wider than the ceiling, so it clamps to the
           251.1px basis and Akademia comes in at 54.95px against 60px.
           Uncapped it would be 62.4px — larger than the 1440 desktop row,
           which is exactly the inversion the ceiling exists to remove.
   981 and 1024 are untouched by the ceiling (their columns are narrower than
   it): Akademia 35.0px and 36.9px. 1440 IS at the ceiling — 54.95px against
   the 55.10px its own column would give uncapped, the 0.15px stated above —
   and every capped band lands on that same 54.95px, so no band outscales the
   widest desktop row. The other four marks sit strictly above Akademia in
   height at every width.

   RESIDUAL, not introduced here: a step remains at the 980/981 boundary
   because the column count itself jumps 3-up → 5-up, so the capped 84px
   content height at 980 meets 54px at 981. That is inherent to a grid whose
   column count changes and is present in the shipped design too; closing it
   would need a per-breakpoint ratio, which is ruled out. */
@media (max-width: 820px) {
	.gk-projects__logos,
	.gk-projectsHome__logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The same five logos also form the accordion index on /nasze-projekty/,
   where main.css sized them by width (220px) — so that page showed the same
   marks at two different scales. The index box is given the tile's own
   content width and the tile's ratio, so both lists run off one rule. */
.gk-projectIndex__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	box-sizing: content-box;
	min-height: 0;
	width: calc((100% - 48px) / 5 - 12px);
	max-width: calc(var(--gk-lg-cap) * var(--gk-lg-tile));
	aspect-ratio: var(--gk-lg-tile);
	overflow: hidden;
}

@media (max-width: 980px) {
	.gk-projectIndex__logo {
		width: calc((100% - 24px) / 3 - 12px);
	}
}

@media (max-width: 820px) {
	.gk-projectIndex__logo {
		width: calc((100% - 14px) / 2 - 12px);
	}
}

/* THE INDEX LIST IS NOT NORMALISED ON AREA — the design does not do that here.
   The client rejected how these five read on /nasze-projekty/ and supplied the
   design's own render of the block.

   THE TARGET WIDTHS COME FROM THE PSD LAYER BBOXES, not from an ink scan of
   that render. An ink scan of a 726px-wide export understates by 4-12% — it
   measures painted pixels, while the layer bbox is the artwork's own box, which
   is what --gk-lg-ar is built from. The proof that the bboxes are the intended
   RENDERED sizes: four of the five layer aspects match our file aspects to five
   decimal places.

     layer (spec.json, NASZE PROJEKTY)   bbox      layer ar   our --gk-lg-ar
     LOGO MOZAIKA PELNA NAZWA            221x113   1.9558     1.95575
     Vector Smart Object      x1559      240x66    3.6364     3.63636
     logo dobrostan           x1206      218x87    2.5057     2.50575
     naglowek konfy           x882       189x82    2.3049     2.27711
     LOGO AKADEMIA DLA RODZICA           242x114   2.1228     2.24978  (see below)

   Scaled x0.8127 (1367/1682) those give the targets, against what the first
   pass shipped off the ink scan — and the client's eye picked out the three
   biggest shortfalls unprompted ("dobrostan ostatni i mozaika plus
   przedostatni moglby byc dociagniety"):

     logo                     target w x h     ink-scan pass    short by
     MOZAIKA                  179.6 x 91.8     169.5 x 86.7     6.0%
     SZKOLA OD NOWA           195.1 x 53.6     186.4 x 51.3     4.6%
     Konferencja DOBROSTAN    153.6 x 67.5     137.5 x 60.4     11.7%
     Kino DOBROSTAN           177.2 x 70.7     169.5 x 67.6     4.5%
     AKADEMIA DLA RODZICA     196.7 x  43.0    188.3 x 41.2     4.4%

   The design's own spreads are WIDTH 1.37x, HEIGHT 1.68x, AREA **2.15x**. An
   area spread of 2.15x is proof the design is not equalising area: it holds the
   widths inside a 137-188px band and lets every logo keep its natural aspect.
   Equal area is right for the horizontal strip on `/`, where the eye compares
   overall mass — the client confirmed that one now reads correctly. In this
   LEFT-ALIGNED VERTICAL list every logo starts at the same x, so width reads as
   size, and equal area inflated the wide-and-short marks.

   So --gk-lg-box is re-scaled for the index only, as the design's measured INK
   width over the tile's 251.109px content box. The home strip keeps its own
   values; nothing above this rule changes.

   FINAL VALUES ARE THE CLIENT'S OWN RATIOS, not the PSD bboxes. Having seen the
   bbox-derived pass he set the height ratios himself, against MOZAIKA, and
   raised MOZAIKA 10%: "moim zdaniem mozaika 1.1 akademia 0.45 kino dobrostoan
   0.8 konferencja 0.85", then tuned two of them a second time: "szkola od nowa
   0.55 akademia 0.43", then "konferencja 0.86" and closed the item. DO NOT "correct" these back to the PSD bboxes — a design
   source settles disputes about the design, it does not outrank the person
   deciding how the page should look.

   Reference height H = 91.83 x 1.1 = 101.01 (MOZAIKA's bbox height x his 1.1).

     logo           ratio  height   width    --gk-lg-box
     mozaika         1.00  101.01   197.56   0.78675
     szkola-od-nowa  0.55   55.56   202.03   0.80455
     kino            0.80   80.81   202.49   0.80640
     konferencja     0.86   86.87   197.81   0.78775
     akademia        0.43   43.44   ink 198.5, box 233.3 -> 0.92923

   Every one of the five is now his number; nothing here is derived any more
   except MOZAIKA's starting height, which his 1.1 multiplies.

   AKADEMIA's ratio is applied to its INK height, then widened by its ink
   aspect 4.5696 and divided by 0.85064 to get the box. At 0.45 he has
   deliberately accepted that this logo stays short: the design's AKADEMIA is a
   different, lighter line-art mark at ink aspect ~2.13, and matching the
   design's height with THIS file would need ~420px of ink width against a
   251px tile. Owner task; see the note at the end of this comment.

   Fractions of the TILE, not of the viewport, so the three tile widths at
   1025+/981-/821- all keep these proportions with no extra media queries.

   The tile's ratio is loosened from --gk-lg-tile (2.9895 = 251.109/84) to
   2.4145 = 251.109/104, because MOZAIKA is the tallest at 101.01px and the tile
   carries `overflow: hidden` — at 2.9895 it would lose 17px off the giraffe.
   104 rather than a snug 101: a margin under ~1px is inside sub-pixel rounding,
   and clipping here has NO symptom other than a shaved giraffe. Re-check this
   ratio whenever an index width goes up; the binding constraint is
   197.56/1.95575. --gk-lg-tile itself is untouched, so the home strip is
   unaffected. Raising a target width here means re-checking this ratio: the
   binding constraint is 179.6/1.95575.

   STILL NOT RIGHT, and it is not a CSS problem: the design's AKADEMIA DLA
   RODZICA is a DIFFERENT, lighter line-art mark with an ink aspect near 2.13.
   The file in the media library is the heavy black-square logo, ink aspect
   4.5696. At the design's 188px width ours is ~41px tall against the design's
   88.5px, so it still reads thin. No crop of the current file reaches aspect
   2.13 — that needs the other artwork. Owner task, see
   gwk-adr-logo-media-trim. The row ORDER also differs from the design
   (design: mozaika, szkola, konferencja, kino, akademia) and comes from post
   order, i.e. content, not CSS. */
.gk-projectIndex__logo {
	aspect-ratio: 2.4145;
}

/* Unmeasured image: just fit it inside the tile. */
.gk-projects__logos .gk-logoTile img,
.gk-projectsHome__logos .gk-logoTile img,
.gk-projectIndex__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* MEASURED INK GEOMETRY — the only place these numbers live.
   Measured read-only on 2026-08-20 against the media library. Keys are the
   projekt post slugs the templates emit as data-gk-logo; the file each one
   was measured from is named beside it.

     key / source file                canvas      ink          ink aspect
     akademia-dla-rodzica
       logo-adr.jpg                   7800×3467   6635×1452    4.5696
     mozaika
       mozaika-logo.png                221×113     221×113     1.9558
     szkola-od-nowa
       szkola-od-nowa.png              240×66      240×66      3.6364
     kino-dobrostan-nauczyciela
       kino-dobrostan.png              218×87      218×87      2.5057
     konferencja-dobrostan-nauczyciela
       dobrostan-nauczyciela.png       189×83      189×83      2.2771

   ONLY akademia-dla-rodzica HAS PADDING: its ink is 85.064% of the file's
   width and 41.881% of its height, i.e. 64.4% of the canvas is baked-in
   white — exactly the client's diagnosis. The other four are alpha PNGs
   whose ink fills the file AS MEASURED, so they need no crop and only their
   aspect matters; a future re-upload that carries whitespace needs its row
   updated here too.

   Owner task gwk-adr-logo-media-trim covers trimming the ADR asset. When the
   trimmed file is re-uploaded, this row becomes --gk-lg-box: 1 with the four
   band values dropped (l/t/r/b = 0, w/h = 1.0); its ink aspect is unchanged
   at 4.5696, so nothing else moves.

   HAZARD, because the crop is keyed to the PROJECT and not to the file: a new
   attachment on the same projekt keeps the same data-gk-logo key, so these
   constants still resolve and a trimmed ADR would be clip-path'd a SECOND
   time — about 58% off its height — with no error anywhere. Replacing the
   image and editing this row are one task, not two.

   --gk-lg-ar  the FILE's aspect (canvas w/h), i.e. the img box's ratio.
   --gk-lg-box the image's laid-out width as a fraction of the tile's content
               box: the equal-area ink width sqrt(r/r_max), divided by the
               fraction of the file the ink occupies.
   --gk-lg-t/r/b/l the padding bands as fractions of the file. */
.gk-logoTile img[data-gk-logo="akademia-dla-rodzica"],
.gk-projectIndex__logo img[data-gk-logo="akademia-dla-rodzica"],
.gk-projectSection__logo img[data-gk-logo="akademia-dla-rodzica"] {
	--gk-lg-ar: 2.24978;
	--gk-lg-box: 1.17559;
	--gk-lg-t: 0.2942;
	--gk-lg-r: 0.07769;
	--gk-lg-b: 0.28699;
	--gk-lg-l: 0.07167;
}

.gk-logoTile img[data-gk-logo="mozaika"],
.gk-projectIndex__logo img[data-gk-logo="mozaika"],
.gk-projectSection__logo img[data-gk-logo="mozaika"] {
	--gk-lg-ar: 1.95575;
	--gk-lg-box: 0.65422;
}

.gk-logoTile img[data-gk-logo="szkola-od-nowa"],
.gk-projectIndex__logo img[data-gk-logo="szkola-od-nowa"],
.gk-projectSection__logo img[data-gk-logo="szkola-od-nowa"] {
	--gk-lg-ar: 3.63636;
	--gk-lg-box: 0.89207;
}

.gk-logoTile img[data-gk-logo="kino-dobrostan-nauczyciela"],
.gk-projectIndex__logo img[data-gk-logo="kino-dobrostan-nauczyciela"],
.gk-projectSection__logo img[data-gk-logo="kino-dobrostan-nauczyciela"] {
	--gk-lg-ar: 2.50575;
	--gk-lg-box: 0.7405;
}

.gk-logoTile img[data-gk-logo="konferencja-dobrostan-nauczyciela"],
.gk-projectIndex__logo img[data-gk-logo="konferencja-dobrostan-nauczyciela"],
.gk-projectSection__logo img[data-gk-logo="konferencja-dobrostan-nauczyciela"] {
	--gk-lg-ar: 2.27711;
	--gk-lg-box: 0.70591;
}

/* clip-path removes the padding bands and the negative margins take them
   back out of the layout — leaving the element occupying exactly its ink.
   Vertical margins resolve against the containing block's WIDTH, same as the
   horizontal ones, hence the divide by the file's aspect ratio. Tight crops
   carry no band variables at all, so they get neither clip-path nor margins.

   The :is() list is the same five keys as the constants above and gates this
   rule to them: an unlisted key has no --gk-lg-box, and applying `width:
   calc(var(--gk-lg-box) …)` with max-width:none to it would drop the mark out
   of the tile entirely instead of merely leaving it unnormalised. Same two
   selectors as the constants block: `gk-logoTile` is emitted in one place
   only (projects.php), always inside a div carrying both row classes, so
   naming both rows would repeat the key list for no extra coverage. */
.gk-logoTile img:is([data-gk-logo="akademia-dla-rodzica"], [data-gk-logo="mozaika"], [data-gk-logo="szkola-od-nowa"], [data-gk-logo="kino-dobrostan-nauczyciela"], [data-gk-logo="konferencja-dobrostan-nauczyciela"]),
.gk-projectIndex__logo img:is([data-gk-logo="akademia-dla-rodzica"], [data-gk-logo="mozaika"], [data-gk-logo="szkola-od-nowa"], [data-gk-logo="kino-dobrostan-nauczyciela"], [data-gk-logo="konferencja-dobrostan-nauczyciela"]),
.gk-projectSection__logo img:is([data-gk-logo="akademia-dla-rodzica"], [data-gk-logo="mozaika"], [data-gk-logo="szkola-od-nowa"], [data-gk-logo="kino-dobrostan-nauczyciela"], [data-gk-logo="konferencja-dobrostan-nauczyciela"]) {
	/* The sizing basis is the box's content width, held under the ceiling. It
	   has to be capped HERE and not on the tile: the tile is a grid item, so
	   constraining its width would drop it out of `stretch` and make `width:
	   auto` fit-content — sized by this image, which is sized by the tile. */
	--gk-lg-basis: min(100%, var(--gk-lg-cap) * var(--gk-lg-tile));
	max-width: none;
	max-height: none;
	height: auto;
	aspect-ratio: var(--gk-lg-ar);
	width: calc(var(--gk-lg-box) * var(--gk-lg-basis));
	clip-path: inset(
		calc(var(--gk-lg-t) * 100%)
		calc(var(--gk-lg-r) * 100%)
		calc(var(--gk-lg-b) * 100%)
		calc(var(--gk-lg-l) * 100%)
	);
	margin:
		calc(var(--gk-lg-t) * var(--gk-lg-box) / var(--gk-lg-ar) * -1 * var(--gk-lg-basis))
		calc(var(--gk-lg-r) * var(--gk-lg-box) * -1 * var(--gk-lg-basis))
		calc(var(--gk-lg-b) * var(--gk-lg-box) / var(--gk-lg-ar) * -1 * var(--gk-lg-basis))
		calc(var(--gk-lg-l) * var(--gk-lg-box) * -1 * var(--gk-lg-basis));
}

/* Placed AFTER the constants block on purpose. These selectors are
   (0,2,1) — the same specificity as the `.gk-projectIndex__logo img[...]`
   branch of the constants above — so ONLY source order decides, and the first
   attempt at this override sat before them and measured no change at all.
   See the design table above `.gk-projectIndex__logo`. */
.gk-projectIndex__logo img[data-gk-logo="mozaika"],
.gk-projectSection__logo img[data-gk-logo="mozaika"] {
	--gk-lg-box: 0.78675;
}

.gk-projectIndex__logo img[data-gk-logo="szkola-od-nowa"],
.gk-projectSection__logo img[data-gk-logo="szkola-od-nowa"] {
	--gk-lg-box: 0.80455;
}

.gk-projectIndex__logo img[data-gk-logo="konferencja-dobrostan-nauczyciela"],
.gk-projectSection__logo img[data-gk-logo="konferencja-dobrostan-nauczyciela"] {
	--gk-lg-box: 0.78775;
}

.gk-projectIndex__logo img[data-gk-logo="kino-dobrostan-nauczyciela"],
.gk-projectSection__logo img[data-gk-logo="kino-dobrostan-nauczyciela"] {
	--gk-lg-box: 0.80640;
}

.gk-projectIndex__logo img[data-gk-logo="akademia-dla-rodzica"],
.gk-projectSection__logo img[data-gk-logo="akademia-dla-rodzica"] {
	--gk-lg-box: 0.92923;
}

/* ---------- #4 „AKTUALNA OFERTA" — right column aligned to the top ---------- */

/* /oferta/ (archive-wydarzenie.php). In the design (wydarzenia, canvas
   1920) the teal panel opens at y187, the intro beside the heading at y247
   and the heading plate at y287 — so the intro sits 60px below the panel's
   top edge and 40px ABOVE the plate. main.css had the panel at
   padding-top:130px with the intro pulled up only 50px, which left ~80px of
   empty teal above the intro and made the column read as centred against
   the heading rather than starting at the top of the section.
   Values are the design's own, used 1:1 as the rest of the theme does with
   PSD measurements (container 1682px, mark 72px, --gk-subpage-top).
   The equivalent block on the home page (.gk-eventsMock__*) already sits
   within ~11px of the same design geometry, so it is left alone. */
/* Scoped to desktop: below 1025 responsive.css already stacks this block
   and zeroes the pull-up, and those rules come earlier in this file.
   Selectors match main.css's specificity (.gk-section.gk-eventsPage … and
   …__headRight.gk-prose) so enqueue order decides the tie. */
@media (min-width: 1025px) {
	.gk-section.gk-eventsPage .gk-eventsPage__wrap {
		padding-top: 100px;
	}

	/* The design puts the intro 40px ABOVE the heading plate (panel y187, intro
	   y247, plate y287) and the pull-up reproduced that faithfully. The captain
	   overrode it on the walkthrough: the two columns must START at the same
	   height — „Zapraszamy do zapoznania sie" level with the plate, the way the
	   thumbnail and the text line up in an event row. So the pull-up goes to 0
	   and the grid's `align-items: start` puts both columns on the same y.

	   This is a DELIBERATE deviation from the PSD, recorded as such: the design
	   value was correct and is being replaced by an explicit instruction, not
	   by a measurement. The panel's own `padding-top: 100px` above is unchanged
	   and still the design's. */
	.gk-eventsPage__headRight.gk-prose,
	.gk-eventsMock__headRight.gk-prose {
		margin-top: 0;
	}

	/* Stacked-plate pitch, the same treatment as „NASZE PROJEKTY" — the captain
	   asked for it by name („przestrzen miedzy aktualna a oferta jest za duza,
	   nasze projekty rozwiazaly to lepiej").

	   Giving the plates equal padding made each one 1.554em tall, and because
	   they only TOUCHED (gap measured 0.0px) the two words ended up a full
	   plate height apart. The design has them much closer: the „AKTUALNE
	   WYDARZENIA" text layer is 617x172 for two lines (spec.json, wydarzenia
	   y317..489 and główna 2 y3909..4081), so with a ~0.695em cap the pitch is
	   about 105px at this face.

	   Rather than introduce a third number, this reuses the projectsHome rule:
	   pitch = 1.0em, so margin-top = 1.0em - 1.554em = -0.554em, which lands at
	   100px against the design's ~105. Identical formula, identical constant,
	   and it keeps a single definition of what a stacked plate pair does.

	   Both plates are white on teal, so the overlap region is white and the
	   pair reads as one stepped block — which is exactly how „NASZE PROJEKTY"
	   already reads. */
	.gk-eventsPage__titleLine + .gk-eventsPage__titleLine,
	.gk-eventsMock__titleLine + .gk-eventsMock__titleLine {
		margin-top: calc(-1 * var(--gk-plate-gap));
	}
}

/* ---------- #3 event card margins ---------- */

/* Design (wydarzenia, canvas 1920) — card „WYDARZENIE 1", the AKADEMIA DLA
   RODZICA one the client paired against our DOBROSTAN NAUCZYCIELA 4 render:
     card background  x236..1681  y776..1012   → 1445 × 236
     thumb            x267..451   y810…        → inset L31  T34
     title plate      x483…       y808…        → inset L247 T32
     meta line        x485…       …y988        → inset L249 B24
     right-hand text  x1222..1648 y808..971    → inset L986 T32 R33
     ZAPISZ SIĘ button x1222..1682 y1008..1079 → flush to the card's right
     next card        y1157                    → 145px below this card
   Card width/height and its 119px left+right inset inside the teal panel
   already match (1169×196 vs 1174×192 scaled, 99px vs 97px), so what is
   left is the four margins the client listed. Values are the design's own,
   used 1:1 as the surrounding card metrics already are (thumb 184px, gap
   16px). Desktop only — the card stacks below 1025 and both main.css and
   this file already tune that.

   APPLIED TO BOTH BLOCKS. The first pass scoped these to .gk-eventsPage on the
   reasoning that .gk-eventsMock__row is shared markup — emitted by
   event-index-row.php for the /oferta/ accordion and by
   template-parts/blocks/events.php for the home block — and that the home
   block „has its own design, główna, not wydarzenia". The premise is true and
   the conclusion was wrong: główna DOES carry this card, and it is the SAME
   card. From spec.json:

       WYDARZENIE 1 copy   główna 2     [195, 4749, 1682, 5052]  1487 x 303
       WYDARZENIE 1 copy   wydarzenia   [195, 1157, 1682, 1460]  1487 x 303

   Identical width and height, identical x. The outer WYDARZENIE 1 agrees too
   (1680x847 vs 1684x823). So there was never a second set of numbers to
   respect — the home block was simply left uncorrected, and rendered 43px
   shorter with tighter insets (thumb 13px against the design's 34, meta 14px
   from the bottom against 24, title 263px in against 247).

   Caught on the captain's walkthrough: „na stronie oferta wygląda dobrze a na
   stronie głównej dalej biednie". The card-internal metrics below therefore
   carry both scopes. Only the between-card rule stays .gk-eventsPage — see the
   note on it, it is structural to the accordion and never matched home. */
@media (min-width: 1025px) {
	/* top + bottom: 13px of thumb margin against the design's 34, which is
	   also what brings the card to the design's 236px height. */
	.gk-eventsPage .gk-eventsMock__thumb,
	.gk-section.gk-eventsMock .gk-eventsMock__thumb {
		margin: 34px 0 34px 31px;
	}

	/* left: the heading plate and meta line sat 263px in, design 247.
	   align-self goes from center to stretch so the column spans the card and
	   the plate/meta pair can honour the design's own top and bottom insets
	   (title 32 from the top, meta 24 from the bottom) instead of floating as
	   one centred lump. */
	.gk-eventsPage .gk-eventsMock__main,
	.gk-section.gk-eventsMock .gk-eventsMock__main {
		align-self: stretch;
		justify-content: flex-start;
		padding-top: 32px;
		padding-bottom: 24px;
		padding-left: 16px;
	}

	/* `justify-content: space-between` was the original way of holding those
	   two insets, and it was wrong in a way only the captain's walkthrough
	   caught: it splits the free space between EVERY pair of children, so the
	   title plate and the subtitle plate were pushed apart. In the design they
	   touch — „DOBROSTAN NAUCZYCIELA" and „II Konferencja" read as one white
	   block, and the paddings are already cut for it (title `padding-bottom:
	   2.8px` meets subtitle `padding-top: 2.24px`).

	   It was also invisible below 1440: the card only has slack once it is wide
	   enough, so the gap measured 11.6px at 1440 and 1740 and 0px at 1280 and
	   1024 — which is why it survived the round-1 sweep at the four review
	   widths.

	   An auto margin on the subtitle collects the free space instead, so the
	   whole surplus lands in ONE place, below the plate pair. The card keeps
	   the design's 32px top and 24px bottom insets, the meta row still ends
	   flush against the bottom padding exactly as space-between left it, and
	   the plates touch at every width. `margin-top: 18px` on the meta row is
	   deliberately left alone: auto margins only absorb the free space that is
	   left AFTER fixed margins, so the 18px minimum survives when the card has
	   no slack — which `margin-top: auto` on the meta row itself would have
	   silently dropped to 0 at 1024-1439.

	   Home is NOT touched: `.gk-eventsMock__main` there is already
	   `justify-content: flex-start` (main.css:1184), so its plates already
	   touch — verified 0.0px at 1740, 1440, 1280 and 1024. This is the same
	   .gk-eventsPage scoping the rest of #3 uses, for the same reason: the
	   markup is shared with the home block, whose design is główna. */
	.gk-eventsPage .gk-eventsMock__itemSubtitle,
	.gk-section.gk-eventsMock .gk-eventsMock__itemSubtitle {
		margin-bottom: auto;
	}

	/* right: the description ran to within 1px of the card edge, design 33.
	   The inset goes on the text, not on .gk-eventsMock__side, because the
	   magenta button below it is flush to the card's right edge by design.
	   No padding-top here — main.css already centres this text vertically
	   (justify-content:center), which is what the design shows (32 above,
	   41 below), so a padding-top would double-count. */
	.gk-eventsPage .gk-eventsMock__itemDetails,
	.gk-section.gk-eventsMock .gk-eventsMock__itemDetails {
		padding-right: 33px;
	}

	/* bottom: space between consecutive cards was 90px, design 145. On this
	   page each card is a <button class="gk-eventsMock__row"> wrapped in its
	   own .gk-eventRow together with the (height:0) collapsed detail pane
	   (event-index-row.php:30-32), so consecutive cards are never adjacent
	   .gk-eventsMock__row siblings — the gap lives on
	   `.gk-eventRow + .gk-eventRow` (main.css:1463) and that is what has to
	   move. `.gk-eventsMock__row + .gk-eventsMock__row` only ever matched the
	   home block, which is not the block this design was measured from. */
	.gk-eventsPage .gk-eventRow + .gk-eventRow {
		margin-top: 145px;
	}
}

/* ---------- #14 + #15 „Współpracuj z nami" ---------- */

/* #15 the lead title above the teal rule.

   READ „Zgłoś się!" BELOW AS „Napisz do nas!": client review round 2 #3b
   changed that copy (ACF `lead_title`, migrated by
   tools/content/round2-content-fixes.php). The element is unchanged —
   .gk-cooperatePage__leadTitle — and every measurement here was taken against
   the old words, so they are quoted as they were rather than restated.

   The rule is .gk-cooperatePage__imageCol::before at top:50% — a percentage
   of the PHOTO column's height, which has nothing to do with where the text
   ends. Measured distance from the rule to the bottom of „Zgłoś się!":
     1920  rule 73px below the text (ok)
     1440  rule 41px ABOVE it  → runs through the words
     1200  rule 239px above it
     1025  rule 548px above it
   In the design the rule sits 47px below „Zgłoś się!" (Line 2 at y928..933;
   the words are the last line of the text layer that ends at y881). That
   layer also carries the two paragraphs above them, but OUR markup does not:
   cooperate-page.php:56-67 renders the paragraphs as .gk-cooperatePage__prose
   and „Zgłoś się!" as a separate .gk-cooperatePage__leadTitle SIBLING after
   it. So the rule is anchored to the lead title — the element that actually
   carries the words — not to the prose, whose last line is
   „…możliwościach współpracy?" and which would put the rule ABOVE the words
   again.

   981, not 1025: main.css collapses .gk-cooperatePage__layout to one column
   inside `@media (max-width: 980px)` (main.css:4160) and this file has no
   tablet rule for it, so 981-1024 is still the two-column desktop layout —
   which is where the mis-anchored rule and the clustered head marks were
   visible, the 1024 review width included. */
@media (min-width: 981px) {
	/* Only where the replacement rule can exist: the ::after below hangs off
	   .gk-cooperatePage__leadTitle, which cooperate-page.php:60-62 emits only
	   when the block has a lead title. Without one there would be no rule at
	   all, so main.css's image-anchored one stays for that case. */
	.gk-cooperatePage__layout:has(.gk-cooperatePage__leadTitle) .gk-cooperatePage__imageCol::before {
		display: none;
	}

	/* Full-bleed like the original rule; the section clips the overhang so
	   no horizontal scrollbar appears (same trick main.css uses on
	   .gk-projectsHome). */
	.gk-cooperatePage.gk-section {
		overflow-x: clip;
	}

	.gk-cooperatePage__topLeft {
		position: relative;
		/* main.css:3017-3024 puts this column at z-index:3 so it paints over
		   the old rule, which lived in .gk-cooperatePage__imageCol (z-index:2).
		   That makes the column a stacking context, which would trap the
		   ::after below at z-index:-1 inside it and paint the whole column —
		   rule included — above the photo. The rule has to sit BEHIND the
		   photo so the picture covers it (main.css:3059-3062 documents that
		   intent for the rule this replaces), so the column drops below the
		   image column instead. The two never overlap: they are separate grid
		   columns with an 86px gutter, so nothing in the text column is hidden
		   by the photo, and „Zgłoś się!" still paints over the rule because
		   the rule is a negative-z-index child of this very column. */
		z-index: 1;
	}

	/* The rule spans the FULL content container, as the design has it: the
	   „Line 2" layer is bbox [119,928,1801,933], i.e. all 1682px of it. The
	   offsets resolve against .gk-cooperatePage__topLeft, which is only the
	   narrow left grid column (main.css:3007-3016 is
	   minmax(320px,.88fr) / minmax(420px,1fr) with an 86px gutter and 120px
	   of right padding), so ±50vw did not reach the right content edge at any
	   desktop width — measured 120px short at 1025, 104px at 1440 and 246px
	   at 1920, and below ~1250 the rule falls clear of the photo so the whole
	   ragged end was on screen. ±100vw overshoots on both sides and
	   .gk-cooperatePage__wrap's overflow-x:clip (main.css:2990) trims it back
	   to exactly the container box — the same trick that already made the
	   left end land on the content edge.

	   Anchored to .gk-cooperatePage__leadTitle, the element „Zgłoś się!" is
	   rendered in, so the design's 47px is measured from the bottom of those
	   words at every width and they always sit above the rule. It cannot hang
	   off .gk-cooperatePage__topLeft either: `100%` there is the bottom of the
	   CTA, past the words. `position: relative` with no z-index leaves the
	   lead title a non-stacking-context, so this z-index:-1 pseudo still
	   resolves inside topLeft's stacking context (z-index:1) and stays behind
	   the photo column (z-index:2), exactly as before. */
	.gk-cooperatePage__leadTitle {
		position: relative;
	}

	.gk-cooperatePage__leadTitle::after {
		content: "";
		position: absolute;
		top: calc(100% + 47px);
		left: -100vw;
		right: -100vw;
		border-top: 2px solid var(--gk-teal);
		z-index: -1;
		pointer-events: none;
	}

	/* The design puts the CTA just BELOW the rule (text ends y881, rule
	   y928..933, button y931..1002), i.e. 50px under the words. main.css:3040
	   gives .gk-cooperatePage__actions 16px, which would put the rule across
	   the button's face now that the rule hangs 47px under the lead title, so
	   the gap after the lead title takes the design's 50px. Where there is no
	   lead title main.css's own rule is left alone: nothing is anchored to the
	   prose any more. */
	.gk-cooperatePage__leadTitle + .gk-cooperatePage__actions {
		margin-top: 50px;
	}

	/* #14 the three marks at the top right. main.css asks for gap:37px but a
	   global `.gk-decorSquares { gap: 8px }` earlier in this file was winning
	   the tie, so they sat in a tight cluster. The design spaces them 43-53px
	   apart at a 72px mark; scaled to the 54px mark of #10 that is ~36px. */
	.gk-decorSquares.gk-cooperatePage__headSquares {
		gap: 36px;
		/* Right-align and let the row drop below the heading rather than run
		   past the container: the heading plate is proportionally much wider
		   than the design's (796 of 1682 there vs ~792 of 952 at 1025px
		   here, because the shared title size is oversized — see #1), so at
		   narrow desktop widths there is not enough room beside it. */
		margin-left: auto;
		flex-shrink: 0;
	}

	.gk-cooperatePage__head {
		flex-wrap: wrap;
	}

	/* #14 heading „WSPÓŁPRACUJ / Z NAMI": the two-line break itself already
	   matches the design (two .gk-about__titleLine spans, „WSPÓŁPRACUJ" then
	   „Z NAMI"), and the plates are left-aligned and stepped as the design
	   has them. What does NOT match is that the design's plates overlap by
	   ~36px (plate height 133, next plate's top 97 lower) while ours merely
	   touch. Overlapping them here alone makes the glyphs collide: the
	   design's plate is 1.33em tall around a ~81px face, whereas ours is
	   1.18em around a 95px face, so there is no spare leading to overlap
	   into. Fixing it properly means correcting the shared split-title size
	   (main.css:471-477, a flat 100px) the same way #1 did for
	   .gk-projectsHome__title — deliberately left for the next round rather
	   than changing every stacked heading on the site inside this item.
	   Derived numbers for that follow-up: face ~82px, plate 1.33em,
	   pitch 0.97em, overlap 0.36em. */
}

/* ---------- #16 pink volunteer block („Współpracuj z nami") ---------- */

/* Design (wspolpracuj z nami, canvas 1920, container x119..1801):
     magenta block   x485..1681  y1413..1653  → 1196 × 240
     text inside     x539..1521  y1455..1612
     mark beside it  x240..312   y1592..1652
     bold text above x241..688   y993..1351
   The mark's left edge (240) sits on the bold paragraph's left edge (241) —
   that is the alignment the client is describing — and the block's right edge
   (1681) leaves 120px before the container ends. Ours had the mark hard
   against the container's left edge and the block running all the way to the
   right edge (0px margin), so the whole bottom row read as too wide and
   detached from the column above it.
   Row is padded to put the mark under the bold text and give the block its
   right-hand gap; with the block flexing into what is left it comes out
   ≈972px wide, which is the design's 1196 at this container's scale, so the
   copy wraps as the source does.

   The right-hand inset and the gap are HORIZONTAL quantities and are carried
   as fractions of the container, per this pass's convention — as flat px they
   ate most of the row between 1025 and 1250 (at a 952px container 100+138px
   is 25% of it, against the design's 17.4%), which is what squeezed the block
   there. Percentage padding resolves against .gk-cooperatePage__wrap (= the
   container); percentage gap resolves against the row's CONTENT box, so the
   design's 173/1682 = 10.29% of the container is written as 12.05% here.
   padding-left stays a flat 103px on purpose: it is not the design's 121/1682
   but the exact padding-left main.css:3092-3096 gives .gk-cooperatePage__bottomLeft,
   and „aligned with the bold text above" is the client's acceptance test for
   this sub-item — main.css is frozen, so tracking its fixed value is what
   keeps the mark under the bold paragraph at every width.

   981. main.css declares this row only at BASE level (main.css:3117,
   `display:flex; align-items:center; gap:96px` — no padding at all) and
   touches it again only inside `@media (max-width: 980px)` (main.css:4165,
   `flex-direction: column`), and this file has no tablet rule for the row or
   the callout. At 1025 the whole named sub-item — „right-hand margin (a
   bigger gap, aligned with the bold text above)" — was therefore absent
   across 981-1024: the mark sat flush on the container's left edge instead of
   103px in, and the pink block ran to the right edge instead of stopping
   7.134% short. The type below keeps its own 1025 boundary for a reason
   recorded there; the two are independent declarations on different elements,
   so scoping them separately is not a half-conversion. */
@media (min-width: 981px) {
	.gk-cooperatePage__footer {
		/* 103px = the bold paragraph's own left offset in the column above */
		padding-left: 103px;
		/* The block's right edge has to land on the PHOTO's right edge above it
		   — the client's „z prawej strony nie jest równo". That edge is a flat
		   120px inside the container at every desktop width, because frozen
		   main.css:3015 gives .gk-cooperatePage__layout `padding-right: 120px`
		   and .gk-cooperatePage__media is `width: min(100%,789px);
		   margin-left: auto`, so the photo's right edge IS the column's.

		   The design's own inset is the same 120px, but as a fraction of the
		   container (120/1682 = 7.134%) it only coincides with main.css's flat
		   120 when the container is exactly the design's 1682px. Everywhere
		   else the two edges walk apart, and they cross: the block stuck out
		   22.5px past the photo at 1440, 33.9px at 1280 and 57.2px at 1024,
		   while above a ~1690px viewport the photo stuck out instead (8.4px at
		   1920). A flat 120px tracks the frozen neighbour at every width, the
		   same reason padding-left below is a flat 103px rather than the
		   design's 121/1682.

		   Cost, stated not hidden: the block is 22.5px narrower at 1440 and
		   57.2px narrower at 1024, so the copy wraps a little further than it
		   did — see the wrap table under the type rule below. Levelling the
		   two right edges was the client's explicit instruction. */
		padding-right: 120px;
		/* design 173/1682 of the container, re-based on the content box */
		gap: 12.05%;
		/* The mark sits on the BOTTOM edge of the pink block in the design:
		   mark bbox [240,1592,312,1652] against block [485,1413,1681,1653],
		   i.e. the two bottom edges are one pixel apart, confirmed by an ink
		   scan of the JPG (mark rows 1592..1652, magenta rows 1414..1651).
		   main.css:3122 centres it and its comment says that is „wg designu";
		   the PSD says otherwise, and centred put it 133px below the block's
		   top with 96px left underneath at 1440 — the mark floating in the
		   middle of a 274px block. Only the mark moves: the row's height is
		   the block's height, so flex-end leaves the block where it was. */
		align-items: flex-end;
	}

	.gk-magentaBox.gk-cooperatePage__callout {
		flex: 1 1 auto;
		/* „tekst jest na dwie linie rozrzucony, na źródle napis studentem,
		   możesz jest na dole" + „większy padding po prawej".

		   The source's copy block is NOT centred in the pink rectangle: text
		   [539,1455,1521,1612] inside block [485,1413,1681,1653] gives 54px on
		   the left and 160px on the RIGHT, so the copy runs across 982 of the
		   block's 1196px — 82.1% of it. main.css:3293's `.gk-magentaBox` has a
		   symmetric 48px, i.e. 90.1% of the block at 1440 and more than that on
		   a wide screen, which is why the sentence pulled onto one line here
		   while the source breaks it after „Jeśli jesteś".

		   Carried as fractions of the row's CONTENT box, which is what a
		   percentage padding on a flex item resolves against — not the box's
		   own width. The design's row content box is 1682 - 121 - 120 = 1441
		   (mark 72 + gap 173 + block 1196), so 54/1441 = 3.747% and
		   160/1441 = 11.104%. Both the block's width and its two paddings then
		   scale off the same base, which reproduces the design's 82.1% text
		   column at every width instead of only at a 1682px container.

		   Vertical padding is left on main.css's 48px: the design has 42/41
		   there, an 11px difference the client has not raised.

		   padding-right is the client's own 12%, not the design's 11.104%: he
		   read the render and asked for that number. It is 0.9pp wider, i.e.
		   ~10px more air on the right at 1440, and it holds the two-line
		   sentence a little more firmly at the widths where the break is
		   closest to reconstituting. Do not "correct" it back to 11.104%. */
		padding-left: 3.747%;
		padding-right: 12%;
	}
}

/* „tekst na bialym tle pod zglos sie musi byc bold". The source agrees, and it
   agrees on all THREE pages that render this paragraph — measured as stroke
   width from an ink scan, because a JPG carries no font metadata. Modal run
   width across an x-height band, at the design's own scale:

     wspolpracuj z nami  „Jesli jestes doswiadczonym…"   modal 3, median 4
     wesprzyj            „Fundacja Gra w Klasy prowadzi…" modal 3, median 3
     glowna 2            same paragraph, JPG at 0.719x     modal 2, median 2
     CONTROL: the intro prose „Zapraszamy partnerow…"     modal 2 / 1 -> regular

   Calibrated against our own render at 25px by driving the weight from the
   console: 400 gives modal 2, 500 modal 3-with-2, 700 modal 3-then-4. The
   design's signature is 700's, not 500's, and clearly not 400's.

   Declared as 700, not main.css's habitual 600: there is no 600 face in this
   theme, so a 600 here would paint Bold anyway — see AGENTS.md, „Working
   against the design sources". 600 and 700 measured byte-identical here, and
   saying 700 names the face that actually paints.

   Both selectors, because the same paragraph renders through two different
   components — `.gk-cooperatePage__leadContent` on /wspolpracuj-z-nami/ and
   `.gk-support__prose` on / and /wesprzyj-nas/ — and the client's remark is
   about the text, not about one page's markup. Specificity (0,2,1) on each, to
   match `main.css:3109`'s own `.gk-prose.gk-cooperatePage__leadContent p` and
   win on enqueue order rather than by weight. Not scoped to a breakpoint: a
   type weight has no reason to differ by width, and the copy is the same.

   NOT touched: the intro prose above „Zglos sie!", which the design keeps at
   400 (the control row above), and `.gk-donationWidget` copy, which is item 17. */
.gk-prose.gk-cooperatePage__leadContent p,
.gk-prose.gk-support__prose p {
	font-weight: 700;
}

/* „zrodlo zawiera wiekszy odstep od myslnika". Measured on the JPG, all three
   bullet rows identical: the dash's ink runs x540..549 and the word's first ink
   starts at x569, so the TEXT sits 29px right of the dash's left edge and the
   clear gap between them is 20px. main.css:3322 gives `li { padding-left: 18px }`
   against an absolutely positioned `::before` at left:0, i.e. 29px of design
   becomes 18px here and the gap collapses to roughly 8px.

   A flat 29px rather than an em: the type at this breakpoint is a flat 25px (see
   the rule above) and it is the same 25px the design measures at, so the two
   agree 1:1. Scoped to 981+ with the rest of #16 — below that main.css keeps its
   24px type and its 18px, and the stacked block's bullets wrap over several
   lines where a wider hang has no design to answer to. */
@media (min-width: 981px) {
	.gk-magentaBox.gk-cooperatePage__callout li {
		padding-left: 29px;
	}
}

/* The 120px above is the photo's inset only while the layout grid still has
   free space to hand out. From 981 up to a 1069px viewport that grid is pinned
   at its own minimums — main.css:3010 is `minmax(320px,.88fr)
   minmax(420px,1fr)` with an 86px column gap, i.e. 826px of tracks — and the
   leftover width is left unallocated at the RIGHT rather than growing the photo
   column, so the photo's right edge lands on `container - 826`, not
   `container - 120`. Measured at every 1px from 981 to 1100: 82px of inset at
   981, 119px at 1018, 125px at 1024, 163px at 1062, then a flat 120px from
   1070 up. Matching that keeps the two right edges level across the whole
   981-1024 band, and 1024 is a review width.

   1064-1068 keeps a 1-5px residual, where the right track starts to flex and
   the inset stops tracking either formula (163.8 / 164.0 / 164.3 measured
   against 165 / 167 / 169). Five viewport widths, no review width among them,
   and closing it would mean hardcoding a curve — left as it is, stated here so
   the next session does not read it as a new defect. */
@media (min-width: 981px) and (max-width: 1068px) {
	.gk-cooperatePage__footer {
		padding-right: calc(100% - 826px);
	}
}

/* „font sizes inside the block". The layer is unscaled here, so this is the
   one place spec.json's font_size can be trusted, and three independent
   sources agree on 25px:
     1. spec.json (wspolpracuj z nami): the callout layer is
        'RedHatDisplay-ExtraBold' at font_size 25.0, bbox [539,1455,1521,1612];
     2. an ink scan of .context/attachments/vzhVBT/…wspolpracuj-z-nami.jpg
        gives cap height 18px and x-height 13px, and RedHatDisplay-ExtraBold
        is cap 0.700em / x-height 0.521em → 25.7 and 24.95;
     3. that layer's bbox width (982px) matches the ink extent of line 1
        (x540..1520, 981px) to within a pixel, so there is no scale transform
        on it — unlike the layers the AGENTS.md caveat is about.
   main.css:3307-3312 has 24px, i.e. one pixel under the source. A flat 25px
   is the whole correction: type size is a vertical quantity and this pass
   uses design px 1:1 for those, so it does NOT scale with the container.
   It is a flat value rather than a fluid one because the previous revision
   scaled it (clamp(18px,1.44vw,28px)) and made the block shrink from 24px at
   1024 to 18px at 1025 and 20.7px at 1440, i.e. smaller type on a wider
   screen; 25px against main.css's 24px below is still non-decreasing, so
   that invariant holds at the 1024/1025 boundary too.

   981, the same floor as the row insets above. main.css declares this
   font-size at BASE level (main.css:3307-3312, 24px) and never re-declares it
   in any media query — the ≤980 block at main.css:4361 only touches width and
   margins — and this file has no `max-width: 1024px` rule for the callout, so
   a 1025 floor left 981-1024 on main.css's 24px while the insets around it
   were already the corrected ones. That split was the worse of the two
   states, because the 25px was measured against the corrected insets.

   No wrap consequence, measured in Chrome with the real Red Hat Display
   faces: with the insets applying from 981 the callout is 632.2px at 1024
   against 633.0px at 1025, and the wrap is 3 / 2,1,1 at both 24px and 25px,
   so the boundary never affected it.

   Measured wrap against the source (source is sentence 2 lines, bullets 1):
     375 / 640  row is stacked and the copy wraps further — not in the design
     981        block 597px → narrowest desktop row, wraps furthest
     1023-1240  block 631-809px → 3 / 2,1,1; narrower than the source, which
                the container cannot reproduce at this width
     ≥1240      2 / 1,1,1 — the source wrap reconstitutes here, and 1440
                (972px block) matches the design exactly
     ≥~1870     container hits its 1800px cap, 7% wider than the design's
                1682, and the sentence pulls onto one line — the documented
                consequence of horizontal distances not mapping 1:1. */
@media (min-width: 981px) {
	.gk-magentaBox.gk-cooperatePage__callout p,
	.gk-magentaBox.gk-cooperatePage__callout ul,
	.gk-magentaBox.gk-cooperatePage__callout li {
		font-size: 25px;
	}
}

/* The first sentence and the bullet list are one continuous rhythm in the
   design — the gap from the sentence's last line to the first bullet is 34px,
   the same as the pitch between the bullets themselves. Ours added a 24px
   list margin on top of the paragraph's own 10px, roughly doubling it. */
.gk-cooperatePage__callout p {
	margin-bottom: 0;
}

/* main.css:3314 sets this at .gk-magentaBox.gk-cooperatePage__callout ul, so
   the selector has to match that specificity to win on enqueue order. */
.gk-magentaBox.gk-cooperatePage__callout ul {
	margin-top: 0;
}

/* …and the bullets themselves, which the two rules above did not reach. The
   comment above says the design is „one continuous rhythm"; it was only half
   delivered, because main.css:3320's `.gk-cooperatePage__callout li` carries
   `margin: 0 0 0.35rem` = 5.6px at this type size. Measured from painted ink
   at 1440 the block ran 32 / 32 / 38 / 38: the sentence's own two lines and
   the sentence-to-first-bullet step on the line pitch, then the bullets 6px
   looser than everything above them.

   The design's pitch is a uniform 33px, from an ink scan of
   .context/attachments/vzhVBT/…wspolpracuj-z-nami.jpg: first ink row 1455,
   last ink row top 1587, five lines → 132/4 = 33.0, and the layer's own bbox
   height agrees (1455..1612 = 4 x 33 + 25px of ink). The three bullet rows
   read 34 / 34 exactly; the sentence rows read 31 and 33 because line 1 opens
   on a capital and line 2 on a diacritic, which is the ±1px of glyph noise
   around the same 33.

   Removing the margin lands the whole block on 32 / 32.5 / 32.5 — main.css's
   own line-heights (1.28 on .gk-magentaBox, 1.3 on the ul), uniform to half a
   pixel, against the design's 33. Chasing that last pixel would mean
   re-declaring two line-heights for one shared component; uniformity is the
   property the eye reads here, and the client's sub-item is the spacing
   between the sentence and the bullets.

   981, and deliberately NOT below it: at 375 the three bullets wrap to 4/3/2
   lines and at 640 to 2/2/1, where the 5.6px is the only thing separating one
   bullet from the next, so main.css keeps it there. The design has nothing to
   say about the stacked layout — the PSD is the 1920 canvas only. This is the
   same 981 floor as the row insets and the 25px type above, i.e. the whole of
   #16 engages together; it is not a `main.css` desktop value left uncorrected
   in the 981-1024 band. */
@media (min-width: 981px) {
	.gk-magentaBox.gk-cooperatePage__callout li {
		margin-bottom: 0;
	}
}

/* ---------- #19 kontakt (page-id-12) ---------- */

/* All measurements below come from the kontakt PSD (spec.json, 1920 canvas,
   content container x119..1801 = 1682px) and from an ink-row/ink-column scan
   of .context/attachments/FKiXtE/www-gra-w-klasy-kontakt.jpg. Vertical values
   are used 1:1 — main.css sizes the container at 1682px, so the design maps
   1:1 at a 1920 viewport and vertical rhythm does not scale with width.
   Horizontal values are expressed as fractions of the container, because the
   container itself narrows below 1920.

   Design vertical rhythm on this page:
     header bottom  110 → KONTAKT plate    188   =  78   (already correct)
     KONTAKT plate  321 → 1st square       399   =  78   ← we had 148
     square         459 → „Fundacja" plate 514   =  55
     plate          633 → detail text      672   =  39
     detail text    970 → teal rule       1064   =  94   ← we had 70
     teal rule     1069 → next square     1143   =  74   ← we had 70
     people text   1562 → teal rule       1659   =  97
     teal rule     1664 → next square     1741   =  77
     people text   2121 → teal rule       2214   =  93
   So: 94 above every rule, 74-77 below it, and 78 under the page title. */

/* „kontakt T wychodzi poza szerokosc przez to nie ma pelnego marginesu po
   prawej." Correct, and the cause is a `ch` cap, not the padding.

   main.css:2158 puts `max-width: 8.8ch` on
   `.gk-titlePlate:not(.gk-contactDetails__title):not(.gk-projectsHome__title) >
   .gk-titlePlate__text`. At this plate's 95px Gabarito that resolves to
   469.955px, while „KONTAKT" needs 420px of text plus #1's two 34.105px
   paddings = 488.2px. The box is capped 18.3px short, the glyphs keep their
   advance and simply run into the right padding: measured from painted pixels
   the four gaps were L39 / R17 / T40 / B40 against #1's uniform 39.9px target —
   the right one alone was wrong, and by exactly the shortfall.

   Worth naming precisely, because 8.8ch looks like a safe cap and is not: it is
   8.8 ZERO widths (0.562em each in this face), so 7 capitals already exceed it.
   The cap only ever engages when the text is wider than the box, which is
   exactly when it eats the padding — it can never produce a wrap here either,
   since main.css gives this line `white-space: nowrap`.

   Scoped to the kontakt title rather than lifted globally: on the current
   content it is the only single-line plate the cap reaches. The home „KILKA
   SŁÓW / O NAS" heading overflows its own box by a similar 17px, but for a
   different reason — the cap is overridden for stacked plates and the plate is
   instead capped at 100% of a 603px grid column while the word needs 620px at
   95px. That one is the oversized shared split-title face already recorded
   against item 14, and closing it changes four headings the client has not
   raised. Stated, not silently bundled in here. */
.gk-section.gk-contactTitle .gk-titlePlate.gk-about__title > .gk-titlePlate__text {
	max-width: none;
}

/* „padding-top: 0 on the first box" — the client's own declaration, verbatim.
   On .gk-contactDetails it lands exactly on the design: the KONTAKT plate's
   60px margin plus the title section's 18px bottom padding already make 78,
   which is the design's gap, and the 70px section padding on top of that was
   the whole error (148 rendered). */
body.page-id-12 .gk-section.gk-contactDetails,
body.page-id-12 .gk-section.gk-people {
	padding-top: 0;
}

/* The same declaration applied to .gk-people would butt „Zarząd"/„Zespół"
   hard against the teal rule above them, which the design does not do — it
   keeps 74px (rule 1069 → square 1143) and 77px (rule 1664 → square 1741).
   The client's wording is „padding-top: 0 on the FIRST box", so the rule
   above stands as written and the people sections get the design's gap back
   as margin instead of padding. */
body.page-id-12 .gk-section.gk-people {
	margin-top: 74px;
}

/* „sizes top, bottom" — the space above each teal rule. main.css is frozen and
   the 70px comes from responsive.css itself (the contact-separator block
   further up), so this is a straight re-tune to the design's 94. */
body.page-id-12 .gk-section.gk-contactDetails > .gk-container,
body.page-id-12 .gk-section.gk-people:not(:last-of-type) > .gk-container {
	padding-bottom: 94px;
}

/* Same 94px above the closing rule, which is drawn by the separate .gk-divider
   block (design: last people line 2121 → rule 2214 = 93). */
body.page-id-12 .gk-section--tight.gk-divider {
	padding-top: 94px;
}

/* „sizes … left and right" + „alignment" — the two detail columns.
   Design: the card starts at x239 (container offset 120 = 7.13%); the left
   column's longest line runs to x622 (offset 503 = 29.90%) and the right
   column starts at x733 (offset 614 = 36.50%). The card is inset 100px, i.e.
   the same 7.13%, so inside the card the right column has to start at
   (614-120)/1562 = 31.63% and the left track ends at (503-120)/1562 = 24.52%.
   We were starting the right column at 37.97% of the container.
   981, matching the .gk-kv rules below: main.css collapses this grid to one
   column inside `@media (max-width: 980px)` (main.css:4396) and declares the
   two-column track at base level, so 981-1024 is desktop here and 1025 would
   have left it on the 37.97% start. */
@media (min-width: 981px) {
	.gk-contactDetails__grid {
		grid-template-columns: 24.52% 1fr;
		column-gap: 7.11%;
	}
}

/* „.gk-kv__label and .gk-kv__value font-size 1.2rem" — the client's value.
   Pinned at 981 rather than 1025 because main.css's mobile guard for these
   two is `@media (max-width: 980px)` (main.css:4401-4402, 1.05rem); starting
   at 1025 would have left the 981-1024 band on main.css's base 1.4rem, i.e.
   1.4rem at 1024 stepping DOWN to 1.2rem at 1025. 981 is the same boundary
   item 10 pins to, and it keeps the ladder non-decreasing as the viewport
   narrows: 1.05rem ≤980, 1.2rem ≥981. */
@media (min-width: 981px) {
	.gk-kv__label,
	.gk-kv__value {
		font-size: 1.2rem;
	}
}

/* „KRS, NIP and REGON grouped as one block with no extra spacing between them,
   the same way the address and the bank account number are grouped."

   The design builds this whole column out of two spacings and nothing else:
   one line pitch inside a group and exactly one blank line between groups.
   Ink rows of the left column in the design JPG —
     673 Adres rejestrowy:   713 ul. Mickiewicza…   (+40, one pitch)
     791 KRS:                                        (+78, one blank line)
     830 NIP:   869 REGON:                           (+39, +39, one pitch)
     946 Data rejestracji:                           (+77, one blank line)
   — and the right column is built the same way (673/713 then 790/830).

   We had a flat 10px grid row-gap between every row plus a 15px margin under
   the stacked row and 20px under REGON, so KRS/NIP/REGON read as three
   separate blocks and the two columns did not separate their groups equally.
   Rebuilt on the design's two spacings: the grid gap goes to zero, one blank
   line becomes the margin between rows, and the KRS/NIP/REGON rows (tagged
   --id by gk_contact_kv_row_is_id()) drop it so the three sit at plain line
   pitch. A blank line is font-size × line-height, and main.css steps the
   font size at 980, so the value is carried in a custom property that tracks
   the rendered size across that same boundary.

   `--gk-kv-blank` carries the desktop value UNSCOPED and a single
   `max-width: 980px` rule overrides it below the boundary. Deliberately one
   declaration per band and no `min-width: 981px` copy of the base: a viewport
   width is a fractional length, so a `max-width: 980px` / `min-width: 981px`
   pair leaves a real gap between them — 980.8px is what a 1226 device-px
   window is at 125% zoom — and there `var()` would have no value at all,
   dropping `margin-top` to its initial 0 and collapsing every group
   separation in both kv columns, which is the #19 sub-item inverted. The
   unscoped base closes that gap, which also makes a `min-width: 981px` copy
   unable to change any computed value — just a second number to drift. */
.gk-kv {
	row-gap: 0;
	--gk-kv-blank: calc(1.2rem * 1.35);
}

@media (max-width: 980px) {
	.gk-kv {
		--gk-kv-blank: calc(1.05rem * 1.35);
	}
}

.gk-kv__row + .gk-kv__row {
	margin-top: var(--gk-kv-blank);
}

.gk-kv__row--id + .gk-kv__row--id {
	margin-top: 0;
}

/* main.css adds 15px under the stacked row on top of the old grid gap; the
   blank line above now carries that spacing on its own. (main.css:2338 does
   the same under REGON via .gk-kv__row--regon-gap — that class is no longer
   emitted at all, so the rule has nothing to match and no override is
   needed here.) */
.gk-kv__row--stacked {
	margin-bottom: 0;
	row-gap: 0;
}

/* The „Fundacja / GRA W KLASY" plate's own breathing room. main.css puts a
   flat 30px above and below .gk-titlePlate__text here, which leaves 46px
   between the square and the plate and 27px between the plate and the detail
   columns; the design has 55 (square 459 → plate 514) and 39 (plate 633 →
   text 672). */
.gk-section.gk-contactDetails .gk-contactDetails__title .gk-titlePlate__text {
	margin-top: 39px;
	margin-bottom: 42px;
}

/* ============================================================================
   CLIENT REVIEW ROUND 2 — desktop close-out
   ============================================================================ */

/* ---------- #2b „photo gallery" — square corners ---------- */

/* „rogi maja byc proste, 90 stopni" — the project pane's gallery frame carried
   `border-radius: 14px` (main.css:3522) with `overflow: hidden`, so the photo
   was clipped to a rounded rectangle. Nothing else on the site rounds a photo:
   every other image box in the design is a hard rectangle, and the round-1
   plate work is built on that same square geometry.

   `.gk-carousel` is rendered from ONE place —
   template-parts/components/gallery-carousel.php, included only by
   project-section.php — so this reaches exactly the gallery the item names and
   no other component. The arrows keep their own 6px: they are controls painted
   ON the photo, not the photo's corners, and the client asked about the
   gallery. */
.gk-carousel__viewport {
	border-radius: 0;
}

/* ---------- #2a project pane — the photo starts level with the text ---------- */

/* „w zakladkach projektow zdjecie ma byc wyrownane z tekstem do gory".

   Both columns already open at the same y — round 1 put the decor mark flush
   with the logo (#12, above) and that stays. What did not line up is the
   SECOND row: the left column runs logo -> prose, the right column mark ->
   gallery, and the two second-row items started at different heights because
   each column measured its own first row.

   Measured before, MOZAIKA at 1920: logo top 276.6 (ink 101 tall), prose top
   403.6; mark top 276.6 (45 tall), gallery top 347.6. The gallery sat 56px
   ABOVE the prose. The offset is not one number either — the five pane logos
   are 101 / 87 / 81 / 55 / 43 tall (the index ratios #12 pinned), so a literal
   nudge would fix one pane and miss four.

   `subgrid` is the fix that carries no number: `.gk-projectSection__top` is
   already `display: grid; grid-template-columns: 1fr 1fr` (main.css:3452), so
   naming two rows on it and letting both columns adopt them makes row 1
   `max(logo, mark)` and row 2 start at the same y on both sides, whatever the
   logo measures. `.gk-projectSection__rightProse` is `display: none` (#12), so
   it is not a grid item and the right column really does have two children.

   `row-gap: 0` because the 36px in main.css's `gap` was only ever a COLUMN
   gap here — the columns did not share rows before, so no row gap was being
   painted. The 26px above the prose and above the gallery are their own
   margins (responsive.css `.gk-projectSection__leftProse` and main.css:3520
   `.gk-carousel`), they are equal, and they survive.

   Desktop only: below 1025 responsive.css:548 collapses the grid to one
   column, where there is no second column to align to.

   `margin-bottom: 0` on the mark is the SAME CONSEQUENCE the left column's
   `.gk-projectSection__logo img` guard above (~2725) documents, on the other
   side of the grid. main.css:3480 gives .gk-projectSection__topSquares a
   `margin-bottom: 16px` which used to collapse straight out of the aside and
   merge with the carousel's own 26px `margin-top` (main.css:3520), so it was
   inert. Making `.gk-projectSection__right` a grid container turns the mark
   into a grid item with its own formatting context, a margin cannot collapse
   out of that, and the 16px starts sizing row 1: it becomes
   max(logo, 45 + 16) = max(logo, 61), so on the two panes whose logo block is
   shorter than 61 the row was sized by the MARK rather than the logo and
   round-1 #12's tuned 26px logo-to-prose gap drifted.

   Measured at 1920, as row 1 / square-to-slider / logo-to-prose:

                  round-1 tip        16px stacking      after this rule
     mozaika      101 / 26 / 26      101 / 82 / 26      101 / 82 / 26
     akademia     103.7 / 26 / -3.8   61 / 42 / 13.8     45 / 26 / -2.2
     szkola       55.5 / 26 / 26      61 / 42 / 31.5    55.5 / 36.5 / 26
     kino         80.8 / 26 / 26     80.8 / 61.8 / 26   80.8 / 61.8 / 26
     konferencja  86.9 / 26 / 26     86.9 / 67.9 / 26   86.9 / 67.9 / 26

   (Round 1 has no „row 1": the columns did not share rows before #2a, so the
   figure in that column is the logo block's own height.)

   LOGO-TO-PROSE IS WHAT THIS RULE FIXES, and it lands back on
   round-1's own numbers: 26 on four panes, and akademia on its own crop
   residual rather than a spacing value — that crop carries a negative margin
   which already pulls the following content up to the ink bottom (see the #12
   block above), it reads -3.8 on the round-1 tip for the same reason, and it
   is a round-1 decision left alone rather than re-tuned to chase 26. That
   same crop is why akademia's row 1 lands on 45 rather than on its ink: the
   negative margin makes its logo BLOCK shorter than the square, so the mark's
   own height sizes the row there. 45 is the square itself, not the 16px this
   rule removes, and the row is logo-sized on the other four.

   THE SQUARE-TO-SLIDER GAP IS NOT THIS MARGIN, and the 16px is not what to
   reach for if it needs moving. It reads 82 / 61.8 / 67.9 on the three panes
   whose logo already sized row 1, where the 16px never bound anything and
   removing it changes the number by exactly 0. The gap is
   `row 1 - 45 + 26`, i.e. it is set by the LOGO height, because #2a is what
   requires it: the mark keeps the top of the right column (round-1 #12, „kwadrat
   w prawym gornym rogu", the block above) while the carousel has to start at
   row 2 so its image opens level with the prose. A 45px square at the top of a
   101px row and a slider at that row's bottom cannot also be 26px apart. On a
   logo-less projekt, where row 1 is the mark's own 45, it is 26 on the nose.

   So round-1's uniform 26 held only because the two columns did not share
   rows, and #12's „logo-to-text gap same as square-to-slider" held only while
   every pane logo was capped at the square's own 45px — the instruction #12
   records as SUPERSEDED when the client asked each pane logo to match its
   index twin (101/87/81/55/43) instead. Those two asks cannot both hold, #12
   says so, and the later one won. Recovering 26 here would mean dropping the
   mark to the bottom of row 1, off the logo line he put it on, or giving up
   #2a's alignment — so it is left as the geometry of his own two choices
   rather than traded against either. */
@media (min-width: 1025px) {
	.gk-projectSection__top {
		grid-template-rows: auto auto;
		row-gap: 0;
	}

	.gk-projectSection__left,
	.gk-projectSection__right {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
	}

	.gk-projectSection__topSquares {
		margin-bottom: 0;
	}
}

/* ---------- #2c / #4b / #6 stacked title plates — the „AKTUALNA OFERTA" pitch
              on „NASZE PROJEKTY", „WESPRZYJ NAS" and „NASZE WARTOŚCI" -------- */

/* Three items, one defect. The client named the reference himself — „ma byc
   tak jak AKTUALNA OFERTA" — so this is not three line-height guesses, it is
   the treatment that heading already carries, applied to the three that never
   got it.

   WHAT ACTUALLY DIFFERS. Every one of these plates declares `line-height: 1`
   on the line span (the #1b block above), so `line-height` is NOT where they
   part company. The pitch does. A stacked plate pair is governed by two things
   and „AKTUALNA OFERTA" has both, these three had neither:

     1. `--gk-plate-gap: 0.333em` instead of the :root 0.42em, and
     2. `margin-top: calc(-1 * var(--gk-plate-gap))` on the second line.

   Measured before, at 1920:
     AKTUALNA OFERTA   100px face   plate 135.5   pitch 102.2   (1.022em)
     NASZE PROJEKTY     95px face   plate 147.6   pitch 147.6   (1.554em)
     NASZE WARTOŚCI     95px face   plate 147.6   pitch 147.6   (1.554em)
     WESPRZYJ NAS       95px face   plate 147.6   pitch 147.6   (1.554em)
   The three sat a full plate height apart because they only TOUCHED — exactly
   the state #4 above describes „AKTUALNA OFERTA" being rescued from on the
   round-1 walkthrough („przestrzen miedzy aktualna a oferta jest za duza,
   nasze projekty rozwiazaly to lepiej"). The „nasze projekty" he praised then
   was the HOME block, `.gk-projectsHome__title`, which had the treatment; the
   /nasze-projekty/ PAGE heading is a different component and did not.

   THE PSD AGREES, and it gives the same geometry for all three — plate ~133,
   pitch 97, overlap 36-37, i.e. the design's own uniform gap is 0.333em:
     NASZE PROJEKTY  Rect 7 copy 4  y563..696  / copy 5  y660..793   pitch 97
     WESPRZYJ NAS    Rect 7 copy 10 y202..336  / copy 11 y299..433   pitch 97
     NASZE WARTOŚCI  Rect 7 copy 2  y834..968  / copy 3  y931..1064  pitch 97
   Vertical distances map 1:1 (CONTEXT.md), so at our 95px face the design
   pitch is 95px. This lands at 99.5px (plate 131.1, overlap 31.6) — the ~0.05em
   the clamped overlap gives up, which #4 above explains and which must not be
   „recovered" by substituting a literal back in.

   The painted word gap ends up identical to the reference's, which is the real
   test of „same treatment": gap + 0.019em on both, because each face keeps its
   own measured `--gk-plate-x-*` and only the gap is shared.

   SCOPE. The three headings the client named — every instance of them, and
   nothing else. Enumerated by querying the selector on all nine pages plus a
   projekt and a wydarzenie single, which returns exactly six elements:
     .gk-projectsHero__title   /nasze-projekty/       „NASZE PROJEKTY"
     .gk-projectsHero__title   /projekty/<slug>/ x2   „NASZE PROJEKTY"
     .gk-support__title        /wesprzyj-nas/         „WESPRZYJ NAS"
     .gk-support__title        /                      „WESPRZYJ NAS"
     .gk-aboutIntro__right     /o-nas/                „NASZE WARTOŚCI"
   The home „WESPRZYJ NAS" and the projekt singles' „NASZE PROJEKTY" are the
   SAME heading rendered again, not extra scope: leaving them on the old pitch
   would ship one component with two behaviours, which is the mistake round 1
   had to undo twice (#3's home-vs-oferta card and #12's five panes). Round 1
   also has the captain's own precedent for it — he named both places
   „WSPÓŁPRACUJ Z NAMI" appears when he asked for that heading's overlap.

   Deliberately NOT included, each for a stated reason:
     - `.gk-aboutActions` „NASZE DZIAŁANIA" is the SAME defect on the same page
       (PSD Rect 7 copy 17/18, pitch 97 like the rest) and is left alone only
       because the client did not name it. It is the first thing to widen this
       selector to if he asks.
     - `.gk-cooperatePage__head` / `.gk-cooperate__title` („WSPÓŁPRACUJ Z NAMI")
       already carry their own -0.379em from round 1 #14, tuned to the PSD's
       36px literal, and the client has not re-opened them.
     - `.gk-projectsHomeSlider__tag` is a slide caption on 0.246em, not a page
       title.
   Setting the custom property rather than restating padding is what keeps this
   to two declarations: #1b's padding rule already reads `var(--gk-plate-gap)`,
   and these selectors are more specific than it, so the new value flows into
   the `!important` padding it declares without repeating any of it.

   THE SPLIT BETWEEN THE TWO DECLARATIONS IS THE REFERENCE'S OWN, and copying
   it is what makes „same treatment as AKTUALNA OFERTA" true at EVERY
   breakpoint rather than only on desktop. „AKTUALNA OFERTA" declares its
   `--gk-plate-gap: 0.333em` unscoped (responsive.css `.gk-eventsPage__title`
   above) but keeps its `margin-top: calc(-1 * var(--gk-plate-gap))` inside
   `@media (min-width: 1025px)`, so below 1025px its two plates merely TOUCH.
   The gap rule therefore stays unscoped here and only the overlap is pinned to
   desktop, and below 1025px these three plates touch exactly as the reference
   does. Measured with both rules unscoped, i.e. what this scoping corrects:
     375px    reference 0px overlap (margin-top 0)   these three 13.3px
     1024px   reference 0px overlap (margin-top 0)   these three 31.6px
     1025px   reference 33.3px                       these three 31.6px
   Only the ≤1024px rows moved; 1025px and up is unchanged, which is where the
   client's desktop close-out lives. */
.gk-projectsHero__title .gk-titlePlate.gk-about__title.gk-titlePlate--stack .gk-about__titleLine,
.gk-support__title .gk-titlePlate.gk-about__title.gk-titlePlate--stack .gk-about__titleLine,
.gk-aboutIntro__right .gk-titlePlate.gk-about__title.gk-titlePlate--stack .gk-about__titleLine {
	--gk-plate-gap: 0.333em;
}

@media (min-width: 1025px) {
	.gk-projectsHero__title .gk-titlePlate--stack .gk-about__titleLine + .gk-about__titleLine,
	.gk-support__title .gk-titlePlate--stack .gk-about__titleLine + .gk-about__titleLine,
	.gk-aboutIntro__right .gk-titlePlate--stack .gk-about__titleLine + .gk-about__titleLine {
		margin-top: calc(-1 * var(--gk-plate-gap));
	}
}

/* ---------- #3a / #4a the decor mark on the header logo's vertical ---------- */

/* „kwadracik na wysokosci rozowego panelu ma byc w tej samej pionowej linii co
   logo w lewym rogu" (/wspolpracuj-z-nami/) and „kwadracik na gorze ma byc w
   pionie pod logo — na innych podstronach jest dobrze" (/wesprzyj-nas/).

   THE PATTERN HE MEANS ALREADY EXISTS, and he says so. The header logo opens
   at the container's left edge (measured 60 at 1920, container 60..1860), and
   these marks already sit exactly there:
     .gk-projectsHero__introSquares   /nasze-projekty/   60
     .gk-contactDetails__head         /kontakt/          60
     .gk-people__head                 /kontakt/          60
     .gk-actionsItem__squares         /o-nas/            60
     .gk-about__decorBottom           /                  60
   The two he flagged did not, and in both cases for the same reason — an
   indent belonging to the COLUMN was being inherited by the mark:
     /wesprzyj-nas/        160 = 60 + `.gk-support__left` margin-left:100px
                                 (main.css:2422)
     /wspolpracuj-z-nami/  163 = 60 + `.gk-cooperatePage__footer`
                                 padding-left:103px (responsive.css #14, above)

   So neither fix invents a position: each cancels the indent for the mark
   alone and leaves the text that indent was meant for exactly where it is.
   That is also why the numbers are literals and not container fractions —
   AGENTS.md's fraction rule is for carrying a horizontal offset OVER from the
   1682 design canvas, and there is no design offset here. The target is the
   container's own left edge, and -100 / -103 are the two parents' own values,
   quoted back at them.

   RECORDED AS A CLIENT OVERRIDE OF THE PSD, the same way round 1 recorded the
   head mark's. The design does NOT put either mark on the logo's line — it
   insets both about 120px into the container:
     wesprzyj      Vector Smart Object copy 18  x241 (container opens at 120)
     wspolpracuj   Vector Smart Object copy 21  x240
   while the header logo is at x121 and /nasze-projekty/'s marks at x121. He
   has looked at the render and asked for the logo line on every subpage, and
   named the subpages that already do it as the reference. Applied as asked and
   flagged here rather than silently followed. Do not „restore" 240 from
   spec.json.

   NOT the home page's twin of either mark. `.gk-support__square` also renders
   inside `.gk-cooperate__left` on / (measured 160 there too) and
   `.gk-cooperate__squares` is the home cooperate mark; the client named two
   subpages, so the selector is pinned to the subpage context via
   `.gk-support__grid >`. Widen it if he asks for the home block as well. */

/* Desktop only: at 1024 and below responsive.css:390 and main.css:4190 both
   zero `.gk-support__left`'s margin-left, so there is no indent left to
   cancel and a -100px here would drag the mark off the canvas. */
@media (min-width: 1025px) {
	.gk-support__grid > .gk-support__left > .gk-decorSquares.gk-support__square {
		margin-left: -100px;
	}
}

/* Pinned at 981 to match the rule it cancels: the footer's 103px indent is
   itself `@media (min-width: 981px)` (#14 above), and below that main.css:4165
   turns the footer into a column where the mark already opens at the container
   edge.

   The +103 right margin is not decoration — it hands back exactly the outer
   width the negative left margin took, so the pink callout beside the mark
   does not move. Verified: callout left 407 before and after. Margins rather
   than `position: relative` so the mark stays in flow and can never paint over
   the callout if the footer narrows. */
@media (min-width: 981px) {
	.gk-decorSquares.gk-cooperatePage__bottomSquares {
		margin-left: -103px;
		margin-right: 103px;
	}
}

/* #5b follow-up — the office pair in the kontakt right column is dialable and
   clickable, matching the „Zarząd Fundacji" block (people.php), which has
   rendered `tel:`/`mailto:` since it was built. Captain: „biuro i numer
   telefonu ... pogrubione ... a email z mailto".

   ONLY THE VALUE IS BOLDED HERE. The „Biuro:" label already renders Bold and
   always did: main.css:2305 declares `.gk-kv__label{font-weight:600}` and this
   theme loads Red Hat Display at 400/500/700/800/900 only, so 600 resolves up
   to Bold — the same weight as `.gk-person__name`'s explicit 700. Do not
   "fix" that 600 to chase this item: it is a no-op by measurement, main.css is
   frozen, and the AGENTS.md entry on the missing 600 face documents why.

   The link keeps the row's own colour rather than taking a UA blue: the design
   has no grey and no link colour, so `inherit` is the only value that does not
   introduce one. Underline on hover only, exactly like
   `.gk-person__meta a` (main.css:2389-2390). */
.gk-kv__row--phone .gk-kv__value {
	font-weight: 700;
}

.gk-kv__value a {
	color: inherit;
	text-decoration: none;
}

.gk-kv__value a:hover,
.gk-kv__value a:focus-visible {
	text-decoration: underline;
}