section.bloc{ padding-block: clamp(48px, 6vw, 120px); }
section.bloc + section.bloc{ border-top: 1px solid var(--rule); }
/* A photo band or a colour change already divides the sections. */
#grafik, #cennik, #dojo{ border-top: 0; }
.bloc--flush-top{ padding-top: 0; }
.bloc-body{ display: grid; gap: clamp(32px, 7vw, 88px); }

.sec-head{
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  margin-bottom: clamp(28px, 6vw, 72px);
}
.eyebrow{
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-200);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow::after{
  content: ""; flex: 0 0 52px; height: 1px;
  background: var(--vermilion);
}
.eyebrow--bright{ color: var(--ink-soft); }

.sec-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-l);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}
.sec-title--statement{
  font-size: var(--fs-display-xl);
  line-height: 1.02;
  max-width: 26ch;
}
.sec-lead{
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  max-width: 52ch;
  text-wrap: pretty;
}

.split{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.photo-band{
  position: relative;
  width: 100%;
  aspect-ratio: 2.25 / 1;
  /* The band spans the window, so the ratio alone would give 1067px at 2560px
     wide. The ceiling caps that; object-fit: cover just tightens the crop. */
  min-height: 240px;
  max-height: min(68vh, 660px);
  overflow: hidden;
  background: var(--paper-deep);
}
/* Crop from the top: at 50% the visible strip is ceiling and wall, and the
   people fall below the frame. 20% lands on them with room above the heads. */
.photo-band img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
/* Fades on both edges so the photo emerges from the background instead of
   starting on a hard line (measured: 33 → 143 brightness in one pixel). */
.photo-band-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    var(--paper) 0%,
    rgb(var(--paper-rgb) / .55) 8%,
    rgb(var(--paper-rgb) / .06) 32%,
    rgb(var(--paper-rgb) / .9) 88%,
    var(--paper) 100%);
}

.photo-band--head{
  display: flex; align-items: flex-end;
  min-height: 360px;
  max-height: min(74vh, 720px);
  padding-bottom: clamp(24px, 4vw, 52px);
}
/* Stronger scrim so the heading keeps its contrast. */
.photo-band--head .photo-band-scrim{
  background: linear-gradient(to bottom,
    var(--paper) 0%,
    rgb(var(--paper-rgb) / .6) 8%,
    rgb(var(--paper-rgb) / .14) 34%,
    rgb(var(--paper-rgb) / .88) 82%,
    var(--paper) 100%);
}
.photo-band-caption{
  position: relative;
  width: 100%;
  display: grid; gap: clamp(12px, 1.6vw, 18px);
}

@media (min-width: 760px){
  .split{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .split--portrait{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}