/* Process page, 2026-10-28: the Brand Mass Metric section (replaces the
   Brand Gravity Ladder, canon v6.2 section 4) and the station copy that
   now fills Groundwork, The Course and The Return. Loaded after
   styles-v3.min.css; overrides only what the new markup needs. */

section.process-ladder.process-mass {
  border-top: 1px solid var(--process-rule, rgba(236, 233, 225, 0.22));
  background: #090909 !important;
}

.process-mass .process-kicker { margin-bottom: 28px; }

.process-mass .process-ladder__head h2 {
  font-size: clamp(48px, 6.2vw, 104px);
  line-height: 0.92;
}

.process-mass .process-ladder__head h2 em {
  font-style: italic;
  color: var(--c-cream, #c9b894);
}

.process-mass .process-ladder__head > p:last-child { margin-top: 0; }

.process-mass .process-ladder__names {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin: 0;
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid rgba(236, 233, 225, 0.14);
}

.process-mass .process-ladder__names li {
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.process-mass__q {
  display: block;
  font-family: var(--f-body, 'Inter', system-ui, sans-serif);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(236, 233, 225, 0.68);
}

.process-mass__top {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: 14px clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid rgba(236, 233, 225, 0.14);
}

.process-mass__reading {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--c-bone, #ece9e1);
}

.process-mass__reading strong {
  color: var(--c-rust, #ef322d);
  font-weight: 500;
}

.process-mass__note {
  grid-column: 2;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.62);
}

@media (max-width: 1080px) {
  .process-mass .process-ladder__names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .process-mass .process-ladder__names { grid-template-columns: 1fr; }
  .process-mass__top { grid-template-columns: 1fr; }
  .process-mass__note { grid-column: auto; }
}

/* The Course: two stations now that the filed Route is off the page. */
@media (min-width: 1081px) {
  .process-course__beat--craft { grid-column: span 7; }
  .process-course__beat--contact { grid-column: span 5; }
}

/* The Return: each station's line and body sit beside its signal. */
.process-return__text { min-width: 0; }

.process-return__ledger .process-return__text h3 {
  max-width: none;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-bone, #ece9e1);
}

.process-return__text .process-return__q {
  margin: 22px 0 0;
  max-width: 30ch;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--c-ink, #0a0a0a);
}

.process-return__text p:not(.process-return__q) {
  margin: 16px 0 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: rgba(10, 10, 10, 0.8);
}

.process-return__ledger li::after { top: clamp(64px, 7vw, 112px); }

/* Close: the canon close line above the CTA. */
.process-close__line {
  max-width: 24ch;
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(10, 10, 10, 0.82);
}

/* Phase line on the light Course section reads in ink, not bone. */
.process-phase--course .process-phase__head > p:not(.process-phase__number):last-child {
  color: rgba(10, 10, 10, 0.72);
}

/* Note row without a label: the note runs the full width. */
.process-mass__top--note { grid-template-columns: 1fr; }
.process-mass__top--note .process-mass__note { grid-column: auto; }
.process-mass .process-ladder__head h2 { text-wrap: balance; }

/* Process hero: the emphasis word is cream italic with no marker swipe (Ryan, Oct 20: the highlighter looked very bad; canon s9: cream italic for the single emphasis word). */
.process-hero__copy h1 em { color: var(--c-cream, #C9B894); background: none; }
.process-hero__copy h1 em::before, .process-hero__copy h1 em::after { content: none; display: none; }