/* Original Creator material inside the existing A2 palette and type system. */
.creator-section {
  background: var(--surface);
  color: var(--ink);
  padding-block: 96px;
  scroll-margin-top: 24px;
}

.creator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
}

.creator-story {
  max-width: 480px;
  min-width: 0;
}

.creator-story h2 {
  margin: 0;
  font-family: Neue, sans-serif;
  font-size: clamp(2.375rem, 4.25vw, 3.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.creator-intro {
  max-width: 34ch;
  margin: 24px 0 0;
  color: var(--ink2);
  font-size: 18px;
  line-height: 1.65;
}

.creator-creator {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 38px 0 0;
}

.creator-portrait {
  display: block;
  flex: 0 0 144px;
  width: 144px;
  height: 144px;
  border-radius: 12px;
}

.creator-creator figcaption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.creator-creator-name {
  font-family: Neue, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.creator-creator-role {
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.5;
}

.creator-contribution {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: start;
  padding-top: 30px;
  margin-top: 38px;
  border-top: 1px solid var(--line2);
}

.creator-contribution h3 {
  margin: 0;
  font-family: Neue, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.creator-hand {
  display: inline-block;
  margin-top: 8px;
  color: var(--hand);
  font-family: Nothing, cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}

.creator-contribution p {
  margin: 0;
  color: var(--ink2);
  font-size: 16px;
  line-height: 1.65;
}

/* The supplied app screens are the interaction surface. */
.creator-gallery {width:min(100%,250px);min-width:0;margin-inline:auto}
.creator-demo {display:block;position:relative;width:100%;padding:0;background:transparent;border-radius:8.2% / 3.8%;aspect-ratio:390/844;overflow:hidden;isolation:isolate;touch-action:pan-y}
.creator-demo:active {transform:none}
.creator-demo img {display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.creator-demo-programs {position:absolute;inset:0;transform:translateX(100%);visibility:hidden}
.creator-demo[data-screen="programs"] .creator-demo-programs {transform:none;visibility:visible}
.creator-demo-touch {position:absolute;left:86%;top:38.4%;width:32px;height:32px;border:2px solid #fff;border-radius:50%;background:#00000020;transform:translate(-50%,-50%) scale(1.4);opacity:0;pointer-events:none}
.creator-demo[data-screen="programs"] .creator-demo-touch {left:10.5%;top:8.6%;border-color:#10131c;background:#ffffff80}
@media (max-width: 1050px) {
  .creator-section { padding-block: 76px; }
  .creator-layout { gap: 48px; }
  .creator-gallery { width: min(100%, 240px); }
  .creator-contribution { grid-template-columns: 1fr; gap: 14px; }
  .creator-contribution h3 br { display: none; }
  .creator-hand { margin-top: 0; margin-left: 5px; }
  .creator-creator { gap: 18px; }
  .creator-portrait { flex-basis: 112px; width: 112px; height: 112px; }
  .creator-creator-name { font-size: 23px; }
}

@media (max-width: 760px) {
  .creator-section { padding-block: 56px; }
  .creator-layout { grid-template-columns: 1fr; gap: 42px; }
  .creator-story { max-width: 520px; }
  .creator-story h2 { font-size: 2.375rem; }
  .creator-intro { max-width: 34ch; margin-top: 20px; font-size: 16px; line-height: 1.6; }
  .creator-creator { margin-top: 26px; gap: 20px; }
  .creator-portrait { flex-basis: 104px; width: 104px; height: 104px; }
  .creator-creator-name { font-size: 24px; }
  .creator-creator-role { font-size: 14px; }
  .creator-contribution { margin-top: 26px; padding-top: 24px; gap: 12px; }
  .creator-contribution h3 { font-size: 21px; }
  .creator-hand { font-size: 24px; }
  .creator-contribution p { max-width: 38ch; line-height: 1.6; }
  .creator-gallery { width: min(74vw, 260px); }
}

@media (prefers-reduced-motion: reduce) {
}

/* Supplied screens in one phone shell, pending the real app montage. */
.creator-gallery{padding:8px;background:#10131c;border-radius:32px;box-shadow:0 16px 36px #0e111a20}
.creator-demo{border-radius:25px;outline-offset:12px}
.creator-demo::after{content:"";position:absolute;top:7px;left:50%;width:25%;height:8px;transform:translateX(-50%);border-radius:8px;background:#10131c;pointer-events:none}
@media(max-width:760px){.creator-gallery{padding:7px;border-radius:30px}.creator-demo{border-radius:23px}}