/* Pearl Play revision 7. The accepted scene/controller are unchanged.
   Historical product pixels stay unfiltered. */
body.pearl-play {
  --paper: #f7f6f2;
  --white: #fffefb;
  --muted: #5b6572;
  --sw-page: #f7f6f2;
  --sw-surface: #fffefb;
  background: var(--paper);
}
body.pearl-play .site-header { background: #f7f6f2f2; }
body.pearl-play #site-nav { gap: clamp(24px,3vw,36px); }
/* The approved headline and scene are unchanged; give the longer intro a
   comfortable reading measure without forcing a fixed-height opening. */
body.pearl-play .pearl-intro > p.pearl-intro-copy {
  max-width: 66ch;
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.7;
}
@media (max-width: 767px) {
  body.pearl-play .pearl-intro > p.pearl-intro-copy {
    max-width: 36ch;
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.7;
    text-align: left;
  }
}
:is(.ap-work,.ap-case,.ap-about,.ap-footer) {
  --ap-ink: #263345;
  --ap-secondary: #5b6572;
  --ap-rose: #865d76;
  --ap-paper: #f7f6f2;
  --ap-surface: #fffefb;
  --ap-rule: #26334524;
  --ap-shadow: 0 3px 5px #2633450b, 0 15px 28px #2633450e;
  color: var(--ap-ink);
}
body.pearl-play :is(.ap-work,.ap-case,.ap-about) {
  width: min(1280px, calc(100% - 112px));
  max-width: 1280px;
  margin-inline: auto;
  min-width: 0;
}
:is(.ap-work,.ap-case,.ap-about) :is(h1,h2,h3) {
  color: var(--ap-ink);
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
/* These selectors also beat the earlier body.pearl-play heading rule. */
body.pearl-play :is(.ap-project-title,.ap-case-intro h1,.ap-chapter h2,.ap-work-heading h2,.ap-about-hero h1,.ap-about-body h2,.ap-background h2,.ap-original-work h2) { letter-spacing: -.025em; }
:is(.ap-work,.ap-case,.ap-about) a { text-underline-offset: 5px; text-decoration-thickness: 1px; }
:is(.ap-work,.ap-case,.ap-about) a:hover { color: var(--ap-rose); }
:is(.ap-work,.ap-case,.ap-about) :is(a,button,summary):focus-visible { outline: 2px solid #485c74; outline-offset: 5px; }
:is(.ap-work,.ap-case,.ap-about) .eyebrow { font-size: 12px; line-height: 1.65; letter-spacing: .11em; font-weight: 500; color: var(--ap-secondary); }

/* Selected Work follows the approved text / media relationship. Colour belongs
   to two local image compositions, never to the source screenshot itself. */
.ap-work { padding-block: 88px 116px; }
.ap-work-heading { margin-bottom: 66px; }
.ap-work-heading h2 { font-size: clamp(54px,5.1vw,72px); line-height: 1.07; letter-spacing: -.03em; }
.ap-work-heading h2 em { color: var(--ap-rose); font: italic 500 1.15em/.98 var(--serif); letter-spacing: -.035em; }
.ap-feature {
  display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
  align-items: center;
  gap: 60px;
  padding: 18px 0 114px;
  margin: 0;
  min-width: 0;
  position: relative;
  scroll-margin-top: 24px;
  border-bottom: 1px solid var(--ap-rule);
}
.ap-feature + .ap-feature { padding-top: 106px; }
.ap-feature-copy { min-width: 0; position: relative; z-index: 2; }
.ap-feature-dd { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(44px,6vw,96px); }
.ap-feature-intro { min-width: 0; }
.ap-project-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  color: var(--ap-rose);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .115em;
  text-transform: uppercase;
  margin: 0 0 28px;
}
.ap-project-identity::after { content: ''; display: block; width: 45px; height: 1px; margin-left: 8px; background: #c8a9bb; }
.ap-project-title { max-width: 16ch; font-size: clamp(36px,3.25vw,46px); line-height: 1.17; margin: 0 0 26px; }
.ap-project-summary { max-width: 36ch; color: var(--ap-ink); font-size: 18px; line-height: 1.6; margin: 0; }
.ap-feature-ending { margin-top: 24px; }
.ap-project-meta { color: var(--ap-secondary); max-width: 41ch; font-size: 14px; line-height: 1.65; margin: 0 0 18px; }
.ap-project-meta span { display: block; margin-top: 3px; }
.ap-case-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; padding-block: 6px; border-bottom: 1px solid #7d8b99; color: var(--ap-ink); font-size: 15px; line-height: 1.5; text-decoration: none; }
.ap-case-link:hover { border-color: var(--ap-rose); }
.ap-case-link > span[aria-hidden] { font-size: 20px; }
body.pearl-play .ap-feature .project-link { display: inline-flex; width: auto; padding: 6px 0; margin: 0; border: 0; border-bottom: 1px solid #7d8b99; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
body.pearl-play .ap-feature .project-link:hover { transform: none; border-color: var(--ap-rose); }
.ap-project-media { min-width: 0; position: relative; isolation: isolate; }
.ap-feature .ap-project-media::before { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.ap-feature-dd .ap-project-media::before {
  inset: -2% -2% -1%;
  border-radius: 46%;
  background: radial-gradient(ellipse at 52% 45%, #e4eef5 0%, #e4eef5a6 37%, #e4eef500 71%);
}
.ap-feature-hf { grid-template-columns: minmax(0,1.28fr) minmax(0,.72fr); gap: 65px; }
.ap-feature-hf .ap-feature-copy { grid-column: 2; grid-row: 1; }
.ap-feature-hf .ap-project-media { grid-column: 1; grid-row: 1; }
.ap-feature-hf .ap-project-media::before {
  inset: -8% -5% -3% -11%;
  border-radius: 43% 57% 50% 50% / 38% 51% 49% 62%;
  background: radial-gradient(ellipse at 52% 45%, #e9eee5 0%, #e9eee59a 38%, #e9eee500 72%);
}
.ap-feature-hf .ap-project-title { max-width: 15.5ch; }
.ap-montage { position: relative; width: 100%; min-width: 0; }
.ap-scene-dd { padding-block: 14px; }
.ap-scene-dd .ap-scene { width: clamp(219px,18vw,259px); margin-inline: auto; }
.ap-scene-dd picture { display: block; width: 100%; }
.ap-scene-dd .ap-scene img { width: 100%; height: auto; max-height: none; border-radius: 10px; }
.ap-scene-dd .ap-scene .ap-media-label { padding-right: 0; text-align: center; margin-top: 16px; }
.ap-scene-dd .ap-inspect { top: auto; bottom: 100%; margin: 0 0 8px; }
.ap-montage-hf { aspect-ratio: 1.25; }
.ap-montage :is(.ap-context,.ap-detail) { position: absolute; display: flex; flex-direction: column; min-width: 0; margin: 0; }
.ap-montage .media-zoom { display: block; min-width: 0; min-height: 0; width: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.ap-montage img { display: block; max-width: 100%; width: 100%; height: auto; border: 1px solid #fff9; border-radius: 15px; box-shadow: var(--ap-shadow); filter: none; transform: none; opacity: 1; }
.ap-media-label { color: var(--ap-secondary); font-size: 14px; line-height: 1.6; margin-top: 12px; max-width: 55ch; }
.ap-state-label { color: var(--ap-ink); font-size: 14px; font-weight: 500; }
.ap-montage-hf .ap-context { left: 2%; top: 7%; width: 94%; }
.ap-montage-hf .ap-detail { left: 22%; top: 63%; width: 57%; }
.ap-montage-hf .ap-detail img { border-radius: 15px; }
.ap-montage-hf .ap-media-label { max-width: 50ch; }
.ap-montage-hf .ap-context .ap-media-label { position: absolute; top: -35px; left: 0; margin: 0; padding-right: 0; min-height: 0; }
.ap-montage-hf .ap-context .ap-inspect { top: auto; bottom: 100%; margin: 0 0 6px; }
.ap-montage-web,.ap-montage-nyu { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; align-items: start; }
.ap-montage-web .ap-detail { max-width: 38%; justify-self: end; }
.ap-montage-nyu { grid-template-columns: minmax(0,1fr) minmax(0,.62fr); gap: 24px; max-width: 440px; margin-inline: auto; align-items: end; }
:is(.ap-montage-web,.ap-montage-nyu) :is(.ap-context,.ap-detail) { position: static; inset: auto; width: 100%; height: auto; }
.ap-montage-research .ap-report { max-width: 350px; margin: 28px 0 0 auto; }
.ap-recruitment-teaser { max-width: 36ch; padding-left: 22px; border-left: 1px solid var(--ap-rule); }
.ap-recruitment-teaser .ap-explanation-label { font-size: 14px; color: var(--ap-secondary); margin-bottom: 17px; }
.ap-recruitment-teaser > p:last-child { font-size: 25px; line-height: 1.4; letter-spacing: -.02em; }
.ap-connector { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ap-connector path { fill: none; stroke: #5e768b; stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.ap-connector text { fill: var(--ap-ink); font: 14px var(--body); }
.ap-feature :is(.ap-case-link,.media-zoom) { transition: outline-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.ap-feature:has(.ap-case-link:hover,.media-zoom:hover) .ap-project-identity,
.ap-feature:focus-within .ap-project-identity { color: #6c435f; }

/* Supporting cases are open, shorter rows, with genuine content media. */
.ap-feature-compact { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 82px; padding-block: 74px; }
.ap-feature-compact + .ap-feature-compact { padding-top: 74px; }
.ap-feature-compact .ap-project-title { font-size: 32px; line-height: 1.22; max-width: 25ch; margin-bottom: 22px; }
.ap-feature-compact .ap-project-identity { margin-bottom: 23px; font-size: 13px; }
.ap-feature-compact .ap-project-summary { font-size: 17px; line-height: 1.65; max-width: 43ch; }
.ap-feature-compact .ap-feature-ending { margin-top: 20px; }
.ap-feature-compact:last-child { border: 0; padding-bottom: 0; }
.ap-compact-media { min-width: 0; }
.ap-compact-media img { width: 100%; height: auto; object-fit: contain; filter: none; transform: none; }
.ap-mini-pair { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 20px; align-items: center; }
.ap-mini-pair > figure { margin: 0; min-width: 0; }
.ap-web-content { display: grid; gap: 18px; }
.ap-web-content .ap-secondary { max-width: 56%; margin-left: auto; }
.ap-view-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; max-width: 440px; margin-inline: auto; }
.ap-view-pair img { max-height: 390px; object-fit: contain; }
.ap-recruitment { display: block; padding-block: 12px; }
.ap-recruitment .ap-columns { grid-template-columns: minmax(0,.85fr) 22px minmax(0,1.15fr); gap: 20px; align-items: start; }
.ap-recruitment .ap-columns > div { min-width: 0; }
.ap-recruitment .ap-state-label { font-size: 13px; color: var(--ap-secondary); line-height: 1.6; font-weight: 500; margin: 0 0 11px; letter-spacing: 0; }
.ap-recruitment .ap-columns h3 { font-size: 22px; line-height: 1.4; letter-spacing: -.025em; margin: 0; }
.ap-change-arrow { padding-top: 30px; color: #7a8794; font-size: 20px; }
.ap-recruitment + .ap-media-label { margin-top: 17px; }
.ap-report-detail { max-width: 350px; margin: 24px 0 0 auto; }
.ap-report-detail img { width: 100%; height: auto; }

/* Case entrances show an authentic focused area before a long source board. */
.ap-case { padding-top: 0; }
.ap-case-hero { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 66px; align-items: start; padding: 34px 0 82px; }
.ap-case-intro { min-width: 0; }
.ap-back-link { color: var(--ap-secondary); font-size: 14px; line-height: 1.6; min-height: 44px; display: inline-flex; align-items: center; }
.ap-case-intro .ap-back-link { margin-bottom: 20px; }
.ap-case-intro > .eyebrow,
.ap-case-identity { color: var(--ap-rose); font-size: 13px; line-height: 1.6; letter-spacing: .11em; margin: 0 0 22px; }
.ap-case-intro h1 { font-size: clamp(50px,4.15vw,60px); line-height: 1.1; max-width: 20ch; letter-spacing: -.025em; margin: 0; }
.ap-case-lede { max-width: 57ch; font-size: 18px; line-height: 1.65; margin-top: 26px; }
.ap-case-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; margin: 29px 0 0; padding: 0; border: 0; }
.ap-case-meta dt { font-size: 12px; line-height: 1.6; font-weight: 500; color: var(--ap-secondary); margin-bottom: 7px; }
.ap-case-meta dd { font-size: 14px; line-height: 1.65; margin: 0; }
.ap-case-visual { min-width: 0; align-self: center; }
.ap-case-visual .ap-figure { margin: 0; }
.ap-case-visual .ap-figure img { max-height: 560px; object-fit: contain; }
.ap-case-visual .ap-columns { gap: 20px; }
.ap-case-hero-hf { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
.ap-case-hero-hf .ap-case-intro h1 { max-width: 20ch; }
.ap-case-hero-hf .ap-case-visual { max-width: 760px; }
.ap-case-hero-web { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
.ap-case-hero-research { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

/* The figure carries one quiet edge. A comparison shares one surface, and
   removes the individual frames inside it. Labels always sit outside UI. */
.ap-figure { margin: 0; min-width: 0; }
body.pearl-play .ap-figure > .media-zoom { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.ap-inspect { position: absolute; z-index: 2; top: 100%; right: 0; margin-top: 7px; min-height: 30px; display: inline-flex; align-items: center; color: var(--ap-secondary); font-size: 13px; line-height: 1.5; white-space: nowrap; opacity: 0; text-decoration: underline; text-underline-offset: 4px; transition: opacity 160ms ease; }
.ap-figure .media-zoom:is(:hover,:focus-visible) .ap-inspect { opacity: 1; }
.ap-figure .ap-media-label { padding-right: 83px; min-height: 30px; }
.ap-figure img { display: block; width: 100%; height: auto; max-width: 100%; border: 1px solid #fff9; border-radius: 10px; box-shadow: var(--ap-shadow); object-fit: contain; filter: none; opacity: 1; transform: none; }
.ap-figure[data-orientation="portrait"] img { width: auto; max-height: 640px; margin-inline: auto; }
.ap-caption { font-size: 14px; line-height: 1.65; color: var(--ap-secondary); margin-top: 15px; max-width: 78ch; }
.ap-caption > span { display: block; margin-bottom: 6px; color: var(--ap-ink); font-size: 13px; font-weight: 600; line-height: 1.6; }
.ap-caption p { font-size: 14px; line-height: 1.65; margin: 0; }
.ap-caption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ap-ink); font-size: 13px; line-height: 1.5; }
.ap-evidence { margin-top: 34px; min-width: 0; }
.ap-compare,.ap-evidence-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; align-items: start; padding: 20px 0; border-top: 1px solid var(--ap-rule); border-bottom: 1px solid var(--ap-rule); background: transparent; }
.ap-compare[data-count="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.ap-compare[data-count="1"] { grid-template-columns: minmax(0,1fr); }
.ap-layout-exploration { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 24px; align-items: start; }
.ap-hand-comparison { max-width: 780px; }
.ap-three-phones { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
:is(.ap-phone-pair,.ap-three-phones) .ap-figure img { width: auto; height: auto; max-height: 640px; }
.ap-confirm-pair { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); align-items: center; }
.ap-confirm-pair .ap-figure:first-child img { max-height: 570px; width: auto; }
.ap-tutorial-reference { max-width: 370px; margin: 34px auto 0; }
.ap-store-pair,.ap-room-pair { gap: 22px; }
:is(.ap-compare,.ap-evidence-pair) .ap-figure img { border: 0; border-radius: 7px; box-shadow: none; }
:is(.ap-compare,.ap-evidence-pair) .ap-caption { font-size: 13px; margin-top: 14px; }
.ap-comparison-conclusion { margin-top: 25px; max-width: 67ch; font-size: 17px; line-height: 1.65; }
.ap-video { margin: 34px 0 0; min-width: 0; }
.ap-video video { display: block; width: 100%; height: auto; max-height: 640px; background: var(--ap-surface); border: 1px solid #d5dce1; border-radius: 12px; }
.ap-video figcaption { font-size: 14px; line-height: 1.65; color: var(--ap-secondary); margin-top: 15px; }

/* Reading measure and chapter rhythm remain consistent through all five cases. */
.ap-case-contents { border-top: 1px solid var(--ap-rule); padding-top: 23px; margin: 0 0 92px; scroll-margin-top: 24px; }
.ap-case-contents > p { color: var(--ap-secondary); font-size: 12px; line-height: 1.6; letter-spacing: .1em; margin: 0 0 15px; text-transform: uppercase; }
.ap-case-contents :is(ol,ul) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px 32px; list-style: none; margin: 0; padding: 0; }
.ap-case-contents a { display: flex; align-items: center; min-height: 48px; padding-block: 9px; font-size: 14px; line-height: 1.55; color: var(--ap-ink); }
.ap-case-layout { display: grid; grid-template-columns: 164px minmax(0,1fr); gap: 60px; align-items: start; }
.ap-case-index { position: sticky; top: calc(var(--header-offset,var(--header)) + 24px); background: transparent; border: 0; border-top: 1px solid var(--ap-rule); border-radius: 0; box-shadow: none; padding-top: 15px; }
.ap-case-index .case-jump summary { display: none; }
.ap-case-index .case-jump-links { border: 0; padding: 0; }
.ap-case-index > p { color: var(--ap-secondary); font-size: 12px; line-height: 1.6; margin: 0 0 15px; }
.ap-case-index ol { display: block; list-style: none; margin: 0; padding: 0; max-height: none; overflow: visible; }
.ap-case-index li { padding: 0; margin: 0; }
.ap-case-index .case-jump-links a { display: flex; gap: 10px; align-items: start; min-height: 44px; text-decoration: none; }
.ap-case-index .case-jump-links a > span { flex: 0 0 16px; font-size: 11px; padding-top: 1px; color: #8c7787; }
.ap-case-index > .ap-back-link { margin-top: 17px; }
.ap-case-index .case-jump-links > .eyebrow { color: var(--ap-secondary); font-size: 11px; margin-bottom: 15px; }
.ap-case-index .case-jump-links a { font-size: 14px; line-height: 1.6; margin-left: -12px; padding: 11px 0 11px 12px; color: var(--ap-secondary); border-left: 1px solid transparent; }
.ap-case-index .case-jump-links a[aria-current="location"] { color: var(--ap-ink); border-color: var(--ap-rose); font-weight: 600; }
.ap-case-index .case-jump-links a[aria-current="location"] > span { color: var(--ap-rose); }
.ap-case-index .reading-progress { height: 2px; background: #d9dfe1; margin-top: 22px; }
.ap-case-index .reading-progress > span { background: #8e7789; }
.ap-chapter { padding: 0; margin: 0 0 116px; min-width: 0; scroll-margin-top: 24px; }
.ap-chapter > header { max-width: 780px; padding-top: 26px; border-top: 1px solid var(--ap-rule); margin-bottom: 29px; }
.ap-chapter-number { color: var(--ap-rose); font-size: 12px; line-height: 1.65; letter-spacing: .08em; margin: 0 0 18px; }
.ap-chapter h2 { font-size: clamp(33px,2.9vw,42px); line-height: 1.2; max-width: 34ch; margin: 0; }
.ap-status { max-width: 79ch; color: var(--ap-secondary); font-size: 14px; line-height: 1.65; margin: 0 0 25px; }
.ap-chapter h2 + .ap-status { margin-top: 10px; }
.ap-prose { max-width: 720px; min-width: 0; }
.ap-prose p,.ap-prose li { max-width: 66ch; font-size: 18px; line-height: 1.65; }
.ap-prose p + p { margin-top: 24px; }
.ap-prose + .ap-prose { margin-top: 18px; }
.ap-legacy-anchor { display: block; width: 0; height: 0; scroll-margin-top: 24px; }
.ap-prose h3 { font-size: 25px; line-height: 1.3; margin: 31px 0 15px; }
.ap-prose :is(ul,ol) { margin: 24px 0; padding-left: 23px; }
.ap-prose li + li { margin-top: 11px; }
.ap-evidence + .ap-prose { margin-top: 30px; }
.ap-explanation { border-left: 1px solid #a9b5bf; padding-left: 22px; max-width: 720px; margin-top: 28px; }
.ap-explanation h3 { font-size: 17px; line-height: 1.5; letter-spacing: -.015em; margin: 0 0 11px; }
.ap-explanation p { font-size: 17px; line-height: 1.65; max-width: 67ch; }
.ap-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px; min-width: 0; }
.ap-columns > * { min-width: 0; }
.ap-explanation:not(.ap-recruitment) > .ap-columns:has(>div:nth-child(3)) { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ap-explanation > .ap-explanation-label { font-size: 13px; line-height: 1.6; color: var(--ap-secondary); margin: 0 0 22px; letter-spacing: .01em; }
.ap-rule-summary { padding-block: 24px; border-block: 1px solid var(--ap-rule); margin-top: 31px; }
.ap-rule-summary h3 { font-size: 23px; line-height: 1.3; margin: 0 0 17px; }
.ap-rule-summary p { max-width: 65ch; font-size: 17px; line-height: 1.65; }
.ap-rule-summary dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 32px; margin: 0; }
.ap-rule-summary dt { font-size: 13px; color: var(--ap-secondary); margin-bottom: 8px; }
.ap-rule-summary dd { font-size: 17px; line-height: 1.65; margin: 0; }
.ap-back-contents { display: none; }
.ap-outcome { padding: 30px 0 88px; border-top: 1px solid var(--ap-rule); scroll-margin-top: 24px; }
.ap-outcome h2 { font-size: 31px; line-height: 1.25; margin: 0 0 24px; }
.ap-outcome p { font-size: 18px; line-height: 1.65; max-width: 66ch; }
.ap-outcome p + p { margin-top: 23px; }

/* Navigation between cases uses a real, small preview. */
.ap-next-case { display: flex; justify-content: space-between; align-items: center; gap: 44px; padding: 34px 0 94px; border-top: 1px solid var(--ap-rule); }
.ap-next-case > a:not(.ap-next-link) { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; color: var(--ap-secondary); }
.ap-next-link { display: flex; align-items: center; gap: 25px; color: var(--ap-ink); text-decoration: none; max-width: 590px; }
.ap-next-link img { flex: 0 0 155px; width: 155px; height: 100px; object-fit: contain; border: 1px solid #d6dee3; background: var(--ap-surface); padding: 5px; border-radius: 10px; }
.ap-next-link > div { flex: 0 0 155px; width: 155px; }
.ap-next-link > div img { width: 100%; }
.ap-next-link > span { min-width: 0; }
.ap-next-link small { display: block; font-size: 14px; line-height: 1.6; color: var(--ap-secondary); margin-bottom: 8px; }
.ap-next-link strong { display: block; font-size: 25px; font-weight: 500; line-height: 1.25; letter-spacing: -.03em; }
.ap-next-link > span > span { display: block; max-width: 38ch; margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ap-secondary); }
.ap-next-link > b { font-size: 25px; font-weight: 400; margin-left: auto; }

.ap-about-teaser { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.25fr) 170px; align-items: center; gap: 65px; padding-block: 38px 105px; }
.ap-about-teaser h2 { font-size: 42px; line-height: 1.2; letter-spacing: -.035em; font-weight: 500; }
.ap-about-teaser .ap-project-identity { margin-bottom: 18px; }
.ap-about-teaser p:not(.ap-project-identity) { max-width: 48ch; font-size: 18px; line-height: 1.65; }
.ap-about-teaser .ap-case-link { margin-top: 21px; }
.ap-about-teaser figure { margin: 0; width: 170px; }
.ap-about-teaser img { width: 100%; height: auto; border-radius: 11px; border: 1px solid #dce2e5; }

/* The real portrait, background and an actual original work form About. */
.ap-about { padding-block: 62px 112px; }
.ap-about-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 100px; align-items: center; }
.ap-about-hero h1 { font-size: clamp(58px,5.3vw,76px); line-height: 1.1; margin: 18px 0 28px; }
.ap-about-hero h1 em { color: var(--ap-rose); font: italic 500 1.14em/1 var(--serif); letter-spacing: -.035em; }
.ap-about-hero .ap-about-standfirst { max-width: 30ch; font-size: 26px; line-height: 1.5; letter-spacing: -.025em; }
.ap-portrait { max-width: 280px; justify-self: center; margin: 0; }
.ap-portrait img { width: 100%; height: auto; padding: 6px; border: 1px solid #dce2e5; background: #fcfaf7; border-radius: 16px; box-shadow: var(--ap-shadow); }
.ap-portrait figcaption { font-size: 14px; line-height: 1.6; color: var(--ap-secondary); margin-top: 12px; }
.ap-about-content { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: 100px; margin-top: 112px; }
.ap-about-body { max-width: 720px; min-width: 0; }
.ap-about-body h2 { font-size: 37px; line-height: 1.2; margin: 17px 0 27px; }
.ap-about-body p { font-size: 18px; line-height: 1.65; max-width: 66ch; }
.ap-about-body p + p { margin-top: 24px; }
.ap-about-body a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; margin-top: 24px; }
.ap-background { padding-top: 5px; min-width: 0; }
.ap-background h2 { font-size: 26px; line-height: 1.3; margin: 0 0 28px; }
.ap-background dl { margin: 0; display: grid; gap: 26px; }
.ap-background dt { font-size: 13px; line-height: 1.6; color: var(--ap-secondary); margin-bottom: 8px; }
.ap-background dd { margin: 0; font-size: 17px; line-height: 1.65; }
.ap-background dd + dd { margin-top: 19px; }
.ap-background a { display: inline-flex; align-items: center; font-size: 14px; min-height: 44px; margin-top: 23px; }
.ap-original-work { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 75px; align-items: center; margin-top: 115px; padding-top: 39px; border-top: 1px solid var(--ap-rule); }
.ap-original-work h2 { font-size: 35px; line-height: 1.2; margin: 17px 0 23px; }
.ap-original-work p { font-size: 18px; line-height: 1.65; max-width: 45ch; }
.ap-original-work .ap-project-identity,.ap-outcome .ap-project-identity { font-size: 13px; line-height: 1.6; }
.ap-original-work a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; margin-top: 23px; }
.ap-original-work figure { margin: 0; min-width: 0; }
.ap-original-work img { width: 100%; height: auto; max-height: 420px; object-fit: contain; border: 1px solid #dce2e5; border-radius: 12px; box-shadow: var(--ap-shadow); }
.ap-original-work figcaption { font-size: 14px; line-height: 1.65; color: var(--ap-secondary); margin-top: 14px; }

/* A quiet shared closing, without the legacy grey panel. */
body.pearl-play .ap-footer { background: #f7f6f2; color: #263345; border: 0; padding: 0 0 24px; }
.ap-footer::before { content: ''; display: block; width: min(1280px,calc(100% - 112px)); height: 1px; margin-inline: auto; background: linear-gradient(90deg,#cbddeb00,#c4d4df 20%,#dfc6d6 49%,#cbdace 80%,#cbdace00); }
.ap-footer > .wrap { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 32px 85px; padding-top: 53px; }
body.pearl-play .ap-footer h2 { font-size: 44px; line-height: 1.15; margin: 0 0 21px; letter-spacing: -.025em; }
.ap-footer-copy .eyebrow { font-size: 12px; line-height: 1.6; letter-spacing: .1em; color: var(--ap-secondary); margin-bottom: 16px; }
body.pearl-play .ap-footer-copy .ap-project-identity { font-size: 12px; line-height: 1.6; letter-spacing: .1em; color: var(--ap-secondary); margin: 0 0 16px; }
.ap-footer-copy p:not(.eyebrow) { max-width: 44ch; font-size: 17px; line-height: 1.65; color: var(--ap-secondary); }
.ap-footer-copy .contact-email { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font-size: clamp(18px,1.75vw,25px); line-height: 1.5; margin-top: 22px; overflow-wrap: anywhere; }
.ap-footer > .wrap > nav { display: flex; flex-direction: column; justify-self: end; align-self: center; gap: 2px; }
.ap-footer > .wrap > nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 1.5; }
.ap-footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 24px; color: var(--ap-secondary); font-size: 12px; line-height: 1.65; }
.ap-footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }

@media (max-width: 1199px) {
  .ap-feature { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); column-gap: 40px; }
  .ap-feature-hf { grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); }
  .ap-project-title { font-size: 38px; }
  .ap-project-summary { font-size: 18px; }
  .ap-feature-compact { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 46px; }
  .ap-feature-compact .ap-project-title { font-size: 30px; }
  .ap-case-hero { gap: 43px; }
  .ap-case-intro h1 { font-size: 54px; }
  .ap-case-layout { grid-template-columns: 145px minmax(0,1fr); gap: 40px; }
  .ap-about-hero,.ap-about-content { gap: 65px; }
}
@media (max-width: 1100px) {
  /* Keep the local colour field inside tablet page gutters. Real media is
     untouched; the wider desktop field otherwise adds horizontal scrolling. */
  .ap-feature .ap-project-media::before { left: -3%; right: -3%; }
  body.pearl-play :is(.ap-work,.ap-case,.ap-about) { width: calc(100% - 80px); }
  .ap-footer::before { width: calc(100% - 80px); }
  .ap-work-heading { margin-bottom: 52px; }
  .ap-feature { padding-bottom: 94px; }
  .ap-feature + .ap-feature { padding-top: 92px; }
  .ap-project-identity { margin-bottom: 23px; font-size: 13px; }
  .ap-project-title { font-size: 36px; }
  .ap-project-summary { font-size: 17px; }
}
@media (max-width: 900px) {
  .ap-feature { grid-template-columns: minmax(0,1fr); gap: 38px; }
  .ap-feature-copy { max-width: 670px; }
  .ap-feature-hf .ap-feature-copy,.ap-feature-hf .ap-project-media { grid-column: 1; grid-row: auto; }
  .ap-project-title { max-width: 26ch; }
  .ap-project-summary { max-width: 57ch; }
  .ap-montage { max-width: 700px; margin-inline: auto; }
  .ap-feature-compact { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 35px; }
  .ap-feature-compact .ap-project-title { font-size: 29px; }
  .ap-case-hero { gap: 34px; }
  .ap-case-intro h1 { font-size: 46px; }
  .ap-case-lede { font-size: 17px; }
  .ap-case-hero-nyu,.ap-case-hero-research { display: block; }
  .ap-case-hero-nyu .ap-case-visual,.ap-case-hero-research .ap-case-visual { margin-top: 31px; }
  .ap-case-layout { display: block; }
  body.pearl-play .ap-case-index { display: block; position: static; inset: auto; padding: 21px 0 0; margin: 0 0 69px; border: 0; border-top: 1px solid var(--ap-rule); background: transparent; box-shadow: none; }
  .ap-case-index ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 25px; }
  body.pearl-play .ap-case-index .case-jump-links a { margin: 0; padding: 10px 0; border: 0; font-size: 14px; }
  .ap-case-index > .ap-back-link { margin-top: 9px; }
  .ap-case-hero-hf { display: block; }
  .ap-case-hero-hf .ap-case-visual { max-width: 700px; margin: 30px auto 0; }
  .ap-layout-exploration { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ap-about-teaser { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 34px; }
  .ap-about-teaser figure { grid-column: 1; grid-row: 2; width: 150px; }
  .ap-about-teaser > div:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .ap-case-contents :is(ol,ul) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ap-back-contents { display: inline-flex; align-items: center; min-height: 44px; margin-top: 27px; font-size: 13px; }
}
@media (max-width: 850px) {
  body.pearl-play :is(.ap-work,.ap-case,.ap-about) { width: calc(100% - 56px); }
  .ap-footer::before { width: calc(100% - 56px); }
  .ap-about-hero { gap: 40px; }
  .ap-about-content { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 40px; }
  .ap-about-hero .ap-about-standfirst { font-size: 24px; }
  .ap-original-work { gap: 40px; }
}
@media (max-width: 767px) {
  .ap-work { padding-block: 58px 76px; }
  .ap-work-heading { margin-bottom: 45px; }
  .ap-work-heading h2 { font-size: clamp(42px,7.4vw,56px); }
  .ap-feature,.ap-feature-compact {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: 'intro' 'ending' 'media';
    gap: 27px;
    padding: 0 0 72px;
  }
  .ap-feature + .ap-feature,.ap-feature-compact + .ap-feature-compact { padding-top: 67px; }
  .ap-feature-copy { display: contents; }
  .ap-feature-intro { grid-area: intro; }
  .ap-project-media { grid-area: media; width: 100%; }
  .ap-feature-ending { grid-area: ending; margin-top: 0; }
  .ap-feature-hf .ap-feature-copy { display: contents; }
  .ap-feature-hf .ap-project-media { grid-area: media; }
  .ap-project-identity,.ap-feature-compact .ap-project-identity { font-size: 13px; margin-bottom: 20px; }
  .ap-project-title,.ap-feature-compact .ap-project-title { font-size: clamp(30px,5.6vw,38px); line-height: 1.2; max-width: 24ch; margin-bottom: 23px; }
  .ap-project-summary,.ap-feature-compact .ap-project-summary { font-size: 17px; line-height: 1.65; max-width: 57ch; }
  .ap-project-meta { max-width: 55ch; font-size: 14px; margin-bottom: 14px; }
  .ap-case-link { font-size: 14px; }
  .ap-feature .ap-project-media::before { inset: -3% -4% -1%; }
  .ap-feature-dd .ap-project-media::before { background: radial-gradient(ellipse at 52% 45%,#e4eef5,#e4eef57a 40%,#e4eef500 72%); }
  .ap-feature-hf .ap-project-media::before { background: radial-gradient(ellipse at 52% 45%,#e9eee5,#e9eee57a 40%,#e9eee500 72%); }
  .ap-montage { display: grid; grid-template-columns: minmax(0,1fr); gap: 29px; aspect-ratio: auto; max-width: none; }
  .ap-montage :is(.ap-context,.ap-detail) { position: static; inset: auto; width: 100%; height: auto; max-width: none; display: block; }
  .ap-scene-dd { padding-block: 3px; }
  .ap-scene-dd .ap-scene { width: min(100%,277px); margin-inline: auto; }
  .ap-scene-dd .ap-scene img { width: 100%; height: auto; max-height: none; }
  .ap-montage-hf .ap-detail { width: 70%; max-width: 490px; margin-inline: auto; }
  .ap-montage-hf .ap-context .ap-media-label { position: static; margin-top: 11px; padding-right: 83px; min-height: 30px; }
  .ap-montage-hf .ap-context .ap-inspect { top: 100%; bottom: auto; margin: 7px 0 0; }
  .ap-montage img,.ap-montage-hf .ap-detail img { border-radius: 10px; }
  .ap-montage-web { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .ap-montage-web .ap-detail { max-width: 350px; width: 46%; margin-left: auto; }
  .ap-montage-nyu { grid-template-columns: minmax(0,1fr) minmax(0,.62fr); max-width: 440px; gap: 18px; }
  .ap-montage-research .ap-report { max-width: 320px; margin-top: 30px; }
  .ap-connector { display: none; }
  .ap-media-label { font-size: 14px; line-height: 1.65; margin-top: 11px; }
  .ap-state-label { font-size: 14px; }
  .ap-mini-pair { gap: 16px; }
  .ap-view-pair { max-width: 420px; gap: 18px; }
  .ap-view-pair img { max-height: 430px; }
  .ap-recruitment .ap-columns { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .ap-recruitment .ap-columns h3 { font-size: 22px; }
  .ap-recruitment .ap-state-label { font-size: 13px; margin-bottom: 8px; }
  .ap-change-arrow { padding: 0; transform: rotate(90deg); width: 22px; height: 22px; }
  .ap-report-detail { max-width: 320px; }
  .ap-case-hero,.ap-case-hero:is(.ap-case-hero-dd,.ap-case-hero-hf,.ap-case-hero-web,.ap-case-hero-nyu,.ap-case-hero-research) { display: grid; grid-template-columns: minmax(0,1fr); gap: 29px; padding: 14px 0 67px; }
  .ap-case-intro .ap-back-link { font-size: 13px; margin-bottom: 15px; }
  .ap-case-intro > .eyebrow,.ap-case-identity { font-size: 13px; margin-bottom: 18px; }
  .ap-case-intro h1 { max-width: 24ch; font-size: clamp(34px,6vw,44px); line-height: 1.13; }
  .ap-case-lede { margin-top: 21px; font-size: 17px; line-height: 1.65; }
  .ap-case-meta { margin-top: 23px; gap: 20px; }
  .ap-case-meta dt,.ap-case-meta dd { font-size: 14px; line-height: 1.6; }
  .ap-case-visual,.ap-case-hero-hf .ap-case-visual,.ap-case-hero-nyu .ap-case-visual,.ap-case-hero-research .ap-case-visual { margin-top: 0; }
  .ap-case-visual .ap-figure img { max-height: none; }
  .ap-figure[data-orientation="portrait"] img { max-height: 680px; }
  .ap-case-contents { margin-bottom: 69px; padding-top: 22px; }
  .ap-case-contents :is(ol,ul) { gap: 3px 23px; }
  .ap-case-contents a { font-size: 14px; min-height: 48px; }
  .ap-chapter { margin-bottom: 78px; }
  .ap-chapter > header { padding-top: 23px; margin-bottom: 24px; }
  .ap-chapter-number { font-size: 12px; margin-bottom: 16px; }
  .ap-chapter h2 { font-size: 31px; line-height: 1.2; }
  .ap-status { font-size: 13px; margin-bottom: 23px; }
  .ap-prose p,.ap-prose li { font-size: 17px; line-height: 1.7; }
  .ap-prose p + p { margin-top: 22px; }
  .ap-prose h3 { font-size: 24px; }
  .ap-evidence { margin-top: 28px; }
  .ap-compare,.ap-evidence-pair,.ap-compare[data-count="3"] { grid-template-columns: minmax(0,1fr); gap: 30px; padding: 20px 0; }
  .ap-hand-comparison { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  :is(.ap-phone-pair,.ap-three-phones) .ap-figure { width: 100%; max-width: 350px; margin-inline: auto; }
  :is(.ap-phone-pair,.ap-three-phones,.ap-confirm-pair) .ap-figure img { max-height: none; width: 100%; }
  .ap-layout-exploration { gap: 25px; }
  .ap-caption,.ap-caption p { font-size: 14px; line-height: 1.65; }
  .ap-columns,.ap-explanation:not(.ap-recruitment) > .ap-columns:has(>div:nth-child(3)) { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .ap-explanation { padding-left: 17px; margin-top: 25px; }
  .ap-explanation p { font-size: 16px; line-height: 1.7; }
  .ap-rule-summary { padding-block: 22px; }
  .ap-rule-summary dl { grid-template-columns: minmax(0,1fr); gap: 25px; }
  .ap-outcome { padding: 26px 0 65px; }
  .ap-outcome h2 { font-size: 28px; }
  .ap-outcome p { font-size: 17px; line-height: 1.7; }
  .ap-next-case { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 27px; padding: 29px 0 68px; }
  .ap-next-case > a:not(.ap-next-link) { font-size: 13px; }
  .ap-next-link { gap: 20px; max-width: none; }
  .ap-next-link img { flex-basis: 118px; width: 118px; height: 94px; }
  .ap-next-link > div { flex-basis: 118px; width: 118px; }
  .ap-next-link small { font-size: 13px; }
  .ap-next-link strong { font-size: 23px; }
  .ap-about { padding-block: 35px 78px; }
  .ap-about-hero { display: flex; flex-direction: column; align-items: stretch; gap: 35px; }
  .ap-about-hero h1 { font-size: 54px; margin-block: 16px 25px; }
  .ap-about-hero .ap-about-standfirst { font-size: 24px; line-height: 1.5; }
  .ap-about-teaser { display: flex; flex-direction: column; align-items: stretch; gap: 27px; padding-block: 13px 75px; }
  .ap-about-teaser h2 { font-size: 37px; }
  .ap-about-teaser p:not(.ap-project-identity) { font-size: 17px; line-height: 1.7; }
  .ap-about-teaser figure { width: 160px; }
  .ap-portrait { width: 100%; max-width: 280px; margin-inline: auto; }
  .ap-about-content { display: block; margin-top: 72px; }
  .ap-about-body h2 { font-size: 32px; }
  .ap-about-body p { font-size: 17px; line-height: 1.7; }
  .ap-background { padding-top: 28px; margin-top: 52px; border-top: 1px solid var(--ap-rule); }
  .ap-background h2 { font-size: 28px; }
  .ap-original-work { display: flex; flex-direction: column; align-items: stretch; gap: 31px; margin-top: 74px; padding-top: 28px; }
  .ap-original-work h2 { font-size: 31px; }
  .ap-original-work p { font-size: 17px; line-height: 1.7; max-width: 57ch; }
  .ap-original-work img { max-height: none; }
  .ap-footer > .wrap { display: block; padding-top: 38px; }
  body.pearl-play .ap-footer h2 { font-size: 39px; margin-bottom: 20px; }
  .ap-footer-copy p:not(.eyebrow) { font-size: 16px; max-width: 38ch; }
  .ap-footer-copy .contact-email { font-size: clamp(16px,4.5vw,22px); gap: 13px; margin-top: 21px; }
  .ap-footer > .wrap > nav { width: 100%; justify-self: start; align-items: flex-start; margin-top: 17px; }
  .ap-footer > .wrap > nav a { font-size: 13px; }
  .ap-footer-bottom { flex-wrap: wrap; gap: 5px 20px; padding-top: 27px; font-size: 11px; }
}
@media (max-width: 600px) {
  body.pearl-play :is(.ap-work,.ap-case,.ap-about) { width: calc(100% - 40px); }
  .ap-footer::before { width: calc(100% - 40px); }
  .ap-feature { gap: 25px; }
  .ap-project-title,.ap-feature-compact .ap-project-title { font-size: 32px; }
  .ap-project-identity::after { width: 30px; }
  .ap-case-intro h1 { font-size: 37px; }
  .ap-layout-exploration { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 18px; }
}
@media (max-width: 359px) {
  body.pearl-play :is(.ap-work,.ap-case,.ap-about) { width: calc(100% - 32px); }
  .ap-footer::before { width: calc(100% - 32px); }
  .ap-work-heading h2 { font-size: 39px; }
  .ap-project-title,.ap-feature-compact .ap-project-title { font-size: 30px; }
  .ap-project-identity { letter-spacing: .075em; }
  .ap-project-identity::after { display: none; }
  .ap-case-intro h1 { font-size: 33px; }
  .ap-case-contents :is(ol,ul) { grid-template-columns: minmax(0,1fr); }
  .ap-next-link img { flex-basis: 96px; width: 96px; height: 84px; }
  .ap-next-link > div { flex-basis: 96px; width: 96px; }
  .ap-next-link strong { font-size: 21px; }
  .ap-case-index ol { grid-template-columns: minmax(0,1fr); }
}
@media (hover: none) { .ap-inspect { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ap-feature :is(.ap-case-link,.media-zoom),.ap-inspect { transition: none; }
}
@media print {
  .ap-case-index,.ap-case-contents,.ap-back-contents,.ap-next-case,.ap-footer { display: none; }
  body.pearl-play :is(.ap-work,.ap-case,.ap-about) { width: 100%; }
  .ap-case-layout { display: block; }
  .ap-montage img,.ap-figure img { box-shadow: none; }
}

/* Homepage previews introduce the case; detailed inspection belongs inside it. */
.page-home .ap-static-media { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; min-height:0; cursor:default; }
.page-home .ap-preview-static .ap-media-label { padding-right:0; }

/* Approved Aurora Flow (B), integrated from the selected mesh study.
   Palette, authentic project pixels and the accepted motion controller are retained. */
body.pearl-play {
  --mesh-paper: #f7f6f2;
  --mesh-white: #fffefb;
  --mesh-blue: #cbddeb;
  --mesh-pink: #efd4e2;
  --mesh-sage: #cbdace;
  --mesh-ink: #263345;
  --mesh-plum: #865d76;
  overflow-x: clip;
}
body.pearl-play :is(.pearl-hero,.ap-feature,.ap-case-hero,.ap-about-hero,.ap-chapter > header,.ap-next-case,.ap-about-teaser,.ap-original-work,.ap-footer) {
  position: relative;
  isolation: isolate;
}
body.pearl-play :is(.pearl-hero,.ap-feature,.ap-case-hero,.ap-about-hero,.ap-chapter > header,.ap-next-case,.ap-about-teaser,.ap-original-work)::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
body.pearl-play .pearl-scene-wrap { position: relative; z-index: 1; }
body.pearl-play .ap-footer::before { position: relative; z-index: 1; }
body.pearl-play :is(.ap-next-link,.ap-explanation,.ap-background) { position: relative; }
body.pearl-play :is(.ap-project-media,.ap-case-visual) { min-width: 0; }
body.pearl-play .ap-case-index { background-color: #f7f6f2e8; }
body.pearl-play .site-header { background: #f7f6f2b0; backdrop-filter: blur(18px); }
body.pearl-play .pearl-hero::after {
  inset: -100px 0 auto;
  height: 660px;
  background:
    radial-gradient(ellipse 48% 42% at 4% 19%, #cbddebf2, transparent 86%),
    radial-gradient(ellipse 45% 54% at 57% 25%, #efd4e2c4, transparent 79%),
    radial-gradient(ellipse 35% 42% at 99% 51%, #cbdaceed, transparent 85%),
    radial-gradient(ellipse 38% 32% at 80% 5%, #cbddeba0, transparent 86%);
  mask-image: linear-gradient(#000 0%,#000 34%,#0009 57%,transparent 84%);
}
body.pearl-play .ap-feature::after {
  inset: 4% 0 11%;
  border-radius: 47% 53% 50% 50% / 58% 46% 54% 42%;
  background:
    radial-gradient(ellipse 52% 78% at 9% 70%, #efd4e2db, transparent 79%),
    radial-gradient(ellipse 49% 64% at 52% 48%, #cbddebf2, transparent 85%),
    radial-gradient(ellipse 42% 74% at 91% 18%, #cbdaceed, transparent 79%);
  transform: rotate(-9deg);
  filter: blur(24px);
  mask-image: radial-gradient(ellipse at center,#000 30%,#000a 58%,transparent 76%);
}
body.pearl-play .ap-feature:nth-child(even)::after { transform: rotate(9deg) scaleX(-1); }
body.pearl-play .ap-project-media::before { opacity: 0; }
body.pearl-play :is(.ap-case-hero,.ap-about-hero)::after {
  inset: -7% 0 1%;
  background:
    radial-gradient(ellipse 42% 65% at 4% 63%, #efd4e2d1, transparent 84%),
    radial-gradient(ellipse 52% 49% at 52% 40%, #cbddebf2, transparent 82%),
    radial-gradient(ellipse 40% 66% at 99% 5%, #cbdacee8, transparent 84%);
  transform: rotate(-9deg);
  filter: blur(24px);
  border-radius: 48%;
  mask-image: radial-gradient(ellipse,#000 15%,#000b 57%,transparent 78%);
}
body.pearl-play .ap-chapter > header { border-top-color: transparent; padding-top: 30px; }
body.pearl-play .ap-chapter > header::after {
  inset: -18px -3% -12px -8%;
  background:
    radial-gradient(ellipse at 12% 70%,#efd4e2a0,transparent 64%),
    radial-gradient(ellipse at 80% 15%,#cbddebb0,#cbdace35 45%,transparent 78%);
  mask-image: radial-gradient(ellipse at 40% 50%,#000b 5%,transparent 73%);
  border-radius: 0;
  filter: blur(20px);
}
body.pearl-play .ap-chapter-number { display: inline-flex; align-items: center; gap: 12px; }
body.pearl-play .ap-chapter-number::after { content:''; width:40px; height:1px; background:#865d7655; }
body.pearl-play .ap-evidence-pair { padding: 28px; border: 1px solid #fffefba6; border-radius: 28px; background: radial-gradient(ellipse at 7% 100%,#efd4e26b,transparent 63%),radial-gradient(ellipse at 100% 0%,#cbddeb85,transparent 65%),#fffefb85; }
body.pearl-play .ap-explanation { padding: 27px; border: 0; border-radius: 24px 44px 24px 24px; background: radial-gradient(ellipse at 0 100%,#efd4e28a,transparent 80%),radial-gradient(ellipse at 100% 0,#cbddeb9c,transparent 75%),#fffefb99; }
body.pearl-play :is(.ap-about-teaser,.ap-original-work)::after {
  inset: 0 -5% 10%; border-radius: 50%;
  background: radial-gradient(ellipse at 25% 70%,#cbdaceb8,transparent 65%),radial-gradient(ellipse at 70% 30%,#cbddebb8,#efd4e26b 50%,transparent 80%);
  mask-image: radial-gradient(ellipse,#0009 15%,transparent 75%);
}
body.pearl-play .ap-next-link {
  max-width: none; padding: 34px 38px; border-radius: 28px;
  border: 1px solid #fffefbcc;
  background: radial-gradient(ellipse 40% 150% at 0% 100%,#efd4e2d1,transparent 85%),radial-gradient(ellipse 50% 150% at 60% 0%,#cbddebed,transparent 84%),radial-gradient(ellipse at 100% 100%,#cbdacec4,transparent 80%),#fffefb85;
  box-shadow: 0 10px 32px #26334508;
  transition: box-shadow 220ms ease, transform 220ms ease;
}
body.pearl-play .ap-next-link:hover { box-shadow: 0 14px 40px #26334510; transform: translateY(-2px); }
body.pearl-play .ap-footer {
  background: radial-gradient(ellipse 48% 120% at 0% 80%,#efd4e2cf,transparent 85%),radial-gradient(ellipse 65% 115% at 61% 25%,#cbddebf0,transparent 85%),radial-gradient(ellipse 37% 120% at 100% 100%,#cbdacee8,transparent 90%),#f7f6f2;
  border-radius: 46px 46px 0 0;
  padding-top: 12px;
}
body.pearl-play .ap-footer::before { opacity: 0; }
@media (max-width: 767px) {
body.pearl-play :is(.ap-feature,.ap-case-hero,.ap-about-hero)::after { inset:-10px -18px 0; }
body.pearl-play .pearl-hero::after { height:650px; background-size:165% 100%; background-position:48% 0; mask-image:linear-gradient(#000 0%,#0008 54%,transparent 86%); }
body.pearl-play .ap-feature::after { transform:none; background-size:150% 100%; background-position:40% 0; }
body.pearl-play .ap-feature:nth-child(even)::after { transform:scaleX(-1); }
body.pearl-play :is(.ap-case-hero,.ap-about-hero)::after { transform:none; background-size:135% 100%; }
body.pearl-play :is(.ap-feature,.ap-case-hero,.ap-about-hero)::after { inset:0 0 4%; }
body.pearl-play :is(.ap-evidence-pair,.ap-explanation) { padding:20px; }
body.pearl-play .ap-next-link { padding:23px 20px; border-radius:24px; gap:18px; }
body.pearl-play .ap-next-link > div { flex-basis:90px; width:90px; }
body.pearl-play .ap-next-link > div img { height:85px; }
body.pearl-play .ap-next-link strong { font-size:22px; }
body.pearl-play .ap-footer { border-radius:30px 30px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
body.pearl-play .ap-next-link { transition:none; }
body.pearl-play .ap-next-link:hover { transform:none; }
}

/* Keep tall decorative colour fields inside compact and tablet layouts.
   Desktop composition and the approved phone layout retain their appearance. */
@media (max-width: 1199px) {
  body.pearl-play :is(.ap-feature,.ap-case-hero,.ap-about-hero)::after { transform: none; }
  body.pearl-play .ap-feature:nth-child(even)::after { transform: scaleX(-1); }
}