/* Craft retains the atelier green; Process uses a continuous black ground. */
#craft .fp-scroll,
#process .fp-scroll,
#craft .craft,
#process .process {
  background: var(--ink-deep);
  color: #fff;
}

#process .fp-scroll,
#process .process { background: #000; }
#process .fp-scroll { scrollbar-color: #ffffff55 #000; }
body:has(#process.fp-active) .site-header,
body:has(#process.fp-active) .mobile-menu nav,
body:has(#process.fp-active) .preview-badge { background: #000; }

#craft .section-kicker,
#process .section-kicker { color: #ffffffb8; }

/* One composition: left headline, right process frame, then the five-tile study. */
#process .process {
  --process-gutter: max(6vw, 42px);
  --process-image-height: clamp(280px, calc(100dvh - var(--header-height) - 363px), 540px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px var(--process-gutter) 0;
}
#process .process-overview {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 5vw;
}
#process .process-heading { display: block; margin: 0; }
#process .process-heading h2 {
  max-width: 10ch;
  color: #fff;
  font-size: clamp(42px, min(4.5vw, 6.8vh), 68px);
  line-height: 1.06;
}
#process .process-heading .section-kicker {
  margin-bottom: 20px;
  font-size: 10px;
  letter-spacing: .22em;
}
#process .process-heading > p {
  max-width: 34ch;
  margin-top: 20px;
  color: #ffffffc7;
  font-size: 14px;
  line-height: 1.75;
}
#process .process-card {
  min-width: 0;
  padding: 20px 24px;
  border: 1px solid #ffffff30;
  background: #000;
}
#process .process-list article {
  display: grid;
  grid-template-columns: 22px clamp(180px, 14vw, 210px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #ffffff1c;
}
#process .process-list article:first-child { padding-top: 0; }
#process .process-list article:last-child { padding-bottom: 0; border: 0; }
#process .process-list article > span {
  color: #ffffff70;
  font-size: 11px;
  letter-spacing: .04em;
}
#process .process-list h3 {
  grid-column: 2;
  margin: 0;
  color: #fff;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.22;
}
#process .process-list p {
  grid-column: 3;
  max-width: none;
  margin: 0;
  color: #ffffffba;
  font-size: 12px;
  line-height: 1.55;
}
#process .process-study {
  position: relative;
  container-type: size;
  isolation: isolate;
  width: calc(100% + var(--process-gutter) * 2);
  height: var(--process-image-height);
  flex: 1 0 var(--process-image-height);
  margin: auto calc(-1 * var(--process-gutter)) 0;
  overflow: hidden;
  border: 0;
  background: #000;
}
#process .process-study::before {
  content: "";
  position: absolute;
  inset: 66% 0 0;
  background: url('./images/winter-five-directions-user.png') center bottom / 100% auto no-repeat;
  opacity: .55;
  mask-image: linear-gradient(180deg, transparent, #000 34%), linear-gradient(90deg, #000 12%, transparent 35% 65%, #000 88%);
  mask-composite: intersect;
  pointer-events: none;
}
#process .process-study img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: block;
  width: min(100%, 242cqh);
  max-width: none;
  height: auto;
  mask-image: linear-gradient(90deg, transparent, #000 4% 96%, transparent);
}

/* Craft retains its copy; its photograph now closes the Process page. */
#craft .craft { gap: clamp(28px, 5vh, 56px); }
#craft .craft-heading { margin: 0; align-items: center; }
#craft .craft-heading h2 {
  color: #fff;
  font-size: clamp(38px, min(4.1vw, 6.1vh), 64px);
}
#craft .craft-heading > p { color: #ffffffbf; }
#craft .craft-grid { margin: 0; border-color: #ffffff2e; }
#craft .craft-grid article,
#craft .craft-grid article + article {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 7px;
  padding: 16px 24px;
  border-color: #ffffff2e;
}
#craft .craft-grid article:first-child { padding-left: 0; }
#craft .craft-grid article:last-child { padding-right: 0; }
#craft .craft-grid span { color: #ffffff80; padding-top: 5px; }
#craft .craft-grid h3 { color: #fff; margin: 0; font-size: 24px; line-height: 1.2; }
#craft .craft-grid p { grid-column: 2; max-width: none; color: #ffffffbf; font-size: 12px; line-height: 1.65; }
#craft .craft-note {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  align-items: center;
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid #ffffff2e;
}
#craft .craft-note h3 {
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 400;
}
#craft .craft-note p {
  margin: 0;
  color: #ffffffbf;
  font-size: 13px;
  line-height: 1.75;
}

@media (min-width: 1081px) and (max-height: 780px) {
  #process .process { padding-block: 18px 0; gap: 8px; }
  #process .process-list article { padding-block: 8px; }
  #craft .craft-grid article { padding-top: 12px; padding-bottom: 12px; }
  #craft .craft-grid h3 { font-size: 22px; }
}

@media (min-width: 761px) and (max-width: 1080px) {
  #process .process-overview { gap: 4vw; }
  #process .process-list article { grid-template-columns: 20px minmax(0, 1fr); gap: 5px 12px; }
  #process .process-list article > span { grid-row: 1 / 3; align-self: start; padding-top: 3px; }
  #process .process-list p { grid-column: 2; }
  #craft .craft-grid article,
  #craft .craft-grid article + article { padding-left: 14px; padding-right: 14px; }
  #craft .craft-grid article:first-child { padding-left: 0; }
  #craft .craft-grid article:last-child { padding-right: 0; }
}

@media (max-width: 760px) {
  #process .process { --process-gutter: 22px; justify-content: flex-start; padding-block: 36px 0; gap: 24px; }
  #process .process-overview { grid-template-columns: 1fr; gap: 28px; }
  #process .process-heading h2 { max-width: 12ch; font-size: clamp(38px, 10vw, 52px); }
  #process .process-heading > p { margin-top: 20px; max-width: 40ch; }
  #process .process-card { padding: 24px 20px; }
  #process .process-list article { grid-template-columns: 22px minmax(0, 1fr); gap: 6px 12px; padding: 17px 0; }
  #process .process-list article > span { grid-row: 1 / 3; align-self: start; padding-top: 5px; }
  #process .process-list h3 { font-size: 24px; }
  #process .process-list p { grid-column: 2; font-size: 13px; line-height: 1.7; }
  #process .process-study { height: auto; min-height: 0; flex: 0 0 auto; aspect-ratio: 2.42; }
  #process .process-study img { width: 100%; height: auto; }
  #craft .craft { justify-content: flex-start; gap: 26px; }
  #craft .craft-heading { gap: 20px; }
  #craft .craft-grid article,
  #craft .craft-grid article + article { padding: 20px 0; }
  #craft .craft-grid p { font-size: 13px; }
  #craft .craft-note { grid-template-columns: 1fr; gap: 14px; padding-top: 0; border: 0; }
}