.factory-feature {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: 0;
  background: var(--paper, #f2e9de);
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
}
.factory-machine { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; }
.factory-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(270deg, transparent 24%, rgb(242 233 222 / 6%) 34%, rgb(242 233 222 / 46%) 47%, rgb(242 233 222 / 92%) 60%, rgb(242 233 222 / 97%) 78%, rgb(242 233 222 / 96%));
}
.factory-copy { grid-area: 1 / 1; max-width: 780px; padding: clamp(45px, 7vh, 95px) 0 clamp(45px, 7vh, 95px) clamp(28px, 5vw, 100px); }
.factory-kicker { line-height: normal; display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(15px, 2.4vh, 32px); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.factory-kicker::before { content: ""; width: 30px; height: 2px; background: #aa6046; }
.factory-title { margin: 0; font-weight: 700; font-size: clamp(46px, 4.9vw, 100px); line-height: 1.05; letter-spacing: -.055em; }
.factory-title span, .factory-title em { display: table; }
.factory-title span { color: #202f46; text-transform: uppercase; }
.factory-title em { margin-top: .04em; font: italic 400 1.12em/1.15 "Libre Caslon Text", Georgia, serif; letter-spacing: -.055em; color: var(--italic-ink, #827C70); }
@supports (background-clip: text) {
  .factory-title span {
    background-image: linear-gradient(100deg, #17283f 10%, #41485b 70%, #72596a);
    background-clip: text;
    color: transparent;
  }
}
.factory-description { max-width: 46ch; margin: clamp(22px, 3.2vh, 38px) 0; font-size: clamp(16px, 1.19vw, 20px); line-height: 1.65; }
.factory-process { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 0; padding: 16px 0 0; border-top: 1px solid rgb(32 47 70 / 35%); list-style: none; font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.factory-poster {
  grid-area: 1 / 2;
  align-self: start;
  justify-self: end;
  position: relative;
  isolation: isolate;
  --poster-width: min(29vw, 51svh, 600px);
  width: var(--poster-width);
  margin-block: clamp(36px, 5.7svh, 86px) 30px;
  /* Align the outermost rotated corner of the print or its backing to the viewport. */
  margin-inline: 0 max(calc(var(--poster-width) * .03324), calc(var(--poster-width) * .01347 + 6.31px));
  transform: rotate(-3deg);
  box-shadow: 0 16px 32px rgb(18 30 41 / 30%);
}
.factory-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(6px, 6px) rotate(1.8deg);
  background: #e7ddcf;
  box-shadow: 0 2px 9px rgb(20 29 39 / 24%);
}
.factory-print {
  position: relative;
  aspect-ratio: 1955 / 2534;
  border: 2px solid #f2e9de;
  background: #1c2d41;
}
.factory-print::before, .factory-print::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("yilang-capacity-factory-composite-4k.webp") left center / auto 100% no-repeat;
}
/* Only the red sign in the original photograph gets extra colour and contrast. */
.factory-print::after {
  filter: saturate(1.55) contrast(1.16);
  mask-image: radial-gradient(ellipse 14% 5% at 67.2% 44%, black 48%, transparent 100%);
}
@media (max-width: 740px) {
  .factory-feature { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .factory-machine { object-position: 45% 32%; }
  .factory-feature::before { background: linear-gradient(180deg, transparent 24%, rgb(242 233 222 / 22%) 40%, rgb(242 233 222 / 97%) 56%, #f2e9de 74%); }
  .factory-poster { grid-area: 1 / 1; --poster-width: min(62vw, 312px); margin-block: 14px 54px; }
  .factory-copy { grid-row: 2; width: min(100%, 620px); padding: 28px 7vw 36px; }
  .factory-kicker { margin-bottom: 12px; }
  .factory-title { font-size: clamp(44px, 7vw, 60px); }
  .factory-description { margin-block: 18px; }
}
@media (forced-colors: active) { .factory-title span, .factory-title em { color: CanvasText; } }

.factory-transcript {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}