.intro{
display:flex;
height:100vh;
width:100%;
position:relative;
}

.intro img{
height:100vh;
width:100%;
object-fit:cover;
object-position:center;
display:block;
}

body{
margin:0;
}

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #FFFFFF;
      --bg2: #ebebeb;
      --ink: #0A0A0A;
      --dim: #888888;
      --dim2: #d1d1d1;
      --type-hero: clamp(72px, 9vw, 120px);
      --type-h2: clamp(32px, 4vw, 52px);
      --type-body: 12px;
      --type-label: 12px;
      --type-small: 11px;
      --type-xsmall: 10px;
      --type-medium: 15px;
    }
    .site-nav {
      position: fixed;
      top: 5vh;
      left: calc((100vw / 24) * 1);
      width: calc((100vw / 24) * 3);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      gap: 4vh;
    }

    .home-link {
      color: var(--ink);
      text-decoration: none;
      font-size: var(--type-body);
      letter-spacing: 0.4em;
      text-transform: uppercase;
    }

    .menu {
      display: flex;
      flex-direction: column;
      gap: 1.2vh;
    }

    .menu a {
      color: var(--dim);
      text-decoration: none;
      font-size: var(--type-label);
      text-transform: lowercase;
      letter-spacing: 0.08em;
      transition: color 0.3s ease;
    }

    .menu a:hover {
      color: var(--ink);
    }

    .menu a.active {
      color: var(--ink);
    }

    body {
      font-family: "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: var(--type-body);
      color: var(--ink);
      background: var(--bg);
    }

    .grid-24 {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
    }

    .hero {
      height: 100vh;
    }

    .hero-img {
      grid-column: 6 / 14;
      margin-top: 0vh;
      height: 100vh;
      width: 100%;
      object-fit: cover;
      object-position: top;
    }

    .other-img {
      grid-column: 13 / 22;
    }

    .hero-text {
      grid-column: 15 / 22;
      margin-top: 17vh;
      margin-left: 2vh;
      /* max-width: 35vw; */
      display: block;
      align-items: flex-start;
      font-size: var(--type-body);
      color: var(--ink);
      line-height: 1.5;
    }

    .performances {
      background: var(--bg);
      padding: 6vh 0;
    }
    .news-type{
      padding-right:2vh;
      /* letter-spacing: 0.2rem; */
    }
    .performances-text .news-date{
      display: block;
      text-align: center;
      color: var(--dim);
    }


    .label {
      display: flex;
      margin-bottom: 3vh;
      margin-top: 5vh;
      grid-column: 6 / 7;
      font-size: var(--type-label);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dim);
      justify-self: start;
    }

    .performances-text {
      grid-column: 6 / 22;
      padding-top:4vh;
      margin: 0 auto;
      font-size: var(--type-body);
      color: var(--ink);
      text-align: center;
      line-height: 1.5;
      letter-spacing: 0.05rem;
      text-transform: uppercase;
    }

    .subpage-content {
      margin-top: 5vh;
      text-align: left;
      margin-left: 0;
      margin-right: 0;
      padding-top: 0;
      text-transform: none;
      letter-spacing: normal;
      line-height: 1.5;
    }

    /* Calendar */
    .cal-section {
      padding-top: 15vh;
      padding-bottom: 8vh;
    }

    .cal-col {
      grid-column: 6 / 22;
    }

    .cal-heading {
      font-size: var(--type-label);
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 1.5vh;
    }

    .cal-heading--past {
      margin-top: 6vh;
    }

    .cal-list {
      list-style: none;
      border-top: 1px solid var(--dim2);
    }

    .cal-item {
      display: flex;
      gap: 2rem;
      padding: 1.2vh 0;
      border-bottom: 1px solid var(--dim2);
      font-size: var(--type-body);
      line-height: 1.5;
      color: var(--ink);
    }

    .cal-date {
      flex-shrink: 0;
      width: 10rem;
      color: var(--dim);
    }

    .cal-list--past .cal-item {
      color: var(--dim);
    }

    .cal-list--past .cal-date {
      color: var(--dim2);
    }

    .cal-venue {
      color: var(--dim);
    }

    .cal-list--past .cal-venue {
      color: var(--dim2);
    }

    @media (max-width: 860px) {
      .cal-col {
        padding: 0 1rem;
      }
      .cal-item {
        flex-direction: column;
        gap: 0.3vh;
      }
      .cal-date {
        width: auto;
      }
    }

    .text-image {
      min-height: 100vh;
      margin-top: 10vh;
      align-items: start;
      align-content: start;
    }

    .text-image img {
      grid-column: 13 / 25;
      height: 100vh;
      width: 100%;
      object-fit: cover;
      object-position: center;
      align-self: start;
      display: block;
    }

    .text-image img.other-img {
      grid-column: 13 / 22;
      height: 100vh;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }

        .text-image img.other-img2 {
      grid-column: 6 / 22;
      height: 100vh;
      width: 100%;
      object-fit: contain;
      object-position: top;
    }

    .text-image .copy {
      grid-column: 6 / 12;
      align-self: start;
      font-size: var(--type-body);
      color: var(--ink);
      line-height: 1.5;
      /* padding: 10vh 5vh 10vh 10vh; */
      display: block;
    }

    .bio-page {
      /* min-height: 100vh; */
    }

    .bio-img {
      grid-column: 6 / 14;
      margin-top: 7vh;
      height: 100vh;
      width: 100%;
      object-fit: contain;
      object-position: top;
    }
    .bio-img-2 {
      grid-column: 15 / 22;
      margin-left: 2vh;
      height: 100vh;
      width: 100%;
      object-fit: contain;
      object-position: top;
    }

    .bio-text {
      grid-column: 15 / 22;
      margin-top: 17vh;
      margin-left: 2vh;
      display: block;
      align-items: flex-start;
      font-size: var(--type-body);
      color: var(--ink);
      line-height: 1.5;
    }

    .bio-text-2 {
      grid-column: 15 / 22;
      padding-top: 3vh;
    }

    .bio-text p {
      margin-bottom: 2.2vh;
    }

    .bio-page .bio-text p:last-child {
      margin-bottom: 0;
    }

    .bio-text-2 p {
      margin-bottom: 2.2vh;
    }

    .bio-page-2 .bio-text-2 {
      grid-column: 6 / 13;
      margin-left: 0;
    }

    .bio-page-2 {
      margin-top: -5vh;
    }

    .bio-page-2 .bio-img {
      grid-column: 14 / 22;
      margin-top: 0;
      transform: none;
    }

    .bio-page-2 .bio-text {
      margin-top: 0vh;
      transform: none;
    }

/* ============================================================
   RWD — pośredni breakpoint: 860px < szerokość ≤ 1290px
   Obrazy zwężają się symetrycznie (mniej kolumn siatki),
   wysokość 100vh pozostaje bez zmian.
============================================================ */
@media (max-width: 1290px) {
  /* index — hero portrait: cofnięcie z obu stron o 1 kolumnę */
  .hero-img {
    grid-column: 5 / 15;
  }

  /* index — hero text: przesuwa się razem z obrazem */
  .hero-text {
    grid-column: 16 / 23;
    align-self: start;
  }

  /* index — second image (other-img2): zwężenie z obu stron */
  .text-image img.other-img2 {
    grid-column: 5 / 23;
  }

  /* bio — pierwsza sekcja */
  .bio-page {
    align-items: start;
  }
  .bio-img {
    grid-column: 5 / 15;
    object-fit: cover;
  }
  .bio-text {
    grid-column: 16 / 23;
    align-self: start;
  }

  /* bio — druga sekcja: znosi ujemny margin-top z desktopa */
  .bio-page-2 {
    margin-top: 9vh;
    align-items: start;
  }
  .bio-page-2 .bio-img {
    grid-column: 13 / 23;
    object-fit: cover;
  }
  .bio-page-2 .bio-text-2 {
    margin-top: 0;
    grid-column: 5 / 12;
    margin-left: 2vh;
    align-self: start;
  }

  /* bio-img-2 */
  .bio-img-2 {
    grid-column: 14 / 23;
    object-fit: cover;
  }

  /* performances/label — wyrównanie do nowych pozycji kolumn */
  .label {
    grid-column: 5 / 6;
  }
  .performances-text {
    grid-column: 5 / 23;
  }
}

/* ============================================================
   RWD — mobilny breakpoint: ≤ 860px
   Układ zmienia się z siatki na jedną kolumnę.
   Obrazy: pełna szerokość, wysokość skaluje się do 70vh.
============================================================ */
@media (max-width: 860px) {
  /* Nawigacja: przechodzi na górę, poziomo */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.5vh 1rem;
    gap: 0;
    background: var(--bg);
    z-index: 1000;
  }

  .menu {
    flex-direction: row;
    gap: 1rem;
  }

  /* Siatka → jednokolumnowa */
  .grid-24 {
    display: flex;
    flex-direction: column;
  }

  /* Hero: obraz na pełną szerokość, wysokość 70vh */
  .hero {
    height: auto;
    padding-top: 8vh;
  }

  .hero-img {
    width: 100%;
    height: 70vh;
    object-fit: contain;
    object-position: top;
  }

  .hero-text {
    margin-top: 3vh;
    margin-left: 1rem;
    margin-right: 1rem;
    padding-bottom: 4vh;
  }

  /* text-image sekcja */
  .text-image {
    margin-top: 4vh;
  }

  .text-image img,
  .text-image img.other-img,
  .text-image img.other-img2 {
    width: 100%;
    height: 70vh;
  }

  /* Bio */
  .bio-page {
    padding-top: 8vh;
  }

  .bio-img,
  .bio-img-2 {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    object-position: bottom;
    margin-top: 0;
    margin-left: 0;
    order: 1;
  }

  .bio-text,
  .bio-text-2 {
    margin-top: 3vh;
    margin-left: 1rem;
    margin-right: 1rem;
    padding-bottom: 4vh;
    order: 2;
  }

  .bio-page-2 {
    margin-top: 0;
    padding-top: 6vh;
  }

  /* Performances / label */
  .label {
    margin-left: 1rem;
    padding-top: 4vh;
  }

  .performances-text {
    padding: 2vh 1rem 4vh;
    text-align: left;
  }
}