/*
 * Pitten homepage refinements, 2026-10-25.
 * Neutral section planes are deliberately not tints of the brand palette.
 * Existing character artwork, typefaces, motion and colour schemes are retained.
 */
html[data-page-refined] {
  --refined-gutter: max(5%, calc((100% - 1550px) / 2));
  --refined-section-space: clamp(72px, 6.2vw, 104px);
  --refined-neutral: #F2F2F2;
}

/* A complete portrait field makes the red shoes legible on every story colour. */
html[data-page-refined] #story .meet-portrait {
  padding-inline: 12px;
}
html[data-page-refined] #story .meet-portrait-art {
  display: grid;
  place-items: center;
  width: min(100%, 470px);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 16px;
  background: #E6E6E6;
  border: 7px solid #FFFFFF;
  border-radius: 50%;
}
html[data-page-refined] #story .meet-portrait-art img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}
html[data-page-refined] #story .meet-portrait figcaption {
  margin-top: 24px;
}

/* Section 02: a white introduction and the existing solid-colour motion belt. */
html[data-page-refined] #little-moves {
  background: #FFFFFF;
}
html[data-page-refined] #little-moves .motion-heading {
  padding-top: var(--refined-section-space);
  padding-inline: var(--refined-gutter);
}
html[data-page-refined] #little-moves .motion-bar {
  margin-inline: var(--refined-gutter);
}
html[data-page-refined] #little-moves .motion-note {
  padding: 24px var(--refined-gutter) var(--refined-section-space);
}

/* Section 03: neutral gray contains the chapter introduction and LINE story.
 * The goods group below has its own full-width white surface.
 * No viewport-width breakout or negative margins are needed.
 */
html[data-page-refined] #possibilities {
  background: var(--refined-neutral);
  padding: var(--refined-section-space) 0 0;
}
html[data-page-refined] #possibilities > .section-index,
html[data-page-refined] #possibilities > .future-heading,
html[data-page-refined] #possibilities > .line-feature {
  margin-inline: var(--refined-gutter);
}
html[data-page-refined] #possibilities > .line-feature {
  margin-bottom: 0;
  padding-bottom: var(--refined-section-space);
  border-bottom: 0;
}
html[data-page-refined] #possibilities > .goods-section {
  display: flow-root;
  min-width: 0;
  padding: var(--refined-section-space) var(--refined-gutter);
  background: #FFFFFF;
}
html[data-page-refined] #possibilities .goods-section > .goods-heading {
  margin-top: 0;
}
html[data-page-refined] #possibilities .goods-section .goods-invite {
  padding-bottom: 0;
}

/* Section 04 is gray; section 05 returns to white before the vivid portals. */
html[data-page-refined] #pocket {
  background: var(--refined-neutral);
  padding: var(--refined-section-space) var(--refined-gutter);
}
html[data-page-refined] #worlds {
  background: #FFFFFF;
}
html[data-page-refined] #worlds .worlds-heading {
  padding-top: var(--refined-section-space);
  padding-bottom: var(--refined-section-space);
  padding-inline: var(--refined-gutter);
}

@media (max-width: 1100px) and (min-width: 761px) {
  html[data-page-refined] {
    --refined-section-space: 64px;
  }
  html[data-page-refined] #story .meet-portrait-art {
    padding: 10px;
    border-width: 6px;
  }
}

@media (max-width: 760px) {
  html[data-page-refined] {
    --refined-gutter: 6%;
    --refined-section-space: 52px;
  }
  html[data-page-refined] #story .meet-portrait {
    padding-inline: 0;
  }
  html[data-page-refined] #story .meet-portrait-art {
    width: min(100%, 340px);
    padding: 12px;
    border-width: 6px;
  }
  html[data-page-refined] #story .meet-portrait figcaption {
    margin-top: 20px;
  }
  html[data-page-refined] #little-moves .motion-note {
    padding-top: 20px;
    padding-bottom: 36px;
  }
}