/*
 * Tasiiasi — TSI-MOBILE-003 rev.3 (CSS-only)
 * Scope: width-safe Carlos world hero on narrow viewports.
 * Baseline: production 4b2d21aaab2e.
 * Deliberately contains no Reader, navigation or scroll-state logic.
 */

@media (max-width: 820px) {
  .world-page,
  .world-header,
  .world-header nav,
  .world-hero,
  .world-hero-copy,
  .world-portrait,
  .world-books,
  .world-shelf,
  .world-about,
  .world-footer {
    min-width: 0;
    max-width: 100%;
  }

  .world-page,
  .world-header,
  .world-hero,
  .world-hero-copy,
  .world-portrait {
    width: 100%;
  }

  .world-header {
    gap: 12px;
  }

  .world-header nav {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 12px;
  }

  .world-brand,
  .world-header nav a {
    min-width: 0;
  }

  .world-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .world-hero h1 {
    max-width: 100%;
  }

  .world-portrait {
    overflow: hidden;
  }

  .world-portrait img,
  .world-about > img,
  .world-cover img,
  .world-kitten-memory img {
    display: block;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .world-header {
    flex-wrap: wrap;
    padding: 12px clamp(14px, 4.5vw, 20px);
  }

  .world-brand {
    flex: 1 1 132px;
    line-height: 1.25;
  }

  .world-header nav {
    flex: 1 1 170px;
  }

  .world-header .world-nav-accent {
    max-width: 128px;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  .world-hero-copy {
    padding-left: clamp(20px, 6vw, 28px);
    padding-right: clamp(20px, 6vw, 28px);
  }

  .world-hero h1 {
    font-size: clamp(44px, 14.5vw, 76px);
    overflow-wrap: normal;
    word-break: normal;
  }

  .world-portrait {
    min-height: 0;
    height: clamp(460px, 135vw, 600px);
  }

  .world-portrait img {
    object-fit: cover;
  }

  .world-portrait p {
    left: clamp(20px, 6vw, 30px);
    right: clamp(20px, 6vw, 30px);
    width: auto;
    max-width: none;
    font-size: clamp(20px, 6vw, 28px);
  }

  .world-books,
  .world-about > div {
    padding-left: clamp(20px, 6vw, 24px);
    padding-right: clamp(20px, 6vw, 24px);
  }
}