body { margin: 0; background: #fff; color: #0c192c; }
a { color: inherit; text-decoration: none; }

.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: 7%;
  padding: clamp(24px, 2.4vw, 38px) var(--uo-space) clamp(40px, 4vw, 64px);
  background: linear-gradient(90deg, #fff 49%, #000 64%);
}
.about-copy > .uo-eyebrow { margin-bottom: 32px; font-size: 16px; }
.about-copy h1 {
  margin: 0;
  font-size: clamp(52px, 6.2vw, 100px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.065em;
}
.about-copy h1 span { color: var(--uo-blue); }
.about-lead {
  max-width: 26ch;
  margin: 32px 0 18px;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.3;
  letter-spacing: -.03em;
  text-wrap: pretty;
}
.about-description {
  max-width: 39ch;
  margin: 0;
  color: var(--uo-secondary);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
.about-copy .uo-text-link { margin-top: 24px; }

/* The complete artworks sit upright on the black side of one banner. */
.about-work { min-width: 0; margin: 0; }
.about-composition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 18px;
  width: min(100%, 420px);
  margin-left: auto;
}
.about-banner {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  padding-bottom: 8px;
}
.about-symbol { display: block; width: 60%; height: auto; filter: brightness(0) invert(1); }
.about-print { display: block; width: 100%; height: auto; }
.about-work figcaption { margin-top: 24px; color: #c7c7c7; font-size: 12px; line-height: 1.5; text-align: right; }

.about-approach {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 7%;
  margin: clamp(40px, 4vw, 64px) var(--uo-space) 0;
  padding-block: clamp(36px, 4vw, 64px) clamp(56px, 6vw, 96px);
  border-top: 1px solid var(--uo-line);
}
.about-approach .uo-eyebrow { margin-bottom: 24px; }
.about-approach h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.045em;
}
.about-approach-copy { align-self: end; max-width: 45ch; }
.about-approach-copy p { margin: 0; color: var(--uo-secondary); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.about-approach-copy .uo-text-link { margin-top: 16px; }

/* Tablets take the stacked layout too, so the desktop fade never splits a narrow banner. */
@media (max-width: 1024px) {
  .about-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 18px 0 0; background: white; }
  .about-copy { padding-inline: var(--uo-space); }
  .about-copy > .uo-eyebrow { margin-bottom: 24px; font-size: 15px; }
  .about-copy h1 { font-size: clamp(48px, 11.7vw, 78px); }
  .about-lead { margin-top: 24px; }
  .about-copy .uo-text-link { margin-top: 16px; }
  .about-work { padding: 48px var(--uo-space) 32px; background: #000; }
  .about-composition { margin-inline: auto; }
  .about-work figcaption { margin-top: 20px; font-size: 11px; }
  .about-approach { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about-approach .uo-eyebrow { margin-bottom: 18px; }
  .about-approach h2 { font-size: clamp(28px, 7.1vw, 42px); }
}