/* Studio Wye / a film follows a current, from the first question to publication. */
.boutique-work .work-process.project-flow {
  --flow-ink: #22271f;
  --flow-paper: #f3e9d8;
  --flow-muted: #c4c8b8;
  --flow-rust: #e99a70;
  --flow-gold: #efc77b;
  display: block;
  background: var(--flow-ink);
  color: var(--flow-paper);
  padding-block: clamp(62px, 7vw, 108px);
  overflow: clip;
}
.project-flow-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10%; align-items: end; }
.boutique-work .project-flow .eyebrow { margin-bottom: 25px; color: #c8bfa9; }
.boutique-work .project-flow h2 { font: 500 clamp(44px, 5.1vw, 74px)/1.08 var(--sans); letter-spacing: -.05em; }
.boutique-work .project-flow h2 .pixel-accent { color: var(--flow-rust); font-size: .69em; }
.boutique-work .project-flow-intro > p:not(.eyebrow) { margin: 22px 0 0; max-width: 36ch; color: var(--flow-muted); font-size: 16px; line-height: 1.75; }
.project-flow-founder { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: start; gap: 23px; padding-bottom: 5px; }
.project-flow-founder > img { display: block; width: 90px; height: 115px; object-fit: cover; object-position: 50% 30%; filter: saturate(.8); }
.boutique-work .project-flow-founder p { color: var(--flow-muted); font-size: 14px; line-height: 1.8; margin: 10px 0 0; max-width: 37ch; }
.boutique-work .project-flow-founder .project-flow-founder-label { color: var(--flow-paper); font-size: 15px; line-height: 1.5; font-weight: 500; margin: 0; }
.boutique-work .project-flow-founder .quiet-link { color: var(--flow-paper); border-color: #747866; margin-top: 13px; padding-block: 6px; font-size: 12px; gap: 18px; }
.boutique-work .project-flow-founder .quiet-link:hover { color: var(--flow-rust); border-color: var(--flow-rust); }
.project-flow-key { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(44px, 5.5vw, 78px); padding: 18px 0; border-top: 1px solid #65705a; border-bottom: 1px solid #46513e; font: 10px/1.5 var(--mono); letter-spacing: .035em; color: #c5cab8; }
.project-flow-key > span:first-child { display: flex; align-items: center; gap: 11px; }
.project-flow-key i { display: block; width: 6px; height: 6px; background: var(--flow-gold); box-shadow: -4px -4px 0 #efc77b35; }
.project-flow-readout { display: flex; gap: 26px; align-items: center; }
.project-flow-readout > span:first-child { color: var(--flow-gold); min-width: 165px; text-align: right; }
.project-flow-scroll { color: #a8af9c; }
.boutique-work .project-flow .project-flow-scope { margin: 16px 0 0; max-width: 90ch; color: #b4bda7; font-size: 12px; line-height: 1.75; }
.project-flow-map { position: relative; margin-top: 36px; padding: 8px 30px 0 14px; isolation: isolate; }
.project-flow-river { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; z-index: 0; }
.project-flow-bank { stroke: #839370; stroke-width: 1; stroke-opacity: .55; stroke-linejoin: miter; }
.project-flow-stream { stroke: var(--flow-rust); stroke-width: 2; stroke-linejoin: miter; }
.project-flow-marker { fill: var(--flow-gold); stroke: var(--flow-ink); stroke-width: 3; opacity: 0; }
.project-flow.is-flow-ready .project-flow-marker { opacity: 1; }
.project-flow-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(25px, 4vw, 62px); row-gap: 52px; padding: 0; margin: 0; list-style: none; }
.project-flow-stages > .flow-stage { position: relative; min-width: 0; padding: 29px 0 0; margin: 0; border: 0; }
.flow-node { position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border: 1px solid #a6ac94; background: var(--flow-ink); z-index: 2; transition: background .2s, border-color .2s; }
.flow-stage.is-flow-past .flow-node, .flow-stage.is-flow-current .flow-node { background: var(--flow-rust); border-color: var(--flow-rust); }
.flow-stage.is-flow-current .flow-node { background: var(--flow-gold); border-color: var(--flow-gold); box-shadow: 0 0 0 5px #efc77b12; }
.boutique-work .project-flow .flow-stage-kicker { display: flex; align-items: baseline; gap: 12px; color: #c1c6b3; font: 10px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; margin: 0 0 15px; }
.flow-stage-kicker > span { color: var(--flow-rust); font-size: 10px; letter-spacing: .02em; }
.boutique-work .project-flow .flow-stage h3 { color: var(--flow-paper); font: 500 clamp(23px, 2.25vw, 34px)/1.16 var(--sans); letter-spacing: -.035em; margin: 0; }
.boutique-work .project-flow .flow-stage-description { color: var(--flow-muted); font-size: 14px; line-height: 1.8; margin: 16px 0 0; max-width: 35ch; }
.flow-stage-note { display: block; margin-top: 21px; color: #d5ad83; font: 9px/1.7 var(--mono); letter-spacing: .02em; }
.flow-stage-research { grid-column: 1 / span 2; grid-row: 1; }
.flow-stage-script { grid-column: 3; grid-row: 1; }
.flow-stage-shape { grid-column: 3; grid-row: 2; }
.flow-stage-aroll { grid-column: 2; grid-row: 2; }
.flow-stage-broll { grid-column: 1; grid-row: 2; }
.flow-stage-edit { grid-column: 1; grid-row: 3; }
.flow-stage-search { grid-column: 2; grid-row: 3; }
.flow-stage-thumbnail { grid-column: 3; grid-row: 3; }
.boutique-work .project-flow .flow-stage-research h3 { font-size: clamp(30px, 3vw, 45px); max-width: 19ch; }
.boutique-work .project-flow .flow-stage-research > .flow-stage-description { margin-top: 12px; max-width: 52ch; }
.flow-research-signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; list-style: none; padding: 22px 0 0; margin: 22px 0 0; border-top: 1px solid #4d5743; }
.flow-research-signals > li { margin: 0; padding: 0; min-width: 0; }
.flow-signal-mark { display: block; color: var(--flow-gold); font: 18px/1 var(--mono); margin-bottom: 14px; }
.flow-research-signals h4 { font: 500 13px/1.5 var(--sans); letter-spacing: -.015em; color: var(--flow-paper); margin: 0; }
.boutique-work .project-flow .flow-research-signals p { color: #bac1ac; font-size: 12px; line-height: 1.75; margin: 8px 0 0; }
.flow-edit-timeline { display: flex; gap: 3px; height: 17px; margin-top: 24px; width: min(180px, 90%); align-items: center; }
.flow-edit-timeline i { display: block; height: 9px; flex: 1; background: #82906b; }
.flow-edit-timeline i:nth-child(2) { flex: 2.5; background: #ba805a; }
.flow-edit-timeline i:nth-child(4) { flex: 1.8; height: 17px; background: var(--flow-gold); }
.flow-edit-timeline i:nth-child(6) { flex: 1.3; background: #ba805a; }
.project-flow-stages > .flow-stage-publish { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: 1.15fr 1fr auto; align-items: center; gap: 45px; padding-bottom: 8px; }
.boutique-work .project-flow .flow-stage-publish h3 { font-size: clamp(31px, 3.4vw, 49px); }
.boutique-work .project-flow .flow-stage-publish h3 .pixel-accent { color: var(--flow-gold); font-size: .7em; white-space: nowrap; }
.boutique-work .project-flow .flow-stage-publish .flow-stage-description { max-width: 37ch; margin: 17px 0 0; }
.flow-publish-mark { display: grid; grid-template-columns: repeat(3, 9px); grid-template-rows: repeat(3, 9px); gap: 3px; margin-top: 19px; }
.flow-publish-mark i { background: var(--flow-gold); }
.flow-publish-mark i:first-child { grid-column: 2; }
.flow-publish-mark i:nth-child(2) { grid-column: 1; grid-row: 2; }
.flow-publish-mark i:nth-child(3) { grid-column: 2; grid-row: 2; }
.flow-publish-mark i:nth-child(4) { grid-column: 3; grid-row: 2; }
.flow-publish-mark i:nth-child(5) { grid-column: 1; grid-row: 3; }
.flow-publish-mark i:nth-child(6) { grid-column: 2; grid-row: 3; }
.flow-publish-mark i:nth-child(7) { grid-column: 3; grid-row: 3; }
/* A readable, connected map also exists when the enhancement is unavailable. */
.project-flow:not(.is-flow-ready) .flow-stage::before { content: ''; position: absolute; left: 6px; right: -30px; top: 0; height: 1px; background: #83937066; }
@media (max-width: 1000px) {
  .project-flow-heading { gap: 6%; grid-template-columns: 1.1fr 1fr; }
  .project-flow-founder { grid-template-columns: 70px minmax(0, 1fr); gap: 17px; }
  .project-flow-founder > img { width: 70px; height: 92px; }
  .project-flow-stages { column-gap: 30px; row-gap: 42px; }
  .flow-research-signals { gap: 16px; }
  .project-flow-scroll { display: none; }
  .project-flow-stages > .flow-stage-publish { gap: 28px; grid-template-columns: 1.2fr 1fr auto; }
}
@media (max-width: 760px) {
  .boutique-work .work-process.project-flow { padding-block: 52px; }
  .project-flow-heading { grid-template-columns: 1fr; gap: 30px; }
  .boutique-work .project-flow h2 { font-size: clamp(43px, 8.7vw, 64px); }
  .boutique-work .project-flow-intro > p:not(.eyebrow) { font-size: 15px; max-width: 36ch; margin-top: 18px; }
  .project-flow-founder { grid-template-columns: 65px minmax(0, 1fr); gap: 19px; padding: 0; max-width: 450px; }
  .project-flow-founder > img { width: 65px; height: 84px; }
  .boutique-work .project-flow-founder p { font-size: 13px; margin-top: 7px; max-width: 37ch; }
  .boutique-work .project-flow-founder .project-flow-founder-label { font-size: 14px; }
  .boutique-work .project-flow-founder .quiet-link { font-size: 11px; margin-top: 8px; }
  .project-flow-key { margin-top: 36px; gap: 14px; font-size: 9px; padding-block: 15px; }
  .project-flow-readout { display: none; }
  .project-flow-map { padding: 0 0 0 30px; margin-top: 30px; }
  .project-flow-stages { display: block; }
  .project-flow-stages > .flow-stage { padding: 0 0 31px; }
  .project-flow-stages > .flow-stage + .flow-stage { padding-top: 29px; border-top: 1px solid #46513e; }
  .flow-node { left: -30px; top: 3px; }
  .project-flow-stages > .flow-stage + .flow-stage .flow-node { top: 33px; }
  .boutique-work .project-flow .flow-stage-kicker { margin-bottom: 12px; font-size: 9px; gap: 10px; }
  .boutique-work .project-flow .flow-stage h3 { font-size: 26px; line-height: 1.2; }
  .boutique-work .project-flow .flow-stage h3 br { display: none; }
  .boutique-work .project-flow .flow-stage-description { max-width: 52ch; margin-top: 12px; font-size: 14px; line-height: 1.75; }
  .boutique-work .project-flow .flow-stage-research h3 { font-size: 33px; max-width: 18ch; }
  .flow-research-signals { grid-template-columns: 1fr; gap: 19px; margin-top: 22px; padding-top: 21px; }
  .flow-research-signals > li { display: grid; grid-template-columns: 20px 1fr; gap: 3px 9px; }
  .flow-signal-mark { grid-row: 1 / span 2; margin: 2px 0 0; font-size: 16px; }
  .flow-research-signals h4 { font-size: 13px; }
  .boutique-work .project-flow .flow-research-signals p { grid-column: 2; margin: 0; max-width: 45ch; font-size: 12px; }
  .flow-stage-note { margin-top: 14px; font-size: 9px; }
  .flow-edit-timeline { margin-top: 19px; }
  .project-flow-stages > .flow-stage-publish { display: block; padding-bottom: 0; }
  .boutique-work .project-flow .flow-stage-publish h3 { font-size: clamp(31px, 7.5vw, 43px); max-width: 19ch; }
  .boutique-work .project-flow .flow-stage-publish .flow-stage-description { max-width: 46ch; margin-top: 13px; }
  .flow-publish-mark { display: none; }
  .project-flow:not(.is-flow-ready) .flow-stage::before { left: -25px; right: auto; top: 8px; bottom: -37px; width: 1px; height: auto; }
  .project-flow:not(.is-flow-ready) .flow-stage-publish::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .project-flow .flow-node { transition: none; }
  .project-flow .project-flow-stream { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: .6; }
  .project-flow.is-flow-ready .project-flow-marker { display: none; }
}