/* Process page finish, design pass 2026-11-01. Owned by the Process builder.
   Loads after finish.css on process.html only. The Brand Mass Metric section
   (section.mass-a, process-mass-metric.css/js) is protected and not restyled here.

   The page reads as a sequence: a set photograph opens it, the Metric explains how
   we judge, then three phases each open in a way that fits their job. Groundwork is
   written (type only, ink). The Course opens on the work itself (a full frame from
   set, then bone). The Return sets the crew beside what comes back. Labels are quiet
   mono, grounds are ink or bone, and the only accent left is the hero's cream word.
   Every selector stays outside section.mass-a. */

body[data-page="process"] {
  /* The shared system scale (fix list 2026-11-01): d1 for the page H1, d2 for the
     phase titles and the close, one beat step between d2 and d3, d3 for subheads.
     The fallbacks equal the shared values until finish.css carries the tokens. */
  --p-d1: var(--d1, clamp(48px, 6.6vw, 96px));
  --p-d2: var(--d2, clamp(36px, 4.4vw, 64px));
  --p-beat: clamp(28px, 2.9vw, 44px);
  --p-d3: var(--d3, clamp(24px, 2vw, 32px));
  --p-lead: 20px;
  --p-body: 17px;
  --p-track-xl: -0.022em; /* 64px and up */
  --p-track-l: -0.015em;  /* 32px to 63px */
  --p-lh-display: 1.04;
  --p-label: rgba(236, 233, 225, 0.64);
  --p-label-bone: rgba(10, 10, 10, 0.64);
  /* One spacing rhythm that scales with the viewport. */
  --p-sec: clamp(96px, 10vw, 168px);
  --p-head: clamp(56px, 6vw, 104px);
  --p-gap: clamp(56px, 6vw, 104px);
  --p-col: clamp(20px, 2.4vw, 40px);
  --p-ink-text: rgba(10, 10, 10, 0.76);
  --p-ink-quiet: rgba(10, 10, 10, 0.62);
}

/* ---------- Shared type roles ---------- */
body[data-page="process"] .process-phase__number,
body[data-page="process"] .process-phase .process-beat__index,
body[data-page="process"] .process-return__ledger .process-return__text h3 {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p-label);
}

/* The page-name kicker repeats the nav and sits over the H1 as an eyebrow: hidden
   (declared ornament removal, fix list 2026-11-01). */
body[data-page="process"] .process-hero .process-kicker { display: none; }

body[data-page="process"] .process-phase__head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--p-d2);
  font-weight: 500;
  line-height: var(--p-lh-display);
  letter-spacing: var(--p-track-l);
  color: inherit;
}

body[data-page="process"] .process-phase__head > p:not(.process-phase__number):last-child {
  grid-column: auto;
  max-width: 36ch;
  text-wrap: balance;
  margin: 0;
  font-size: var(--p-lead);
  line-height: 1.45;
  color: var(--c-bone-2);
}

body[data-page="process"] .process-beat h3,
body[data-page="process"] .process-course__beat h3 {
  max-width: 22ch;
  text-wrap: balance;
  margin: 18px 0 0;
  font-family: var(--f-display);
  font-size: var(--p-beat);
  font-weight: 500;
  line-height: var(--p-lh-display);
  letter-spacing: var(--p-track-l);
}

body[data-page="process"] .process-hero__support,
body[data-page="process"] .process-phase__head > p:last-child,
body[data-page="process"] .process-beat p,
body[data-page="process"] .process-course__beat > p:last-child,
body[data-page="process"] .process-return__text p,
body[data-page="process"] .process-close__line { text-wrap: pretty; }

body[data-page="process"] .process-beat p,
body[data-page="process"] .process-course__beat > p:last-child {
  max-width: 46ch;
  margin: 0;
  font-size: var(--p-body);
  line-height: 1.55;
  color: var(--c-bone-2);
}

/* The closing line of a beat is a sentence to read, not a mono label. */
body[data-page="process"] .process-beat strong {
  display: block;
  max-width: 34ch;
  margin-top: 28px;
  font-family: var(--f-display);
  font-size: var(--p-lead);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-bone);
}

/* ---------- Opening: one line, one frame ---------- */
body[data-page="process"] .process-hero {
  min-height: 0;
  padding: clamp(124px, 15vh, 164px) 0 0 !important;
}

body[data-page="process"] .process-hero__grid { display: block; }

body[data-page="process"] .process-hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

body[data-page="process"] .process-hero__copy h1 {
  max-width: none;
  margin: 0;
  font-size: var(--p-d1);
  font-weight: 500;
  line-height: var(--p-lh-display);
  letter-spacing: var(--p-track-xl);
}

/* The one emphasis word on the page: system cream for color and fill. */
body[data-page="process"] .process-hero__copy h1 em {
  color: #C9B894 !important;
  -webkit-text-fill-color: #C9B894 !important;
}

body[data-page="process"] .process-hero__support {
  max-width: 40ch;
  margin: 28px 0 0;
  font-size: var(--p-lead);
  line-height: 1.45;
  color: var(--c-bone-2);
}

/* The set as a band: the frame drops the left third of the source (the cart in
   the foreground) and holds the jib, the crew and the lit talent. */
body[data-page="process"] .process-hero__frame {
  display: block;
  position: relative;
  height: min(42vw, 620px);
  min-height: 0;
  margin: clamp(48px, 5vw, 72px) 0 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--c-ink);
}

/* Source is 2400x1800. The band shows source x 585 to 2400 and y 120 onward:
   the left edge falls in the gap before the #23 jacket, so no figure is cut,
   and the foreground cart and seated operator fall below the band. */
body[data-page="process"] .process-hero__frame img {
  display: block;
  width: 132.2%;
  max-width: none;
  height: auto;
  margin: -6.6% 0 0 -32.2%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  clip-path: none;
  filter: none;
}

/* The section index: four plain links under the frame. */
body[data-page="process"] .process-journey {
  position: relative;
  top: auto;
  margin: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-page="process"] .process-journey__inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0 clamp(24px, 3vw, 48px);
  padding-top: 14px;
  padding-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
body[data-page="process"] .process-journey__inner::-webkit-scrollbar { display: none; }
/* On phone the row scrolls; the fade says there is more, and the end padding lets the last link clear it. */
@media (max-width: 720px) {
  body[data-page="process"] .process-journey__inner {
    padding-right: 48px;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
}

body[data-page="process"] .process-journey a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0 !important;
  background: none;
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: none;
  color: var(--p-label);
}

body[data-page="process"] .process-journey a:hover,
body[data-page="process"] .process-journey a:focus-visible {
  color: var(--c-bone);
  background: none;
}

@media (min-width: 1200px) {
  /* The support sits beside the headline's short second line. */
  body[data-page="process"] .process-hero__copy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    column-gap: 40px;
  }
  body[data-page="process"] .process-hero__copy h1 { grid-column: 1 / -1; grid-row: 2; max-width: 13.6em; }
  body[data-page="process"] .process-hero__support {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    max-width: none;
    margin: 0 0 0.12em;
  }
}

/* ---------- Phases: shared ground and rhythm ---------- */
body[data-page="process"] .process-phase {
  padding-block: var(--p-sec) !important;
  background: var(--c-ink) !important;
  color: var(--c-bone);
}

body[data-page="process"] .process-phase__head {
  display: block;
  margin: 0 0 var(--p-head);
}

body[data-page="process"] .process-phase__number { margin-bottom: 18px; }

/* Phase one, Groundwork: written. Title left, its line to the right. */
body[data-page="process"] .process-phase--groundwork .process-phase__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--p-col);
  align-items: end;
}
body[data-page="process"] .process-phase--groundwork .process-phase__number { grid-column: 1 / -1; }
body[data-page="process"] .process-phase--groundwork .process-phase__head h2 { grid-column: 1 / span 7; }
body[data-page="process"] .process-phase--groundwork .process-phase__head > p:last-child {
  grid-column: 8 / -1;
  padding-bottom: 0.3em;
}

body[data-page="process"] .process-beats--groundwork {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--p-col);
  row-gap: var(--p-gap);
  background: none;
  border: 0;
}

body[data-page="process"] .process-beat {
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: none !important;
  color: var(--c-bone);
}

body[data-page="process"] .process-beat--stakes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--p-col);
  padding-top: clamp(32px, 3vw, 48px);
  border-top: 1px solid var(--c-line);
}
body[data-page="process"] .process-beat--stakes > * { grid-column: 1 / -1; }
body[data-page="process"] .process-beat--stakes h3 { max-width: none; margin-bottom: clamp(28px, 3vw, 44px); }
body[data-page="process"] .process-beat--stakes p { grid-column: 1 / span 5; }
body[data-page="process"] .process-beat--stakes p + p { grid-column: 7 / span 5; grid-row: 3; margin-top: 0; }
body[data-page="process"] .process-beat--stakes strong { grid-column: 1 / span 6; }

body[data-page="process"] .process-beat--standard,
body[data-page="process"] .process-beat--flight {
  padding-top: clamp(32px, 3vw, 48px);
  border-top: 1px solid var(--c-line);
}
body[data-page="process"] .process-beat--standard { grid-column: 1 / span 6; }
body[data-page="process"] .process-beat--flight { grid-column: 7 / span 6; }
body[data-page="process"] .process-beat--standard h3,
body[data-page="process"] .process-beat--flight h3 { max-width: 13ch; margin-bottom: 28px; }
body[data-page="process"] .process-beat--flight p { color: var(--c-bone-2); }

/* Phase two, The Course: the frame from set and the phase name share the opening
   row on bone; the frame is held to 16:9 so the green stays one picture. */
body[data-page="process"] .process-phase--course,
body[data-page="process"] .process-phase--return { border-top: 0; }
body[data-page="process"] .process-phase--course {
  background: var(--c-bone) !important;
  color: var(--c-ink);
}

body[data-page="process"] .process-phase--course .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--p-col);
  align-items: start;
}

body[data-page="process"] .process-departure {
  grid-column: 1 / span 8;
  grid-row: 1;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--p-head);
  border: 0;
  background: var(--c-ink);
  overflow: hidden;
}
body[data-page="process"] .process-departure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: none;
  filter: none;
}

body[data-page="process"] .process-phase--course .process-phase__head {
  grid-column: 9 / -1;
  grid-row: 1;
  align-self: end;
  margin: 0 0 var(--p-head);
}
body[data-page="process"] .process-phase--course .process-phase__number,
body[data-page="process"] .process-phase--course .process-beat__index { color: var(--p-label-bone); }
body[data-page="process"] .process-phase--course .process-phase__head > p:last-child {
  margin-top: 20px;
  color: var(--p-ink-text);
}

body[data-page="process"] .process-course__sequence { display: contents; }
body[data-page="process"] .process-course__beat--craft { grid-column: 1 / span 6; grid-row: 2; }
body[data-page="process"] .process-course__beat--contact { grid-column: 7 / -1; grid-row: 2; }
body[data-page="process"] .process-course__beat {
  min-height: 0;
  padding: clamp(28px, 2.6vw, 40px) 0 0;
  border: 0;
  border-top: 1px solid rgba(10, 10, 10, 0.16);
  overflow: visible;
  background: none;
  color: var(--c-ink);
}
body[data-page="process"] .process-course__beat h3 { margin-bottom: 28px; }
body[data-page="process"] .process-course__beat > p:last-child { color: var(--p-ink-text); }

/* Phase three, The Return: the crew beside what comes back. */
body[data-page="process"] .process-phase--return .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--p-col);
  align-items: start;
}
body[data-page="process"] .process-phase--return .process-phase__head { grid-column: 1 / span 8; }
body[data-page="process"] .process-phase--return .process-phase__head > p:last-child { margin-top: 24px; }

body[data-page="process"] .process-return__image {
  grid-column: 1 / span 7;
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: 0;
  background: var(--c-ink);
  overflow: hidden;
}
/* The source frame carries black letterbox bars; the crop keeps them outside
   the frame and holds both CREW jackets. */
body[data-page="process"] .process-return__image img {
  position: absolute;
  top: -4.82%;
  left: -39.4%;
  width: auto;
  max-width: none;
  height: 113.7%;
  max-height: none;
  object-fit: fill;
  mix-blend-mode: normal;
  opacity: 1;
  filter: none;
}

body[data-page="process"] .process-return__ledger {
  grid-column: 9 / -1;
  display: grid;
  row-gap: clamp(40px, 4vw, 64px);
  margin: 0;
  padding: 0;
  border: 0;
}
body[data-page="process"] .process-return__ledger li {
  display: block;
  min-height: 0;
  padding: clamp(24px, 2.2vw, 32px) 0 0;
  border: 0;
  border-top: 1px solid var(--c-line);
}
body[data-page="process"] .process-return__ledger li::after { content: none !important; display: none; }
body[data-page="process"] .process-return__text .process-return__q {
  max-width: 24ch;
  margin: 16px 0 0;
  font-family: var(--f-display);
  font-size: var(--p-d3);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-bone) !important;
}
body[data-page="process"] .process-return__text p:not(.process-return__q) {
  max-width: 46ch;
  margin: 16px 0 0;
  font-size: var(--p-body);
  line-height: 1.55;
  color: var(--c-bone-2);
}

/* ---------- Close: ink, one ask ---------- */
body[data-page="process"] .process-close {
  display: block;
  min-height: 0;
  padding-block: var(--p-sec) calc(var(--p-sec) * 0.6) !important;
  border-top: 1px solid var(--c-line);
  background: var(--c-ink) !important;
  color: var(--c-bone);
}

body[data-page="process"] .process-close__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--p-col);
  align-items: end;
}

body[data-page="process"] .process-close__line {
  grid-column: 1 / span 7;
  max-width: 30ch;
  margin: 0 0 clamp(28px, 3vw, 44px);
  font-family: var(--f-display);
  font-size: var(--p-d3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-bone-2);
}

body[data-page="process"] .process-close h2 {
  grid-column: 1 / span 8;
  grid-row: 2 / span 2;
  align-self: end;
  max-width: 5.9em;
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--p-d2);
  font-weight: 500;
  line-height: var(--p-lh-display);
  letter-spacing: var(--p-track-l);
  color: var(--c-bone);
}

body[data-page="process"] .process-close__email {
  grid-column: 9 / -1;
  grid-row: 2;
  justify-self: start;
  margin: 0;
  border-bottom: 1px solid var(--c-line-2);
  font-family: var(--f-display);
  font-size: var(--p-d3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-bone);
  overflow-wrap: anywhere;
  transition: border-color 200ms var(--ease);
}
body[data-page="process"] .process-close__email:hover { border-color: var(--c-bone); }

body[data-page="process"] .process-close .btn--primary {
  grid-column: 9 / -1;
  grid-row: 3;
  justify-self: start;
  margin-top: 28px;
  background: var(--c-bone);
  color: var(--c-ink);
}
body[data-page="process"] .process-close .btn--primary:hover { background: #fff; }

/* The descriptor now repeats the footer tagline word for word, directly below:
   shown once, in the footer (declared repeat removal, fix list 2026-11-01). */
body[data-page="process"] .process-close__descriptor { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  body[data-page="process"] .process-departure { grid-column: 1 / span 9; }
  body[data-page="process"] .process-phase--course .process-phase__head { grid-row: 2; align-self: start; }
  body[data-page="process"] .process-course__beat--craft,
  body[data-page="process"] .process-course__beat--contact { grid-row: 3; }
  body[data-page="process"] .process-phase--course .process-phase__head,
  body[data-page="process"] .process-phase--return .process-phase__head,
  body[data-page="process"] .process-return__image,
  body[data-page="process"] .process-return__ledger { grid-column: 1 / -1; }
  body[data-page="process"] .process-beat--stakes p { grid-column: 1 / span 6; }
  body[data-page="process"] .process-beat--stakes p + p { grid-column: 7 / -1; }
  body[data-page="process"] .process-return__image { margin-bottom: var(--p-gap); }
  body[data-page="process"] .process-return__ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--p-col);
  }
  body[data-page="process"] .process-close__line,
  body[data-page="process"] .process-close h2,
  body[data-page="process"] .process-close__email,
  body[data-page="process"] .process-close .btn--primary {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  body[data-page="process"] .process-close h2 { margin-bottom: clamp(36px, 5vw, 56px); }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  body[data-page="process"] {
    --p-lead: 18px;
    --p-body: 16px;
    --p-sec: 72px;
    --p-head: 44px;
    --p-gap: 48px;
  }
  body[data-page="process"] .process-hero { padding-top: 116px !important; }
  body[data-page="process"] .process-hero__copy h1 { letter-spacing: var(--p-track-l); }
  body[data-page="process"] .process-hero__support { margin-top: 20px; }
  body[data-page="process"] .process-hero__frame { height: auto; aspect-ratio: 2 / 1; margin-top: 36px; }
  body[data-page="process"] .process-hero__frame img { margin-top: -2.2%; }
  /* One quiet row; it scrolls sideways when the four names do not fit. */
  body[data-page="process"] .process-journey__inner { gap: 0 22px; padding-top: 8px; }

  body[data-page="process"] .process-phase__head,
  body[data-page="process"] .process-phase--groundwork .process-phase__head,
  body[data-page="process"] .process-phase--course .process-phase__head { display: block; }
  body[data-page="process"] .process-phase__number { margin-bottom: 16px; }
  body[data-page="process"] .process-phase--groundwork .process-phase__head > p:last-child,
  body[data-page="process"] .process-phase--course .process-phase__head > p:last-child { margin-top: 20px; padding: 0; }
  body[data-page="process"] .process-phase--course .process-phase__head > p:last-child,
  body[data-page="process"] .process-phase--return .process-phase__head > p:last-child { margin-top: 20px; }

  body[data-page="process"] .process-beats--groundwork { display: block; }
  body[data-page="process"] .process-beat--stakes { display: block; }
  body[data-page="process"] .process-beat + .process-beat { margin-top: var(--p-gap); }
  body[data-page="process"] .process-beat--stakes,
  body[data-page="process"] .process-beat--standard,
  body[data-page="process"] .process-beat--flight,
  body[data-page="process"] .process-course__beat { padding-top: 28px; }
  body[data-page="process"] .process-beat h3,
  body[data-page="process"] .process-course__beat h3 { margin: 16px 0 22px; }
  body[data-page="process"] .process-beat--stakes p + p { margin-top: 16px; }
  body[data-page="process"] .process-beat strong { margin-top: 22px; }

  body[data-page="process"] .process-departure { grid-column: 1 / -1; }
  body[data-page="process"] .process-course__beat--craft,
  body[data-page="process"] .process-course__beat--contact { grid-column: 1 / -1; grid-row: auto; }
  body[data-page="process"] .process-course__beat--craft { margin-bottom: var(--p-gap); }

  body[data-page="process"] .process-return__image {
    margin-inline: calc(-1 * var(--gutter));
    margin-bottom: var(--p-gap);
  }
  body[data-page="process"] .process-return__ledger {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  body[data-page="process"] .process-close__line { margin-bottom: 24px; }
  body[data-page="process"] .process-close h2 { margin-bottom: 36px; }
  body[data-page="process"] .process-close .btn--primary { margin-top: 24px; }
}

/* Phone: the Return questions and the close line run to three or four lines at 24px; give them room. */
@media (max-width: 720px) {
  body[data-page="process"] .process-return__text .process-return__q,
  body[data-page="process"] .process-close__line { line-height: 1.3; }
}