/* Korekty logo, hero oraz wersji mobilnej */
html {
  overflow-x: hidden;
}

.site-header .brand {
  width: 150px;
  height: 78px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: auto;
}

.site-header .brand img {
  width: 142px;
  height: 92px;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
}

.hero-zine.shell {
  width: min(1380px, calc(100% - 64px));
  grid-template-columns: minmax(0, 1.05fr) minmax(560px, .95fr);
  gap: 48px;
}

.hero-zine h1 {
  font-size: clamp(4rem, 5.2vw, 5.25rem);
  line-height: .92;
}

.hero-zine h1 .hero-line {
  display: block;
  position: relative;
  color: var(--ink);
  font-style: normal;
  white-space: nowrap;
}

.hero-zine h1 .hero-line::after {
  content: none;
}

.hero-zine h1 .hero-highlight {
  position: relative;
  color: var(--red);
  font-style: italic;
}

.hero-zine h1 .hero-highlight::after {
  content: '';
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: .03em;
  height: .1em;
  background: var(--acid);
  z-index: -1;
  transform: rotate(-2deg);
}

@media (max-width: 1100px) {
  .hero-zine.shell {
    width: min(100% - 48px, 1240px);
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }

  .hero-zine h1 {
    font-size: clamp(3.25rem, 5.7vw, 4rem);
  }
}

@media (max-width: 980px) {
  .hero-zine.shell {
    width: min(100% - 48px, 760px);
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero-zine h1 {
    font-size: clamp(3.6rem, 9vw, 5rem);
  }
}

@media (max-width: 680px) {
  body {
    font-size: 15px;
  }

  .ticker > div {
    width: 100%;
    min-width: 0;
    padding-block: 7px;
    justify-content: space-between;
    gap: 14px;
    font-size: 9px;
  }

  .ticker > div span:nth-of-type(n + 3),
  .ticker > div i:nth-of-type(n + 2) {
    display: none;
  }

  .site-header {
    min-height: 72px;
  }

  .site-header .brand {
    width: 108px;
    height: 64px;
  }

  .site-header .brand img {
    width: 103px;
    height: 72px;
  }

  .hero-zine.shell {
    width: min(100% - 28px, 520px);
    padding: 36px 0 72px;
    gap: 46px;
  }

  .hero-zine .kicker {
    max-width: 310px;
    margin-bottom: 15px;
    font-size: 9px;
    line-height: 1.45;
  }

  .hero-zine h1 {
    font-size: clamp(2.25rem, 10.4vw, 3rem);
    line-height: .94;
    letter-spacing: -.075em;
  }

  .hero-zine .intro {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.5;
  }

  .hero-actions {
    margin-top: 26px;
    gap: 20px;
  }

  .hero-actions .pill {
    width: 100%;
  }

  .hero-collage {
    width: calc(100% - 8px);
    padding: 10px 2px;
  }

  .hero-collage::before {
    inset: -12px -12px 2px 18px;
    background-size: 22px 22px;
  }

  .photo-main img {
    height: clamp(235px, 68vw, 300px);
  }

  .photo-main figcaption {
    left: 14px;
    font-size: 12px;
  }

  .sticker-round {
    width: 76px;
    height: 76px;
    right: -5px;
    top: -12px;
    font-size: 10px;
  }

  .truth-strip {
    margin-inline: 0;
    transform: none;
  }

  .truth-strip > div {
    min-height: 0;
    padding-block: 25px;
  }

  .story {
    padding: 82px 0;
    gap: 45px;
  }

  .story h2,
  .section-top h2 {
    font-size: clamp(2.6rem, 12vw, 3.5rem);
  }

  .mini-stats strong {
    font-size: 25px;
  }

  .mini-stats span {
    font-size: 9px;
  }

  .story-photos {
    min-height: 425px;
  }

  .tilt-left {
    height: 275px;
  }

  .tilt-right {
    height: 235px;
  }

  .action-zone {
    padding: 72px 0;
  }

  .action-list {
    margin-top: 45px;
  }

  .action-list article {
    min-height: 0;
    padding: 25px 0;
    align-items: start;
  }

  .action-list h3 {
    font-size: 1.65rem;
  }

  .action-list p {
    font-size: 13px;
  }

  .event-scrap {
    padding: 80px 0;
  }

  .event-note h2 {
    font-size: 4rem;
  }

  .photo-ribbon {
    margin-inline: 0;
    transform: none;
  }

  .photo-ribbon figure {
    height: 255px;
  }

  .final-cta {
    padding: 90px 0;
  }

  .final-cta h2 {
    font-size: clamp(4.2rem, 21vw, 6rem);
  }

  .page-hero h1,
  .contact-intro h1 {
    font-size: clamp(3.4rem, 16vw, 4.8rem);
  }

  .page-photo {
    height: 320px;
  }

  .page-photo .photo-sticker {
    right: 12px;
    bottom: -24px;
    padding: 13px 16px;
    font-size: 11px;
  }

  .contact-form {
    transform: none;
  }

  .footer-logo {
    width: 155px;
  }
}

@media (max-width: 360px) {
  .hero-zine h1 {
    font-size: 2.15rem;
  }

  .site-header .brand {
    width: 98px;
  }
}