/* Original generated artwork, paired with selectable, translated process labels. */
.flow-illustrated { padding-block: 36px 40px; }
.flow-illustrated + .flow-illustrated { margin-top: 42px; }
.flow-illustrated .flow-heading { margin-bottom: 20px; }
.flow-illustrated .flow-steps { gap: 0; grid-template-columns: repeat(6,minmax(0,1fr)); }
.flow-illustrated .flow-steps li,
html[lang] .flow-illustrated .flow-steps li:nth-child(n) {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  border: 0;
  min-width: 0;
}
.flow-illustrated .flow-steps li::after {
  content: '→';
  position: absolute;
  top: 78px;
  right: -9px;
  z-index: 1;
  color: #9b8056;
  font: 400 24px/1 var(--latin);
}
.flow-illustrated .flow-steps li:last-child::after { display: none; }
.flow-illustrated .flow-art {
  display: block;
  width: 100%;
  max-width: 184px;
  aspect-ratio: 1;
  margin-inline: auto;
  flex-shrink: 0;
  background-image: var(--flow-art);
  background-size: 300% 200%;
  background-position: var(--sprite-x) var(--sprite-y);
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}
.flow-air { --flow-art: url('/assets/flow-air-atlas.png'); }
.flow-sea { --flow-art: url('/assets/flow-sea-atlas.png'); }
.flow-illustrated .flow-step-copy { display: flex; flex-direction: column; flex: 1; }
.flow-illustrated .flow-step-heading { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.flow-illustrated .flow-number { font: 500 1rem/1.5 var(--latin); color: #927449; letter-spacing: -.025em; flex-shrink: 0; }
html[lang] .flow-illustrated .flow-steps h4 { font: 500 .9375rem/1.65 var(--sans); margin: 0; min-height: 3.3em; overflow-wrap: anywhere; }
html[lang] .flow-illustrated .flow-steps p { border: 0; padding: 0; }
html[lang] .flow-illustrated .flow-steps .flow-caption { font: 400 .875rem/1.8 var(--sans); margin-top: 9px; margin-bottom: 19px; color: var(--muted); }
html[lang] .flow-illustrated .flow-steps .flow-timing { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); font: 500 .875rem/1.5 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: #776444; }
@media (max-width:1100px) {
  .flow-illustrated .flow-steps { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px 0; }
  .flow-illustrated .flow-steps li:nth-child(3)::after { display: none; }
  .flow-illustrated .flow-steps li::after { top: 86px; }
  html[lang] .flow-illustrated .flow-steps h4 { min-height: 1.65em; }
}
@media (max-width:640px) {
  .flow-illustrated { padding-block: 27px 16px; }
  .flow-illustrated + .flow-illustrated { margin-top: 30px; }
  .flow-illustrated .flow-heading { margin-bottom: 19px; }
  .flow-illustrated .flow-steps { grid-template-columns: minmax(0,1fr); gap: 0; }
  html[lang] .flow-illustrated .flow-steps li:nth-child(n) { display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: center; gap: 18px; padding: 21px 0; }
  html[lang] .flow-illustrated .flow-steps li:nth-child(n+2) { border-top: 1px solid var(--line); }
  .flow-illustrated .flow-steps li::after,
  .flow-illustrated .flow-steps li:nth-child(3)::after { display: block; content: '↓'; top: auto; bottom: -11px; right: auto; left: 44px; font-size: 21px; background: #fafbf9; padding-inline: 3px; }
  .flow-illustrated .flow-steps li:last-child::after { display: none; }
  .flow-illustrated .flow-art { width: 104px; margin: 0; }
  .flow-illustrated .flow-step-heading { margin: 0; gap: 8px; }
  .flow-illustrated .flow-number { font-size: .875rem; }
  html[lang] .flow-illustrated .flow-steps h4 { min-height: 0; font-size: .9375rem; }
  html[lang] .flow-illustrated .flow-steps .flow-caption { font-size: .875rem; margin-block: 7px 9px; line-height: 1.7; }
  html[lang] .flow-illustrated .flow-steps .flow-timing { border: 0; padding: 0; margin: 0; font-size: .8125rem; }
}
@media (max-width:380px) {
  html[lang] .flow-illustrated .flow-steps li:nth-child(n) { grid-template-columns: 86px minmax(0,1fr); gap: 14px; }
  .flow-illustrated .flow-art { width: 86px; }
  .flow-illustrated .flow-steps li::after,
  .flow-illustrated .flow-steps li:nth-child(3)::after { left: 35px; }
}