:root {
  --process-bg: #f4f5f2;
  --process-ink: #192b4e;
  --process-muted: rgba(25, 43, 78, .65);
  --process-gutter: clamp(20px, 4vw, 64px);
  --process-max: 1500px;
}

body.process-page { margin: 0; overflow-x: clip; background: var(--process-bg); color: var(--process-ink); }
.process-page *, .process-page *::before, .process-page *::after { box-sizing: border-box; }
.process-page img, .process-page video { display: block; max-width: 100%; }
.process-topbar-inner { padding-inline: var(--process-gutter); }
.process-wrap, .process-wide { width: min(calc(100% - (var(--process-gutter) * 2)), var(--process-max)); margin-inline: auto; }
.process-kicker, .process-index, .process-solar figcaption, .process-comparison figcaption {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.process-kicker, .process-index { margin: 0 0 24px; color: var(--process-muted); font-size: .76rem; }

.process-intro { padding: clamp(84px, 11vw, 165px) 0 clamp(120px, 16vw, 240px); }
.process-intro h1 { max-width: 9ch; margin: 0; font-size: clamp(4.3rem, 11vw, 10rem); font-weight: 700; letter-spacing: -.075em; line-height: .82; text-transform: uppercase; }
.process-standfirst { max-width: 650px; margin: clamp(44px, 6vw, 86px) 0 0 auto; font-family: "Source Sans 3", sans-serif; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.38; }

.process-chapter { padding-bottom: clamp(130px, 17vw, 250px); }
.process-heading { margin-bottom: clamp(44px, 6vw, 86px); }
.process-heading h2, .process-commission h2 { max-width: 12ch; margin: 0; font-size: clamp(3rem, 7vw, 7.2rem); font-weight: 700; letter-spacing: -.067em; line-height: .88; text-transform: uppercase; }
.process-copy { width: min(calc(100% - (var(--process-gutter) * 2)), 640px); margin: clamp(58px, 8vw, 115px) auto 0; }
.process-copy p:not(.process-kicker) { margin: 0; font-family: "Source Sans 3", sans-serif; font-size: 1.25rem; line-height: 1.5; }
.process-copy p:not(.process-kicker) + p:not(.process-kicker) { margin-top: 1.2em; }

.process-solar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); }
.process-solar figure, .process-comparison figure { margin: 0; }
.process-solar img { width: 100%; height: auto; }
.process-solar figcaption, .process-comparison figcaption { margin-top: 11px; color: var(--process-muted); font-size: .66rem; }
.process-motion { width: min(calc(100% - (var(--process-gutter) * 2)), 1200px); }
.process-motion video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #111; }
.process-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); }
.process-comparison img, .process-comparison video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #111; }

.process-commission { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(48px, 8vw, 140px); border-top: 1px solid rgba(25, 43, 78, .22); padding: clamp(70px, 9vw, 130px) 0 clamp(110px, 14vw, 190px); }
.process-commission > .process-kicker { grid-column: 1 / -1; margin-bottom: 0; }
.process-commission h2 { font-size: clamp(2.7rem, 5.3vw, 5.7rem); }
.process-commission-copy { align-self: end; max-width: 520px; }
.process-commission-copy p { margin: 0; font-family: "Source Sans 3", sans-serif; font-size: 1.16rem; line-height: 1.48; }
.process-commission-copy p + p { margin-top: 1.2em; }
.process-commission-copy .process-commission-note { color: var(--process-muted); font-size: 1rem; line-height: 1.45; }
.process-commission-copy a { display: inline-block; margin-top: 38px; color: var(--process-ink); font: 600 .75rem/1.3 ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.process-commission-copy a:hover, .process-commission-copy a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.process-established { margin-top: 0; padding-bottom: clamp(100px, 13vw, 180px); }

@media (max-width: 699px) {
  :root { --process-gutter: 19px; }
  .process-intro { padding: 62px 0 110px; }
  .process-intro h1 { font-size: clamp(4rem, 19vw, 6rem); }
  .process-standfirst { margin-top: 38px; font-size: 1.28rem; }
  .process-chapter { padding-bottom: 112px; }
  .process-heading { margin-bottom: 34px; }
  .process-heading h2, .process-commission h2 { font-size: clamp(2.8rem, 13vw, 4.6rem); }
  .process-solar { display: flex; gap: 12px; overflow-x: auto; width: 100%; padding: 0 var(--process-gutter) 5px; scroll-padding-left: var(--process-gutter); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .process-solar::-webkit-scrollbar { display: none; }
  .process-solar figure { flex: 0 0 86%; scroll-snap-align: start; }
  .process-motion { width: 100%; }
  .process-motion video { aspect-ratio: 4 / 5; object-fit: cover; }
  .process-copy { margin-top: 50px; }
  .process-copy p:not(.process-kicker) { font-size: 1.125rem; line-height: 1.47; }
  .process-comparison { width: 100%; grid-template-columns: 1fr; gap: 28px; }
  .process-comparison figcaption { padding-inline: var(--process-gutter); }
  .process-commission { display: block; width: calc(100% - (var(--process-gutter) * 2)); padding: 58px 0 104px; }
  .process-commission h2 { margin-top: 34px; font-size: clamp(2.65rem, 11vw, 3.7rem); }
  .process-commission-copy { margin-top: 44px; }
  .process-established { padding-bottom: 104px; }
}