/* Section 06 — the studio / a quiet editorial founders' spread */

.section-06-studio {
  --studio-rule: 0.5px;
  --studio-line: color-mix(in srgb, var(--color-line) 42%, transparent);
  position: relative;
  z-index: 1;
  padding: clamp(var(--space-xl), 12vw, var(--space-2xl)) var(--hero-gutter) clamp(var(--space-xl), 12vw, var(--space-2xl));
  background: var(--color-bg);
  color: var(--color-text);
  isolation: isolate;
}

/* A neutral paper fascia protects the fixed navigation as portraits pass below it.
   The colour is pinned to the fixed ink token (not the flip-driven --color-text) so
   the logo/menu stay dark on this always-light section even if the theme flip is
   mid-transition — they can never wash out against the portraits. */
#site-header.studio-header-surface,
#site-header.studio-header-surface a,
#site-header.studio-header-surface #header-logo,
#site-header.studio-header-surface #mobile-menu-toggle {
  color: var(--tt-ink);
}

#site-header.studio-header-surface::before {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(4.75rem, 5.6vw, 5.25rem);
  border-bottom: var(--studio-rule) solid color-mix(in srgb, var(--color-line) 12%, transparent);
  background: var(--color-bg);
  content: "";
  /* Section 02 owns the bare #site-header::before and leaves it opacity:0; this
     matte reuses the same pseudo-element, so it must re-assert its own opacity or
     it renders invisible and the nav/logo collide with the studio content. */
  opacity: 1;
  pointer-events: none;
}

/* Section 06 is intentionally neutral: no stale Cennik dash may survive the boundary. */
html.is-studio-current #header-line {
  opacity: 0 !important;
  visibility: hidden;
}

.studio-shell {
  width: 100%;
  margin-inline: auto;
}

.studio-index {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin: 0 0 clamp(var(--space-lg), 5.5vw, var(--space-xl));
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: max(0.6875rem, calc(11 * var(--fluid)));
  font-weight: 540;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.studio-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hero-grid-gap);
  align-items: start;
}

.studio-copy {
  min-width: 0;
  grid-column: 1 / 7;
}

.studio-heading {
  max-width: 38rem;
}

.studio-title {
  max-width: 12.5ch;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-variation-settings: "wght" 430;
  font-weight: 430;
  letter-spacing: -0.048em;
  line-height: 1.02;
  text-wrap: balance;
}

.studio-lede {
  max-width: 46ch;
  margin: var(--space-md) 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-text);
  font-size: var(--font-size-body);
  font-weight: 430;
  letter-spacing: -0.014em;
  line-height: 1.52;
}

.studio-principles {
  margin: clamp(var(--space-xl), 8vw, var(--space-2xl)) 0 0;
  padding: 0;
  border-bottom: var(--studio-rule) solid var(--studio-line);
  list-style: none;
}

/* Kuba's plate is pulled back over the copy column (`left: -8%`), so the rules
   retreat by the same 8% to stop short of it instead of running under the photo.
   Only on desktop — below 1080px the plates stack in flow and nothing overlaps. */
@media (min-width: 1081px) {
  .studio-principles {
    margin-right: 8%;
  }
}

.studio-principle {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--hero-grid-gap);
  align-items: start;
  padding: clamp(var(--space-md), 2.5vw, var(--space-lg)) 0;
  border-top: var(--studio-rule) solid var(--studio-line);
  isolation: isolate;
  transition: padding-inline 0.45s cubic-bezier(0.625, 0.05, 0, 1);
}

.studio-principle > :not(.studio-principle__tile) {
  position: relative;
  z-index: 1;
}

.studio-principle__tile {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: color-mix(in srgb, var(--tt-ink) 4.5%, transparent);
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .studio-principle:hover {
    padding-inline: var(--space-sm);
  }

  .studio-principle:hover .studio-principle__meta > span:first-child {
    color: var(--color-accent);
  }
}

html.is-reduced-motion .studio-principle__tile {
  display: none;
}

html.is-reduced-motion .studio-principle:hover {
  background: color-mix(in srgb, var(--tt-ink) 4%, transparent);
}

.studio-principle__meta {
  display: flex;
  grid-column: 1 / 3;
  gap: var(--space-xs);
  align-items: baseline;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: max(0.625rem, calc(10 * var(--fluid)));
  font-weight: 560;
  letter-spacing: 0.09em;
  line-height: 1.45;
  text-transform: uppercase;
}

.studio-principle__meta strong {
  font: inherit;
}

.studio-principle__meta > span:first-child {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out);
}

.studio-principle__description {
  max-width: 38ch;
  grid-column: 3 / 7;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: clamp(0.9375rem, calc(16 * var(--fluid)), 1.0625rem);
  font-weight: 430;
  letter-spacing: -0.012em;
  line-height: 1.5;
}

.studio-portraits {
  position: relative;
  min-width: 0;
  /* Both plates are now the same 4:5 cut-out at the same scale, so the column
     only has to hold: offset + plate + caption. Sized from the widest plate
     (58% of the column) rather than the old mismatched-crop guess. */
  min-height: clamp(46rem, 66vw, 58rem);
  grid-column: 7 / 13;
}

/* Editorial folio marker: anchored to Kuba's cutout edge instead of floating remotely. */
.studio-team-coordinate {
  position: absolute;
  z-index: 4;
  top: 0;
  left: -8%;
  display: flex;
  width: 64%;
  gap: var(--space-xs);
  align-items: center;
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: max(0.625rem, calc(10 * var(--fluid)));
  font-weight: 560;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-team-coordinate::before {
  width: var(--space-lg);
  height: var(--studio-rule);
  flex: 0 0 auto;
  background: var(--studio-line);
  content: "";
}

.studio-team-coordinate span:first-of-type {
  color: var(--color-text);
}

.studio-portrait {
  position: absolute;
  margin: 0;
}

/* Equal plates, unequal heights: the pair reads as one spread because the two
   cut-outs share a crop, a scale and a ground — only the vertical offset (and
   the parallax drift) tells them apart. */
.studio-portrait--kuba {
  z-index: 1;
  top: var(--space-lg);
  left: -8%;
  width: 58%;
}

.studio-portrait--franciszek {
  z-index: 2;
  top: clamp(19rem, 27vw, 23rem);
  right: 0;
  width: 58%;
}

/* A quiet paper matte turns each cutout into a deliberate editorial plate;
   the folio mark ties the pair back to the "02 OSOBY / 01 ZESPÓŁ" coordinate.
   Both subjects are transparent PNGs, so the plate IS their background: a soft
   spot behind the head lifts the shoulders off the paper (Franciszek's white
   shirt would otherwise dissolve into it) and the ratio is pinned so the two
   frames stay identical even while an image is still loading. */
.studio-portrait__frame {
  position: relative;
  overflow: clip;
  aspect-ratio: 1856 / 2304;
  border: var(--studio-rule) solid var(--studio-line);
  background:
    radial-gradient(
      68% 46% at 50% 26%,
      color-mix(in srgb, var(--tt-ink) 1.5%, transparent) 0%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--tt-ink) 4%, transparent) 0%,
      color-mix(in srgb, var(--tt-ink) 11%, transparent) 100%
    );
}

.studio-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  filter: saturate(0.92) contrast(0.99);
  transform-origin: 50% 100%;
  transition:
    transform 1.1s var(--ease-expo),
    filter 0.6s var(--ease-out);
  will-change: transform;
}

/* The two cut-outs were shot at slightly different head-to-frame ratios; this
   trims Franciszek's to Kuba's so the pair reads as one sitting. `scale` (not
   `transform`) so it composes with the hover scale instead of fighting it. */
.studio-portrait--franciszek img {
  scale: 0.93;
}

.studio-portrait__folio {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: max(0.5625rem, calc(9 * var(--fluid)));
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  letter-spacing: 0.09em;
  transition: color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .studio-portrait:hover img {
    filter: saturate(1.04) contrast(1);
    transform: scale(1.025);
  }

  .studio-portrait:hover .studio-portrait__folio {
    color: var(--color-accent);
  }
}

.studio-portrait figcaption {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: var(--studio-rule) solid var(--studio-line);
}

/* Kuba's caption stops short of the overlapping second plate. */
.studio-portrait--kuba figcaption {
  padding-right: 10%;
}

.studio-portrait__id {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
}

.studio-portrait__id strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, calc(24 * var(--fluid)), 1.625rem);
  font-variation-settings: "wght" 430;
  font-weight: 430;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.studio-portrait__id span {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: max(0.625rem, calc(10 * var(--fluid)));
  font-weight: 560;
  letter-spacing: 0.09em;
  text-align: right;
  text-transform: uppercase;
}

.studio-portrait__focus {
  margin: var(--space-2xs) 0 0;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: max(0.625rem, calc(10 * var(--fluid)));
  font-weight: 560;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.studio-portrait__bio {
  max-width: 34ch;
  margin: var(--space-xs) 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-text);
  font-size: clamp(0.875rem, calc(15 * var(--fluid)), 1rem);
  font-weight: 430;
  letter-spacing: -0.012em;
  line-height: 1.5;
}

.studio-handoff {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: clamp(var(--space-xl), 10vw, var(--space-2xl));
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: max(0.625rem, calc(10 * var(--fluid)));
  font-weight: 560;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.studio-handoff::before {
  width: clamp(var(--space-lg), 8vw, var(--space-xl));
  height: var(--studio-rule);
  background: var(--studio-line);
  content: "";
}

@media (max-width: 1080px) and (min-width: 768px) {
  .studio-copy {
    grid-column: 1 / 8;
  }

  /* The narrow tablet column has no room for the layered overlap:
     the plates stack in flow, alternating edges. */
  .studio-portraits {
    min-height: 0;
    grid-column: 8 / 13;
  }

  .studio-team-coordinate {
    position: relative;
    left: 0;
    width: 100%;
    margin-bottom: var(--space-md);
  }

  .studio-portrait {
    position: relative;
  }

  .studio-portrait--kuba {
    top: auto;
    left: 0;
    width: 88%;
  }

  .studio-portrait--franciszek {
    top: auto;
    right: auto;
    width: 88%;
    margin-top: var(--space-lg);
    margin-left: auto;
  }

  .studio-portrait--kuba figcaption {
    padding-right: 0;
  }

  .studio-principle__meta,
  .studio-principle__description {
    grid-column: 1 / 7;
  }

  .studio-principle__description {
    margin-top: var(--space-sm);
  }
}

@media (max-width: 767.98px) {
  .section-06-studio {
    scroll-margin-top: 4.75rem;
    padding-top: clamp(var(--space-xl), 24vw, var(--space-2xl));
    padding-bottom: clamp(var(--space-xl), 24vw, var(--space-2xl));
  }

  #site-header.studio-header-surface::before {
    height: 4.75rem;
  }

  .studio-index {
    margin-bottom: var(--space-lg);
    font-size: 0.6875rem;
  }

  /* The mandated mobile narrative is explicit: proposition first, people second. */
  .studio-layout {
    display: flex;
    flex-direction: column;
  }

  .studio-copy {
    display: block;
    width: 100%;
    order: 1;
  }

  .studio-heading {
    max-width: none;
  }

  .studio-title {
    max-width: 10.5ch;
    font-size: clamp(2.35rem, 11vw, 3rem);
    line-height: 0.98;
  }

  .studio-lede {
    max-width: 34ch;
    margin-top: var(--space-md);
    font-size: clamp(0.9375rem, 4.1vw, 1.0625rem);
    line-height: 1.48;
  }

  .studio-principles {
    margin-top: var(--space-xl);
  }

  .studio-principle {
    display: block;
    padding: var(--space-md) 0;
  }

  .studio-principle__meta {
    font-size: 0.625rem;
  }

  .studio-principle__description {
    max-width: 34ch;
    margin-top: var(--space-sm);
    font-size: clamp(0.9375rem, 4vw, 1rem);
  }

  .studio-portraits {
    min-height: 0;
    order: 2;
    margin-top: clamp(var(--space-xl), 24vw, var(--space-2xl));
  }

  .studio-team-coordinate {
    position: relative;
    top: auto;
    left: -3%;
    width: 79%;
    justify-content: flex-start;
    margin-bottom: var(--space-lg);
    font-size: 0.625rem;
  }

  .studio-team-coordinate::before {
    width: var(--space-md);
  }

  .studio-portrait {
    position: relative;
  }

  .studio-portrait--kuba {
    top: auto;
    left: 0;
    width: 82%;
  }

  .studio-portrait--franciszek {
    top: auto;
    right: auto;
    width: 82%;
    margin-top: var(--space-lg);
    margin-left: auto;
  }

  .studio-portrait__id strong {
    font-size: 1.35rem;
  }

  .studio-portrait__id span,
  .studio-portrait__focus {
    font-size: 0.5625rem;
    letter-spacing: 0.07em;
  }

  .studio-portrait__folio {
    font-size: 0.5625rem;
  }

  .studio-portrait__bio {
    font-size: 0.875rem;
  }

  /* Mobile motion: the GSAP reveal engine is hard-disabled below (legibility
     guarantee on [data-scroll-reveal] elements), so movement is delegated to
     CSS transitions on CHILDREN, armed by the .studio-io class from JS and
     released per element via IntersectionObserver. No JS → no hidden state. */
  .studio-io .studio-portrait__frame,
  .studio-io .studio-portrait figcaption,
  .studio-io .studio-principle__meta,
  .studio-io .studio-principle__description {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.6s var(--ease-out),
      transform 0.85s var(--ease-expo);
  }

  .studio-io .studio-portrait figcaption,
  .studio-io .studio-principle__description {
    transition-delay: 0.12s;
  }

  .studio-io .studio-portrait.is-inview .studio-portrait__frame,
  .studio-io .studio-portrait.is-inview figcaption,
  .studio-io .studio-principle.is-inview .studio-principle__meta,
  .studio-io .studio-principle.is-inview .studio-principle__description {
    opacity: 1;
    transform: none;
  }

  .studio-handoff {
    margin-top: var(--space-xl);
    font-size: 0.625rem;
  }

  /* Deep-link and automated resolved states can pass a reveal trigger before fonts settle.
     Mobile copy therefore remains statically legible while desktop keeps the full choreography. */
  .section-06-studio [data-scroll-text-reveal],
  .section-06-studio [data-scroll-reveal] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .section-06-studio [data-scroll-text-reveal] .str-word,
  .section-06-studio [data-scroll-text-reveal] .str-char,
  .section-06-studio [data-scroll-text-reveal] .str-line {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 360px) {
  .studio-team-coordinate {
    width: 84%;
  }

  .studio-portrait--kuba {
    width: 88%;
  }

  .studio-portrait--franciszek {
    width: 88%;
  }

  .studio-portrait__id {
    display: block;
  }

  .studio-portrait__id span {
    display: block;
    margin-top: var(--space-2xs);
    text-align: left;
  }
}

@media print {
  .studio-portraits {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  .studio-team-coordinate {
    display: none;
  }

  .studio-portrait {
    position: relative;
    inset: auto;
    width: auto;
  }
}