/* ==========================================================================
   IMABEATDUHPARTY — ABOUT
   The story, told in the site's own language: dark ground, pink accents,
   bold white type, and the artwork doing the talking between sections.
   ========================================================================== */

/* Hero type sits in the open pink field to the left of the portrait. */
.about-hero { min-height: 78svh; }
.about-hero .art-stage__content {
  align-self: center;
  max-width: var(--shell-max);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.about-hero__title { max-width: 9ch; }
.about-hero__lede { max-width: 30ch; }

@media (min-width: 64rem) {
  .about-hero .art-stage__content > * { max-width: 42%; }
  .about-hero__title { max-width: 8ch; }
}

/* --- Chapter rhythm -------------------------------------------------------
   Numbered chapters, so the page reads as a story rather than a set of
   unrelated blocks. */
.chapter {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 64rem) {
  .chapter {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
  }
}

.chapter__no {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--pink);
}

.chapter__title {
  margin-block-start: var(--sp-3);
  font-size: var(--t-h2);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.chapter__body {
  display: grid;
  gap: var(--sp-4);
  max-width: 54ch;
}
.chapter__body p {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--fg-muted);
}
/* The opening line of a chapter carries more weight than the rest. */
.chapter__body p:first-child { color: var(--paper); }

/* --- The year marker ------------------------------------------------------ */
.since {
  display: inline-grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 47 146 / 0.14), transparent 62%),
    var(--ink-2);
}
.since b {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: var(--track-mega);
  color: var(--paper);
}
.since span {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--pink-light);
}

/* --- Moods ----------------------------------------------------------------
   The kinds of music, in the artist's own words. Not decoration — this is
   the point of the section. */
.moods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.mood {
  padding: 0.7em 1.1em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.03);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-small);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--fg-muted);
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    transform var(--dur) var(--ease-out);
}
.mood:hover {
  color: var(--ink);
  background: var(--pink);
  border-color: var(--pink);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .mood:hover { transform: none; }
}

/* --- The world strip ------------------------------------------------------
   The universe, shown rather than described — the same artwork the rest of
   the site is built from. */
.world-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13rem, 19rem);
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block-end: var(--sp-4);
  scrollbar-width: none;
}
.world-strip::-webkit-scrollbar { display: none; }

.world-tile {
  position: relative;
  scroll-snap-align: start;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background-image: var(--art-lqip);
  background-size: cover;
  background-position: 50% 50%;
}
.world-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.world-tile.is-loaded img { opacity: 1; }
.world-tile:hover img { transform: scale(1.04); }
.world-tile figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(to top, rgb(8 6 10 / 0.9), transparent);
}
@media (prefers-reduced-motion: reduce) {
  .world-tile:hover img { transform: none; }
}

/* --- The philosophy -------------------------------------------------------
   One line, given the whole screen. */
.creed {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  place-items: center;
  min-height: 70svh;
  text-align: center;
  background:
    radial-gradient(60% 60% at 50% 45%, rgb(255 47 146 / 0.22), transparent 70%),
    radial-gradient(50% 50% at 12% 88%, rgb(138 216 255 / 0.1), transparent 72%),
    radial-gradient(50% 50% at 88% 12%, rgb(255 91 46 / 0.1), transparent 72%),
    var(--ink);
}
.creed__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
}
.creed__quote {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(2.2rem, 1rem + 7vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  max-width: 14ch;
  text-wrap: balance;
  text-shadow: 0 0 60px rgb(255 47 146 / 0.35);
}
.creed__quote em {
  font-style: normal;
  color: var(--pink);
}

/* --- Closing --------------------------------------------------------------- */
.welcome {
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
  max-width: 46rem;
}
.welcome__title {
  font-size: var(--t-h1);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: 0.95;
}