/* One continuous sheet: the original four panels uncover the About beneath. */
.p-about { display: flex; flex-direction: column; gap: 0; padding-block: var(--space-heading); container: about / inline-size; isolation: isolate; overflow: clip; }
.p-about__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; color: var(--muted); font-size: .8125rem; line-height: 1.8; letter-spacing: .08em; }
.p-about__heading > .p-about__title { color: var(--ink); font: 400 var(--type-section-label)/1.2 var(--latin); letter-spacing: -.025em; }
.p-about__canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; visibility: hidden; }
.p-about__canvas canvas { display: block; width: 100%; height: 100%; }
.p-about__heading, .p-about__body, .p-about__footer { position: relative; z-index: 1; }
.p-about [data-about-line] { display: inline-block; }
.p-about[data-reveal="webgl"] .p-about__canvas { visibility: visible; }
.p-about[data-reveal="webgl"] [data-about-line] { opacity: 0; }
.p-about__body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr); align-items: center; gap: 0; max-width: none; padding: 0; margin-block: var(--space-heading); flex: 1; }
.p-about__copy { margin: 0; font: 500 clamp(2.25rem, 6.25cqw, 8rem)/1.6 var(--sans); letter-spacing: .015em; }
.p-about__copy > span { display: block; white-space: nowrap; }
.p-about__copy > span:last-child { padding-left: 1em; }
.p-about__prose { justify-self: center; writing-mode: vertical-rl; text-orientation: mixed; inline-size: 20em; margin: 0; font: 400 1.0625rem/2.05 var(--sans); letter-spacing: .06em; }
.p-about__prose p + p { margin: 0; margin-block-start: 1.25rem; }
.p-about__footer { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.p-about__wordmark { font: 400 1.5rem/1.5 var(--latin); letter-spacing: .045em; }
.p-about__wordmark > span { display: block; margin-top: 3px; color: var(--muted); font: 400 .75rem/1.5 var(--sans); letter-spacing: .12em; }
.p-about__links { display: flex; gap: 32px; }
.p-about__links a { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; min-height: 44px; border-bottom: 1px solid #252c2d65; font-size: .875rem; line-height: 1.6; }

.p-opening.is-enhanced { position: relative; height: var(--opening-height); }
.p-opening.is-enhanced .p-opening__stage { position: sticky; top: var(--opening-top, 0px); isolation: isolate; min-height: var(--opening-stage-height); }
.p-opening.is-enhanced .p-about { min-height: var(--opening-stage-height); }
.p-opening.is-enhanced .p-hero { position: absolute; top: 0; left: 0; pointer-events: none; }
.p-opening.is-enhanced .p-panels { background: transparent; }
.p-opening.is-enhanced .p-panel { pointer-events: auto; }
.p-opening.is-enhanced .p-hero__scroll { pointer-events: auto; }
.p-opening.is-enhanced .p-hero__overlay,
.p-opening.is-enhanced .p-hero__scroll { opacity: var(--opening-label-opacity, 1); }
.p-opening.is-transitioning .p-hero__overlay,
.p-opening.is-transitioning .p-hero__scroll { visibility: hidden; pointer-events: none; }
.p-opening.is-enhanced:not(.is-about-visible) .p-about { pointer-events: none; }
.p-opening.is-about-visible .p-hero { visibility: hidden; }
.p-opening.is-about-visible .p-hero__scroll-arrow { animation-play-state: paused; }

/* One opaque mobile sheet owns the portrait canvas, native names and all gaps.
   Only its bottom edge uncovers About; clip the departing sheet at the header. */
.p-opening.is-mobile-reveal .p-opening__stage { overflow: clip; }
.p-opening.is-mobile-reveal .p-hero { min-height: var(--opening-stage-height); background: var(--paper); }
.p-opening.is-mobile-reveal .p-panels { background: var(--paper); }
.p-opening.is-mobile-reveal .p-poster.p-panels { --stage-height: max(36rem, var(--opening-mobile-height, calc(100svh - 5.25rem))); }

@media (max-width: 800px) {
  .p-about { padding-block: var(--space-heading); }
  .p-about__heading > .p-about__title { font-size: 1.75rem; }
  .p-about__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-content); margin-block: var(--space-heading); }
  .p-about__copy { font-size: min(3.25rem, 10.5cqw); line-height: 1.6; }
  .p-about__prose { justify-self: start; writing-mode: horizontal-tb; inline-size: auto; font-size: 1rem; line-height: 1.95; }
  .p-about__prose p + p { margin-block-start: 1rem; }
  .p-about__footer { align-items: start; flex-wrap: wrap; gap: 24px; }
  .p-about__links { gap: 24px; }
  .p-about__links a { gap: 20px; }
}
/* Large text also switches to the readable stacked composition. */
@container about (max-width: 40rem) {
  .p-about__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .p-about__copy { font-size: min(3.25rem, 10.5cqw); line-height: 1.6; }
  .p-about__prose { justify-self: start; writing-mode: horizontal-tb; inline-size: auto; font-size: 1rem; line-height: 1.95; }
  .p-about__prose p + p { margin-block-start: 1rem; }
  .p-about__footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce), print {
  .p-about[data-reveal="webgl"] .p-about__canvas { display: none; }
  .p-about[data-reveal="webgl"] [data-about-line] { opacity: 1; }
  .p-opening.is-enhanced { height: auto; }
  .p-opening.is-enhanced .p-opening__stage { position: static; min-height: 0; }
  .p-opening.is-enhanced .p-hero { position: relative; visibility: visible; pointer-events: auto; transform: none !important; min-height: 0; }
  .p-opening.is-enhanced .p-panel { transform: none !important; }
  .p-opening.is-enhanced .p-about { min-height: 0; pointer-events: auto; }
  .p-opening.is-enhanced .p-hero__overlay, .p-opening.is-enhanced .p-hero__scroll { opacity: 1; visibility: visible; }
}